/* design-exploration/phase-4-3-mobile-storytelling/styles.css */
:root {
  color-scheme: light;
  --paper: #fbf7f0;
  --cream: #f7f0e8;
  --ink: #352a27;
  --muted: #796963;
  --wine: #842b3d;
  --wine-rgb: 132, 43, 61;
  --line: rgba(53, 42, 39, .15);
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { background: #e9e1d8; scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; }
body {
  width: min(100%, 480px);
  margin: 0 auto;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 0 70px rgba(64, 45, 38, .11);
}
main { background: linear-gradient(180deg, #fbf7f0 0%, #faf5ee 53%, #fbf7f0 100%); }
button,
input,
select { color: inherit; font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; }
figure,
blockquote { margin: 0; }

/* 01 — the restrained cover remains the visual anchor. */
.hero { position: relative; min-height: 100svh; overflow: hidden; background: #d7c5b6; }
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 51% 44%;
  animation: hero-in 1.7s cubic-bezier(.2, .72, .2, 1) both;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40, 25, 18, .16), transparent 29%), linear-gradient(0deg, rgba(40, 25, 18, .3), transparent 34%);
}
.hero-top,
.hero-bottom { position: absolute; z-index: 1; left: 24px; right: 24px; color: #fffaf4; }
.hero-top { top: max(25px, env(safe-area-inset-top)); opacity: 0; animation: hero-copy .85s .42s ease forwards; }
.hero-top p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 10px; letter-spacing: .24em; }
.hero-bottom { bottom: max(33px, calc(env(safe-area-inset-bottom) + 23px)); opacity: 0; animation: hero-copy .85s .65s ease forwards; }
.hero-bottom h1 { margin: 0; font-family: var(--serif); font-size: clamp(28px, 8.3vw, 39px); line-height: 1.25; font-weight: 400; letter-spacing: .08em; }
.hero-bottom time { display: block; width: fit-content; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 250, 244, .5); font-family: Georgia, "Times New Roman", serif; font-size: 19px; letter-spacing: .09em; }
@keyframes hero-in { from { opacity: .35; transform: scale(1.027); } to { opacity: 1; transform: scale(1); } }
@keyframes hero-copy { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* Drapery: one shallow translucent fall, with one local echo only. */
.drapery { position: absolute; pointer-events: none; }
.drapery svg { display: block; width: 100%; height: 100%; overflow: visible; }
.js .fabric-main,
.js .fabric-echo { transform-origin: 50% 0; transition: transform 1.35s cubic-bezier(.2, .68, .2, 1), opacity 1s ease; }
.js .fabric-main { transform: translateY(-12px) scaleY(.88); opacity: .6; }
.js .fabric-echo { transform: translateY(-7px) scaleY(.92); opacity: .55; transition-delay: .08s; }
.js .drapery.seen .fabric-main,
.js .drapery.seen .fabric-echo { transform: none; opacity: 1; }

/* 02 — invitation copy and a separate photographic breath. */
.invitation-story { position: relative; min-height: 580px; padding: 178px 27px 64px; overflow: hidden; }
.drapery-opening { top: -10px; left: -28px; width: calc(100% + 56px); height: 150px; }
.story-copy { font-family: var(--serif); }
.invitation-copy { position: relative; z-index: 1; width: min(100%, 350px); margin: 0 auto; }
.invitation-copy h2 { margin: 0 0 34px; font-size: clamp(27px, 7.7vw, 36px); line-height: 1.45; font-weight: 400; letter-spacing: .045em; }
.story-copy p { margin: 0; font-size: 16px; line-height: 2.05; letter-spacing: .035em; }
.story-copy .story-emphasis { margin-top: 25px; color: var(--wine); }

.photo-pause { padding: 0 0 112px; overflow: hidden; }
.photo-pause figure { width: 91%; margin: 0 auto 0 0; }
.photo-pause img { aspect-ratio: 1.52 / 1; object-fit: cover; object-position: 50% 46%; }

/* 03 — relationship copy, 4:5 photo and poem are one mobile composition. */
.joy-story { position: relative; padding: 34px 0 100px; overflow: hidden; }
.joy-story::before { content: ""; position: absolute; top: 70px; left: -105px; width: 220px; height: 470px; border-radius: 50%; background: rgba(220, 181, 185, .055); transform: rotate(-9deg); }
.joy-composition { position: relative; min-height: 900px; }
.relationship-copy { position: relative; z-index: 2; width: 79%; margin: 0 24px 54px auto; }
.relationship-copy p { font-size: 16px; line-height: 2; }
.joy-photo { position: absolute; z-index: 1; top: 284px; right: 0; width: 77%; aspect-ratio: 4 / 5; overflow: hidden; }
.joy-photo img { height: 100%; object-fit: cover; object-position: 50% 36%; }
.joy-photo::after { content: ""; position: absolute; inset: 0; border-left: 1px solid rgba(var(--wine-rgb), .12); pointer-events: none; }
.joy-composition blockquote { position: absolute; z-index: 2; left: 24px; bottom: 17px; width: 56%; padding-top: 17px; border-top: 1px solid rgba(var(--wine-rgb), .28); font-family: var(--serif); }
.joy-composition blockquote p { margin: 0; font-size: 17px; line-height: 1.75; letter-spacing: .045em; white-space: nowrap; }
.joy-composition cite { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; font-style: normal; letter-spacing: .05em; }

/* 04 — calendar and portrait share one field and one visual baseline. */
.date-section { position: relative; padding: 104px 0 108px; overflow: hidden; }
.date-heading { margin: 0 24px 48px; }
.date-heading > p { margin: 0; color: var(--wine); font-family: Georgia, "Times New Roman", serif; font-size: 11px; letter-spacing: .22em; }
.date-heading h2 { margin: 15px 0 0; font-family: var(--serif); font-size: clamp(25px, 7vw, 32px); line-height: 1.5; font-weight: 400; letter-spacing: .04em; }
.date-composition { display: grid; grid-template-columns: 40% 60%; min-height: 610px; padding-left: 18px; }
.calendar { align-self: end; position: relative; z-index: 2; padding: 0 12px 26px 0; border-bottom: 1px solid rgba(var(--wine-rgb), .25); }
.calendar-title span { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 13px; letter-spacing: .08em; }
.calendar-title small { display: block; margin-top: 6px; color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-size: 11px; letter-spacing: .18em; }
.calendar-date { margin: 25px 0 28px; color: var(--wine); font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 5.8vw, 26px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.weekdays,
.days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-family: Georgia, "Times New Roman", serif; }
.weekdays { margin-bottom: 10px; color: var(--muted); font-size: 7px; }
.days { row-gap: 8px; font-size: 8px; }
.days > span { position: relative; display: grid; place-items: center; min-width: 16px; height: 17px; }
.days .chosen { color: var(--wine); }
.days .chosen b { font-weight: 700; }
.days .chosen svg { position: absolute; inset: -5px -4px; width: 28px; height: 27px; overflow: visible; }
.days .chosen path { fill: none; stroke: var(--wine); stroke-width: 1; stroke-linecap: round; }
.formal-photo { align-self: start; height: 566px; overflow: hidden; }
.formal-photo img { height: 100%; object-fit: cover; object-position: 50% 48%; }

/* 05 — the second drapery moment is only a pale echo around the guest story. */
.guest-transition { position: relative; min-height: 540px; padding: 167px 25px 70px; overflow: hidden; }
.drapery-echo { top: 18px; left: -30px; width: calc(100% + 60px); height: 104px; }
.guest-copy { position: relative; z-index: 1; width: min(100%, 356px); }
.guest-copy p { font-size: 16px; line-height: 2.02; }

/* 06 — practical information is a quiet continuation, never a panel. */
.details { position: relative; padding: 80px 25px 114px; }
.details::before { content: ""; position: absolute; top: 0; left: 25px; right: 25px; height: 1px; background: rgba(var(--wine-rgb), .18); }
.details header h2 { margin: 0; font-family: var(--serif); font-size: clamp(27px, 7.4vw, 35px); line-height: 1.4; font-weight: 400; letter-spacing: .05em; }
.details dl { margin: 48px 0 0; border-top: 1px solid rgba(var(--wine-rgb), .2); }
.detail { display: grid; grid-template-columns: 62px 1fr; gap: 19px; padding: 21px 0; border-bottom: 1px solid rgba(var(--wine-rgb), .2); }
.detail dt { padding-top: 5px; color: var(--wine); font-family: Georgia, "Times New Roman", serif; font-size: 10px; letter-spacing: .18em; }
.detail dd { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.55; letter-spacing: .03em; }

/* 07 — an open written response, without a card shell. */
.rsvp { position: relative; min-height: 102svh; display: grid; align-content: center; padding: 106px 25px 76px; overflow: hidden; }
.rsvp::before { content: ""; position: absolute; top: 0; left: 25px; right: 25px; height: 1px; background: rgba(var(--wine-rgb), .15); }
.rsvp-inner { position: relative; z-index: 1; }
.rsvp h2 { margin: 0 0 39px; font-family: var(--serif); font-size: clamp(28px, 7.7vw, 36px); line-height: 1.5; font-weight: 400; letter-spacing: .04em; }
.attendance { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.choice { position: relative; min-height: 39px; padding: 5px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; color: var(--muted); background: transparent; text-align: left; font-size: 14px; letter-spacing: .02em; cursor: pointer; }
.choice:first-child { padding-left: 16px; }
.choice:first-child > span { position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--wine); transform: translateY(-50%); opacity: 0; }
.choice[aria-pressed="true"] { color: var(--wine); border-bottom-color: rgba(var(--wine-rgb), .5); }
.choice[aria-pressed="true"] > span { opacity: 1; }
.fields { display: grid; grid-template-columns: 1fr 104px; gap: 17px; margin-top: 32px; }
.fields[hidden] { display: none; }
.field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.field input,
.field select { width: 100%; min-height: 44px; padding: 7px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none; background: transparent; font-family: var(--serif); font-size: 16px; }
.field input:focus,
.field select:focus { border-bottom-color: var(--wine); }
.submit { width: 100%; min-height: 51px; margin-top: 31px; border: 1px solid var(--wine); border-radius: 1px; color: #fff; background: var(--wine); font-size: 14px; letter-spacing: .1em; cursor: pointer; }
.form-status { min-height: 20px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.ending { margin-top: 70px; text-align: center; }
.ending p { margin: 0; color: var(--wine); font-family: Georgia, "Times New Roman", serif; font-size: 11px; letter-spacing: .27em; }
.ending small { display: block; margin-top: 12px; color: var(--muted); font-family: var(--serif); font-size: 13px; letter-spacing: .1em; }
.ending > span { display: block; width: 3px; height: 3px; margin: 27px auto 0; border-radius: 50%; background: var(--wine); opacity: .6; }

[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(13px); transition: opacity .72s ease, transform .84s cubic-bezier(.2, .68, .2, 1); }
.js [data-reveal].seen { opacity: 1; transform: none; }

@media (max-width: 374px) {
  .hero-top,
  .hero-bottom { left: 20px; right: 20px; }
  .invitation-story { padding-left: 22px; padding-right: 22px; }
  .relationship-copy { margin-right: 20px; }
  .joy-composition blockquote { left: 20px; }
  .date-heading { margin-left: 20px; margin-right: 20px; }
  .date-composition { grid-template-columns: 41% 59%; padding-left: 15px; }
  .calendar { padding-right: 9px; }
  .calendar-date { font-size: 19px; }
  .days { font-size: 7.5px; row-gap: 7px; }
  .days > span { min-width: 15px; }
  .guest-transition,
  .details,
  .rsvp { padding-left: 21px; padding-right: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-photo,
  .hero-top,
  .hero-bottom { animation: none; opacity: 1; transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .fabric-main,
  .js .fabric-echo { transform: none; opacity: 1; transition: none; }
}


/* design-exploration/phase-4-4-narrative-hierarchy/styles.css */
/* Phase 4.4 extends the established Phase 4.3 visual system and only changes hierarchy. */

/* Level A — the page's only primary copy block. */
.invitation-story {
  min-height: 680px;
  padding-top: 176px;
  padding-bottom: 78px;
}

.invitation-copy h2 { margin: 0; }

.invitation-copy h2 > span {
  display: block;
  font-size: clamp(25px, 7.1vw, 33px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: .04em;
}

.invitation-copy h2 > strong {
  display: block;
  margin-top: 24px;
  color: var(--wine);
  font-size: clamp(31px, 8.5vw, 40px);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: .045em;
}

.invitation-copy .invitation-note {
  margin-top: 37px;
  color: var(--muted);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .025em;
}

.photo-pause { padding-bottom: 104px; }

/* Level B — poem, image and one short story now occupy a single composition. */
.joy-story { padding: 30px 0 92px; }
.joy-composition { min-height: 720px; }

.joy-composition blockquote {
  top: 0;
  bottom: auto;
  left: 24px;
  width: 45%;
  padding: 0;
  border: 0;
}

.joy-composition blockquote p {
  font-size: 19px;
  line-height: 1.8;
  white-space: normal;
}

.joy-composition cite {
  margin-top: 13px;
  font-size: 12px;
}

.joy-photo {
  top: 119px;
  width: 77%;
  aspect-ratio: 4 / 5;
}

.relationship-copy {
  position: absolute;
  top: 625px;
  left: 24px;
  width: 79%;
  margin: 0;
}

.relationship-copy p {
  color: var(--muted);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .025em;
}

/* Level C — only labels that structure or communicate information remain. */
.date-section { padding-top: 88px; }
.date-heading { margin-bottom: 36px; }
.date-heading > p { font-size: 11px; }
.calendar-date { margin: 0 0 30px; }

.guest-transition {
  min-height: 510px;
  padding-top: 158px;
  padding-bottom: 66px;
}

.guest-copy { width: min(100%, 350px); }
.guest-copy p {
  color: var(--muted);
  font-size: 15px;
  line-height: 2.08;
  letter-spacing: .025em;
}
.guest-copy p span {
  display: block;
  margin-top: 18px;
  color: var(--wine);
}

.details header h2 { font-size: clamp(26px, 7vw, 33px); }
.rsvp { min-height: 96svh; }
.ending { margin-top: 64px; }
.ending p { font-size: 11px; }

@media (max-width: 374px) {
  .invitation-story { min-height: 670px; }
  .joy-composition blockquote,
  .relationship-copy { left: 20px; }
  .relationship-copy { width: 82%; }
}


/* design-exploration/phase-4-5-final-visual-composition/styles.css */
/* Phase 4.5 freezes structure and copy, refining only composition and readability. */

/* Drapery — biased tension, uneven volume and translucent surfaces. */
.drapery-opening {
  top: -15px;
  left: 0;
  width: 100%;
  height: 174px;
  filter: drop-shadow(0 13px 22px rgba(var(--wine-rgb), .018));
}

.js .fabric-main { transform: translateY(-10px) scaleY(.9) skewX(-.4deg); }
.js .fabric-echo { transform: translateY(-6px) scaleY(.93) skewX(.3deg); }
.js .drapery.seen .fabric-main,
.js .drapery.seen .fabric-echo { transform: none; }

.drapery-echo {
  top: 15px;
  height: 105px;
  opacity: .82;
}

/* Readable placeholder copy; content deliberately remains unchanged. */
.invitation-copy .invitation-note {
  color: #665650;
  font-size: 16px;
  line-height: 2.05;
}

/* 14 + Poetry share one canvas: poetry overlaps only the quiet wall area. */
.joy-story {
  padding-top: 32px;
  padding-bottom: 84px;
}

.joy-story::before { display: none; }
.joy-composition { min-height: 750px; }

.joy-composition blockquote {
  z-index: 3;
  top: 0;
  width: 47%;
  text-shadow: 0 1px 12px rgba(251, 247, 240, .96), 0 1px 4px rgba(251, 247, 240, .95);
}

.joy-composition blockquote p {
  font-size: 20px;
  line-height: 1.78;
}

.joy-composition cite {
  color: #74645f;
  font-size: 12px;
}

.joy-photo {
  top: 48px;
  right: -10px;
  width: 84%;
  aspect-ratio: 4 / 5;
}

.joy-photo img { object-position: 50% 35%; }

.relationship-copy {
  top: 576px;
  width: 82%;
}

.relationship-copy p {
  color: #584a46;
  font-size: 17px;
  line-height: 1.98;
  letter-spacing: .02em;
}

/* Date hierarchy — clear numeric date, secondary month label, tertiary grid. */
.date-section { padding-top: 92px; }
.date-heading { margin-bottom: 38px; }
.date-composition {
  grid-template-columns: 42% 58%;
  padding-left: 18px;
}

.calendar { padding-right: 13px; }
.calendar-title { margin-bottom: 18px; }
.calendar-title span {
  color: #5b4a46;
  font-size: 12px;
  letter-spacing: .1em;
}
.calendar-title small {
  margin-top: 5px;
  color: #786862;
  font-size: 11px;
  letter-spacing: .17em;
}
.calendar-date {
  margin: 0 0 27px;
  font-size: clamp(23px, 6.5vw, 29px);
  font-weight: 500;
  letter-spacing: -.025em;
}
.month-grid { opacity: .58; }
.days .chosen { opacity: 1; }
.formal-photo { height: 566px; }

.guest-copy p {
  color: #584a46;
  font-size: 16.5px;
  line-height: 2.02;
}
.guest-copy p span { color: var(--wine); }

.detail dt {
  font-size: 11px;
  letter-spacing: .16em;
}

/* RSVP — no browser blue; every keyboard focus remains strongly visible. */
.choice,
.field input,
.field select,
.submit {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.choice:focus,
.field input:focus,
.field select:focus,
.submit:focus { outline: none; }

.choice:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.submit:focus-visible {
  outline: 2px solid rgba(var(--wine-rgb), .72);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(var(--wine-rgb), .075);
}

.choice:focus-visible { border-bottom-color: transparent; }

.field > span {
  color: #71615b;
  font-size: 14px;
}

.field input,
.field select {
  border-bottom-color: rgba(53, 42, 39, .2);
  background: rgba(255, 255, 255, .025);
  caret-color: var(--wine);
}

.field input:focus,
.field select:focus {
  border-bottom-color: var(--wine);
  box-shadow: 0 3px 0 rgba(var(--wine-rgb), .1);
}

.field input:focus-visible,
.field select:focus-visible {
  border-bottom-color: transparent;
  box-shadow: 0 0 0 7px rgba(var(--wine-rgb), .075);
}

.field-select { position: relative; }
.field-select select { padding-right: 24px; cursor: pointer; }
.field-select::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 18px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #796862;
  border-bottom: 1px solid #796862;
  transform: rotate(45deg);
  pointer-events: none;
}

.submit { transition: background-color .2s ease, box-shadow .2s ease, outline-color .2s ease; }
.submit:hover { background: #762536; }

@media (max-width: 374px) {
  .joy-composition blockquote { width: 48%; }
  .joy-photo { right: -8px; width: 84%; }
  .relationship-copy { width: 84%; }
  .date-composition { grid-template-columns: 43% 57%; padding-left: 15px; }
  .calendar-date { font-size: 22px; }
}


/* design-exploration/phase-4-5a-targeted-rollback-visual-freeze/styles.css */
/* Phase 4.5A keeps the visual system frozen and integrates the approved final copy. */

/* Restore the Phase 4.4 horizontal drapery structure with slightly softer surfaces. */
.drapery-opening {
  top: -10px;
  left: -28px;
  width: calc(100% + 56px);
  height: 150px;
  opacity: .9;
  filter: none;
}

.js .fabric-main { transform: translateY(-12px) scaleY(.9); }
.js .fabric-echo { transform: translateY(-7px) scaleY(.93); }
.js .drapery.seen .fabric-main,
.js .drapery.seen .fabric-echo { transform: none; }

.drapery-echo {
  top: 18px;
  left: -30px;
  width: calc(100% + 60px);
  height: 104px;
  opacity: .72;
  filter: none;
}

/* Restore Phase 4.4 breathing room while retaining Phase 4.5's mobile crop. */
.joy-story {
  padding-top: 30px;
  padding-bottom: 90px;
}

.joy-composition {
  /* Follow the invitation canvas width, not an arbitrarily wide desktop viewport. */
  min-height: calc(780px + clamp(0px, calc(100vw - 390px), 90px));
}

.joy-composition blockquote {
  top: 0;
  left: 24px;
  width: 45%;
  z-index: 2;
  text-shadow: none;
}

.joy-photo {
  top: 138px;
  right: -10px;
  width: 84%;
  aspect-ratio: 4 / 5;
}

.joy-photo img { object-position: 50% 35%; }

.relationship-copy {
  top: calc(138px + min(105vw, 504px) + clamp(40px, 11vw, 52px));
  left: 24px;
  width: 82%;
}

.relationship-copy p + p { margin-top: 18px; }

.guest-copy p + p { margin-top: 20px; }

.ending .ending-message {
  color: #4f423e;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: .055em;
}

.ending .ending-thanks {
  margin-top: 18px;
  color: var(--wine);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  letter-spacing: .27em;
}

@media (max-width: 374px) {
  .joy-composition blockquote,
  .relationship-copy { left: 20px; }
  .joy-composition blockquote { width: 48%; }
  .joy-photo { right: -8px; width: 84%; }
  .relationship-copy { width: 84%; }
}

@media (min-width: 481px) {
  .rsvp {
    height: auto;
    min-height: 0;
    align-content: start;
  }
}


/* design-exploration/phase-5a-rsvp-form-interaction/styles.css */
/* Phase 5A changes only the RSVP form and interaction states. */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.photo-pause picture,
.joy-photo picture,
.formal-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Preserve the frozen horizontal crop while retaining intrinsic image dimensions for CLS. */
.photo-pause picture,
.photo-pause picture > img { height: auto; }

.joy-photo picture > img,
.formal-photo picture > img { height: 100%; }

.rsvp {
  display: block;
  height: auto;
  min-height: 0;
  padding-top: 104px;
  padding-bottom: max(76px, calc(56px + env(safe-area-inset-bottom)));
}

.rsvp h2 {
  max-width: 410px;
  margin-bottom: 38px;
}

.attendance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.attendance-option {
  position: relative;
  min-height: 92px;
  padding: 17px 14px 15px;
  border: 1px solid rgba(53, 42, 39, .16);
  border-radius: 2px;
  outline: none;
  color: var(--ink);
  background: rgba(255, 255, 255, .12);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.attendance-option::after {
  content: "";
  position: absolute;
  top: 17px;
  right: 13px;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(var(--wine-rgb), .42);
  border-radius: 50%;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.attendance-option[aria-checked="true"] {
  border-color: rgba(var(--wine-rgb), .52);
  background: rgba(var(--wine-rgb), .045);
  box-shadow: inset 0 0 0 1px rgba(var(--wine-rgb), .045);
}

.attendance-option[aria-checked="true"]::after {
  border-color: var(--wine);
  background: var(--wine);
}

.attendance-option:hover { border-color: rgba(var(--wine-rgb), .38); }

.attendance-option:focus-visible,
.rsvp-form input:focus-visible,
.rsvp-form select:focus-visible,
.rsvp-form textarea:focus-visible,
.submit:focus-visible,
.change-response:focus-visible {
  outline: 2px solid rgba(var(--wine-rgb), .72);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(var(--wine-rgb), .075);
}

.option-title,
.option-note { display: block; }

.option-title {
  padding-right: 14px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: .035em;
}

.option-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: .02em;
}

.form-reveal,
.branch-reveal,
.field-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: grid-template-rows 220ms ease, opacity 190ms ease, transform 220ms ease;
}

.form-reveal[data-open="true"],
.branch-reveal[data-open="true"],
.field-reveal[data-open="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.form-reveal-inner,
.branch-reveal-inner,
.field-reveal-inner {
  min-height: 0;
  overflow: hidden;
}

.rsvp-form { padding-top: 43px; }

.form-field { margin-top: 31px; }
.rsvp-form > .form-field:first-of-type { margin-top: 0; }

.form-field label {
  display: block;
  margin-bottom: 8px;
  color: #5f504b;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .035em;
}

.required-mark {
  color: var(--wine);
  font-family: var(--sans);
  font-size: 12px;
}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px solid rgba(53, 42, 39, .2);
  border-radius: 0;
  outline: none;
  color: var(--ink);
  background: transparent;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  caret-color: var(--wine);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder { color: #7e6e68; opacity: 1; }

.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus { border-bottom-color: var(--wine); }

.rsvp-form input:focus-visible,
.rsvp-form select:focus-visible,
.rsvp-form textarea:focus-visible { border-bottom-color: transparent; }

.rsvp-form input[aria-invalid="true"],
.rsvp-form select[aria-invalid="true"] { border-bottom-color: #9a4552; }

.rsvp-form textarea {
  min-height: 92px;
  resize: vertical;
}

.select-wrap { position: relative; }

.select-wrap::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 21px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #796862;
  border-bottom: 1px solid #796862;
  transform: rotate(45deg);
  pointer-events: none;
}

.select-wrap select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 26px;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.field-hint,
.field-error {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: .015em;
}

.field-hint { color: #786862; }
.field-error { color: #9a4552; }
.field-error[hidden] { display: none; }

.honeypot-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.submit-error {
  margin: 31px 0 -19px;
  color: #9a4552;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

.submit-error[hidden] { display: none; }

.rsvp-form .submit {
  min-height: 52px;
  margin-top: 39px;
}

.rsvp-form .submit:disabled {
  cursor: wait;
  opacity: .68;
}

.rsvp-success {
  padding: 37px 0 20px;
  text-align: center;
  outline: none;
}

.rsvp-success[hidden] { display: none; }

.success-rule {
  position: relative;
  display: block;
  width: 74px;
  height: 1px;
  margin: 0 auto 35px;
  background: rgba(var(--wine-rgb), .3);
}

.success-rule::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wine);
  transform: translateX(-50%);
}

.rsvp-success h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: .04em;
}

.rsvp-success p {
  margin: 19px 0 0;
  color: #6d5e59;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .035em;
}

.change-response {
  min-height: 44px;
  margin-top: 31px;
  padding: 7px 4px;
  border: 0;
  border-bottom: 1px solid rgba(var(--wine-rgb), .24);
  border-radius: 0;
  outline: none;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  letter-spacing: .025em;
  cursor: pointer;
  touch-action: manipulation;
}

.ending { margin-top: 76px; }

.ending-filing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  max-width: 320px;
  margin: 28px auto 0;
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .02em;
}

.ending-filing a {
  color: rgba(79, 66, 62, .62);
  text-decoration: none;
}

.ending-filing a:focus-visible {
  border-radius: 1px;
  outline: 2px solid rgba(var(--wine-rgb), .72);
  outline-offset: 3px;
}

.details .detail {
  grid-template-columns: 86px minmax(0, 1fr);
  column-gap: 18px;
}

.details .detail dd { min-width: 0; }
.details .place-name { white-space: nowrap; }

html.opening-gate-active,
html.opening-gate-active body { overflow: hidden; }

html.opening-gate-active .music-control {
  opacity: 0;
  pointer-events: none;
}

.opening-gate {
  position: fixed;
  z-index: 30;
  inset-block: 0;
  left: 50%;
  display: grid;
  width: min(100%, 480px);
  min-height: 100svh;
  padding: max(28px, env(safe-area-inset-top)) 28px max(32px, env(safe-area-inset-bottom));
  overflow: hidden;
  color: #fffaf4;
  background: rgba(64, 30, 35, .2);
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity 560ms ease;
  isolation: isolate;
}

.opening-gate::before,
.opening-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.opening-gate::before {
  z-index: -2;
  background: rgba(49, 25, 29, .34);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
}

.opening-gate::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 249, 240, .13), rgba(111, 39, 53, .11) 58%, rgba(42, 22, 24, .2)),
    radial-gradient(circle at 50% 43%, rgba(255, 247, 236, .13), transparent 48%);
}

.opening-gate[hidden] { display: none; }

.opening-gate.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.opening-gate-content {
  align-self: center;
  width: min(100%, 330px);
  margin: 0 auto;
  text-align: center;
  text-shadow: 0 1px 18px rgba(35, 17, 20, .18);
}

.opening-gate-eyebrow {
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .24em;
}

.opening-gate h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(27px, 7.6vw, 34px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .08em;
}

.opening-gate h2 span {
  padding-inline: .08em;
  font-size: .72em;
  font-style: italic;
}

.opening-gate-actions {
  display: grid;
  gap: 12px;
  width: min(100%, 268px);
  margin: 48px auto 0;
}

.opening-gate-actions button {
  min-height: 48px;
  border-radius: 2px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .09em;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.opening-gate-primary {
  border: 1px solid rgba(255, 250, 244, .84);
  color: var(--wine);
  background: rgba(255, 250, 244, .92);
}

.opening-gate-secondary {
  border: 1px solid rgba(255, 250, 244, .46);
  color: #fffaf4;
  background: rgba(255, 250, 244, .055);
}

.opening-gate-actions button:focus-visible {
  outline: 2px solid #fffaf4;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(var(--wine-rgb), .32);
}

.music-control {
  position: fixed;
  z-index: 20;
  top: max(14px, calc(env(safe-area-inset-top) + 8px));
  right: max(14px, calc(env(safe-area-inset-right) + 14px), calc((100vw - 480px) / 2 + 14px));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 250, 244, .56);
  border-radius: 50%;
  outline: none;
  color: var(--wine);
  background: rgba(251, 247, 240, .76);
  box-shadow: 0 5px 18px rgba(53, 42, 39, .07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  touch-action: manipulation;
}

.music-control:focus-visible {
  outline: 2px solid rgba(var(--wine-rgb), .78);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(251, 247, 240, .32);
}

.music-control:disabled {
  cursor: default;
  opacity: .48;
}

.music-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 18px;
  height: 18px;
}

.music-wave > span {
  width: 1.5px;
  height: 12px;
  border-radius: 1px;
  background: currentColor;
  transform: scaleY(.38);
  transform-origin: center;
}

.music-wave > span:nth-child(2) { transform: scaleY(.68); }
.music-wave > span:nth-child(3) { transform: scaleY(.5); }

.music-control[data-state="playing"] .music-wave > span {
  animation: music-wave 900ms ease-in-out infinite alternate;
}

.music-control[data-state="playing"] .music-wave > span:nth-child(2) { animation-delay: -300ms; }
.music-control[data-state="playing"] .music-wave > span:nth-child(3) { animation-delay: -600ms; }

@keyframes music-wave {
  0% { transform: scaleY(.28); }
  100% { transform: scaleY(.92); }
}

@media (max-width: 374px) {
  .attendance-options { gap: 9px; }
  .attendance-option { padding-left: 12px; padding-right: 12px; }
  .option-title { font-size: 16px; }
  .option-note { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .attendance-option,
  .form-reveal,
  .branch-reveal,
  .field-reveal { transition: none; }

  .music-control[data-state="playing"] .music-wave > span { animation: none; }
  .opening-gate { transition: none; }
}