/* ============================================================================
   G & G — Wedding
   Pressed-flower letterpress journal. Warm, vintage, restrained.
   ----------------------------------------------------------------------------
   Structure:
     1. Design tokens (color, type, space, motion)
     2. Reset & base
     3. Texture & atmosphere (paper grain, washes)
     4. Typography primitives (eyebrow, headings, prose)
     5. Layout primitives (section, container, rule, deckle)
     6. Components (nav, buttons, cards, polaroids, accordion, form)
     7. Sections (hero, story, details, gallery, places, travel, faq, rsvp, footer)
     8. Motion (reveal, petals)
     9. Responsive
    10. Reduced-motion / print
   ========================================================================== */

/* 1. DESIGN TOKENS ========================================================== */
:root {
  /* — Cherry-blossom palette (from spec) — */
  --blossom-mist:   #EFE2DE;  /* page background, lightest washes            */
  --blossom-light:  #E8A9BC;  /* soft fills, card backgrounds, hover         */
  --blossom:        #E0728E;  /* PRIMARY accent — buttons, links             */
  --blossom-bright: #EE5C73;  /* once-per-screen pop only                    */
  --rose-deep:      #B23A5B;  /* secondary accent, borders, eyebrow text     */
  --lilac:          #C9A8D4;  /* gentle secondary — divider tints, soft bg   */

  /* — Anchors & neutrals — */
  --ink:        #3E2233;      /* dark plum — headings, body, dark sections   */
  --ink-soft:   #5a3a4d;      /* slightly lifted ink for long prose          */
  --cream:      #FAF4F0;      /* cards, raised surfaces                      */
  --cream-deep: #F3E9E3;      /* alternating section wash                    */
  --taupe-rose: #9A7782;      /* secondary / muted text                      */
  --hairline:   rgba(62, 34, 51, 0.14);  /* thin rules                      */
  --hairline-strong: rgba(62, 34, 51, 0.26);

  /* — Semantic — */
  --bg:        var(--blossom-mist);
  --surface:   var(--cream);
  --text:      var(--ink);
  --text-soft: var(--ink-soft);
  --text-mute: var(--taupe-rose);
  --accent:    var(--blossom);
  --accent-2:  var(--rose-deep);

  /* — Type families — */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "EB Garamond", Georgia, serif;

  /* — Fluid type scale (375px → 1440px) — */
  --step--1: clamp(0.82rem, 0.78rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.05rem, 1.00rem + 0.25vw, 1.22rem);
  --step-1:  clamp(1.30rem, 1.18rem + 0.55vw, 1.70rem);
  --step-2:  clamp(1.62rem, 1.40rem + 1.00vw, 2.40rem);
  --step-3:  clamp(2.05rem, 1.65rem + 1.85vw, 3.40rem);
  --step-4:  clamp(2.60rem, 1.90rem + 3.20vw, 5.00rem);
  --step-5:  clamp(3.30rem, 2.10rem + 5.60vw, 7.50rem);

  /* — Spacing — */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --measure: 60ch;          /* prose line length cap            */
  --container: 72rem;       /* max content width                */
  --radius: 4px;            /* letterpress = barely-there radii */
  --radius-card: 8px;

  /* — Shadows: soft, warm, never harsh black — */
  --shadow-s:  0 2px 8px rgba(62, 34, 51, 0.07);
  --shadow-m:  0 10px 30px -12px rgba(62, 34, 51, 0.22);
  --shadow-l:  0 24px 60px -22px rgba(62, 34, 51, 0.30);
  --shadow-photo: 0 14px 34px -14px rgba(62, 34, 51, 0.40);

  /* — Motion — */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-dur: 720ms;

  --nav-h: 4.5rem;
}

/* 2. RESET & BASE =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The hidden attribute must always win, even over display:grid/flex utilities. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* no blue/grey flash on tap */
  overflow-x: clip;                            /* contain decorative bleed (no sideways scroll); clip keeps sticky working */
}

/* No tap-highlight, long-press callout, or text selection on tappable controls. */
a, button, label, summary, .btn, [role="button"], [tabindex] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
button, label, summary, .btn {
  -webkit-user-select: none;
  user-select: none;
}

/* Language switcher — fixed top-right, above everything (incl. the gate). */
.lang-switch {
  position: fixed;
  top: clamp(0.7rem, 2vw, 1.15rem);
  right: clamp(0.9rem, 3vw, 1.6rem);
  z-index: 210;
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  background: rgba(250, 244, 240, 0.72);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  padding: 0.3rem 0.8rem; border-radius: 999px;
  box-shadow: var(--shadow-s);
}
.lang-switch a { color: var(--rose-deep); text-decoration: none; opacity: 0.5; letter-spacing: 0.08em; transition: opacity .2s; }
.lang-switch a:hover { opacity: 0.85; }
.lang-switch a.is-active { opacity: 1; font-weight: 600; }
.lang-switch span { color: var(--hairline-strong); }
.lang-switch a[lang="ar"] { font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; font-size: 1.2em; letter-spacing: 0; }

/* Arabic: calligraphic serif, and no Latin letter-spacing / italics (which
   break connected Arabic script). RTL is set on <html dir> by initLang(). */
html.lang-ar { --font-display: "Amiri", Georgia, serif; --font-body: "Amiri", Georgia, serif; --font-script: "Amiri", Georgia, serif; }
html.lang-ar *, html.lang-ar *::before, html.lang-ar *::after { letter-spacing: normal !important; font-style: normal !important; }


body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
  overflow-x: hidden;
  position: relative;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--accent-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blossom); }

::selection { background: var(--blossom-light); color: var(--ink); }

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

/* 3. TEXTURE & ATMOSPHERE =================================================== */
/* Paper grain — a single tiled SVG noise, very faint, fixed so it reads as
   the paper the whole site is printed on. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* A faint warm vignette so edges feel like aged paper */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(232,169,188,0.18), transparent 60%),
    radial-gradient(100% 70% at 100% 110%, rgba(201,168,212,0.16), transparent 55%);
}

main, .site-nav, .site-footer { position: relative; z-index: 2; }

