/* ============================================================
   PRASHANT PANDA — V4 · THE SCREENING ROOM
   film-first · near-black / bone / record red
   Archivo Expanded (all caps, 900) + Space Mono — no serifs
   wordmark: PAND▲ — the play-triangle stands in for the last A
   ============================================================ */

:root{
  --bg:       #0a0809;
  --bg-2:     #131011;
  --ink:      #0f0d0d;
  --bone:     #f2efe6;
  --bone-dim: #ddd9cd;
  --red:      #e8291c;
  --red-deep: #c01414;
  --mut:      rgba(242,239,230,.55);
  --mut-2:    rgba(242,239,230,.32);
  --line:     rgba(242,239,230,.14);
  --line-ink: rgba(15,13,13,.16);

  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  --pad: clamp(20px, 4.5vw, 84px);
  --ease: cubic-bezier(.19,1,.22,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--bone);
  font-family:var(--sans);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
}
@media (max-width:900px){ body{ cursor:auto; } }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; }
img{ display:block; }
::selection{ background:var(--red); color:var(--bone); }

/* display voice — expanded grotesque, caps */
.disp{ font-family:var(--sans); font-stretch:125%; font-weight:900;
  text-transform:uppercase; letter-spacing:-.015em; line-height:.86; }

/* the play triangle — brand mark (▲ stands in for the A) */
.tri-i{
  display:inline-block; width:.66em; height:.6em;
  background:var(--red); vertical-align:0;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  margin:0 .02em;
}

/* ---------- film grain + vignette ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-6%,3%)}
  40%{transform:translate(4%,-5%)} 60%{transform:translate(-3%,4%)}
  80%{transform:translate(5%,2%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:8999; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 42%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* ---------- custom cursor ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; mix-blend-mode:difference; }
.cursor__dot{ position:absolute; width:6px; height:6px; border-radius:50%; background:#fff;
  transform:translate(-50%,-50%); transition:opacity .2s; }
.cursor__ring{
  position:absolute; width:36px; height:36px; border:1px solid rgba(255,255,255,.6);
  border-radius:50%; transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), border-color .25s;
}
.cursor__label{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:8px; letter-spacing:.16em; font-weight:700;
  color:#fff; opacity:0; transition:opacity .2s;
}
.cursor.is-hot .cursor__ring{ width:52px; height:52px; }
.cursor.is-play .cursor__ring{ width:66px; height:66px; border-color:#fff; }
.cursor.is-play .cursor__label{ opacity:1; }
.cursor.is-play .cursor__dot{ opacity:0; }
@media (max-width:900px){ .cursor{ display:none; } }

/* ---------- HUD (scroll timecode) ---------- */
.hud{
  position:fixed; left:var(--pad); right:var(--pad); bottom:16px; z-index:300;
  display:flex; justify-content:space-between; pointer-events:none;
  mix-blend-mode:difference; color:#fff;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
}
.hud b{ font-weight:400; }
@media (max-width:900px){ .hud{ display:none; } }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:9700; background:var(--bg);
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(20px,4vw,44px) var(--pad);
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader__row{ display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--mut); }
.loader__center{ place-self:center; text-align:center; width:min(88vw,760px); }
.loader__lockup{
  display:block; margin:0 auto; height:auto;
  width:min(58vw,420px);
}
@keyframes blink{ 50%{ opacity:0; } }
.loader__films{ display:flex; align-items:center; gap:clamp(12px,2vw,22px); margin-top:14px; }
.loader__films i{ flex:1; height:1px; background:var(--line); }
.loader__films span{ font-weight:700; letter-spacing:.3em; padding-left:.3em;
  font-size:clamp(8.5px,1.1vw,14px); white-space:nowrap; }
.loader__row--bottom{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; }
.loader__bar{ position:relative; height:2px; background:var(--line); overflow:hidden; }
.loader__bar i{ position:absolute; inset:0; width:0%; background:var(--red);
  box-shadow:0 0 14px rgba(232,41,28,.5); }
.loader__row--bottom b{ color:var(--red); font-weight:400; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9450;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.solid{ background:rgba(10,8,9,.72); backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--line); }
body.menu-open .nav{ background:transparent; backdrop-filter:none; border-color:transparent; }
.nav__brand{
  font-stretch:125%; font-weight:900; font-size:15px; letter-spacing:.04em;
  text-transform:uppercase; line-height:1; display:block;
}
.nav__brand img{ display:block; height:21px; width:auto; }
@media (max-width:640px){ .nav__brand img{ height:17px; } }
.nav__right{ display:flex; align-items:center; gap:28px; }
.nav__link{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  color:var(--mut); transition:color .25s; position:relative; }
.nav__link::after{ content:''; position:absolute; left:0; bottom:-5px; width:0; height:1px;
  background:var(--red); transition:width .3s var(--ease); }
