/* ============================================================
   CHRISTIAN DEL GROSSO — shared design system
   Loaded by every page. Page-specific rules live in each file.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --bg:#08090A;
  --bg-2:#0D0F11;
  --bg-3:#131619;
  --fg:#EFEDE8;
  --muted:#8C8C86;
  --dim:#5A5A56;
  --line:rgba(239,237,232,.13);
  --line-soft:rgba(239,237,232,.07);
  --accent:#E8412E;

  --press:'Source Serif 4','Charter','Georgia','Times New Roman',serif;
  --serif:'Instrument Serif','Didot','Bodoni MT','Hoefler Text',Garamond,Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --gut:clamp(20px,4.5vw,72px);
  --nav-h:74px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#26292c}
::-webkit-scrollbar-thumb:hover{background:#3a3e42}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- TYPE ---------- */
.label{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
}
.label--accent{color:var(--accent)}
.label--fg{color:var(--fg)}
.display{font-family:var(--serif);font-weight:400;line-height:.86;letter-spacing:-.025em;margin:0;text-wrap:balance}
.h1{font-size:clamp(52px,10vw,168px)}
.h2{font-size:clamp(38px,6.2vw,86px)}
.h3{font-size:clamp(26px,3.4vw,46px)}
.lead{font-size:clamp(17px,1.55vw,22px);line-height:1.55;color:#C9C7C2;font-weight:300;letter-spacing:-.01em}
.body-sm{font-size:14.5px;line-height:1.75;color:var(--muted)}
em.it{font-style:italic}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1560px;margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(70px,9vw,150px);position:relative}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}
.sec-head{display:grid;gap:26px;margin-bottom:clamp(40px,5.5vw,80px)}
@media(min-width:900px){
  .sec-head{grid-template-columns:132px minmax(0,1fr) minmax(0,.85fr);gap:40px;align-items:start}
}
.sec-head .idx{padding-top:.7em}
.sec-head .note{padding-top:.85em}

/* ---------- TEXTURE ---------- */
.grain{
  position:fixed;inset:-150%;z-index:9000;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%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='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grain 700ms steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,3%)}40%{transform:translate(4%,-5%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}
}
/* The scanline is a full-viewport overlay, so it also falls across the white
   press clippings. On the dark chrome it costs about half a level of black
   and is invisible; on a #FAF9F6 card the old strength banded at 16 levels,
   which read as a screen artifact rather than texture. Halved: still there on
   photo highlights, now a paper grain on the clippings instead of stripes. */
.scanline{
  position:fixed;inset:0;z-index:8999;pointer-events:none;opacity:.30;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.09) 2px 3px);
}

/* ---------- CURSOR ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(239,237,232,.55);display:grid;place-items:center;opacity:0;
  transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),
             background-color .35s,border-color .35s,opacity .3s;
}
.cursor__t{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bg);opacity:0;transition:opacity .3s;white-space:nowrap;
}
.cursor.is-on{opacity:1}
.cursor.is-hot{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--fg);border-color:var(--fg)}
.cursor.is-hot .cursor__t{opacity:1}
.cursor.is-sm{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--fg)}
@media(hover:none),(max-width:900px){.cursor{display:none}}

/* ============================================================
   CURTAIN — page transition
   Only ever visible when JS is running (html.js), so a no-JS
   visitor gets plain, unblocked navigation.
   ============================================================ */
.curtain{
  position:fixed;inset:0;z-index:9700;background:var(--bg);
  display:grid;place-items:center;pointer-events:none;
  transform:translateY(100%);
}
html.js .curtain{transform:translateY(0)}          /* page arrives covered */
html.js .curtain.is-revealing{
  transform:translateY(-100%);
  transition:transform .78s var(--ease-io);
}
html.js .curtain.is-covering{
  transform:translateY(0);
  transition:transform .62s var(--ease-io);
}
html.js .curtain.is-armed{transform:translateY(100%);transition:none}
.curtain__t{
  font-family:var(--serif);font-size:clamp(34px,7vw,104px);line-height:1;
  letter-spacing:-.03em;color:var(--fg);opacity:0;transform:translateY(18px);
}
.curtain.is-covering .curtain__t,
html.js .curtain:not(.is-revealing):not(.is-armed) .curtain__t{
  opacity:1;transform:none;transition:opacity .45s var(--ease) .12s,transform .6s var(--ease) .12s;
}
.curtain.is-revealing .curtain__t{opacity:0;transition:opacity .3s}
.curtain__bar{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
}
.curtain.is-covering .curtain__bar{transform:scaleX(1);transition:transform .62s var(--ease-io)}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;padding:22px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-bottom:1px solid transparent;
  transition:transform .5s var(--ease),background-color .5s,padding .5s,border-color .5s;
}
.nav.is-stuck{
  background:rgba(8,9,10,.72);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  padding-block:15px;border-bottom-color:var(--line-soft);
}
.nav.is-hidden{transform:translateY(-101%)}
.nav__logo{font-family:var(--serif);font-size:21px;letter-spacing:.02em;line-height:1;display:flex;align-items:center;gap:10px}
.nav__logo b{font-weight:400}
.nav__logo i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:block;animation:pulse 2.6s var(--ease-io) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.nav__links{display:none;gap:30px;align-items:center}
@media(min-width:1000px){.nav__links{display:flex}}
.nav__links a{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);transition:color .3s;position:relative;padding-block:4px;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav__links a:hover{color:var(--fg)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__links a[aria-current="page"]{color:var(--fg)}
.nav__links a[aria-current="page"]::after{transform:scaleX(1);background:var(--accent)}
.nav__cta{
  display:none;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line);padding:11px 20px;border-radius:99px;
  transition:background-color .4s,color .4s,border-color .4s;
}
@media(min-width:1000px){.nav__cta{display:block}}
.nav__cta:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.nav__burger{display:grid;gap:5px;width:26px;padding:6px 0}
@media(min-width:1000px){.nav__burger{display:none}}
.nav__burger i{display:block;height:1px;background:var(--fg);transition:transform .4s var(--ease),opacity .3s}
body.menu-open .nav__burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .nav__burger i:nth-child(2){opacity:0}
body.menu-open .nav__burger i:nth-child(3){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:7900;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;padding:100px var(--gut) 48px;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io);pointer-events:none;
}
body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu a{
  font-family:var(--serif);font-size:clamp(34px,9vw,58px);line-height:1.18;
  display:flex;align-items:baseline;gap:14px;opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.menu a small{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--dim)}