/* 4. TYPOGRAPHY PRIMITIVES ================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  color: var(--ink);
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: var(--rose-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 2.2em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow--solo::before { display: none; }

.script {
  font-family: var(--font-script); font-style: italic;
  font-weight: 400;
  line-height: 0.95;
  color: var(--rose-deep);
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-m); }
.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-soft);
  font-style: italic;
}

.dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.7;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--blossom);
  font-weight: 600;
}

.amp { font-style: italic; color: var(--rose-deep); font-family: var(--font-display); }

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

/* 5. LAYOUT PRIMITIVES ====================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.container--narrow { max-width: 46rem; }

/* One consistent rhythm for every section (no per-section overrides). */
.section { padding-block: 5rem; }
.section--tight { padding-block: var(--space-xl); }
/* "RSVP by 1st July" — use lining figures so the 1 doesn't read as an I. */
#rsvp-h { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
/* Gifts sits right before RSVP — tighten the gap so they read as one block. */
#gifts { padding-top: var(--space-s); padding-bottom: var(--space-m); }
#stay { padding-bottom: var(--space-m); }   /* tighten the gap before Liste de Mariage */
#rsvp  { padding-top: var(--space-m); }
/* Tinted section with a clearly visible tone, edges fade into the page colour. */
.section--wash {
  background: linear-gradient(to bottom,
    var(--bg) 0,
    #F8F0E7 110px,
    #F8F0E7 calc(100% - 110px),
    var(--bg) 100%);
}
.section-head { text-align: center; margin-bottom: var(--space-xl); }
.section-head .eyebrow { margin-bottom: var(--space-s); }
.section-head h2 { font-size: var(--step-3); }
.section-head .script { font-size: var(--step-2); margin-bottom: 0.1em; }

/* Painted-branch divider (CSS, thinning to nothing at both ends) */
.rule {
  --c: var(--rose-deep);
  border: 0;
  height: 1px;
  width: min(22rem, 60%);
  margin: var(--space-l) auto;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: 0.5;
  position: relative;
}
.rule::after {
  content: "✿";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  color: var(--blossom);
  background: var(--bg);
  padding-inline: 0.7em;
  line-height: 1;
}
.section--wash .rule::after { background: var(--cream-deep); }

/* Deckled / torn-paper frame for the illustrations */
.deckle {
  position: relative;
  background: var(--cream);
  padding: clamp(0.6rem, 1.6vw, 1.1rem);
  box-shadow: var(--shadow-m);
  border-radius: 2px;
  /* irregular edge */
  clip-path: polygon(
    0% 2%, 4% 0%, 50% 1.5%, 96% 0%, 100% 3%,
    99% 50%, 100% 97%, 96% 100%, 50% 98.5%, 4% 100%, 0% 96%, 1% 50%
  );
}
.deckle img { border-radius: 2px; }

/* 6. COMPONENTS ============================================================= */

/* — Nav — */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.site-nav.is-stuck {
  background: rgba(250, 244, 240, 0.86);
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  box-shadow: 0 1px 0 var(--hairline), var(--shadow-s);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
}
.nav-brand {
  font-family: var(--font-script); font-style: italic;
  font-size: 1.9rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.nav-brand:hover { color: var(--rose-deep); }
.nav-links {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  list-style: none;
  padding: 0;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.4rem;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--blossom);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  width: 2.75rem; height: 2.5rem;
  cursor: pointer;
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }

/* — Buttons — */
.btn {
  --btn-bg: var(--blossom);
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  padding: 0.95em 1.9em;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
  box-shadow: var(--shadow-s);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); color: var(--btn-fg); background: var(--rose-deep); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--hairline-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--blossom); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* — Timeline: a hand-painted cherry-blossom branch as the spine, steps beside it — */
.branch-wrap {
  position: relative;
  max-width: 42rem;
  margin: var(--space-xl) auto 0;
}
.branch-stem {
  position: absolute;
  left: 0; top: 0;
  height: 100%;          /* spans the steps; width follows aspect (no distortion) */
  width: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 6px 14px rgba(62,34,51,0.14));
  /* dissolve the blunt cut stem at the very bottom instead of a hard edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 87%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 87%, transparent 99%);
}
.timeline .branch {
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(11rem, 28vw, 16rem);   /* clear the branch strip */
  position: relative;
}
.branch-node {
  padding-block: 0.3rem;
}
.branch-node + .branch-node { margin-top: var(--space-m); }
.branch-time {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--rose-deep);
}
.branch-card h3 { font-size: var(--step-2); margin: 0.08em 0 0.18em; }
.branch-card p { color: var(--text-soft); font-size: var(--step-0); max-width: 34ch; }
.timeline__note { margin-top: var(--space-xl); }

@media (max-width: 600px) {
  .branch-wrap { max-width: none; }
  .timeline .branch { padding-left: 10.75rem; }
  .branch-card h3 { font-size: var(--step-1); }
}

/* — Polaroids: photos scattered on a table —
   A relative "stage" with each photo absolutely placed, tilted, and overlapping.
   Per-photo position/rotation/size/z come from inline custom props
   (--x, --y, --r, --w, --z) so the scatter is easy to art-direct. */
/* — Moments — a riffle stack of prints you flick through — */
/* Clip the section horizontally so a card flung off the right edge can't grow
   the page width (which on mobile drags the fixed petal layer sideways). Using
   `clip` (not hidden) keeps vertical overflow/reveal animations intact. */
.gallery { overflow-x: clip; }
.photo-stack {
  --card-w: clamp(17rem, 72vw, 23rem);
  width: var(--card-w);
  margin: var(--space-l) auto 0;
  position: relative;
  aspect-ratio: 4 / 5;
}
/* auto-playing only — let touches scroll the page straight through it */
.js .photo-stack { touch-action: pan-y; }
.js .photo-stack:focus-visible { outline: 2px solid var(--blossom); outline-offset: 8px; border-radius: 4px; }
.photo-card { pointer-events: none; }   /* never intercept taps/scroll */
.photo-card {
  position: absolute;
  inset: 0;
  background: #fffdf7;
  padding: 0.75rem 0.75rem 2.1rem;   /* classic thicker print border */
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(62,34,51,0.04),
    0 18px 34px -16px rgba(62,34,51,0.5),
    0 4px 10px -6px rgba(62,34,51,0.35);
  transform-origin: center bottom;
  transition: transform .6s var(--ease-out), opacity .45s ease;
  /* No standing will-change: promoting all 6 cards permanently can exhaust a
     phone's compositor-layer budget and evict the petal layers to the main
     thread (which then stutters them during a drag). js/main.js promotes only
     the card in motion, only while it moves. */
}
.photo-card.is-active { will-change: transform; }
.photo-card.is-flinging { transition: transform .5s var(--ease), opacity .5s ease; will-change: transform; }
.photo-card picture { display: block; width: 100%; height: 100%; }
/* A wide (landscape) shot shown whole — letterboxed on the print so both of us appear. */
.photo-card img.is-contain { object-fit: contain; background: var(--cream); }
.photo-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1px;
  background: var(--blossom-mist);
  filter: saturate(0.94) contrast(1.02);   /* faint vintage grade */
  box-shadow: 0 0 0 1px rgba(62,34,51,0.06) inset;
  pointer-events: none;
}
.stack-hint {
  text-align: center;
  color: var(--text-mute);
  font-style: italic;
  font-size: var(--step--1);
  margin-top: 1.3rem;
}
.stack-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.9rem; }
.stack-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hairline-strong);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.stack-dots i.on { background: var(--blossom); transform: scale(1.4); }

