/* ==========================================================================
   Moiz & Maria — invitation
   Palette sampled directly from the printed card's artwork.
   ========================================================================== */

:root {
  --forest-900: #1E2F25;
  --forest-800: #2C4335;
  --forest-700: #3A5744;
  --forest-600: #4A6350;
  --forest-500: #57755B;
  --sage-400:   #86A188;
  --sage-300:   #B7C698;
  --rose-700:   #A82F44;
  --rose-600:   #C13B50;
  --rose-500:   #D3485B;
  --rose-400:   #DB5667;
  --blush-200:  #F4C9CE;
  --blush-100:  #F9EAE6;
  --cream-100:  #F8F6E8;
  --sand-200:   #EDE5C7;
  --sand-300:   #E8DAB8;
  --paper:      #FDFCF8;
  --gold:       #B08D4A;
  --gold-soft:  #D8C08A;

  --ink:        #24352B;
  --ink-soft:   #5A6C60;
  --ink-faint:  #8A9A8E;

  --display: 'Cormorant Garamond', Cormorant, 'Playfair Display', Didot, Georgia, 'Times New Roman', serif;
  --ui: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --shadow-card: 0 1px 2px rgba(36,53,43,.05), 0 12px 40px -12px rgba(36,53,43,.22);
  --ease-drama: cubic-bezier(.16,1,.3,1);
  --gutter: clamp(20px, 5.5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }

/* A `display` declaration outranks the UA rule for [hidden]; several components
   below set one, so make the attribute authoritative. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; height: 100dvh; }

/* height:auto is required — the monogram carries width/height attributes,
   whose presentational height would otherwise survive a CSS width override. */
img { max-width: 100%; height: auto; display: block; }

/* ── Falling petals ─────────────────────────────────────────── */
#petal-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#petal-canvas.on { opacity: 1; }

/* ── Loader ─────────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--paper);
  transition: opacity .7s ease, visibility .7s;
}
.loader span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(74,99,80,.18);
  border-top-color: var(--forest-600);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

/* ==========================================================================
   Scene 1 — the sealed cover
   ========================================================================== */
.cover {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
}

/* Two halves so the cover can part like a pair of doors. */
.cover-panel {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(125% 95% at 50% 34%, #FFFFFF 0%, #FCFBF6 40%, #F3EFE3 100%);
  transform-origin: left center;
  transition: transform 1.5s var(--ease-drama), opacity 1.2s ease;
  will-change: transform;
}
.cover-panel--l { clip-path: inset(0 50% 0 0); transform-origin: left center; }
.cover-panel--r { clip-path: inset(0 0 0 50%); transform-origin: right center; }
.cover-panel::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(58% 44% at 50% 38%, rgba(176,141,74,.07), transparent 70%),
    radial-gradient(100% 100% at 50% 122%, rgba(74,99,80,.10), transparent 62%);
}

.cover-wreath {
  position: absolute; top: 50%; width: min(30vw, 190px);
  opacity: .5;
  transform: translateY(-50%);
  transition: transform 1.4s var(--ease-drama), opacity 1s ease;
  pointer-events: none;
}
.cover-wreath--l { left: -4%; }
.cover-wreath--r { right: -4%; }

.cover-inner {
  position: relative;
  width: min(560px, 100%);
  text-align: center;
  color: var(--forest-700);
  transition: opacity .8s ease, transform 1.1s var(--ease-drama);
}

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

.rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto; }
.rule > span {
  display: block; height: 1px; width: 0;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  animation: rule-in 1.6s var(--ease-drama) .35s forwards;
}
.rule::before, .rule::after {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); opacity: 0;
  animation: fade-in .8s ease 1.5s forwards;
}
@keyframes rule-in { to { width: min(300px, 62%); } }
@keyframes fade-in { to { opacity: .85; } }

.cover-eyebrow {
  margin: 0 0 clamp(14px, 4vw, 22px);
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0; animation: rise .9s var(--ease-drama) .5s forwards;
}

/* ── The wrapped card ───────────────────────────────────────── */
.wrapped {
  position: relative; display: block;
  width: min(94%, 380px); margin: 0 auto;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0; animation: rise 1s var(--ease-drama) .7s forwards;
  transition: transform .55s var(--ease-drama);
}
.wrapped:active { transform: scale(.985); }
.wrapped:focus-visible { outline: 2px solid var(--forest-600); outline-offset: 8px; }

