/* ============================================================
   For Divine — 01.08.2026  ·  v2
   Deep midnight ocean + champagne + soft rose.
   Mobile-first. She is opening this on a phone.
   ============================================================ */

:root{
  --ink:   #0B1020;
  --ink-2: #0E1529;
  --sea:   #16233F;
  --gold:  #E8C87E;
  --gold-d:#B99A55;
  --rose:  #E9A9A9;
  --mist:  #C9D2E4;
  --mist-d:#8794AE;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad:   clamp(1.25rem, 5vw, 2.5rem);
  --max:   78rem;
  --ease:  cubic-bezier(.22,.61,.36,1);
  --slow:  cubic-bezier(.16,1,.3,1);
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--mist);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.is-locked{ overflow:hidden; height:100dvh; }
body.is-locked .nav,
body.is-locked .progress{ opacity:0; pointer-events:none; }

img{ display:block; max-width:100%; height:auto; }
em{ font-style:italic; }

::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ─────────────  the grayscale ramp  ─────────────
   app.js writes --g (1 = grey, 0 = full colour) as each photo
   nears the centre of the viewport. Continuous, not a toggle. */

[data-ramp]{
  filter:
    grayscale(var(--g,1))
    contrast(calc(1 + (1 - var(--g,1)) * .06))
    brightness(calc(.86 + (1 - var(--g,1)) * .14));
}

/* ─────────────  scroll progress  ───────────── */

.progress{
  position:fixed; inset:0 0 auto 0; z-index:80;
  height:2px;
  background:rgba(232,200,126,.1);
  transition:opacity .4s;
}
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--gold-d), var(--gold));
  transform-origin:0 50%;
}

/* ─────────────  shared type  ───────────── */

.eyebrow{
  margin:0 0 1rem;
  font-size:clamp(.6rem,2.6vw,.7rem);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-d);
}

.h2{
  margin:0 0 1.5rem;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,9vw,4.5rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:#fff;
}

.lede{
  margin:0 auto 3rem;
  max-width:34rem;
  font-family:var(--serif);
  font-size:clamp(1.1rem,4vw,1.4rem);
  font-style:italic;
  color:var(--mist-d);
}

.section{
  padding:clamp(5rem,16vw,9rem) var(--pad);
  max-width:var(--max);
  margin-inline:auto;
  text-align:center;
  scroll-margin-top:64px;
}

/* ─────────────  reveals  ───────────── */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:130ms; }
.reveal[data-d="2"]{ transition-delay:260ms; }
.reveal[data-d="3"]{ transition-delay:390ms; }
.reveal[data-d="4"]{ transition-delay:520ms; }

/* line masks — app.js wraps each rendered line of [data-lines] */
.lmask{ display:block; overflow:hidden; }
.lmask > i{
  display:block;
  font-style:inherit;
  transform:translateY(110%);
  transition:transform 1s var(--slow);
}
.lmask.is-visible > i{ transform:none; }

/* ─────────────  NAV  ───────────── */