/* No-JS fallback: just show the photos in a tidy centered column. */
html.no-js .photo-stack { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-m); }
html.no-js .photo-card { position: static; width: 100%; }
html.no-js .photo-card img { height: auto; }
html.no-js .stack-hint, html.no-js .stack-dots { display: none; }

/* — Meet the couple — editorial spread: arched portrait + intro & home links. — */
.couple {
  display: grid;
  grid-template-columns: 1fr;          /* photo on top, the two homes below it */
  justify-items: center;
  gap: var(--space-xl);
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.couple__text { width: 100%; }         /* so the groom/bride row spans full width */
/* arched "window" frame: cream mat + soft shadow, rounded top */
/* Polaroid print (matches the gallery cards). */
.couple__portrait {
  margin: 0 auto;
  width: min(20rem, 100%);           /* capped print, centred on top */
  background: #fffdf7;
  padding: 0.9rem 0.9rem 2.6rem;     /* classic print border, thicker bottom */
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(62,34,51,0.04),
    0 22px 40px -18px rgba(62,34,51,0.5),
    0 6px 14px -8px rgba(62,34,51,0.35);
  transform: rotate(-2deg);          /* gentle vintage tilt */
}
.couple__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 1px;
  background: var(--blossom-mist);
  filter: saturate(0.94) contrast(1.02);   /* faint vintage grade */
  box-shadow: 0 0 0 1px rgba(62,34,51,0.06) inset;
}
.couple__text .script { font-size: var(--step-2); color: var(--blossom); display: block; line-height: 1; }
.couple__text .story-title { margin: var(--space-2xs) 0 var(--space-s); }
.couple__text > p { color: var(--text-soft); max-width: 44ch; }

.couple__homes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-l);
}
.couple__meet {
  font-family: var(--font-body);                 /* same family as "The Groom" */
  font-weight: 800;                              /* much bolder */
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--rose-deep);                       /* same colour for both, matching the label */
  margin-bottom: var(--space-3xs);               /* closer to "The Groom" / "The Bride" */
}
.couple__home .eyebrow { margin-bottom: var(--space-xs); }
.couple__home .btn--ghost { white-space: nowrap; }
.couple__icon {
  display: grid;
  place-items: center;
  width: clamp(3.6rem, 13vw, 4.3rem);
  aspect-ratio: 1;
  margin: 0 auto var(--space-s);
  border-radius: 50%;
  color: var(--rose-deep);
  background: radial-gradient(circle at 50% 36%, #fffdf9, var(--blossom-mist) 80%);
  box-shadow:
    inset 0 0 0 1px rgba(224,114,142,0.32),
    0 10px 22px -12px rgba(178,58,91,0.5);
}
.couple__icon svg { width: 52%; height: auto; display: block; }

/* Gentle, joyful life: badges breathe, the blossom sways, the bow tie bobs. */
.couple__icon { animation: icon-breathe 2.4s ease-in-out infinite; }
.couple__homes .couple__home:nth-child(2) .couple__icon { animation-delay: -1.2s; }
.couple__home:first-child .couple__icon svg { animation: bow-bob 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
.couple__home:nth-child(2) .couple__icon svg { animation: blossom-sway 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes icon-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes bow-bob      { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes blossom-sway { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
  .couple__icon, .couple__icon svg { animation: none; }
}
/* equal-height columns so the time + button line up even when one name wraps */
.couple__home { display: flex; flex-direction: column; align-items: center; height: 100%; }
.couple__home .btn--ghost { margin-top: auto; }
.couple__place { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); line-height: 1.15; min-height: 2.3em; }
.couple__time { font-size: clamp(1.22rem, 1.05rem + 0.7vw, 1.46rem); font-weight: 600; color: var(--text-soft); letter-spacing: 0.04em; margin: var(--space-3xs) 0 var(--space-s); }
.couple__homes .couple__home:first-child .couple__icon { color: var(--ink); }   /* black bow tie for the groom */

/* The St-Paul stay photo is very tall by nature — crop it to a calmer portrait
   and keep it a touch smaller / centred. */
/* The St-Paul stay photo is very tall by nature — crop it to the same landscape
   shape and size as the church / hotel images. */
#stay .place__media img { aspect-ratio: 4 / 5; object-fit: cover; height: auto; }

/* — Gifts / Liste de Mariage — */
#gifts .section-head { margin-bottom: 0; }   /* eyebrow sits close to the heart (no heading now) */
.gifts { max-width: 40rem; margin-inline: auto; text-align: center; }
.gifts__intro { color: var(--text-soft); max-width: 42ch; margin: 0 auto var(--space-s); font-size: clamp(1.12rem, 1rem + 0.6vw, 1.32rem); }
.gifts__account {
  display: inline-block;
  margin-top: var(--space-s);
  padding: 0.45em 1.3em;
  background: var(--cream);
  border: 1px solid rgba(178, 58, 91, 0.35);
  border-radius: 999px;
  box-shadow: var(--shadow-s);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--rose-deep);
  letter-spacing: 0.04em;
  direction: ltr;
  font-variant-numeric: lining-nums tabular-nums;
}
.gifts__methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 4vw, 2.5rem);
}
.gifts__method {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-l) var(--space-m);
  box-shadow: var(--shadow-s);
}
.gifts__emblem {
  display: grid;
  place-items: center;
  width: clamp(3.4rem, 12vw, 4rem);
  aspect-ratio: 1;
  margin: 0 auto var(--space-s);
  border-radius: 50%;
  color: var(--rose-deep);
  background: radial-gradient(circle at 50% 36%, #fffdf9, var(--blossom-mist) 80%);
  box-shadow: inset 0 0 0 1px rgba(224,114,142,0.32), 0 10px 22px -12px rgba(178,58,91,0.5);
  animation: icon-breathe 3.4s ease-in-out infinite;
}
.gifts__emblem svg { width: 46%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .gifts__emblem { animation: none; } }
.gifts__method .eyebrow { margin-bottom: var(--space-s); color: var(--rose-deep); }
.gifts__to { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.gifts__num { font-size: var(--step-0); color: var(--text-soft); letter-spacing: 0.04em; margin-top: var(--space-2xs); direction: ltr; }
.gifts__thanks {
  font-family: var(--font-script); font-style: italic;
  font-size: var(--step-2); color: var(--blossom);
  margin-top: var(--space-l);
  text-align: center;
}
.gifts__methods--single {
  grid-template-columns: 1fr;
  max-width: 22rem;
  margin-inline: auto;
}
@media (max-width: 600px) { .gifts__methods { grid-template-columns: 1fr; } }

/* — Places (illustrations) — */
.place {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.place + .place { margin-top: var(--space-2xl); }
.place--flip .place__media { order: 2; }
.place__body .eyebrow { margin-bottom: var(--space-s); }
.place__body h3 { font-size: var(--step-3); margin-bottom: var(--space-2xs); }
.place__body .script { font-size: var(--step-2); display: block; margin-bottom: var(--space-s); }
.place__body p { color: var(--text-soft); max-width: 34ch; }
.place__meta {
  margin-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  font-size: clamp(1.22rem, 1.05rem + 0.7vw, 1.46rem);
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.03em;
}
.place__meta span { display: inline-flex; align-items: center; gap: 0.45em; }
.place__meta a { color: inherit; text-decoration: none; direction: ltr; }
.place__meta a:hover { color: var(--blossom); }
.place__meta svg { width: 1.05em; height: 1.05em; color: var(--blossom); }
.place__cta { margin-top: var(--space-m); }

/* — Floating background-music toggle — */
.music-toggle {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 70;
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--cream);
  color: var(--rose-deep);
  box-shadow: var(--shadow-m);
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .25s var(--ease);
}
.music-toggle[hidden] { display: none; }
.music-toggle:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); color: var(--blossom); }
.music-toggle:focus-visible { outline: 2px solid var(--blossom); outline-offset: 3px; }
.music-toggle svg { width: 1.25rem; height: 1.25rem; position: relative; }
.icon-pause { display: none; }
.music-toggle.is-playing .icon-play  { display: none; }
.music-toggle.is-playing .icon-pause { display: block; }
.music-toggle.is-playing { color: var(--blossom); }
/* a dashed petal-ring that slowly turns while the song plays */
.music-toggle__ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed var(--blossom-light);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.music-toggle.is-playing .music-toggle__ring {
  opacity: 0.8;
  animation: music-spin 9s linear infinite;
}
@keyframes music-spin { to { transform: rotate(360deg); } }