.nav__link:hover{ color:var(--bone); }
.nav__link:hover::after{ width:100%; }
.nav__burger{
  display:flex; align-items:center; gap:10px; background:none; border:0;
  color:var(--bone); cursor:none;
}
@media (max-width:900px){ .nav__burger{ cursor:pointer; } }
.nav__burger-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; }
.nav__burger-lines{ position:relative; width:26px; height:12px; display:block; }
.nav__burger-lines span{ position:absolute; left:0; width:100%; height:2px; background:var(--bone);
  transition:.3s var(--ease); }
.nav__burger-lines span:nth-child(1){ top:1px; }
.nav__burger-lines span:nth-child(2){ bottom:1px; }
.nav__burger.open .nav__burger-lines span:nth-child(1){ top:5px; transform:rotate(45deg); }
.nav__burger.open .nav__burger-lines span:nth-child(2){ bottom:5px; transform:rotate(-45deg); }
@media (max-width:640px){ .nav__link{ display:none; } }

/* ============================================================
   FULLSCREEN MENU (six rows)
   ============================================================ */
.menu{
  position:fixed; inset:0; z-index:9400; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.menu.open{ opacity:1; visibility:visible; }
.menu__bg{ position:absolute; inset:0; overflow:hidden; }
.menu__bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s var(--ease);
  filter:grayscale(.55) brightness(.3) contrast(1.05);
}
.menu__bg img.show{ opacity:1; }
.menu__links{ position:relative; z-index:2; display:flex; flex-direction:column;
  padding:0 var(--pad); }
.menu__links a{
  display:grid; grid-template-columns:56px 1fr auto; align-items:baseline; gap:18px;
  padding:clamp(9px,1.7vh,18px) 0; border-top:1px solid var(--line);
}
.menu__links a:last-child{ border-bottom:1px solid var(--line); }
.menu__links b{ font-family:var(--mono); font-size:11px; font-weight:400; color:var(--red); }
.menu__links span{
  font-stretch:125%; font-weight:900; text-transform:uppercase; letter-spacing:-.01em;
  line-height:.9; font-size:clamp(30px, min(7.4vw, 6.4vh), 76px);
  transition:transform .4s var(--ease), color .4s;
}
.menu__links small{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--mut-2); }
.menu__links a:hover span{ transform:translateX(16px); color:var(--red); }
.menu__links a.now span{ color:var(--red); }
.menu__links a.now small::after{ content:' · NOW SHOWING'; color:var(--red); }
.menu__foot{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding:20px var(--pad); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--mut);
}
.menu__foot a{ transition:color .25s; }
.menu__foot a:hover{ color:var(--bone); }
.menu__foot-right{ display:flex; gap:22px; }

/* ============================================================
   FRAME TICKS / KICKERS / SECTION HEADS
   ============================================================ */
.frametick{ position:absolute; z-index:3; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; color:rgba(242,239,230,.42); }
.frametick--tl{ top:clamp(78px,11vh,104px); left:var(--pad); }
.frametick--tr{ top:clamp(78px,11vh,104px); right:var(--pad); }
.frametick--bl{ bottom:44px; left:var(--pad); }
.frametick--br{ bottom:44px; right:var(--pad); }
@media (max-width:900px){ .frametick--tr, .frametick--bl{ display:none; } }

.kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); }
.kicker i{ color:var(--red); font-style:normal; }
.kicker--ink{ color:rgba(15,13,13,.55); }
.kicker--ink i{ color:var(--red-deep); }

.sec-head{
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:14px 20px;
  padding:clamp(90px,14vh,170px) var(--pad) clamp(40px,7vh,80px);
}
.sec-head .kicker{ grid-column:1/-1; }
.sec-title{
  font-stretch:125%; font-weight:900; text-transform:uppercase;
  letter-spacing:-.015em; line-height:.85;
  font-size:clamp(44px,7.5vw,120px); margin-top:16px;
}
.sec-title--sm{ font-size:clamp(32px,5vw,76px); }
.sec-meta{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--mut-2); text-align:right; line-height:1.9; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:var(--pad); overflow:hidden;
}
.hero__slides{
  position:absolute; inset:0; z-index:0;
  animation:herozoom 30s ease-in-out infinite alternate;
}
@keyframes herozoom{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.hero__slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s var(--ease);
  filter:grayscale(1) contrast(1.05) brightness(.68);
}
.hero__slide.on{ opacity:1; }
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(85% 70% at 50% 44%, transparent 30%, rgba(10,8,9,.55) 100%),
    linear-gradient(180deg, rgba(10,8,9,.5) 0%, transparent 32%, rgba(10,8,9,.72) 100%);
}
.hero__center{
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  width:min(92vw, 1160px); text-align:center;
  opacity:0; transform:translateY(22px);
  transition:opacity 1.1s var(--ease) .15s, transform 1.1s var(--ease) .15s;
}
body.loaded .hero__center{ opacity:1; transform:none; }
.hero__mark{ width:100%; }
.hero__lockup{
  display:block; margin:0 auto; height:auto;
  width:min(80vw,680px);
  filter:drop-shadow(0 6px clamp(14px,3vw,40px) rgba(0,0,0,.55));
}
.hero__films{ display:flex; align-items:center; gap:clamp(14px,2vw,26px);
  margin-top:clamp(10px,1.8vw,24px); }
