:root {
  --night: #14130f;
  --cream: #f4ecdd;
  --cream-2: #ebe0cb;
  /* three colours across every page: cream, maroon and antique gold (tints of each are fine) */
  --ink: #7a1424;
  --ink-soft: rgba(122, 20, 36, .72);
  --pom: #7a1424;
  --green: #7a1424;
  --green-deep: #5c0f1b;
  --ember: #7a1424;
  --gold: #b8924a;
  --gold-hi: #e8cf94;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --sans: "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --col: min(100vw, 480px);
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; height: 100svh; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* blurred room behind the column on wide screens */
.backdrop {
  position: fixed; inset: -40px; z-index: 0;
  background: url("media/door.webp?v=2") center / cover;
  filter: blur(36px) brightness(.32) saturate(1.1);
}

/* ============ gate ============ */
.gate {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 1.4s ease, visibility 0s;
}
.gate.is-gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.4s ease, visibility 0s 1.4s; }
.gate-col {
  position: relative; width: var(--col); height: 100svh; overflow: hidden;
  background: var(--night);
  box-shadow: 0 0 80px rgba(0,0,0,.6);
}
.gate-door, .gate-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* no zoom on the door: it has to line up exactly with the first frame of the video */
.gate-door { opacity: 0; transition: opacity 2.2s ease; }
.gate.is-ready .gate-door { opacity: 1; }
.gate-video { opacity: 0; transition: opacity .25s linear; }
.gate.is-playing .gate-video { opacity: 1; }
/* The stage is sized exactly like object-fit: cover of the 716x1280 video, so anything placed on it in
   percentages sits on the same spot of the picture. After the last frame the camera keeps walking up to
   the end wall, where the initials and countdown are. */
.gate-stage {
  position: absolute; left: 50%; top: 50%;
  width: max(100%, calc(100svh * 716 / 1280)); aspect-ratio: 716 / 1280;
  translate: -50% -50%;
  transform-origin: 51% 47.5%;
  transition: transform 3s cubic-bezier(.4, 0, .2, 1);
}
.gate-stage .gate-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gate.is-arrived .gate-stage { transform: scale(1.75); }

/* lettering on the plaster wall at the end of the passage */
.wall {
  position: absolute; left: 41%; top: 35.5%; width: 19.8%; height: 22%;
  container-type: size;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #6e3d16;
  opacity: 0; transition: opacity 1.4s ease;
  pointer-events: none;
}
.gate.wall-on .wall { opacity: 1; }
.wall-mono, .wall-clock b {
  background: linear-gradient(180deg, #8a5a20 0%, #4a250a 55%, #7a4a18 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .35cqw 0 rgba(255, 238, 205, .55));
}
.wall-mono { font-family: var(--script); font-size: 42cqw; line-height: 1.1; padding: 0 4cqw; white-space: nowrap; }
.wall-mono em { font-style: normal; font-size: .62em; margin: 0 .08em; }
.wall-rule { position: relative; display: block; width: 52cqw; height: 0; border-top: .7cqw solid rgba(90, 47, 16, .7); margin: 3cqw 0 9cqw; }
.wall-rule::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 3.4cqw; height: 3.4cqw;
  background: rgba(110, 61, 22, .7); transform: translate(-50%, -55%) rotate(45deg);
}
.wall-clock { display: grid; grid-template-columns: 1fr 1fr; gap: 7cqw 6cqw; width: 92cqw; }
.wall-clock div { display: flex; flex-direction: column; align-items: center; }
.wall-clock b { font-weight: 500; font-size: 24cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.wall-clock span {
  font-family: var(--sans); font-size: 6.4cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #5a2f10; margin-top: 1.6cqw;
}

.gate-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,9,6,.72) 0%, rgba(10,9,6,.15) 34%, rgba(10,9,6,0) 55%, rgba(10,9,6,.25) 72%, rgba(10,9,6,.82) 100%);
  transition: opacity 1s ease;
}
.gate.is-playing .gate-shade { opacity: 0; }

.gate-door.knock { animation: knock .32s ease; }
@keyframes knock {
  0% { transform: scale(1); }
  30% { transform: scale(1.012) translateY(1px); }
  60% { transform: scale(.996); }
  100% { transform: scale(1); }
}

