/* ============================================================================
   NATHAN & AMARA — navy & gold
   ========================================================================== */

:root{
  /* navy field */
  --navy-950:#04070E;
  --navy-900:#070C18;
  --navy-850:#0A1122;
  --navy-800:#0D1730;
  --navy-700:#13203F;
  --navy-600:#1B2B53;

  /* gold */
  --gold:#C9A24B;
  --gold-hi:#E8CC86;
  --gold-pale:#F3E2B6;
  --gold-deep:#8A6524;
  --gold-line:rgba(201,162,75,.30);
  --gold-line-soft:rgba(201,162,75,.16);

  /* ink */
  --ink:#F2EBDD;
  --ink-soft:rgba(242,235,221,.74);
  --ink-mute:rgba(242,235,221,.50);
  --ink-faint:rgba(242,235,221,.30);

  --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:640px;
}

*,*::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 containers that are also toggled with `hidden` — the lightbox,
   the mini player, the scroll hint, the RSVP confirmation, the album button —
   and every one of them stayed in the layout while supposedly hidden. The
   lightbox is `position:fixed; inset:0; z-index:90; pointer-events:auto`, so
   it sat invisibly over the entire page and swallowed every click on the site,
   Tap To Open included. This rule 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(--navy-900);
  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-hi); text-decoration:none}

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

/* ── 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-hi); opacity:.9; 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(.95rem,3.7vw,1.02rem); line-height:1.78;
  color:var(--ink-soft); margin:0; font-weight:300;
}
.lede{
  font-size:clamp(1rem,3.9vw,1.1rem); line-height:1.75;
  color:var(--ink-soft); font-style:italic; margin:0; max-width:46ch;
}

.script{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.5rem,11vw,3.5rem);
  line-height:1.2;                 /* script faces need the room */
  padding:.18em .1em .2em;         /* ink overshoots the box on all sides */
  margin:0;
}
.script.xl{ font-size:clamp(3rem,13vw,4.6rem) }

/* Foil for dark grounds: luminous end-to-end so the sweep shifts warmth,
   never brightness — contrast can't drop out mid-cycle. */
/* No `filter` on foil text. A filter promotes the element to its own
   composited layer, which Chrome rasterises once and then rescales — on type
   that is already painted through background-clip, the result is permanently
   soft letterforms. The glow is not worth blurring every heading for. */
.foil{
  background-image:linear-gradient(100deg,
    #B98F3C 0%, #D6B166 14%, #EFD79E 30%,
    #FFF6DC 46%, #EFD79E 62%, #D0A957 80%, #B98F3C 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:foilSweep 11s ease-in-out infinite;
  text-rendering:geometricPrecision;
}
@keyframes foilSweep{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.rule{
  display:block; width:min(230px,62%); height:1px; position:relative;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
  margin:.2rem 0 .3rem;
}
.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 8px rgba(201,162,75,.6);
}

/* ── stages ──────────────────────────────────────────────────────────────── */
.stage{
  position:relative; width:100%;
  min-height:62svh;                /* gradient grounds may hug their content */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  padding:clamp(3.4rem,9vh,5rem) 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(.5rem,1.5vh,.85rem);
}
.stage>.inner.wide{ max-width:var(--maxw-wide) }

/* Three-pass navy grounds — bloom above, warmth below, corner wash */
.bg-navy{
  background:
    radial-gradient(92% 60% at 50% 0%,   rgba(38,60,110,.55) 0%, rgba(38,60,110,0) 64%),
    radial-gradient(120% 78% at 12% 100%, rgba(201,162,75,.10) 0%, rgba(201,162,75,0) 58%),
    linear-gradient(180deg,#0A1122 0%,#0D1730 48%,#080E1E 100%);
}
.bg-navy-deep{
  background:
    radial-gradient(88% 56% at 50% 4%,   rgba(28,46,90,.5) 0%, rgba(28,46,90,0) 62%),
    radial-gradient(130% 84% at 88% 100%, rgba(201,162,75,.085) 0%, rgba(201,162,75,0) 60%),
    linear-gradient(180deg,#070C18 0%,#0A1224 52%,#05090F 100%);
}
.bg-navy-warm{
  background:
    radial-gradient(96% 62% at 50% 2%,   rgba(46,70,124,.46) 0%, rgba(46,70,124,0) 66%),
    radial-gradient(120% 80% at 20% 96%, rgba(201,162,75,.13) 0%, rgba(201,162,75,0) 58%),
    linear-gradient(180deg,#0B1223 0%,#12203D 50%,#090F1F 100%);
}

/* a woven tooth you feel more than see */
.stage::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.55;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05)      0 1px,transparent 1px 3px);
}
/* feathered seam so neighbouring scenes melt instead of banding */
.stage::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:clamp(52px,10vh,110px); z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,14,0),rgba(4,7,14,.55));
}

/* ── 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 gold foil headings stay
   permanently soft. `none` drops the layer and the type snaps back to sharp. */
.reveal.in{ opacity:1; transform:none; filter:none; will-change:auto }

/* ══════════════════ 1 · OPENING ══════════════════ */
.opening-scene{
  position:relative; height:100svh; height:100dvh; overflow:hidden;
  background:#04070E; cursor:pointer;
}
.opening-sticky{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden }
.opening-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; background:#04070E;
}
#video1{ z-index:1 }
/* A long, slow dissolve. Keep --dissolve in step with films.dissolveMs in
   config.js — the fade must still be running while the second film plays. */
:root{ --dissolve:1600ms }
#introVideo.card-video{ z-index:2; transition:opacity var(--dissolve) cubic-bezier(.42,0,.35,1) }
#introVideo.card-video.faded{ opacity:0 }

.hero-vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 46%, rgba(0,0,0,0) 42%, rgba(3,6,12,.62) 100%),
    linear-gradient(180deg, rgba(4,8,16,.5) 0%, rgba(4,8,16,0) 24%, rgba(4,8,16,0) 62%, rgba(4,8,16,.7) 100%);
}
/* Portrait needs a much deeper floor: the type sits on it, and the studio
   backdrop is the same navy, so a heavy gradient reads as the set falling
   into shadow rather than as a panel laid over the photograph. */
html:not(.is-wide) .hero-vignette{
  background:
    radial-gradient(120% 70% at 50% 34%, rgba(0,0,0,0) 44%, rgba(3,6,12,.5) 100%),
    linear-gradient(180deg,
      rgba(4,8,16,.42) 0%, rgba(4,8,16,0) 18%, rgba(4,8,16,0) 40%,
      rgba(4,8,16,.62) 58%, rgba(4,8,16,.93) 76%, rgba(4,8,16,.985) 100%);
}

/* ── buffering gate ──────────────────────────────────────────────────────
   At 4K the two films are ~28 MB. Tapping into that unbuffered means the
   prompt vanishes and nothing moves for several seconds, which reads as a
   broken button. So the prompt is withheld until both films can play
   through, and this shows what is happening meanwhile. */
