/* ============================================================
   ONE OBJECT, TWO MATERIALS — engine stylesheet
   Written complete and dormant at P0. Sections wake by removing
   .mount-off as their real content arrives.
   ============================================================ */

/* ---------- TOKENS ----------
   GENERATED block (P2 rewrites these from the user's brand).
   Boot values are the blank-canvas near-black only.       */
:root{
  /* GENERATED from the Cutting Edge palette (D #16454E · P #43B3BC · accent #C96527) */
  --bg:        #001318;
  --dark:      #001D23;
  --light:     #43B3BC;
  --ink:       #E6F9FB;
  --ink-dark:  #001F25;
  --accent:    #C96527;
  --sky-end:   #6596AB;   /* sampled in-script from closing film frame-0 top row */
  --amb-glow:  rgba(46,125,140,.16);
  --scrim-dark:  rgba(0,19,24,.62);  /* raised from .55 when the deep fog layer landed behind the events */
  --scrim-light: rgba(67,179,188,.6);

  /* shipped alphas — hues are generated, alphas are not */
  --dim:    rgba(230,249,251,.62);
  --faint:  rgba(230,249,251,.34);
  --ghost:  rgba(230,249,251,.16);
  --hair:   rgba(230,249,251,.15);
  --marker: rgba(230,249,251,.26);

  --tex-url: url('assets/tex.webp');
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* MEASURED statics — measure.py rewrites both aspect branches.
     Boot placeholders: a centred plate the width of the canvas. */
  --iw: 67.08vw;                              /* COVER_W/19.2 vw   */
  --plate-x: calc(-50% - 1.146vw);            /* -50% - TX/19.2 vw */
  --plate-y: calc(50vh - 18.18vw);            /* 50vh - TY/19.2 vw */
}
@media (max-aspect-ratio: 1920/1080){
  :root{
    --iw: 119.26vh;                           /* COVER_W/10.8 vh   */
    --plate-x: calc(-50% - 2.037vh);
    --plate-y: calc(50vh - 32.31vh);
  }
}

/* ---------- GROUND RULES ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ overflow-x:clip; scrollbar-gutter:stable; }   /* clip, not hidden — hidden breaks fixed */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--marker); }
img{ max-width:none; display:block; }
a{ color:inherit; text-decoration:none; }