/* No bar, no blur, no border. `difference` inverts the nav against
   whatever is behind it, so it stays legible over photo and over ink. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 1.4rem;
  mix-blend-mode:difference;
  transition:opacity .5s var(--ease);
}
.nav__mono{
  font-family:var(--serif);
  font-size:1.3rem; letter-spacing:.12em;
  color:#fff; text-decoration:none;
}

.nav__links{ display:none; gap:2.6rem; }
.nav__links a{
  position:relative;
  font-family:var(--sans);
  font-size:.72rem; font-weight:300;
  letter-spacing:.22em; text-transform:uppercase;
  color:#fff; opacity:.75; text-decoration:none;
  transition:opacity .3s;
}
.nav__links a::after{
  content:""; position:absolute; bottom:-6px; left:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

.nav__menu{
  padding:.65rem 1.7rem;
  background:none;
  border:1px solid rgba(255,255,255,.45); border-radius:999px;
  color:#fff;
  font-family:var(--sans); font-size:.66rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  cursor:pointer;
  transition:background .4s var(--ease), color .4s, border-color .4s;
}
.nav__menu:hover{ background:#fff; color:#000; border-color:#fff; }

@media (min-width:900px){
  .nav{ padding:1.8rem 3rem; }
  .nav__links{ display:flex; }
  .nav__menu{ display:none; }
}

/* full-screen overlay menu */
.menu{
  position:fixed; inset:0; z-index:8800;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:rgba(5,7,14,.93);
  backdrop-filter:blur(22px) saturate(.9);
  -webkit-backdrop-filter:blur(22px) saturate(.9);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .55s var(--ease), visibility 0s linear .55s;
}
.menu.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .55s var(--ease);
}
.menu__close{
  position:absolute; top:1.45rem; right:1.4rem;
  padding:.6rem;
  background:none; border:0;
  color:var(--mist-d);
  font-family:var(--sans); font-size:.66rem; font-weight:300;
  letter-spacing:.3em; text-transform:uppercase;
  cursor:pointer;
}
.menu__links{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.6rem,4.5vh,2.4rem);
  text-align:center;
}
.menu__links a{
  font-family:var(--serif);
  font-size:clamp(1.9rem,8vw,2.9rem);
  letter-spacing:.05em;
  color:var(--mist); text-decoration:none;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu__links a:hover{ color:var(--rose); }
.menu.is-open .menu__links a{ opacity:1; transform:none; }
.menu.is-open .menu__links a:nth-child(1){ transition-delay:.10s; }
.menu.is-open .menu__links a:nth-child(2){ transition-delay:.16s; }
.menu.is-open .menu__links a:nth-child(3){ transition-delay:.22s; }
.menu.is-open .menu__links a:nth-child(4){ transition-delay:.28s; }
.menu.is-open .menu__links a:nth-child(5){ transition-delay:.34s; }
.menu.is-open .menu__links a:nth-child(6){ transition-delay:.40s; }

body.menu-open{ overflow:hidden; }

/* ─────────────  1 · HERO  ─────────────
   Contained portrait. She is never cropped. */

.hero{
  position:relative;
  display:grid; place-items:center;
  min-height:100svh;
  padding:0 4vw;
  overflow:hidden;
  text-align:center;
}

/* giant outlined ∞ — she wears an infinity necklace in p6 */
.hero__glyph{
  position:absolute; top:46%; left:50%;
  z-index:1;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  /* must be wider than the photo card or it just hides behind it */
  font-size:clamp(30rem,150vw,60rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(233,169,169,.42);
  opacity:0;
  transition:opacity 1.6s var(--ease) .5s;
  pointer-events:none;
  user-select:none;
}
.is-ready .hero__glyph{ opacity:1; }

.hero__media{
  position:relative; z-index:2;
  width:min(74vw,300px);
}
.hero__mask{
  aspect-ratio:437/509;           /* hero.jpg is 874x1018 — exact, so zero crop */
  overflow:hidden;
  clip-path:inset(100% 0 0);
  transition:clip-path 1.5s var(--slow) .25s;
  will-change:clip-path;
}
.is-ready .hero__mask{ clip-path:inset(0 0 0); }
.hero__mask img{ width:100%; height:100%; object-fit:cover; }

.hero__title{
  position:absolute; inset:0; z-index:3;
  margin:0;
  font-weight:400;
  pointer-events:none;
}
.hero__line{
  position:absolute;
  display:block;
  overflow:hidden;
  font-family:var(--serif);
  font-size:clamp(3.2rem,17vw,9rem);
  line-height:1;
  letter-spacing:.02em;
  color:#fff;
  white-space:nowrap;
  text-shadow:0 2px 30px rgba(11,16,32,.65);
}
.hero__line > span{
  display:block;
  transform:translateY(110%);
  transition:transform 1.2s var(--slow) .55s;
}
.is-ready .hero__line > span{ transform:none; }

/* The type overlaps the photo on purpose — but it must frame her face,
   never sit across her eyes. "For" above, "Divine" below the chin. */
.hero__line--1{ top:12vh; left:5vw; }
.hero__line--2{ top:57vh; right:5vw; color:var(--gold); }

.hero__edge{
  position:absolute; top:50%; z-index:4;
  font-family:var(--sans);
  font-size:.6rem; font-weight:300;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--mist-d);
  writing-mode:vertical-rl;
  opacity:0;
  transition:opacity 1s var(--ease) 1s;
}
.is-ready .hero__edge{ opacity:1; }
.hero__edge--l{ left:1.4vw;  transform:translateY(-50%) rotate(180deg); }
.hero__edge--r{ right:1.4vw; transform:translateY(-50%); color:var(--rose); }

.hero__meta{
  position:absolute; bottom:calc(4.5rem + env(safe-area-inset-bottom)); left:7vw; right:7vw;
  z-index:4;
  display:flex; justify-content:space-between; align-items:baseline;
  pointer-events:none;
}
.hero__meta-item{
  font-family:var(--sans);
  font-size:.6rem; font-weight:300;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--mist-d);
}

