/* ==========================================================================
   ENTROPY - A CREATIVE HOUSE
   Single-file site. Fonts, marks and stills are embedded; nothing loads
   from outside. Palette and type are the locked identity: Ink / Bone /
   Ember, Jost / Archivo / Azeret Mono.
   ========================================================================== */
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-400.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/jost-600.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/archivo-600.woff2) format("woff2")}
@font-face{font-family:"Azeret Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/azeretmono-400.woff2) format("woff2")}

:root{
  --ink:#081A22; --ink-mid:#12333F; --bone:#F4EBDC; --press:#E5D6BE;
  --ember:#C74D14; --ember-deep:#8F3A0E; --ember-mid:#E0742A; --slate:#7E8F92;

  /* role tokens - re-pointed per ground */
  --ground:var(--ink);
  --figure:var(--bone);
  --figure-2:rgba(244,235,220,.74);
  --accent:var(--ember);
  --accent-text:var(--ember);
  --label:var(--slate);
  --rule:rgba(244,235,220,.14);
  --rule-strong:rgba(244,235,220,.34);
  --recess:var(--ink-mid);
  --plate:rgba(8,26,34,.72);

  --f-display:"Jost",system-ui,-apple-system,sans-serif;
  --f-lede:"Archivo",system-ui,-apple-system,sans-serif;
  --f-mono:"Azeret Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gutter:clamp(20px,4.6vw,88px);
  --max:1720px;
  --nav-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --t-body:clamp(16px,.32vw + 14.6px,19px);
  --t-lede:clamp(18px,.55vw + 15px,24px);
  --t-hl:clamp(38px,5.3vw,94px);
  --t-hero:clamp(38px,5.9vw,110px);
  --t-cta:clamp(40px,6.4vw,112px);
  --t-label:clamp(11px,.2vw + 10px,12.5px);
  --t-mono:clamp(12px,.25vw + 11px,14px);
  --t-small:clamp(14px,.2vw + 13px,16px);
}
[data-ground="bone"]{
  --ground:var(--bone); --figure:var(--ink); --figure-2:rgba(8,26,34,.74);
  --accent-text:var(--ember-deep); --label:rgba(8,26,34,.68);
  --rule:rgba(8,26,34,.14); --rule-strong:rgba(8,26,34,.36); --recess:var(--press);
}

/* ---- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--f-display);font-size:var(--t-body);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ember-mid);outline-offset:4px}
[data-ground="bone"] :focus-visible{outline-color:var(--ember-deep)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--gutter);top:-60px;z-index:100;background:var(--ember);color:var(--bone);padding:12px 18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:top .2s}
.skip:focus{top:14px}

.mono{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;line-height:1.7}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}

/* marks draw in currentColor, so colour is set on the halves */
.dv-sun,.dv-rings{color:var(--accent)}
.dv-wave{color:var(--figure);stroke-width:var(--wave-w,3.13)}
.wm-letters{fill:var(--figure)}
.wm-descriptor{fill:var(--accent)}
.ring{transform-box:view-box;transform-origin:var(--cx) var(--cy)}
.mark-hero .ring{--cx:2587.394px;--cy:340.479px}
.mark-device .ring,.mark-close .ring{--cx:990.543px;--cy:632.909px}
@keyframes spinccw{to{transform:rotate(-1turn)}}
@media (prefers-reduced-motion:no-preference){
  /* every ring turns counter-clockwise; the script gives each its own period */
  .spin .ring{animation:spinccw var(--dur,160s) linear infinite}
  .spin.paused .ring{animation-play-state:paused}
  .spin-hover .ring{transition:transform 1.6s var(--ease-out)}
  .js .strip:not(.in) .ring-1{transform:rotate(50deg)}.js .strip:not(.in) .ring-2{transform:rotate(80deg)}.js .strip:not(.in) .ring-3{transform:rotate(30deg)}.js .strip:not(.in) .ring-4{transform:rotate(110deg)}
  .spin-hover:hover .ring-1,.spin-hover:focus-within .ring-1{transform:rotate(-24deg)}
  .spin-hover:hover .ring-2,.spin-hover:focus-within .ring-2{transform:rotate(-40deg)}
  .spin-hover:hover .ring-3,.spin-hover:focus-within .ring-3{transform:rotate(-14deg)}
  .spin-hover:hover .ring-4,.spin-hover:focus-within .ring-4{transform:rotate(-56deg)}
}

/* ---- reveal ---------------------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js .poster[data-reveal]{transform:none;transition:opacity 1s var(--ease)}
.hl,.hero-hl,.cta-hl{--fit:9999px}
.hl .ln,.hero-hl .ln,.cta-hl .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.js .hl .ln>span,.js .cta-hl .ln>span{display:block;transform:translateY(112%);transition:transform 1.15s var(--ease-out)}
.js .hl .ln:nth-child(2)>span,.js .cta-hl .ln:nth-child(2)>span{transition-delay:.14s}
.js .hl.in .ln>span,.js .cta-hl.in .ln>span{transform:none}

/* ---- headline system ------------------------------------------------------- */
.hl{
  font-family:var(--f-lede);font-weight:600;
  font-size:min(var(--t-hl),var(--fit));line-height:.98;letter-spacing:-.032em;
  color:var(--figure);text-wrap:balance;
}
.hl .turn{color:var(--accent)}
[data-ground="bone"] .hl .turn{color:var(--ember)}
.copy{max-width:56ch;color:var(--figure-2)}
.copy p+p{margin-top:1.15em}
.copy .kicker{font-family:var(--f-lede);font-weight:600;font-size:var(--t-lede);line-height:1.32;color:var(--ember);letter-spacing:-.01em}
.copy .kicker+p{margin-top:1.4em}
.lab{display:block;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-text);margin-bottom:12px}