/* dormant mounts: display:none by CLASS, never the hidden attribute */
.mount-off{ display:none !important; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ---------- NAV (z60) ---------- */
.nav{
  position:fixed; z-index:60; inset:0 0 auto 0;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  color:var(--ink);
  transition:color .5s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }
.nav__brand{ font-family:var(--font-display); font-size:19px; letter-spacing:.02em; }
.nav__links{ display:flex; gap:30px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }
.nav__links a{ opacity:.62; transition:opacity .35s cubic-bezier(.22,1,.36,1); }
.nav__links a:hover{ opacity:1; }
.nav__cta{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:999px;
  padding:9px 20px;
  transition:background .35s cubic-bezier(.22,1,.36,1), color .35s cubic-bezier(.22,1,.36,1);
}
.nav.on-light{ color:var(--ink-dark); }

/* ---------- THE BREAK (z0, absolute) ---------- */
.break{
  position:absolute; z-index:0; left:0; right:0; bottom:0;
  top:0;                        /* JS writes the real top */
  background:var(--light);
}

/* ---------- THE STAGE (fixed z1) ---------- */
.stage{
  position:fixed; z-index:1; inset:0;
  overflow:hidden; isolation:isolate;
  pointer-events:none;
}
.dark{
  position:absolute; inset:0; z-index:1;
  background:var(--bg);
  /* JS writes clip-path each raw frame (M5) */
}
.deep{
  /* the room continues below the island: a static echo of their backdrop.
     The mist is BAKED INTO the image's alpha (top fades from 0) — a CSS
     mask here silently failed to render on real browsers. */
  position:absolute; inset:0;
  background:url('assets/deep.webp?v=2') center / cover no-repeat;
  opacity:.6;
}
.amb{
  position:absolute; inset:-20%;
  background:radial-gradient(ellipse 52% 44% at 50% 42%, var(--amb-glow, rgba(138,138,142,.16)), transparent 70%);
}
.plate{
  position:absolute; top:0; left:50%;
  width:var(--iw);
  transform:translate3d(var(--plate-x), var(--plate-y), 0);
  will-change:transform;
}
.plate--bg{
  opacity:.85;
  /* feathered: horizontal hold 15–85 ships; vertical stops measured, JS writes them */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 15%, #000 85%, transparent),
                     linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:linear-gradient(to right, transparent, #000 15%, #000 85%, transparent),
                     linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
          mask-composite: intersect;
}
.type{ position:absolute; inset:0; z-index:2; }
.plate--fg{ z-index:3; }
.lenshost{
  position:absolute; inset:0; z-index:5;   /* THE MASK LIVES HERE — this box never moves */
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0, rgba(0,0,0,0) 1px);
          mask-image:radial-gradient(circle at 50% 50%, #000 0, rgba(0,0,0,0) 1px);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.plate--stone{ position:absolute; }

/* ---------- HERO TYPE ---------- */
.type__row{
  position:absolute; left:0; right:0;
  display:flex; align-items:baseline;
  padding:0 clamp(20px,4vw,56px);
  white-space:nowrap;
}
.type__row--a, .type__row--c{
  justify-content:space-between;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
}
.type__row--b{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.01em;
  color:var(--ink);
}
.word__in{ display:inline-block; }
html.is-intro .word__in{ transform:translateY(26%); opacity:0; }
html.is-ready .word__in{
  transform:translateY(0); opacity:1;
  transition:transform 1.4s cubic-bezier(.19,1,.22,1) .13s, opacity 1.1s cubic-bezier(.22,1,.36,1) .13s;
}
.mini{ display:inline-block; }
html.is-intro .mini, html.is-intro .lede, html.is-intro .cue,
html.is-intro .nav__brand, html.is-intro .nav__links, html.is-intro .nav__cta{ opacity:0; }
html.is-ready .mini, html.is-ready .lede, html.is-ready .cue,
html.is-ready .nav__brand, html.is-ready .nav__links, html.is-ready .nav__cta{
  opacity:1;
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1);
}
/* intro choreography — fade ONLY on per-frame elements */
html.is-ready .nav__brand{ transition-delay:.28s; }
html.is-ready .nav__links{ transition-delay:.36s; }
html.is-ready .nav__cta{   transition-delay:.44s; }
html.is-ready .type__row--a .mini{ transition-delay:.52s; }
html.is-ready .type__row--c .mini{ transition-delay:.60s; }
html.is-ready .lede{ transition-delay:.68s; }
html.is-ready .cue{  transition-delay:.78s; }
html.is-settled .type, html.is-settled .lede, html.is-settled .cue,
html.is-settled .plate, html.is-settled .word__in{ transition:none; }

.lede{
  position:absolute; z-index:6;
  left:clamp(20px,4vw,56px); bottom:12vh;
  max-width:34ch;
  font-size:15px; color:var(--dim);
}
.cue{
  position:absolute; z-index:6;
  right:clamp(20px,4vw,56px); bottom:7vh;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:10.5px; letter-spacing:.3em; color:var(--faint);
  writing-mode:vertical-rl;
}
.cue__rail{
  width:1px; height:64px;
  background:linear-gradient(var(--faint), transparent);
}

/* ---------- MAIN FLOW ---------- */
main{ position:relative; z-index:2; }
.runway{ height:118vh; }

/* --- the timeline (M6) --- */
.process{ padding:4vh 0 10vh; }
.events{ overflow-x:clip; display:flex; flex-direction:column; gap:16vh; }
.event{
  isolation:isolate;                 /* load-bearing: keeps the z-index:-1 marker inside */
  position:relative;
  width:min(560px,86vw);
  align-self:flex-start;
  transform:translate3d(var(--ex,-7%),26px,0);
  opacity:.001;
  transition:transform 1s cubic-bezier(.16,1,.3,1), opacity 1s cubic-bezier(.22,1,.36,1);
  margin-left:clamp(20px,7vw,120px);
  padding:34px 38px;
  background:var(--scrim-dark, rgba(11,11,13,.55));
}
.event--r{ align-self:flex-end; --ex:7%; margin-left:0; margin-right:clamp(20px,7vw,120px); }
.event.is-lit{ transform:translate3d(0,0,0); opacity:1; }
.event__num{
  position:absolute; z-index:-1;
  top:-.32em; left:-4%;
  font-family:var(--font-display);
  font-size:clamp(88px,9vw,150px);
  line-height:1;
  background-image:var(--tex-url, none);
  background-size:cover; background-position:center;
  -webkit-background-clip:text; background-clip:text;
  color:var(--marker);
}
.event.has-tex .event__num{ color:transparent; }
.event__mark{ position:absolute; top:38%; right:-84px; width:64px; opacity:0; transition:opacity .8s cubic-bezier(.22,1,.36,1); }
.event--r .event__mark{ right:auto; left:-84px; }
.event.is-lit .event__mark{ opacity:1; }
.event__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,2.1vw,30px);
  margin-bottom:14px;
}
.event__body .w{ opacity:.16; transition:opacity .35s cubic-bezier(.22,1,.36,1); }
.event__body .w.on{ opacity:.86; }
.event__body .w.key{ font-style:italic; }
.event__body .w.key.on{ opacity:1; color:var(--ink); }