/* — Invitation gate — full-screen cover until a valid invite resolves — */
.is-gated body { overflow: hidden; }     /* lock scroll behind the gate */
.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-l);
  overflow: hidden;
  touch-action: none;            /* a swipe on the cloth begins — it must not scroll the page behind */
  overscroll-behavior: none;
  background-color: #f3ece3;                          /* ivory base behind the cloth */
  box-shadow: inset 0 0 160px rgba(62,34,51,0.12);   /* drape shadow at the edges */
  opacity: 1;
  transform: translateY(0);
  transition: transform 1s var(--ease-out), opacity .85s var(--ease-out);
  will-change: transform, opacity;
  cursor: pointer;
}
.gate.is-enter { cursor: pointer; }
.gate.is-open { opacity: 0; transform: scale(1.06); pointer-events: none; }  /* the water clears */
.gate:not(.is-enter) { cursor: default; }

/* the water layer — a still pink pond. NO per-frame filter (that lagged on
   phones); the "movement" is two soft light layers drifting via transform, plus
   the petals bobbing — all compositor-only, so it stays 60fps on mobile. */
.gate__water {
  position: absolute;
  inset: 0;
  background-color: #e6c6d0;
  background-image:
    radial-gradient(140% 80% at 50% 14%, rgba(255,248,250,0.6), transparent 60%),
    linear-gradient(180deg, #efd5dd 0%, #e4c2cd 55%, #d6abba 100%);
  pointer-events: none;
}
/* one reserved area for loading / enter / denied so the crest never jumps */
.gate__states { display: grid; place-items: center; width: 100%; min-height: 13rem; }
.gate__states > * { grid-area: 1 / 1; }   /* stack them; only the active one shows */

/* blossoms resting on the cloth (soft contact shadow so they sit ON it) */
.gate__petal {
  position: absolute;
  width: clamp(2.4rem, 8vw, 4rem);
  height: auto;
  opacity: 0.92;
  pointer-events: none;
  /* transform-only bob (no per-frame filter → no flicker on mobile) */
  transform: rotate(var(--r, 0deg));
  animation: gate-float 5s ease-in-out infinite;
}
.gate__petal--1 { top: 17%; left: 15%; --r: -16deg; }
.gate__petal--2 { top: 22%; right: 13%; --r: 26deg; animation-delay: -2.4s; }
.gate__petal--3 { bottom: 19%; left: 21%; --r: 9deg; animation-delay: -4.3s; }
@keyframes gate-float {
  0%   { transform: translate(0, 0) rotate(var(--r, 0deg)); }
  25%  { transform: translate(7px, -16px) rotate(calc(var(--r, 0deg) + 7deg)); }
  50%  { transform: translate(0, -26px) rotate(var(--r, 0deg)); }
  75%  { transform: translate(-7px, -14px) rotate(calc(var(--r, 0deg) - 7deg)); }
  100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
}

/* enter state (valid invite, awaiting the tap) */
.gate__enter { display: none; }
.gate.is-enter .gate__loading { display: none; }
.gate.is-enter .gate__enter { display: block; }
.gate__greet { margin-bottom: var(--space-l); }
.gate__greet .script {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--step-2); color: var(--blossom); display: block; line-height: 1;
}
.gate__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-3); color: var(--ink); display: block;
  margin-top: var(--space-2xs); line-height: 1.1;
}
.gate__begin {
  background: none; border: 0; padding: 0.4rem 0.6rem; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center;
}
.gate__begin:focus, .gate__begin:focus-visible { outline: none; }   /* never a box */
.gate__begin:focus-visible .gate__begin-word { color: var(--blossom-bright); }
.gate__begin-word {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--step-1); letter-spacing: 0.05em; color: var(--rose-deep);
  animation: gate-breathe 2.8s ease-in-out infinite;
}
.gate__begin::after {
  content: ""; display: block; height: 1px; margin-top: 0.55rem; background: var(--blossom);
  width: 2rem; animation: gate-rule 2.8s ease-in-out infinite;
}
@keyframes gate-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes gate-rule { 0%, 100% { width: 1.5rem; opacity: 0.35; } 50% { width: 5.5rem; opacity: 0.9; } }
.gate.is-open { opacity: 0; pointer-events: none; }   /* (kept for non-transform fallback) */
.gate__sprig {
  position: absolute;
  width: clamp(7rem, 24vw, 13rem);
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  filter: saturate(0.96);
}
.gate__sprig--tl { top: -1.2rem; left: -1.2rem; transform: rotate(4deg); }
.gate__sprig--br { bottom: -1.2rem; right: -1.2rem; transform: rotate(180deg); }
.gate__inner {
  position: relative;
  text-align: center;
  max-width: 34rem;
  animation: gate-in 1s var(--ease-out) both;
}
@keyframes gate-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gate__crest {
  width: clamp(10rem, 30vw, 15rem);
  height: auto;
  margin: 0 auto var(--space-l);
}
.gate__loading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--rose-deep);
  letter-spacing: 0.04em;
  animation: gate-breathe 2.4s ease-in-out infinite;   /* gentle pulse while we look you up */
}
@media (prefers-reduced-motion: reduce) { .gate__loading { animation: none; } }
/* Avoid the font swap (FOUT) on the entrance: keep the display-font text hidden
   until the font is ready, so it appears already styled instead of changing. */