.wrapped-card {
  display: block; position: relative;
  padding: clamp(20px, 5vw, 30px) clamp(14px, 4vw, 22px) clamp(16px, 4vw, 24px);
  background: linear-gradient(170deg, #FFFFFF 0%, #FDFCF7 55%, #F7F3E9 100%);
  border: 1px solid rgba(176,141,74,.34);
  box-shadow: 0 2px 5px rgba(36,53,43,.05), 0 22px 50px -20px rgba(36,53,43,.35);
  transition: transform 1.1s var(--ease-drama), box-shadow .8s ease, opacity .8s ease;
}
.wrapped-card::after {
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(176,141,74,.18); pointer-events: none;
}

.wrapped-mono {
  width: 84%; margin: clamp(4px, 1.6vw, 10px) auto 0;
  filter: drop-shadow(0 10px 24px rgba(74,99,80,.14));
  /* Falls back to 100% so the monogram is fully visible wherever @property or the
     animation is unavailable — a 0% fallback would hide it entirely. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 var(--m, 100%), transparent calc(var(--m, 100%) + 22%));
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 var(--m, 100%), transparent calc(var(--m, 100%) + 22%));
  animation: paint-in 2.2s var(--ease-drama) .85s backwards;
}
@keyframes paint-in { from { --m: 0%; transform: scale(.94); } to { --m: 100%; transform: scale(1); } }
@property --m { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

.cover-names {
  display: flex; align-items: center; justify-content: center; gap: .42em;
  margin: 2px 0 4px;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(26px, 8vw, 40px); letter-spacing: .06em; color: var(--forest-700);
}
.cover-names i { font-size: .52em; color: var(--rose-500); font-style: italic; }

.cover-date {
  display: block; margin: 0 0 12px;
  font-size: clamp(10px, 2.8vw, 12px); letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-soft);
}
.cover-date sup { font-size: .7em; }

/* ── Ribbon ─────────────────────────────────────────────────── */
.ribbon { position: absolute; inset: 0; pointer-events: none; }

.band {
  position: absolute; top: 56%; height: clamp(24px, 7vw, 34px);
  width: 54%;
  background:
    linear-gradient(180deg, #A82F44 0%, #E4697C 12%, #D3485B 52%, #9C2B40 100%);
  box-shadow: 0 3px 10px rgba(122,30,48,.3), inset 0 0 0 1px rgba(126,32,56,.35);
  transition: transform 1.1s var(--ease-drama), opacity .8s ease;
}
.band::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 42%);
}
.band--l { left: -5%; transform-origin: left center; }
.band--r { right: -5%; transform-origin: right center; }

.bow {
  position: absolute; top: 56%; left: 50%;
  width: clamp(170px, 68%, 280px); height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 14px rgba(122,30,48,.38));
  transition: transform 1s var(--ease-drama), opacity .8s ease;
}
.bow .loop, .bow .loop-fold, .bow .loop-sheen, .bow .tail, .bow .bow-knot-group {
  transition: transform 1s var(--ease-drama), opacity .8s ease;
}
.bow .loop--l, .bow .loop-fold--l, .bow .loop-sheen--l { transform-origin: 150px 101px; }
.bow .loop--r, .bow .loop-fold--r, .bow .loop-sheen--r { transform-origin: 150px 101px; }
.bow .tail--l { transform-origin: 146px 106px; }
.bow .tail--r { transform-origin: 154px 106px; }
.bow .bow-knot-group { transform-origin: 150px 101px; }

/* Stage 1 — the knot loosens and the loops slacken. */
.cover.stage-1 .bow .loop--l, .cover.stage-1 .bow .loop-fold--l, .cover.stage-1 .bow .loop-sheen--l { transform: rotate(-10deg) scale(.9); }
.cover.stage-1 .bow .loop--r, .cover.stage-1 .bow .loop-fold--r, .cover.stage-1 .bow .loop-sheen--r { transform: rotate(10deg) scale(.9); }
.cover.stage-1 .bow .bow-knot-group { transform: scale(.92); }
.cover.stage-1 .bow .tail--l { transform: rotate(9deg); }
.cover.stage-1 .bow .tail--r { transform: rotate(-9deg); }