.film-loader{
  position:absolute; left:50%; bottom:clamp(128px,23vh,196px);
  transform:translateX(-50%); z-index:7;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  pointer-events:none;                     /* never swallows a tap */
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.film-loader.gone{ opacity:0; transform:translateX(-50%) translateY(6px); pointer-events:none }
.loader-ring{ width:clamp(46px,11vw,58px); height:clamp(46px,11vw,58px); overflow:visible }
.lr-track{ fill:none; stroke:rgba(232,204,134,.16); 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-hi); stroke-width:2.4; stroke-linecap:round;
  transition:stroke-dashoffset .45s linear;
}
.loader-pct{
  font-family:var(--serif); font-weight:300; font-size:.98rem;
  letter-spacing:.06em; color:#FBF5E9;
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}
.loader-label{
  font-family:var(--sans); font-weight:200;
  font-size:.56rem; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  color:var(--ink-mute); text-shadow:0 2px 10px rgba(0,0,0,.85);
}

/* Withheld until both films are wholly downloaded, so the prompt is never
   offered against footage that would stutter. The gate is safe to make strict
   ONLY because readiness can no longer hang: a fetch that fails or stalls for
   30s falls back to streaming and opens it anyway (see initOpening). */
.tap-cue{
  position:absolute; left:50%; bottom:clamp(58px,12vh,104px);
  transform:translateX(-50%); z-index:8;
  opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease);
}
.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:200;
  font-size:.66rem; letter-spacing:.38em; text-indent:.38em; text-transform:uppercase;
  color:#FBF3E2; padding:.85rem 1.7rem; border-radius:999px;
  background:linear-gradient(180deg,rgba(13,23,48,.86),rgba(5,9,18,.9));
  border:1px solid rgba(232,204,134,.5);
  backdrop-filter:blur(3px);
  animation:tapBreathe 3s ease-in-out infinite;
}
@keyframes tapBreathe{
  0%,100%{ box-shadow:0 12px 34px -14px rgba(0,0,0,.8), 0 0 0 6px rgba(232,204,134,.10) }
  50%    { box-shadow:0 12px 34px -14px rgba(0,0,0,.8), 0 0 0 16px rgba(232,204,134,0) }
}
.opening-scene.is-playing .film-cue{ opacity:0; transform:translateX(-50%) scale(.94) }

/* PORTRAIT — measured from the film, the couple's heads begin at 17.3% of the
   frame, so the band above them is empty backdrop. "Invited" goes up there,
   everything else drops below the faces onto the strengthened scrim (see the
   html:not(.is-wide) vignette). Nothing crosses either face. */
.hero-type{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  text-align:center; gap:clamp(.7rem,2.6vh,1.3rem);
  padding:clamp(1rem,2.6vh,1.8rem) 1.3rem clamp(2.4rem,7vh,4rem);
}
/* keep the top group inside that 17% band */
html:not(.is-wide) .ht-a{ gap:.32rem }
html:not(.is-wide) .ht-a .ht-invited{ font-size:clamp(2.3rem,11vw,3.1rem) }
html:not(.is-wide) .ht-a .ht-orn{ transform:scale(.8) }
/* Opacity and transform only — no blur. See revealText() in main.js. */
.hero-type [data-r]{
  opacity:0; transform:translateY(16px);
  transition:opacity 1.15s var(--ease), transform 1.4s var(--ease);
}
.ht-group{ display:flex; flex-direction:column; align-items:center; gap:.55rem }
.ht-eyebrow{
  font-family:var(--sans); font-weight:200; margin:0;
  font-size:clamp(.58rem,2.5vw,.68rem);
  letter-spacing:.4em; text-indent:.4em; text-transform:uppercase;
  color:#F0E7D4; text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.ht-invited{
  font-family:var(--script); font-size:clamp(3.1rem,15vw,4.4rem);
  line-height:1.2; padding:.16em .1em .2em;
}
.ht-orn{ display:block; width:120px; height:9px; position:relative }
.ht-orn::before,.ht-orn::after{
  content:""; position:absolute; top:50%; width:44px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,204,134,.72));
}
.ht-orn::before{ left:0 }
.ht-orn::after{ right:0; transform:scaleX(-1) }
.ht-orn i{
  position:absolute; left:50%; top:50%; width:6px; height:6px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold-hi); box-shadow:0 0 10px rgba(232,204,134,.8);
}
.ht-names{ display:flex; flex-direction:column; align-items:center; gap:.1rem }
.ht-name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.5rem,12vw,3.6rem); line-height:1.06;
  letter-spacing:.06em; color:#FBF5E9;
  text-shadow:0 3px 22px rgba(0,0,0,.9);
}
.ht-amp{ font-family:var(--script); font-size:clamp(1.7rem,7vw,2.2rem); line-height:1.3; padding:.1em .1em .14em }

.scroll-hint{
  position:absolute; left:50%; bottom:1.5rem; 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:200; font-size:.56rem;
  letter-spacing:.36em; text-indent:.36em; text-transform:uppercase; color:var(--ink-mute);
}
.scroll-hint.in{ opacity:1 }
.scroll-hint i{
  width:1px; height:34px; display:block;
  background:linear-gradient(180deg,transparent,rgba(232,204,134,.85));
  animation:hintDrop 2.4s ease-in-out infinite;
}
@keyframes hintDrop{ 0%,100%{transform:scaleY(.5); opacity:.4} 50%{transform:scaleY(1); opacity:1} }

/* ══════════════════ 2 · COUNTDOWN DIALS ══════════════════ */
.dials{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.4rem,2.4vw,1.1rem);
  width:100%; margin-top:clamp(.8rem,3vh,1.6rem);
}
.dial{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.5rem }
.dial-ring{ position:relative; width:100%; aspect-ratio:1; max-width:126px }
.dial-ring svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible }
.dial-ring .track{ fill:none; stroke:rgba(201,162,75,.14); stroke-width:1.6 }
.dial-ring .arc{
  fill:none; stroke:url(#goldArc); stroke-width:2.2; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(201,162,75,.5));
  transition:stroke-dashoffset .55s var(--ease);
}
.dial-ring .ticks line{ stroke:rgba(201,162,75,.3); stroke-width:1 }
.dial-ring .ticks line.major{ stroke:rgba(232,204,134,.62); stroke-width:1.4 }

/* The travelling marker on the seconds dial.
   Two things were wrong before. (1) A CSS transform-origin was declared on top
   of the SVG `rotate(deg 50 50)` attribute; both applied, so the pivot left the
   spindle and the hand swung outside the dial. The attribute alone is correct —
   never re-declare the origin in CSS. (2) A full-length hand from the centre
   crossed straight through the numeral. So this is a short marker riding the
   rim instead: it still reads as a sweeping second hand, but it orbits the
   number rather than striking through it. */
.dial-ring .hand{
  stroke:var(--gold-hi); stroke-width:2.2; stroke-linecap:round;
  transition:transform .3s var(--ease);
}
.dial-ring .pin{ fill:rgba(232,204,134,.5) }

.dial-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:300; letter-spacing:.02em;
  font-size:clamp(1.5rem,6.6vw,2.05rem); line-height:1;
  color:#FCF6E8; text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.dial-num.tick{ animation:numTick .5s var(--ease) }
@keyframes numTick{
  0%{ opacity:.25; transform:translateY(-5px) }
  100%{ opacity:1; transform:none }
}
.dial-label{
  font-family:var(--sans); font-weight:200;
  font-size:clamp(.5rem,2.1vw,.6rem);
  letter-spacing:.28em; text-indent:.28em; text-transform:uppercase; color:var(--ink-mute);
}

/* ══════════════════ 3 · TURNTABLE ══════════════════ */
.turntable{
  width:100%; display:flex; flex-direction:column; align-items:center;
  gap:clamp(.9rem,3vh,1.4rem); margin-top:clamp(.6rem,2.5vh,1.2rem);
}
.tt-platter{
  position:relative; width:min(380px,86vw); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
}
/* platter mat glow */
.tt-platter::before{
  content:""; position:absolute; inset:-9%; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(201,162,75,.16), rgba(201,162,75,0) 66%);
  pointer-events:none;
}