/* ---- section chrome ------------------------------------------------------- */
.sec{position:relative;background:var(--ground);color:var(--figure);padding:clamp(88px,12vh,176px) 0}
.sechead{
  display:flex;align-items:center;gap:18px;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.24em;text-transform:uppercase;
  color:var(--label);margin-bottom:clamp(44px,7vh,96px);
}
.sechead .n{color:var(--accent-text)}
.sechead::after{content:"";flex:1;height:1px;background:var(--rule-strong)}
.js .sechead::after{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .25s}
.js .sechead.in::after{transform:none}
.beat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,56px);align-items:start}
.beat>*{min-width:0}

/* ---- nav: the running head ------------------------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(16px,2.4vw,40px);padding:0 var(--gutter);color:var(--bone);
  transition:background .5s var(--ease);
}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bone);opacity:0;transition:opacity .5s}
.nav.scrolled{background:rgba(8,26,34,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav.scrolled::after{opacity:.14}
.nav-brand{display:block;width:clamp(124px,10.5vw,164px);line-height:0;opacity:0;transform:translateY(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease-out);pointer-events:none}
.nav-brand svg{width:100%;height:auto;display:block}
.nav.past .nav-brand{opacity:1;transform:none;pointer-events:auto}
.nav-chapter{
  justify-self:center;display:flex;align-items:center;gap:16px;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--slate);
  opacity:0;transition:opacity .5s;white-space:nowrap;
}
.nav.past .nav-chapter{opacity:1}
.nav-chapter .n{color:var(--ember)}
.nav-chapter .bar{width:52px;height:1px;background:var(--rule-strong);position:relative;overflow:hidden}
.nav-chapter .bar i{position:absolute;inset:0;background:var(--ember);transform-origin:left;transform:scaleX(var(--p,0))}
.nav-chapter .name{color:var(--bone)}
.nav-links{display:flex;gap:clamp(12px,1.3vw,24px);align-items:center;grid-column:2/5;justify-self:end}
.nav-chapter{display:none}
.nav-links a{
  position:relative;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:rgba(244,235,220,.7);padding:8px 0;white-space:nowrap;transition:color .3s;
}
.nav-links a i{font-style:normal;color:var(--slate);margin-right:7px;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--ember);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--bone)}
.nav-links a[aria-current]::after{transform:scaleX(var(--p,0));transform-origin:left;transition:none}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current] i{color:var(--ember)}
.btn{
  display:inline-flex;align-items:center;gap:12px;position:relative;isolation:isolate;overflow:hidden;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);border:1px solid var(--ember);padding:14px 20px;white-space:nowrap;
  transition:color .35s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;background:var(--ember);transform:translateX(-101%);transition:transform .45s var(--ease);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.nav-cta{padding:11px 16px}
.nav-menu{
  display:none;background:none;border:0;cursor:pointer;padding:10px 0 10px 12px;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
  align-items:center;gap:12px;
}
.nav-menu .lines{width:22px;height:10px;position:relative}
.nav-menu .lines::before,.nav-menu .lines::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--bone);transition:transform .35s var(--ease),top .35s var(--ease)}
.nav-menu .lines::before{top:0}.nav-menu .lines::after{top:9px}
.nav-menu[aria-expanded="true"] .lines::before{top:4.5px;transform:rotate(45deg)}
.nav-menu[aria-expanded="true"] .lines::after{top:4.5px;transform:rotate(-45deg)}

/* ---- the index (overlay menu) --------------------------------------------- */
.menu{
  position:fixed;inset:0;z-index:45;background:var(--ink);color:var(--bone);
  display:grid;grid-template-rows:var(--nav-h) 1fr auto;padding:0 var(--gutter) 28px;
  transform:translateY(-100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s;
}
.menu.open{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}
.menu ol{align-self:center;counter-reset:none}
.menu li{overflow:hidden}
.menu li a{
  display:flex;align-items:baseline;gap:clamp(16px,3vw,32px);text-decoration:none;color:var(--bone);
  font-family:var(--f-display);font-weight:600;font-size:clamp(30px,7.2vw,68px);letter-spacing:-.025em;line-height:1.12;
  padding:5px 0;transform:translateY(105%);transition:transform .7s var(--ease-out),color .3s;
}
.menu.open li a{transform:none}
.menu.open li:nth-child(1) a{transition-delay:.12s}.menu.open li:nth-child(2) a{transition-delay:.17s}.menu.open li:nth-child(3) a{transition-delay:.22s}
.menu.open li:nth-child(4) a{transition-delay:.27s}.menu.open li:nth-child(5) a{transition-delay:.32s}.menu.open li:nth-child(6) a{transition-delay:.37s}.menu.open li:nth-child(7) a{transition-delay:.42s}
.menu li a i{font-family:var(--f-mono);font-style:normal;font-weight:400;font-size:var(--t-label);letter-spacing:.22em;color:var(--ember);min-width:2.4em}
.menu li a:hover{color:var(--ember)}
.menu-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:20px;color:var(--slate)}
.menu-foot a{text-decoration:none;color:var(--bone)}