.hero__foot{
  position:absolute; bottom:0; left:0; right:0; z-index:5;
  padding:0 var(--pad) calc(7.5rem + env(safe-area-inset-bottom));
  display:none;
}
.hero__sub{
  margin:0 auto 1.5rem;
  max-width:26rem;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,4vw,1.2rem); line-height:1.55;
  color:#EEF2FA;
  text-shadow:0 1px 3px rgba(11,16,32,.9), 0 0 26px rgba(11,16,32,.95);
}
.hero__hint{
  margin:1rem 0 0;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mist-d);
  text-shadow:0 1px 3px rgba(11,16,32,.9);
}

/* The gate lives in the hero only until it's pressed. */
.begin{
  position:relative; display:inline-block;
  padding:.95rem 3rem;
  background:transparent;
  border:1px solid var(--gold); border-radius:999px;
  color:var(--gold);
  font-family:var(--sans); font-size:.72rem; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  cursor:pointer; overflow:hidden;
  transition:color .45s var(--ease);
}
.begin::before{
  content:""; position:absolute; inset:0;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.begin:hover::before{ transform:translateY(0); }
.begin:hover{ color:var(--ink); }
.begin__label{ position:relative; z-index:1; }
.begin::after{
  content:""; position:absolute; inset:-1px; border-radius:999px;
  border:1px solid var(--gold);
  animation:pulse 2.8s ease-out infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(1.22); opacity:0; }
  100%{ opacity:0; }
}

/* Before Begin: show the gate, hide the scroll cue. After: swap. */
body.is-locked .hero__foot{ display:block; }
body.is-locked .hero__meta{ opacity:0; }
body.is-locked .hero__cue{ display:none; }

.hero__cue{
  position:absolute; bottom:1.8rem; left:50%; z-index:4;
  translate:-50% 0;
  width:1px; height:44px;
  background:linear-gradient(var(--gold), transparent);
  opacity:.5;
}
.hero__cue span{
  position:absolute; top:0; left:0; width:1px; height:14px; background:var(--gold);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{ top:0; opacity:0; } 30%{ opacity:1; } 100%{ top:30px; opacity:0; } }

@media (min-width:900px){
  .hero__media{ width:min(38vw,440px); }
  .hero__line--1{ top:16vh; left:9vw; }
  .hero__line--2{ top:58vh; right:9vw; }
  .hero__edge{ font-size:.66rem; }
  .hero__glyph{ font-size:clamp(24rem,52vw,40rem); }
}

/* ─────────────  2 · COUNTER  ───────────── */

.days{ padding-top:clamp(6rem,18vw,10rem); }

/* No card, no border. Big display numerals, hairline-tracked labels,
   italic separators — the numbers carry it. */
.countdown{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:baseline;
  gap:clamp(1rem,3.4vw,3.2rem);
  margin:clamp(2.5rem,7vw,4rem) 0 0;
}
.countdown__unit{ text-align:center; }

.countdown__num{
  display:block;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.8rem,13vw,6.6rem); line-height:1;
  color:var(--rose);
  font-variant-numeric:tabular-nums;
}
.countdown__label{
  display:block; margin-top:.9rem;
  font-family:var(--sans); font-size:.6rem; font-weight:300;
  letter-spacing:.4em; text-transform:uppercase;
  color:var(--mist-d);
}
.countdown__sep{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.6rem,4vw,3rem);
  color:rgba(233,169,169,.4);
}
/* the day count is the headline number — let it lead */
.countdown__unit:first-child .countdown__num{ color:var(--gold); }