.record{
  position:relative; width:100%; height:100%; border-radius:50%; padding:0;
  background:
    radial-gradient(circle at 50% 50%, #0E1730 0 17%, #080D1A 17% 100%),
    #070C18;
  box-shadow:
    0 0 0 1px rgba(201,162,75,.26),
    0 26px 60px -26px rgba(0,0,0,.95),
    inset 0 0 60px rgba(0,0,0,.7);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.record:active{ transform:scale(.985) }
.record.spinning{ animation:spin 2.6s linear infinite }
.record.spinning.slowing{ animation:spin 6.5s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ── "this is a button" ───────────────────────────────────────────────────
   A record on a dark page reads as decoration. These two make it read as
   something to press: a gold play badge sitting on the label, and a halo
   that breathes outward from the disc. Both retire once it is playing. */
.rec-play{
  position:absolute; left:50%; top:50%;
  width:26%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%); z-index:3;
  display:grid; place-items:center;
  background:radial-gradient(circle at 38% 32%, rgba(10,16,32,.94), rgba(4,7,14,.97));
  box-shadow:0 0 0 1.5px rgba(232,204,134,.75), 0 10px 26px -10px rgba(0,0,0,.95);
  transition:opacity .5s var(--ease), transform .55s var(--ease);
}
.rec-play svg{ width:42%; height:42%; overflow:visible; transform:translateX(4%) }
.rec-play .ic-play { fill:var(--gold-hi); transition:opacity .3s var(--ease) }
.rec-play .ic-pause{ fill:none; stroke:var(--gold-hi); stroke-width:2.4; stroke-linecap:round; opacity:0 }
/* the badge steps aside once the needle is down, revealing the sleeve art */
.turntable.playing .rec-play{ opacity:0; transform:translate(-50%,-50%) scale(.72) }

.rec-halo{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:0;
  box-shadow:0 0 0 0 rgba(232,204,134,.42);
  animation:recPulse 2.8s ease-out infinite;
}
.turntable.playing .rec-halo{ animation:none; box-shadow:none }
@keyframes recPulse{
  0%   { box-shadow:0 0 0 0 rgba(232,204,134,.34) }
  70%  { box-shadow:0 0 0 20px rgba(232,204,134,0) }
  100% { box-shadow:0 0 0 0 rgba(232,204,134,0) }
}
.record:hover .rec-play{ transform:translate(-50%,-50%) scale(1.06) }
.turntable.playing .record:hover .rec-play{
  opacity:1; transform:translate(-50%,-50%) scale(1);   /* offer pause on hover */
}
.turntable.playing .record:hover .rec-play .ic-play { opacity:0 }
.turntable.playing .record:hover .rec-play .ic-pause{ opacity:1 }

.rec-grooves{
  position:absolute; inset:6%; border-radius:50%; pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.045) 0 1px, rgba(0,0,0,0) 1px 4px);
  mask:radial-gradient(circle at 50% 50%, transparent 0 27%, #000 28%, #000 100%);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 27%, #000 28%, #000 100%);
}
.rec-sheen{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 210deg,
    rgba(255,255,255,0) 0deg, rgba(190,214,255,.11) 34deg, rgba(255,255,255,0) 78deg,
    rgba(255,255,255,0) 190deg, rgba(232,204,134,.12) 224deg, rgba(255,255,255,0) 268deg);
}
/* the paper label — the single's sleeve art, cropped into the disc */
.rec-label{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:38%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:radial-gradient(circle at 38% 30%, #F0DAA4 0%, #C9A24B 46%, #97722E 100%);
  box-shadow:0 0 0 1px rgba(255,246,220,.42), inset 0 0 18px rgba(90,60,16,.5);
}
.rec-art{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:50%;
}
/* a fine gold ring and a soft inner shadow so the art reads as printed on
   the label rather than pasted over it */
.rec-label::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,246,220,.5), inset 0 0 14px rgba(20,12,0,.45);
}
.rec-spindle{
  position:relative; z-index:2;
  width:16%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #0A1122, #04070E);
  box-shadow:inset 0 0 4px rgba(0,0,0,.9), 0 0 0 1.5px rgba(255,246,220,.55);
}

/* ── the tone arm ─────────────────────────────────────────────────────────
   The pivot post sits at 90%/6% of the platter — ON its edge, not beyond it —
   and the arm is 46% of the platter long, so hanging straight down the stylus
   lands at ~80% of the record radius: the outer groove, where a needle starts.

   Direction matters and is easy to get backwards. On screen (y points DOWN) a
   POSITIVE CSS rotation swings the hanging arm LEFT, i.e. INWARD toward the
   spindle. So resting must be NEGATIVE (parked out beyond the rim) and playing
   is 0deg. Reversing these two makes the arm start over the record's centre
   and swing outward to play — the wrong way round. The arm pivots at its TOP. */
.tonearm{ position:absolute; inset:0; pointer-events:none; z-index:4 }

