/* Aubrae's 30th — envelope invite
   Aesthetic from the references: white-on-white stationery photography with
   one color — tomato red. Editorial dinner-poster typography: a modern
   grotesque sans in letterspaced caps (CASA LAWA / CHLOE COOKS) with elegant
   cursive script connectors ("at", "cooked by"). Clean envelope, plain wax.

   Palette: candlelit cream, dusty blush, oxblood wine and hand-drawn red. */

@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Zeyada';
  src: url('/fonts/zeyada-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pinyon Script';
  src: url('/fonts/pinyon-script-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --bg: #EDD3CC;
  --bg-deep: #DFAEAD;
  --paper: #FBF4E9;
  --card: #FFF9EE;
  --red: #A92C26;
  --wine: #762833;
  --rose: #D77C91;
  --red-soft: rgba(169,44,38,.58);
  --ink: #382C2B;
  --ink-soft: rgba(56,44,43,.74);
  --page-gutter: clamp(16px, 5vw, 32px);
  --paper-shadow: 0 22px 70px rgba(101,42,47,.2), 0 3px 12px rgba(101,42,47,.1);
  --font-type: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; /* geometric editorial caps */
  --font-script: 'Zeyada', 'Bradley Hand', cursive; /* expressive ink-pen handwriting */
  /* faint paper grain, tiled */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(169,44,38,.14); }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%; min-width: 280px;
  overflow-x: hidden; overflow-x: clip;
}
[hidden] { display: none !important; }
body {
  background-color: var(--bg);
  background-image:
    var(--grain),
    radial-gradient(circle at 12% 8%, rgba(255,249,238,.64), transparent 34rem),
    radial-gradient(circle at 88% 76%, rgba(118,40,51,.08), transparent 38rem);
  color: var(--ink);
  font-family: var(--font-type);
  min-height: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
button, input { font: inherit; }
button, a { touch-action: manipulation; }
img { max-width: 100%; }
main { position: relative; isolation: isolate; }
a { color: var(--red); }
a:hover { color: #8C1F16; }
::selection { background: var(--red); color: #FBF8F0; }

:where(a, button, input):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--red); color: #FBF8F0; padding: 12px 18px;
  font-size: 14px; letter-spacing: 2px;
}
.skip-link:focus { left: 8px; top: 8px; }

@keyframes arrowB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes sealPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes drift { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-30px) rotate(12deg); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes confettiFall { 0% { transform: translateY(-4vh) rotate(0deg); } 100% { transform: translateY(118vh) rotate(760deg); } }

/* ============ ACT I : envelope hero ============ */
.hero { height: 320vh; height: 320svh; position: relative; }
.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; height: 100dvh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,249,238,.38), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(118,40,51,.1), transparent 32%),
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 48%, rgba(128,66,58,.2) 100%);
}
.big30 {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; will-change: transform, opacity;
}
.big30-type {
  display: inline-block;
  color: var(--wine);
  font-family: var(--font-script);
  font-size: min(820px, 82vw, 94vh);
  font-size: min(820px, 82vw, 94svh);
  font-weight: 400;
  line-height: .64;
  letter-spacing: -.08em;
  white-space: nowrap;
  opacity: .4;
  mix-blend-mode: multiply;
  transform: rotate(-6deg) translate(-.035em, -.015em);
  transform-origin: center;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: transform; }
.dust i {
  position: absolute; display: block; border-radius: 50%;
  background: rgba(128,80,70,.4);
  animation: drift ease-in-out infinite alternate;
}
.dust i.gold { background: rgba(169,44,38,.3); }

.env-scene {
  position: relative; z-index: 3;
  width: min(390px, 86vw, 78vh);
  width: min(390px, 86vw, 78svh);
  aspect-ratio: 852 / 565; /* the reference photo's envelope body */
  perspective: 1400px;
}
.env-tilt {
  position: absolute; inset: 0;
  will-change: transform;
}
.env-shell { position: absolute; inset: 0; perspective: 1200px; }
.env-piece { will-change: transform; }