.gate-top, .gate-bottom {
  position: absolute; left: 0; right: 0; text-align: center; color: var(--cream);
  padding: 0 24px; transition: opacity .8s ease, transform .8s ease;
}
.gate-top { top: 9svh; }
.gate-bottom { bottom: max(5svh, 24px); }
.gate.is-playing .gate-top, .gate.is-playing .gate-bottom { opacity: 0; transform: translateY(8px); }

.gate-dear { font-style: italic; font-size: 18px; line-height: 1.3; color: var(--gold-hi); margin-bottom: 8px; }
.gate-kicker.gate-awaits { margin-top: 10px; animation-delay: 1s; }
.gate-kicker {
  font-size: 17px; letter-spacing: .04em; opacity: 0;
  animation: rise 1.4s .3s var(--ease) forwards;
}
.gate-title {
  font-family: var(--script); font-weight: 400;
  font-size: clamp(64px, 19vw, 92px); line-height: .92; margin-top: 6px;
  text-shadow: 0 4px 30px rgba(0,0,0,.45);
  opacity: 0; animation: rise 1.8s .6s var(--ease) forwards;
}
.gate-cta {
  font-size: 24px; letter-spacing: .02em;
  opacity: 0; animation: rise 1.4s 1.4s var(--ease) forwards;
}
.knocks { display: flex; gap: 12px; justify-content: center; margin: 12px 0 10px; opacity: 0; animation: rise 1.4s 1.6s var(--ease) forwards; }
.knocks i {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--gold-hi);
  transition: background .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.knocks i.on { background: var(--gold-hi); transform: scale(1.25); box-shadow: 0 0 12px rgba(232,207,148,.8); }
