/* ============================================================================
   WILL YOU BE MY BRIDESMAID — blush, rose & gold foil

   This is a LIGHT-GROUND design, which is the opposite of the sibling
   templates in this folder. Two consequences run through the whole file:

     1. The gold foil gradient must never pass through near-white. On a dark
        navy ground a #FFF6DC highlight reads as a shine; on blush it reads as
        the letters vanishing. Every foil stop here stays in warm champagne
        (#E8CC86 at the very brightest) so the sweep varies WARMTH, not
        brightness, and contrast never drops out mid-animation.
     2. Body copy is a deep warm brown-plum, never pure black — black on blush
        looks like a print error rather than ink on paper.
   ========================================================================== */

:root{
  /* blush field, light → deep */
  --cream:#FDF6F1;
  --blush-50:#FBEEE7;
  --blush-100:#F7E2D9;
  --blush-200:#F0D2C7;
  --rose-300:#E5B7A9;
  --rose-400:#D89C8D;
  --mauve-500:#B8867F;
  --mauve-600:#9A6A68;
  --mauve-700:#7A5153;

  /* gold — light-background variant, no white blowout */
  --gold:#B8862F;
  --gold-hi:#E8CC86;
  --gold-mid:#C9A24B;
  --gold-deep:#8A6524;
  --gold-line:rgba(184,134,47,.34);
  --gold-line-soft:rgba(184,134,47,.17);

  /* ink — deep warm brown-plum */
  --ink:#4A2C2E;
  --ink-strong:#3A2022;
  --ink-soft:rgba(74,44,46,.80);
  --ink-mute:rgba(74,44,46,.60);
  --ink-faint:rgba(74,44,46,.34);

  --ease:cubic-bezier(.22,1,.36,1);
  --serif:'Cormorant Garamond',Georgia,serif;
  --script:'Pinyon Script',cursive;
  --sans:'Jost',-apple-system,'Segoe UI',sans-serif;

  --maxw:560px;
  --maxw-wide:660px;

  /* keep in step with films.dissolveMs in js/config.js */
  --dissolve:1500ms;

  /* An embossed damask: one half-drop ogee tile, drawn twice - a white copy
     offset up-left and a dark copy offset down-right - so it reads as pressed
     INTO the paper rather than printed on it. Two data-URIs, no image request.
     The tile carries quarter-motifs at its corners so the lattice joins up. */
  --damask-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cg%3E%3Cpath d='M60 8C74 24 88 33 88 52C88 71 72 82 60 110C48 82 32 71 32 52C32 33 46 24 60 8Z'/%3E%3Cpath d='M60 32C68 43 71 51 60 66C49 51 52 43 60 32Z'/%3E%3Cpath d='M32 52C22 47 17 39 20 30'/%3E%3Cpath d='M88 52C98 47 103 39 100 30'/%3E%3C/g%3E%3Cg transform='translate(-60%2C-60)'%3E%3Cpath d='M60 8C74 24 88 33 88 52C88 71 72 82 60 110C48 82 32 71 32 52C32 33 46 24 60 8Z'/%3E%3Cpath d='M60 32C68 43 71 51 60 66C49 51 52 43 60 32Z'/%3E%3C/g%3E%3Cg transform='translate(60%2C-60)'%3E%3Cpath d='M60 8C74 24 88 33 88 52C88 71 72 82 60 110C48 82 32 71 32 52C32 33 46 24 60 8Z'/%3E%3Cpath d='M60 32C68 43 71 51 60 66C49 51 52 43 60 32Z'/%3E%3C/g%3E%3Cg transform='translate(-60%2C60)'%3E%3Cpath d='M60 8C74 24 88 33 88 52C88 71 72 82 60 110C48 82 32 71 32 52C32 33 46 24 60 8Z'/%3E%3Cpath d='M60 32C68 43 71 51 60 66C49 51 52 43 60 32Z'/%3E%3C/g%3E%3Cg transform='translate(60%2C60)'%3E%3Cpath d='M60 8C74 24 88 33 88 52C88 71 72 82 60 110C48 82 32 71 32 52C32 33 46 24 60 8Z'/%3E%3Cpath d='M60 32C68 43 71 51 60 66C49 51 52 43 60 32Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --damask-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%237A5153' stroke-width='2.2' stroke-linecap='round'%3E%3Cg%3E%3Cpath d='M60 8C74 24 88 33 88 52C88 71 72 82 60 110C48 82 32 71 32 52C32 33 46 24 60 8Z'/%3E%3Cpath d='M60 32C68 43 71 51 60 66C49 51 52 43 60 32Z'/%3E%3Cpath d='M32 52C22 47 17 39 20 30'/%3E%3Cpath d='M88 52C98 47 103 39 100 30'/%3E%3C/g%3E%3Cg transform='translate(-60%2C-60)'%3E%3Cpath d='M60 8C74 24 88 33 88 52C88 71 72 82 60 110C48 82 32 71 32 52C32 33 46 24 60 8Z'/%3E%3Cpath d='M60 32C68 43 71 51 60 66C49 51 52 43 60 32Z'/%3E%3C/g%3E%3Cg transform='translate(60%2C-60)'%3E%3Cpath d='M60 8C74 24 88 33 88 52C88 71 72 82 60 110C48 82 32 71 32 52C32 33 46 24 60 8Z'/%3E%3Cpath d='M60 32C68 43 71 51 60 66C49 51 52 43 60 32Z'/%3E%3C/g%3E%3Cg transform='translate(-60%2C60)'%3E%3Cpath d='M60 8C74 24 88 33 88 52C88 71 72 82 60 110C48 82 32 71 32 52C32 33 46 24 60 8Z'/%3E%3Cpath d='M60 32C68 43 71 51 60 66C49 51 52 43 60 32Z'/%3E%3C/g%3E%3Cg transform='translate(60%2C60)'%3E%3Cpath d='M60 8C74 24 88 33 88 52C88 71 72 82 60 110C48 82 32 71 32 52C32 33 46 24 60 8Z'/%3E%3Cpath d='M60 32C68 43 71 51 60 66C49 51 52 43 60 32Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

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

/* The `hidden` attribute is applied by the UA stylesheet as `display:none`,
   which ANY author `display` declaration silently overrides. Several things
   here are flex/grid containers that are ALSO toggled with `hidden` — the
   caught-you panel, the accepted panel, the banking card, the sizes
   confirmation, the scroll hint. Without this rule they stay in the layout,
   and a full-bleed one sits invisibly over the page swallowing every click,
   "Tap To Open" included. This has to beat all of them. */
[hidden]{ display:none !important }

html,body{ margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }

body{
  background:var(--blush-100);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none }
a{ color:var(--gold-deep); text-decoration:none }

html.intro-lock, html.intro-lock body{
  overflow:hidden !important; height:100%;
  touch-action:none; overscroll-behavior:none;
}

::selection{ background:rgba(184,134,47,.24); color:var(--ink-strong) }

/* ── type primitives ─────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans); font-weight:200;
  font-size:clamp(.6rem,2.4vw,.68rem);
  letter-spacing:.42em; text-indent:.42em; text-transform:uppercase;
  color:var(--gold-deep); margin:0;
}
.micro{
  font-family:var(--sans); font-weight:200;
  font-size:clamp(.6rem,2.3vw,.66rem);
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:var(--ink-mute); margin:0;
}
.body{
  font-size:clamp(.98rem,3.7vw,1.06rem); line-height:1.8;
  color:var(--ink-soft); margin:0; font-weight:300; max-width:46ch;
}
.lede{
  font-size:clamp(1.05rem,4.2vw,1.2rem); line-height:1.72;
  color:var(--ink-soft); font-style:italic; margin:0; max-width:34ch;
}

.script{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.4rem,10.5vw,3.4rem);
  /* Script faces draw ink OUTSIDE their line box, and background-clip:text
     only paints inside it — any overshoot renders transparent, which looks
     like the letters have been sliced. Room on all four sides, and never a
     tight line-height. */
  line-height:1.2;
  padding:.18em .12em .2em;
  margin:0;
}
.script.xl{ font-size:clamp(2.9rem,12.5vw,4.4rem) }