body.menu-open .menu a{opacity:1;transform:none}
body.menu-open .menu a:nth-child(1){transition-delay:.18s}
body.menu-open .menu a:nth-child(2){transition-delay:.24s}
body.menu-open .menu a:nth-child(3){transition-delay:.30s}
body.menu-open .menu a:nth-child(4){transition-delay:.36s}
body.menu-open .menu a:nth-child(5){transition-delay:.42s}
body.menu-open .menu a:nth-child(6){transition-delay:.48s}
body.menu-open .menu a:nth-child(7){transition-delay:.54s}

/* ---------- MEDIA SLOTS ---------- */
.media{position:relative;overflow:hidden;background:var(--bg-2);border:1px solid var(--line-soft)}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.1s var(--ease)}
.media.is-loaded img,.media.is-loaded video{opacity:1}
.media__ph{
  position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;padding:26px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.017) 0 2px,transparent 2px 9px),
    radial-gradient(130% 95% at 50% 0%,rgba(232,65,46,.10),transparent 66%),
    linear-gradient(155deg,#22262B 0%,#171B1F 48%,#23272C 100%);
}
.media.is-loaded .media__ph{display:none}
.media__ph::before{content:'';position:absolute;inset:14px;border:1px dashed rgba(239,237,232,.22);pointer-events:none}
.media__ph b{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,237,232,.78);font-weight:500}
.media__ph s{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:rgba(239,237,232,.4);text-decoration:none;word-break:break-all}
.media__ph i{display:block;width:34px;height:34px;margin:0 auto 6px;border-radius:50%;border:1px solid rgba(239,237,232,.34);position:relative}
.media__ph i::after{
  content:'';position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);
  border-left:9px solid rgba(239,237,232,.6);border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
}
/* The Boot Lake stills are 4096x1716 — true 2.39:1 scope, straight off the
   grade. They get their own ratio rather than being cropped into 21:9 or 16:9,
   because on a film page the frame is the whole point. */
.media--scope{aspect-ratio:2.39}
.media--ratio-21{aspect-ratio:21/9}
.media--ratio-16{aspect-ratio:16/9}
.media--ratio-43{aspect-ratio:4/3}
.media--ratio-32{aspect-ratio:3/2}
.media--ratio-23{aspect-ratio:2/3}
.media--ratio-34{aspect-ratio:3/4}
.media--ratio-45{aspect-ratio:4/5}
.media--ratio-916{aspect-ratio:9/16}

/* ---------- PAGE BANNER (top of every section page) ---------- */
.phead{position:relative;padding-top:calc(var(--nav-h) + clamp(56px,8vw,120px));padding-bottom:clamp(44px,6vw,90px);overflow:hidden}
.phead__bg{position:absolute;inset:0;z-index:0}
.phead__bg .media{position:absolute;inset:0;border:0;aspect-ratio:auto}
.phead__bg .media img{transform:scale(1.04)}
.phead__veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(8,9,10,.9) 0%,rgba(8,9,10,.55) 46%,rgba(8,9,10,.2) 100%),
    linear-gradient(180deg,rgba(8,9,10,.88) 0%,rgba(8,9,10,.42) 40%,rgba(8,9,10,.95) 100%),
    radial-gradient(120% 100% at 30% 50%,transparent 12%,rgba(8,9,10,.78) 100%);
}
.phead__in{position:relative;z-index:2}
.phead__crumb{display:flex;align-items:center;gap:12px;margin-bottom:clamp(20px,2.6vw,34px)}
.phead__crumb i{width:26px;height:1px;background:var(--accent);display:block}
.phead h1{margin:0}
.phead__sub{margin:clamp(20px,2.4vw,32px) 0 0;max-width:56ch}