.ta-base{
  position:absolute; left:90%; top:6%; width:10%; height:10%;
  transform:translate(-50%,-50%); border-radius:50%; z-index:2;
  background:radial-gradient(circle at 36% 30%, #EBD5A2, #A9853A 60%, #63491B);
  box-shadow:0 5px 14px -5px rgba(0,0,0,.95), 0 0 0 1px rgba(255,246,220,.28);
}
.ta-base::after{                      /* the pivot screw */
  content:""; position:absolute; left:50%; top:50%; width:26%; height:26%;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #3B2E12, #171104);
}
.ta-arm{
  position:absolute; left:90%; top:6%;
  width:5px; height:46%;
  transform-origin:50% 0;                       /* pivot at the top */
  transform:translateX(-50%) rotate(-30deg);    /* parked out beyond the rim */
  background:linear-gradient(180deg,#F3E2B8,#C6A253 42%,#7E6127);
  border-radius:4px;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.95), 0 0 0 .5px rgba(255,246,220,.18);
  transition:transform 1.15s cubic-bezier(.34,.02,.2,1);
}
.tonearm.down .ta-arm{ transform:translateX(-50%) rotate(0deg) }    /* swung IN, onto the groove */

.ta-head{
  position:absolute; left:50%; bottom:-9px;
  transform:translateX(-50%) rotate(-17deg);
  width:15px; height:22px; border-radius:2px 2px 4px 4px;
  background:linear-gradient(160deg,#F5E7C2,#A9853A);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.95);
  transition:transform .5s var(--ease);
}
.ta-head::after{                      /* the stylus */
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:2px; height:7px; border-radius:0 0 2px 2px;
  background:linear-gradient(180deg,var(--gold-pale),#FFF6DC);
}
/* the needle settles into the groove a beat after the arm arrives */
.tonearm.down .ta-head{ transform:translateX(-50%) rotate(-17deg) translateY(3px) }

/* now playing — title and artist, off the label so they stay legible */
.tt-track{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:.16rem;
}
.tt-track b{
  font-family:var(--serif); font-weight:400; letter-spacing:.03em;
  font-size:clamp(1.15rem,4.6vw,1.35rem); color:#FBF5E9;
}
.tt-track em{
  font-family:var(--sans); font-weight:200; font-style:normal;
  font-size:clamp(.55rem,2.2vw,.62rem);
  letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--gold-hi);
}

/* A solid contrasting pill, not faint grey text — this is the instruction the
   whole section depends on, and it has to be seen at a glance. */
.tt-cue{
  font-family:var(--sans); font-weight:300;
  font-size:.63rem; letter-spacing:.32em; text-indent:.32em; text-transform:uppercase;
  color:#FBF3E2;
  padding:.78rem 1.6rem; border-radius:999px;
  background:linear-gradient(180deg,rgba(20,32,63,.92),rgba(6,11,24,.95));
  border:1px solid rgba(232,204,134,.5);
  box-shadow:0 12px 30px -16px rgba(0,0,0,.9);
  transition:color .6s var(--ease), border-color .6s var(--ease), background .6s var(--ease);
  animation:cueBreathe 3s ease-in-out infinite;
}
@keyframes cueBreathe{
  0%,100%{ box-shadow:0 12px 30px -16px rgba(0,0,0,.9), 0 0 0 5px rgba(232,204,134,.10) }
  50%    { box-shadow:0 12px 30px -16px rgba(0,0,0,.9), 0 0 0 13px rgba(232,204,134,0) }
}
/* once it is playing the pill stands down to a quiet label */
.turntable.playing .tt-cue{
  color:var(--gold-hi); animation:none;
  background:transparent; border-color:transparent;
  box-shadow:none;
}

/* ══════════════════ 4 · STORY ══════════════════ */
.story-list{
  width:100%; display:flex; flex-direction:column;
  gap:clamp(1.5rem,5vh,2.4rem); margin-top:clamp(1.2rem,4vh,2rem);
}
.story-item{
  position:relative; display:flex; align-items:center;
  gap:clamp(.9rem,4vw,1.6rem); text-align:left; opacity:0;
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
.story-item.from-left { transform:translateX(-9%) }
.story-item.from-right{ transform:translateX(9%); flex-direction:row-reverse; text-align:right }
.story-item.in{ opacity:1; transform:none }

.story-photo{
  flex:0 0 42%; max-width:42%; aspect-ratio:4/3; overflow:hidden; position:relative;
  border-radius:3px;
  box-shadow:0 0 0 1px var(--gold-line-soft), 0 20px 40px -26px rgba(0,0,0,.95);
}
.story-photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.02) }
.story-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,11,24,0) 40%,rgba(6,11,24,.42));
  pointer-events:none;
}
.story-copy{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.38rem }
.story-no{
  font-family:var(--sans); font-weight:200; font-size:.56rem;
  letter-spacing:.34em; text-indent:.34em; color:var(--gold);
}
.story-chapter{
  font-family:var(--serif); font-weight:300; margin:0;
  font-size:clamp(1.12rem,4.6vw,1.4rem); line-height:1.24;
  color:#FBF5E9; letter-spacing:.02em;
}
.story-text{
  font-size:clamp(.84rem,3.3vw,.92rem); line-height:1.72;
  color:var(--ink-soft); margin:0;
}

/* gold arrow between chapters */
.story-arrow{
  align-self:center; display:flex; flex-direction:column; align-items:center; gap:.18rem;
  opacity:0; transition:opacity 1s var(--ease) .2s;
}
.story-arrow.in{ opacity:1 }
.story-arrow i{
  display:block; width:1px; height:clamp(20px,4vh,30px);
  background:linear-gradient(180deg,rgba(201,162,75,0),rgba(201,162,75,.6));
}
.story-arrow svg{ width:11px; height:9px; display:block }
.story-arrow svg path{ fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }

/* ══════════════════ shared card surface ══════════════════ */
.event-card,.detail-card,.gift-card,.hotel-card,.rsvp-card,.guide-card{
  position:relative;
  background:linear-gradient(168deg, rgba(24,38,72,.62), rgba(9,15,31,.72));
  border:1px solid var(--gold-line);
  border-radius:4px;
  box-shadow:
    0 1px 0 rgba(255,246,220,.07) inset,
    0 30px 60px -40px rgba(0,0,0,.95),
    0 4px 14px -10px rgba(0,0,0,.6);
  backdrop-filter:blur(2px);
}
/* engraved inner keyline */
.event-card::after,.detail-card::after,.gift-card::after,.hotel-card::after,.rsvp-card::after{
  content:""; position:absolute; inset:6px; border-radius:2px;
  border:1px solid var(--gold-line-soft); pointer-events:none;
}
/* corner ticks — stationery detail */
.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:.62 }
.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 }

/* ══════════════════ 5 · ORDER OF THE DAY ══════════════════ */
.event-card{
  width:100%; margin-top:clamp(1rem,3.5vh,1.6rem);
  padding:clamp(1.7rem,6vw,2.6rem) clamp(1.2rem,5vw,2.2rem);
  text-align:left;
}
.ec-head{ display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-bottom:clamp(1.1rem,4vh,1.7rem) }
.ec-mono{
  font-family:var(--script); font-size:clamp(1.5rem,6vw,1.9rem); line-height:1.2;
  padding:.1em .12em .16em;
  background-image:linear-gradient(100deg,#B98F3C,#EFD79E 46%,#C9A24B);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.ec-line{ display:block; width:74%; height:1px; background:linear-gradient(90deg,transparent,var(--gold-line),transparent) }
.ec-date{
  font-family:var(--sans); font-weight:200; margin:0;
  font-size:clamp(.56rem,2.3vw,.63rem);
  letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--ink-mute);
}
.ec-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.ec-item{
  display:grid; grid-template-columns:auto 22px 1fr; align-items:start;
  gap:0 clamp(.5rem,2.5vw,.9rem);
  padding:clamp(.6rem,2.2vh,.85rem) 0;
  opacity:0; transform:translateY(12px);
  transition:opacity 1s var(--ease), transform 1.15s var(--ease);
}
.ec-item.in{ opacity:1; transform:none }
.ec-time{
  font-family:var(--serif); font-weight:400; font-size:clamp(.95rem,3.8vw,1.08rem);
  color:var(--gold-hi); line-height:1.35; letter-spacing:.03em; white-space:nowrap;
  padding-top:.06rem;
}
.ec-node{ position:relative; height:100%; display:flex; justify-content:center }
.ec-node i{
  width:6px; height:6px; margin-top:.52rem; transform:rotate(45deg);
  background:var(--gold); box-shadow:0 0 8px rgba(201,162,75,.55); z-index:2;
}
.ec-node::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(201,162,75,.28),rgba(201,162,75,.28));
}
.ec-item:first-child .ec-node::before{ top:.55rem }
.ec-item:last-child  .ec-node::before{ bottom:calc(100% - .95rem) }
.ec-body h3{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1rem,4vw,1.14rem); line-height:1.3; color:#FBF5E9; letter-spacing:.02em;
}
.ec-body p{
  margin:.16rem 0 0; font-size:clamp(.8rem,3.1vw,.87rem);
  line-height:1.62; color:var(--ink-mute);
}
.ec-foot{ margin-top:clamp(1rem,3.5vh,1.5rem); padding-top:1rem; border-top:1px solid var(--gold-line-soft); text-align:center }
.ec-foot p{
  margin:0; font-family:var(--sans); font-weight:200;
  font-size:clamp(.56rem,2.3vw,.62rem);
  letter-spacing:.22em; text-indent:.22em; text-transform:uppercase; color:var(--ink-mute);
}