/* Stage 2 — the loops pull free and the tails slip loose. */
.cover.stage-2 .bow .loop--l, .cover.stage-2 .bow .loop-fold--l, .cover.stage-2 .bow .loop-sheen--l { transform: rotate(-30deg) scale(.35) translate(-90px, 60px); opacity: 0; }
.cover.stage-2 .bow .loop--r, .cover.stage-2 .bow .loop-fold--r, .cover.stage-2 .bow .loop-sheen--r { transform: rotate(30deg) scale(.35) translate(90px, 60px); opacity: 0; }
.cover.stage-2 .bow .bow-knot-group { transform: scale(.5); opacity: .3; }
.cover.stage-2 .bow .tail--l { transform: rotate(26deg) translate(-16px, 26px); }
.cover.stage-2 .bow .tail--r { transform: rotate(-26deg) translate(16px, 26px); }

/* Stage 3 — the bands slide off the card and the paper is free. */
.cover.stage-3 .bow { transform: translate(-50%, 40%) scale(.8); opacity: 0; }
.cover.stage-3 .band--l { transform: translateX(-115%) rotate(-5deg); opacity: 0; }
.cover.stage-3 .band--r { transform: translateX(115%) rotate(5deg); opacity: 0; }
.cover.stage-3 .wrapped-card { transform: translateY(-6px) scale(1.015); box-shadow: 0 6px 14px rgba(36,53,43,.07), 0 34px 70px -24px rgba(36,53,43,.42); }

.cover-hint {
  margin: clamp(18px, 5vw, 26px) 0 0;
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0; animation: fade-in 1s ease 1.6s forwards;
  transition: opacity .3s ease;
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mono-float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.004); } }

/* The parting. */
.cover.is-opening .cover-inner { opacity: 0; transform: scale(1.1) translateY(-10px); }
.cover.is-opening .cover-panel--l { transform: perspective(1400px) rotateY(-72deg) translateX(-14%); opacity: 0; }
.cover.is-opening .cover-panel--r { transform: perspective(1400px) rotateY(72deg) translateX(14%); opacity: 0; }
.cover.is-opening .cover-wreath--l { transform: translate(-70%, -50%) rotate(-14deg); opacity: 0; }
.cover.is-opening .cover-wreath--r { transform: translate(70%, -50%) rotate(14deg); opacity: 0; }
.cover.is-open { pointer-events: none; visibility: hidden; transition: visibility 0s linear 1.5s; }

/* ==========================================================================
   Scene 2 — the invitation
   ========================================================================== */
.card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(34px, 9vw, 74px) var(--gutter) clamp(30px, 8vw, 64px);
  background:
    radial-gradient(120% 60% at 50% 0%, #FFFFFF 0%, var(--paper) 45%, var(--cream-100) 100%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity 1s ease .35s, transform 1.3s var(--ease-drama) .35s;
}
.card.is-in { opacity: 1; transform: none; }

/* Hairline frame, drawn just inside the paper edge like the printed card. */
.card::before {
  content: ''; position: absolute;
  inset: clamp(10px, 2.4vw, 20px);
  border: 1px solid rgba(176,141,74,.28);
  pointer-events: none; z-index: 3;
}
.card::after {
  content: ''; position: absolute;
  inset: clamp(14px, 3vw, 25px);
  border: 1px solid rgba(176,141,74,.14);
  pointer-events: none; z-index: 3;
}

.card-florals { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
/* Kept small and faint — these frame the corners, they must never sit under text. */
.floral { position: absolute; opacity: .34; will-change: transform; }
.floral--tl { top: -1%;  left: -11%;  width: min(27%, 118px); transform: rotate(-10deg); }
.floral--tr { top: -1%;  right: -11%; width: min(27%, 118px); transform: rotate(10deg); }
.floral--bl { bottom: -1%; left: -12%; width: min(30%, 130px); transform: rotate(16deg); opacity: .26; }
.floral--br { bottom: 20%; right: -13%; width: min(27%, 120px); transform: rotate(-14deg); opacity: .22; }

.card > *:not(.card-florals) { position: relative; z-index: 2; }

/* ── Reveal on scroll ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s ease, transform 1s var(--ease-drama); }
.reveal.in { opacity: 1; transform: none; }

/* ── Head ───────────────────────────────────────────────────── */
.invite-head { text-align: center; }

.guest-line {
  margin: 0 0 12px;
  font-family: var(--display); font-style: italic;
  font-size: clamp(17px, 4.6vw, 21px); color: var(--rose-600);
}
.salutation {
  margin: 0 0 10px;
  font-family: var(--display); font-size: clamp(24px, 6.6vw, 34px);
  color: var(--forest-600); letter-spacing: .04em;
}
.invite-line {
  margin: 0 auto clamp(24px, 6vw, 34px); max-width: 40ch;
  font-size: clamp(14px, 3.7vw, 16px); color: var(--ink-soft); line-height: 1.8;
}

/* The printed card, both pages, exactly as issued. */
.card-pages { margin: 0 0 clamp(22px, 6vw, 32px); padding: 0; }
.card-page {
  display: block; width: 100%; padding: 0; margin: 0 0 clamp(14px, 4vw, 22px);
  border: 1px solid rgba(176,141,74,.3);
  background: #fff; cursor: zoom-in;
  box-shadow: 0 2px 6px rgba(36,53,43,.06), 0 18px 44px -20px rgba(36,53,43,.3);
  transition: transform .5s var(--ease-drama), box-shadow .5s ease;
  -webkit-tap-highlight-color: transparent;
}
.card-page:last-of-type { margin-bottom: 10px; }
.card-page img { width: 100%; }
.card-page:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(36,53,43,.07), 0 26px 56px -22px rgba(36,53,43,.4); }
.card-page:focus-visible { outline: 2px solid var(--forest-600); outline-offset: 3px; }
.card-pages figcaption {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
}