.readout{
  position:fixed; z-index:40;
  bottom:4vh; left:50%; transform:translateX(-50%);
  font-family:var(--font-display);
  font-size:44px; line-height:1;
  background-image:var(--tex-url, none);
  background-size:cover; background-position:center;
  -webkit-background-clip:text; background-clip:text;
  color:var(--marker);
  opacity:0; transition:opacity .6s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.readout.has-tex{ color:transparent; }
.readout.is-on{ opacity:1; }

/* --- the closing panel (M5) --- */
.closing{
  min-height:116vh;
  display:flex; align-items:flex-start;
  position:relative;
}
.closing__copy{
  align-self:flex-end;             /* bottom-anchored: never in the object's column at its settled height */
  margin:0 0 10vh clamp(20px,4vw,56px);
  max-width:38ch;                  /* JS caps against the art's ink edge */
  color:var(--ink-dark);
}
.closing__copy .scrim{ background:var(--scrim-light, rgba(237,237,239,.6)); box-decoration-break:clone; padding:.1em .3em; }
.closing__kicker{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.62; margin-bottom:18px; }
.closing__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(30px,3.4vw,52px); line-height:1.08; margin-bottom:20px; }
.closing__body{ font-size:16px; }

/* --- the works index (M8) --- */
.works{ position:relative; }
.wrow{
  display:flex; align-items:center; gap:26px;
  padding:30px clamp(20px,4vw,56px);
  background:var(--c);
  color:var(--t);
  transition:padding-left .6s cubic-bezier(.19,1,.22,1), opacity .5s cubic-bezier(.22,1,.36,1);
  cursor:pointer;
}
.wrow__idx{ font-size:12px; letter-spacing:.14em; opacity:.55; width:3ch; }
.wrow__name{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(24px,3vw,42px); line-height:1.05;
  transition:font-style 0s;
}
.wrow__meta{ margin-left:auto; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.55; }
.wrow__arrow{ opacity:0; transform:translateX(-14px); transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.19,1,.22,1); }
.works.is-hovering .wrow{ opacity:.24; }
.works.is-hovering .wrow:hover{ opacity:1; padding-left:calc(clamp(20px,4vw,56px) + 58px); }
.wrow:hover .wrow__name{ font-style:italic; }
.wrow:hover .wrow__arrow{ opacity:1; transform:translateX(0); }

.wpreview{
  position:fixed; z-index:55; top:0; left:0;
  width:clamp(210px,20vw,310px); aspect-ratio:3/3.8;
  background:var(--pc, var(--dark));
  overflow:hidden;
  pointer-events:none;
  transform:translate3d(-50%,-50%,0) scale(0);
}
.wpreview img{ width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .5s cubic-bezier(.22,1,.36,1); }
.wpreview img.on{ opacity:1; }

