/* ══════════════════════════════════════════════════════════════
   AURVM · Hélios Pavé Squelette
   Palette sampled directly from the film frames:
   backdrop #E2E2E2 · gold ramp #90673B → #E5CC9E
   ══════════════════════════════════════════════════════════════ */

:root{
  /* surfaces — identical to the frame backdrop */
  --bg:#e2e2e2;
  --bg-lift:#e8e8e8;
  --bg-sink:#d7d7d7;
  --bg-deep:#cecece;

  /* ink — neutral to match a neutral backdrop */
  --ink:#131313;          /* 14.5:1 on --bg */
  --ink-2:#4a4a4a;        /* 6.8:1  */
  --ink-3:#5f5f5f;        /* 4.9:1  */
  --line:rgba(19,19,19,.13);
  --line-2:rgba(19,19,19,.24);
  --line-3:rgba(19,19,19,.055);

  /* gold ramp */
  --gold:#7a5526;         /* 5.1:1 on --bg — safe for text */
  --gold-mid:#8a6234;
  --gold-warm:#b29062;
  --gold-lite:#c9ae86;
  --gold-hi:#e5cc9e;

  /* ink panel */
  --panel:#0e0e0e;
  --panel-2:#161616;
  --cream:#edebe6;
  --cream-2:#a8a49c;

  /* type */
  --serif:'Cormorant Garamond',ui-serif,Georgia,serif;
  --sans:'Jost',ui-sans-serif,system-ui,'Helvetica Neue',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  /* rhythm */
  --pad:clamp(20px,5vw,84px);
  --max:1520px;
  --sec:clamp(96px,13vh,190px);
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.7,0,.3,1);
}

