/* ═══════════════════════════════════════════════════════════════════
   DARG&CO. — the reel
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#070706;
  --fg:#f4efe6;
  --fg-dim:#9a9286;
  --fg-faint:#4a463f;
  --accent:#e9a23b;            /* projector amber */
  --line:rgba(244,239,230,.14);
  --scene:rgba(7,7,6,.9);      /* content sits on this; the film still moves faintly behind it */
  --bar-top:clamp(50px,7vh,66px);
  --bar-bot:clamp(66px,10.5vh,100px);
  --pad:clamp(18px,3.4vw,56px);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-io:cubic-bezier(0.77,0,0.175,1);
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.is-loading{overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
body{font-family:var(--mono);font-size:13px;line-height:1.55;color:var(--fg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (hover:hover) and (pointer:fine){ html,body,a,button,[data-copy],input{cursor:none} }
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
ul,ol{list-style:none}
svg,video{display:block}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
[hidden]{display:none !important}
em{font-style:italic}
.amp{color:var(--accent);font-style:italic}
.container{padding-inline:var(--pad)}
.label{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--fg-dim)}
.kicker{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--fg-dim)}
.kicker::before{content:"";width:42px;height:1px;background:var(--accent);flex:none}

/* ── the film: video, grade, grain, vignette ─────────────────────── */
.stage{position:fixed;inset:0;z-index:-3;overflow:hidden;background:#000}
.stage-inner{position:absolute;inset:0;will-change:transform}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.07) saturate(.92) brightness(.8);
  transition:filter 1s ease;
}
.grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 120% at 50% 32%,transparent 38%,rgba(4,6,9,.6) 100%),
    linear-gradient(180deg,rgba(10,22,30,.3) 0%,rgba(0,0,0,0) 35%,rgba(28,16,4,.34) 100%);
}
.vignette{position:fixed;inset:0;z-index:-2;pointer-events:none;box-shadow:inset 0 0 240px 70px rgba(0,0,0,.78)}
.grain{
  position:fixed;inset:-50%;z-index:8000;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;animation:noise .32s steps(4) infinite;
}
@keyframes noise{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(3%,-3%)}75%{transform:translate(-2%,3%)}100%{transform:translate(0,0)}}
body.archival .stage video{filter:grayscale(1) contrast(1.18) brightness(.82) sepia(.18)}
body.archival .grain{opacity:.16}
body.archival .still .cv{filter:grayscale(1) sepia(.2) contrast(1.1)}