/* ══════════════════ 6 · DETAILS ══════════════════ */
.detail-cards{
  width:100%; display:grid; grid-template-columns:1fr;
  gap:clamp(.9rem,3vw,1.2rem); margin-top:clamp(1rem,3.5vh,1.5rem);
}
.detail-card{
  padding:clamp(1.5rem,5.5vw,2rem) clamp(1.2rem,5vw,1.7rem);
  display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center;
  opacity:0; transform:translateY(18px);
  transition:opacity 1.2s var(--ease), transform 1.4s var(--ease);
}
.detail-card.in{ opacity:1; transform:none }
.dc-icon{ width:26px; height:26px; margin-bottom:.2rem }
.dc-icon svg{ width:100%; height:100%; fill:none; stroke:var(--gold); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round }
.dc-label{
  font-family:var(--sans); font-weight:200; margin:0;
  font-size:clamp(.55rem,2.3vw,.62rem);
  letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; color:var(--gold-hi);
}
.dc-venue{
  font-family:var(--serif); font-weight:300; margin:.1rem 0 0;
  font-size:clamp(1.25rem,5.2vw,1.55rem); line-height:1.24; color:#FBF5E9; letter-spacing:.02em;
}
.dc-address{ margin:0; font-size:clamp(.84rem,3.3vw,.92rem); line-height:1.6; color:var(--ink-soft) }
.dc-time{
  font-family:var(--serif); font-style:italic; margin:.3rem 0 0;
  font-size:clamp(.95rem,3.7vw,1.05rem); color:var(--gold-hi);
}
.dc-note{
  font-family:var(--sans); font-weight:200; margin:.35rem 0 0;
  font-size:clamp(.53rem,2.2vw,.59rem);
  letter-spacing:.2em; text-indent:.2em; text-transform:uppercase; color:var(--ink-mute);
}
.dc-dir{
  margin-top:.6rem; font-family:var(--sans); font-weight:200;
  font-size:.58rem; letter-spacing:.26em; text-indent:.26em; text-transform:uppercase;
  color:var(--gold-hi); border-bottom:1px solid var(--gold-line); padding-bottom:.22rem;
}

.map-frame{
  position:relative; width:100%; margin-top:clamp(1rem,3.5vh,1.5rem);
  aspect-ratio:16/11; border-radius:4px; overflow:hidden;
  border:1px solid var(--gold-line);
  box-shadow:0 30px 60px -42px rgba(0,0,0,.95);
}
/* Google's embed only ships a light tile set, so it is inverted into a night
   map. invert + hue-rotate(180) alone leaves the greens and water a muddy
   khaki, so saturation is pulled back and contrast lifted afterwards — that
   is what turns it navy rather than brown. */
.map-frame iframe{
  width:100%; height:100%; border:0;
  filter:invert(.93) hue-rotate(185deg) saturate(.5) brightness(.96) contrast(1.08);
}
/* a navy wash over the top so the map belongs to the palette */
.map-veil{
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:multiply;
  background:linear-gradient(180deg,rgba(20,36,74,.5),rgba(12,22,48,.34) 40%,rgba(20,36,74,.5));
  box-shadow:inset 0 0 70px rgba(4,8,18,.7);
}

/* Gold button.
   The ink is deep navy, not brown-black, and the gold stays in the rich
   champagne band — a paler fill washed the lettering out against it. At
   #0A1020 on #E4C578 this clears 9:1, so it stays legible at this letter-
   spacing and weight, which is where thin uppercase type usually fails. */
.btn-gold{
  position:relative; margin-top:clamp(1.1rem,4vh,1.7rem);
  padding:1.05rem 2.2rem; border-radius:999px;
  font-family:var(--sans); font-weight:400;
  font-size:.66rem; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:#0A1020;
  background:linear-gradient(100deg,#B68A35 0%,#D4AD5E 30%,#E9D093 50%,#D2AC5C 70%,#B68A35 100%);
  background-size:200% 100%;
  box-shadow:0 16px 36px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,246,220,.34);
  transition:background-position .9s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
  overflow:hidden;
}
.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-hi); outline-offset:3px }

.cal-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:238px; min-height:47px }
.cal-btn .cal-ring{
  position:absolute; inset:-3px; width:calc(100% + 6px); height:calc(100% + 6px);
  opacity:0; pointer-events:none; overflow:visible;
}
.cal-btn .cal-ring circle{
  fill:none; stroke:var(--gold-hi); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:296; stroke-dashoffset:296; transform-origin:50% 50%; transform:rotate(-90deg);
}
.cal-btn .cal-tick{
  position:absolute; left:50%; top:50%; width:22px; height:22px;
  transform:translate(-50%,-50%) scale(.7); opacity:0; pointer-events:none;
}
.cal-btn .cal-tick path{
  fill:none; stroke:#0A1020; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26;
}
.cal-btn span{ transition:opacity .4s var(--ease), transform .5s var(--ease) }

.cal-btn.saving .cal-ring{ opacity:1 }
.cal-btn.saving .cal-ring circle{ animation:ringDraw 1s var(--ease) forwards }
@keyframes ringDraw{ to{ stroke-dashoffset:0 } }
.cal-btn.saving span{ opacity:0; transform:translateY(-6px) }
.cal-btn.saved .cal-tick{ opacity:1; transform:translate(-50%,-50%) scale(1) }
.cal-btn.saved .cal-tick path{ animation:tickDraw .55s var(--ease) forwards }
@keyframes tickDraw{ to{ stroke-dashoffset:0 } }
.cal-btn.done span{ opacity:1; transform:none }
.cal-btn.done .cal-tick{ opacity:0; transform:translate(-50%,-50%) scale(.6) }
.cal-btn.done .cal-ring{ opacity:0 }