/* ─────────── reset ─────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:
    radial-gradient(120% 90% at 50% 12%,#e9e9e9 0%,var(--bg) 46%,var(--bg-sink) 100%)
    fixed,var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.62;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,canvas,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold-mid);color:#fff}
:focus-visible{outline:1.5px solid var(--gold-mid);outline-offset:3px}

/* ─────────── type ─────────── */
.display{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.35rem,4.6vw,5.1rem);
  line-height:.98;letter-spacing:-.022em;
  text-wrap:balance;
}
.display--md{font-size:clamp(2rem,3.5vw,3.9rem)}
.display--lg{font-size:clamp(2.6rem,5.2vw,5.8rem)}
.display em{font-style:italic;color:var(--gold-mid)}
.lede{
  font-size:clamp(1rem,.42vw + .92rem,1.16rem);
  line-height:1.68;color:var(--ink-2);max-width:46ch;
}
.fineprint{font-family:var(--mono);font-size:.66rem;font-weight:300;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:.66rem;font-weight:300;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  margin-bottom:1.5em;
}
.eyebrow i{
  font-style:normal;font-size:.6rem;letter-spacing:.1em;color:var(--ink-3);
  padding-right:.7em;border-right:1px solid var(--line-2);
}
.eyebrow--center{justify-content:center}
.eyebrow--ink{color:var(--gold-hi)}
.eyebrow--ink i{color:var(--cream-2);border-color:rgba(237,235,230,.22)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sec{position:relative;padding-block:var(--sec)}
.sec__head{max-width:60ch;margin-bottom:clamp(48px,7vh,96px)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__note{margin-top:1.4em;font-size:.94rem;color:var(--ink-3);max-width:44ch}
.sec__head--center .sec__note{margin-inline:auto}

/* ─────────── buttons ─────────── */
.btn{
  --bc:var(--line-2);
  position:relative;display:inline-flex;align-items:center;gap:.85em;
  padding:.95em 1.6em;border:1px solid var(--bc);border-radius:999px;
  font-family:var(--mono);font-size:.7rem;font-weight:300;
  letter-spacing:.2em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn svg{width:14px;height:14px;flex:none;transition:transform .55s var(--ease)}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--ink);transform:translateY(101%);
  transition:transform .6s var(--ease);
}
.btn:hover{color:var(--bg);border-color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn:hover svg{transform:translateX(4px)}
.btn--solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--solid::before{background:var(--gold-mid)}
.btn--solid:hover{color:#fff;border-color:var(--gold-mid)}
.btn--gold{background:var(--gold-hi);color:#1a1206;border-color:var(--gold-hi)}
.btn--gold::before{background:#fff}
.btn--gold:hover{color:#120c02;border-color:#fff}
.btn--line{padding-inline:0;border:0;border-radius:0;border-bottom:1px solid var(--line-2);padding-bottom:.7em;margin-top:2.4em}
.btn--line::before{display:none}
.btn--line:hover{color:var(--gold);border-color:var(--gold)}
/* the document heading lives in act I, which is pure motion — so it is
   announced to assistive tech and search, and drawn nowhere */
.u-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
/* ─────────── grain + cursor ─────────── */
.grain{
  position:fixed;inset:-120px;z-index:9000;pointer-events:none;
  opacity:.036;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-14px,8px)}40%{transform:translate(9px,-12px)}
  60%{transform:translate(-7px,-9px)}80%{transform:translate(12px,6px)}100%{transform:translate(0,0)}
}
.cursor{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;mix-blend-mode:difference;opacity:0}
.cursor__dot{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#fff}
.cursor__ring{
  position:absolute;width:38px;height:38px;margin:-19px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),border-color .4s;
}
.cursor.is-hot .cursor__ring{width:74px;height:74px;margin:-37px;border-color:rgba(255,255,255,.85)}
.cursor__label{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.7);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;white-space:nowrap;opacity:0;transition:opacity .35s,transform .45s var(--ease);
}
.cursor.is-label .cursor__label{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ─────────── preloader ───────────
   Every entrance here is CSS, on purpose: the loader is the first thing painted
   and the animation libraries arrive over a CDN some milliseconds later. If the
   choreography were scripted, a slow CDN would show an empty plate. JS only
   drives the numbers (meter, arc, count) and the exit.
   `.loader.is-out` hands each element back to inline styles for that exit.

   Layer order matters and is set explicitly: the curtain panels are the opaque
   plate at the bottom (0), the wash paints its gradient over them (1), the
   wordmark and dial sit on top (2). The loader itself is transparent — if it
   carried a background, wiping the panels away would reveal that background
   instead of the page, and the exit would be invisible. */
.loader{position:fixed;inset:0;z-index:9800;display:grid;place-items:center;background:transparent;overflow:hidden}
.loader.is-out *,.loader.is-out *::before,.loader.is-out *::after{animation:none!important}
.loader__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:1;
  background:
    radial-gradient(58% 46% at 50% 44%,rgba(229,204,158,.22),rgba(229,204,158,0) 68%),
    radial-gradient(120% 90% at 50% 8%,#ececec,var(--bg) 52%,var(--bg-sink) 100%);
  /* two animations, disjoint properties — the bloom owns opacity, the breath
     owns transform, so neither overwrites the other */
  animation:washIn 1.5s var(--ease) backwards,washBreathe 7s 1.5s var(--ease-io) infinite;
}
@keyframes washIn{from{opacity:0}}
@keyframes washBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
/* a wide, slow specular pass — light moving across a polished plate */
.loader__wash::after{
  content:'';position:absolute;inset:-24%;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 60%);
  animation:plateSweep 6.8s 1.1s var(--ease-io) infinite;
}
@keyframes plateSweep{0%{transform:translateX(-64%)}54%,100%{transform:translateX(64%)}}
.loader__inner{position:relative;z-index:2;text-align:center;padding-inline:24px}

/* chronograph dial */
.loader__dial{
  position:relative;width:clamp(96px,17vw,132px);aspect-ratio:1;margin:0 auto 2.1em;
  opacity:1;transform:none;
  animation:dialIn 1.6s .12s var(--ease) backwards;
}
@keyframes dialIn{from{opacity:0;transform:scale(.9) translateY(12px)}}
.loader__dial > *{position:absolute;inset:0}
.dial__ticks{
  border-radius:50%;
  background:repeating-conic-gradient(from -.3deg,var(--line-2) 0 .6deg,transparent .6deg 6deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  opacity:.55;
  animation:ticksIn 2.4s .3s var(--ease) backwards;
}
@keyframes ticksIn{from{opacity:0;transform:rotate(-26deg) scale(1.14)}}
.dial__svg{width:100%;height:100%;overflow:visible}
.dial__track{stroke:var(--line-3);stroke-width:1.4}
.dial__arc{
  stroke:var(--gold-mid);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:339.292;stroke-dashoffset:339.292;
  filter:drop-shadow(0 0 3px rgba(178,144,98,.5));
}
.dial__hand{
  /* the sweep runs whether or not bytes are arriving — a movement never stops */
  inset:12% auto auto 50%;width:1px;height:38%;
  background:linear-gradient(180deg,var(--gold-mid),rgba(122,85,38,.15));
  transform-origin:50% 100%;
  animation:dialSweep 3.6s linear infinite;
}
.dial__pin{
  inset:calc(50% - 2.5px) auto auto calc(50% - 2.5px);
  width:5px;height:5px;border-radius:50%;background:var(--gold-mid);
}
@keyframes dialSweep{to{transform:rotate(360deg)}}
.dial__ct{
  inset:auto 0 -1.9em 0;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.dial__ct em{font-style:normal;opacity:.5}

/* ── the wordmark ──
   The word fades up in one piece — no mask, no per-letter rise, so a glyph is
   never caught half-drawn. Then one gold highlight sweeps left to right and
   rests: every letter carries the same gradient and starts a beat after the one
   before it, so the pass reads as a single band crossing AURVM.
   `background-repeat:repeat` is load-bearing. The gradient is 340% as wide as a
   letter and parks outside it, and with `no-repeat` the uncovered part of the
   glyph had no background to clip to at all — it painted nothing, which is why
   letters showed up with half their strokes missing. */
.loader__mark{
  display:flex;gap:.14em;justify-content:center;
  animation:markIn 1.25s .16s var(--ease) backwards;
}
@keyframes markIn{from{opacity:0;transform:translateY(16px)}}
.loader__letter{
  display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,8vw,5.6rem);line-height:1;letter-spacing:.06em;
  background-image:linear-gradient(96deg,
    var(--ink) 0 33%,var(--gold-warm) 42%,var(--gold-hi) 50%,var(--gold-warm) 58%,var(--ink) 67%);
  background-size:340% 100%;background-position:120% 0;background-repeat:repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:letterShine 4.2s var(--ease-io) infinite;
}
/* a quick pass, then a long rest — both ends park the band outside the letter */
@keyframes letterShine{0%{background-position:120% 0}22%,100%{background-position:-20% 0}}
/* one beat per letter, left to right */
.loader__letter:nth-child(1){animation-delay:1.15s}
.loader__letter:nth-child(2){animation-delay:1.28s}
.loader__letter:nth-child(3){animation-delay:1.41s}
.loader__letter:nth-child(4){animation-delay:1.54s}
.loader__letter:nth-child(5){animation-delay:1.67s}
/* if the text can't be painted from a gradient, paint it in ink */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .loader__letter{color:var(--ink);-webkit-text-fill-color:currentColor;background-image:none}
}
.loader__note{
  margin-top:1.9em;font-size:.8rem;color:var(--ink-3);opacity:1;
  animation:noteIn 1.2s .82s var(--ease) backwards;
}
@keyframes noteIn{from{opacity:0;transform:translateY(10px)}}
.loader__note em{font-family:var(--serif);font-size:1.02em;color:var(--gold)}
.loader__curtain{position:absolute;inset:0;z-index:0;display:flex;pointer-events:none}
/* the spread shadow is the panel's own colour: it closes the sub-pixel seams
   between neighbours, and it lifts away with the panel it belongs to */
.loader__curtain i{flex:1;background:var(--bg);box-shadow:0 0 0 1.5px var(--bg);transform-origin:50% 0}
/* no-GSAP exit: the same five-panel wipe, driven by CSS */
.loader.is-gone .loader__wash{animation:washOut .5s var(--ease-io) forwards!important}
.loader.is-gone .loader__inner{animation:innerOut .55s var(--ease-io) forwards!important}
.loader.is-gone .loader__curtain i{animation:panelUp .95s .2s var(--ease-io) forwards!important}
.loader.is-gone .loader__curtain i:nth-child(2){animation-delay:.28s}
.loader.is-gone .loader__curtain i:nth-child(3){animation-delay:.36s}
.loader.is-gone .loader__curtain i:nth-child(4){animation-delay:.44s}
.loader.is-gone .loader__curtain i:nth-child(5){animation-delay:.52s}
@keyframes washOut{to{opacity:0}}
@keyframes innerOut{to{opacity:0;transform:translateY(-26px)}}
@keyframes panelUp{to{transform:scaleY(0)}}

/* tail meter — the frames that stream in after the reveal */
.stream{position:fixed;left:0;right:0;bottom:0;z-index:850;height:1px;pointer-events:none;opacity:0;transition:opacity .7s var(--ease)}
.stream.is-on{opacity:.7}
.stream i{
  display:block;height:1px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi));
}
/* ─────────── nav ─────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(14px,2vh,26px) var(--pad);
  opacity:0;transform:translateY(-14px);pointer-events:none;
}
.nav.is-on{pointer-events:auto}
.nav::after{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(180deg,rgba(226,226,226,.92),rgba(226,226,226,0));
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line-3);
  transition:opacity .5s var(--ease);
}
.nav.is-solid::after{opacity:1}
.nav__brand{display:grid;gap:.15em}
.nav__logo{font-family:var(--serif);font-size:1.28rem;letter-spacing:.3em;line-height:1}
.nav__sub{font-family:var(--mono);font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.nav__links{display:flex;gap:clamp(14px,2.2vw,38px)}
.nav__links a{
  position:relative;display:flex;align-items:baseline;gap:.5em;
  font-family:var(--mono);font-size:.67rem;font-weight:300;
  letter-spacing:.15em;text-transform:uppercase;padding-block:.4em;
  transition:color .4s;
}
.nav__links a i{font-style:normal;font-size:.55rem;color:var(--gold-warm)}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.nav__links a:hover{color:var(--gold)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__side{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px)}
.nav__clock{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nav__burger{display:none;width:38px;height:38px;position:relative;border:1px solid var(--line-2);border-radius:50%}
.nav__burger i{position:absolute;left:11px;width:16px;height:1px;background:var(--ink);transition:transform .45s var(--ease),opacity .3s}
.nav__burger i:first-child{top:16px}
.nav__burger i:last-child{top:21px}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(2.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-2.5px) rotate(-45deg)}
/* ─────────── drawer ─────────── */
.drawer{
  position:fixed;inset:0;z-index:790;display:grid;align-content:center;gap:.2em;
  padding:0 var(--pad);background:var(--bg);
  clip-path:inset(0 0 100% 0);pointer-events:none;
  transition:clip-path .8s var(--ease);
}
.drawer.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.drawer a{
  display:flex;align-items:baseline;gap:.7em;padding-block:.32em;
  font-family:var(--serif);font-size:clamp(2rem,9vw,3.4rem);font-weight:300;line-height:1.05;
  border-bottom:1px solid var(--line-3);opacity:0;transform:translateY(24px);
}
.drawer a i{font-family:var(--mono);font-style:normal;font-size:.6rem;letter-spacing:.2em;color:var(--gold-warm)}
.drawer__cta{color:var(--gold)}

/* ══════════════ THE FILM ══════════════ */
.film{position:relative}
.film__viewport{
  position:sticky;top:0;z-index:0;
  height:100vh;height:100svh;overflow:hidden;
  background:linear-gradient(180deg,#e6e6e6 0%,var(--bg) 52%,#dadada 100%);
}
.film__canvas{width:100%;height:100%;display:block}
.film__fallback{width:100%;height:100%;object-fit:cover}
.film__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(115% 78% at 50% 42%,rgba(0,0,0,0) 42%,rgba(0,0,0,.055) 78%,rgba(0,0,0,.13) 100%),
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 26%);
}
.film__glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(46% 40% at 50% 46%,rgba(229,204,158,.34),rgba(229,204,158,0) 70%);
  mix-blend-mode:soft-light;
}
.film__acts{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh}
.act{position:relative;min-height:100vh;min-height:100svh}
.act--i{height:220vh}
.act--ii{height:255vh}
.act--iii{height:255vh}
.act--iv{height:265vh}