/* Distribution line under the Acting hero. Set as a credential strip rather
   than as logos: names in the display serif, hairline-separated, so it reads
   as a fact about where the work has run and not as a badge wall. */
.streams{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(24px,2.8vw,38px);
}
.streams__l{display:flex;flex-wrap:wrap;align-items:baseline}
.streams__l b{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,1.7vw,26px);letter-spacing:-.005em;line-height:1.1;
  color:#E6E3DE;padding-inline:clamp(12px,1.2vw,18px);
  border-left:1px solid var(--line);
}
.streams__l b:first-child{padding-left:0;border-left:0}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line);padding:14px 24px;border-radius:99px;
  transition:background-color .4s,color .4s,border-color .4s;
}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--solid:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- STATS ---------- */
.stats{display:grid;gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
@media(min-width:680px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--bg-2);padding:clamp(26px,3.2vw,44px) clamp(20px,2.2vw,34px);display:grid;gap:9px;container-type:inline-size}
/* Sized against the column, not the viewport: at 1440 a quarter-width cell is
   only ~290px of usable space, so a viewport-scaled 78px broke "150–250M+"
   onto two lines and stranded the suffix. Block, not flex, so that if a value
   ever does wrap the suffix follows the last line instead of floating away. */
.stat b{font-family:var(--serif);font-size:clamp(42px,5.4vw,78px);line-height:.92;font-weight:400;letter-spacing:-.03em;display:block}
@supports (container-type:inline-size){
  .stat b{font-size:clamp(38px,19cqi,78px)}
}
.stat b i{font-style:normal;font-size:.46em;margin-left:.1em;color:var(--accent)}
.stat p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:26ch}

.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.minis div{background:var(--bg-2);padding:clamp(18px,2vw,26px);display:grid;gap:7px;align-content:start}
.minis b{font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);line-height:1;font-weight:400;letter-spacing:-.02em}

/* ---------- PULL QUOTE ---------- */
.pull{border-left:1px solid var(--accent);padding-left:clamp(18px,2.2vw,30px)}
.pull p{font-family:var(--serif);font-size:clamp(22px,2.5vw,34px);line-height:1.24;letter-spacing:-.015em;margin:0 0 12px;color:#E6E3DE}

/* ---------- TIMELINE / FACT ROWS ---------- */
.tl{border-top:1px solid var(--line-soft)}
.tl div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.tl p{margin:0;font-size:14.5px;color:#C0BEB9}

/* ---------- FOOTER ---------- */
.foot{padding:clamp(44px,6vw,80px) 0 40px;border-top:1px solid var(--line-soft);background:var(--bg)}
.foot__grid{display:grid;gap:clamp(30px,4vw,60px)}
@media(min-width:860px){.foot__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}}
.foot__grid h4{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,34px);margin:0 0 12px;letter-spacing:-.02em}
.foot__nav{display:grid;gap:9px}
.foot__nav a{font-size:14px;color:var(--muted);transition:color .3s;justify-self:start}
.foot__nav a:hover{color:var(--fg)}
.foot__base{
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center;
  margin-top:clamp(38px,5vw,64px);padding-top:24px;border-top:1px solid var(--line-soft);
}
.foot__base a:hover{color:var(--fg)}

/* ---------- REVEALS ---------- */
[data-r]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
[data-r].in{opacity:1;transform:none}
[data-r="fade"]{transform:none}
/* NB: clip-path must sit on a CHILD — clipping an observed element zeroes its
   IntersectionObserver area and the reveal never fires. */
[data-r="clip"]{opacity:1;transform:none}
[data-r="clip"] > .media{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease-io)}
[data-r="clip"].in > .media{clip-path:inset(0 0 0 0)}
.stagger > *{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.stagger.in > *{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-r],.stagger > *{opacity:1!important;transform:none!important;clip-path:none!important}
  .grain,.scanline{display:none}
  html.js .curtain{transform:translateY(-100%)}
}

/* ============================================================
   COMPONENTS — shared across section pages
   ============================================================ */

/* ---------- PORTAL (home) ---------- */
/* Stacked, not side-by-side: the tiles get the full width so each image
   actually reads instead of being cropped to a slat. */