/* Foil for LIGHT grounds — and this blush is DARK for a light ground, which
   is what makes it hard. Measured against the hero's paper (#EDCBBB):

       #E8CC86  contrast 1.03  — the word disappears
       #C9A24B  contrast 1.60
       #8A6524  contrast 3.51

   So the champagne highlight of the usual light-background variant is not
   safe here. Two corrections:
     - the brightest stop is pulled down to #DEBB70 and its band narrowed to
       about a tenth of the sweep, so no letter is ever wholly inside it;
     - every foil glyph carries an embossed edge (the text-shadow below),
       which is what actually guarantees the letterform at the top of the
       sweep - and it reads as foil pressed onto paper, which is exactly what
       the film shows.

   Still NO `filter` on foil: a filter forces a composited layer that Chrome
   rasterises once and rescales, and type painted through background-clip then
   goes permanently soft. text-shadow is a paint effect and costs nothing. */
.foil{
  background-image:linear-gradient(100deg,
    #7E5A1F 0%, #9A6F27 14%, #B98F3C 30%,
    #C9A24B 42%, #DEBB70 48%, #C9A24B 54%,
    #B98F3C 70%, #9A6F27 86%, #7E5A1F 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 1px 1.5px rgba(104,56,40,.30), 0 -1px 0 rgba(255,250,243,.42);
  animation:foilSweep 11s ease-in-out infinite;
  text-rendering:geometricPrecision;
}
@keyframes foilSweep{
  0%,100%{ background-position:0% 50% }
  50%    { background-position:100% 50% }
}

/* The FH monogram, painted through the artwork's alpha channel so it picks up
   the same living foil sweep as the headings. `../assets/…` is correct: a
   relative url() in CSS resolves against the STYLESHEET's location, not the
   document's. */
.foil-mask{
  display:block;
  background-image:linear-gradient(100deg,
    #7E5A1F 0%, #9A6F27 14%, #B98F3C 30%,
    #C9A24B 42%, #DEBB70 48%, #C9A24B 54%,
    #B98F3C 70%, #9A6F27 86%, #7E5A1F 100%);
  background-size:260% 100%;
  animation:foilSweep 11s ease-in-out infinite;
  -webkit-mask-image:url("../assets/monogram.png"); mask-image:url("../assets/monogram.png");
  -webkit-mask-size:contain;   mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
}
@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .foil-mask{
    background-image:url("../assets/monogram-gold.png");
    background-size:contain; background-repeat:no-repeat; background-position:center;
    animation:none;
  }
}

.rule{
  display:block; width:min(230px,62%); height:1px; position:relative;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
  margin:.25rem 0 .35rem;
}
.rule::after{
  content:""; position:absolute; left:50%; top:50%;
  width:5px; height:5px; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold); box-shadow:0 0 7px rgba(184,134,47,.45);
}