/* act I — cinematic framing, zero copy */
.act__cine{position:sticky;top:0;height:100vh;height:100svh;pointer-events:none}
.cine__bar{position:absolute;left:0;right:0;height:clamp(26px,5.4vh,64px);background:var(--bg);opacity:.001}
.cine__bar--t{top:0;transform-origin:50% 0}
.cine__bar--b{bottom:0;transform-origin:50% 100%}
.scrollcue{
  position:sticky;top:calc(100vh - 96px);top:calc(100svh - 96px);
  height:0;display:grid;justify-content:center;pointer-events:none;opacity:0;
}
.scrollcue i{
  position:relative;display:block;width:1px;height:74px;
  background:linear-gradient(180deg,rgba(19,19,19,0),var(--line-2));overflow:hidden;
}
.scrollcue i::after{
  content:'';position:absolute;left:0;width:1px;height:26px;background:var(--gold-mid);
  animation:cueRun 2.1s var(--ease-io) infinite;
}
@keyframes cueRun{0%{top:-28px}55%{top:74px}100%{top:74px}}

/* act grids — the sticky content columns */
.act__grid{
  position:sticky;top:0;height:100vh;height:100svh;
  display:grid;align-content:center;
  padding-inline:var(--pad);
  max-width:var(--max);margin-inline:auto;
  grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px);
  pointer-events:none;
}
.act__grid > *{pointer-events:auto}
/* five columns, not six — keeps the copy clear of the watch at every pan */
.act__grid--right .panel{grid-column:8 / span 5}
.act__grid--left .panel{grid-column:1 / span 5}
.panel{position:relative;padding-block:clamp(20px,4vh,44px)}
.panel::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--gold-warm),var(--line-3) 62%,transparent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.5s var(--ease);
}
.panel.is-in::before{transform:scaleX(1)}
.panel .display{margin-bottom:1.1em}
.panel .lede{margin-bottom:2.4em}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,30px);margin-bottom:2.4em}
.stats li{border-top:1px solid var(--line-2);padding-top:1em}
.stats .num{
  display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,3.2vw,3.15rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stats span{display:block;margin-top:.55em;font-size:.79rem;line-height:1.45;color:var(--ink-3)}

/* spec lines */
.spec-lines{display:grid;gap:0}
.spec-lines li{
  display:flex;align-items:baseline;gap:.9em;
  padding-block:.86em;border-bottom:1px solid var(--line-3);
  font-size:.87rem;
}
.spec-lines li:first-child{border-top:1px solid var(--line-3)}
.spec-lines span{color:var(--ink-3);white-space:nowrap}
.spec-lines i{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 5px)}
.spec-lines b{font-family:var(--mono);font-weight:300;font-size:.76rem;letter-spacing:.06em;white-space:nowrap}