html:not(.fonts-ready) .gate__loading,
html:not(.fonts-ready) .gate__begin-word { visibility: hidden; }
.gate__denied { display: none; }
.gate.is-denied .gate__loading { display: none; }
.gate.is-denied .gate__denied { display: block; outline: none; }
.gate__denied .script {
  font-family: var(--font-script); font-style: italic;
  font-size: var(--step-4);
  line-height: 1;
  color: var(--blossom);
  display: block;
}
.gate__denied h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  color: var(--ink);
  margin: var(--space-2xs) 0 var(--space-s);
}
.gate__denied p { color: var(--text-soft); max-width: 36ch; margin-inline: auto; }

/* — Form — engraved reply card with stationery underline fields — */
.rsvp-card {
  position: relative;
  background:
    linear-gradient(var(--cream), var(--cream)) padding-box;
  border-radius: var(--radius-card);
  padding: clamp(2rem, 5vw, 3.75rem) clamp(1.5rem, 4.5vw, 3.5rem);
  box-shadow: var(--shadow-l);
  max-width: 40rem;
  margin-inline: auto;
}
/* fine engraved double rule, like a printed response card */
.rsvp-card::before {
  content: "";
  position: absolute;
  inset: clamp(0.6rem, 1.4vw, 1rem);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius-card) - 2px);
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px var(--hairline);
  pointer-events: none;
}
.rsvp-card > * { position: relative; }

.form-grid { display: grid; gap: var(--space-l); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m) var(--space-l); }
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field label {
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rose-deep);
  font-weight: 600;
}
.field label .req { color: var(--blossom); font-size: 0.7em; vertical-align: 0.3em; }

/* Inputs read as ruled lines on stationery — no boxes. */
.field input,
.field select,
.field textarea {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--hairline-strong);
  border-radius: 0;
  padding: 0.35em 0.1em;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  width: 100%;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-mute); font-style: italic; font-family: var(--font-body); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--blossom);
  box-shadow: 0 1.5px 0 0 var(--blossom);   /* thicken the rule on focus */
}
/* The note field keeps a soft frame so multi-line text has a home. */
.field textarea {
  font-family: var(--font-body);
  font-size: var(--step-0);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  padding: 0.7em 0.85em;
  resize: vertical;
  min-height: 5rem;
}
.field textarea:focus { box-shadow: 0 0 0 3px rgba(224,114,142,0.16); border-color: var(--blossom); }
.field select { cursor: pointer; }

.field--error input,
.field--error select { border-bottom-color: var(--blossom-bright); box-shadow: 0 1.5px 0 0 var(--blossom-bright); }
.field__err {
  font-size: var(--step--1);
  color: var(--blossom-bright);
  font-style: italic;
  min-height: 0;
}

/* Personalised invite greeting */
.rsvp-greeting {
  text-align: center;
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-m);
  border-bottom: 1px solid var(--hairline);
}
.rsvp-greeting[hidden] { display: none; }
.rsvp-greeting .script {
  font-family: var(--font-script); font-style: italic;
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--blossom);
  line-height: 1;
}
.rsvp-greeting__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink);
  line-height: 1.15;
  margin-top: 0.1em;
}
.rsvp-greeting__msg {
  color: var(--text-soft);
  font-style: italic;
  max-width: 46ch;
  margin: var(--space-xs) auto 0;
}
.rsvp-greeting__seats {
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rose-deep);
  margin-top: var(--space-s);
}
.rsvp-greeting__seats:empty { display: none; }
.rsvp-greeting__msg:empty { display: none; }