/* ---- the curtain ------------------------------------------------------------ */
.curtain{position:fixed;inset:0;z-index:70;background:var(--ember);transform:translateY(101%);pointer-events:none;visibility:hidden}
.curtain.in{visibility:visible;transform:none;transition:transform .42s var(--ease)}
.curtain.out{visibility:visible;transform:translateY(-101%);transition:transform .42s var(--ease)}

/* ---- hero: the cover ------------------------------------------------------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav-h) + 24px) var(--gutter) clamp(32px,5.5vh,64px);
  --art-w:min(150vw,230vh);--sun-x:75vw;--sun-y:44svh;--wave-w:2.0;
  --art-x:calc(var(--sun-x) - .815*var(--art-w));--art-y:calc(var(--sun-y) - .10725*var(--art-w));
}
@supports not (height:100svh){.hero{--sun-y:44vh}}
.hero-art{position:absolute;left:var(--art-x);top:var(--art-y);width:var(--art-w);pointer-events:none;will-change:transform;transform:translate3d(var(--dx,0px),calc(var(--sy,0px) + var(--dy,0px)),0)}
.hero-art svg{width:100%;height:auto;display:block;overflow:visible}
.hero-art .dv-wave{color:var(--bone)}
.hero-lockup{position:absolute;top:calc(var(--nav-h) + clamp(14px,2.6vh,36px));left:var(--gutter);width:clamp(280px,34vw,520px);line-height:0}
.hero-lockup svg{width:100%;height:auto}
.hero-foot{position:relative;will-change:transform}
.hero-hl{font-family:var(--f-display);font-weight:600;font-size:min(var(--t-hero),var(--fit));line-height:.97;letter-spacing:-.03em;color:var(--bone)}
.hero-hl .turn{color:var(--ember)}
.hero-hl .ln>span{display:block}
.scrollcue{
  position:absolute;left:var(--gutter);bottom:clamp(32px,5.5vh,64px);display:none;
}
/* intro choreography */
.js .hero-lockup{opacity:0;transform:translateY(-10px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease-out) .1s}
.js .hero.go .hero-lockup{opacity:1;transform:none}
.js .hero-art .dv-sun,.js .hero-art .dv-rings{opacity:0;transition:opacity 1.2s var(--ease) .3s}
.js .hero.go .hero-art .dv-sun,.js .hero.go .hero-art .dv-rings{opacity:1}
.js .hero-hl .ln>span{transform:translateY(112%);transition:transform 1.2s var(--ease-out)}
.js .hero.go .hero-hl .ln:nth-child(1)>span{transform:none;transition-delay:.5s}
.js .hero.go .hero-hl .ln:nth-child(2)>span{transform:none;transition-delay:.64s}

/* ---- the frames: nineteen seconds from the first six projects ---------------
   Set into 01 under "We are new." as a plate in the chapter, not a chapter of its
   own: the headline's width, not the page's. The picture is the footage's true
   2.22:1 (the letterbox is cropped in the encode). Muted, it plays while it is on
   screen; a click holds the frame; the Ember line along the foot is how far
   through it is. Its caption pairs with the credit roll's head beneath it -
   New · Frames from the first six projects / Not new at this · credits before
   Entropy - and 06 tells the rest. */