.hero__films i{ flex:1; height:1px; background:rgba(242,239,230,.38); }
.hero__films span{ font-weight:700; text-transform:uppercase;
  letter-spacing:.3em; padding-left:.3em; white-space:nowrap;
  font-size:clamp(9px,1.25vw,18px); }

/* circular play */
.hero__play{
  position:relative; margin-top:clamp(34px,6vh,72px);
  width:clamp(98px,11.5vw,140px); aspect-ratio:1; border-radius:50%;
  background:none; border:0; cursor:none; color:var(--bone);
}
@media (max-width:900px){ .hero__play{ cursor:pointer; } }
.hero__play::before{
  content:''; position:absolute; inset:23%; border-radius:50%;
  border:1px solid rgba(242,239,230,.4); background:rgba(10,8,9,.28);
  backdrop-filter:blur(3px);
  transition:background .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
.hero__play svg{ position:absolute; inset:0; width:100%; height:100%;
  animation:spin 16s linear infinite; }
.hero__play svg text{ font-family:var(--mono); font-size:9.2px; letter-spacing:.3em;
  fill:rgba(242,239,230,.78); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero__play-tri{
  position:absolute; top:50%; left:50%; transform:translate(-38%,-50%); z-index:2;
  width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent;
  border-left:15px solid var(--bone); transition:border-left-color .35s;
}
.hero__play:hover::before{ background:var(--red); border-color:var(--red); transform:scale(1.07); }
.hero__play:hover svg text{ fill:var(--bone); }

.hero__scroll{ position:absolute; bottom:38px; left:50%; transform:translateX(-50%); z-index:2; }
.hero__scroll i{ display:block; width:1px; height:52px; position:relative; overflow:hidden;
  background:rgba(242,239,230,.18); }
.hero__scroll i::after{ content:''; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:var(--red); animation:scrolldrop 1.8s var(--ease) infinite; }
@keyframes scrolldrop{ 0%{ transform:translateY(-100%) } 100%{ transform:translateY(300%) } }

/* ============================================================
   MARQUEE (thin — under hero)
   ============================================================ */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:15px 0; background:var(--bg-2); }
.marquee__track{ display:inline-flex; align-items:center; white-space:nowrap;
  animation:marq 36s linear infinite; }
.marquee__track span{
  font-stretch:110%; font-weight:800; text-transform:uppercase;
  font-size:clamp(16px,2.3vw,29px); letter-spacing:.04em; padding:0 26px;
}
.marquee__track b{ color:var(--red); font-size:11px; }
.marquee__logo{
  height:clamp(17px,2.2vw,27px); width:auto; max-width:32vw;
  display:inline-block; vertical-align:middle;
  margin:0 clamp(16px,2vw,30px);
  filter:brightness(0) invert(1); opacity:.8;
}
.marquee__track{ animation-duration:70s; }
@keyframes marq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ============================================================
   01 — THE REEL (horizontal filmstrip)
   ============================================================ */
/* ============================================================
   01 — THE REEL as an NLE TIMELINE
   V2/V1 checkerboard, ruler, fixed playhead, live 25fps TC
   ============================================================ */
.tl{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
.tl__scroll{
  overflow-x:auto; overflow-y:hidden; cursor:grab; outline:none;
  scrollbar-width:none; -ms-overflow-style:none;
}
.tl__scroll::-webkit-scrollbar{ display:none; }
.tl__scroll.dragging{ cursor:grabbing; }
.tl__inner{ position:relative; }

.tl__ruler{
  position:relative; height:32px;
  border-bottom:1px solid var(--line); background:var(--bg);
}
.tl__ruler .tick{ position:absolute; top:0; width:1px; height:8px;
  background:rgba(242,239,230,.22); }
.tl__ruler .tick.major{ height:13px; background:rgba(242,239,230,.45); }
.tl__ruler .tick i{
  position:absolute; left:6px; top:12px; font-style:normal;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  color:var(--mut-2); white-space:nowrap;
}

.tl__lane{ position:relative; height:clamp(120px,15vw,190px);
  border-bottom:1px solid rgba(242,239,230,.07); }
.tl__lane:last-child{ border-bottom:0; }

.tclip{
  position:absolute; top:8px; bottom:8px; padding:0;
  border:1px solid rgba(242,239,230,.18); border-radius:2px; overflow:hidden;
  background:var(--bg); color:var(--bone); cursor:none;
}
@media (max-width:900px){ .tclip{ cursor:pointer; } }
.tclip img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) saturate(.8) brightness(.6);
  transition:filter .45s var(--ease);
}
.tclip.active img{ filter:grayscale(0) saturate(1) brightness(.85); }
.tclip:hover img, .tclip:focus-visible img{ filter:grayscale(0) saturate(1.05) brightness(.95); }
/* sprocket edges — a clip reads as a clip */
.tclip__grade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,8,9,.5), transparent 30%, transparent 55%, rgba(10,8,9,.85)),
    repeating-linear-gradient(90deg, rgba(242,239,230,.14) 0 3px, transparent 3px 13px) top/100% 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(242,239,230,.14) 0 3px, transparent 3px 13px) bottom/100% 4px no-repeat;
}
.tclip__face{
  position:absolute; left:10px; right:10px; bottom:9px;
  display:flex; flex-direction:column; gap:2px; text-align:left; pointer-events:none;
}
.tclip__no{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--red); }
.tclip__name{
  font-stretch:110%; font-weight:800; text-transform:uppercase;
  font-size:clamp(11px,1.15vw,15px); letter-spacing:.05em; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tclip__meta{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; color:var(--mut);
  opacity:0; transform:translateY(3px); transition:.3s var(--ease);
}
.tclip:hover .tclip__meta, .tclip.active .tclip__meta{ opacity:1; transform:none; }

.tl__playhead{
  position:absolute; left:18%; top:0; bottom:0; width:2px; z-index:3;
  background:var(--red); pointer-events:none;
  box-shadow:0 0 12px rgba(232,41,28,.5);
}
.tl__playhead::before{
  content:''; position:absolute; top:0; left:-6px;
  border:7px solid transparent; border-top-color:var(--red);
}
.tl__tag{
  position:absolute; left:14px; z-index:2; pointer-events:none;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--mut-2);
}
.tl__tag--v2{ top:44px; }
.tl__tag--v1{ top:calc(44px + clamp(120px,15vw,190px)); }
.tl__tc{
  position:absolute; right:12px; top:8px; z-index:4; pointer-events:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--red); background:var(--bg-2); padding:1px 7px;
}
@media (max-width:900px){
  .tl__lane{ height:clamp(96px,24vw,150px); }
  .tl__tag--v1{ top:calc(44px + clamp(96px,24vw,150px)); }
  .tclip__name{ font-size:11px; }
}