.countdown {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 2vw, 12px);
  max-width: 400px; margin: clamp(20px, 5vw, 28px) auto 0;
}
.countdown div {
  padding: 10px 4px 8px;
  border: 1px solid rgba(176,141,74,.22);
  background: rgba(255,255,255,.5);
}
.countdown b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(20px, 6vw, 28px); color: var(--forest-700); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.countdown span {
  display: block; font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 3px;
}

/* ── Lightbox ───────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 85;
  display: grid; place-items: center;
  padding: clamp(10px, 3vw, 34px);
  background: rgba(28,42,33,.9);
  opacity: 0; transition: opacity .35s ease;
  overflow: auto; cursor: zoom-out;
}
.lightbox.in { opacity: 1; }
.lightbox img {
  max-width: min(100%, 820px); max-height: 92vh;
  object-fit: contain; background: #fff;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.lightbox-close {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(248,246,232,.35); background: rgba(0,0,0,.35);
  color: var(--cream-100); font-size: 26px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(0,0,0,.6); }

/* ── Dividers ───────────────────────────────────────────────── */
.divider { display: flex; justify-content: center; margin: clamp(30px, 8vw, 52px) 0; }
.divider img { width: min(46%, 190px); opacity: .55; }
.divider--flip img { transform: scaleX(-1); }

/* ── Sections ───────────────────────────────────────────────── */
.section-title {
  margin: 0 0 6px; text-align: center;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(23px, 6.2vw, 31px); color: var(--forest-700); letter-spacing: .06em;
}
.section-sub {
  margin: 0 auto clamp(22px, 6vw, 34px); max-width: 38ch; text-align: center;
  font-size: clamp(13px, 3.4vw, 14px); color: var(--ink-faint); letter-spacing: .04em;
}

/* ── Events timeline ────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(134,161,136,.5) 12%, rgba(134,161,136,.5) 88%, transparent);
}
.event { position: relative; padding: 0 0 clamp(18px, 4.5vw, 26px) clamp(28px, 7vw, 38px); }
.event:last-child { padding-bottom: 0; }
.event::before {
  content: ''; position: absolute; left: 0; top: 16px;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, var(--blush-200), var(--rose-500));
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(211,72,91,.22);
}
.event-card {
  padding: clamp(15px, 4vw, 20px) clamp(15px, 4vw, 22px);
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(176,141,74,.2);
  transition: transform .5s var(--ease-drama), box-shadow .5s ease, border-color .4s ease;
}
.event-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px -14px rgba(36,53,43,.3); border-color: rgba(176,141,74,.4); }
.event-name {
  margin: 0 0 2px; font-family: var(--display); font-weight: 500;
  font-size: clamp(19px, 5vw, 24px); color: var(--rose-600); letter-spacing: .04em;
}
.event-when { margin: 0; font-size: clamp(13px, 3.5vw, 15px); color: var(--forest-600); font-weight: 400; }
.event-hijri { margin: 1px 0 0; font-size: clamp(11.5px, 3.1vw, 13px); color: var(--ink-faint); font-style: italic; }
.event-venue { margin: 9px 0 0; font-size: clamp(13px, 3.4vw, 14.5px); color: var(--ink); line-height: 1.55; }
.event-venue b { font-weight: 400; color: var(--forest-700); }
.event-city { color: var(--ink-soft); }
.event-note { margin: 7px 0 0; font-size: 12.5px; color: var(--rose-600); }
.event-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(74,99,80,.28);
  background: transparent; color: var(--forest-600);
  font-family: var(--ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.chip:hover, .chip:focus-visible { background: var(--forest-600); color: var(--cream-100); border-color: var(--forest-600); }

/* ── RSVP form ──────────────────────────────────────────────── */
.field { margin-bottom: clamp(16px, 4vw, 20px); }
.field label {
  display: block; margin-bottom: 7px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.field .opt { text-transform: none; letter-spacing: .04em; color: var(--ink-faint); }
.field input, .field textarea {
  width: 100%; padding: 13px 15px;
  font-family: var(--ui); font-size: 16px; font-weight: 300; color: var(--ink);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(74,99,80,.24); border-radius: 2px;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #B4BFB6; }
.field input:focus, .field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--forest-500); box-shadow: 0 0 0 3px rgba(87,117,91,.13);
}
.field input.invalid, .field textarea.invalid { border-color: var(--rose-500); box-shadow: 0 0 0 3px rgba(211,72,91,.12); }