/* ══════════════════ 7 · DRESS CODE ══════════════════ */
.dress-grid{
  width:100%; display:grid; grid-template-columns:1fr;
  gap:clamp(1.1rem,4vw,1.6rem); margin-top:clamp(1rem,3.5vh,1.5rem);
  align-items:center;
}
.dress-img{
  margin:0; position:relative; border-radius:4px; overflow:hidden;
  border:1px solid var(--gold-line);
  box-shadow:0 30px 60px -42px rgba(0,0,0,.95);
}
.dress-img img{ width:100%; height:auto; display:block }
.dress-copy{ display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center }
.dress-style{
  font-family:var(--serif); font-style:italic; margin:0;
  font-size:clamp(1.05rem,4.2vw,1.2rem); color:var(--gold-hi);
}
.palette{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(.7rem,3vw,1rem); margin-top:.3rem }
.swatch{ display:flex; flex-direction:column; align-items:center; gap:.4rem; width:56px }
.swatch i{
  width:38px; height:38px; border-radius:50%; display:block;
  box-shadow:0 0 0 1px rgba(255,246,220,.22), 0 8px 20px -10px rgba(0,0,0,.9);
}
.swatch span{
  font-family:var(--sans); font-weight:200; font-size:.5rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
  text-align:center; line-height:1.35;
}
.dress-guides{
  width:100%; display:grid; grid-template-columns:1fr;
  gap:clamp(.7rem,2.5vw,1rem); margin-top:clamp(1.2rem,4vh,1.8rem);
}
.guide-card{
  padding:clamp(1.1rem,4.5vw,1.4rem) clamp(1rem,4vw,1.3rem);
  text-align:left; display:flex; flex-direction:column; gap:.35rem;
  opacity:0; transform:translateY(14px);
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
.guide-card.in{ opacity:1; transform:none }
.guide-card h4{
  margin:0; font-family:var(--sans); font-weight:200;
  font-size:.58rem; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--gold-hi);
}
.guide-card p{ margin:0; font-size:clamp(.82rem,3.2vw,.88rem); line-height:1.68; color:var(--ink-soft) }

/* ══════════════════ 8 · GLIMPSE ══════════════════ */
/* A single horizontal rail. Nine photographs cost one screen of vertical
   scrolling instead of three, and the guest can drag back through them. */
.glimpse-stage{ padding-left:0; padding-right:0; min-height:auto }
.glimpse-stage>.inner{ padding:0 clamp(1.4rem,6vw,4rem) }

.glimpse-rail{
  position:relative; z-index:2; width:100%;
  margin-top:clamp(1.4rem,5vh,2.4rem);
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  overscroll-behavior-x:contain;         /* never hand a flick to the page */
}
.glimpse-rail::-webkit-scrollbar{ display:none }
.glimpse-rail.dragging{ cursor:grabbing }
.glimpse-rail.dragging .gl-shot{ pointer-events:none }

.glimpse-track{
  display:flex; align-items:center;
  gap:clamp(.6rem,2vw,1.1rem);
  padding:0 clamp(1.4rem,6vw,4rem);
  width:max-content;
}
.gl-shot{
  position:relative; flex:0 0 auto; overflow:hidden; border-radius:3px;
  height:clamp(230px,42vh,420px);
  background:var(--navy-850);
  box-shadow:0 0 0 1px var(--gold-line-soft), 0 24px 44px -34px rgba(0,0,0,.95);
  opacity:0; transform:translateX(38px);
  transition:opacity 1.1s var(--ease), transform 1.4s var(--ease),
             box-shadow .55s var(--ease);
  border:0; padding:0; margin:0; cursor:pointer;
}
.gl-shot.in{ opacity:1; transform:none }
.gl-shot img{ height:100%; width:auto; display:block; filter:saturate(.96) }
.gl-shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(6,11,24,.12),rgba(6,11,24,0) 36%,rgba(6,11,24,.3));
  transition:opacity .5s var(--ease);
}
.gl-shot:hover{ box-shadow:0 0 0 1px var(--gold-line), 0 26px 50px -30px rgba(0,0,0,.95) }
.gl-shot:hover::after{ opacity:.4 }