/* the small flourish under the hero question */
.orn{ display:block; width:min(190px,54vw); height:10px; position:relative }
.orn::before,.orn::after{
  content:""; position:absolute; top:50%; width:44%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,134,47,.8));
}
.orn::before{ left:0 }
.orn::after{ right:0; transform:scaleX(-1) }
.orn i{
  position:absolute; left:50%; top:50%; width:6px; height:6px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold); box-shadow:0 0 8px rgba(184,134,47,.5);
}

/* ── stages ──────────────────────────────────────────────────────────────── */
/* Every ground here is a CSS gradient painted on the section itself, and a
   gradient always fills its own box exactly — so sections may hug their
   content without the background stopping short. Nothing on this page uses a
   photograph as a section background, which is what would force 100svh. */
.stage{
  position:relative; width:100%;
  min-height:62svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  padding:clamp(3.6rem,10vh,5.4rem) clamp(1.4rem,6vw,4rem);
}
.stage>.inner{
  max-width:var(--maxw); width:100%; position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.55rem,1.6vh,.9rem);
}
.stage>.inner.wide{ max-width:var(--maxw-wide) }

.bg-blush{
  background:
    radial-gradient(94% 62% at 50% 0%,   rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(120% 78% at 14% 100%, rgba(216,156,141,.30) 0%, rgba(216,156,141,0) 58%),
    linear-gradient(180deg,#FBEDE6 0%,#F5DED4 52%,#F0D3C8 100%);
}
.bg-cream{
  background:
    radial-gradient(96% 60% at 50% 2%,   rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(120% 80% at 86% 100%, rgba(232,204,134,.24) 0%, rgba(232,204,134,0) 58%),
    linear-gradient(180deg,#FDF7F2 0%,#FAEDE5 54%,#F6E3DA 100%);
}
/* the deeper contrast ground — dusty mauve rather than more blush */
.bg-mauve{
  background:
    radial-gradient(92% 58% at 50% 0%,   rgba(250,232,226,.55) 0%, rgba(250,232,226,0) 60%),
    radial-gradient(130% 84% at 12% 100%, rgba(122,81,83,.26) 0%, rgba(122,81,83,0) 62%),
    linear-gradient(180deg,#F0D5CE 0%,#E3B9B2 54%,#D8AAA4 100%);
}
.bg-mauve .body,.bg-mauve .lede{ color:rgba(60,34,36,.86) }
.bg-mauve .micro{ color:rgba(60,34,36,.66) }

/* Damask pressed into the paper. Small tile, low opacity: at any size where
   you can read the motif it stops being a texture and becomes wallpaper. */
.stage::before,.hero-damask{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--damask-light),var(--damask-dark);
  background-position:1px 1px, -1px -1px;
  background-size:68px 68px, 68px 68px;
  opacity:.10;
}
/* The damask is a texture, not a pattern, so it has to be dialled per ground:
   the same stroke is far louder on cream than it is on rose. */
.bg-cream::before{ opacity:.065 }
.bg-mauve::before{ opacity:.08 }
/* feathered seam so neighbouring grounds melt instead of banding */
.stage::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:clamp(48px,9vh,100px); z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(196,142,132,0),rgba(196,142,132,.20));
}

/* ── reveals ─────────────────────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(18px); filter:blur(4px);
  transition:opacity 1.4s var(--ease), transform 1.7s var(--ease), filter 1.4s var(--ease);
  will-change:opacity,transform;
}
/* `filter:none`, NOT `blur(0)`. A zero-radius blur is still an active filter,
   so the element keeps its composited layer and the foil headings stay
   permanently soft. `none` drops the layer and the type snaps back sharp. */
.reveal.in{ opacity:1; transform:none; filter:none; will-change:auto }
/* Foil never reveals through a blur — see the note on .foil. */
.reveal.foil{ filter:none }

/* ══════════════════ 1 · OPENING ══════════════════ */
.opening-scene{
  position:relative; height:100svh; height:100dvh; overflow:hidden;
  background:#F0D3C8; cursor:pointer;
}
.opening-sticky{ position:absolute; inset:0; overflow:hidden }
.opening-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; background:#F0D3C8;
  z-index:2;
  transition:opacity var(--dissolve) cubic-bezier(.42,0,.35,1);
}
.opening-video.faded{ opacity:0 }

/* The designed hero the film dissolves INTO. It sits underneath the film in
   the same palette, so what the guest sees is the question completing rather
   than one picture cutting to another. */
.hero-plate{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  /* Sampled from the film's own paper (#EECBBB in the card face, #E0B9A9 out
     on the damask border) so the dissolve is a hand-over, not a colour cut. */
  background:
    radial-gradient(78% 56% at 50% 40%, rgba(247,215,201,.95) 0%, rgba(247,215,201,0) 68%),
    radial-gradient(130% 84% at 50% 112%, rgba(176,120,110,.5) 0%, rgba(176,120,110,0) 62%),
    linear-gradient(178deg,#EFCEBF 0%,#EDCBBB 44%,#DFB4A4 100%);
  overflow:hidden;
}
/* On the card itself the damask sits on the OUTER envelope, not on the face —
   so it is masked away from the middle, where the question lives. */
.hero-plate .hero-damask,.finale-scene .hero-damask{
  opacity:.24; z-index:0;
  -webkit-mask-image:radial-gradient(closest-side at 50% 46%, transparent 34%, #000 92%);
  mask-image:radial-gradient(closest-side at 50% 46%, transparent 34%, #000 92%);
}
/* a soft vignette so the type sits on paper, not on a flat swatch */
.hero-plate::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(110% 74% at 50% 44%, rgba(0,0,0,0) 40%, rgba(132,80,76,.30) 100%);
}

.hero-type{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:.2rem;
  padding:clamp(1.2rem,4vh,2rem) clamp(1.2rem,6vw,2rem);
  max-width:min(680px,92vw);
}
/* Opacity and transform only — no blur. A filter on foil type leaves it
   permanently soft (see .foil). */
.hero-type [data-r]{
  opacity:0; transform:translateY(16px);
  transition:opacity 1.15s var(--ease), transform 1.4s var(--ease);
}
.hero-mono{
  width:clamp(70px,16vw,108px); height:clamp(70px,16vw,108px);
  margin-bottom:clamp(.7rem,3vh,1.4rem);
}
.hero-name{
  margin:0 0 .1rem; font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.5rem,6.6vw,2.25rem); line-height:1.3;
  letter-spacing:.02em; color:var(--mauve-700);
}
.hero-lead{
  margin:0; font-family:var(--sans); font-weight:300;
  font-size:clamp(.76rem,3.4vw,1.04rem);
  letter-spacing:.46em; text-indent:.46em; text-transform:uppercase;
  color:var(--gold-deep);
}
.hero-script{
  font-family:var(--script); font-weight:400; margin:0;
  font-size:clamp(3.4rem,16vw,6.6rem);
  line-height:1.2; padding:.16em .12em .2em;
}
.hero-type .orn{ margin-top:.5rem }

/* ── buffering gate ──────────────────────────────────────────────────────
   The prompt is withheld until the film is wholly in memory, so a tap can
   never land on an unbuffered file. This is only safe because readiness
   cannot hang — see initOpening() for the fetch-error fallback, the stall
   detector, the post-download watchdog and the absolute ceiling. */
.film-loader{
  /* The landscape cut leaves ONE clear band — below "bridesmaid?" and above
     the wax seal — and the portrait cut leaves a wider one in the same place.
     35% from the bottom is inside both. A bottom-of-screen placement (which is
     what the dark templates use) lands squarely on the seal.
     Percentages, not pixels: object-fit:cover scales the frame with the
     viewport, so a fixed offset drifts across the artwork as the window moves.
     The loader and the prompt share this spot — they are never both present. */
  position:absolute; left:50%; bottom:35%;
  transform:translateX(-50%); z-index:7;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  pointer-events:none;                       /* never swallows a tap */
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.film-loader.gone{ opacity:0; transform:translateX(-50%) translateY(6px) }
/* a soft paper glow, so the ring and its label read against any part of the
   card without a box behind them */
.film-loader::before{
  content:""; position:absolute; left:50%; top:46%; z-index:-1;
  width:230px; height:150px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(255,249,244,.8), rgba(255,249,244,0));
}
.loader-dial{ position:relative; display:grid; place-items:center }
.loader-ring{ width:clamp(46px,11vw,58px); height:clamp(46px,11vw,58px); overflow:visible; display:block }
.lr-track{ fill:none; stroke:rgba(122,81,83,.20); stroke-width:2.4 }
/* NOTE: the -90° start is in the SVG transform attribute, never in CSS — a
   CSS transform-origin would stack on top of it and skew the arc. */
.lr-arc{
  fill:none; stroke:var(--gold); stroke-width:2.4; stroke-linecap:round;
  transition:stroke-dashoffset .45s linear;
}
.loader-pct{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-weight:400; font-size:.86rem;
  letter-spacing:.02em; color:var(--ink-strong);
}
.loader-label{
  font-family:var(--sans); font-weight:300;
  font-size:.56rem; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  color:var(--mauve-700); text-shadow:0 1px 10px rgba(255,247,242,.9);
}

/* A pale prompt on pale artwork is invisible, so this is a solid gold pill
   with deep plum type — the highest-contrast thing on the screen. */
.tap-cue{
  position:absolute; left:50%; bottom:35%;
  transform:translateX(-50%); z-index:8;
  opacity:0; pointer-events:none;
  /* the delay lets the loader clear the spot they share before this arrives */
  transition:opacity .8s var(--ease) .4s;
}
.opening-scene.is-ready .tap-cue{ opacity:1; pointer-events:auto }
.film-cue{ transition:opacity .9s var(--ease), transform .9s var(--ease) }
.tap-cue .label{
  display:inline-block;
  font-family:var(--sans); font-weight:400;
  font-size:.68rem; letter-spacing:.38em; text-indent:.38em; text-transform:uppercase;
  color:#3E2224; padding:.9rem 1.9rem; border-radius:999px;
  background:linear-gradient(100deg,#B8862F 0%,#D2AC5C 30%,#EBD49B 50%,#D2AC5C 70%,#B8862F 100%);
  background-size:200% 100%;
  border:1px solid rgba(255,247,225,.6);
  animation:tapBreathe 3s ease-in-out infinite;
}
@keyframes tapBreathe{
  0%,100%{ box-shadow:0 14px 34px -16px rgba(96,54,48,.7), 0 0 0 6px rgba(184,134,47,.16) }
  50%    { box-shadow:0 14px 34px -16px rgba(96,54,48,.7), 0 0 0 16px rgba(184,134,47,0) }
}
.opening-scene.is-playing .film-cue{ opacity:0; transform:translateX(-50%) scale(.94) }

.scroll-hint{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  z-index:7; display:flex; flex-direction:column; align-items:center; gap:.45rem;
  opacity:0; transition:opacity 1.2s var(--ease);
  font-family:var(--sans); font-weight:300; font-size:.56rem;
  letter-spacing:.36em; text-indent:.36em; text-transform:uppercase; color:var(--mauve-700);
}
.scroll-hint.in{ opacity:1 }
.scroll-hint i{
  width:1px; height:32px; display:block;
  background:linear-gradient(180deg,transparent,rgba(184,134,47,.9));
  animation:hintDrop 2.4s ease-in-out infinite;
}
@keyframes hintDrop{
  0%,100%{ transform:scaleY(.5); transform-origin:top; opacity:.4 }
  50%    { transform:scaleY(1);  transform-origin:top; opacity:1 }
}

/* ══════════════════ 2 · THE ASK ══════════════════ */
#s-ask{ min-height:80svh }
#s-ask .lede{ margin-top:.4rem }
[data-ask-question]{ font-size:clamp(2.2rem,9.5vw,3.2rem) }

/* The No button drifts inside this box. Giving it a fixed height means the
   page never reflows as it moves — the section would otherwise jump under the
   guest's finger, which is exactly the "broken button" feeling to avoid. */
.ask-field{
  position:relative; width:100%;
  min-height:clamp(170px,30vh,220px);
  margin-top:clamp(.8rem,3vh,1.4rem);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.8rem,4vw,1.6rem);
  flex-wrap:wrap;
}
.btn-gold{
  position:relative;
  padding:1.05rem 2.2rem; border-radius:999px;
  font-family:var(--sans); font-weight:400;
  font-size:.68rem; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:#3E2224;
  background:linear-gradient(100deg,#B8862F 0%,#D2AC5C 30%,#EBD49B 50%,#D2AC5C 70%,#B8862F 100%);
  background-size:200% 100%;
  box-shadow:0 18px 34px -22px rgba(96,54,48,.85), 0 0 0 1px rgba(255,247,225,.5);
  transition:background-position .9s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn-gold:hover{ background-position:100% 50%; transform:translateY(-1px) }
.btn-gold:active{ transform:translateY(0) scale(.985) }
.btn-gold:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px }

.btn-quiet{
  padding:.95rem 1.9rem; border-radius:999px;
  font-family:var(--sans); font-weight:300;
  font-size:.66rem; letter-spacing:.28em; text-indent:.28em; text-transform:uppercase;
  color:var(--mauve-700);
  background:rgba(255,250,246,.72);
  border:1px solid var(--gold-line);
  box-shadow:0 12px 26px -20px rgba(96,54,48,.7);
  transition:transform .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.btn-quiet:hover{ border-color:var(--gold); color:var(--ink) }
.btn-quiet:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px }

.btn-yes{ font-size:.74rem; padding:1.15rem 2.6rem }

/* Once it starts dodging the No button is taken out of flow and positioned
   inside .ask-field, so its drift cannot push anything else around. */
.btn-no.loose{
  position:absolute; margin:0;
  transition:left .52s var(--ease), top .52s var(--ease), transform .52s var(--ease);
  will-change:left,top;
}
.btn-no.caught{ transition:left .3s var(--ease), top .3s var(--ease) }

.ask-hint{
  margin:.2rem 0 0; min-height:1.3em;
  font-family:var(--sans); font-weight:300; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mauve-600);
  opacity:0; transition:opacity .5s var(--ease);
}
.ask-hint.on{ opacity:1 }

.ask-caught{
  width:100%; max-width:34rem; margin-top:clamp(.6rem,2.4vh,1.1rem);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:clamp(1.4rem,5vw,2rem) clamp(1.2rem,5vw,1.8rem);
  background:rgba(255,250,246,.8);
  border:1px solid var(--gold-line); border-radius:4px;
  box-shadow:0 26px 50px -40px rgba(96,54,48,.9);
  opacity:0; transform:translateY(10px);
  transition:opacity .7s var(--ease), transform .8s var(--ease);
}
.ask-caught.in{ opacity:1; transform:none }
.caught-title{ font-size:clamp(1.9rem,8vw,2.4rem); margin:0 }
.ask-caught .body{ text-align:center }

.ask-done{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding-top:clamp(.6rem,2.4vh,1rem);
  opacity:0; transform:translateY(12px);
  transition:opacity .8s var(--ease), transform .9s var(--ease);
}
.ask-done.in{ opacity:1; transform:none }
.seal-mark{ width:74px; height:74px; margin-bottom:.4rem }
.ask-done .script{ font-size:clamp(2.4rem,10vw,3.2rem) }
.ask-done .body{ text-align:center }
.accept-badge{
  margin-top:.5rem; padding:.5rem 1.2rem; border-radius:999px;
  border:1px solid var(--gold-line); color:var(--gold-deep);
  background:rgba(255,250,246,.7);
}

/* ══════════════════ 3 · A NOTE FROM THE BRIDE ══════════════════ */
.note-quote{
  margin:.4rem 0 0; max-width:38ch;
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.1rem,4.6vw,1.32rem); line-height:1.72;
  color:rgba(58,32,34,.9);
}
.note-sign{
  margin:.9rem 0 0; font-family:var(--script);
  font-size:clamp(1.5rem,6vw,1.9rem); line-height:1.3; padding:.1em .1em .16em;
  color:var(--mauve-700);
}

/* ══════════════════ 4 · THE DATES ══════════════════ */
.day-cards{
  width:100%; margin-top:clamp(1rem,3.5vh,1.6rem);
  display:grid; grid-template-columns:1fr; gap:clamp(.9rem,3vw,1.2rem);
}
@media (min-width:640px){ .day-cards{ grid-template-columns:1fr 1fr } }
.day-card{
  position:relative; padding:clamp(1.5rem,5.5vw,2rem) clamp(1.1rem,4.5vw,1.6rem);
  background:linear-gradient(168deg, rgba(255,252,249,.86), rgba(252,238,231,.72));
  border:1px solid var(--gold-line); border-radius:4px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 26px 48px -40px rgba(96,54,48,.9);
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  opacity:0; transform:translateY(16px);
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
.day-card.in{ opacity:1; transform:none }
.day-card::after{
  content:""; position:absolute; inset:6px; border-radius:2px;
  border:1px solid var(--gold-line-soft); pointer-events:none;
}
.day-tag{
  font-family:var(--sans); font-weight:300; margin:0;
  font-size:.58rem; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  color:var(--gold-deep);
}
.day-num{
  font-family:var(--serif); font-weight:300; margin:0;
  font-size:clamp(3rem,13vw,3.8rem); line-height:1; color:var(--ink-strong);
  letter-spacing:.02em;
}
.day-when{
  margin:0; font-family:var(--serif); font-size:clamp(1rem,4vw,1.1rem);
  color:var(--ink-soft); letter-spacing:.04em;
}
.day-time{
  margin:.15rem 0 0; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(.92rem,3.6vw,1rem); color:var(--gold-deep); letter-spacing:.03em;
}
.day-note{
  margin:.3rem 0 0; font-family:var(--sans); font-weight:300;
  font-size:.66rem; letter-spacing:.14em; color:var(--ink-mute); line-height:1.7;
}
.dates-note{ text-align:center; margin-top:clamp(.6rem,2vh,1rem) }

/* ── the countdown ────────────────────────────────────────────────────────
   Four units on one line. `tabular-nums` and a min-width on the seconds keep
   the row from twitching sideways every second as the glyph widths change —
   without it the whole block jitters, which is the fastest way to make a
   countdown feel cheap. */
.countdown{
  display:grid; grid-template-columns:repeat(4,1fr);
  width:100%; max-width:420px;
  margin:clamp(1.1rem,3.6vh,1.7rem) auto clamp(.2rem,1vh,.4rem);
}
.cd-unit{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:.28rem;
  padding:0 .2rem;
}
.cd-unit + .cd-unit::before{
  content:""; position:absolute; left:0; top:12%; bottom:32%; width:1px;
  background:linear-gradient(180deg,transparent,var(--gold-line),transparent);
}
.cd-unit b{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,7.6vw,2.3rem); line-height:1;
  color:var(--ink-strong); letter-spacing:.01em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  min-width:1.9ch; text-align:center;
}
.cd-unit span{
  font-family:var(--sans); font-weight:300;
  font-size:.54rem; letter-spacing:.28em; text-indent:.28em; text-transform:uppercase;
  color:var(--ink-mute);
}
[data-cd-note]{ margin-top:.5rem; color:var(--gold-deep) }

/* ══════════════════ 5 · YOUR PACKAGE ══════════════════ */
.total-line{
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  margin:clamp(.6rem,2.4vh,1rem) 0 .3rem;
}
.total-label{
  font-family:var(--sans); font-weight:300;
  font-size:.6rem; letter-spacing:.4em; text-indent:.4em; text-transform:uppercase;
  color:var(--ink-mute);
}
.total-amount{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem,12vw,3.6rem); line-height:1.15; letter-spacing:.01em;
  padding:.04em .06em .06em;
}

