/* ═══════════════════════════════════════════════════════════════
   Olena & Nawwar — 25 September 2026
   Sage / gold / cream palette · layout & curvy timeline from Example 1
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root{
  /* neutrals */
  --paper:      #FDFBF6;
  --cream:      #F7F3EA;
  --cream-deep: #EFE8DA;
  --backdrop:   #EAE4D6;

  /* sage — the panels. Light enough to carry dark text at AA. */
  --sage-1:     #E1E5D5;   /* lightest panel */
  --sage-2:     #D5DAC6;   /* mid panel */
  --sage-3:     #C7CDB5;   /* deepest panel (RSVP) */
  --sage-line:  #A3AC8B;   /* decorative hairlines on sage */
  --sage:       #A8AE97;   /* margin flora */
  --sage-pale:  #C8CBB6;

  /* greens — now the *ink*, not the ground */
  --forest:     #333D2B;   /* body text on sage */
  --olive:      #4A5340;   /* buttons, nodes, headings */
  --olive-deep: #333B2B;

  /* golds */
  --gold:       #B08D57;   /* rules and icons only — decorative */
  --gold-deep:  #6B5029;   /* small text on cream or sage — passes AA */
  --gold-amp:   #A07A45;   /* the display ampersand */

  /* ink on paper */
  --ink:        #2F3328;
  --ink-soft:   #545948;
  --ink-faint:  #656A56;   /* dark enough for 10–15px text at AA */

  /* type */
  --serif:   'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --script:  'Parisienne', 'Snell Roundhand', cursive;
  --display: 'Tangerine', 'Snell Roundhand', 'Apple Chancery', cursive;
  --sans:    'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --sheet-w: 620px;
  --pad: clamp(22px, 6.5vw, 46px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,p,ul,ol,li,figure,fieldset,legend,address{ margin:0; padding:0; }
ul,ol{ list-style:none; }
fieldset{ border:0; min-width:0; }
img{ display:block; max-width:100%; }
button,input,textarea,select{ font:inherit; color:inherit; }
/* class-based display rules must never beat the hidden attribute */
[hidden]{ display:none !important; }

body{
  background:var(--backdrop);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.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;
}
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--olive); color:var(--paper);
  padding:12px 18px; font-family:var(--sans); font-size:14px;
}
.skip:focus{ left:8px; top:8px; }

:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:3px;
  border-radius:2px;
}

/* ── Page backdrop: paper grain + margin flora ──────────────── */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page-flora{ position:fixed; inset:0; z-index:0; pointer-events:none; display:none; }
.flora{ position:absolute; width:150px; height:250px; color:var(--sage); opacity:.5; }
.flora--tl{ top:-18px; left:2.5vw; transform:rotate(14deg); }
.flora--br{ bottom:-18px; right:2.5vw; transform:rotate(-160deg); }
@media (min-width:1020px){ .page-flora{ display:block; } }

/* ── The sheet ──────────────────────────────────────────────── */
.sheet{
  position:relative; z-index:1;
  max-width:var(--sheet-w);
  margin:0 auto;
  background:var(--paper);
  overflow:hidden;
}
@media (min-width:700px){
  .sheet{
    margin-block:34px;
    box-shadow:0 1px 2px rgba(47,51,40,.06), 0 24px 60px -18px rgba(47,51,40,.22);
  }
}

/* ── Shared type ────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans); font-weight:400;
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep);
}
.h-display{
  font-weight:300; font-size:clamp(34px,9.5vw,50px);
  letter-spacing:.10em; text-transform:uppercase; line-height:1.14;
  color:var(--ink);
}
.h-display--sm{ font-size:clamp(25px,6.6vw,33px); letter-spacing:.09em; }

.h-script{
  font-family:var(--script); font-weight:400;
  font-size:clamp(29px,7.6vw,40px); line-height:1.28;
  color:var(--olive);
}
.h-script--lg{ font-size:clamp(33px,8.6vw,46px); }

/* on a sage panel these pick up the panel's own ink tokens */
.h-display--panel{ color:var(--panel-ink,var(--ink)); }
.h-script--panel{  color:var(--panel-accent,var(--olive)); }