.reel__more{ display:flex; justify-content:flex-end;
  padding:clamp(70px,12vh,150px) var(--pad) 0; }
.reel__more-link{
  display:inline-flex; align-items:baseline; gap:18px;
  font-stretch:125%; font-weight:900; text-transform:uppercase;
  font-size:clamp(26px,4vw,54px); letter-spacing:-.01em; line-height:1;
  transition:color .3s;
}
.reel__more-link i{ font-style:normal; color:var(--red); transition:transform .4s var(--ease); }
.reel__more-link:hover{ color:var(--red); }
.reel__more-link:hover i{ transform:translateY(8px); }

/* ============================================================
   02 — INDEX (symmetric grid: ad tiles + slates)
   ============================================================ */
.index{ padding-bottom:clamp(90px,14vh,180px); }
.subhead{
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px 20px;
  padding:clamp(44px,8vh,96px) var(--pad) clamp(16px,3vh,28px);
}
.sec-head + .subhead{ padding-top:0; }
.subhead + .bmqcap{ padding-top:0; }
.bmq + .filters{ padding-top:clamp(18px,3vh,28px); }
.subhead .kicker{ grid-column:1/-1; }
.subhead__title{
  font-stretch:125%; font-weight:900; text-transform:uppercase;
  letter-spacing:-.01em; line-height:.9;
  font-size:clamp(24px,3vw,46px); margin-top:8px;
}
.index__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--bg); overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.tile{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--bg); border:0; padding:0; cursor:none; color:var(--bone);
  outline:1px solid var(--line); outline-offset:0;
}
@media (max-width:900px){ .tile{ cursor:pointer; } }
.tile img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.04) brightness(.96);
  transform:scale(1.001);
  transition:filter .5s var(--ease), transform .9s var(--ease);
}
.tile:hover img{ filter:contrast(1.02) brightness(1.02); transform:scale(1.055); }
.tile__no{
  position:absolute; top:10px; left:12px; z-index:2;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  color:rgba(242,239,230,.72); text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.tile__tag{
  position:absolute; top:10px; right:12px; z-index:2;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.2em;
  color:rgba(242,239,230,.6); text-shadow:0 1px 8px rgba(0,0,0,.6);
}

/* genre filter pills (ad films shelf) */
.filters{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:0 var(--pad) clamp(16px,3vh,26px);
}
.pill{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--mut);
  background:none; border:1px solid var(--line); border-radius:100px;
  padding:9px 16px; cursor:none; transition:.3s var(--ease);
}
@media (max-width:900px){ .pill{ cursor:pointer; } }
.pill:hover{ color:var(--bone); border-color:var(--bone-dim); }
.pill.on{ background:var(--red); border-color:var(--red); color:var(--bone); }
.tile::before{
  content:''; position:absolute; left:0; top:0; width:100%; height:2px; z-index:3;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.tile:hover::before{ transform:scaleX(1); }
.tile__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:baseline; gap:10px; padding:9px 14px;
  background:var(--bone); color:var(--ink);
  transform:translateY(101%); transition:transform .4s var(--ease);
}
.tile:hover .tile__cap{ transform:translateY(0); }
.tile__cap b{ font-stretch:110%; font-weight:800; text-transform:uppercase;
  font-size:11px; letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile__cap span{ font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:rgba(15,13,13,.6); margin-left:auto; white-space:nowrap; }

/* slate tiles — series & films without embeddable video */
.tile--slate{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:14px 16px; background:var(--bg-2); cursor:default;
  transition:background .45s var(--ease);
}
.tile--slate:hover{ background:#1b1517; }
.slate__top{
  position:absolute; top:10px; left:16px; right:16px;
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
}
.slate__top b{ font-weight:400; color:var(--red); }
.slate__top span{ color:var(--mut); }
.slate__title{
  font-stretch:118%; font-weight:900; text-transform:uppercase;
  letter-spacing:-.005em; line-height:.95;
  font-size:clamp(15px,1.45vw,23px);
}
.slate__meta{ font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  color:var(--mut); margin-top:9px; }

/* series slates with official key art behind the type */
.slate__art{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(.95) brightness(.58) contrast(1.05);
  transform:scale(1.001);
  transition:filter .5s var(--ease), transform .9s var(--ease);
}
.tile--slate.has-cover:hover .slate__art{
  filter:saturate(1) brightness(.72) contrast(1.03); transform:scale(1.045);
}
.slate__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,9,.6), transparent 34%, transparent 52%, rgba(10,8,9,.92));
}
.has-cover .slate__top, .has-cover .slate__title, .has-cover .slate__meta{
  position:relative; z-index:2;
}
.has-cover .slate__top b, .has-cover .slate__top span,
.has-cover .slate__title, .has-cover .slate__meta{
  text-shadow:0 1px 10px rgba(0,0,0,.65);
}