.days__note{
  margin:clamp(2.5rem,7vw,4rem) 0 0;
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  color:var(--rose);
}

/* ─────────────  3 · LETTER  ───────────── */

/* Phone: the photo pins to the top and the beats scroll underneath it.
   Desktop (below): two columns, photo sticky beside the text. */
.story{
  position:relative;
  display:block;
  background:linear-gradient(180deg, transparent, var(--ink-2) 12%, var(--ink-2) 88%, transparent);
  scroll-margin-top:64px;
}

.story__sticky{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:flex-start; justify-content:center;
  height:46vh;
  padding:9vh 0 0;
  background:linear-gradient(var(--ink-2) 82%, rgba(14,21,41,0));
}

.story__media{
  position:relative;
  width:auto; height:33vh;
  aspect-ratio:3/4;
  overflow:hidden;
}
.story__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0; transform:scale(1.08);
  transition:opacity 1.1s var(--ease), transform 1.4s var(--ease);
}
.story__img.is-active{ opacity:1; transform:scale(1); }

/* the big outlined numeral that changes with the beat */
.story__num{
  position:absolute; bottom:5vh; right:9vw;
  z-index:6;
  font-family:var(--serif);
  font-size:3.4rem; line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(232,200,126,.9);
  text-shadow:0 2px 14px rgba(11,16,32,.8);
  pointer-events:none;
}

.story__beats{ padding:2vh var(--pad) 14vh; }
.story__header{ max-width:30ch; margin:0 auto 6vh; text-align:center; }
.story__heading{
  margin:0;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,9vw,4.5rem); line-height:1.05;
  color:#fff;
}

.story__beat{
  max-width:44ch;
  margin-inline:auto;
  padding:9vh 0;
}
.story__beat-num{
  font-family:var(--serif); font-style:italic; font-size:1.5rem;
  color:var(--rose);
}
.story__beat h3{
  margin:1rem 0 1.6rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem,7vw,2.9rem); line-height:1.15;
  letter-spacing:.03em;
  color:#fff;
}
.story__beat p{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.15rem,4.4vw,1.32rem); line-height:1.8;
  color:#D8E0EE;
}
.story__beat em{ color:var(--rose); font-style:italic; }

.sign{
  max-width:44ch; margin:0 auto; padding-top:2rem;
  text-align:right;
  font-family:var(--serif); font-style:italic; font-size:1.25rem;
  color:var(--gold);
}

@media (min-width:900px){
  .story{ display:grid; grid-template-columns:46% 54%; }

  .story__sticky{
    align-items:center;
    height:100svh;
    padding:0;
    background:none;
  }
  .story__media{ width:min(32vw,420px); height:auto; }

  .story__num{
    bottom:12vh; right:auto;
    left:calc(50% - min(16vw,210px) - 2.2rem);
    font-size:clamp(4rem,7vw,6.4rem);
  }

  .story__beats{ padding:22vh 8vw 26vh 3vw; }
  .story__header{ margin:0 0 16vh; text-align:left; }
  .story__beat{ margin-inline:0; padding:16vh 0; }
  .sign{ margin-inline:0; text-align:left; }
}

/* ─────────────  4 · ACT I — asymmetric editorial grid  ───────────── */

.act__head{ margin-bottom:clamp(2rem,7vw,4rem); }

.gallery{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(.8rem,2.5vw,2rem);
  text-align:left;
}

.gitem{ margin:0; }

.gitem__mask{
  display:block; width:100%; padding:0;
  aspect-ratio:3/4;                 /* p2–p5 are all 810x1080 */
  overflow:hidden;
  background:none; border:0; cursor:zoom-in;
}
.gitem__mask img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .5s linear;
  will-change:transform;
}
.gitem__mask:hover img{ transform:scale(1.07); }