.prose p + p{ margin-top:1.05em; }
.prose{ color:var(--ink-soft); font-size:18px; line-height:1.78; }
.muted{ color:var(--ink-soft); }
.muted--sm{ font-size:15px; color:var(--ink-faint); font-family:var(--sans); font-weight:300; }

.rule{ display:block; width:150px; height:19px; margin:16px auto; color:var(--sage-line); }
.rule--gold{ color:var(--gold); }
.panel .rule--gold{ color:var(--panel-rule,var(--gold)); }

/* ── Sections ───────────────────────────────────────────────── */
.section{
  position:relative;
  padding:clamp(52px,11vw,78px) var(--pad);
  text-align:center;
}
.section--tight{ padding-block:clamp(38px,8vw,54px); }

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

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  padding:clamp(46px,11vw,74px) var(--pad) 0;
  text-align:center;
  overflow:hidden;
}
.hero__wash{
  position:absolute; inset:-10% -20% auto; height:70%;
  background:
    radial-gradient(50% 46% at 18% 12%, rgba(168,174,151,.36), transparent 70%),
    radial-gradient(46% 40% at 86% 6%,  rgba(176,141,87,.18),  transparent 72%),
    radial-gradient(70% 50% at 50% 0%,  rgba(163,172,139,.20), transparent 74%);
  filter:blur(6px);
}
.hero__inner{ position:relative; }

.monogram{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(38px,10vw,52px); line-height:1;
  color:var(--olive);
}
.monogram i{ width:1px; height:1.05em; background:var(--gold); }
.monogram--sm{ font-size:26px; gap:9px; margin-top:6px; }
.monogram--sm i{ background:var(--sage-line); }

.hero .eyebrow{ margin-top:4px; }

/* The names — formal script, one line, like Example 1 */
.names{
  margin-top:10px;
  font-family:var(--display); font-weight:400;
  /* Tangerine has a very small x-height and fine hairlines, so it is set
     roughly 1.4x larger than a comparable script would be. Do not shrink
     this below ~54px or the thin strokes start to break up. */
  font-size:clamp(54px,16vw,96px);
  line-height:1.18;
  letter-spacing:.005em;
  color:var(--olive);
  text-wrap:balance;
}
.names__amp{
  color:var(--gold-amp);
  font-size:.86em;
  padding-inline:.04em;
}

.datebar{
  margin-top:22px;
  display:inline-flex; align-items:center; gap:16px;
  padding:9px 4px;
  border-top:1px solid var(--sage-line); border-bottom:1px solid var(--sage-line);
  font-family:var(--sans); font-weight:300;
}
.datebar__side{
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft);
}
.datebar__day{
  font-family:var(--serif); font-size:38px; line-height:1;
  font-weight:300; color:var(--olive);
}
.datebar__year{
  margin-top:11px;
  font-family:var(--sans); font-weight:300;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
}

.scrollcue{ padding:26px 0 0; }
.scrollcue span{
  font-family:var(--sans); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-faint);
}
.scrollcue::after{
  content:''; display:block; width:1px; height:44px; margin:10px auto 0;
  background:linear-gradient(var(--sage-line), transparent);
}

/* ── Photo frames ───────────────────────────────────────────── */
.arch,.frame{ position:relative; margin-top:30px; overflow:hidden; background:var(--cream-deep); }
.arch{ border-radius:170px 170px 6px 6px; aspect-ratio:4/5; }
.arch::after,.frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(176,141,87,.42);
  border-radius:inherit;
}
.arch img,.frame img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.arch img.is-missing,.frame img.is-missing{ display:none; }