.pkg-grid{
  width:100%; margin-top:clamp(1.2rem,4vh,1.8rem);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,2.6vw,1.1rem);
}
@media (min-width:720px){ .pkg-grid{ grid-template-columns:repeat(3,1fr) } }
.pkg-card{
  position:relative; overflow:hidden; border-radius:4px;
  border:1px solid var(--gold-line);
  background:linear-gradient(168deg, rgba(255,252,249,.9), rgba(250,234,227,.8));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 24px 44px -38px rgba(96,54,48,.9);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(18px);
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
.pkg-card.in{ opacity:1; transform:none }
/* aspect-ratio sets the figure's natural size; flex-grow then lets it take up
   whatever extra height the grid row has. Without the grow, the card carrying
   the sandals band makes every other card taller than its photograph and they
   end in a band of empty paper. */
.pkg-figure{
  position:relative; margin:0; flex:1 1 auto;
  aspect-ratio:2/3; overflow:hidden; background:var(--blush-100);
}
.pkg-figure img{
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  transition:transform 1.6s var(--ease);
}
.pkg-card:hover .pkg-figure img{ transform:scale(1.035) }
/* The sandals belong to the Eexungi dress, so they stay on its card — but as a
   full-width band under the dress rather than a corner inset. At inset size
   they were decoration; at card width they are something you can actually
   look at, which is the whole point of photographing them. */
.pkg-pair{
  position:relative; margin:0; flex:0 0 auto; overflow:hidden;
  border-top:1px solid var(--gold-line-soft);
  background:var(--blush-50);
}
.pkg-pair img{
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  aspect-ratio:5/4;
}
.pkg-pair figcaption{
  position:absolute; left:0; right:0; bottom:0;
  font-family:var(--sans); font-weight:300; font-size:.5rem;
  letter-spacing:.18em; text-transform:uppercase; text-align:center;
  color:#3E2224; padding:.34rem .3rem;
  background:linear-gradient(180deg, rgba(255,247,236,0), rgba(255,247,236,.9) 42%);
}
.pkg-body{ padding:.85rem .9rem 1rem; display:flex; flex-direction:column; gap:.2rem; text-align:left }
.pkg-name{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(.98rem,3.8vw,1.08rem); line-height:1.3; color:var(--ink-strong);
}
.pkg-caption{
  margin:0; font-family:var(--sans); font-weight:300;
  font-size:.6rem; letter-spacing:.1em; line-height:1.65; color:var(--ink-mute);
}

/* Items with no photograph render as text rows. No placeholder frames — an
   empty box reads as a broken image, which is worse than no image at all. */
.pkg-rows{
  list-style:none; margin:clamp(1.2rem,4vh,1.8rem) 0 0; padding:0; width:100%;
  display:flex; flex-direction:column;
}
.pkg-row{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem .2rem; text-align:left;
  border-bottom:1px solid var(--gold-line-soft);
  opacity:0; transform:translateY(10px);
  transition:opacity 1s var(--ease), transform 1.15s var(--ease);
}
.pkg-row.in{ opacity:1; transform:none }
.pkg-row:first-child{ border-top:1px solid var(--gold-line-soft) }
.pkg-row i{
  flex:0 0 auto; width:6px; height:6px; transform:rotate(45deg);
  background:var(--gold); box-shadow:0 0 7px rgba(184,134,47,.45);
}
.pkg-row span{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1rem,4vw,1.1rem); color:var(--ink-strong); letter-spacing:.02em;
}
[data-pkg-photonote]{ margin-top:clamp(1rem,3vh,1.4rem) }