.gitem figcaption{
  margin-top:1.2rem;
  font-family:var(--sans);
  font-size:.62rem; font-weight:300;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--mist-d);
  transition:color .4s, letter-spacing .6s var(--ease);
}
.gitem figcaption::before{ content:"\2726"; margin-right:.7rem; font-size:.55rem; color:var(--rose); }
.gitem:hover figcaption{ color:var(--rose); letter-spacing:.32em; }

/* phone: single column, but alternating insets so it still reads asymmetric */
.gitem--a{ grid-column:1/12; }
.gitem--b{ grid-column:2/13; margin-top:9vh; }
.gitem--c{ grid-column:1/11; margin-top:7vh; }
.gitem--d{ grid-column:3/13; margin-top:8vh; }

@media (min-width:760px){
  .gitem--a{ grid-column:1/7;  margin-top:0; }
  .gitem--b{ grid-column:8/13; margin-top:16vh; }
  .gitem--c{ grid-column:2/8;  margin-top:6vh; }
  .gitem--d{ grid-column:7/13; margin-top:12vh; }
}

/* ─────────────  5 · ACT II — the rail  ─────────────
   Touch (default): native horizontal swipe with snap.
   Desktop ≥900px: pinned; vertical scroll drives translateX. */

.railsec{
  position:relative;
  padding:clamp(4rem,12vw,7rem) 0;
  background:var(--ink-2);
  border-block:1px solid rgba(232,200,126,.12);
  scroll-margin-top:64px;
}
.railsec__pin{ position:relative; }

.rail__head{ padding:0 var(--pad) 2rem; text-align:center; }
.rail__h{
  margin:0;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,8vw,3.6rem); line-height:1;
  color:#fff;
}

.rail{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }

.rail__track{
  display:flex;
  align-items:center;
  gap:clamp(1rem,4vw,2.5rem);
  padding:0 max(var(--pad), 12vw);
  width:max-content;
  min-height:74svh;
}

.ritem{ flex-shrink:0; margin:0; scroll-snap-align:center; }

.ritem__wrap{ position:relative; overflow:hidden; }
.ritem__wrap img{
  /* over-wide so it can drift horizontally without ever showing an edge */
  width:116%; height:100%; margin-left:-8%;
  object-fit:cover;
  transition:filter .5s linear;
  will-change:transform;
}

.ritem--tall .ritem__wrap{ aspect-ratio:3/4; height:56svh; }
.ritem--mid  .ritem__wrap{ aspect-ratio:3/4; height:44svh; }
.ritem--low  .ritem__wrap{ aspect-ratio:4/5; height:38svh; }

.ritem--mid{ align-self:flex-start; margin-top:8svh; }
.ritem--low{ align-self:flex-end;   margin-bottom:9svh; }

.ritem figcaption{
  margin-top:1rem;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mist-d);
}

.rail__foot{
  display:flex; align-items:center; gap:1rem;
  padding:2rem var(--pad) 0;
  max-width:34rem; margin-inline:auto;
}
.rail__bar{ flex:1; height:1px; background:rgba(232,200,126,.18); }
.rail__bar i{
  display:block; height:100%; width:12%;
  background:var(--gold);
  transition:width .15s linear;
}
.rail__hint{
  margin:0;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-d);
  white-space:nowrap;
}

@media (min-width:900px){
  .ritem--tall .ritem__wrap{ height:68svh; }
  .ritem--mid  .ritem__wrap{ height:52svh; }
  .ritem--low  .ritem__wrap{ height:44svh; }
  .ritem--mid{ margin-top:14svh; }
  .ritem--low{ margin-bottom:16svh; }
}

/* Pinned mode — only switched on by app.js on a fine pointer.
   .railsec gets an inline height; the pin sticks and the track translates. */