.events-fieldset { margin: 0 0 clamp(16px, 4vw, 22px); padding: 0; border: 0; }
.events-fieldset legend {
  padding: 0; margin-bottom: 12px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}

.rsvp-event {
  border: 1px solid rgba(176,141,74,.2);
  background: rgba(255,255,255,.6);
  padding: clamp(13px, 3.6vw, 17px);
  margin-bottom: 10px;
  transition: border-color .4s ease, background .4s ease;
}
.rsvp-event.yes { border-color: rgba(87,117,91,.55); background: rgba(183,198,152,.14); }
.rsvp-event.no  { border-color: rgba(176,141,74,.16); background: rgba(255,255,255,.4); opacity: .78; }

.rsvp-event__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rsvp-event__name {
  font-family: var(--display); font-size: clamp(17px, 4.6vw, 21px);
  color: var(--forest-700); letter-spacing: .03em; line-height: 1.25;
}
.rsvp-event__when { display: block; font-family: var(--ui); font-size: 11.5px; letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; margin-top: 2px; }

.yn { display: inline-flex; flex: none; border: 1px solid rgba(74,99,80,.3); border-radius: 999px; overflow: hidden; background: #fff; }
.yn button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 8px 17px; font-family: var(--ui); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); transition: background .3s ease, color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.yn button[aria-pressed="true"] { background: var(--forest-600); color: var(--cream-100); }
.yn button.no-btn[aria-pressed="true"] { background: var(--rose-600); }
.yn button:focus-visible { outline: 2px solid var(--forest-500); outline-offset: -2px; }

/* Guest stepper slides open only when the answer is yes. */
.count-row {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-drama), opacity .4s ease, margin-top .4s ease;
  opacity: 0; margin-top: 0;
}
.rsvp-event.yes .count-row { grid-template-rows: 1fr; opacity: 1; margin-top: 13px; }
.count-row > div { overflow: hidden; }
.count-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 1px; }
.count-label { font-size: 12px; letter-spacing: .1em; color: var(--ink-soft); text-transform: uppercase; }
.stepper { display: inline-flex; align-items: center; border: 1px solid rgba(74,99,80,.28); background: #fff; }
.stepper button {
  width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--forest-600);
  transition: background .25s ease, color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.stepper button:hover:not(:disabled) { background: var(--forest-600); color: #fff; }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper input {
  width: 46px; height: 38px; text-align: center; border: 0; border-left: 1px solid rgba(74,99,80,.16); border-right: 1px solid rgba(74,99,80,.16);
  font-family: var(--display); font-size: 19px; color: var(--forest-700); background: transparent;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: 2px solid var(--forest-500); outline-offset: -2px; }

.form-error {
  margin: 0 0 14px; padding: 11px 14px;
  background: rgba(211,72,91,.08); border-left: 2px solid var(--rose-500);
  color: var(--rose-700); font-size: 13.5px;
}

.submit-btn {
  position: relative; width: 100%;
  padding: 16px 24px; border: 0; border-radius: 2px;
  background: linear-gradient(135deg, var(--forest-700), var(--forest-600) 55%, var(--forest-500));
  color: var(--cream-100); cursor: pointer;
  font-family: var(--ui); font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
  overflow: hidden;
  transition: transform .4s var(--ease-drama), box-shadow .4s ease, opacity .3s ease;
  box-shadow: 0 8px 24px -10px rgba(58,87,68,.7);
  -webkit-tap-highlight-color: transparent;
}
.submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(58,87,68,.85); }
.submit-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.submit-btn:disabled { opacity: .65; cursor: progress; }
.submit-btn::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
  animation: sheen 4.5s ease-in-out 1.5s infinite;
}
@keyframes sheen { 0% { left: -60%; } 45%, 100% { left: 130%; } }
.submit-btn__spinner { display: none; width: 15px; height: 15px; margin-left: 10px; border-radius: 50%; border: 1.5px solid rgba(248,246,232,.35); border-top-color: var(--cream-100); animation: spin .8s linear infinite; vertical-align: -2px; }
.submit-btn.busy .submit-btn__spinner { display: inline-block; }