/* act IV — finale + annotations */
.finale{
  position:sticky;top:0;height:100vh;height:100svh;
  display:grid;align-content:center;justify-items:center;text-align:center;
  padding:0 var(--pad);pointer-events:none;
}
.finale__line{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.1rem,6.4vw,6rem);line-height:.96;letter-spacing:-.03em;
}
.finale__sub{margin-top:1.5em;max-width:38ch;font-size:.95rem;color:var(--ink-2);opacity:0}
.annot{position:sticky;top:0;height:100vh;height:100svh;pointer-events:none;overflow:clip}
.annot__i{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:.6em;opacity:0}
.annot__i i{
  position:relative;width:6px;height:6px;border-radius:50%;flex:none;
  border:1px solid var(--gold-mid);
}
.annot__i i::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--gold-warm);
  opacity:.5;animation:pulseRing 2.6s var(--ease-io) infinite;
}
@keyframes pulseRing{0%{transform:scale(.6);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.annot__i b{
  font-family:var(--mono);font-weight:300;font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
  padding:.35em .7em;border:1px solid var(--line-3);border-radius:99px;
  background:rgba(232,232,232,.62);backdrop-filter:blur(6px);
}
/* ─────────── marquee ─────────── */
.marquee{padding-block:clamp(30px,5vh,58px);border-block:1px solid var(--line-3);overflow:hidden;background:rgba(255,255,255,.16)}
.marquee__row{display:flex;align-items:center;gap:1.2em;width:max-content;will-change:transform}
.marquee__row + .marquee__row{margin-top:.5em}
.marquee__row span{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.4vw,2.9rem);
  line-height:1;letter-spacing:-.01em;white-space:nowrap;
}
.marquee__row--rev span{font-style:italic;color:var(--ink-3)}
.marquee__row i{font-style:normal;font-size:.6em;color:var(--gold-warm)}

/* ─────────── anatomy ledger ─────────── */
.ledger{border-top:1px solid var(--line-2)}
.ledger__row{
  position:relative;display:grid;align-items:start;
  grid-template-columns:5.2rem minmax(0,15rem) minmax(0,1fr) 11rem;
  gap:clamp(14px,2.4vw,44px);
  padding-block:clamp(24px,3.4vh,40px);
  border-bottom:1px solid var(--line-3);
  transition:background .55s var(--ease),padding-inline .55s var(--ease);
}
.ledger__row::after{
  content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--gold-mid);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease);
}
.ledger__row:hover{background:rgba(255,255,255,.34);padding-inline:clamp(8px,1.4vw,22px)}
.ledger__row:hover::after{transform:scaleX(1)}
.ledger__n{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--gold);padding-top:.5em}
.ledger__row h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.1vw,1.86rem);line-height:1.1;letter-spacing:-.012em}
.ledger__row p{font-size:.9rem;color:var(--ink-2);max-width:52ch}
.ledger__v{font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);text-align:right;padding-top:.5em}