.env-shadow {
  position: absolute; left: 5%; right: 5%; bottom: -10%; height: 18%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(70,20,26,.5), transparent 68%);
  filter: blur(8px);
}
.env-back {
  position: absolute; inset: 0; z-index: 1;
  /* The photographed pocket + flap already make the complete envelope.
     Keep this transparent shadow plate only for depth: a coloured rectangle
     here leaks through the open V and reads as a dark hinge bar. */
  background: transparent; border-radius: 3px;
  box-shadow:
    0 34px 72px rgba(74,22,28,.42),
    0 10px 24px rgba(74,22,28,.3),
    0 2px 6px rgba(74,22,28,.22);
}
.env-liner {
  /* The old full-width liner showed through the transparent asset as a
     near-black stripe when the flap opened. The real paper artwork supplies
     the interior edge, so this layer intentionally stays transparent. */
  position: absolute; inset: 0; z-index: 2;
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  background: transparent;
}

.card {
  /* sized to the artwork's exact aspect so nothing is cropped */
  position: absolute; left: 7%; width: 86%; bottom: 8%;
  height: auto; aspect-ratio: 1082 / 1454;
  z-index: 3;
  background: var(--card);
  border: 1px solid rgba(118,40,51,.08);
  border-radius: 3px;
  /* whisper shadow while tucked inside — JS grows it as the card rises,
     so no shadow smears across the open flap */
  box-shadow: 0 3px 9px rgba(96,78,58,.14);
  transform: translateY(47.2%);
  clip-path: inset(-120% -18% 43.1% -18%); /* matches JS rest geometry — avoids a flash before first frame */
  color: var(--ink);
  will-change: transform, clip-path;
}
.card:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 8px;
}
.card-art {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
  user-select: none; -webkit-user-drag: none;
}
.card-eyebrow {
  font-size: 10.5px; font-weight: 500; letter-spacing: 4.5px; text-transform: uppercase;
  color: var(--red);
}
.card-script {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; margin: 0;
  font-family: var(--font-script); font-weight: 400;
  color: var(--red); transform: rotate(-2.5deg);
  font-size: clamp(42px, 14vw, 60px); line-height: .72;
}
.card-script span:last-child { margin-left: 8%; }
.card-rule { width: 46px; border-bottom: 1px solid var(--red-soft); }
.card-line {
  font-size: 11px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.card-foot {
  margin-top: 4px;
  font-family: var(--font-script);
  font-size: clamp(20px, 6.4vw, 26px); line-height: 1; color: var(--red);
}

.env-pocket {
  /* the actual envelope front from the reference photo (red keyed out).
     Insets compensate for the crop padding so the fold sits exactly at the top */
  position: absolute; z-index: 4;
  left: -1.06%; right: -1.06%; top: -0.7%; bottom: -1.6%;
  background: url('/img/env_pocket.webp') center / 100% 100% no-repeat;
}
.env-pocket::before,
.env-pocket::after {
  /* The source photograph has two keyed-out black wedges at its top corners.
     These small paper folds replace them and preserve the V-shaped opening. */
  content: '';
  position: absolute; top: 0;
  width: 7.9%; height: 7.8%;
  pointer-events: none;
  background-image:
    var(--grain),
    linear-gradient(155deg, #8D3C47 0%, #90434D 100%);
  background-size: 120px 120px, 100% 100%;
  background-repeat: repeat, no-repeat;
}
.env-pocket::before {
  left: 1%;
  clip-path: polygon(18% 0, 0 56%, 100% 100%, 100% 0);
}
.env-pocket::after {
  right: .9%;
  width: 9.2%;
  clip-path: polygon(84% 0, 100% 56%, 0 100%, 0 0);
  background-image:
    var(--grain),
    linear-gradient(205deg, #78313C 0%, #813844 100%);
}

.env-flap {
  position: absolute; top: 0; left: 0; width: 100%; height: 87.3%; /* photo flap depth */
  z-index: 6;
  transform-origin: top center;
  transform-style: preserve-3d;
  will-change: transform;
}
.flap-face {
  /* No vertical bleed: it became a heavy bar below the fold when flipped. */
  position: absolute; inset: 0 -1.06%;
  background: center / 100% 100% no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flap-front {
  /* The closed face overlaps the pocket by a few pixels so its raw keyed
     corner edges never peek above the envelope. */
  inset: -1.8% -1.06%;
  transform: translateZ(0.4px); /* keep faces off the shared plane — iOS z-fighting */
  background-image: var(--grain), url('/img/env_flap_closed.webp');
  background-size: 120px 120px, 100% 100%;
  background-repeat: repeat, no-repeat;
}
.flap-back {
  /* A shallower inner flap feels like tailored stationery and keeps the card
     dominant. Its base remains pinned precisely to the fold. */
  inset: 0 -1.06% auto;
  height: 84%;
  transform: rotateX(180deg) translateZ(0.4px);
  background-image: var(--grain), url('/img/env_flap_open.webp');
  background-size: 120px 120px, 100% 100%;
  background-repeat: repeat, no-repeat;
  filter: brightness(.97) saturate(.92);
}
.flap-back::after {
  content: '';
  position: absolute; inset: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(145deg,
    rgba(255,244,235,.13) 0%,
    transparent 42%,
    rgba(61,14,22,.09) 100%);
  mix-blend-mode: soft-light;
}

.seal {
  /* plain wax — no letters, just the pressed ring */
  position: absolute; left: 50%; top: 82%;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  z-index: 7; cursor: pointer; border: none; padding: 0;
  border-radius: 46% 54% 51% 49% / 52% 48% 54% 46%;
  background: radial-gradient(circle at 34% 28%, #B24A52, #7F2029 56%, #450F16 100%);
  box-shadow: 0 8px 18px rgba(40,6,10,.5), inset 0 2px 3px rgba(255,255,255,.25), inset 0 -4px 6px rgba(24,2,5,.55);
  animation: sealPulse 2.4s ease-in-out infinite;
  will-change: transform, opacity;
}
.seal { display: flex; align-items: center; justify-content: center; }
.seal:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.seal-ring {
  position: absolute; inset: 7px; border-radius: inherit;
  border: 2px solid rgba(255,235,230,.16);
  box-shadow: inset 0 2px 3px rgba(40,2,6,.45), inset 0 -1px 2px rgba(255,255,255,.14);
}
.seal-script {
  /* embossed copperplate initial pressed into the wax */
  font-family: 'Pinyon Script', cursive;
  font-size: 34px; line-height: 1; color: #400C13;
  margin-top: -4px; user-select: none;
  text-shadow: 0 -1px 1px rgba(40,2,6,.6), 0 1.5px 1px rgba(255,220,210,.35);
}

.scroll-hint, .onward-hint {
  position: absolute; left: 0; right: 0; text-align: center; z-index: 5;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  bottom: max(4svh, calc(env(safe-area-inset-bottom) + 14px));
  pointer-events: none;
}
.onward-hint { opacity: 0; }
.hint-text {
  font-size: clamp(9px, 2.5vw, 11px); letter-spacing: clamp(3px, 1vw, 5px); text-transform: uppercase;
  color: var(--ink-soft);
}
.hint-arrow {
  font-size: 20px; margin-top: 4px; color: var(--red);
  animation: arrowB 1.6s ease-in-out infinite;
}

/* ============ marquee — a typed ribbon across the table ============ */
.marquee {
  overflow: hidden; white-space: nowrap;
  padding: 15px 0 13px;
  margin: clamp(18px, 5vw, 42px) -2vw 0;
  width: 104vw;
  background: linear-gradient(110deg, var(--wine), #8E2B36 58%, #69232D);
  border-block: 1px solid rgba(255,249,238,.18);
  box-shadow: 0 14px 36px rgba(91,27,36,.18);
  transform: rotate(-1deg);
}
.marquee-track { display: inline-flex; animation: marquee 30s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-run { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; }
.marquee-run .mq-star { color: var(--rose); font-size: 14px; }
.marquee-run .mq-script {
  font-family: var(--font-script); font-size: 34px; line-height: .8; color: #FFE9E1;
}
.marquee-run .mq-it { font-size: 11.5px; font-weight: 500; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(255,249,238,.82); }

/* ============ ACT II : details ============ */
.details {
  padding: clamp(76px, 12svh, 118px) var(--page-gutter) clamp(64px, 8svh, 96px);
  max-width: 760px; margin: 0 auto;
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
  text-align: center; position: relative;
}
.details::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 8% -16vw 2%;
  background: radial-gradient(ellipse at center, rgba(255,249,238,.38), transparent 68%);
}
.section-kicker {
  position: relative; z-index: 1;
  margin: 0 0 18px;
  color: var(--wine);
  font-size: clamp(9px, 2vw, 11px); font-weight: 600;
  letter-spacing: clamp(3px, .7vw, 5px); text-transform: uppercase;
}
.script-heading {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(52px, 13vw, 76px); line-height: .8;
  color: var(--red); margin: 0; transform: rotate(-2deg);
  position: relative; z-index: 1;
}
.script-heading.light { color: var(--red); }

/* painted glasses — the poster illustration, anchored to the viewport edges
   (calc(50% - 50vw) reaches the screen edge from inside the centered column,
   so they can never collide with the facts) */
.glass { position: absolute; color: var(--red); pointer-events: none; z-index: 0; will-change: transform, translate; }
.glass-coupe {
  right: calc(50% - 50vw - 24px); top: -20px;
  width: clamp(110px, 15vw, 190px); transform: rotate(7deg); opacity: .96;
}
.glass-flute {
  left: calc(50% - 50vw - 14px); bottom: -40px;
  width: clamp(70px, 9vw, 115px); transform: rotate(-5deg); opacity: .9;
}

.fact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(30px, 5vw, 46px); margin-top: clamp(44px, 7vw, 62px); position: relative; z-index: 1;
}
.fact { display: flex; flex-direction: column; gap: 10px; align-items: center; position: relative; }
.fact::before {
  content: ''; width: 24px; border-top: 1px solid rgba(169,44,38,.34); margin-bottom: 2px;
}
.fact-label { font-size: 9px; font-weight: 500; letter-spacing: 3.5px; text-transform: uppercase; color: var(--red); }
.fact-value {
  font-weight: 500; font-size: clamp(16px, 2.4vw, 18px); letter-spacing: .02em;
  line-height: 1.35; color: var(--ink);
}

.detail-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 46px; position: relative; z-index: 1; }
.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-family: var(--font-type);
  font-size: 10.5px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--red); border: 1.5px solid rgba(169,44,38,.45);
  padding: 14px 22px; border-radius: 999px;
  transition: border-color .3s ease, color .3s ease, background .3s ease, transform .2s ease;
  min-height: 44px;
}

.divider {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 42px;
}
.divider i { width: 44px; border-bottom: 1px solid rgba(169,44,38,.35); }
.divider b { font-size: 14px; color: var(--red-soft); font-weight: 400; }

.float-orn {
  position: absolute; color: rgba(169,44,38,.3);
  font-size: 18px; pointer-events: none; user-select: none;
  will-change: transform, translate;
}
.orn-a { top: 12%; left: 7%; }
.orn-b { top: 30%; right: 9%; font-size: 13px; }
.orn-c { bottom: 18%; left: 14%; font-size: 11px; }
.orn-d { top: 12%; right: 11%; }
.orn-e { bottom: 24%; left: 8%; font-size: 12px; }

/* ============ ACT III : rsvp ============ */
.rsvp {
  padding: clamp(12px, 2svh, 24px) var(--page-gutter) clamp(88px, 13svh, 140px); position: relative;
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
}
.rsvp-inner { width: min(100%, 560px); margin: 0 auto; text-align: center; }
.rsvp-kicker { margin: 18px 0 0; }

.rsvp-form {
  margin-top: clamp(34px, 5vw, 48px); text-align: left; display: flex; flex-direction: column; gap: 28px;
  position: relative;
  background: var(--card);
  background-image: var(--grain);
  color: var(--ink);
  border: 1px solid rgba(53,48,42,.1);
  border-radius: 5px;
  padding: clamp(38px, 6vw, 48px) clamp(24px, 6vw, 42px) clamp(36px, 5vw, 44px);
  box-shadow: var(--paper-shadow);
}
.form-head { text-align: center; display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.head-script {
  font-family: var(--font-script);
  font-size: 44px; line-height: .8; color: var(--red);
  transform: rotate(-2deg);
}
.rsvp-deadline {
  font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase;
  margin: 0; color: var(--ink-soft);
}

.field { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; border: none; }
.field-label {
  font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--red); padding: 0;
}
.rsvp-form input[type="text"] {
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1.5px solid rgba(74,68,60,.4);
  padding: 8px 2px; width: 100%;
  font-family: var(--font-type); font-size: 16px; color: var(--ink);
}
.rsvp-form input::placeholder { color: rgba(56,44,43,.68); opacity: 1; }
.rsvp-form input:focus {
  outline: none; border-bottom-color: var(--red);
  box-shadow: 0 1.5px 0 0 var(--red);
}
.rsvp-form input:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.choice-field { gap: 13px; }
.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice-btn {
  cursor: pointer; font-family: var(--font-type);
  font-size: clamp(10px, 2.4vw, 11px); letter-spacing: clamp(1.8px, .6vw, 2.5px); text-transform: uppercase;
  width: 100%; padding: 12px; border-radius: 999px; min-height: 44px;
  border: 1.5px solid rgba(74,68,60,.35);
  background: transparent; color: var(--ink-soft);
  transition: all .3s ease;
}
.choice-btn.selected {
  border-color: var(--red); background: var(--red); color: #FBF8F0;
}

.extras { display: flex; flex-direction: column; gap: 30px; }
.chip-field { gap: 13px; }
.chip-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px 8px; }
.chip {
  cursor: pointer; font-family: var(--font-type);
  font-size: 10px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase;
  grid-column: span 2; width: 100%; padding: 10px 8px; border-radius: 999px; min-height: 42px;
  border: 1.5px solid rgba(53,48,42,.3);
  background: transparent; color: var(--ink-soft);
  transition: all .25s ease;
}
.chip:nth-child(5) { grid-column: 2 / span 2; }
.chip[aria-pressed="true"] {
  border-color: var(--red); background: var(--red); color: #FBF8F0;
}
#fDietOther { margin-top: 4px; }
.form-error { font-size: 11.5px; letter-spacing: 1px; color: var(--red); margin: -16px 0 0; }
.form-status { font-size: 11px; letter-spacing: 1px; color: var(--red); }
.form-status:empty { display: none; }
.form-status:not(:empty) { min-height: 0; margin: -12px 0 0; }

.submit-btn {
  cursor: pointer; margin-top: 6px; border: none; border-radius: 2px;
  font-family: var(--font-type);
  font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
  padding: 17px 20px; min-height: 52px;
  background: var(--red); color: #FBF8F0;
  box-shadow: 0 10px 24px rgba(118,40,51,.18);
  transition: background .3s ease, transform .15s ease, box-shadow .3s ease;
}
.submit-btn:active { transform: scale(.985); }
.submit-btn[disabled] { opacity: .6; cursor: wait; }

.reply-card {
  margin-top: 36px; position: relative; text-align: center;
  background: var(--card); color: var(--ink);
  background-image: var(--grain);
  border: 1px solid rgba(53,48,42,.1);
  border-radius: 5px; padding: 48px 28px;
  box-shadow: var(--paper-shadow);
  animation: replyIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes replyIn { 0% { opacity: 0; transform: translateY(26px) scale(.96); } 100% { opacity: 1; transform: none; } }
.reply-cake { width: 86px; color: var(--red); margin: 0 auto; display: block; }
.thanks-line {
  font-family: var(--font-script);
  font-size: clamp(38px, 11vw, 50px);
  color: var(--red); margin: 18px 0 0; line-height: .9;
}
.thanks-sub {
  font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ink-soft); margin: 14px 0 0;
}
.edit-btn {
  cursor: pointer; margin-top: 26px; min-height: 44px;
  font-family: var(--font-type);
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  padding: 11px 18px; background: transparent;
  border: 1.5px solid rgba(169,44,38,.4); border-radius: 2px; color: var(--red);
  transition: border-color .3s ease, color .3s ease;
}
/* ============ footer — the reference's crimson ============ */
.footer {
  background: linear-gradient(120deg, var(--wine), #922D36 55%, #66232C);
  padding: 30px var(--page-gutter) calc(42px + env(safe-area-inset-bottom));
  text-align: center; margin-top: 5vh; color: #F6EDE4;
}
.footer-script {
  margin-bottom: 10px; color: #F6B0BB;
  font-family: var(--font-script); font-size: clamp(34px, 8vw, 46px); line-height: .9;
  transform: rotate(-2deg);
}
.footer-monogram { font-size: 17px; letter-spacing: 6px; text-transform: uppercase; }
.footer-line { font-size: 9.5px; letter-spacing: clamp(2px, 1vw, 4px); text-transform: uppercase; opacity: 1; margin-top: 10px; }

/* ============ scroll reveals ============
   Content is visible by default, so a blocked/failed script cannot hide the
   invitation. Browsers that know scripting is enabled get the enhancement. */
[data-io] { opacity: 1; translate: 0 0; }
@media (scripting: enabled) {
  [data-io] {
    opacity: 0; translate: 0 20px;
    transition: opacity 1s ease, translate 1s cubic-bezier(.22,1,.36,1);
  }
  [data-io].in { opacity: 1; translate: 0 0; }
}

/* ============ confetti ============ */
.confetti-box { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-box i { position: absolute; top: -4vh; display: block; }

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: auto; }
  .stage {
    position: relative; height: auto; min-height: 0;
    padding: 14vh 0 10vh;
  }
  /* skip the mechanics: present the card as a static invitation */
  .env-piece, .seal, .dust, .scroll-hint, .onward-hint { display: none; }
  .env-scene { width: min(370px, 88vw); aspect-ratio: auto; perspective: none; }
  .env-tilt { position: static; animation: none; }
  .env-shell { position: static; perspective: none; }
  .card {
    position: relative; left: auto; bottom: auto; height: auto; width: 100%;
    transform: none !important; clip-path: none !important;
    box-shadow: 0 16px 40px rgba(96,78,58,.3); /* full shadow — JS doesn't run here */
  }
  .reveal-item { opacity: 1 !important; transform: none !important; }
  .big30 { position: absolute; opacity: .6; }
  .hint-arrow, .marquee-track { animation: none; }
  [data-io] { opacity: 1; translate: 0 0; transition: none; }
  .reply-card { animation: none; }
}

@media (hover: hover) and (pointer: fine) {
  .ghost-btn:hover { border-color: var(--red); color: #FBF8F0; background: var(--red); transform: translateY(-2px); }
  .submit-btn:hover { background: #85221F; box-shadow: 0 13px 28px rgba(118,40,51,.25); }
  .edit-btn:hover { border-color: var(--red); color: #85221F; }
}

@media (max-height: 500px) and (orientation: landscape) {
  /* landscape phones: the presented card nearly fills the stage — no room for hints */
  .hero { height: 300vh; height: 300svh; }
  .env-scene { width: min(390px, 70svh, 68vw); }
  .onward-hint { display: none; }
  .hint-text { font-size: 9px; letter-spacing: 3px; }
  .hint-arrow { font-size: 16px; margin-top: 2px; }
}

@media (max-width: 700px) {
  .big30 { align-items: flex-start; justify-content: flex-start; }
  .big30-type {
    position: absolute;
    top: max(4.5vh, calc(env(safe-area-inset-top) + 18px));
    top: max(4.5svh, calc(env(safe-area-inset-top) + 18px));
    left: 50%;
    font-size: min(clamp(430px, 142vw, 590px), 82vh);
    font-size: min(clamp(430px, 142vw, 590px), 82svh);
    line-height: .66;
    letter-spacing: -.08em;
    opacity: .44;
    transform: translateX(-52%) rotate(-5.5deg);
  }
}

@media (max-width: 600px) {
  .details { padding-top: clamp(70px, 10svh, 92px); }
  .detail-actions {
    display: grid; width: min(100%, 300px); gap: 12px;
    margin-inline: auto;
  }
  .ghost-btn { width: 100%; }
  .rsvp-form { margin-top: 30px; gap: 24px; padding: 32px 20px 28px; }
  .form-head { gap: 9px; margin-bottom: 2px; }
  .head-script { font-size: 42px; }
  .rsvp-deadline { line-height: 1.5; letter-spacing: 2.4px; }
  .choice-row { grid-template-columns: 1fr; gap: 10px; }
  .choice-btn { width: 100%; }
  .chip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chip { grid-column: auto; width: 100%; font-size: 9px; letter-spacing: 1.1px; padding-inline: 6px; }
  .chip:nth-child(5) { grid-column: auto; }
  .chip:last-child { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; }
  .submit-btn { margin-top: 4px; padding-inline: 12px; letter-spacing: 3px; }
  .glass-coupe { right: calc(50% - 50vw - 34px); opacity: .86; }
  .glass-flute { left: calc(50% - 50vw - 20px); opacity: .82; }
}

@media (max-width: 420px) {
  .field-label { letter-spacing: 2.5px; }
  .footer-monogram { font-size: 15px; letter-spacing: 4px; }
}

@media (max-width: 340px) {
  :root { --page-gutter: 14px; }
  .rsvp-form { padding-inline: 18px; }
  .head-script { font-size: 40px; }
  .chip { padding-inline: 11px; letter-spacing: 1.1px; }
  .submit-btn { letter-spacing: 3px; }
}