.arch__ph,.frame__ph{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:
    repeating-linear-gradient(-45deg, rgba(163,172,139,.14) 0 12px, transparent 12px 24px),
    var(--cream-deep);
  color:#6F7660;
  font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.arch__sprig{ width:58px; height:96px; opacity:.85; }

.frame{ border-radius:5px; aspect-ratio:16/10; }
/* The venue frame takes the shape of whatever photo is in it (set from
   the image's natural size in script.js). This ratio is only the
   fallback shown while it loads, or if the file is missing. */
.frame--wide{ aspect-ratio:16/10; }
.frame--arch{ border-radius:120px 120px 4px 4px; aspect-ratio:3/4; margin-top:0; }
.frame--tall{ grid-row:span 2; aspect-ratio:3/5; }

.gal{
  margin-top:24px;
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  align-items:start;
}

/* ═══════════ COUNTDOWN ═══════════ */
.cd{
  margin-top:18px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.cd li{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 4px;
  border:1px solid var(--sage-line);
  background:var(--sage-1);
  border-radius:3px;
}
.cd b{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(25px,7vw,34px); line-height:1; color:var(--olive);
  font-variant-numeric:tabular-nums;
}
.cd span{
  font-family:var(--sans); font-weight:300;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.cd__note{
  margin-top:12px; font-style:italic; color:var(--ink-soft); font-size:16px;
}
.cd__note em{ color:var(--gold-deep); font-style:italic; }

/* ═══════════ LETTER ═══════════ */
.letter{ background:var(--cream); }
.letter .prose{ margin-top:8px; }
.signoff{
  margin-top:26px;
  font-family:var(--sans); font-weight:300; font-size:14px;
  letter-spacing:.1em; color:var(--ink-faint);
}
.signoff span{
  display:block; margin-top:4px;
  font-family:var(--script); font-size:28px; letter-spacing:0;
  color:var(--olive);
}

/* ═══════════ SAGE PANELS ═══════════
   Each panel exposes its own ink tokens, so children never need to know
   which of the three tones they are sitting on. */
.panel{
  position:relative;
  margin-block:-1px;

  --panel-ink:    var(--forest);
  --panel-body:   #414B36;
  --panel-accent: var(--gold-deep);
  --panel-rule:   var(--gold);
  --panel-line:   rgba(74,83,64,.30);
  --panel-node:   var(--olive);
  --panel-node-ico: var(--cream);

  color:var(--panel-ink);
  background-color:var(--sage-2);
  background-image:
    radial-gradient(40% 20% at 8% 6%,   rgba(253,251,246,.40), transparent 70%),
    radial-gradient(44% 22% at 94% 94%, rgba(74,83,64,.05),    transparent 72%);
  background-repeat:no-repeat;
}
.panel--soft{ background-color:var(--sage-1); }
.panel--dark{ background-color:var(--sage-3); }

.panel__inner{
  position:relative;
  padding:clamp(30px,7vw,44px) var(--pad) clamp(40px,9vw,58px);
  text-align:center;
}
.panel .rule{ margin-bottom:26px; }

/* The wave is a bite taken out of the panel, so it is painted in the
   colour of the neighbouring section — not the panel's own colour. */
.wave{ display:block; width:100%; height:38px; position:relative; }
.wave path{ fill:var(--wave-fill); }
.wave--top{    margin-bottom:-1px; --wave-fill:var(--cream); }
.wave--bottom{ margin-top:-1px;    --wave-fill:var(--paper); }

/* ═══════════ CALENDAR — the wedding week only ═══════════ */
.cal{ max-width:352px; margin:10px auto 0; }
.cal__month{
  font-family:var(--sans); font-weight:400;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--panel-accent); margin-bottom:14px;
}
.cal__week{
  display:grid; grid-template-columns:repeat(7,1fr);
  align-items:end;
}
.cal__week li{
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.cal__week i{
  font-style:normal;
  font-family:var(--sans); font-weight:400;
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--panel-body);
}
.cal__week b{
  position:relative;
  display:grid; place-items:center;
  width:38px; height:36px;
  font-family:var(--sans); font-weight:300; font-size:15.5px;
  color:var(--panel-ink);
}
/* the heart sits behind the number and is where the timeline begins */
.cal__is-day svg{
  position:absolute; inset:0; margin:auto;
  width:38px; height:35px;
  fill:var(--olive);
  filter:drop-shadow(0 2px 4px rgba(51,61,43,.22));
}
.cal__is-day em{
  position:relative; z-index:1;
  font-style:normal; font-weight:500; color:var(--cream);
  /* nudge up: the heart's visual centre sits above its box centre */
  transform:translateY(-2px);
}
.cal__is-day i{ color:var(--panel-accent); font-weight:500; }

/* ═══════════ CURVY TIMELINE ═══════════ */
.tl{
  position:relative;
  margin-top:6px;
  padding-top:52px;   /* room for the curve's lead-in from the calendar */
}
.tl__curve{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.tl__track{
  stroke:rgba(74,83,64,.16);
  stroke-width:1.4; stroke-linecap:round;
}
.tl__ink{
  stroke:var(--olive);
  stroke-width:1.6; stroke-linecap:round;
}

.tl__stops{ position:relative; }

.stop{
  position:relative;
  min-height:104px;
  display:flex; align-items:center;
}
.stop__node{
  position:absolute; top:50%; z-index:2;
  width:46px; height:46px; margin-top:-23px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--panel-node);
  color:var(--panel-node-ico);
  box-shadow:0 3px 10px rgba(51,61,43,.20);
  transform:scale(.55); opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.stop__node svg{ width:23px; height:23px; }
.stop.is-lit .stop__node{ transform:scale(1); opacity:1; }

.stop__body{
  opacity:0; transform:translateY(10px);
  transition:opacity .55s var(--ease) .08s, transform .55s var(--ease) .08s;
}
.stop.is-lit .stop__body{ opacity:1; transform:none; }

.stop__time{
  font-family:var(--sans); font-weight:400;
  font-size:15px; letter-spacing:.14em;
  color:var(--panel-accent);
}
.stop__time span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.stop__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(19px,5vw,23px); letter-spacing:.09em; text-transform:uppercase;
  line-height:1.2; margin-top:2px; color:var(--panel-ink);
}
.stop__place{
  margin-top:2px; font-size:15.5px; font-style:italic;
  color:var(--panel-body);
}

/* left / right swing */
.stop[data-side="left"] .stop__node{ left:20%; margin-left:-23px; }
.stop[data-side="left"] .stop__body{ margin-left:32%; padding-right:4%; text-align:left; }

.stop[data-side="right"] .stop__node{ left:80%; margin-left:-23px; }
.stop[data-side="right"] .stop__body{ margin-right:32%; padding-left:4%; text-align:right; margin-left:auto; }

.tl__end{
  display:block; margin:6px auto 0; width:22px; height:20px;
  color:var(--olive); opacity:0;
  transition:opacity .6s var(--ease);
}
.tl__end svg{ width:100%; height:100%; fill:currentColor; }
.tl.is-done .tl__end{ opacity:.9; }

@media (max-width:400px){
  .stop[data-side="left"] .stop__node{ left:15%; }
  .stop[data-side="left"] .stop__body{ margin-left:28%; }
  .stop[data-side="right"] .stop__node{ left:85%; }
  .stop[data-side="right"] .stop__body{ margin-right:28%; }
  .stop__node{ width:40px; height:40px; margin-top:-20px; margin-left:-20px !important; }
  .stop__node svg{ width:20px; height:20px; }
}

/* ═══════════ VENUE ═══════════ */
.venue__addr{
  margin-top:22px; font-style:normal;
  font-size:17px; line-height:1.8; color:var(--ink-soft);
  letter-spacing:.02em;
}

.btnrow{
  margin-top:22px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.btnrow .btn{ flex:1 1 auto; min-width:205px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px;
  font-family:var(--sans); font-weight:400;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  background:var(--olive); color:var(--cream);
  border:1px solid var(--olive); border-radius:2px;
  transition:background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background:var(--olive-deep); border-color:var(--olive-deep); }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:17px; height:17px; }

.btn--ghost{ background:transparent; color:var(--olive); border-color:var(--sage-line); }
.btn--ghost:hover{ background:var(--olive); color:var(--cream); border-color:var(--olive); }
.btn--ghost-panel{ color:var(--panel-ink); border-color:var(--panel-line); }
.btn--ghost-panel:hover{ background:var(--olive); color:var(--cream); border-color:var(--olive); }

.calmenu{
  margin:12px auto 0; max-width:280px;
  display:flex; flex-direction:column;
  border:1px solid var(--sage-line); border-radius:3px; overflow:hidden;
  background:var(--cream);
}
.calmenu a,.calmenu button{
  padding:12px 16px; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:13px; letter-spacing:.08em;
  color:var(--ink); text-decoration:none; text-align:center;
}
.calmenu a:hover,.calmenu button:hover{ background:var(--cream-deep); }
.calmenu a + button{ border-top:1px solid var(--sage-line); }

/* ═══════════ DRESS CODE ═══════════ */
.dress{ background:var(--cream); }
.dress .h-script{ margin-top:2px; font-size:clamp(27px,7.2vw,40px); }
.dress .muted{ margin-top:8px; font-size:16px; }
.swatches{
  margin-top:20px;
  display:flex; justify-content:center; gap:12px;
}
.swatches li{
  width:38px; height:38px; border-radius:50%;
  background:var(--sw);
  box-shadow:0 0 0 1px rgba(47,51,40,.12), 0 2px 6px rgba(47,51,40,.10);
}

/* ═══════════ GUEST INFO ═══════════ */
.infolist{ margin-top:6px; text-align:left; display:grid; gap:22px; }
.infolist li{ display:flex; gap:15px; align-items:flex-start; }
.infolist__ico{
  flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--panel-line); border-radius:50%;
  color:var(--olive);
}
.infolist__ico svg{ width:21px; height:21px; }
.infolist h3{
  font-family:var(--sans); font-weight:400;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--panel-accent); margin-bottom:3px;
}
.infolist p{ font-size:16.5px; line-height:1.68; color:var(--panel-body); }