/* ─────────── craft ─────────── */
.craft{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,4vw,70px);align-items:center}
.craft__art{grid-column:1 / span 6}
.craft__body{grid-column:8 / span 5}
.craft__mask{overflow:hidden;background:var(--bg-sink)}
.craft__mask img{width:100%;transform:scale(1.12);will-change:transform}
.craft__art figcaption{
  margin-top:1.1em;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:flex;gap:.7em;
}
.craft__art figcaption i{font-style:normal;color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:.5em;margin-top:2.2em}
.chip{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.55em 1em;border:1px solid var(--line-2);border-radius:99px;color:var(--ink-2);
  transition:color .4s,border-color .4s,background .4s;
}
.chip:hover{color:var(--bg);background:var(--ink);border-color:var(--ink)}
.pull{
  margin-top:2.6em;padding-left:1.5em;border-left:1px solid var(--gold-warm);
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.34;
}
.pull cite{
  display:block;margin-top:1em;font-family:var(--mono);font-style:normal;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}

/* ─────────── horizontal collection ─────────── */
.hsec{position:relative;background:linear-gradient(180deg,transparent,rgba(255,255,255,.2) 30%,transparent)}
.hsec__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-content:center}
.hsec__head{
  position:absolute;top:clamp(74px,12vh,120px);left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;align-items:center;gap:1em;
}
.hsec__head .eyebrow{margin:0}
.hsec__hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.hsec__track{display:flex;align-items:stretch;gap:clamp(18px,2.4vw,40px);padding-inline:var(--pad);will-change:transform}
.hcard{flex:none;width:clamp(268px,25vw,400px);display:flex;flex-direction:column}
.hcard--intro,.hcard--end{width:clamp(280px,28vw,440px);justify-content:center;gap:1.2em}
.hcard--intro p{font-size:.92rem;color:var(--ink-2);max-width:32ch}
.hcard--end h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.06;letter-spacing:-.02em}
.hcard--end .btn{align-self:flex-start}
.hcard__img{overflow:hidden;background:var(--bg-sink);aspect-ratio:4/3}
.hcard__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--ease),filter .8s}
.hcard:hover .hcard__img img{transform:scale(1.09)}
.hcard__meta{display:grid;gap:.35em;padding-top:1.1em;border-top:1px solid var(--line-2);margin-top:1.1em}
.hcard__meta i{font-family:var(--mono);font-style:normal;font-size:.6rem;letter-spacing:.18em;color:var(--gold)}
.hcard__meta h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.1}
.hcard__meta span{font-size:.79rem;color:var(--ink-3)}
.hcard__meta b{font-family:var(--mono);font-weight:300;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.4em}
.hsec__bar{position:absolute;bottom:clamp(40px,7vh,74px);left:var(--pad);right:var(--pad);height:1px;background:var(--line-2)}
.hsec__bar i{display:block;height:1px;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
/* ─────────── specifications ─────────── */
.spec{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(30px,4vw,70px)}
.spec__side{grid-column:1 / span 5;position:sticky;top:clamp(100px,16vh,170px);align-self:start}
.spec__list{grid-column:7 / span 6}
.spec__seal{width:96px;margin-top:2.6em;color:var(--gold-warm);opacity:.85}
.spec__seal svg{width:100%;height:auto}
.spec__seal text{font-family:var(--mono);letter-spacing:.24em;fill:currentColor}
.spec__list > div{
  display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);
  gap:1.4em;padding-block:1.02em;border-bottom:1px solid var(--line-3);
}
.spec__list > div:first-child{border-top:1px solid var(--line-2)}
.spec__list dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding-top:.22em}
.spec__list dd{font-size:.95rem;color:var(--ink)}