/* ── letterbox: top bar ──────────────────────────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:200;height:var(--bar-top);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 var(--pad);
  background:#000;border-bottom:1px solid rgba(244,239,230,.06);
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-dim);
}
.topbar::after,.transport::after{
  content:"";position:absolute;left:0;right:0;height:1px;opacity:.4;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--fg-faint) 0 2px,transparent 2px 22px);
}
.topbar::after{bottom:8px}
.tb-left{display:flex;align-items:center;gap:20px;min-width:0}
.brand{color:var(--fg);font-weight:500;letter-spacing:.22em;white-space:nowrap}
.slug{color:var(--fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:clamp(12px,1.8vw,26px)}
.nav a{position:relative;padding:4px 0;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-io)}
.nav a.is-active{color:var(--fg)}
.nav a.is-active::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){ .nav a:hover{color:var(--fg)} }
.rec{justify-self:end;display:flex;align-items:center;gap:16px;white-space:nowrap}
.rec b{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent);animation:pulse 1.5s infinite}
@keyframes pulse{50%{opacity:.3}}
.tc{letter-spacing:.16em;color:var(--accent);font-variant-numeric:tabular-nums}
html.is-loading .topbar,html.is-loading .transport{opacity:0}
.topbar,.transport{transition:opacity .8s .2s}

/* ── letterbox: bottom bar (transport + dossier) ─────────────────── */
.transport{
  position:fixed;left:0;right:0;bottom:0;z-index:200;height:var(--bar-bot);
  display:flex;align-items:center;gap:clamp(16px,2.6vw,38px);padding:0 var(--pad);
  background:#000;border-top:1px solid rgba(244,239,230,.06);
}
.transport::after{top:8px}
.play{
  width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:11px;transition:border-color .15s,color .15s,transform .15s var(--ease-out);
}
.play:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){ .play:hover{border-color:var(--accent);color:var(--accent)} }
.tk{display:flex;flex-direction:column;gap:3px;min-width:0;flex:none;max-width:24vw}
.tk-t{font-family:var(--serif);font-style:italic;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-a{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline{flex:1;min-width:60px;display:flex;align-items:center;gap:14px}
.bar-prog{position:relative;height:2px;background:var(--line);flex:1}
.bar-prog .fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--accent)}
.bar-prog .fill::after{content:"";position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.bar-prog input{position:absolute;inset:-12px 0;width:100%;opacity:0}
.dur{font-size:11px;letter-spacing:.1em;color:var(--fg-dim);white-space:nowrap;min-width:92px;text-align:right;font-variant-numeric:tabular-nums}
.vu{display:flex;align-items:flex-end;gap:2px;height:26px;width:64px;flex:none}
.vu i{width:2px;height:100%;background:var(--fg-dim);transform:scaleY(.15);transform-origin:bottom}
.vu i.hi{background:var(--fg)}
.vu i.peak{background:var(--accent)}
.mute{flex:none;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-dim);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .15s,border-color .15s}
@media (hover:hover) and (pointer:fine){ .mute:hover{color:var(--accent);border-color:var(--accent)} }
.mute.is-waiting{color:var(--accent);border-color:var(--accent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{50%{opacity:.4}}
.dossier{display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex:none}
.di{display:flex;flex-direction:column;gap:5px;position:relative}
.di + .di{padding-left:clamp(14px,2vw,30px);border-left:1px solid var(--line)}
.di-lbl{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim)}
.di-val{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,20px);line-height:1;white-space:nowrap;transition:color .15s}
.di[data-copy]::after{content:"COPY ↗";position:absolute;top:-13px;left:inherit;font-size:8px;letter-spacing:.2em;color:var(--fg-faint);opacity:0;transition:opacity .15s}
@media (hover:hover) and (pointer:fine){
  .di[data-copy]:hover .di-val{color:var(--accent)}
  .di[data-copy]:hover::after{opacity:1}
}

/* ── preloader: an academy leader counting down ──────────────────── */
.preloader{position:fixed;inset:0;z-index:1000;background:var(--bg);display:grid;place-items:center;cursor:default}
.leader{position:relative;width:min(62vmin,460px);aspect-ratio:1;display:grid;place-items:center;color:var(--fg)}
.leader svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;opacity:.55}
.leader-sweep{position:absolute;inset:7%;border-radius:50%;background:conic-gradient(rgba(244,239,230,.16) var(--a,0deg),transparent 0)}
.leader-num{position:relative;font-family:var(--serif);font-size:min(34vmin,260px);line-height:1;font-variant-numeric:tabular-nums}
.pl-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;opacity:0;pointer-events:none}
.pl-word{font-family:var(--serif);font-size:clamp(56px,11vw,150px);line-height:.9;letter-spacing:-.035em;text-shadow:0 8px 60px rgba(0,0,0,.6)}
.pl-cue{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--accent);animation:cue 2.4s ease-in-out infinite}
.preloader.is-ready{cursor:pointer}
.preloader.is-ready .pl-intro{pointer-events:auto}

/* ── page transition: the letterbox shutters close on a slate ────── */
.pt{position:fixed;inset:0;z-index:900;pointer-events:none}
.pt.is-active{pointer-events:auto}
.pt-top,.pt-bot{position:absolute;left:0;right:0;height:50.5%;background:#000}
.pt-top{top:0;transform:translateY(-100%);border-bottom:1px solid rgba(233,162,59,.4)}
.pt-bot{bottom:0;transform:translateY(100%)}
.pt-slate{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;
  display:grid;grid-template-columns:auto auto;gap:6px 34px;align-items:baseline;white-space:nowrap;
}
.pt-scene,.pt-take{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--fg-dim)}
.pt-take{color:var(--accent);text-align:right}
.pt-name{grid-column:1 / -1;font-family:var(--serif);font-style:italic;font-size:clamp(44px,7vw,110px);line-height:1;letter-spacing:-.03em}