/* --- the sky and the end (M10) --- */
.sky{ min-height:8vh; background:var(--sky-grad, var(--sky-end)); }
/* student-tuned: with row N, sky and film sky sharing one sampled token, the
   40vh corridor read as a void — the seam is carried by colour equality, so
   the sky now just breathes one row-gap's worth before the film. */
.end{
  position:relative;
  min-height:100vh;
  background:var(--sky-end);
  color:var(--ink-dark);
  display:flex; align-items:center; justify-content:center;
}
.end::before{
  content:""; position:absolute; left:0; right:0; top:0; height:34vh;
  background:linear-gradient(var(--sky-end), transparent);
  pointer-events:none;
}
.end__inner{ text-align:center; padding:0 20px; }
.end__tag{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px,3vw,46px); line-height:1.15;
  margin-bottom:34px;
}
.end__cta{
  display:inline-block;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:999px;
  padding:14px 34px;
  transition:background .35s cubic-bezier(.22,1,.36,1), color .35s cubic-bezier(.22,1,.36,1);
}
.end__cta:hover{ background:var(--ink-dark); color:var(--sky-end); }
.end--film{ display:block; min-height:100vh; }
.end--film video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.end--film .end__inner{ position:absolute; left:0; right:0; bottom:10vh; z-index:2; }
.finale__rail{ position:absolute; left:0; bottom:0; height:2px; background:var(--ink-dark); width:0; z-index:2; }
.finale__tag{ position:absolute; top:6vh; left:0; right:0; text-align:center; z-index:2; font-size:11px; letter-spacing:.3em; text-transform:uppercase; opacity:.9; /* floor, not constant: .72 measured 3.45:1 on the film sky; .9 = 4.63:1 */ }

/* ---------- LOADER (z200, film-gated) ---------- */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  transition:opacity .9s cubic-bezier(.22,1,.36,1);
}
.loader video{ width:100%; height:100%; object-fit:cover; }
.loader__skip{
  position:absolute; right:28px; bottom:28px;
  font:inherit; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); background:none;
  border:1px solid var(--hair); border-radius:999px;
  padding:10px 22px; cursor:pointer;
}
html.is-revealed .loader{ opacity:0; pointer-events:none; }

/* ---------- DOT CURSOR (z210) ---------- */
.dot{
  position:fixed; z-index:210; top:0; left:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--ink);
  pointer-events:none;
  transform:translate3d(-100px,-100px,0);
  display:none;
}
@media (pointer:fine) and (min-width:1101px){
  html.has-dot .dot{ display:block; }
  html.has-dot .stage, html.has-dot main{ cursor:none; }
}

/* ---------- CSS FAILSAFE — 8s, survives a script.js parse error ---------- */
@keyframes fs-show{ to{ opacity:1; transform:none; } }
@keyframes fs-hide{ to{ opacity:0; visibility:hidden; } }
html.is-intro .word__in,
html.is-intro .mini, html.is-intro .lede, html.is-intro .cue,
html.is-intro .nav__brand, html.is-intro .nav__links, html.is-intro .nav__cta{
  animation:fs-show 0s linear 8s forwards;
}
html.is-intro .loader{ animation:fs-hide 0s linear 8s forwards; }

/* ---------- BREAKPOINTS ---------- */
@media (max-width:1100px){
  .event, .event--r{
    width:auto; align-self:stretch;
    margin:0 clamp(16px,5vw,40px);
    --ex:0%;
  }
  .readout{ display:none; }
  .event__mark{ display:none; }
}
@media (max-width:900px){
  .nav__links{ display:none; }
  .runway{ height:104vh; }
}
@media (max-width:560px){
  .cue{ display:none; }
  .lede{ max-width:26ch; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html.is-intro .word__in, html.is-intro .mini, html.is-intro .lede, html.is-intro .cue,
  html.is-intro .nav__brand, html.is-intro .nav__links, html.is-intro .nav__cta{
    opacity:1; transform:none;
  }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .event{ opacity:1; transform:none; }
  .event__body .w{ opacity:.86; }
  .dot{ display:none !important; }
  .stage, main{ cursor:auto !important; }
}