/* films-shelf hero — the upcoming feature leads the shelf */
.tile--filmhero{
  grid-column:1/-1; aspect-ratio:auto;
  min-height:clamp(220px,28vw,390px);
}
.tile--filmhero .slate__title{
  font-size:clamp(36px,5.6vw,88px); letter-spacing:-.015em; line-height:.9;
}

/* trailer-linked slates */
button.tile--slate{ cursor:none; text-align:left; font:inherit; color:var(--bone); border:0; }
@media (max-width:900px){ button.tile--slate{ cursor:pointer; } }
.slate__chip{
  position:absolute; right:12px; bottom:12px; z-index:2;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; color:var(--bone);
  border:1px solid var(--line); border-radius:100px; padding:6px 11px;
  background:rgba(10,8,9,.5); transition:.3s var(--ease);
}
.slate__chip i{ font-style:normal; color:var(--red); }
button.tile--slate:hover .slate__chip{ background:var(--red); border-color:var(--red); }
button.tile--slate:hover .slate__chip i{ color:var(--bone); }

/* player single-item mode (trailers) */
.player.single .player__nav, .player.single .player__count{ display:none; }

/* end strip — a full-width leader row closing each shelf */
.tile--end{ grid-column:1/-1; aspect-ratio:auto; min-height:84px;
  display:grid; place-items:center; background:var(--bg); cursor:default; }
.tile--end span{ font-family:var(--mono); font-size:10px; letter-spacing:.26em;
  color:var(--mut-2); text-align:center; padding:0 14px; }
.tile--end i{ color:var(--red); font-style:normal; }