/* ── camera focus reticle ────────────────────────────────────────── */
.reticle{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;will-change:transform}
.rt-box{position:absolute;left:-11px;top:-11px;width:22px;height:22px;transition:transform .16s ease,opacity .16s}
.rt-box::before,.rt-box::after{content:"";position:absolute;width:6px;height:6px}
.rt-box::before{left:0;top:0;border-left:1px solid var(--fg);border-top:1px solid var(--fg)}
.rt-box::after{right:0;bottom:0;border-right:1px solid var(--fg);border-bottom:1px solid var(--fg)}
.rt-dot{position:absolute;left:-1px;top:-1px;width:2px;height:2px;background:var(--accent)}
.rt-lbl{
  position:absolute;left:18px;top:-7px;padding:2px 6px;white-space:nowrap;
  font-size:8px;letter-spacing:.2em;color:var(--fg);background:rgba(7,7,6,.7);border:1px solid var(--line);
  opacity:0;transition:opacity .15s;
}
.reticle.hot .rt-box{transform:scale(1.5) rotate(45deg)}
.reticle.hot .rt-box::before,.reticle.hot .rt-box::after{border-color:var(--accent)}
.reticle.hot .rt-lbl{opacity:1}
@media (hover:none),(pointer:coarse){ .reticle{display:none} }

/* ── toast ───────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--bar-bot) + 20px);z-index:950;transform:translate(-50%,10px);opacity:0;
  background:var(--fg);color:var(--bg);padding:8px 18px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  pointer-events:none;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ═══ pages ═════════════════════════════════════════════════════════ */
/* clip (not hidden): stops slide-in offsets widening the page without breaking sticky/pinned scenes */
.view{position:relative;padding-top:var(--bar-top);padding-bottom:var(--bar-bot);overflow-x:clip}
.scene{position:relative;background:var(--scene);padding:clamp(90px,12vw,170px) 0}
.scene + .scene{border-top:1px solid var(--line)}
.next,.work-sec{position:relative}
/* drawn across the top of each scene as it scrolls in */
.cut-line{position:absolute;left:0;right:0;top:-1px;height:1px;z-index:3;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}
.scene-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(40px,6vw,80px)}
.scene-title{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,96px);line-height:.95;letter-spacing:-.03em}
.scene-title em{color:var(--accent)}
.serif-body{font-family:var(--serif);font-size:clamp(19px,1.7vw,26px);line-height:1.4;color:var(--fg)}
.serif-body em{color:var(--accent)}
.link-line{display:inline-flex;align-items:center;gap:12px;margin-top:30px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:6px;transition:color .2s,border-color .2s}
@media (hover:hover) and (pointer:fine){ .link-line:hover{color:var(--accent);border-color:var(--accent)} }

/* ── home: the opening ───────────────────────────────────────────── */
.opening{position:relative;height:calc(100svh - var(--bar-top) - var(--bar-bot));min-height:520px;overflow:hidden}
.opening-inner{position:absolute;inset:0;padding:clamp(20px,4vh,46px) var(--pad)}
.titlecard{position:absolute;left:var(--pad);bottom:clamp(110px,20vh,210px);max-width:min(64vw,760px)}
.titlecard .kicker{margin-bottom:16px}
.title{font-family:var(--serif);font-weight:400;font-size:clamp(64px,10.5vw,176px);line-height:.84;letter-spacing:-.045em;margin-bottom:18px;transform-origin:left bottom;text-shadow:0 6px 60px rgba(0,0,0,.55);will-change:transform}
.title em{opacity:.9}
.role{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.7vw,24px);line-height:1.45;max-width:560px;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.role em{color:var(--accent)}
.credits{position:absolute;right:var(--pad);top:clamp(20px,5vh,56px);width:min(32vw,360px)}
.c-head{display:flex;justify-content:space-between;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--fg-dim)}
.c-head span:last-child{color:var(--fg-faint)}
.c-item{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);transition:padding-left .25s var(--ease-out)}
.c-num{font-size:10px;letter-spacing:.18em;color:var(--accent);width:26px;flex:none}
.c-name{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,22px);line-height:1.05;transition:color .15s}
.c-role{font-size:9.5px;letter-spacing:.05em;color:var(--fg-dim);margin-top:4px}
.c-tag{display:inline-block;margin-top:6px;font-size:8px;letter-spacing:.3em;text-transform:uppercase}
.c-tag.on{color:var(--accent)}
.c-tag.off{color:var(--fg-faint)}
.c-all{display:block;padding-top:14px;font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--fg-dim);transition:color .15s}
@media (hover:hover) and (pointer:fine){
  .c-item:hover{padding-left:8px}
  .c-item:hover .c-name,.c-all:hover{color:var(--accent)}
}
.subs{position:absolute;left:0;right:0;bottom:clamp(22px,4vh,42px);text-align:center;padding:0 clamp(24px,8vw,120px);pointer-events:none}
.subs-text{display:inline;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.9vw,40px);line-height:1.28;letter-spacing:-.02em}
.lc{display:inline;transition:opacity .08s,filter .08s}
.lc.pre{opacity:0}
.lc.scr{color:var(--accent);text-shadow:0 0 10px rgba(233,162,59,.9),0 0 26px rgba(233,162,59,.45)}
.lc.done{text-shadow:0 2px 8px rgba(0,0,0,.85),0 0 28px rgba(244,239,230,.18)}