.who-a .frames{grid-column:1/8;grid-row:2;margin-top:clamp(24px,3.6vh,48px)}
.who-a .copy{grid-row:1/3}
.frames{display:grid;gap:12px}
.js .frames[data-reveal]{transform:translateY(18px) scale(.985);transform-origin:50% 100%}
.js .frames[data-reveal].in{transform:none}
.frames-frame{position:relative;aspect-ratio:1920/864;background:#000;border:1px solid var(--rule);overflow:hidden;-webkit-tap-highlight-color:transparent}
.frames-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.frames-hold{position:absolute;inset:0;appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;padding:0;margin:0;z-index:1}
.frames-hold:focus-visible{outline-offset:-4px}
html:not(.js) .frames-hold{display:none}
.frames-horizon{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;pointer-events:none}
.frames-horizon b{position:absolute;inset:0;background:var(--ember);transform-origin:left;transform:scaleX(var(--p,0))}
.frames-tag{position:absolute;left:0;bottom:2px;z-index:2;pointer-events:none;padding:8px 12px;background:var(--ink);color:var(--bone);font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;opacity:0;transition:opacity .3s var(--ease)}
.frames-tag.on{opacity:1}
.frames-cap{display:flex;justify-content:space-between;gap:12px 36px;flex-wrap:wrap;color:var(--label)}
.frames-cap .n{color:var(--accent-text)}

/* ---- 01 who ------------------------------------------------------------------ */
.who-a .hl{grid-column:1/8}
.who-a .copy{grid-column:8/13;padding-top:clamp(8px,1.4vw,26px)}
.who-b{margin-top:clamp(96px,14vh,200px)}
.who-b .hl{grid-column:1/13;max-width:20ch}
.who-b .current{grid-column:1/8;margin-top:clamp(40px,6vh,80px)}
.who-b .copy{grid-column:9/13;margin-top:clamp(40px,6vh,80px)}

/* the feedback line: one line, two ways. Through the layers it is Bone and
   the note is held at every layer; once the layers let go it straightens,
   turns Ember, and the note crosses in one move. Driven by Current() below. */
.current{display:grid;gap:clamp(16px,2.6vh,28px);align-self:center}
.current-lab{position:relative;height:1.8em;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--label);line-height:1.7}
.current-lab span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.current-lab span.on{opacity:1;transform:none}
.current-lab b{font-weight:400;color:var(--ember)}
.current svg{width:100%;height:auto;display:block;overflow:visible}
.c-line{fill:none;stroke:var(--bone);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke 1.4s var(--ease),stroke-width 1.4s var(--ease)}
.current.direct .c-line{stroke:var(--ember);stroke-width:3.4}
.c-layer{fill:var(--ink);stroke:var(--bone);stroke-width:1.8;transition:fill .35s var(--ease),stroke .35s var(--ease)}
.c-layer.hold{fill:var(--ember);stroke:var(--ember)}
.c-end{fill:var(--ember)}
.c-pulse{fill:var(--bone)}
.c-pulse.back{fill:var(--ember)}
.c-ring{fill:none;stroke:var(--ember);stroke-width:2}
.c-hand{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;fill:var(--slate)}
.c-hand.mid{opacity:0;transition:opacity .8s var(--ease) .4s}
.current.direct .c-hand.mid{opacity:1}
@media (prefers-reduced-motion:reduce){
  .c-line,.c-layer,.current-lab span,.c-hand.mid{transition:none}
  .current-lab span{position:static;display:block;opacity:1;transform:none}
  .current-lab{height:auto}
  .c-hand.mid{opacity:1}
  .c-pulse,.c-ring{display:none}
}

/* credits: the roll --------------------------------------------------------- */
.credits{margin-top:clamp(88px,13vh,180px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px 0 26px;overflow:hidden}
.credits-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--label);margin-bottom:22px}
.credits-head .n{color:var(--accent-text)}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq+.mq{margin-top:10px}
.mq-track{display:flex;width:max-content;align-items:center;animation:mq 110s linear infinite}
.mq-rev .mq-track{animation-direction:reverse;animation-duration:135s}
.mq-track span{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.4vw,40px);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;color:var(--bone);line-height:1.2;padding:0 clamp(18px,2vw,34px);display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
.mq-track span::after{content:"";width:.28em;height:.28em;border-radius:50%;background:var(--ember);flex:none}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .mq{mask-image:none;-webkit-mask-image:none}
  .mq-track{animation:none;width:auto;flex-wrap:wrap}
  .mq-track>span:nth-child(n+22){display:none}
}

/* ---- 02 what we do: three stages across, thin until one opens -------------
   Three bands side by side, no taller than their heads. The one under the
   cursor widens and drops its description; it closes when the cursor leaves.
   On touch (and on phones, where they stack) a tap opens it and a caret says so. */
.do-a .hl{grid-column:1/8}
.do-a .copy{grid-column:8/13;padding-top:clamp(8px,1.4vw,26px)}
.strip{display:flex;align-items:flex-start;margin-top:clamp(64px,9vh,128px)}
.stage{position:relative;flex:1 1 0;min-width:0;transition:flex-grow .6s var(--ease);--wave-w:5;--figure:var(--bone);--figure-2:rgba(244,235,220,.8);--accent:var(--ember);--rule:rgba(244,235,220,.18)}
.stage:hover,.stage.open,.stage:focus-within{flex-grow:1.9}
.stage-1{background:var(--ink-mid)}
.stage-2{background:var(--bone);--figure:var(--ink);--figure-2:rgba(8,26,34,.76);--rule:rgba(8,26,34,.16)}
.stage-3{background:var(--ember-deep);--accent:var(--bone)}
.stage-3 .dv-wave{color:var(--ink)}
.stage-head{position:relative;isolation:isolate;appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;text-align:left;color:var(--figure);width:100%;padding:clamp(28px,4vh,44px) clamp(24px,2.6vw,44px);display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:0 clamp(14px,1.6vw,24px)}
.stage-1{--sc:18,51,63}.stage-2{--sc:244,235,220}.stage-3{--sc:143,58,14}
.stage-head:focus-visible{outline-offset:-4px}
.stage-mark{display:block;width:clamp(88px,8.4vw,124px);grid-column:1;grid-row:1;margin-bottom:clamp(16px,2.4vh,26px)}
.stage-mark svg{width:100%;height:auto;display:block;overflow:hidden}
.stage-no{font-family:var(--f-mono);font-size:clamp(12.5px,.9vw,15px);letter-spacing:.24em;color:var(--accent);grid-column:1;grid-row:2;margin-bottom:8px}
.stage-3 .stage-no{color:var(--bone)}
.stage-title{font-family:var(--f-lede);font-weight:600;font-size:clamp(26px,2.5vw,36px);letter-spacing:-.025em;line-height:1.02;grid-column:1/4;grid-row:3;text-wrap:balance}
/* the photograph fills the head, printed in the box's own range of tones so the device,
   number and title on top always read; a scrim in the box colour anchors the left, where
   the type is, and the foot */