/* ══════════════════ 6 · PAYMENT SCHEDULE ══════════════════ */
.pay-steps{
  /* width:max-content so the two-step timeline sits centred under the centred
     heading, instead of hugging the left edge of a 560px column it never fills */
  list-style:none; margin:clamp(1.2rem,4vh,1.8rem) auto 0; padding:0;
  width:max-content; max-width:100%;
  display:flex; flex-direction:column; gap:0;
}
.pay-step{
  position:relative; display:grid;
  grid-template-columns:30px 1fr; gap:0 clamp(.9rem,4vw,1.4rem);
  text-align:left; padding-bottom:clamp(1.4rem,5vh,2rem);
  opacity:0; transform:translateY(14px);
  transition:opacity 1.1s var(--ease), transform 1.25s var(--ease);
}
.pay-step.in{ opacity:1; transform:none }
.pay-step:last-child{ padding-bottom:0 }
.pay-node{ position:relative; display:flex; justify-content:center }
.pay-node b{
  position:relative; z-index:2; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; margin-top:.15rem;
  font-family:var(--sans); font-weight:400; font-size:.7rem; color:#3E2224;
  background:linear-gradient(140deg,#EBD49B,#C9A24B 55%,#B8862F);
  box-shadow:0 0 0 1px rgba(255,247,225,.7), 0 8px 18px -12px rgba(96,54,48,.9);
}
.pay-step:not(:last-child) .pay-node::after{
  content:""; position:absolute; left:50%; top:34px; bottom:-4px; width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--gold-line),rgba(184,134,47,.08));
}
.pay-label{
  margin:0; font-family:var(--sans); font-weight:300;
  font-size:.6rem; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:var(--gold-deep);
}
.pay-amount{
  margin:.2rem 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,7.5vw,2.1rem); line-height:1.2; color:var(--ink-strong);
}
.pay-due{
  margin:.15rem 0 0; font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(.95rem,3.7vw,1.04rem); color:rgba(58,32,34,.78);
}
.pay-closing{ margin-top:clamp(.6rem,2.4vh,1rem); text-transform:none; letter-spacing:.1em;
  font-size:.74rem; font-style:italic; font-family:var(--serif); text-indent:0 }