/* synopsis */
.synopsis{display:grid;grid-template-columns:1fr 1.7fr;gap:var(--pad)}
.synopsis-text{font-family:var(--serif);font-size:clamp(34px,5vw,84px);line-height:1;letter-spacing:-.03em}
.synopsis-text em{color:var(--accent)}
.synopsis-side{margin-top:clamp(30px,4vw,60px);max-width:44ch}

/* film strip — the work, frame by frame */
.strip-sec{position:relative;background:var(--scene);overflow:hidden;border-top:1px solid var(--line);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:var(--bar-top) 0 var(--bar-bot)}
.strip-head{padding:clamp(20px,3vw,40px) var(--pad) clamp(22px,3vw,40px)}
.strip{display:flex;gap:0;width:max-content;padding:0 var(--pad);will-change:transform}
.frame{display:block;width:clamp(260px,min(34vw,58vh),520px);flex:none;background:#000;padding:22px 14px}
.frame + .frame{border-left:1px solid #111}
.sprockets{height:10px;margin:0 0 12px;background:repeating-linear-gradient(90deg,transparent 0 8px,rgba(244,239,230,.75) 8px 20px,transparent 20px 28px)}
.sprockets.bottom{margin:12px 0 0}
.still{position:relative;aspect-ratio:4/3;overflow:hidden;background:#111}
.still .cv{filter:sepia(.22) saturate(.85) contrast(1.05)}
.still::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
.frame-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px}
.frame-n{font-size:10px;letter-spacing:.18em;color:var(--accent)}
.frame-name{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.9vw,28px);line-height:1.05;transition:color .15s}
.frame-meta{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-dim);text-align:right}
@media (hover:hover) and (pointer:fine){ .frame:hover .frame-name{color:var(--accent)} }
.frame{will-change:transform}

/* credits block (stats + stack) */
.credit-roll{max-width:900px;margin:0 auto;text-align:center}
.cr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);margin-bottom:clamp(60px,8vw,110px)}
.cr-num{display:flex;justify-content:center;font-family:var(--serif);font-size:clamp(56px,7vw,110px);line-height:1;letter-spacing:-.03em;color:var(--fg)}
.cr-lbl{margin-top:12px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim)}
.dg{display:inline-block;height:1em;overflow:hidden}
.dg-strip{display:flex;flex-direction:column}
.dg-strip span{display:block;height:1em;line-height:1}
.cr-row{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:14px 0;align-items:baseline}
.cr-role{text-align:right;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim)}
.cr-names{text-align:left;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,30px);line-height:1.25}

/* shot list (capabilities) */
.shots{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--pad);align-items:start}
.shots-label{position:sticky;top:50vh}
.shot-list{padding:18vh 0}
.shot-list li{
  display:flex;align-items:baseline;gap:clamp(14px,1.6vw,26px);
  font-family:var(--serif);font-size:clamp(30px,4vw,66px);line-height:1.08;letter-spacing:-.03em;
  color:var(--fg-faint);transition:color .4s var(--ease-out);
}
.shot-n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;min-width:8ch;transition:color .4s}
.shot-list li > span:last-child{transition:transform .6s var(--ease-out)}
.shot-list li.is-active{color:var(--fg)}
.shot-list li.is-active > span:last-child{transform:translateX(clamp(10px,1.4vw,22px))}
.shot-list li.is-active em{color:var(--accent)}
.shot-list li.is-active .shot-n{color:var(--accent)}