.railsec.is-pinned{ padding:0; }
.railsec.is-pinned .railsec__pin{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.railsec.is-pinned .rail{
  overflow:hidden;
  scroll-snap-type:none;
}
.railsec.is-pinned .rail__track{
  will-change:transform;
  padding-inline:12vw;
}
.railsec.is-pinned .rail__hint{ display:none; }

/* ─────────────  6 · NAMES  ───────────── */

/* An editorial list, not boxes. Each name is a row with a hairline. */
.names__head{ margin-bottom:clamp(2.5rem,8vw,4.5rem); }

.namelist{
  list-style:none;
  margin:0 auto; padding:0;
  max-width:52rem;
  text-align:left;
}

.nrow{
  display:grid;
  gap:.45rem;
  padding:clamp(1.6rem,5vw,2.4rem) 0;
  border-top:1px solid rgba(232,200,126,.16);
  transition:padding-left .5s var(--ease);
}
.nrow:last-child{ border-bottom:1px solid rgba(232,200,126,.16); }
.nrow:hover{ padding-left:.9rem; }

.nrow__label{
  font-family:var(--sans);
  font-size:.58rem; font-weight:300;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-d);
}
.nrow__name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,11vw,3.4rem); line-height:1.02;
  color:#fff;
  transition:color .4s;
}
.nrow:hover .nrow__name{ color:var(--rose); }

.nrow__gloss{
  display:block; margin-top:.5rem;
  font-family:var(--sans);
  font-size:.58rem; font-weight:300;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-d);
}
.nrow__note{
  font-size:.92rem; line-height:1.65;
  color:var(--mist-d);
  max-width:34ch;
}

/* the one that leads */
.nrow--lead{ border-top:0; }
.nrow--lead .nrow__name{
  font-size:clamp(2.6rem,13vw,5rem);
  color:var(--rose);
}
.nrow--lead .nrow__note{ color:var(--mist); }

@media (min-width:760px){
  .nrow{
    grid-template-columns:1fr auto;
    align-items:baseline;
    gap:2rem;
  }
  .nrow__label{ grid-column:1/-1; }
  .nrow__note{ text-align:right; }
}

/* ─────────────  7 · FINALE — uncropped  ───────────── */

.finale{
  position:relative;
  padding:clamp(5rem,14vw,8rem) var(--pad) clamp(4rem,10vw,6rem);
  overflow:hidden;
  text-align:center;
}

/* a blurred, desaturated copy of the same photo fills the section
   so the real image can stay fully contained and uncropped */
.finale__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.15);
  filter:blur(28px) saturate(.8) grayscale(1);
  opacity:.5;
}
.finale__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(11,16,32,.82) 22%, rgba(11,16,32,.86) 74%, var(--ink) 100%);
}

/* a giant outlined "Us" behind the plate — the hero's ∞, bookended */
.finale__glyph{
  position:absolute; top:44%; left:50%; z-index:1;
  transform:translate(-50%,-50%);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(16rem,54vw,30rem); line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(232,200,126,.42);
  pointer-events:none; user-select:none;
}

.finale__inner{
  position:relative; z-index:2;
  width:100%; max-width:70rem; min-width:0;
  margin-inline:auto;
  display:grid;
  gap:clamp(2.5rem,8vw,4rem);
  text-align:left;
}

.finale__fig{ margin:0; }
.finale__btn{
  display:block; width:100%; padding:0;
  background:none; border:0; cursor:zoom-in;
}
.finale__btn img{
  width:auto;
  max-width:min(82vw,24rem);
  max-height:64svh;
  border-radius:2px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transition:filter .5s linear;
}

/* museum placard under the photo */
.plate{
  display:flex; align-items:flex-start; gap:.9rem;
  max-width:min(82vw,24rem);
  margin-top:1.2rem;
  padding-top:1rem;
  border-top:1px solid rgba(232,200,126,.28);
}
.plate__no{
  flex-shrink:0;
  font-family:var(--sans); font-size:.58rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-d);
  padding-top:.35rem;
}
.plate__txt{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,4vw,1.15rem); line-height:1.5;
  color:#fff;
}

.finale__words{ align-self:center; max-width:34rem; }