.stage-photo{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ground)}
.stage-photo img{width:100%;height:100%;object-fit:cover;object-position:64% 50%;display:block;transform:scale(1.02);transition:transform 1.6s var(--ease-out)}
.stage-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--sc),.82) 0%,rgba(var(--sc),.5) 34%,rgba(var(--sc),0) 72%),linear-gradient(0deg,rgba(var(--sc),.55) 0%,rgba(var(--sc),0) 46%)}
.stage:hover .stage-photo img,.stage.open .stage-photo img,.stage:focus-within .stage-photo img{transform:scale(1.06)}
.stage-caret{display:none;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid var(--accent);transition:transform .4s var(--ease);grid-column:3;grid-row:1/4;align-self:center}
.stage-3 .stage-caret{border-top-color:var(--bone)}
.stage.open .stage-caret{transform:rotate(180deg)}
.stage-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.stage:hover .stage-body,.stage.open .stage-body,.stage:focus-within .stage-body{grid-template-rows:1fr}
.stage-in{overflow:hidden;min-height:0;padding:0 clamp(24px,2.6vw,44px);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.stage:hover .stage-in,.stage.open .stage-in,.stage:focus-within .stage-in{opacity:1;transform:none;transition-delay:.12s}
.stage-sub{font-family:var(--f-lede);font-weight:600;font-size:clamp(20px,1.5vw,28px);line-height:1.3;letter-spacing:-.015em;color:var(--accent);padding-top:4px;max-width:30ch}
.stage-3 .stage-sub{color:var(--bone)}
.stage-items{display:grid;gap:0;margin:clamp(20px,3vh,30px) 0 clamp(30px,4.5vh,48px)}
.stage-item{padding:18px 0;border-top:1px solid var(--rule)}
.stage-item h4{font-family:var(--f-lede);font-weight:600;font-size:clamp(18px,1.25vw,23px);line-height:1.25;letter-spacing:-.01em;color:var(--figure);margin-bottom:6px}
.stage-item p{font-size:clamp(15px,.95vw,17.5px);line-height:1.5;color:var(--figure-2);max-width:52ch}
@media (hover:none){
  .stage-caret{display:block}
  .stage:hover{flex-grow:1}
  .stage:hover .stage-body{grid-template-rows:0fr}
  .stage:hover .stage-in{opacity:0;transform:translateY(10px)}
  .stage.open{flex-grow:1.9}
  .stage.open .stage-body{grid-template-rows:1fr}
  .stage.open .stage-in{opacity:1;transform:none}
}

/* ---- 03 process ---------------------------------------------------------------- */
.proc-a .hl{grid-column:7/13;grid-row:1}
.proc-a .copy{grid-column:1/6;grid-row:1;padding-top:clamp(8px,1.4vw,26px)}
.switch-unit{margin-top:32px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px 0;display:grid;grid-template-columns:76px 1fr;gap:20px 24px;align-items:start}
.switch{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;cursor:pointer;width:76px;height:38px;position:relative;flex:none}
.sw-track{position:absolute;inset:0;border:1px solid var(--figure);opacity:.85}
.sw-knob{position:absolute;top:5px;left:5px;width:26px;height:26px;background:var(--ember);transition:transform .4s var(--ease),background .4s}
.switch[aria-checked="false"] .sw-knob{transform:translateX(40px);background:var(--figure)}
.sw-read{display:grid;gap:4px;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--label);line-height:1.6;min-height:calc(3.2em + 4px)}
.sw-read .state{color:var(--accent-text);min-height:1.6em}
.sw-read .cur{display:inline-block;width:.62em;height:1.05em;background:var(--ember);vertical-align:-.16em;margin-left:.15em;animation:blink 1s steps(1,end) infinite}
.switch-unit.typing .cur{animation:none}
.sw-note{grid-column:1/-1;font-size:var(--t-small);color:var(--figure-2);line-height:1.5;margin:0}
.sw-note .off{display:none}
.switch-unit.off .sw-note .on{display:none}
.switch-unit.off .sw-note .off{display:inline}
.proc-b{margin-top:clamp(110px,16vh,220px)}
.proc-b .hl{grid-column:1/13}
.steps{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);margin-top:clamp(48px,7vh,96px)}
.step{padding:22px 0 40px;border-top:1px solid var(--rule-strong);display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:baseline}
.step:nth-child(1){grid-column:1/6;grid-row:1}
.step:nth-child(2){grid-column:4/9;grid-row:2}
.step:nth-child(3){grid-column:7/12;grid-row:3}
.step .no{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.22em;color:var(--accent-text)}
.step h3{font-family:var(--f-lede);font-weight:600;font-size:clamp(22px,1.6vw + 10px,34px);letter-spacing:-.02em;line-height:1.08}
.step p{grid-column:2;font-size:var(--t-body);color:var(--figure-2);max-width:40ch;margin-top:8px}
.figs{grid-column:1/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);margin-top:clamp(56px,8vh,110px);padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--rule-strong)}
.fig b{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(56px,7.4vw,136px);line-height:.92;letter-spacing:-.04em;color:var(--ember);font-variant-numeric:tabular-nums}
.fig span{display:block;margin-top:14px;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--label);line-height:1.7;max-width:22ch}
.netline{grid-column:1/13;margin-top:clamp(28px,4vh,44px);font-size:var(--t-small);color:var(--label);font-family:var(--f-mono);letter-spacing:.06em}
.netline b{font-weight:400;color:var(--figure)}