/* next reel */
.next{background:var(--scene);text-align:center;padding:clamp(110px,15vw,220px) 0;border-top:1px solid var(--line);overflow:hidden}
.next-link{display:inline-block}
.next-label{display:inline-flex;gap:14px;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--fg-dim)}
.next-label b{color:var(--accent);font-weight:400}
.next-title{font-family:var(--serif);font-weight:400;font-size:clamp(60px,11vw,190px);line-height:.9;letter-spacing:-.045em;margin-top:24px;transition:color .3s}
.next-title em{color:var(--accent)}
@media (hover:hover) and (pointer:fine){ .next-link:hover .next-title{color:var(--accent)} }

/* end credits (footer) */
.endcredits{background:#000;padding:clamp(100px,13vw,190px) 0 clamp(40px,5vw,70px);text-align:center;border-top:1px solid var(--line)}
.ec-word{display:inline-flex;font-family:var(--serif);font-size:clamp(90px,17vw,300px);line-height:.85;letter-spacing:-.05em}
.fw-l{position:relative;display:inline-block;overflow:hidden;padding-bottom:.06em}
.fw-l span{display:block;transition:transform .7s var(--ease-io);transition-delay:calc(var(--i) * 45ms)}
.fw-l span + span{position:absolute;left:0;top:100%}
.fw-l.amp{color:var(--accent);font-style:italic}
@media (hover:hover) and (pointer:fine){ .ec-word:hover .fw-l span{transform:translateY(-100%)} }
.ec-lines{margin-top:clamp(50px,7vw,90px);display:grid;gap:14px}
.ec-line{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:baseline}
.ec-line .cr-role{text-align:right}
.ec-line .cr-names{font-size:clamp(17px,1.6vw,22px)}
.ec-line a{transition:color .15s}
@media (hover:hover) and (pointer:fine){ .ec-line a:hover{color:var(--accent)} }
.ec-fin{margin-top:clamp(60px,8vw,110px);font-family:var(--serif);font-style:italic;font-size:clamp(28px,3vw,44px);color:var(--fg-dim)}
.ec-small{margin-top:18px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-faint)}
.ec-small button{letter-spacing:inherit;text-transform:inherit;color:var(--fg-dim);margin-left:14px;border-bottom:1px solid var(--line)}

/* inner page title cards */
.page-card{background:var(--scene);padding:clamp(110px,15vw,200px) 0 clamp(50px,6vw,90px)}
.page-title{font-family:var(--serif);font-weight:400;font-size:clamp(72px,15vw,260px);line-height:.84;letter-spacing:-.05em;margin-top:22px}
.page-title em{color:var(--accent)}
.page-title sup{font-family:var(--mono);font-size:.09em;letter-spacing:.2em;vertical-align:top;margin-left:.4em;color:var(--fg-dim);font-style:normal}
.page-title--count{display:flex;align-items:flex-start}
.page-title--count > span{display:block}
.page-lede{max-width:40ch;margin-top:clamp(28px,4vw,50px)}