/* ═══════════ GIFTS ═══════════ */
.gifts__ico{
  display:grid; place-items:center; width:54px; height:54px; margin:0 auto 16px;
  border:1px solid var(--sage-line); border-radius:50%; color:var(--gold);
}
.gifts__ico svg{ width:26px; height:26px; }
.gifts .muted{ margin-top:12px; }
.gifts__link{ margin-top:20px; }

/* ═══════════ GALLERY ═══════════ */
.gallery{ background:var(--cream); }
.gallery .eyebrow{ margin-bottom:4px; }

/* ═══════════ RSVP FORM ═══════════ */
.rsvp__by{
  font-family:var(--sans); font-weight:400; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--panel-body); margin-top:-12px; margin-bottom:26px;
}
.rsvp__by b{ font-weight:500; color:var(--panel-accent); }

.form{ text-align:left; display:grid; gap:19px; }
.field{ display:grid; gap:7px; }
.field label,.field legend{
  font-family:var(--sans); font-weight:400;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--panel-body);
  padding:0;
}
/* The sage panel is light, so there is no room for a genuinely faint tone
   here — these stay legible and lean on size and case to read as secondary. */
.opt{ text-transform:none; letter-spacing:.04em; color:var(--panel-body); font-size:11px; }
.hint{
  font-family:var(--sans); font-weight:400; font-size:12px;
  color:var(--panel-body); margin-top:6px;
}

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field textarea{
  width:100%; padding:11px 13px;
  background:rgba(253,251,246,.62);
  border:1px solid var(--panel-line);
  border-radius:2px;
  color:var(--forest);
  font-family:var(--serif); font-size:17px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:56px; }