/* Attendance — two engraved choices, just the word */
.attend { display: grid; grid-template-columns: repeat(2, minmax(0, 10rem)); gap: var(--space-m); justify-content: center; }
.attend input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attend__opt {
  display: flex; align-items: center; justify-content: center;
  gap: 0.45em;
  padding: 0.5em 1em;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease);
}
.attend__opt:hover { border-color: var(--blossom); }
.attend__mark {
  width: 1.15rem; height: 1.15rem;
  color: var(--blossom);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .25s var(--ease), transform .3s var(--ease-out), color .25s var(--ease);
  margin-left: -1.65rem;   /* sit the mark snugly before the word; revealed on select */
}
.attend__word {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.attend input:checked + .attend__opt {
  background: var(--blossom);
  border-color: var(--blossom);
  box-shadow: var(--shadow-m);
}
.attend input:checked + .attend__opt .attend__word { color: var(--cream); }
.attend input:checked + .attend__opt .attend__mark {
  color: var(--cream); opacity: 1; transform: scale(1); margin-left: 0;
}
.attend input:focus-visible + .attend__opt { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Guest stepper — round controls flanking a ruled number */
.stepper { display: inline-flex; align-items: center; gap: 1rem; }
.stepper__btn {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 0;
  color: var(--rose-deep);
  background: transparent;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.stepper__btn:hover:not([disabled]) { background: var(--blossom); color: var(--cream); border-color: var(--blossom); }
.stepper__btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.stepper input {
  width: 2.5ch;
  text-align: center;
  border: none !important;
  border-bottom: 1.5px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.1em 0 !important;
  font-family: Georgia, "Times New Roman", serif;  /* lining "1" — Cormorant's reads as "I" */
  font-variant-numeric: lining-nums;
  font-size: var(--step-1);
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.field__hint {
  font-size: var(--step--1);
  color: var(--text-mute);
  font-style: italic;
}
.field__hint:empty { display: none; }

/* Centre the guest-count field (label, stepper, hint) */
.field[data-field="guests"] { align-items: center; text-align: center; }

/* Fields that only apply when attending */
[data-yes-only][hidden] { display: none; }

.form-note { font-size: var(--step-0); color: var(--text-mute); text-align: center; }

/* Reply-another-way line (always under the form) */
.rsvp-contact {
  text-align: center;
  font-size: var(--step-0);
  color: var(--text-mute);
}
.rsvp-contact a {
  color: var(--rose-deep);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
}
.rsvp-contact a:hover { color: var(--blossom); border-bottom-color: var(--blossom); }

/* "Already replied" panel */
.rsvp-answered { text-align: center; }
.rsvp-answered[hidden] { display: none; }

/* Celebratory "sealed" confirmation badge — pops in, draws its check, then breathes. */
.rsvp-answered__seal {
  display: grid;
  place-items: center;
  width: clamp(3.8rem, 15vw, 4.8rem);
  aspect-ratio: 1;
  margin: 0 auto var(--space-s);
  border-radius: 50%;
  color: var(--rose-deep);
  background: radial-gradient(circle at 50% 35%, #fffdf9, var(--blossom-mist) 80%);
  box-shadow: inset 0 0 0 1px rgba(224,114,142,0.3), 0 12px 26px -14px rgba(178,58,91,0.5);
  transform: scale(0.5);
  opacity: 0;
}
.rsvp-answered__seal svg { width: 58%; height: auto; display: block; }
.seal-ring  { stroke-dasharray: 140; stroke-dashoffset: 140; }
.seal-check { stroke-dasharray: 40;  stroke-dashoffset: 40;  }
/* play when the RSVP card scrolls into view */
.rsvp-card.is-visible .rsvp-answered__seal {
  animation: seal-pop .6s var(--ease-out) both, seal-breathe 3.2s ease-in-out 1.1s infinite;
}
.rsvp-card.is-visible .seal-ring  { animation: seal-draw .7s var(--ease-out) .15s forwards; }
.rsvp-card.is-visible .seal-check { animation: seal-draw .5s var(--ease-out) .6s forwards; }
@keyframes seal-pop { 0% { opacity: 0; transform: scale(0.5); } 65% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes seal-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes seal-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rsvp-answered__seal { opacity: 1; transform: none; animation: none; }
  .seal-ring, .seal-check { stroke-dashoffset: 0; animation: none; }
}
.rsvp-answered .script {
  font-family: var(--font-script); font-style: italic;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--blossom);
  display: block;
  margin-bottom: var(--space-xs);
}
.rsvp-answered__line {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  margin-bottom: var(--space-s);
}
.rsvp-answered p { color: var(--text-soft); font-size: var(--step-0); max-width: 40ch; margin-inline: auto; }
.rsvp-answered a {
  color: var(--rose-deep);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
}
.rsvp-answered a:hover { color: var(--blossom); border-bottom-color: var(--blossom); }

/* RSVP feedback states */
.form-status { text-align: center; }
.form-status[hidden] { display: none; }
.form-status h3 { font-size: var(--step-2); color: var(--rose-deep); }
.form-status .script { font-size: var(--step-2); display: block; margin-bottom: var(--space-2xs); }
.form-status p { color: var(--text-soft); max-width: 34ch; margin-inline: auto; }
.form-error-banner {
  background: rgba(238,92,115,0.1);
  border: 1px solid rgba(238,92,115,0.4);
  color: var(--rose-deep);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  font-size: var(--step--1);
  text-align: center;
}
.form-error-banner[hidden] { display: none; }

/* 7. SECTIONS =============================================================== */

/* — Hero — */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: calc(var(--nav-h) + var(--space-l)) var(--space-2xl);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 3; transform: translateY(clamp(-4rem, -6vh, -2rem)); }
.hero__crest {
  width: clamp(9.5rem, 22vw, 15.5rem);
  margin: 0 auto var(--space-2xs);
  filter: drop-shadow(0 14px 30px rgba(62,34,51,0.26));
  animation: crest-in 1.1s var(--ease-out) both;
}
@keyframes crest-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.hero__verse {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 28ch;
  margin: 0 auto var(--space-m);
}
.hero__verse::before {
  content: "✿";
  display: block;
  font-style: normal;
  font-size: var(--step-0);
  color: var(--blossom);
  opacity: 0.85;
  margin-bottom: var(--space-2xs);
}
.hero__eyebrow { margin-top: var(--space-m); margin-bottom: var(--space-s); }
.hero__eyebrow::after { display: none; }   /* no trailing line in the hero */

/* Two families flanking a blossom: groom's parents left, bride's parents right.
   Tight gap + small blossom so the names can be as large as possible side by side. */
.hero__families {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: clamp(0.2rem, 1vw, 2rem);
  max-width: 36rem;
  margin: 0 auto;
}
.hero__family { margin: 0; text-align: center; line-height: 1.3; }
.hero__family-parents {
  display: block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.34rem, 5.3vw, 2rem);
  font-weight: 700;
  color: var(--ink);
}
.hero__family-name {
  display: block;
  margin-top: 0.12rem;
  font-family: var(--font-body);                 /* heavier than Cormorant's max */
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.hero__family-sep {
  align-self: center;
  color: var(--blossom);
  font-size: clamp(0.7rem, 2.6vw, 1.2rem);
  line-height: 1;
}
.hero__names {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.7rem + 2.6vw, 4.2rem);
  line-height: 1.02;
  color: var(--ink);
  margin-block: 0.08em;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.28em;
}
.hero__name { white-space: nowrap; }
.hero__names .amp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78em;
  color: var(--blossom);
}
.hero__sub {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  margin-top: var(--space-s);
}
.hero__invite {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: var(--space-s) auto var(--space-s);   /* same gap to the families as the eyebrow above them */
}
.hero__date {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs) var(--space-m);
  margin-top: var(--space-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--rose-deep);
}
.hero__date span { white-space: nowrap; }
.hero__date i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blossom); font-style: normal;
}
.hero__venue { margin-top: var(--space-s); color: var(--text-mute); font-style: italic; }
.hero__cta { margin-top: var(--space-xl); }