/* ---- 04 team: the contact sheet ------------------------------------------------ */
.crew-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(40px,6vh,80px) clamp(18px,2.4vw,40px);align-items:start}
.crew{display:contents}
.crew-intro{padding-right:clamp(0px,2vw,32px)}
.crew-intro .copy{margin-top:clamp(24px,4vh,40px)}
.person:nth-child(4n+1){margin-top:clamp(28px,4.5vw,80px)}
.person:nth-child(4n+2){margin-top:clamp(10px,1.5vw,26px)}
.person:nth-child(4n+3){margin-top:clamp(18px,3vw,52px)}
.crew-stat{margin-top:clamp(18px,3vw,52px);border:1px solid var(--rule);aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(14px,1.6vw,26px);padding:clamp(18px,2vw,28px)}
.crew-stat b{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(44px,4.4vw,84px);line-height:.9;letter-spacing:-.04em;color:var(--ember)}
.crew-stat span{display:block;margin-top:8px;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--slate);max-width:22ch;line-height:1.6}
.person-link{display:block;text-decoration:none;color:inherit}
.frame{position:relative;aspect-ratio:1;overflow:hidden;background:var(--recess);margin-bottom:20px;border:1px solid var(--rule)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out)}
.person-link:hover .frame img,.person-link:focus-visible .frame img{transform:scale(1.045)}
.frame .plate{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.person-link:hover .frame .plate,.person-link:focus-visible .frame .plate{transform:none}
.person h3{font-family:var(--f-lede);font-weight:600;font-size:clamp(20px,.6vw + 15px,27px);letter-spacing:-.015em;line-height:1.1}
.person .role{margin-top:8px;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ember);line-height:1.6}
.person .loc{margin-top:4px;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.person .more{display:inline-flex;gap:8px;align-items:center;margin-top:16px;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);position:relative;padding-bottom:4px}
.person .more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ember);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.person-link:hover .more::after,.person-link:focus-visible .more::after{transform:none;transform-origin:left}
.person .more i{font-style:normal;transition:transform .35s var(--ease)}
.person-link:hover .more i{transform:translateX(5px)}

/* ---- 05 where: the clock board ----------------------------------------------- */
.where-a .hl{grid-column:1/6;grid-row:1}
.where-a .copy{grid-column:1/6;grid-row:2;margin-top:clamp(28px,5vh,56px)}
.copy .crewlab{margin-top:36px;padding-top:26px;border-top:1px solid var(--rule)}
.clocks{grid-column:7/13;grid-row:1/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong);align-self:start}
.clock{background:var(--ink);color:var(--bone);padding:clamp(20px,2.2vw,34px);display:flex;flex-direction:column;gap:8px;min-height:clamp(170px,19vw,250px);position:relative;overflow:hidden;transition:background .8s var(--ease)}
.clock.day{background:var(--ember)}
.clock .city{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.3vw,40px);letter-spacing:-.025em;line-height:1;color:var(--bone)}
.clock .country{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.clock.day .country{color:var(--bone)}
.clock time{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-mono);font-size:clamp(30px,2.9vw,50px);color:var(--ember);font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1}
.clock.day time{color:var(--bone)}
.clock time small{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.clock.day time small{color:var(--bone)}
.clock time b{font-weight:400;animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.clock time b{animation:none}}

/* ---- 06 work: the wall ---------------------------------------------------------- */
.work-a .hl{grid-column:1/8}
.work-a .copy{grid-column:8/13;padding-top:clamp(8px,1.4vw,26px)}
.workfigs{display:flex;gap:clamp(28px,4vw,72px);flex-wrap:wrap;margin-top:clamp(40px,6vh,72px)}
.workfigs div{display:grid;gap:6px}
.workfigs b{font-family:var(--f-display);font-weight:600;font-size:clamp(34px,3.4vw,60px);letter-spacing:-.035em;line-height:.95;color:var(--bone)}
.workfigs span{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,5.5vw,100px) clamp(12px,1.8vw,30px);margin-top:clamp(56px,8vh,112px);align-items:start}
.poster{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--recess);will-change:transform}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease-out)}
.poster:hover img{transform:scale(1.045)}
.poster figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);background:var(--ink);transform:translateY(100%);transition:transform .5s var(--ease);display:flex;justify-content:space-between;gap:10px}
.poster figcaption i{font-style:normal;color:var(--ember)}
.poster:hover figcaption,.poster:focus-within figcaption{transform:none}
.w1{grid-column:1/5}.w2{grid-column:5/8;margin-top:16%}.w3{grid-column:9/13;margin-top:34%}
.w4{grid-column:2/5;margin-top:-4%}.w5{grid-column:6/10}.w6{grid-column:10/13;margin-top:22%}