/* wide feature slate — the lead FILMS entry */
.tile--wide{ grid-column:span 2; }
.tile--wide .slate__title{ font-size:clamp(22px,2.4vw,38px); }

/* upcoming film — announced, not yet numbered */
.tile--upcoming .slate__top b{ color:var(--bone); }
.tile--upcoming{ background:var(--bg);
  outline:1px dashed rgba(232,41,28,.5); outline-offset:-1px; }
.tile--upcoming:hover{ background:var(--bg-2); }

/* ============================================================
   BANNER MARQUEES — brands/agencies under 02·A, platforms
   under 02·C (big banner scroll rows inside the index)
   ============================================================ */
.bmqcap{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:clamp(40px,7vh,84px) var(--pad) clamp(14px,2.4vh,24px);
}
.bmqcap__meta{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--mut-2); text-align:right; }
.bmq{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(18px,3.6vh,38px) 0;
}
.bmq__track{
  display:inline-flex; align-items:center; white-space:nowrap;
  animation:marq 48s linear infinite;
}
.bmq--rev .bmq__track{ animation-direction:reverse; }
.bmq:hover .bmq__track{ animation-play-state:paused; }
.bmq__track span{
  font-stretch:125%; font-weight:900; text-transform:uppercase;
  letter-spacing:-.01em; line-height:.9;
  font-size:clamp(40px,6.5vw,104px);
  padding:0 clamp(22px,3vw,46px);
}
.bmq__track b{ color:var(--red); font-size:clamp(13px,1.5vw,20px); }
.bmq--rev .bmq__track span{
  color:transparent; -webkit-text-stroke:1.5px var(--bone-dim);
}
.bmq__logo{
  height:clamp(34px,4.6vw,74px); width:auto; max-width:38vw;
  display:inline-block; vertical-align:middle;
  margin:0 clamp(22px,3vw,46px);
  filter:brightness(0) invert(1); opacity:.92;
}
.bmq--rev .bmq__logo{ opacity:.55; }

/* ============================================================
   04 — DIRECTORS
   ============================================================ */
.dirs{ padding-bottom:clamp(90px,14vh,180px); }
.dir{
  display:grid; grid-template-columns:56px 1fr auto; align-items:baseline; gap:18px;
  padding:clamp(20px,3.6vh,38px) var(--pad);
  border-top:1px solid var(--line);
}
.dir:last-of-type{ border-bottom:1px solid var(--line); }
.dir__no{ font-family:var(--mono); font-size:11px; color:var(--red); }
.dir__name{
  font-stretch:125%; font-weight:900; text-transform:uppercase;
  letter-spacing:-.01em; line-height:.88;
  font-size:clamp(30px,5.4vw,92px);
  transition:transform .4s var(--ease), color .4s;
}
.dir:hover .dir__name{ transform:translateX(16px); color:var(--red); }
.dir__meta{ font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--mut-2); text-align:right; line-height:1.9; }

/* tap a director → their cuts unfold */
.dir{ cursor:none; }
@media (max-width:900px){ .dir{ cursor:pointer; } }
.dir__works{
  grid-column:2/-1; display:none; flex-wrap:wrap; gap:10px;
  padding-top:clamp(14px,2.4vh,24px);
}
.dir.open .dir__works{ display:flex; }
.dir.open .dir__name{ color:var(--red); }
.dirchip{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--bone);
  background:none; border:1px solid var(--line); border-radius:100px;
  padding:9px 16px; cursor:none; transition:.3s var(--ease);
}
@media (max-width:900px){ .dirchip{ cursor:pointer; } }
.dirchip:hover{ background:var(--red); border-color:var(--red); }
.dirchip--tbc{ color:var(--mut-2); border-style:dashed; pointer-events:none; }

.dirfloat{
  position:fixed; top:0; left:0; z-index:250; pointer-events:none;
  width:min(320px,26vw); aspect-ratio:16/9; overflow:hidden;
  opacity:0; transition:opacity .35s var(--ease);
}
.dirfloat img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(.9) contrast(1.04); }
.dirfloat.on{ opacity:1; }
@media (max-width:900px){ .dirfloat{ display:none; } }

/* ============================================================
   05 — EDITOR (bone split)
   ============================================================ */