/* ══════════════════ 7 · BANKING · shared paper card ══════════════════ */
.paper-card{
  position:relative; width:100%; margin-top:clamp(1rem,3.5vh,1.6rem);
  padding:clamp(1.8rem,6vw,2.4rem) clamp(1.3rem,5vw,2rem);
  background:linear-gradient(168deg, rgba(255,253,251,.92), rgba(252,240,234,.84));
  border:1px solid var(--gold-line); border-radius:4px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 30px 56px -44px rgba(96,54,48,.95);
  text-align:left;
}
.paper-card::after{
  content:""; position:absolute; inset:6px; border-radius:2px;
  border:1px solid var(--gold-line-soft); pointer-events:none;
}
.ec-corner{ position:absolute; width:13px; height:13px; pointer-events:none; z-index:3 }
.ec-corner::before,.ec-corner::after{ content:""; position:absolute; background:var(--gold); opacity:.55 }
.ec-corner::before{ width:100%; height:1px }
.ec-corner::after { width:1px; height:100% }
.ec-corner.tl{ left:12px; top:12px }
.ec-corner.tr{ right:12px; top:12px } .ec-corner.tr::after{ right:0 }
.ec-corner.bl{ left:12px; bottom:12px } .ec-corner.bl::before{ bottom:0 }
.ec-corner.br{ right:12px; bottom:12px } .ec-corner.br::before{ bottom:0 } .ec-corner.br::after{ right:0 }