/* ---- 07 next: the closer ----------------------------------------------------- */
.next-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,72px)}
.cta-hl{font-family:var(--f-display);font-weight:600;font-size:min(var(--t-cta),var(--fit));line-height:.95;letter-spacing:-.035em;color:var(--bone)}
.cta-hl .turn{color:var(--ember)}
.mark-close{--wave-w:3.2;width:clamp(150px,17vw,280px)}
.mark-close svg{width:100%;height:auto;display:block;overflow:hidden}
.horizon{width:100%;height:auto;display:block;overflow:visible;margin:clamp(28px,5vh,64px) 0 clamp(28px,5vh,64px)}
.horizon path{fill:none;stroke:var(--ember);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:2600;stroke-dashoffset:2600;transition:stroke-dashoffset 3s var(--ease) .1s}
.horizon.in path{stroke-dashoffset:0}
.next-bottom{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center}
.next-bottom .copy{max-width:44ch}
.next-bottom .copy p{font-size:var(--t-lede);line-height:1.45;color:var(--bone)}
.cta-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--ember);color:var(--bone);text-decoration:none;padding:clamp(26px,3.6vw,52px) clamp(22px,3vw,44px);font-family:var(--f-lede);font-weight:600;font-size:clamp(20px,1.9vw,32px);letter-spacing:-.015em;line-height:1.15;transition:background .45s var(--ease),color .45s var(--ease)}
.cta-bar i{font-style:normal;font-size:1.25em;line-height:1;transition:transform .45s var(--ease);flex:none}
.cta-bar:hover,.cta-bar:focus-visible{background:var(--bone);color:var(--ink)}
.cta-bar:hover i{transform:translateX(10px)}