.form-foot { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--ink-faint); }

.rsvp-closed {
  padding: 22px; text-align: center;
  border: 1px solid rgba(176,141,74,.3); background: rgba(255,255,255,.6);
  font-size: 14.5px; color: var(--ink-soft);
}

/* ── Foot ───────────────────────────────────────────────────── */
.invite-foot { text-align: center; }
.foot-note {
  margin: 0 0 clamp(18px, 5vw, 26px);
  font-family: var(--display); font-style: italic;
  font-size: clamp(15px, 4vw, 18px); color: var(--rose-600);
}
.hosts { list-style: none; margin: 0; padding: 0; }
.hosts li {
  font-family: var(--display); font-size: clamp(15px, 4vw, 18px);
  color: var(--forest-700); letter-spacing: .05em; line-height: 1.9;
}
.foot-contact { margin: 16px 0 0; font-size: 13px; color: var(--ink-soft); }
.foot-contact a { color: var(--forest-600); }
.foot-mark { margin: clamp(20px, 5vw, 28px) 0 0; color: var(--sage-400); font-size: 17px; }

/* ==========================================================================
   Scene 3 — confirmation
   ========================================================================== */
.thanks {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: 28px 22px;
  background: radial-gradient(125% 95% at 50% 28%, #FFFFFF 0%, #FCFBF6 42%, #F3EFE3 100%);
  color: var(--forest-700); text-align: center;
  opacity: 0; transition: opacity .9s ease;
  overflow-y: auto;
}
.thanks.in { opacity: 1; }
.thanks-inner { max-width: 440px; width: 100%; }
.thanks-mono { width: min(60%, 210px); margin: 0 auto 14px; filter: drop-shadow(0 10px 26px rgba(74,99,80,.16)); animation: mono-float 9s ease-in-out infinite; }
.thanks h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 300; font-size: clamp(30px, 8vw, 42px); letter-spacing: .1em; }
.thanks p { margin: 0 auto 20px; max-width: 32ch; color: var(--ink-soft); font-size: 14.5px; line-height: 1.75; }
.thanks-list { list-style: none; margin: 0 0 24px; padding: 0; text-align: left; display: inline-block; }
.thanks-list li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 9px 2px; border-bottom: 1px solid rgba(176,141,74,.24);
  font-size: 13.5px;
}
.thanks-list li:last-child { border-bottom: 0; }
.thanks-list .t-name { color: var(--forest-700); }
.thanks-list .t-val { color: var(--rose-600); letter-spacing: .06em; }
.thanks-list .t-val.no { color: var(--ink-faint); }

.ghost-btn {
  padding: 11px 24px; border-radius: 999px;
  border: 1px solid rgba(74,99,80,.35); background: rgba(255,255,255,.7); color: var(--forest-700);
  font-family: var(--ui); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.ghost-btn:hover { background: var(--forest-700); color: var(--cream-100); border-color: var(--forest-700); }

/* ── Fatal / not-found message ──────────────────────────────── */
.fatal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 30px;
  background: var(--paper); color: var(--forest-700); text-align: center;
}
.fatal div { max-width: 34ch; }
.fatal h2 { font-family: var(--display); font-weight: 300; font-size: 28px; margin: 0 0 10px; }
.fatal p { color: var(--ink-soft); font-size: 14.5px; margin: 0; }

/* ==========================================================================
   Motion & viewport preferences
   ========================================================================== */
@media (max-width: 420px) {
  .couple { gap: 4px; }
  .couple-joiner { width: 26%; }
  .countdown div { padding: 8px 2px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .wrapped-mono { -webkit-mask-image: none; mask-image: none; transform: none; }
  .rule > span { width: min(300px, 62%); }
  .cover-eyebrow, .cover-names, .cover-date, .wrapped, .cover-hint { opacity: 1; }
  #petal-canvas { display: none; }
}