.bank-card.sealed{ opacity:0; transform:translateY(-8px) }
.bank-card.unsealed{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .8s var(--ease);
}
.bank-rows{ margin:0; display:flex; flex-direction:column; gap:.1rem }
.bank-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.68rem 0; border-bottom:1px solid var(--gold-line-soft);
}
.bank-row:last-child{ border-bottom:0 }
.bank-row dt{
  font-family:var(--sans); font-weight:300;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
}
.bank-row dd{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1rem,4vw,1.1rem); color:var(--ink-strong); text-align:right;
  letter-spacing:.03em;
}
/* a value her document leaves blank — obviously unfinished, not invented */
.bank-row dd.pending{
  font-style:italic; font-size:.86rem; color:var(--mauve-600);
  border-bottom:1px dashed rgba(154,106,104,.55); padding-bottom:1px;
}
.bank-foot{ margin-top:1rem; text-align:center; text-indent:0; letter-spacing:.16em }

/* ══════════════════ 8 · YOUR SIZES ══════════════════ */
.sizes-card{ display:flex; flex-direction:column; gap:.35rem }
.answer-chip{
  align-self:flex-start; margin:0 0 .7rem;
  padding:.45rem 1rem; border-radius:999px;
  font-family:var(--sans); font-weight:300; font-size:.58rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep);
  border:1px solid var(--gold-line); background:rgba(255,250,246,.8);
}
.field{ position:relative }
.field input,.field textarea,.field select{
  width:100%; padding:1.25rem .1rem .5rem; border:0;
  border-bottom:1px solid var(--gold-line);
  background:transparent; color:var(--ink-strong);
  font-family:var(--serif); font-weight:400; font-size:1.02rem; line-height:1.4;
  border-radius:0; outline:none; resize:none;
  transition:border-color .5s var(--ease);
}
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer }
.field select option{ background:#FFFAF6; color:var(--ink-strong) }
.field-select::after{
  content:""; position:absolute; right:.35rem; bottom:1.05rem; width:7px; height:7px;
  border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:rotate(45deg); pointer-events:none;
}
.field label{
  position:absolute; left:.1rem; top:1.15rem; pointer-events:none;
  font-family:var(--sans); font-weight:300; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
  transition:transform .45s var(--ease), color .45s var(--ease);
  transform-origin:left top;
}
.field input:focus~label,.field textarea:focus~label,
.field input:not(:placeholder-shown)~label,.field textarea:not(:placeholder-shown)~label,
.field select~label{
  transform:translateY(-1.1rem) scale(.78); color:var(--gold-deep);
}
.field input:focus,.field textarea:focus,.field select:focus{ border-bottom-color:var(--gold) }
.field.invalid input,.field.invalid textarea,.field.invalid select{ border-bottom-color:#B4544F }

.field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(.9rem,4vw,1.4rem) }
.sizes-card .btn-gold{ margin-top:clamp(1.2rem,4vh,1.8rem); align-self:center }
.form-error{
  margin:.7rem 0 0; text-align:center;
  font-family:var(--sans); font-weight:300; font-size:.68rem;
  letter-spacing:.16em; color:#9B4741;
}

.sizes-done{
  width:100%; margin-top:clamp(1rem,3.5vh,1.6rem);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:clamp(2rem,7vw,2.8rem) 1.2rem;
}
.done-seal{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--gold-line); margin-bottom:.5rem;
  background:radial-gradient(circle at 38% 32%, rgba(235,212,155,.55), rgba(184,134,47,.12));
}
.done-seal svg{ width:24px; height:24px }
.done-seal svg path{
  fill:none; stroke:var(--gold-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26; animation:tickDraw .8s var(--ease) .25s forwards;
}
@keyframes tickDraw{ to{ stroke-dashoffset:0 } }
.sizes-done .script{ font-size:clamp(2rem,9vw,2.8rem) }
.sizes-done .body{ text-align:center }
.sizes-done .btn-gold{ margin-top:1.2rem }

/* ══════════════════ 9 · FINALE ══════════════════ */
.finale-scene{
  position:relative; width:100%; min-height:92svh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% 24%, rgba(255,250,245,.85) 0%, rgba(255,250,245,0) 62%),
    radial-gradient(130% 80% at 50% 108%, rgba(154,106,104,.42) 0%, rgba(154,106,104,0) 60%),
    linear-gradient(180deg,#F7E1D8 0%,#EFCDC2 52%,#E2B3A8 100%);
}

.finale-type{
  position:relative; z-index:2; width:100%; max-width:var(--maxw);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-align:center; padding:clamp(3rem,10vh,5rem) 1.4rem;
}
.finale-mono{
  width:clamp(58px,13vw,80px); height:clamp(58px,13vw,80px);
  margin-bottom:clamp(.6rem,2.4vh,1.1rem);
  opacity:0; transform:translateY(16px);
  transition:opacity 1.2s var(--ease), transform 1.4s var(--ease);
}
.finale-mono.in{ opacity:1; transform:none }
.fin-sub{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1rem,4vw,1.14rem); color:var(--ink-soft); letter-spacing:.04em;
}
.hashtag{
  margin:clamp(.9rem,3vh,1.4rem) 0 0;
  padding:.55rem 1.3rem; border-radius:999px;
  font-family:var(--sans); font-weight:300;
  font-size:clamp(.62rem,2.6vw,.7rem);
  letter-spacing:.24em; text-indent:.24em;
  color:var(--gold-deep);
  border:1px solid var(--gold-line);
  background:rgba(255,250,246,.6);
}

/* ══════════════════ scroll progress ══════════════════ */
.progress-rail{
  position:fixed; left:0; right:0; bottom:0; height:2px; z-index:60;
  background:rgba(122,81,83,.10); pointer-events:none;
}
.progress-rail i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#8A6524,#C9A24B 40%,#EBD49B 70%,#B8862F);
  box-shadow:0 0 10px rgba(184,134,47,.55);
}

/* ══════════════════ reduced motion ══════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal,.hero-type [data-r],.day-card,.pkg-card,.pkg-row,.pay-step,.finale-mono{
    opacity:1 !important; transform:none !important; filter:none !important;
  }
}