/* work: the full credits */
.filters{display:flex;gap:22px;margin-top:clamp(34px,4vw,56px)}
.filters button{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim);padding-bottom:4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.filters button.is-active{color:var(--accent);border-color:var(--accent)}
.work-sec{background:var(--scene);padding:0 0 clamp(80px,10vw,150px)}
.wl{border-top:1px solid var(--line)}
.wr{border-bottom:1px solid var(--line);overflow:hidden}
.wr-link{display:grid;grid-template-columns:70px 1fr 220px 120px;align-items:baseline;gap:20px;padding:clamp(18px,2.2vw,30px) 0;transition:opacity .4s var(--ease-out)}
.wr-num{font-size:10px;letter-spacing:.18em;color:var(--accent)}
.wr-name{font-family:var(--serif);font-style:italic;font-size:clamp(34px,5.4vw,92px);line-height:1;letter-spacing:-.03em;transition:transform .7s var(--ease-out),color .2s}
.wr-cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim)}
.wr-status{text-align:right;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.wr-status.is-archived{color:var(--fg-faint)}
.wr-cover{display:none;position:relative;aspect-ratio:4/3;margin-bottom:24px}
@media (hover:hover) and (pointer:fine){
  .wl:hover .wr-link{opacity:.3}
  .wl .wr-link:hover{opacity:1}
  .wr-link:hover .wr-name{transform:translateX(24px);color:var(--accent)}
}
.wp{position:fixed;left:0;top:0;z-index:60;width:clamp(260px,24vw,400px);pointer-events:none;opacity:0;background:#000;padding:16px 10px}
.wp-window{position:relative;aspect-ratio:4/3;overflow:hidden}
.wp-track{display:flex;flex-direction:column}
.wp-item{position:relative;width:100%;aspect-ratio:4/3;flex:none}
.wp .cv{filter:sepia(.22) saturate(.85)}

/* project */
.back{display:inline-flex;gap:10px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:30px;transition:color .2s}
@media (hover:hover) and (pointer:fine){ .back:hover{color:var(--accent)} }
.proj-title{font-size:clamp(56px,11vw,210px)}
.proj-credits{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);margin-top:clamp(40px,6vw,80px);padding-top:22px;border-top:1px solid var(--line)}
.proj-credits dt{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:8px}
.proj-credits dd{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,24px);line-height:1.2}
.proj-still{background:#000;padding:clamp(20px,3vw,34px) clamp(10px,1.4vw,18px)}
.proj-still .still{aspect-ratio:auto;height:clamp(360px,68vh,760px)}
.proj-still .still .proj-cover-inner{position:absolute;inset:-8% 0}
.proj-row{display:grid;grid-template-columns:1fr 2fr;gap:var(--pad);padding:clamp(46px,6vw,90px) 0;border-top:1px solid var(--line)}
.proj-row:first-child{border-top:0}
.proj-summary{font-family:var(--serif);font-size:clamp(28px,3.4vw,54px);line-height:1.08;letter-spacing:-.02em}
.proj-points{counter-reset:pt}
.proj-points li{display:grid;grid-template-columns:60px 1fr;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:clamp(18px,1.6vw,24px);line-height:1.3}
.proj-points li:first-child{border-top:1px solid var(--line)}
.proj-points li::before{counter-increment:pt;content:"SC." counter(pt,decimal-leading-zero);font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--accent)}
.proj-stack{display:flex;flex-wrap:wrap;gap:10px 24px}
.proj-stack li{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.9vw,28px)}
.proj-stack li + li::before{content:"/";color:var(--fg-faint);margin-right:24px;font-style:normal}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:var(--pad)}
.acts{position:relative;background:var(--scene);height:100vh;min-height:620px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,4vw,50px);border-top:1px solid var(--line)}
.acts-track{display:flex;gap:0;padding:0 var(--pad);width:max-content;will-change:transform}
.act{width:min(78vw,540px);flex:none;background:#000;padding:22px 14px}
.act + .act{border-left:1px solid #111}
.act-body{background:#0e0d0b;aspect-ratio:4/3;padding:clamp(20px,2.4vw,34px);display:flex;flex-direction:column;justify-content:space-between}
.act-n{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.act h3{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5vw,86px);line-height:.95;letter-spacing:-.03em}
.act p{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.4vw,21px);line-height:1.4;color:var(--fg-dim);max-width:30ch;margin-top:12px}
.now-list{border-top:1px solid var(--line)}
.now-list a{display:grid;grid-template-columns:70px 1fr 220px 30px;align-items:baseline;gap:20px;padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px solid var(--line)}
.now-n{font-size:10px;letter-spacing:.18em;color:var(--accent)}
.now-name{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3vw,50px);line-height:1;transition:transform .6s var(--ease-out),color .2s}
.now-cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim)}
.now-arrow{justify-self:end;transition:transform .4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .now-list a:hover .now-name{transform:translateX(16px);color:var(--accent)}
  .now-list a:hover .now-arrow{transform:translateX(5px)}
}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:var(--pad);align-items:start}
.contact-clock{margin-top:34px;display:flex;flex-direction:column;gap:6px}
.contact-clock .time{font-size:clamp(20px,2vw,28px);letter-spacing:.14em;color:var(--accent);font-variant-numeric:tabular-nums}
.contact-rows{border-top:1px solid var(--line)}
.contact-rows a{position:relative;display:block;padding:clamp(20px,2.4vw,34px) 40px clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--line)}
.contact-rows .val{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;font-size:clamp(30px,4.6vw,80px);line-height:1.02;letter-spacing:-.03em;transition:transform .6s var(--ease-out),color .2s}
.contact-rows .val.is-email{font-size:clamp(22px,3.4vw,60px)}
.contact-rows .arrow{position:absolute;right:0;bottom:clamp(22px,2.6vw,40px);font-size:18px;transition:transform .4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .contact-rows a:hover .val{transform:translateX(14px);color:var(--accent)}
  .contact-rows a:hover .arrow{transform:translate(4px,-4px)}
}