.producer{ display:grid; grid-template-columns:1.12fr .88fr; min-height:92svh; }
.producer__panel{
  background:var(--bone); color:var(--ink);
  padding:clamp(70px,11vh,130px) clamp(28px,5.5vw,100px) clamp(44px,7vh,80px);
  display:flex; flex-direction:column; align-items:flex-start;
}
.producer__name{
  font-stretch:125%; font-weight:900; text-transform:uppercase;
  letter-spacing:-.015em; line-height:.84;
  font-size:clamp(54px,8.4vw,156px); margin-top:clamp(22px,4vh,44px);
}
.producer__name--lockup img{
  display:block; height:auto;
  width:clamp(280px,30vw,500px);
}
.producer__role{ font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  color:rgba(15,13,13,.55); margin-top:22px; }
.producer__line{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(15px,1.4vw,20px); line-height:1.55;
  color:rgba(15,13,13,.72); margin-top:clamp(18px,3vh,30px); max-width:36ch;
}
.producer__bio{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(13px,1.1vw,15.5px); line-height:1.7;
  color:rgba(15,13,13,.62); margin-top:clamp(14px,2.4vh,22px); max-width:52ch;
}
.producer__note{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:rgba(15,13,13,.7); margin-top:14px;
}
.producer__note i{ color:var(--red-deep); font-style:normal; }
.producer__note--dim{ color:rgba(15,13,13,.45); margin-top:8px; }

/* recognitions — a humble column, hairlines not trophies */
.recog{ margin-top:clamp(18px,3vh,28px); width:100%; max-width:52ch; }
.recog__kicker{ font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:rgba(15,13,13,.7); }
.recog__kicker i{ color:var(--red-deep); font-style:normal; }
.recog__list{ list-style:none; margin-top:10px; }
.recog__list li{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:10px 0; border-top:1px solid var(--line-ink);
}
.recog__text{ display:flex; flex-direction:column; gap:2px; }
.recog__logo{
  flex:none; width:auto; height:auto; max-height:32px; max-width:104px;
  filter:brightness(0); opacity:.82;
}
.recog__list li:last-child{ border-bottom:1px solid var(--line-ink); }
.recog__list b{ font-family:var(--mono); font-weight:700; font-size:10px;
  letter-spacing:.14em; color:var(--ink); }
.recog__list span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  color:rgba(15,13,13,.55); }

/* dark variant — recognitions on the work page */
.recog__list--dark{ list-style:none; margin:0 var(--pad) clamp(30px,5vh,60px); max-width:640px; }
.recog__list--dark li{ border-color:var(--line); }
.recog__list--dark li:last-child{ border-bottom-color:var(--line); }
.recog__list--dark b{ color:var(--bone); }
.recog__list--dark .recog__text span{ color:var(--mut); }
.recog__list--dark .recog__logo{ filter:brightness(0) invert(1); opacity:.85; }
.producer__stats{ display:flex; gap:clamp(30px,4.5vw,68px);
  margin-top:auto; padding-top:clamp(44px,7vh,80px); }
.stat b{
  display:block; font-stretch:125%; font-weight:900;
  font-size:clamp(38px,4.6vw,78px); line-height:1; letter-spacing:-.02em;
}
.stat span{ font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:rgba(15,13,13,.5); }
.producer__mail{
  margin-top:clamp(30px,5vh,52px); font-family:var(--mono); font-size:11.5px;
  letter-spacing:.14em; color:var(--red-deep);
  border-bottom:1px solid rgba(192,20,20,.4); padding-bottom:4px;
  transition:color .3s, border-color .3s;
}
.producer__mail:hover{ color:var(--ink); border-color:var(--ink); }
.producer__viz{ position:relative; overflow:hidden; background:var(--bg-2); min-height:60vh; }
.producer__still{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s var(--ease);
  filter:contrast(1.04) saturate(.95);
}
.producer__still.on{ opacity:1; }
.producer__cap{
  position:absolute; left:18px; bottom:20px; z-index:2;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  color:rgba(242,239,230,.85); text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.producer__bar{ position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:rgba(242,239,230,.16); }
.producer__bar i{ display:block; height:100%; width:0; background:var(--red); }

/* ============================================================
   06 — CONTACT / FOOT
   ============================================================ */
.foot{ padding-top:clamp(90px,14vh,180px); }
.foot--mini{ padding-top:clamp(50px,9vh,110px); }
.foot__kicker{ display:flex; margin:0 var(--pad) 30px; }
.foot__title{ padding:0 var(--pad) clamp(30px,5vh,60px); }

/* next-page rail — each page hands off to the next reel */
.nextwrap{ padding-top:clamp(70px,12vh,150px); }
.frow{
  display:grid; grid-template-columns:minmax(130px,230px) 1fr auto;
  align-items:center; gap:24px;
  padding:clamp(24px,4.5vh,50px) var(--pad);
  border-top:1px solid var(--line);
  transition:background .45s var(--ease), padding .45s var(--ease);
}
.frow:last-of-type{ border-bottom:1px solid var(--line); }
.frow__k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--mut);
  transition:color .45s; }