/* hero corner sprig made from a petal cluster (decorative) */
.hero__sprig {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
  width: clamp(8rem, 22vw, 16rem);
}
.hero__sprig--tl {
  top: -1rem; left: -2rem;
  transform: rotate(-18deg);
  animation: sway-tl 6s ease-in-out infinite;
}
.hero__sprig--br {
  bottom: -1rem; right: -2rem;
  transform: rotate(160deg);
  animation: sway-br 7.2s ease-in-out infinite;
  animation-delay: -1.2s; /* desync from the top-left sprig */
}

/* gentle breeze — sway + drift, anchored to each corner */
@keyframes sway-tl {
  0%, 100% { transform: rotate(-18deg) translate(0, 0); }
  50%      { transform: rotate(-8deg) translate(13px, 20px); }
}
@keyframes sway-br {
  0%, 100% { transform: rotate(160deg) translate(0, 0); }
  50%      { transform: rotate(150deg) translate(13px, 20px); }
}

.scroll-cue {
  position: absolute;
  bottom: calc(var(--space-l) + 32px);   /* raised a bit higher */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--text-mute);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
}
.scroll-cue svg { width: 1rem; height: 1rem; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* — Hero variant: full-bleed photo background —
   Set the photo via the inline `--hero-bg` custom property on .hero--photo.
   Text flips to cream; a warm vintage scrim keeps it legible over any photo. */
.hero--photo { color: var(--cream); isolation: isolate; }
.hero--photo .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center 30%;
  /* gentle vintage grade so the page's romantic tone survives any photo */
  filter: saturate(0.82) contrast(0.96) sepia(0.10);
  transform: scale(1.04);
  animation: hero-bg-in 1.6s var(--ease-out) both;
}
@keyframes hero-bg-in { from { transform: scale(1.12); opacity: 0; } to { opacity: 1; } }
/* warm scrim: blossom up top, deep ink at the base for text contrast */
.hero--photo .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(62,34,51,0.34) 0%, rgba(62,34,51,0.12) 32%, rgba(62,34,51,0.30) 62%, rgba(62,34,51,0.66) 100%),
    radial-gradient(110% 70% at 50% 40%, transparent 40%, rgba(62,34,51,0.30) 100%);
}
.hero--photo .hero__inner { z-index: 3; }
.hero--photo .hero__crest {
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.45));
}
.hero--photo .hero__eyebrow,
.hero--photo .hero__names,
.hero--photo .hero__names .amp,
.hero--photo .hero__sub { color: var(--cream); }
.hero--photo .hero__eyebrow { color: #f7dbe3; text-shadow: 0 1px 10px rgba(62,34,51,0.6); }
.hero--photo .hero__names { text-shadow: 0 2px 24px rgba(62,34,51,0.55); }
.hero--photo .hero__names .amp { color: var(--blossom-light); }
.hero--photo .hero__sub { color: rgba(250,244,240,0.95); text-shadow: 0 1px 14px rgba(62,34,51,0.5); }
.hero--photo .hero__date { color: #f7dbe3; text-shadow: 0 1px 10px rgba(62,34,51,0.6); }
.hero--photo .hero__date i { background: var(--blossom-light); }
.hero--photo .hero__venue { color: rgba(250,244,240,0.92); text-shadow: 0 1px 12px rgba(62,34,51,0.55); }
.hero--photo .scroll-cue { color: rgba(250,244,240,0.8); }
.hero--photo .btn--ghost { --btn-fg: var(--cream); border-color: rgba(250,244,240,0.6); }
.hero--photo .btn--ghost:hover { background: rgba(250,244,240,0.14); color: var(--cream); border-color: var(--cream); }
/* hide the decorative corner petal sprigs over a photo — too busy */
.hero--photo .hero__sprig { display: none; }

/* — Story: an editorial journal spread — a framed snapshot beside a letter — */
.story .container { width: 100%; max-width: 70rem; }
.story-spread {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
}

/* the tucked snapshot */
.story-photo {
  position: relative;
  justify-self: center;
  width: min(100%, 23rem);
  margin: 0;
  background: #fffdf7;
  padding: 0.85rem 0.85rem 3.1rem;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(62,34,51,0.04),
    0 26px 52px -22px rgba(62,34,51,0.55),
    0 6px 14px -8px rgba(62,34,51,0.4);
  transform: rotate(-3deg);
  transition: transform .6s var(--ease-out);
}
.story-photo:hover { transform: rotate(0deg); }
.story-photo img {
  width: 100%; height: auto; display: block; border-radius: 1px;
  filter: saturate(0.94) contrast(1.02);
}
.story-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 1rem;
  text-align: center;
  font-family: var(--font-script); font-style: italic;
  font-size: 1.7rem; line-height: 1;
  color: var(--ink);
}

/* the letter */
.story-text { text-align: left; }
.story-text .eyebrow { margin-bottom: var(--space-xs); }
.story-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: 0.92;
  margin-bottom: var(--space-m);
  position: relative;
}
.story-title::after {
  content: "";
  display: block;
  width: 3.5rem; height: 1px;
  margin-top: var(--space-s);
  background: linear-gradient(90deg, var(--rose-deep), transparent);
}
.story-text .prose { max-width: 44ch; }
.story-text .prose p + p { margin-top: var(--space-s); }
.story__sign {
  font-family: var(--font-script); font-style: italic;
  font-size: var(--step-3);
  color: var(--rose-deep);
  margin-top: var(--space-m);
}

@media (max-width: 820px) {
  .story-spread { grid-template-columns: 1fr; gap: var(--space-l); justify-items: center; }
  .story-photo { width: min(78%, 16.5rem); transform: rotate(-2deg); }
  .story-text { text-align: center; width: 100%; }
  .story-title { font-size: var(--step-3); }
  .story-title::after { margin-inline: auto; }
  .story-text .prose { margin-inline: auto; text-align: left; }
  .story__sign { text-align: center; }
}