/* the rail dissolves into the section at both ends instead of stopping dead */
.rail-fade{
  position:absolute; top:0; bottom:0; width:clamp(28px,7vw,90px);
  pointer-events:none; z-index:3;
}
.rail-fade.left { left:0;  background:linear-gradient(90deg,#070C18,rgba(7,12,24,0)) }
.rail-fade.right{ right:0; background:linear-gradient(270deg,#070C18,rgba(7,12,24,0)) }

.glimpse-hint,.glimpse-note{
  position:relative; z-index:2; text-align:center;
  padding:0 clamp(1.4rem,6vw,4rem);
}
.glimpse-hint{ margin-top:clamp(1rem,3.5vh,1.5rem); color:var(--gold-hi); opacity:.75 }
.glimpse-note{ margin-top:.55rem }

/* ── lightbox ─────────────────────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:rgba(3,6,13,.94);
  backdrop-filter:blur(10px);
  opacity:0; transition:opacity .45s var(--ease);
}
.lightbox.in{ opacity:1 }
.lb-stage{ margin:0; max-width:88vw; max-height:82svh; display:flex }
.lb-stage img{
  max-width:88vw; max-height:82svh; width:auto; height:auto; object-fit:contain;
  border-radius:3px; box-shadow:0 0 0 1px var(--gold-line), 0 40px 90px -40px #000;
  transform:scale(.97); opacity:0;
  transition:transform .6s var(--ease), opacity .5s var(--ease);
}
.lightbox.in .lb-stage img{ transform:none; opacity:1 }
.lb-close{
  position:absolute; top:clamp(.8rem,3vh,1.8rem); right:clamp(.8rem,3vw,1.8rem);
  width:44px; height:44px; border-radius:50%; z-index:2;
  font-size:1.7rem; line-height:1; color:var(--ink);
  border:1px solid var(--gold-line); background:rgba(10,17,34,.7);
}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:48px; border-radius:50%;
  font-size:2rem; line-height:1; color:var(--gold-hi);
  border:1px solid var(--gold-line); background:rgba(10,17,34,.7);
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.lb-nav:hover{ background:rgba(20,32,63,.9); border-color:var(--gold-hi) }
.lb-nav.prev{ left:clamp(.5rem,2.5vw,2rem) }
.lb-nav.next{ right:clamp(.5rem,2.5vw,2rem) }
.lb-count{
  position:absolute; bottom:clamp(1rem,4vh,2.2rem); left:50%; transform:translateX(-50%);
  margin:0; font-family:var(--sans); font-weight:200; font-size:.6rem;
  letter-spacing:.3em; text-indent:.3em; color:var(--ink-mute);
}

/* ══════════════════ 9 · RSVP ══════════════════ */
.rsvp-card{
  width:100%; margin-top:clamp(1rem,3.5vh,1.6rem);
  padding:clamp(1.8rem,6vw,2.4rem) clamp(1.2rem,5vw,1.9rem);
  display:flex; flex-direction:column; gap:clamp(.95rem,3vh,1.2rem); text-align:left;
}
.field{ position:relative }
.field input,.field textarea,.field select{
  width:100%; padding:1.1rem .1rem .45rem; border:0; border-bottom:1px solid var(--gold-line);
  background:transparent; color:var(--ink);
  font-family:var(--serif); font-weight:300; font-size:1rem; 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:#0B1224; color:var(--ink) }
.field-guests::after{
  content:""; position:absolute; right:.3rem; bottom:1rem; 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.05rem; pointer-events:none;
  font-family:var(--sans); font-weight:200; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
  transition:transform .45s var(--ease), font-size .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.05rem) scale(.78); color:var(--gold-hi);
}
.field input:focus,.field textarea:focus,.field select:focus{ border-bottom-color:var(--gold-hi) }
.field.invalid input,.field.invalid textarea{ border-bottom-color:#C86A6A }

.segment{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--gold-line); border-radius:999px; padding:4px; overflow:hidden;
}
.segment .seg{
  position:relative; z-index:2; padding:.72rem .4rem; border-radius:999px;
  font-family:var(--sans); font-weight:200;
  font-size:.56rem; letter-spacing:.2em; text-indent:.2em; text-transform:uppercase;
  color:var(--ink-mute); transition:color .5s var(--ease); text-align:center;
}
.segment .seg.on{ color:#0A1020; font-weight:400 }
.seg-thumb{
  position:absolute; z-index:1; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  border-radius:999px; opacity:0;
  background:linear-gradient(100deg,#B98F3C,#E9D29A 46%,#D6B166);
  box-shadow:0 6px 18px -10px rgba(201,162,75,.9);
  transition:transform .6s var(--ease), opacity .4s var(--ease);
}
.seg-thumb.on{ opacity:1 }
.seg-thumb.right{ transform:translateX(100%) }

.rsvp-card .btn-gold{ margin-top:.3rem; width:100% }
.rsvp-card .micro{ text-align:center }
.rsvp-error{
  margin:0; text-align:center; color:#E39B9B;
  font-family:var(--sans); font-weight:200; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase;
}

.rsvp-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:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--gold-line);
  background:radial-gradient(circle at 40% 34%, rgba(232,204,134,.24), rgba(201,162,75,.05));
  margin-bottom:.5rem;
}
.done-seal svg{ width:24px; height:24px }
.done-seal svg path{
  fill:none; stroke:var(--gold-hi); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26; animation:tickDraw .8s var(--ease) .25s forwards;
}
.rsvp-done .script{ font-size:clamp(2rem,9vw,2.8rem) }

/* ══════════════════ 9b · GUEST PHOTOGRAPHS ══════════════════ */
.upload-card{
  position:relative; width:100%; margin-top:clamp(1rem,3.5vh,1.6rem);
  padding:clamp(1.6rem,5.5vw,2.2rem) clamp(1.2rem,5vw,1.8rem);
  display:flex; flex-direction:column; gap:1rem;
  background:linear-gradient(168deg, rgba(24,38,72,.62), rgba(9,15,31,.72));
  border:1px solid var(--gold-line); border-radius:4px;
  box-shadow:0 1px 0 rgba(255,246,220,.07) inset, 0 30px 60px -40px rgba(0,0,0,.95);
}
.upload-card::after{
  content:""; position:absolute; inset:6px; border-radius:2px;
  border:1px solid var(--gold-line-soft); pointer-events:none;
}
.drop-zone{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:clamp(1.4rem,5vw,2rem) 1rem;
  border:1px dashed rgba(201,162,75,.34); border-radius:3px;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.drop-zone.over{ border-color:var(--gold-hi); background:rgba(201,162,75,.07) }
.dz-icon{ width:30px; height:30px }
.dz-icon svg{ width:100%; height:100%; fill:none; stroke:var(--gold); stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round }
.drop-zone .btn-gold{ margin-top:.2rem }
.dz-hint{
  margin:0; font-family:var(--sans); font-weight:200; font-size:.58rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}
.up-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem }
.up-item{
  display:flex; align-items:center; gap:.75rem; text-align:left;
  padding:.5rem; border:1px solid var(--gold-line-soft); border-radius:3px;
  background:rgba(6,11,24,.4);
}
.up-thumb{
  width:44px; height:44px; flex:0 0 auto; border-radius:2px; object-fit:cover;
  background:var(--navy-800);
}
.up-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem }
.up-name{
  font-size:.85rem; color:var(--ink); margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.up-size{
  margin:0; font-family:var(--sans); font-weight:200; font-size:.52rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
}
.up-bar{ height:2px; border-radius:2px; background:rgba(201,162,75,.16); overflow:hidden }
.up-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#8A6524,#C9A24B 40%,#F3E2B6);
  transition:width .5s var(--ease);
}
.up-drop{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  font-size:1.1rem; line-height:1; color:var(--ink-mute);
  border:1px solid var(--gold-line-soft);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.up-drop:hover{ color:var(--gold-hi); border-color:var(--gold-line) }
.up-item.done .up-drop{ color:var(--gold-hi); border-color:var(--gold-line) }
.up-send{ width:100% }
.up-status{ text-align:center }
.album-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none }

/* ══════════════════ 10 · HOTELS ══════════════════ */
.hotels{
  width:100%; display:grid; grid-template-columns:1fr;
  gap:clamp(.8rem,3vw,1.1rem); margin-top:clamp(1rem,3.5vh,1.6rem);
}
.hotel-card{
  padding:clamp(1.3rem,5vw,1.7rem) clamp(1.1rem,4.5vw,1.5rem);
  text-align:left; display:flex; flex-direction:column; gap:.4rem;
  opacity:0; transform:translateY(16px);
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
.hotel-card.in{ opacity:1; transform:none }
.hc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.7rem }
.hc-name{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.12rem,4.5vw,1.3rem); line-height:1.24; color:#FBF5E9; letter-spacing:.02em;
}
.hc-price{ font-family:var(--sans); font-weight:200; font-size:.68rem; letter-spacing:.14em; color:var(--gold) }
.hc-meta{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.hc-stars{ display:flex; gap:2px }
.hc-stars svg{ width:12px; height:12px }
.hc-stars svg path{ fill:var(--gold-hi) }
.hc-stars svg.off path{ fill:rgba(242,235,221,.16) }
.hc-tag{
  font-family:var(--sans); font-weight:200; font-size:.52rem;
  letter-spacing:.22em; text-indent:.22em; text-transform:uppercase; color:var(--ink-mute);
  padding-left:.6rem; border-left:1px solid var(--gold-line-soft);
}
.hc-text{ margin:.15rem 0 0; font-size:clamp(.82rem,3.2vw,.88rem); line-height:1.68; color:var(--ink-soft) }
.hc-links{ display:flex; gap:1.1rem; margin-top:.5rem; flex-wrap:wrap }
.hc-links a{
  font-family:var(--sans); font-weight:200; font-size:.56rem;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:var(--gold-hi); border-bottom:1px solid var(--gold-line); padding-bottom:.22rem;
  transition:border-color .4s var(--ease);
}
.hc-links a:hover{ border-color:var(--gold-hi) }

/* ══════════════════ 11 · GIFTS ══════════════════ */
.gift-card{
  width:100%; margin-top:clamp(1rem,3.5vh,1.5rem);
  padding:clamp(1.7rem,6vw,2.2rem) clamp(1.2rem,5vw,1.8rem); text-align:left;
}
/* the card unseals rather than appearing — details are private until asked for */
.gift-card.sealed{ opacity:0; transform:translateY(-8px) }
.gift-card.unsealed{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .8s var(--ease);
}
.gift-kicker{
  margin:0 0 1rem; text-align:center;
  font-family:var(--sans); font-weight:200; font-size:.56rem;
  letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; color:var(--gold-hi);
}
.gift-rows{ margin:0; display:flex; flex-direction:column; gap:.1rem }
.gift-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid var(--gold-line-soft);
}
.gift-row:last-child{ border-bottom:0 }
.gift-row dt{
  font-family:var(--sans); font-weight:200; font-size:.55rem;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:var(--ink-mute); flex:0 0 auto;
}
.gift-row dd{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(.92rem,3.6vw,1rem); color:#FBF5E9;
  text-align:right; letter-spacing:.03em; word-break:break-word;
}

/* ══════════════════ 12 · FINALE ══════════════════ */
.finale-scene{
  position:relative; width:100%; min-height:100svh;
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  background:#04070E;
}
.finale-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 42%;
}
.finale-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 76% at 50% 34%, rgba(4,8,16,0) 34%, rgba(4,8,16,.55) 100%),
    linear-gradient(180deg, rgba(4,8,16,.5) 0%, rgba(4,8,16,.1) 26%, rgba(4,8,16,.72) 68%, rgba(4,8,16,.96) 100%);
}
.finale-type{
  position:relative; z-index:2; width:100%; max-width:var(--maxw);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  text-align:center; padding:0 1.4rem clamp(3.4rem,11vh,5.6rem);
}
.fin-sub{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,4.3vw,1.25rem); color:var(--ink-soft);
}
.hash{ color:var(--gold); opacity:.85 }