.frow__word{
  font-stretch:125%; font-weight:900; text-transform:uppercase;
  letter-spacing:-.01em; line-height:.84;
  font-size:clamp(44px,8.4vw,136px);
}
.frow__arrow{ font-weight:200; font-size:clamp(28px,4vw,58px); line-height:1;
  transition:transform .45s var(--ease); }
.frow:hover{ background:var(--red); padding-left:calc(var(--pad) + 20px); }
.frow--pending{ opacity:.5; pointer-events:none; }
.frow:hover .frow__k{ color:rgba(242,239,230,.85); }
.frow:hover .frow__arrow{ transform:translate(8px,-8px); }

.foot__bar{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  padding:36px var(--pad) 46px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--mut);
}
.foot__brand{
  font-family:var(--sans); font-stretch:125%; font-weight:900; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--bone);
  display:block;
}
.foot__brand img{ display:block; height:15px; width:auto; }
.foot__social{ display:flex; gap:20px; margin-left:auto; }
.foot__social a, .foot__top{ transition:color .25s; }
.foot__social a:hover, .foot__top:hover{ color:var(--bone); }

/* ============================================================
   PLAYER OVERLAY
   ============================================================ */
.player{
  position:fixed; inset:0; z-index:9600; background:rgba(7,5,5,.97);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.player.open{ opacity:1; visibility:visible; }
.player__head{
  display:flex; align-items:center; gap:20px;
  padding:16px var(--pad); border-bottom:1px solid var(--line);
}
.player__now{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--mut);
  white-space:nowrap; }
.player__now i{ color:var(--red); font-style:normal; animation:blink 1.2s steps(2) infinite; }
.player__title{ flex:1; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--bone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player__close{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--bone);
  background:none; border:1px solid var(--line); border-radius:100px;
  padding:9px 16px; cursor:none; transition:.3s var(--ease);
}
.player__close:hover{ background:var(--red); border-color:var(--red); }
.player__stage{ flex:1; display:grid; place-items:center; padding:20px var(--pad); min-height:0; }
.player__frame{
  width:min(100%, calc((100svh - 230px) * 1.7778));
  aspect-ratio:16/9; background:#000; border:1px solid var(--line);
}
.player__frame iframe{ width:100%; height:100%; border:0; display:block; }
.player__foot{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:14px var(--pad) 20px; border-top:1px solid var(--line);
}
.player__nav{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--bone);
  background:none; border:0; cursor:none; transition:color .25s; padding:6px 0;
}
.player__nav:hover{ color:var(--red); }
.player__count{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--mut-2); }
.player__ext{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--mut); transition:color .25s; }
.player__ext:hover{ color:var(--bone); }
@media (max-width:900px){ .player__close, .player__nav{ cursor:pointer; } }

/* keyboard focus */
a:focus-visible, button:focus-visible{
  outline:1px dashed var(--red); outline-offset:4px; border-radius:2px;
}
.menu__links a:focus-visible span{ color:var(--red); transform:translateX(16px); }

/* ============================================================
   REVEALS
   ============================================================ */
.reveal{ opacity:0; transform:translateY(30px);
  transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.piece.reveal{ opacity:1; transform:none; } /* pieces reveal via clip + cap only */

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .grain, .marquee__track, .bmq__track, .hero__scroll i::after, .hero__play svg,
  .hero__slides, .loader__mark i, .player__now i{ animation:none !important; }
  .hero__center{ opacity:1; transform:none; transition:none; }
}

/* screenshot mode (dev helper) */
html.shot .grain, html.shot .vignette, html.shot .cursor, html.shot .hud,
html.shot .dirfloat{ display:none !important; }
html.shot .marquee__track, html.shot .bmq__track, html.shot .hero__play svg,
html.shot .hero__slides, html.shot .loader__mark i, html.shot .player__now i{ animation:none !important; }
html.shot .reveal, html.shot .hero__center{ opacity:1 !important; transform:none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .index__grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:900px){
  .producer{ grid-template-columns:1fr; }
  .producer__viz{ min-height:54vh; }
  .frow{ grid-template-columns:1fr auto; }
  .frow__k{ display:none; }
  .sec-head{ grid-template-columns:1fr; align-items:start; }
  .sec-meta{ text-align:left; }
  .foot__social{ margin-left:0; }
  .dir{ grid-template-columns:34px 1fr; }
  .dir__meta{ grid-column:2; text-align:left; }
}

@media (max-width:640px){
  .index__grid{ grid-template-columns:1fr; }
  .tile__cap{ transform:translateY(0); padding:8px 12px; }
  .tile--wide{ grid-column:auto; }
  .menu__links a{ grid-template-columns:34px 1fr auto; }
}