/* ---- footer ----------------------------------------------------------------- */
.foot{background:var(--ink);color:var(--bone);border-top:1px solid var(--rule);padding:clamp(56px,8vh,96px) 0 36px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.foot-brand svg{width:clamp(180px,16vw,260px);height:auto;display:block}
.foot-brand p{margin-top:22px;font-family:var(--f-lede);font-weight:600;font-size:var(--t-lede);letter-spacing:-.01em;line-height:1.3;max-width:16ch;color:var(--bone)}
.foot .foot-h{font-family:var(--f-mono);font-weight:400;font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--slate);margin-bottom:18px}
.foot li+li{margin-top:8px}
.foot a{text-decoration:none;color:rgba(244,235,220,.82);font-size:var(--t-small);transition:color .3s}
.foot a:hover{color:var(--ember)}
.foot li i{font-family:var(--f-mono);font-style:normal;font-size:var(--t-label);letter-spacing:.18em;color:var(--slate);margin-right:10px}
.foot-cities li{font-size:var(--t-small);color:rgba(244,235,220,.82)}
.foot-cities li i{color:var(--ember)}
.foot-bottom{margin-top:clamp(44px,7vh,80px);padding-top:22px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.foot-bottom a{font-size:inherit;color:var(--bone)}

/* ---- responsive --------------------------------------------------------------- */
.nav-cta{display:none}
@media (max-width:1359px){
  .nav-links{display:none}
  .nav-chapter{display:flex;grid-column:2}
  .nav-cta{display:inline-flex;grid-column:3}
  .nav-menu{display:inline-flex;grid-column:4}
}
@media (max-width:1100px){
  .hero{--art-w:min(190vw,240vh);--sun-y:39svh;--wave-w:2.6}
  @supports not (height:100svh){.hero{--sun-y:38vh}}
  .who-a .hl,.do-a .hl,.work-a .hl,.proc-a .hl,.where-a .hl{grid-column:1/13;grid-row:auto}
  .stage-head{padding:24px 22px}
  .stage-mark{width:clamp(64px,8vw,96px)}
  .stage-title{font-size:clamp(20px,2.6vw,28px)}
  .who-a .copy,.do-a .copy,.work-a .copy,.proc-a .copy,.where-a .copy{grid-column:1/11;padding-top:0;grid-row:auto}
  .who-a .hl{order:1}.who-a .frames{order:2;grid-column:1/11;grid-row:auto;margin-top:0}.who-a .copy{order:3}
  .clocks{grid-column:1/13;grid-row:auto;margin-top:clamp(40px,6vh,72px)}
  .who-b .current{grid-column:1/13}
  .who-b .copy{grid-column:1/11;margin-top:clamp(28px,5vh,56px)}
  .hl{font-size:min(clamp(38px,8.6vw,104px),var(--fit));line-height:1}
  .step:nth-child(1){grid-column:1/8}.step:nth-child(2){grid-column:3/10}.step:nth-child(3){grid-column:5/12}
  .crew-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .person:nth-child(4n+1),.person:nth-child(4n+2),.person:nth-child(4n+3){margin-top:0}
  .person:nth-child(2n+1),.crew-stat{margin-top:clamp(28px,6vw,80px)}
  .next-bottom{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--nav-h:60px}
  .nav{gap:14px}
  .nav-chapter .name{display:none}
  .nav-chapter .bar{width:36px}
  .hero{--art-w:250vw;--sun-x:70vw;--sun-y:37svh;--wave-w:3.8;padding-bottom:36px}
  @supports not (height:100svh){.hero{--sun-y:36vh}}
  .hero-lockup{width:min(68vw,300px)}
  .hero-hl{font-size:min(clamp(38px,11.4vw,64px),var(--fit));line-height:1}
  .sec{padding:clamp(72px,11vh,110px) 0}
  .beat{gap:22px}
  .who-b .hl{max-width:none}
  .c-hand{font-size:20px;letter-spacing:.18em}
  .c-hand.mid{font-size:15px}
  .c-line{stroke-width:3.2}
  .current.direct .c-line{stroke-width:4.6}
  .c-layer{stroke-width:2.6}
  .credits-head span+span{display:none}
  .credits{padding:18px 0 20px}
  .who-a .frames{grid-column:1/13}
  .frames-cap span+span{display:none}
  .nav-cta{display:none}
  .stage-caret{display:block}
  .strip{flex-direction:column;align-items:stretch}
  .stage,.stage:hover,.stage.open,.stage:focus-within{flex:none}
  .stage-head{padding:24px var(--gutter);gap:0 16px;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center}
  .stage-mark{width:64px;grid-column:auto;grid-row:auto;margin:0}
  .stage-no{align-self:center;grid-column:auto;grid-row:auto;margin:0}
  .stage-title{align-self:center;font-size:clamp(22px,6vw,28px);grid-column:auto;grid-row:auto}
  .stage-caret{grid-column:auto;grid-row:auto}
  .stage-photo img{object-position:78% 50%}
  .stage-photo::after{background:linear-gradient(90deg,rgba(var(--sc),.9) 0%,rgba(var(--sc),.7) 45%,rgba(var(--sc),.1) 100%)}
  .stage-sub{font-size:var(--t-lede)}
  .stage-item h4{font-size:19px}
  .stage-item p{font-size:var(--t-small)}
  .stage-in{padding:0 var(--gutter)}
  .stage-items{margin:16px 0 24px}
  .switch-unit{grid-template-columns:auto 1fr}
  .steps{gap:0}
  .step:nth-child(1),.step:nth-child(2),.step:nth-child(3){grid-column:1/13}
  .step{grid-template-columns:1fr;gap:6px}
  .step p{grid-column:1}
  .figs{grid-template-columns:1fr;gap:28px}
  .crew-grid{grid-template-columns:1fr;gap:44px}
  .person:nth-child(2n+1),.crew-stat{margin-top:0}
  .crew-stat{aspect-ratio:auto;flex-direction:row;justify-content:space-between;gap:24px}
  .clocks{grid-template-columns:1fr 1fr}
  .clock{min-height:150px;padding:16px}
  .clock .city{font-size:22px}
  .clock time{font-size:28px}
  .wall{gap:12px}
  .w1{grid-column:1/8}.w2{grid-column:8/13;margin-top:24%}.w3{grid-column:1/6;margin-top:-6%}.w4{grid-column:6/13;margin-top:10%}.w5{grid-column:1/8;margin-top:-10%}.w6{grid-column:8/13;margin-top:12%}
  .workfigs{gap:24px 36px}
  .next-top{grid-template-columns:1fr;gap:24px}
  .mark-close{width:min(38vw,150px);justify-self:end}
  .cta-hl{font-size:min(clamp(40px,12vw,64px),var(--fit))}
  .cta-bar{padding:22px 20px;font-size:19px}
  .foot-grid{grid-template-columns:1fr;gap:36px}
  .menu li a{font-size:clamp(28px,8.4vw,44px)}
}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-ramp],.js .hl .ln>span,.js .cta-hl .ln>span,.js .hero-hl .ln>span,.js .hero-lockup,.js .hero-art .dv-sun,.js .hero-art .dv-rings{opacity:1;transform:none;transition:none}
  .horizon path{stroke-dashoffset:0;transition:none}
  .curtain,.menu,.menu li a,.btn::before,.frame img,.poster img,.frames-tag,.stage-photo img{transition:none}
}
@media (hover:none){
  .poster figcaption{transform:none}
}