/* ══════════════════ chrome ══════════════════ */
.progress-rail{
  position:fixed; left:0; right:0; bottom:0; height:2px; z-index:60;
  background:rgba(255,255,255,.045); pointer-events:none;
}
.progress-rail i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#8A6524,#C9A24B 40%,#F3E2B6 70%,#C9A24B);
  box-shadow:0 0 12px rgba(201,162,75,.7);
}

.mini-player{
  position:fixed; left:clamp(.8rem,3vw,1.4rem); bottom:clamp(1.1rem,3.5vh,1.7rem);
  z-index:55; display:flex; align-items:center; gap:.65rem;
  padding:.5rem .95rem .5rem .5rem; border-radius:999px;
  background:linear-gradient(150deg,rgba(20,32,63,.9),rgba(6,11,24,.94));
  border:1px solid var(--gold-line);
  box-shadow:0 16px 36px -20px rgba(0,0,0,.95);
  backdrop-filter:blur(8px);
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.mini-player.in{ opacity:1; transform:none }
.mini-disc{
  position:relative; width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 50% 50%, #12203D 0 22%, #080D1A 22% 100%);
  box-shadow:0 0 0 1px rgba(201,162,75,.35);
  display:grid; place-items:center;
}
.mini-disc.spin{ animation:spin 2.6s linear infinite }
.mini-disc i{
  width:9px; height:9px; border-radius:50%; display:block;
  background:radial-gradient(circle at 38% 32%, #F0DAA4, #C9A24B 60%, #97722E);
}
.mini-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; min-width:0 }
.mini-meta b{
  font-family:var(--serif); font-weight:300; font-size:.78rem; color:#FBF5E9;
  letter-spacing:.02em; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mini-meta em{
  font-family:var(--sans); font-weight:200; font-style:normal; font-size:.45rem;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase; color:var(--gold);
}

/* ══════════════════ desktop tier ══════════════════ */
@media (min-width:900px){
  :root{ --maxw:700px; --maxw-wide:1020px }
  .stage{ min-height:78svh; padding:clamp(5rem,11vh,7.5rem) 2.5rem }

  .dials{ gap:clamp(1rem,2.6vw,1.8rem) }
  .dial-ring{ max-width:150px }
  .dial-num{ font-size:2.5rem }

  .tt-platter{ width:430px }

  .story-list{ gap:clamp(2rem,6vh,3.2rem) }
  .story-photo{ flex:0 0 46%; max-width:46%; aspect-ratio:3/2 }
  .story-text{ font-size:.96rem; line-height:1.76 }
  .story-chapter{ font-size:1.5rem }

  .event-card{ max-width:720px }
  .ec-item{ grid-template-columns:auto 26px 1fr; padding:.95rem 0 }

  .detail-cards{ grid-template-columns:1fr 1fr }
  .map-frame{ aspect-ratio:21/8 }

  .dress-grid{ grid-template-columns:.92fr 1fr; gap:clamp(1.6rem,4vw,2.6rem) }
  .dress-copy{ text-align:left; align-items:flex-start }
  .palette{ justify-content:flex-start }
  .dress-guides{ grid-template-columns:repeat(3,1fr) }

  .gl-shot{ height:clamp(300px,52vh,480px) }

  .rsvp-card{ max-width:620px }
  .hotels{ grid-template-columns:1fr 1fr }
  .gift-card{ max-width:620px }
  .finale-type{ max-width:760px }
  .mini-meta b{ max-width:180px }
}
@media (min-width:1400px){
  :root{ --maxw:780px; --maxw-wide:1120px }
}

/* ══════════════════ LANDSCAPE OPENING ══════════════════
   Wide frames put the couple dead centre with clean navy either side, so the
   type splits into two columns that flank them. Nothing crosses the middle
   band where the faces are. */
@media (min-aspect-ratio: 1/1){
  .hero-type{
    flex-direction:row; align-items:center; justify-content:space-between;
    padding:clamp(1.5rem,6vh,3.4rem) clamp(1.6rem,5vw,4.5rem);
    gap:1rem;
  }
  /* Measured from the film: the couple occupy 30.1%–72.2% of the frame. The
     columns are pinned to the outer padding, so a column may be at most
     (100% − padding − 72.2%) wide before its inner edge crosses them. At the
     widest padding this page uses that lands at ~23%, so 22% clears at every
     desktop width rather than only the one it was eyeballed at. Long lines
     wrap inside the column instead of reaching across. */
  .ht-group{ width:min(22%,340px); gap:.5rem }
  .ht-a{ align-items:flex-start; text-align:left }
  .ht-b{ align-items:flex-end;   text-align:right }

  /* ornaments align to the outer edge rather than centring in the column */
  .ht-a .ht-orn{ margin-left:0 }
  .ht-b .ht-orn{ margin-right:0 }

  .ht-invited{ font-size:clamp(2.4rem,6vw,4rem) }
  .ht-name{ font-size:clamp(1.9rem,4.4vw,3.1rem) }
  .ht-names{ align-items:flex-end }
  .ht-a .ht-eyebrow, .ht-b .ht-eyebrow{ text-indent:0; letter-spacing:.34em }
}

/* landscape phones — short and wide, so tighten before anything clips */
@media (max-height:520px) and (orientation:landscape){
  .hero-type{ padding:1.1rem 1.4rem 1.2rem }
  .ht-invited{ font-size:2.1rem }
  .ht-name{ font-size:1.55rem }
  .ht-orn{ display:none }
  .ht-group{ width:min(24%,240px) }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important }
  .reveal{ opacity:1; transform:none; filter:none }
}