/* ============================================================
   DIRECTION A — THE FILM FRAME
   One 21:9 gate is pinned in the viewport and never moves.
   The plates cut inside it as you scroll. All chrome rides the
   black bars above and below, like a projectionist's slate.
   ============================================================ */

@font-face{font-family:'Archivo Black';src:url('../fonts/ArchivoBlack-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Syncopate';src:url('../fonts/Syncopate-700-latin.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/JetBrainsMono-latin-variable.woff2') format('woff2');
  font-weight:100 800;font-style:normal;font-display:swap}

:root{
  --ink-0:#0f0d12;        /* the room */
  --ink-1:#000;           /* the bars, and the black between cuts */
  --paper:#ece6dd;
  --paper-dim:#8d857c;
  --gold:#f2b53d;
  --green:#6d7f68;
  --rule:rgba(236,230,221,.15);
  --bar:clamp(58px,7.2vh,92px);   /* height of one black bar */
  --edge:clamp(16px,3vw,44px);
  --display:'Archivo Black','Helvetica Neue',Arial,sans-serif;
  --wide:'Syncopate','Archivo Black',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink-0);color:var(--paper);
  font-family:var(--mono);font-size:13px;line-height:1.5;
  overflow-x:hidden}

/* real grain, not a gradient */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- THE GATE : fixed, never moves ---------- */
.gate{position:fixed;left:0;right:0;top:var(--bar);bottom:var(--bar);
  background:var(--ink-1);overflow:hidden;z-index:1}
.gate canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
/* with WebGL the canvas is the picture; the figures stay in the DOM as the
   texture sources (and as the srcset/lazy loader) but are no longer painted */
.gate.gl canvas{display:block}
.gate.gl figure{opacity:0!important}
.gate figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .28s linear}
.gate figure.on{opacity:1}
.gate img{width:100%;height:100%;object-fit:cover;display:block}
/* the cut: a beat of true black between plates */
.gate::after{content:"";position:absolute;inset:0;background:var(--ink-1);
  opacity:0;pointer-events:none;transition:opacity .07s linear}
.gate.cut::after{opacity:1;transition:none}

/* OBJECT = four corner L-brackets, never a closed box. The film's own rule:
   the thing being witnessed is marked at its corners and nowhere else. */