.portal{
  min-height:78svh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(20px,2.6vw,36px);
  padding:calc(var(--nav-h) + 16px) var(--gut) clamp(18px,2.2vw,28px);
}
.portal__top{display:grid;gap:clamp(20px,2.6vw,34px);align-items:end}
@media(min-width:900px){
  .portal__top{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(30px,4vw,72px)}
}
.portal__eye{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-bottom:clamp(14px,1.8vw,22px)}
.portal__eye span{display:flex;align-items:center;gap:16px}
.portal__eye span::after{content:'';width:3px;height:3px;border-radius:50%;background:var(--dim)}
.portal__eye span:last-child::after{display:none}
.portal__name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(48px,8.2vw,132px);line-height:.85;letter-spacing:-.038em;margin:0;
}
.portal__name .ln{display:block;overflow:hidden}
.portal__name .ln > span{display:block;transform:translateY(105%);animation:portalUp 1.15s var(--ease) forwards}
.portal__name .ln:nth-child(2) > span{animation-delay:.09s}
.portal__name em{font-style:italic;color:#DAD7D1}
@keyframes portalUp{to{transform:translateY(0)}}
.portal__line{margin:0;max-width:42ch}
.portal__meta{
  display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  gap:18px clamp(24px,3.4vw,48px);margin-top:clamp(18px,2.2vw,28px);
  padding-top:18px;border-top:1px solid var(--line-soft);
}
.portal__meta div{display:grid;gap:4px}
.portal__meta b{font-family:var(--serif);font-size:clamp(22px,2.2vw,32px);line-height:1;font-weight:400}
.portal__meta b i{font-style:normal;color:var(--accent)}

/* ---------- DOORS ---------- */
.doors{display:grid;gap:clamp(8px,1vw,14px);grid-template-columns:repeat(2,1fr)}
@media(min-width:960px){.doors{grid-template-columns:repeat(4,1fr)}}
.door{
  position:relative;overflow:hidden;display:block;isolation:isolate;
  border:1px solid var(--line-soft);background:var(--bg-2);aspect-ratio:3/2;
}
@media(min-width:960px){.door{aspect-ratio:4/3}}
.door .media{position:absolute;inset:0;border:0;aspect-ratio:auto}
/* Legible at rest — only lightly desaturated, not crushed to mud. */
.door .media img{
  transform:scale(1.03);
  filter:grayscale(.45) contrast(1.03) brightness(.92);
  transition:transform 1.1s var(--ease),filter .7s var(--ease);
}
.door:hover .media img{filter:grayscale(0) contrast(1.05) brightness(1.04)}
.door__veil{
  position:absolute;inset:0;z-index:1;transition:opacity .7s var(--ease);
  background:linear-gradient(180deg,rgba(8,9,10,.34) 0%,rgba(8,9,10,0) 30%,rgba(8,9,10,.42) 64%,rgba(8,9,10,.9) 100%);
}
.door:hover .door__veil{opacity:.86}
.door__in{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(14px,1.5vw,20px);
}
.door__in > span{display:block}
.door__n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:rgba(239,237,232,.6)}
.door__t{
  font-family:var(--serif);font-size:clamp(24px,2.5vw,40px);line-height:1;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:10px;text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.door__t s{
  text-decoration:none;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--accent);
  opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.door:hover .door__t s{opacity:1;transform:none}
.door__d{
  display:block;margin:9px 0 0;font-size:12.5px;line-height:1.5;color:#C6C4BF;max-width:38ch;
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity .45s var(--ease),max-height .6s var(--ease);
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
@media(min-width:960px){.door:hover .door__d{opacity:1;max-height:80px}}
@media(max-width:959px){.door__d{display:none}}
.door::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);z-index:3;
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.door:hover::after{transform:scaleX(1)}



/* ---------- NEXT-PAGE LINK ---------- */
.next{border-top:1px solid var(--line-soft);background:var(--bg)}
.next a{display:block;padding:clamp(40px,6vw,86px) 0;position:relative;overflow:hidden}
.next .label{display:block;margin-bottom:14px}
.next b{
  font-family:var(--serif);font-weight:400;font-size:clamp(38px,7vw,104px);line-height:.94;
  letter-spacing:-.03em;display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  transition:transform .8s var(--ease);
}
.next b svg{width:clamp(26px,3.4vw,52px);height:auto;flex:0 0 auto;stroke:var(--accent);fill:none;stroke-width:1.2}
.next a:hover b{transform:translateX(clamp(8px,1.4vw,22px))}

/* ---------- PLATFORM TABLE ---------- */
.plat{border-top:1px solid var(--line)}
.plat a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:baseline;
  padding:clamp(15px,1.8vw,22px) 0;border-bottom:1px solid var(--line-soft);
  position:relative;transition:padding-left .5s var(--ease);
}
@media(min-width:760px){.plat a{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto auto;gap:24px}}
.plat a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .45s var(--ease)}
@media(hover:hover){.plat a:hover{padding-left:20px}.plat a:hover::before{width:2px}.plat a:hover .plat__n{color:#fff}}
.plat__n{font-family:var(--serif);font-size:clamp(21px,2.3vw,32px);line-height:1;letter-spacing:-.02em;transition:color .35s}
.plat__h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
.plat__v{font-family:var(--serif);font-size:clamp(21px,2.3vw,32px);line-height:1;letter-spacing:-.02em;color:#D8D5D0}
.plat__i{font-size:13px;color:var(--muted);text-align:right}

/* The follower count, drawn as well as written. One series, so no legend and
   no colour encoding: the row label is the direct label and the bar carries
   magnitude only. Recessive fill, rounded data-end, anchored to the left edge
   of the row so every bar shares a baseline. --w is set per row by build.py
   from the counts themselves, scaled to the largest platform. */
.plat a{isolation:isolate}
.plat__bar{
  position:absolute;left:0;bottom:-1px;height:3px;width:var(--w,0%);
  background:rgba(239,237,232,.34);border-radius:0 3px 3px 0;
  z-index:0;pointer-events:none;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease),background-color .4s;
}
.plat.is-in .plat__bar{transform:scaleX(1)}
@media(hover:hover){.plat a:hover .plat__bar{background:var(--accent)}}
@media(prefers-reduced-motion:reduce){
  .plat__bar{transform:scaleX(1);transition:none}
}

/* ============================================================
   ARCHIVE BAND
   Full-bleed, edge to edge, deliberately dense. The page claims 4,000
   originals; a tidy three-up gallery would argue against it.
   ============================================================ */
.band{
  width:100vw;margin-inline:calc(50% - 50vw);
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
}
@media(min-width:560px){.band{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.band{grid-template-columns:repeat(6,1fr)}}
.band__f{min-width:0;overflow:hidden}
.band__f .media{aspect-ratio:3/2;border:0}
.band__f .media img{transition:transform 1.1s var(--ease),filter .6s}
@media(hover:hover){
  .band__f:hover .media img{transform:scale(1.06)}
  .band:hover .band__f:not(:hover) .media img{filter:brightness(.55)}
}
.band__cap{
  display:flex;justify-content:space-between;gap:16px;
  padding-top:clamp(12px,1.4vw,18px);
}

/* ---------- CREDITS TABLE ---------- */
.tbl{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;
  padding:clamp(18px,2.1vw,26px) 0;border-bottom:1px solid var(--line-soft);
  align-items:baseline;position:relative;transition:padding-left .55s var(--ease);
}
@media(min-width:860px){.row{grid-template-columns:74px minmax(0,2.1fr) minmax(0,1.35fr) minmax(0,.9fr) auto;gap:24px}}
.row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .5s var(--ease)}
@media(hover:hover) and (min-width:860px){
  .row:hover{padding-left:22px}
  .row:hover::before{width:2px}
  .row:hover .row__t{color:#fff}
}
.row__n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.row__t{font-family:var(--serif);font-size:clamp(24px,2.9vw,40px);line-height:1.02;letter-spacing:-.02em;transition:color .35s}
.row__t sup{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--accent);vertical-align:super;margin-left:8px}
.row__r{font-size:14px;color:var(--muted)}
.row__y{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim)}
.row__go{display:none;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .45s var(--ease)}
@media(min-width:860px){.row__go{display:block}}
.row:hover .row__go{opacity:1;transform:none}

.peek{
  position:fixed;top:0;left:0;z-index:7000;pointer-events:none;width:min(300px,26vw);aspect-ratio:3/2;
  opacity:0;transform:translate(-50%,-50%) scale(.9);overflow:hidden;border:1px solid var(--line);
  transition:opacity .4s var(--ease),transform .55s var(--ease);
}
.peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek .media{position:absolute;inset:0;border:0;aspect-ratio:auto}
@media(hover:none),(max-width:860px){.peek{display:none}}

/* ---------- BRAND WALL + CASES ---------- */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(min-width:640px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.logos{grid-template-columns:repeat(4,1fr)}}
.logos div{
  background:var(--bg);aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:14px;
  font-family:var(--serif);font-size:clamp(17px,1.6vw,24px);color:#4E5154;letter-spacing:-.01em;
  transition:color .45s,background-color .45s;
}
.logos div:hover{color:var(--fg);background:var(--bg-3)}
.cases{display:grid;gap:clamp(20px,2.4vw,36px)}
@media(min-width:860px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{display:grid;gap:16px;align-content:start}
.case h4{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.1vw,28px);line-height:1.14;margin:0;letter-spacing:-.015em}
.case__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.case__nums div{background:var(--bg-3);padding:clamp(16px,1.8vw,24px) clamp(12px,1.2vw,18px);display:grid;gap:6px;align-content:center;min-height:clamp(100px,11vw,140px)}
.case__nums b{font-family:var(--serif);font-size:clamp(24px,2.7vw,38px);line-height:1;font-weight:400;letter-spacing:-.02em}
.case__nums b i{font-style:normal;color:var(--accent);font-size:.6em}
.case__nums .label{font-size:9px;letter-spacing:.16em}

/* ---------- PRESS ---------- */
/* ============================================================
   PRESS CLIPPINGS
   Off-white cards on a black page, the way press is presented in an EPK:
   outlet masthead, hairline, the real headline in a bold serif, then the
   domain and date. Trade readers recognise the shape before they read a
   word of it, which is the whole point of inverting them.

   Mastheads are typographic only — the outlet's name set in a face that
   matches its character. No logo files are used or shipped.
   ============================================================ */
.clips{display:grid;gap:clamp(12px,1.2vw,18px);grid-template-columns:1fr}
@media(min-width:700px){.clips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.clips{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Two-up variant, for pages that quote a couple of pieces rather than a wall. */
@media(min-width:700px){.clips--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.clips--2{grid-template-columns:repeat(2,minmax(0,1fr))}}

.clips a{
  background:#FAF9F6;color:#0B0B0B;
  padding:clamp(24px,2.2vw,32px) clamp(22px,2vw,30px) clamp(20px,1.8vw,26px);
  display:flex;flex-direction:column;gap:clamp(14px,1.3vw,18px);
  border-radius:3px;min-width:0;
  box-shadow:0 1px 0 rgba(0,0,0,.5),0 18px 34px -22px rgba(0,0,0,.9);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.clips a:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(0,0,0,.5),0 26px 44px -20px rgba(0,0,0,1);
}

/* The masthead, and the hairline that separates it from the headline. */
.clip__m{
  display:block;color:#111;line-height:1;
  padding-bottom:clamp(12px,1.1vw,16px);
  border-bottom:1px solid rgba(0,0,0,.17);
}
.clip__m--bold{
  font-family:var(--sans);font-weight:600;font-size:clamp(15px,1.25vw,18px);
  letter-spacing:.045em;text-transform:uppercase;
}
.clip__m--wide{
  font-family:var(--sans);font-weight:600;font-size:clamp(15px,1.25vw,18px);
  letter-spacing:.19em;text-transform:uppercase;
}
.clip__m--serif{
  font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.75vw,26px);
  letter-spacing:.035em;text-transform:uppercase;
}
.clip__m--time{
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.85vw,28px);
  letter-spacing:.02em;text-transform:uppercase;color:#C8102E;
}

/* The headline itself, set the way a headline is set. */
.clips q{
  quotes:none;font-family:var(--press);font-weight:600;
  font-size:clamp(16.5px,1.32vw,19px);line-height:1.32;letter-spacing:-.005em;
  color:#111;text-wrap:pretty;
}

.clip__s{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:auto;padding-top:clamp(8px,.9vw,12px);
  font-family:var(--sans);font-weight:400;font-size:12.5px;
  color:#6E6C68;letter-spacing:.005em;
}
.clip__s span:last-child{white-space:nowrap}

/* The custom cursor's hot state is an off-white disc — invisible on a white
   card. Over a clipping it inverts to ink. */
.cursor.is-inv{background:#0B0B0B;border-color:#0B0B0B}
.cursor.is-inv .cursor__t{color:#FAF9F6}

@media print{
  .clips a{box-shadow:none;border:1px solid #ddd}
}

/* ============================================================
   LOGO WALL
   The marks themselves, on the deck's own off-white plate — the same plate
   the press clippings use, so the two light surfaces on the site read as one
   system. Logos are shipped as flat crops from the EPK rather than fetched
   brand assets, and the card edge is drawn here rather than baked into the
   image, so the corner radius stays consistent with everything else.
   ============================================================ */
.logowall{display:grid;gap:clamp(8px,1vw,14px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){.logowall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.logowall{grid-template-columns:repeat(4,minmax(0,1fr))}}
.logowall__t{
  border-radius:3px;overflow:hidden;background:#F4F3EF;min-width:0;
  box-shadow:0 1px 0 rgba(0,0,0,.5),0 16px 30px -24px rgba(0,0,0,.9);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.logowall__t:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(0,0,0,.5),0 24px 40px -22px rgba(0,0,0,1);
}
.logowall__t .media{aspect-ratio:16/10;border:0;background:#F4F3EF}
.logowall__t .media img{object-fit:contain}
.logowall__more{margin:clamp(20px,2.4vw,30px) 0 0;color:var(--muted)}

/* ============================================================
   FEATURED PAIR
   Two supporting images in one row, bottoms aligned, sitting AFTER the
   clipping wall. They previously ran as two full-width blocks above it and
   took 1,411px between them — more page than the fifteen clippings they
   were introducing. Sized so the row costs roughly a third of that.

   The Vogue capture is 576px wide at source and is never scaled past it;
   the portrait column is sized to that ceiling rather than to a fraction of
   the container, so the artifact stays sharp at any viewport.
   ============================================================ */
/* The two columns are sized by the pictures' own aspect ratios — 576:689 for
   the Vogue capture, 16:9 for the Justine still — so both render at exactly
   the same height and the row squares off top and bottom. Sizing the first
   track `auto` was the bug: `auto` takes max-content, the caption is wider
   than the 272px image, so the track stretched to fit the TEXT and left the
   picture marooned at the far left of its own column. That is what read as
   lopsided. min-width:0 keeps a long caption from doing it again. */
.feat{
  display:grid;gap:clamp(20px,2.6vw,38px);align-items:start;
  max-width:1180px;
}
@media(min-width:860px){.feat{grid-template-columns:0.836fr 1.778fr}}
.feat__i{margin:0;min-width:0}
.media--vogue{
  aspect-ratio:576/689;width:100%;border:0;
  box-shadow:0 1px 0 rgba(0,0,0,.6),0 18px 34px -26px rgba(0,0,0,1);
}
.media--vogue img{object-fit:contain;background:#fff}
.feat__i figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  padding-top:clamp(10px,1.2vw,15px);
  border-top:1px solid var(--line-soft);margin-top:clamp(10px,1.2vw,15px);
}
.feat__i figcaption b{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg);
}
.feat__i figcaption span{font-size:13px;color:var(--muted)}

/* ---------- REPS + SOCIALS ---------- */
.reps{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(min-width:760px){.reps{grid-template-columns:repeat(3,1fr)}}
.rep{background:var(--bg-2);padding:clamp(24px,2.8vw,38px);display:grid;gap:11px;align-content:start}
.rep b{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.01em}
.rep a{font-size:14px;color:#C6C4BF;border-bottom:1px solid var(--line);justify-self:start;padding-bottom:2px;transition:color .3s,border-color .3s}
.rep a:hover{color:var(--fg);border-bottom-color:var(--accent)}
.rep .body-sm{color:var(--muted)}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;padding:12px 22px;
  transition:background-color .4s,color .4s,border-color .4s;
}
.socials a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* ---------- RAIL ---------- */
.rail-wrap{position:relative}
.rail{
  display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gut);scroll-padding-inline:var(--gut);
  padding-bottom:22px;scrollbar-width:none;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.rail > figure{flex:0 0 clamp(180px,19vw,232px);scroll-snap-align:start;margin:0;display:grid;gap:12px}
.rail .media{transition:transform .8s var(--ease)}
@media(hover:hover){.rail > figure:hover .media{transform:translateY(-7px)}}
.rail figcaption{display:grid;gap:4px}
.rail figcaption b{font-size:14px;font-weight:400;letter-spacing:-.01em}
.rail-fade{position:absolute;top:0;bottom:22px;width:clamp(20px,4.5vw,72px);z-index:2;pointer-events:none}
.rail-fade--l{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.rail-fade--r{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.rail-nav{display:flex;gap:10px;margin-top:20px}
.rail-nav button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background-color .35s,color .35s,border-color .35s}
.rail-nav button:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.rail-nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}

/* ---------- FILM FACTS ---------- */
.facts{display:grid;border-top:1px solid var(--line-soft)}
.facts div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:18px;padding:15px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.facts p{margin:0;font-size:14.5px;line-height:1.6;color:#C6C4BF}
.cast{display:flex;flex-wrap:wrap}
.cast span{font-size:14.5px;color:#C6C4BF}
.cast span::after{content:'·';margin-inline:9px;color:var(--dim)}
.cast span:last-child::after{display:none}
.strip{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.strip{grid-template-columns:repeat(4,1fr)}}
.duo{display:grid;gap:clamp(28px,4vw,64px)}
@media(min-width:960px){.duo{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.duo--wide{grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.duo--wide{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}

/* ============================================================
   REEL — ambient loop behind the Acting banner + sound-on lightbox
   Both appear only when their files exist; site.js adds .has-reel.
   ============================================================ */
.reel-cta{display:none;margin-top:clamp(24px,3vw,38px)}
body.has-reel .reel-cta{display:inline-flex}
.reel-cta{
  align-items:center;gap:14px;border:1px solid var(--line);border-radius:99px;
  padding:12px 24px 12px 14px;transition:background-color .4s,color .4s,border-color .4s;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.reel-cta:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.reel-cta em{
  width:30px;height:30px;border-radius:50%;border:1px solid currentColor;
  display:grid;place-items:center;flex:0 0 auto;position:relative;
}
.reel-cta em::after{
  content:'';border-left:8px solid currentColor;border-top:5px solid transparent;
  border-bottom:5px solid transparent;margin-left:2px;
}
.reel-note{display:none}
body.no-reel .reel-note{display:block}

.lightbox{
  position:fixed;inset:0;z-index:9600;background:rgba(4,5,6,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:clamp(16px,4vw,64px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox video{width:min(100%,1400px);max-height:82svh;background:#000;border:1px solid var(--line)}
.lightbox__x{
  position:absolute;top:clamp(16px,3vw,34px);right:clamp(16px,3vw,34px);
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:background-color .35s,color .35s;
}
.lightbox__x:hover{background:var(--fg);color:var(--bg)}
.lightbox__x svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.4;fill:none}

/* ---------- SCREEN STILLS GALLERY ---------- */
/* Uniform columns: mixed spans + a fixed aspect-ratio can't share a row
   height, which leaves dead space under the narrower cell. */
.screens{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){
  .screens{grid-template-columns:repeat(2,1fr)}
  .screens > *:last-child{grid-column:1 / -1}
}
.screens .media{transition:transform .9s var(--ease)}
@media(hover:hover){.screens .media:hover{transform:scale(1.008)}}

/* ---------- HEADSHOT ROW ---------- */
.heads{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}

/* ============================================================
   BOOT LAKE — deliberately varied image rhythm.
   Every placement differs in shape, scale and treatment so no
   two frames read as the same beat.
   ============================================================ */
.figcap{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft);
}
.figcap span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.figcap span:first-child{color:#9C9A95}

/* Full-bleed band — breaks the column and changes the page's pace */
/* NB: no transform here — the reveal system sets transform:none on .in,
   which would cancel a translateX-based bleed. Margins are immune. */
.bleed{position:relative;width:100vw;margin-inline:calc(50% - 50vw)}
.bleed .media{border-inline:0}
.bleed__cap{
  max-width:1560px;margin:0 auto;padding:12px var(--gut) 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.bleed__cap span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* Asymmetric pair — one large warm frame, one small monochrome */
.pair{display:grid;gap:clamp(14px,2vw,30px);align-items:end}

/* Equal-weight grid for the Boot Lake frames. Unlike .pair this is symmetric:
   no frame from the film is more important than another, and every cell is the
   same scope ratio so the rows line up. */
.stills{display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:1fr}
@media(min-width:760px){.stills{grid-template-columns:repeat(2,minmax(0,1fr))}}
.secline{max-width:62ch}
@media(min-width:860px){.pair{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}

/* Tall frame beside text */
.tall{display:grid;gap:clamp(26px,4vw,64px);align-items:center}
@media(min-width:900px){.tall{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}

/* ---------- QUOTE TRIO (press page) ---------- */
.quotes{display:grid;gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
@media(min-width:900px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quotes blockquote{
  background:var(--bg);margin:0;padding:clamp(28px,3.2vw,46px);
  display:flex;flex-direction:column;gap:20px;min-height:100%;
}
.quotes p{
  font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.28;
  letter-spacing:-.015em;color:#E6E3DE;margin:0;
}
.quotes cite{font-style:normal;margin-top:auto;display:grid;gap:4px}
.quotes cite b{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500}
.quotes cite span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ============================================================
   PORTAL — arrival sequence, depth and life
   ============================================================ */

/* Slow ambient light drift behind everything. Very low contrast:
   it should be felt rather than seen. */
.portal::before{
  content:'';position:fixed;inset:-30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 42% at 22% 30%, rgba(232,65,46,.10), transparent 62%),
    radial-gradient(42% 46% at 78% 68%, rgba(84,116,158,.10), transparent 62%);
  filter:blur(38px);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  0%  {transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  50% {transform:translate3d(2%,2.5%,0) scale(1.08)}
  100%{transform:translate3d(-1%,2%,0) scale(1.02)}
}

/* ---- Arrival: each band rises in sequence once the curtain clears ---- */
.portal .portal__eye,
.portal .portal__line,
.portal .portal__meta,
.portal .doors > *{
  opacity:0;transform:translateY(16px);
}
html.js body.is-live .portal .portal__eye,
html.js body.is-live .portal .portal__line,
html.js body.is-live .portal .portal__meta,
html.js body.is-live .portal .doors > *{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform 1.05s var(--ease);
}
body.is-live .portal .portal__eye  {transition-delay:.06s}
body.is-live .portal .portal__line {transition-delay:.30s}
body.is-live .portal .portal__meta {transition-delay:.40s}
body.is-live .portal .doors > *:nth-child(1){transition-delay:.52s}
body.is-live .portal .doors > *:nth-child(2){transition-delay:.60s}
body.is-live .portal .doors > *:nth-child(3){transition-delay:.68s}
body.is-live .portal .doors > *:nth-child(4){transition-delay:.76s}

/* The doors also scale up fractionally as they arrive — reads as a lens settling */
.portal .doors > *{transform:translateY(20px) scale(.985)}
html.js body.is-live .portal .doors > *{transform:none}

/* ---- Focus: hovering one door pushes the others back ---- */
@media(hover:hover) and (min-width:960px){
  .doors:hover .door:not(:hover) .media img{filter:grayscale(.8) brightness(.5)}
  .doors:hover .door:not(:hover) .door__t{color:#8E8C88}
  .door{transition:transform .7s var(--ease)}
  .doors:hover .door:not(:hover){transform:scale(.985)}
}

/* ---- Parallax layer set by JS ---- */
.door .media img{will-change:transform,filter}

/* No-JS and reduced-motion: everything simply present */
html:not(.js) .portal .portal__eye,
html:not(.js) .portal .portal__line,
html:not(.js) .portal .portal__meta,
html:not(.js) .portal .doors > *{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .portal::before{animation:none}
  .portal .portal__eye,.portal .portal__line,.portal .portal__meta,
  .portal .doors > *{opacity:1!important;transform:none!important}
}

/* Press opens right under the portal. Its own top padding is enough — the
   following section drops its padding-top so the heading and the featured
   item don't sit either side of a double gap. */
.presshome{border-top:1px solid var(--line-soft);padding-top:clamp(38px,4.4vw,60px);padding-bottom:0}
.presshome + section{padding-top:clamp(26px,3.2vw,44px)}