.finale__label{
  margin:0 0 1.4rem;
  font-family:var(--sans); font-size:.58rem; font-weight:300;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-d);
}
.finale__line{
  margin:0 0 1.5rem;
  font-size:1rem; line-height:1.8;
  color:var(--mist);
}
.finale__line--last{ margin-bottom:2.6rem; }
.finale__line em{ color:var(--rose); font-style:italic; }
.finale__hb{
  margin:0 0 1.6rem;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,9vw,3.6rem); line-height:1.1;
  color:#fff;
}
.finale__hb span{ display:block; }
.finale__hb span:last-child{ color:var(--gold); font-style:italic; }

.finale__sign{
  margin:0;
  font-family:var(--serif); font-style:italic;
  font-size:1.15rem;
  color:var(--rose);
}

@media (min-width:900px){
  .finale__inner{
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:clamp(3rem,7vw,6rem);
  }
  /* anchor it over the photo/gutter — centred, it cuts straight
     through the paragraphs and makes them hard to read */
  .finale__glyph{
    left:30%;
    font-size:clamp(20rem,34vw,30rem);
    -webkit-text-stroke-color:rgba(232,200,126,.26);
  }
}

/* ─────────────  FOOTER  ───────────── */

.foot{
  padding:3.5rem var(--pad) 5.5rem;
  text-align:center;
  border-top:1px solid rgba(232,200,126,.12);
}
.foot__made{ margin:0 0 .5rem; font-size:.85rem; color:var(--mist); }
.foot__made strong{ color:var(--gold); font-weight:500; }
.foot__meta{ margin:0; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mist-d); }

/* ─────────────  AUDIO PILL  ───────────── */

.pill{
  position:fixed; z-index:70;
  right:max(1rem, env(safe-area-inset-right));
  bottom:max(1rem, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.55rem;
  padding:.6rem 1rem;
  background:rgba(11,16,32,.85);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(232,200,126,.28); border-radius:999px;
  color:var(--mist);
  font-family:var(--sans); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .3s, color .3s;
}
.pill:hover{ border-color:var(--gold); color:var(--gold); }
.pill[hidden]{ display:none; }

.pill__eq{ display:flex; align-items:flex-end; gap:2px; height:11px; }
.pill__eq i{ width:2px; height:3px; background:var(--gold-d); transition:background .3s; }
.pill[aria-pressed="true"] .pill__eq i{ background:var(--gold); animation:eq .9s ease-in-out infinite; }
.pill[aria-pressed="true"] .pill__eq i:nth-child(2){ animation-delay:.18s; }
.pill[aria-pressed="true"] .pill__eq i:nth-child(3){ animation-delay:.36s; }
@keyframes eq{ 0%,100%{ height:3px; } 50%{ height:11px; } }

/* ─────────────  LIGHTBOX  ───────────── */

.lb{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:clamp(1rem,5vw,3rem);
  background:rgba(6,9,19,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:fade .3s var(--ease);
  cursor:zoom-out;
}
.lb[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

.lb__img{ max-width:100%; max-height:88svh; width:auto; border-radius:3px; box-shadow:0 30px 90px rgba(0,0,0,.6); }
.lb__x{
  position:absolute;
  top:max(.9rem, env(safe-area-inset-top));
  right:max(.9rem, env(safe-area-inset-right));
  width:44px; height:44px;
  background:none; border:0; color:var(--mist);
  font-size:2rem; line-height:1; cursor:pointer;
  transition:color .3s;
}
.lb__x:hover{ color:var(--gold); }

/* ─────────────  reduced motion  ───────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .reveal{ transform:none !important; transition:opacity .4s linear !important; transition-delay:0ms !important; }
  .lmask > i{ transform:none !important; }
  .hero__mask{ clip-path:none !important; }
  .hero__glyph, .hero__edge{ opacity:1 !important; }
  .hero__cue{ display:none; }

  /* colour immediately, no ramp */
  [data-ramp]{ filter:contrast(1.06) brightness(1) !important; }

  /* never pin */
  .railsec.is-pinned{ padding:clamp(4rem,12vw,7rem) 0; height:auto !important; }
  .railsec.is-pinned .railsec__pin{ position:static; height:auto; overflow:visible; }
  .railsec.is-pinned .rail{ overflow-x:auto; }
  .railsec.is-pinned .rail__track{ transform:none !important; }
  .ritem__wrap img{ transform:none !important; }
}