/* — Countdown (reuses the .story spread layout) — */
.countdown {
  display: flex;
  flex-wrap: nowrap;                       /* always on one line */
  justify-content: center;
  gap: clamp(0.3rem, 1.1vw, 0.9rem);
  margin: 0 0 var(--space-s);
}
.cd-unit {
  flex: 1 1 0;                             /* share the row equally */
  min-width: 0;
  max-width: 7.75rem;                      /* keep a substantial card; centre when capped */
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-s) var(--space-2xs) 0.7rem;
  box-shadow: var(--shadow-s);
}
.cd-num {
  display: block;
  font-family: Georgia, "Times New Roman", serif;       /* clear "1" (Cormorant's reads as I) */
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.cd-label {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(0.68rem, 2.7vw, 0.8rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
/* "Counting down" — divider sits centred UNDER the label, not beside it. */
#countdown .eyebrow { flex-direction: column; gap: var(--space-xs); }
#countdown .eyebrow::after { width: 3.5rem; opacity: 0.7; }

.countdown__line {
  font-family: var(--font-script); font-style: italic;
  font-size: clamp(2.3rem, 1.8rem + 2.3vw, 3.8rem);
  color: var(--rose-deep);
  line-height: 1.1;
  margin: var(--space-m) 0 0;   /* sits under the countdown */
}
.countdown__line em { font-style: normal; }
.countdown__today {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--ink);
  margin: var(--space-m) 0 var(--space-s);
}
@media (max-width: 820px) {
  .countdown { justify-content: center; }
}

/* — Gallery section intro spacing — */
.gallery .section-head { margin-bottom: var(--space-l); }

/* — Travel — */
.travel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-m);
}
.travel-card {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  box-shadow: var(--shadow-s);
}
.travel-card h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); display:flex; align-items:center; gap:.5em; }
.travel-card h3 svg { width: 1.1em; height: 1.1em; color: var(--blossom); }
.travel-card p { color: var(--text-soft); font-size: var(--step--1); margin-bottom: var(--space-s); }
.travel-card a { font-size: var(--step--1); }

/* — Footer — */
.site-footer {
  text-align: center;
  background: linear-gradient(180deg, var(--bg) 0, var(--ink) 22px, var(--ink) 100%);
  color: var(--blossom-mist);
  padding-block: var(--space-l) var(--space-m);
}
.site-footer .script { color: var(--blossom-light); font-size: var(--step-3); }
.site-footer__date {
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: var(--step--1);
  color: rgba(239,226,222,0.7);
  margin-top: var(--space-s);
}
.site-footer__bloom { color: var(--blossom-light); font-size: 1.4rem; margin-block: var(--space-s); }
.site-footer__note { font-size: 0.8rem; color: rgba(239,226,222,0.45); margin-top: var(--space-m); }
.site-footer a { color: var(--blossom-light); }

/* 8. MOTION ================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* If JS never runs, don't keep content hidden. */
html.no-js [data-reveal] { opacity: 1; transform: none; }

/* Falling petals — page-wide, fixed to the viewport so they keep falling
   over every section as you scroll. Sits above section backgrounds/content
   but below the nav (z 50). GPU-only (transform/opacity), so it stays cheap. */
.petal-field {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  contain: strict;          /* isolate from page layout/paint */
}
.petal {
  position: absolute;
  top: -8%;
  opacity: 0;
  /* Animation is driven by js/main.js → initPetals() via the Web Animations
     API with concrete (no-var) transform/opacity keyframes, so each petal runs
     on the GPU compositor and stays smooth even while the main thread is busy
     (e.g. dragging the photo stack). */
}

/* 9. RESPONSIVE ============================================================= */
@media (max-width: 860px) {
  /* No top bar on phones — guests just scroll. */
  .site-nav { display: none; }

  .place { grid-template-columns: 1fr; gap: var(--space-l); }
  .place--flip .place__media { order: 0; }
  .place__body { text-align: center; }
  .place__body p { margin-inline: auto; }
  .place__meta { justify-content: center; }

  /* Couple: photo on top, text below & centered; keep the two homes SIDE BY
     SIDE (compact) rather than stacking them. */
  .couple { grid-template-columns: 1fr; gap: var(--space-l); text-align: center; max-width: 28rem; }
  .couple__portrait { max-width: 17rem; margin-inline: auto; }
  .couple__text { min-width: 0; }
  .couple__text .story-title { font-size: var(--step-2); }
  .couple__text > p { margin-inline: auto; }
  /* Stack the two home links tidily (not cramped side by side) */
  .couple__homes { grid-template-columns: 1fr; gap: var(--space-l); max-width: 18rem; margin-inline: auto; }
  .couple__place { min-height: 0; }                /* no reserved 2nd line when stacked */
  .couple__home .btn--ghost { margin-top: var(--space-s); }
  .couple__home + .couple__home { border-top: 1px solid var(--hairline); padding-top: var(--space-l); }
  .couple__home .eyebrow { margin-bottom: var(--space-xs); }
  .couple__home .btn--ghost { width: 100%; justify-content: center; }

  .form-row { grid-template-columns: 1fr; }

  /* Mobile polaroid stack — alternate tilt handled in JS, but cap scale */
  .polaroids { gap: var(--space-l); }
}

@media (max-width: 600px) {
  /* Stack the names so the "&" sits on its own line, centred */
  .hero__names { flex-direction: column; align-items: center; gap: 0.04em; }
}

@media (max-width: 520px) {
  .hero__date { flex-direction: column; gap: var(--space-2xs); }
  .hero__date i { display: none; }
  .eyebrow::before, .eyebrow::after { width: 1.4em; }
}

/* Tighten the big section gaps on phones (they were sized for desktop). */
@media (max-width: 768px) {
  .section { padding-block: 3.25rem; }
  .section-head { margin-bottom: var(--space-l); }
  .countdown__line { margin-top: var(--space-s); }
}

/* 10. REDUCED MOTION / PRINT =============================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .petal-field { display: none; }
  .scroll-cue svg { animation: none; }
  .gate__petal { animation: none; }   /* still petals when reduced motion is on */
}

@media print {
  .site-nav, .scroll-cue, .petal-field, .hero__cta, #rsvp, .music-toggle { display: none; }
  body { background: #fff; }
  body::before, body::after { display: none; }
}