.field input:focus,.field textarea:focus{
  background:var(--paper);
  border-color:var(--olive);
}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{ border-color:#A4442F; }

.err{
  font-family:var(--sans); font-size:12px; color:#8E3823;
}
.err:empty{ display:none; }

/* radios & checkboxes */
.choices{ display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; }
.choices--2 > *{ flex:1 1 44%; }
.choices--3 > *{ flex:1 1 28%; }
.choice{ position:relative; display:flex; }
.choice input{
  position:absolute; opacity:0; width:0; height:0;
}
.choice span{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:10px 14px; text-align:center; cursor:pointer;
  font-family:var(--sans); font-weight:400; font-size:13px; letter-spacing:.06em;
  color:var(--panel-body);
  background:rgba(253,251,246,.5);
  border:1px solid var(--panel-line); border-radius:2px;
  transition:all .25s var(--ease);
}
.choice:hover span{ border-color:var(--olive); }
.choice input:checked + span{
  background:var(--olive); border-color:var(--olive);
  color:var(--cream);
}
.choice input:focus-visible + span{ outline:2px solid var(--olive); outline-offset:2px; }

/* single opt-in checkbox (WhatsApp group) */
.check{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; position:relative; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  flex:0 0 auto; width:21px; height:21px; margin-top:1px;
  display:grid; place-items:center;
  background:rgba(253,251,246,.5);
  border:1px solid var(--panel-line); border-radius:2px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.check__box svg{ width:13px; height:13px; color:var(--cream); opacity:0; transition:opacity .2s var(--ease); }
.check input:checked + .check__box{ background:var(--olive); border-color:var(--olive); }
.check input:checked + .check__box svg{ opacity:1; }
.check input:focus-visible + .check__box{ outline:2px solid var(--olive); outline-offset:2px; }
.check__txt{
  font-family:var(--sans); font-weight:400; font-size:13.5px; line-height:1.5;
  color:var(--panel-body); text-transform:none; letter-spacing:.02em;
}

/* stepper */
.stepper{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--panel-line); border-radius:2px; overflow:hidden;
  width:150px; background:rgba(253,251,246,.5);
}
.stepper button{
  width:44px; background:transparent; border:0; cursor:pointer;
  color:var(--olive); font-size:20px; line-height:1;
  transition:background .25s var(--ease);
}
.stepper button:hover{ background:rgba(74,83,64,.12); }
.stepper input{
  flex:1; width:100%; min-width:0; text-align:center;
  background:transparent; border:0;
  border-inline:1px solid var(--panel-line);
  color:var(--forest); font-family:var(--sans); font-size:16px;
  -moz-appearance:textfield; appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.ifyes{ display:grid; gap:19px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn--send{
  width:100%; margin-top:4px; padding:15px;
  letter-spacing:.24em;
}

.btn--send[disabled]{ opacity:.6; cursor:progress; }

.form__status{
  font-family:var(--sans); font-size:13px; text-align:center;
  color:var(--panel-body); min-height:1.2em;
}
.form__status.is-err{ color:#8E3823; }

.thanks{ display:grid; gap:12px; justify-items:center; padding-block:14px; }
.thanks__heart{ width:34px; height:31px; color:var(--olive); }
.thanks__heart svg{ width:100%; height:100%; fill:currentColor; }
.thanks p{ color:var(--panel-body); }
.thanks .h-script--panel{ color:var(--olive); }
.thanks .btn{ margin-top:10px; }

/* ═══════════ CLOSING ═══════════ */
.closing{ padding-bottom:clamp(44px,9vw,64px); }
.contact{
  margin-top:16px; display:grid; gap:14px; justify-content:center;
  text-align:left;
}
.contact li{ display:flex; gap:13px; align-items:center; }
.contact__ico{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--sage-line); border-radius:50%; color:var(--olive);
}
.contact__ico svg{ width:18px; height:18px; }
.contact b{
  display:block; font-family:var(--sans); font-weight:400;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep);
}
.contact a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--sage-line); }
.contact a:hover{ border-color:var(--gold); }

.foot{
  margin-top:14px;
  font-family:var(--sans); font-weight:300;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ═══════════ FLOATING RSVP ═══════════ */
.fab{
  position:fixed; z-index:20;
  right:16px; bottom:16px;
  padding:13px 22px;
  background:var(--olive); color:var(--cream);
  font-family:var(--sans); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; border-radius:999px;
  box-shadow:0 6px 20px rgba(47,51,40,.28);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.fab.is-on{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ background:var(--olive-deep); }
@media (min-width:700px){ .fab{ right:calc(50vw - var(--sheet-w)/2 - 74px); } }
@media (max-width:820px){ .fab{ right:16px; } }

/* ═══════════ Motion preferences ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .stop__node{ transform:scale(1); opacity:1; }
  .stop__body{ opacity:1; transform:none; }
  .tl__end{ opacity:.9; }
}

/* ═══════════ Print ═══════════ */
@media print{
  body{ background:#fff; }
  .fab,.scrollcue,.page-flora,.btnrow,.calmenu,.form{ display:none !important; }
  .sheet{ box-shadow:none; margin:0; max-width:none; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .stop__node,.stop__body{ opacity:1 !important; transform:none !important; }
  .panel{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}