/* ─────────── provenance ─────────── */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,54px)}
.quotes blockquote{border-top:1px solid var(--line-2);padding-top:1.5em}
.quotes p{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,1.65vw,1.5rem);line-height:1.36}
.quotes cite{display:block;margin-top:1.3em;font-family:var(--mono);font-style:normal;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.press{
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,64px);
  margin-top:clamp(56px,9vh,112px);padding-top:clamp(30px,4vh,50px);border-top:1px solid var(--line-3);
}
.press span{
  font-family:var(--mono);font-size:.68rem;font-weight:300;letter-spacing:.3em;
  color:var(--ink-3);opacity:.75;transition:opacity .4s,color .4s;
}
.press span:hover{opacity:1;color:var(--ink)}

/* ─────────── ink panel ─────────── */
.ink{
  position:relative;background:var(--panel);color:var(--cream);
  padding-block:clamp(92px,14vh,180px);margin-top:var(--sec);
  clip-path:inset(0 0 0 0);
}
.ink::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 58% at 82% 8%,rgba(229,204,158,.13),transparent 62%);
}
.ink__grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(34px,4.6vw,84px)}
.ink__copy{grid-column:1 / span 6}
.ink .lede--ink{color:var(--cream-2);max-width:42ch}
.ink .display{margin-bottom:1em}
.ink__facts{margin-top:2.8em;display:grid;gap:0}
.ink__facts li{display:grid;grid-template-columns:7rem 1fr;gap:1.2em;padding-block:.92em;border-top:1px solid rgba(237,235,230,.14);font-size:.86rem;color:var(--cream-2)}
.ink__facts li i{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi)}
/* ─────────── form ─────────── */
.form{grid-column:8 / span 5;align-self:start}
.form__row{position:relative;margin-bottom:1.7em}
.form label{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream-2);margin-bottom:.7em;
}
.form input,.form select,.form textarea{
  width:100%;padding:.85em 0;background:transparent;color:var(--cream);
  border-bottom:1px solid rgba(237,235,230,.24);
  font-size:.98rem;transition:border-color .45s var(--ease);resize:vertical;
}
.form input::placeholder,.form textarea::placeholder{color:rgba(237,235,230,.32)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold-hi)}
.form select{appearance:none;cursor:pointer;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a8a49c' fill='none' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right .2em center}
.form select option{background:var(--panel-2);color:var(--cream)}
.form__err{display:block;margin-top:.55em;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#e8a08a;min-height:1em}
.form .btn--gold{margin-top:.6em}
.form__ok{
  margin-top:1.5em;font-size:.88rem;color:var(--gold-hi);
  border-top:1px solid rgba(229,204,158,.3);padding-top:1.1em;
}
.form__ok em{font-family:var(--serif);font-size:1.05em}
.form__row.is-bad input,.form__row.is-bad textarea{border-color:#e8a08a}

/* ─────────── footer ─────────── */
.foot{background:var(--panel);color:var(--cream);padding-bottom:clamp(26px,4vh,44px)}
.foot__top{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(30px,4vw,60px);padding-block:clamp(56px,8vh,104px)}
.foot__brand{grid-column:1 / span 3}
.foot__logo{font-family:var(--serif);font-size:1.5rem;letter-spacing:.3em;display:block;margin-bottom:1em}
.foot__brand p{font-family:var(--mono);font-size:.6rem;line-height:1.9;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2)}
.foot__cols{grid-column:5 / span 5;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.foot h4{font-family:var(--mono);font-size:.6rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:1.3em}
.foot__cols a{display:block;font-size:.87rem;color:var(--cream-2);padding-block:.34em;transition:color .35s,transform .45s var(--ease)}
.foot__cols a:hover{color:var(--cream);transform:translateX(4px)}
.foot__sub{grid-column:11 / span 2}
.foot__sub p{font-size:.82rem;color:var(--cream-2);margin-bottom:1.3em}
.foot__field{display:flex;align-items:center;gap:.6em;border-bottom:1px solid rgba(237,235,230,.24);transition:border-color .4s}
.foot__field:focus-within{border-color:var(--gold-hi)}
.foot__field input{flex:1;min-width:0;padding:.7em 0;font-size:.86rem;color:var(--cream)}
.foot__field input::placeholder{color:rgba(237,235,230,.3)}
.foot__field button{flex:none;width:26px;height:26px;color:var(--gold-hi);display:grid;place-items:center;transition:transform .45s var(--ease)}
.foot__field button:hover{transform:translateX(4px)}
.foot__sub small{display:block;margin-top:.8em;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);min-height:1em}
.foot__rule{height:1px;background:rgba(237,235,230,.14)}
.foot__base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em;
  padding-top:clamp(20px,3vh,32px);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);
}
.foot__legal{display:flex;gap:1.4em}
.foot__legal a:hover,.foot__up:hover{color:var(--gold-hi)}
.foot__up{font:inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);transition:color .35s}