/* ═══ cover art (the stills) ════════════════════════════════════════ */
.cv{position:absolute;inset:0;container-type:size;overflow:hidden;background:var(--cbg);color:var(--cfg);font-family:var(--mono)}
.cv{--safe:0px}
.proj-still .cv{--safe:13%}
.cv-tag{position:absolute;font-size:max(9px,3.2cqmin);letter-spacing:.02em;opacity:.8;white-space:nowrap}
.cv-tl{top:calc(var(--safe) + 5cqmin);left:5cqmin}.cv-tr{top:calc(var(--safe) + 5cqmin);right:5cqmin}
.cv-bl{bottom:calc(var(--safe) + 5cqmin);left:5cqmin}.cv-br{bottom:calc(var(--safe) + 5cqmin);right:5cqmin}
.px-grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44cqmin;display:grid;grid-template-columns:repeat(7,1fr);gap:1cqmin}
.px-grid i{aspect-ratio:1}
.px-grid i.on{background:var(--cfg)}
.cv.is-inview .px-grid i.on{animation:pxFlick 3.4s steps(1) infinite;animation-delay:var(--d)}
@keyframes pxFlick{0%,90%,100%{opacity:1}93%{opacity:.2}}
.pipe{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pipe-node{border:1px solid currentColor;padding:1.8cqmin 3.4cqmin;font-size:max(9px,3.6cqmin);white-space:nowrap}
.pipe-node.is-done{background:var(--cfg);color:var(--cbg)}
.pipe-line{width:1px;height:7cqmin;background:repeating-linear-gradient(180deg,currentColor 0 1.2cqmin,transparent 1.2cqmin 2.4cqmin);background-size:1px 2.4cqmin}
.cv.is-inview .pipe-line{animation:pipeFlow .7s linear infinite}
@keyframes pipeFlow{to{background-position:0 2.4cqmin}}
.chat{position:absolute;inset:calc(var(--safe) + 15cqmin) 7cqmin calc(var(--safe) + 8cqmin);display:flex;flex-direction:column;justify-content:flex-end;gap:2.2cqmin}
.msg{align-self:flex-start;max-width:82%;padding:1.9cqmin 3cqmin;font-size:max(9px,3.5cqmin);background:#111;color:#f3f3f1;opacity:0;transform:translateY(3cqmin);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.msg.me{align-self:flex-end;background:#f3f3f1;color:#111}
.cv.is-inview .msg{opacity:1;transform:none;transition-delay:calc(var(--i) * .22s)}
.pulse{position:absolute;left:0;top:50%;width:100%;height:32cqmin;transform:translateY(-50%);overflow:visible}
.pulse path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.cv.is-inview .pulse path{animation:pulseDraw 2.6s var(--ease-io) infinite}
@keyframes pulseDraw{0%{stroke-dashoffset:1}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.deobf{position:absolute;inset:calc(var(--safe) + 12cqmin) 7cqmin calc(var(--safe) + 10cqmin);display:flex;flex-direction:column;justify-content:center;gap:3cqmin;font-size:max(9px,3.7cqmin);line-height:1.55}
.deobf pre{font:inherit;white-space:pre;overflow:hidden}
.deobf-in{opacity:.5}
.deobf-arrow{font-size:1.4em;line-height:1}
.deobf-out{font-weight:500;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease-io) .25s}
.cv.is-inview .deobf-out{clip-path:inset(0 0 0 0)}
.slop{position:absolute;left:7cqmin;right:7cqmin;top:calc(var(--safe) + 14cqmin);font-family:var(--serif);font-size:max(12px,6.2cqmin);line-height:1.18;letter-spacing:-.01em}
.slop s{text-decoration:none;position:relative;white-space:nowrap}
.slop s::after{content:"";position:absolute;left:-3%;right:-3%;top:56%;height:.1em;background:#b3261e;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-io)}
.cv.is-inview .slop s::after{transform:scaleX(1)}
.cv.is-inview .slop s:nth-of-type(2)::after{transition-delay:.15s}
.cv.is-inview .slop s:nth-of-type(3)::after{transition-delay:.3s}
.cv.is-inview .slop s:nth-of-type(4)::after{transition-delay:.45s}
.cv.is-inview .slop s:nth-of-type(5)::after{transition-delay:.6s}
.cv.is-inview .slop s:nth-of-type(6)::after{transition-delay:.75s}
.slop-after{position:absolute;left:7cqmin;bottom:calc(var(--safe) + 6cqmin);font-family:var(--serif);font-style:italic;font-size:max(14px,8cqmin)}
.hex{position:absolute;inset:calc(var(--safe) + 12cqmin) 7cqmin calc(var(--safe) + 10cqmin);display:flex;flex-direction:column;justify-content:center;font-size:max(9px,3.5cqmin);line-height:1.6;white-space:pre}
.hex-row{padding:0 1cqmin}
.cv.is-inview .hex-row{animation:hexScan 4.5s steps(1) infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes hexScan{0%{background:var(--accent);color:var(--bg)}11%,100%{background:transparent;color:inherit}}
.cv-radar{background-image:linear-gradient(rgba(233,228,214,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(233,228,214,.08) 1px,transparent 1px);background-size:10cqmin 10cqmin}
.radar{position:absolute;left:50%;top:50%;width:62cqmin;height:62cqmin;transform:translate(-50%,-50%)}
.ring{position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;opacity:.45}
.ring.r2{inset:17%}.ring.r3{inset:34%}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(233,228,214,.35),transparent 22%)}
.cv.is-inview .sweep{animation:sweep 3.6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.blip{position:absolute;left:var(--x);top:var(--y);width:2.4cqmin;height:2.4cqmin;margin:-1.2cqmin;background:currentColor;border-radius:50%}

/* ── reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .grain,.rec b,.pl-cue,.mute.is-waiting{animation:none}
  .cv *,.cv{animation:none !important;transition:none !important}
  .msg{opacity:1;transform:none}
  .deobf-out{clip-path:none}
  .slop s::after{transform:scaleX(1)}
  .pulse path{stroke-dashoffset:0}
}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:1100px){
  .slug,.dossier,.vu{display:none}
  .credits{width:min(40vw,340px)}
}
@media (max-width:820px){
  :root{--bar-bot:clamp(60px,16vw,76px)}
  .topbar{grid-template-columns:auto 1fr;font-size:9px}
  .rec{display:none}
  .nav{justify-self:end;gap:14px}
  .timeline,.tk-a{display:none}
  .tk{max-width:50vw}
  .opening{height:auto;min-height:0}
  .opening-inner{position:relative;inset:auto;padding:0}
  .titlecard{position:relative;left:auto;bottom:auto;max-width:none;padding:clamp(90px,26vw,160px) var(--pad) 26px}
  .credits{position:relative;right:auto;top:auto;width:auto;margin:10px var(--pad) 40px;padding:18px;background:rgba(7,7,6,.6);border:1px solid var(--line)}
  .subs{position:relative;bottom:auto;padding:0 var(--pad) 40px}
  .synopsis,.shots,.about-grid,.contact-grid,.proj-row{grid-template-columns:1fr;gap:24px}
  .shots-label{position:static}
  .shot-list{padding:10px 0 8vh}
  .cr-stats{grid-template-columns:1fr 1fr;row-gap:40px}
  .cr-row,.ec-line{grid-template-columns:1fr;gap:6px}
  .cr-role,.ec-line .cr-role{text-align:center}
  .cr-names{text-align:center}
  .strip{flex-direction:column;width:auto}
  .frame{width:100%}
  .frame + .frame{border-left:0;border-top:1px solid #111}
  .wr-link{grid-template-columns:40px 1fr auto;gap:12px}
  .wr-cat{display:none}
  .wr-cover{display:block}
  .proj-credits{grid-template-columns:1fr 1fr;row-gap:22px}
  .acts{height:auto;min-height:0;padding:90px 0}
  .acts-track{flex-direction:column;width:auto}
  .act{width:100%}
  .act + .act{border-left:0;border-top:1px solid #111}
  .now-list a{grid-template-columns:40px 1fr 24px}
  .now-cat{display:none}
}