.gate-hint {
  font-family: var(--sans); font-size: 12px; letter-spacing: .04em; opacity: 0;
  animation: rise 1.4s 1.8s var(--ease) forwards, breathe 3.2s 3.4s ease-in-out infinite;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ============ music button ============ */
.music {
  position: fixed; z-index: 30;
  right: max(14px, calc(50vw - 240px + 14px)); top: max(14px, env(safe-area-inset-top));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(184,146,74,.6);
  background: rgba(20,19,15,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; cursor: pointer;
}
.music-bars { display: flex; gap: 3px; align-items: flex-end; height: 14px; }
.music-bars i { width: 2px; height: 4px; background: var(--gold-hi); border-radius: 1px; }
.music[aria-pressed="true"] .music-bars i { animation: bar 1s ease-in-out infinite; }
.music[aria-pressed="true"] .music-bars i:nth-child(2) { animation-delay: .2s; }
.music[aria-pressed="true"] .music-bars i:nth-child(3) { animation-delay: .4s; }
@keyframes bar { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* ============ page column ============ */
.page {
  position: relative; z-index: 1;
  width: var(--col); margin: 0 auto;
  background: var(--cream) var(--paper);
  box-shadow: 0 0 80px rgba(0,0,0,.6);
  overflow: hidden;
}

/* reveal */
.r { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.r.in { opacity: 1; transform: none; }

/* type */
.kicker, .caps {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft);
}
.caps.small { letter-spacing: .2em; }
.title { font-weight: 400; font-size: 40px; line-height: 1.08; margin: 10px 0 18px; color: var(--ink); }
.script { font-family: var(--script); font-size: 46px; line-height: 1.1; }
.lede { font-size: 20px; max-width: 32ch; margin: 0 auto; }
.muted { color: var(--ink-soft); }

.names {
  font-family: var(--script); font-weight: 400; color: var(--pom);
  font-size: clamp(60px, 17vw, 80px); line-height: 1;
  display: flex; flex-direction: column; align-items: center; margin: 14px 0 6px;
}
.names em { font-style: normal; font-family: var(--serif); font-size: .36em; color: var(--gold); margin: 2px 0 4px; }
.small-names { font-size: 52px; flex-direction: row; gap: 12px; align-items: baseline; justify-content: center; }
.small-names em { font-size: .5em; }

.rule { display: block; width: 44px; height: 1px; background: var(--gold); margin: 14px auto 16px; }
/* gold ornament between headings and text, like a foil-stamped divider */
.flourish { display: block; width: 160px; height: 16px; margin: 14px auto 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='160'%3E%3Cstop offset='0' stop-color='%23b8924a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23d9b56a'/%3E%3Cstop offset='1' stop-color='%23b8924a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 8H64M96 8H158' stroke='url(%23g)'/%3E%3Cpath d='M64 8c4-5 8-5 10 0M96 8c-4-5-8-5-10 0' fill='none' stroke='%23b8924a' stroke-width='.8'/%3E%3Cpath d='M80 2.5l5.5 5.5-5.5 5.5-5.5-5.5z' fill='none' stroke='%23b8924a'/%3E%3Ccircle cx='80' cy='8' r='1.6' fill='%23c9a24a'/%3E%3Ccircle cx='66' cy='8' r='1' fill='%23b8924a'/%3E%3Ccircle cx='94' cy='8' r='1' fill='%23b8924a'/%3E%3C/svg%3E") center / contain no-repeat; }
.flourish.small { width: 120px; height: 12px; margin: 6px auto 2px; }
/* gold foil: a slow sheen moves across the letters */
.foil, .amp {
  background: linear-gradient(100deg, #8a6a22 0%, #d9b56a 22%, #fff1c2 38%, #c9a24a 52%, #8a6a22 74%, #e6c983 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil 9s ease-in-out infinite alternate;
}
.foil em, .foil span { color: transparent; }
@keyframes foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* buttons */
.btn, .btn-ghost {
  display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  padding: 15px 28px; border-radius: 999px; cursor: pointer;
  transition: transform .25s var(--ease), background .25s ease, color .25s ease;
}
.btn { background: var(--green); color: var(--cream); border: 0; }
.btn:hover { background: var(--pom); }
.btn:active, .btn-ghost:active { transform: scale(.97); }
.btn-ghost { background: none; color: var(--green); border: 1px solid rgba(122,20,36,.4); }
.btn-ghost:hover { background: var(--green); color: var(--cream); }
.btn-full { width: 100%; }

/* ============ hero ============ */
.hero { position: relative; height: 100svh; min-height: 800px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 6s var(--ease); }
.page.is-open .hero-bg { transform: scale(1); }
.hero-text {
  position: absolute; inset: 160px 11% 12%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.tagline { font-style: italic; font-size: clamp(15px, 4.2vw, 18px); line-height: 1.4; color: var(--ink-soft); max-width: 30ch; margin-bottom: 14px; }
.couple { display: flex; flex-direction: column; align-items: center; }
.person { font-family: var(--script); font-weight: 400; color: var(--pom); font-size: clamp(50px, 14vw, 66px); line-height: 1; }
.parents { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.6; max-width: 30ch; margin-top: 4px; }
.amp { font-style: normal; font-size: 24px; color: var(--gold); margin: 6px 0 2px; }
.hero-text .flourish { margin: 10px auto 12px; }
.hero-text .caps { color: var(--ink); }
.hero-text .caps + .caps { margin-top: 6px; }
.request { font-style: italic; font-size: clamp(15px, 4.2vw, 18px); line-height: 1.4; color: var(--ink-soft); max-width: 28ch; margin: 0 auto 12px; }
.reply-link {
  margin-top: 18px; font-family: var(--script); font-size: 30px; color: var(--green);
  text-decoration: none; border-bottom: 1px solid rgba(184,146,74,.6); line-height: 1.2;
}
.hero-text .r:nth-child(2) { transition-delay: .15s; }
.hero-text .r:nth-child(3) { transition-delay: .3s; }
.hero-text .r:nth-child(4) { transition-delay: .45s; }
.hero-text .r:nth-child(5) { transition-delay: .6s; }
.hero-text .r:nth-child(6) { transition-delay: .7s; }
.hero-text .r:nth-child(7) { transition-delay: .8s; }
.hero-text .r:nth-child(8) { transition-delay: .9s; }
.hero-text .r:nth-child(9) { transition-delay: 1s; }

/* chandeliers hang from the top edge and sway */
.chandelier {
  position: absolute; top: -14px; z-index: 1; pointer-events: none;
  transform-origin: top center; animation: swing 6s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(255, 214, 140, .55));
}
.chandelier-hero { left: 50%; width: 21%; margin-left: -10.5%; top: -30px; }
.chandelier-l { left: 6%; width: 22%; }
.chandelier-r { right: 6%; width: 22%; animation-delay: -3s; }

/* ============ sections ============ */
.sec { position: relative; padding: 96px 28px; text-align: center; }

.corner {
  position: absolute; top: -6px; width: 46%; pointer-events: none;
  transform-origin: top left; animation: sway 7s ease-in-out infinite;
}
.corner-l { left: -8px; }
.corner-r { right: -8px; scale: -1 1; transform-origin: top center; animation-name: swayback; animation-delay: -3s; }
@keyframes sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.6deg; } }
@keyframes swayback { 0%, 100% { rotate: 0deg; } 50% { rotate: -1.6deg; } }


.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.photos img:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 4 / 3; }

@keyframes swing { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }

.venue { background: var(--cream-2) var(--paper); }
.venue .title { margin-bottom: 0; }
.venue .flourish { margin-bottom: 34px; }
.event-list { display: grid; gap: 26px; }
.event {
  position: relative; padding: 11px;
  background: var(--cream) var(--paper); border: 1px solid rgba(184,146,74,.6); border-radius: 3px;
  box-shadow: 0 18px 40px rgba(43,42,34,.10);
}
/* a second, finer gold line inside the edge, as on engraved stationery */
.event::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(184,146,74,.32); border-radius: 2px; pointer-events: none; }
.event-body { padding: 20px 14px 22px; }
.event-art { position: relative; aspect-ratio: 1 / 1.02; overflow: hidden; margin: 0; border-radius: 999px 999px 4px 4px; border: 1px solid var(--gold); }
.event-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s var(--ease); }
.event.in .event-art img { transform: scale(1); }
.event-date { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ember); margin-top: 14px; }
.event-title { font-weight: 400; font-size: 34px; line-height: 1.1; margin: 4px 0 0; }
.event-intro { font-style: italic; font-size: 18px; color: var(--ink-soft); max-width: 30ch; margin: 8px auto 0; }
.part-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.part-about { font-style: italic; font-size: 17px; line-height: 1.45; color: var(--ink-soft); max-width: 30ch; margin: 6px auto 10px; }
.part-note { font-style: italic; font-size: 17px; color: var(--ink-soft); margin-top: 12px; }
.event-attire { margin-top: 18px; font-size: 22px; color: var(--pom); }
.event-attire span { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }

/* card motifs */
.motif { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* Roce & Haldi: fairy lights twinkle */
.motif-lights i {
  position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%;
  background: #fff4c8; box-shadow: 0 0 6px 2px rgba(255, 214, 120, .9), 0 0 16px 4px rgba(255, 190, 80, .45);
  animation: twinkle var(--t) ease-in-out var(--d) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
/* Hindu Ceremony: rose petals fall */
.motif-petals i {
  position: absolute; left: var(--x); top: -20px; width: 11px; height: 15px;
  border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #e0475e, #a3162b);
  opacity: .9; animation: petal-fall var(--t) linear var(--d) infinite;
}
.motif-petals i:nth-child(3n) { background: linear-gradient(135deg, #fff, #f1dfe3); }
.motif-petals i:nth-child(4n) { background: linear-gradient(135deg, #f49ab0, #d55b7a); }
@keyframes petal-fall {
  0% { transform: translate(0, 0) rotate(var(--r)); opacity: 0; }
  10% { opacity: .95; }
  100% { transform: translate(40px, 320px) rotate(calc(var(--r) + 420deg)); opacity: 0; }
}
/* Nuptials: the whole bell scene swings gently, like it just rang */
/* Nuptials: soft afternoon sunlight drifts across the aisle */
.motif-sun {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, .32) 45%, rgba(255, 246, 220, .12) 55%, transparent 70%);
  background-size: 250% 100%; mix-blend-mode: screen;
  animation: sunsweep 9s ease-in-out infinite alternate;
}
@keyframes sunsweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.event-part { padding: 14px 0 6px; }
.event-part + .event-part { border-top: 1px solid rgba(184,146,74,.3); margin-top: 10px; }
.part-title { font-style: italic; font-size: 21px; color: var(--pom); }
.part-time { font-size: 22px; }
.part-venue { font-size: 18px; color: var(--ink-soft); margin-bottom: 12px; }
.btn-ghost.small { padding: 10px 14px; font-size: 10.5px; letter-spacing: .12em; }


/* ============ rsvp ============ */
.rsvp { background: var(--green-deep) var(--paper); color: var(--cream); }
.rsvp .kicker, .rsvp .muted { color: rgba(244,236,221,.7); }
.rsvp .title { color: var(--cream); }
.form { text-align: left; margin-top: 30px; display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field span, .choice legend, .step-label { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.field i { font-style: normal; color: rgba(244,236,221,.5); letter-spacing: .08em; text-transform: none; margin-left: 6px; }
.field input, .field textarea {
  font: inherit; font-size: 19px; color: var(--cream);
  background: rgba(244,236,221,.06); border: 1px solid rgba(184,146,74,.4); border-radius: 10px;
  padding: 12px 14px; outline: none; transition: border-color .2s ease, background .2s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--gold-hi); background: rgba(244,236,221,.1); }
.field textarea { resize: vertical; }
.choice { border: 0; display: grid; gap: 8px; }
.choice legend { margin-bottom: 8px; }
.choice label { display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice span {
  display: block; padding: 13px 16px; border-radius: 10px; font-size: 19px;
  border: 1px solid rgba(184,146,74,.4); transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.choice input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--green-deep); }
.choice input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.if-yes { display: grid; gap: 12px; }
.stepper { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(184,146,74,.25); }
.stepper small { display: block; font-family: var(--sans); font-size: 12px; color: rgba(244,236,221,.55); margin-top: 3px; }
.step-ctl { display: flex; align-items: center; gap: 14px; }
.step-ctl button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(184,146,74,.6);
  background: none; color: var(--cream); font-size: 20px; cursor: pointer; line-height: 1;
}
.step-ctl button:disabled { opacity: .3; cursor: default; }
.step-ctl output { min-width: 18px; text-align: center; font-size: 24px; }
.form .btn { background: var(--gold); color: var(--green-deep); margin-top: 6px; }
.form .btn:hover { background: var(--gold-hi); }
.form .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.form-err { min-height: 1em; font-family: var(--sans); font-size: 13px; color: var(--gold-hi); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.replies { display: grid; gap: 16px; }
.reply { border: 1px solid rgba(184,146,74,.4); border-radius: 12px; padding: 16px 16px 8px; display: grid; gap: 10px; }
.reply legend { padding: 0 8px; margin-left: -8px; font-size: 22px; color: var(--cream); }
.reply legend small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.reply .choice span { font-size: 17px; padding: 11px 14px; }
.reply legend { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.reply legend small { font-family: var(--serif); font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--cream); margin-top: 4px; }
.reply.missing { border-color: var(--gold-hi); }
.req { color: var(--gold-hi); font-weight: 400; }
.thanks { margin-top: 30px; }
.thanks-list { list-style: none; margin: 0 auto 24px; max-width: 320px; text-align: left; }
.thanks-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(184,146,74,.3); }
.thanks-list b { font-weight: 400; font-size: 19px; }
.thanks-list span { font-family: var(--sans); font-size: 12px; color: var(--gold-hi); text-align: right; padding-top: 4px; }
.thanks .script { color: var(--gold-hi); }
.thanks .lede { margin: 10px auto 24px; }
.thanks .btn-ghost { color: var(--cream); border-color: rgba(244,236,221,.4); }

.wish { margin: 26px auto 0; max-width: 32ch; }
.wish p { font-size: 24px; font-style: italic; }
.wish p::before { content: "\201C"; }
.wish p::after { content: "\201D"; }
.wish cite { display: block; margin-top: 12px; font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }

.closing { position: relative; min-height: 720px; overflow: hidden; text-align: center; color: var(--cream); }
.closing-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) saturate(1.05); }
.closing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(92,15,27,.6) 0%, rgba(10,9,6,.15) 38%, rgba(10,9,6,.25) 60%, rgba(10,9,6,.8) 100%); }
.closing-text { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; }
.closing .caps { color: var(--gold-hi); }
.closing .small-names { font-size: clamp(50px, 14vw, 64px); margin: 6px 0 0; filter: drop-shadow(0 2px 10px rgba(0,0,0,.65)); }
.closing-line { font-style: italic; font-size: 22px; line-height: 1.35; color: var(--cream); max-width: 22ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
  .gate-kicker, .gate-title, .gate-cta, .knocks, .gate-hint { opacity: 1; }
}