.brackets{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.72}
.brackets i{position:absolute;width:26px;height:26px;border:0 solid #d5d4da}
.brackets i:nth-child(1){top:14px;left:14px;border-top-width:3px;border-left-width:3px}
.brackets i:nth-child(2){top:14px;right:14px;border-top-width:3px;border-right-width:3px}
.brackets i:nth-child(3){bottom:14px;left:14px;border-bottom-width:3px;border-left-width:3px}
.brackets i:nth-child(4){bottom:14px;right:14px;border-bottom-width:3px;border-right-width:3px}
.gate.cut .brackets{opacity:.2}

/* ---------- THE BARS ---------- */
.bar{position:fixed;left:0;right:0;height:var(--bar);background:var(--ink-1);z-index:20;
  display:flex;align-items:center;gap:var(--edge);padding:0 var(--edge);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.bar-t{top:0;border-bottom:1px solid var(--rule)}
.bar-b{bottom:0;border-top:1px solid var(--rule)}

.mark{font-family:var(--display);font-size:clamp(15px,1.5vw,21px);letter-spacing:.16em;
  color:var(--paper);text-decoration:none;line-height:1}
.bar nav{margin-left:auto;display:flex;gap:clamp(10px,1.6vw,26px);flex-wrap:nowrap}
.bar nav a{color:var(--paper-dim);text-decoration:none;white-space:nowrap;
  transition:color .16s}
.bar nav a:hover,.bar nav a:focus-visible{color:var(--gold)}

/* ---------- THE WITNESS READOUT ----------
   The film's own on-screen language, ported exactly: mist ink, never gold —
   gold is the site's editorial voice, mist is saakshe's instrument voice.
   LEFT is who + where. RIGHT is a measurement, then the instruction under a
   diamond. Every value is something actually measured, never decoration. */
.wit{--ink:#d5d4da; --ink3:#85828e; --surf:#1c1823; --line:#3f3852;
  display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:11px;letter-spacing:.02em;text-transform:none}
.pill{display:inline-flex;align-items:baseline;gap:7px;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  background:var(--surf);border:1px solid var(--line);box-shadow:2px 2px 0 #000}
.pill b{font-weight:400;color:var(--ink3)}
.pill span{color:var(--ink);font-variant-numeric:tabular-nums}
/* the awareness pill is faint: no shadow, no outline — the film's `faint=True` */
.pill.faint{background:rgba(28,24,35,.6);border-color:transparent;box-shadow:none}
#aware{transition:opacity .16s linear}
/* the diamond that marks the instruction — an outline, never filled */
.dia{width:9px;height:9px;border:1px solid #d5d4da;transform:rotate(45deg);
  flex:none;opacity:.9}
.wit-r{margin-left:auto;display:flex;align-items:center;gap:9px}

/* the scrub is DOTTED — the film's law: never a solid line, dots only */
.scrub{position:fixed;top:calc(var(--bar) - 3px);left:0;height:3px;width:0;z-index:30;
  background-image:radial-gradient(circle at 1.5px 1.5px, #d5d4da 1.4px, transparent 1.5px);
  background-size:7px 3px;background-repeat:repeat-x;opacity:.62;
  transition:width .12s linear}

/* ---------- THE BEATS : transparent, they scroll over the gate ---------- */
main{position:relative;z-index:10;pointer-events:none}   /* the film under it stays clickable */
.beat{min-height:100vh;display:flex;align-items:flex-end;
  padding:var(--bar) var(--edge);pointer-events:none}
.beat .in{max-width:min(60ch,86%);margin-bottom:clamp(24px,7vh,84px);pointer-events:auto}

.beat .num{font-family:var(--wide);font-size:11px;letter-spacing:.3em;color:var(--gold);
  display:block;margin-bottom:14px}
.beat .line.sm{font-size:clamp(18px,2.6vw,36px);margin-top:.5em;color:var(--paper-dim)}
.beat .line{font-family:var(--display);margin:0;color:var(--paper);
  font-size:clamp(26px,4.4vw,62px);line-height:1.04;letter-spacing:-.015em;
  text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.75)}

/* the opening beat: the poster already carries the title, so the beat keeps
   only the year, the line and the film mark — bottom right, off the tiger */
.open{align-items:flex-end}
.open .in{max-width:none;width:100%;margin:0 0 clamp(18px,5vh,64px);
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  transition:opacity .3s}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.open h1{font-family:var(--display);margin:0;line-height:.86;letter-spacing:-.02em;
  font-size:clamp(52px,15.5vw,240px);color:var(--paper);
  text-shadow:0 4px 60px rgba(0,0,0,.6)}
.open .yr{font-family:var(--wide);font-size:clamp(13px,1.5vw,19px);letter-spacing:.42em;
  color:var(--gold);margin:0 0 clamp(10px,2vh,22px)}
.open .sub{font-family:var(--mono);font-size:clamp(12px,1.15vw,15px);letter-spacing:.06em;
  color:var(--paper);max-width:44ch;margin:clamp(16px,3vh,34px) 0 0;line-height:1.55;
  text-transform:none;text-shadow:0 2px 24px rgba(0,0,0,.8)}

/* the film mark on the poster state */
.play{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(18px,3vh,34px);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;border:1px solid var(--rule);
  padding:11px 18px;transition:border-color .18s,color .18s;background:rgba(0,0,0,.25)}
.play:hover,.play:focus-visible{border-color:var(--gold);color:var(--gold)}
.play i{width:0;height:0;border-left:7px solid currentColor;
  border-top:5px solid transparent;border-bottom:5px solid transparent;display:block}

/* the film, playing inside the gate */
.gate iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;background:#000}
.gate.playing canvas,.gate.playing figure{visibility:hidden}
.gate.playing .brackets{opacity:.28}
body.playing .open .in{opacity:0;pointer-events:none}
.stop{margin-left:12px;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;
  color:var(--paper);background:transparent;border:1px solid var(--rule);padding:8px 14px;
  transition:border-color .18s,color .18s}
.stop:hover,.stop:focus-visible{border-color:var(--gold);color:var(--gold)}
.stop[hidden]{display:none}

/* the closing beat: the ledger of the film, on black */
.end{min-height:auto;background:var(--ink-1);align-items:flex-start;
  padding-top:clamp(40px,9vh,110px);padding-bottom:clamp(40px,9vh,110px);
  position:relative;z-index:15;border-top:1px solid var(--rule)}
.end .in{max-width:none;width:100%;margin:0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--edge);align-items:start}
.end .log{grid-column:1/span 7;font-family:var(--display);
  font-size:clamp(17px,1.9vw,27px);line-height:1.26;letter-spacing:-.01em;margin:0;
  color:var(--paper);text-transform:none;text-shadow:none}
.end .meta{grid-column:9/span 4;color:var(--paper-dim);text-transform:none;
  letter-spacing:.02em;font-size:12px;line-height:1.75}
.end .meta p{margin:0 0 12px}
.end .meta .fest{color:var(--gold)}
.end .meta a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule)}
.end .meta a:hover,.end .meta a:focus-visible{color:var(--gold);border-color:var(--gold)}

/* ---------- MOBILE ---------- */
@media (max-width:760px){
  :root{--bar:clamp(48px,6vh,64px)}
  .bar{font-size:9.5px;letter-spacing:.1em;gap:10px}
  .bar-t nav{display:none}
  .stop{margin-left:auto}
  /* the phone slate keeps who + where and one measurement; the plate pill and
     its diamond drop out rather than crowd */
  .wit{gap:7px;font-size:10px}
  .pill{padding:4px 8px;gap:5px}
  /* the phone keeps who + where and the year; the rotating line drops out */
  #aware{display:none}
  .pill:first-child span{overflow:hidden;text-overflow:ellipsis;max-width:34vw}
  .navm{position:fixed;bottom:var(--bar);left:0;right:0;z-index:19;background:var(--ink-1);
    border-top:1px solid var(--rule);display:flex;overflow-x:auto;
    padding:9px var(--edge);gap:16px;font-size:10px;letter-spacing:.12em;
    text-transform:uppercase}
  .navm a{color:var(--paper-dim);text-decoration:none;white-space:nowrap}
  .gate{bottom:calc(var(--bar) + 36px)}
  .beat{padding-bottom:calc(var(--bar) + 46px)}
  .end .in{grid-template-columns:1fr}
  .end .log,.end .meta{grid-column:1}
  .end .meta{margin-top:26px}
}
@media (min-width:761px){.navm{display:none}}

@media (prefers-reduced-motion:reduce){
  .gate figure{transition:none}
  .gate::after{display:none}
  .scrub{transition:none}
  *{scroll-behavior:auto!important}
}