/* ─────────── reveal primitives ─────────── */
[data-reveal]{will-change:transform,opacity}
.line-mask{display:block;overflow:hidden}
.char-mask{display:inline-block;overflow:hidden}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1180px){
  .craft__art{grid-column:1 / span 7}
  .craft__body{grid-column:8 / span 5}
  .ledger__row{grid-template-columns:4rem minmax(0,12rem) minmax(0,1fr);}
  .ledger__v{grid-column:2 / -1;text-align:left;padding-top:0}
  .foot__brand{grid-column:1 / span 4}
  .foot__cols{grid-column:5 / span 8}
  .foot__sub{grid-column:1 / span 6;margin-top:2em}
}
@media (max-width:980px){
  .nav__links{display:none}
  .nav__clock{display:none}
  .nav__burger{display:block;flex:none}
  /* The enquiry pill's label wraps to two lines at this width and the pill clips
     it — `.btn` hides its overflow so the fill can wipe up — while the crowding
     shrank the burger from 38px to 25px and stretched the bar to 91px tall. The
     drawer already carries the same link as `.drawer__cta`, so on a phone the
     bar is brand + burger and nothing is lost. */
  .nav__side .btn{display:none}
  /* .53rem is 8.5px: fine as a wide-screen whisper, illegible on a phone */
  .nav__sub{font-size:.62rem;letter-spacing:.14em}
  /* keep the 38px circle, give the thumb a 50px target */
  .nav__burger::after{content:'';position:absolute;inset:-6px}
  /* Below this width the copy can no longer sit beside the watch, so the camera
     stops panning (see NARROW_AT in main.js) and the copy becomes a sheet that
     passes over the film instead of sitting next to it.
     It is deliberately NOT sticky here. A parked sheet is ~69% of a 375×812
     screen, which leaves the watch a 90px slot under the nav — the subject can
     never be centred and the act reads as a wall of text with a sliver of gold
     behind it. Scrolling the sheet instead gives every act the same rhythm:
     full-screen watch, copy rises and veils it through its own scrim, watch
     clears again before the next act. */
  .act__grid--right .panel,.act__grid--left .panel{grid-column:1 / -1}
  .act__grid{
    position:relative;height:auto;
    align-content:start;padding-top:64svh;padding-bottom:clamp(28px,8svh,64px);
  }
  .panel{
    background:linear-gradient(180deg,rgba(226,226,226,0),rgba(226,226,226,.9) 16%,rgba(226,226,226,.97));
    padding:clamp(20px,4vh,34px) clamp(16px,4vw,26px);
    border-top:1px solid var(--line-2);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
  .panel .display{margin-bottom:.7em}
  .panel .lede{margin-bottom:1.7em}
  .craft{grid-template-columns:1fr}
  .craft__art,.craft__body{grid-column:1 / -1}
  /* Annotation labels are placed by percentage across a wide frame and each one
     is a nowrap pill — at this width they cannot land anywhere sane, and the one
     at 84% pushed the document 85px past the viewport, which made mobile Chrome
     zoom the whole page out. Decorative and aria-hidden, so they simply go. */
  .annot{display:none}
  /* the finale copy is centred on wide screens; on a phone it moves off the
     watch and sits low, with the subject reading above it */
  .finale{align-content:end;padding-bottom:clamp(40px,11svh,110px)}
  .spec{grid-template-columns:1fr}
  .spec__side,.spec__list{grid-column:1 / -1;position:static}
  .quotes{grid-template-columns:1fr}
  .ink__grid{grid-template-columns:1fr}
  .ink__copy,.form{grid-column:1 / -1}
  .form{margin-top:2.6em}
  .hcard{width:min(74vw,340px)}
}
/* a short viewport in the narrow band has to fit the same panel — tighten it */
@media (max-width:980px) and (max-height:820px){
  .panel .display{font-size:clamp(1.75rem,4.4vw,2.5rem)}
  .panel .lede{font-size:.95rem;margin-bottom:1.3em}
  .stats{margin-bottom:1.5em;gap:12px}
  .stats .num{font-size:clamp(1.7rem,5vw,2.2rem)}
  .spec-lines li{padding-block:.6em}
}
/* Shorter still: with less room the sheet needs to start lower and the frame
   needs every pixel it can get above it. */
@media (max-width:980px) and (max-height:700px){
  .act__grid{padding-top:70svh}
  .finale{padding-bottom:clamp(28px,7svh,64px)}
}
@media (max-width:720px){
  :root{--sec:clamp(72px,10vh,110px)}
  .film__viewport{height:100svh}
  .act--i{height:180vh}
  .act--ii,.act--iii,.act--iv{height:230vh}
  /* the copy sheet must leave the top of the frame to the watch */
  .panel{padding-block:clamp(16px,3vh,26px)}
  .panel .display{font-size:clamp(1.7rem,7.4vw,2.3rem);margin-bottom:.6em}
  .panel .lede{font-size:.94rem;line-height:1.56;margin-bottom:1.4em}
  .stats{grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:1.5em}
  .stats li{padding-top:.7em}
  .stats li:last-child{grid-column:1 / -1}
  .stats .num{font-size:clamp(1.6rem,7vw,2.1rem)}
  .stats span{font-size:.74rem}
  .spec-lines li{padding-block:.62em;font-size:.83rem}
  .panel .btn--line{margin-top:1.6em}
  .foot__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ledger__row{grid-template-columns:3.4rem 1fr;row-gap:.5em}
  .ledger__row p{grid-column:2}
  .ledger__v{grid-column:2}
  .spec__list > div{grid-template-columns:1fr;gap:.35em}
  .press{gap:16px 26px}
  .foot__base{justify-content:flex-start}
  .marquee__row span{font-size:1.5rem}
}

/* ══════════════ MOTION PREFERENCES ══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .grain{animation:none}
  .act--i{height:100vh}
  .act--ii,.act--iii,.act--iv{height:auto;min-height:auto;padding-block:var(--sec)}
  .film__viewport{position:relative;height:70vh}
  .film__acts{margin-top:0}
  .act__grid,.finale,.annot,.act__cine{position:static;height:auto}
  .annot{display:none}
  .hsec__pin{position:static;height:auto;padding-block:var(--sec)}
  .hsec__track{flex-wrap:wrap;justify-content:center}
  .hsec__head{position:static;margin-bottom:2em}
  .hsec__bar{display:none}
  [data-reveal],.annot__i,.finale__sub,.loader__note{opacity:1!important;transform:none!important}
  .loader{display:none}
  .nav{opacity:1;transform:none;pointer-events:auto}
}
/* html.no-js — keep everything legible without scripts */
.no-js .loader{display:none}
.no-js .nav{opacity:1;transform:none;pointer-events:auto}
.no-js .film__viewport{position:relative;height:64vh}
.no-js .film__acts{margin-top:0}
.no-js .act{height:auto!important;min-height:0}
.no-js .act__grid,.no-js .finale{position:static;height:auto;padding-block:var(--sec)}
.no-js [data-reveal]{opacity:1;transform:none}
.no-js .annot,.no-js .act__cine,.no-js .scrollcue{display:none}
.no-js .hsec__pin{position:static;height:auto;padding-block:var(--sec)}
.no-js .hsec__track{flex-wrap:wrap}
.no-js .hsec__head{position:static;margin-bottom:2em}