/* ═══════════════════════════════════════════════════════════════════════
   SIDDHESH KASAT — THE RECORDING
   Ported from the Claude Design canvas. Every texture is CSS; no imagery.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink: 232 228 220;                    /* use as rgb(var(--ink) / .45) */
  --bg: #07080a;
  --bg-sunk: #050607;

  --green:        oklch(0.62 0.13 150);
  --green-bright: oklch(0.72 0.13 150);
  --green-mid:    oklch(0.70 0.12 150);
  --green-dim:    oklch(0.55 0.14 150);
  --green-edge:   oklch(0.45 0.10 150);
  --red:          oklch(0.52 0.19 28);
  --red-bright:   oklch(0.66 0.16 28);
  --blue:         oklch(0.50 0.13 265);

  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: Anton, Impact, "Arial Narrow Bold", sans-serif;

  --wrap: 1180px;
  --pad-y: clamp(46px, 6vw, 74px);
  --pad-x: clamp(20px, 5vw, 60px);
  --hair: 1px solid rgb(var(--ink) / .1);

  /* Theming hooks. On dark, a hover lifts toward white; on lit it has to
     darken instead, so the direction is a token rather than a literal. */
  --hover:  rgb(255 255 255 / .035);
  --lift:   rgb(255 255 255 / .022);
  --sweep:  rgba(255,255,255,.055);
  --vig:    rgba(0,0,0,.9);
  --vig-spread: 200px 60px;
  /* Readouts stay dark whatever the room lights do — a screen is a screen. */
  --bar:  rgba(7,8,10,.7);      /* tape bar ground */
  --glow: rgba(46,64,52,.35);   /* the green wash behind the contact block */
  --screen: #040605;
  /* A readout stays dark in both states, so anything printed on one must
     keep dark-mode ink — flipping these with the room is what turned the
     project names black-on-black when the lights came up. */
  --screen-ink: 232 228 220;
  --screen-green: oklch(0.72 0.13 150);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:rgb(var(--ink));
  font:300 15px/1.75 var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,p,dl,dd,figure{margin:0}
ul{margin:0;padding:0;list-style:none}

a{color:var(--green);text-decoration:none}

:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.ta-r{text-align:right}
.is-green{color:var(--green-bright)}
.is-red{color:var(--red-bright)}
.is-mute{color:rgb(var(--ink) / .64)}


/* ── KEYFRAMES ─────────────────────────────────────────────────────────
   Nine live animations. hp-slowflick, hp-beat, hp-rise, hp-float, hp-wisp
   and hp-peek were dropped — orphaned when the title cards and the
   Receipts stat row were cut from the design.                          */

@keyframes hp-flick{0%,96%,100%{opacity:1}97%{opacity:.25}98%{opacity:.85}99%{opacity:.4}}
@keyframes hp-scan{0%{transform:translateY(0)}100%{transform:translateY(4px)}}
@keyframes hp-band{0%{transform:translateY(-8vh)}100%{transform:translateY(108vh)}}
@keyframes hp-grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(2%,2%)}}
@keyframes hp-rec{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes hp-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-6px)}}
@keyframes hp-jitter{0%,100%{transform:translate(0,0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-2px,0)}80%{transform:translate(1px,1px)}}
@keyframes hp-sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes hp-cue{0%,92%,100%{opacity:1}94%{opacity:.4}97%{opacity:.9}}

/* The reveal, in two beats. First the tear: stepped and unaeased so it
   reads as dropped frames — and it ENDS at opacity 0, so the dial is
   already gone before anything moves. (Holding it at opacity 1 with a
   `both` fill is what left the "1" sitting on screen through the whole
   transition.) Then the open: one smooth accelerating slide, no judder,
   because the glitch has already had its say. */
@keyframes hp-failsafe{to{opacity:0;pointer-events:none}}

@keyframes hp-glitch{
  0%  {transform:translate3d(0,0,0);filter:none;opacity:1}
  12% {transform:translate3d(-9px,3px,0);filter:invert(1) hue-rotate(90deg);opacity:.9}
  24% {transform:translate3d(7px,-4px,0);filter:none}
  36% {transform:translate3d(-5px,5px,0);filter:saturate(6) hue-rotate(-70deg);opacity:.8}
  50% {transform:translate3d(11px,1px,0);filter:none;opacity:.6}
  64% {transform:translate3d(-8px,-3px,0);filter:invert(1)}
  78% {transform:translate3d(5px,4px,0);filter:contrast(2.6) brightness(1.7);opacity:.35}
  90% {transform:translate3d(-3px,0,0);opacity:.15}
  100%{transform:translate3d(0,0,0);filter:none;opacity:0}
}

/* the white hit, blooming with the tear rather than cutting to it */
@keyframes hp-hit{
  0%  {opacity:0}
  22% {opacity:.92}
  100%{opacity:0}
}

/* panels retract — a small nudge apart, then one clean accelerating exit */
@keyframes hp-open-top{
  0%  {transform:translate3d(0,0,0)}
  14% {transform:translate3d(-5px,-1.6%,0)}
  100%{transform:translate3d(0,-101%,0)}
}
@keyframes hp-open-bot{
  0%  {transform:translate3d(0,0,0)}
  14% {transform:translate3d(5px,1.6%,0)}
  100%{transform:translate3d(0,101%,0)}
}

/* the hot seam the picture opens out of */
@keyframes hp-seam{
  0%  {opacity:0;transform:translateY(-50%) scaleX(.18)}
  14% {opacity:1;transform:translateY(-50%) scaleX(1)}
  46% {opacity:.9}
  100%{opacity:0;transform:translateY(-50%) scaleX(1)}
}


/* ── ROOM LIGHTS ───────────────────────────────────────────────────────
   Lights on does not mean "a light website" — it means the room lights
   came up on a film set. The ground goes to bone, ink goes near-black,
   the greens darken so they still hold contrast, and the grain, scanlines
   and vignette all stay exactly where they were. Readouts (the portrait
   plate, the project figures) stay dark throughout, because a screen
   doesn't turn white when you flick the wall switch — that is what keeps
   this from feeling like a different site. */

body.is-lit{
  --ink: 22 24 22;
  --bg: #ece2cc;
  --bg-sunk: #e1d6bd;

  --green:        oklch(0.45 0.13 150);   /* 0.50 measured 4.38:1 on cream */
  --green-bright: oklch(0.42 0.14 150);
  --green-mid:    oklch(0.44 0.13 150);
  --green-dim:    oklch(0.56 0.12 150);
  --green-edge:   oklch(0.66 0.09 150);
  --red:          oklch(0.50 0.19 28);
  --red-bright:   oklch(0.45 0.19 28);
  --blue:         oklch(0.46 0.13 265);

  --hover: rgb(0 0 0 / .05);
  --lift:  rgb(0 0 0 / .028);
  --sweep: rgba(0,0,0,.05);
  --vig:   rgba(120,92,44,.5);
  --vig-spread: 170px 30px;
  /* The tape bar and the contact wash were the two surfaces still painted
     a literal dark. Left alone, the bar stayed black over a cream page
     while REC and the timecode themed to near-black on top of it —
     invisible. */
  --bar:  rgba(236,226,204,.72);
  --glow: rgba(150,170,140,.38);
}

/* the torch is a darkness effect; with the lights up it has nothing to do */
body.is-lit .fx__torch{display:none!important}

/* One ladder now serves both states — the base alphas were lifted to clear
   4.5:1 on the dark ground, which also clears it on the lit one. */
body.is-lit .dept__name{color:var(--green-bright)}


/* ── ATMOSPHERE ────────────────────────────────────────────────────────
   In the canvas these were absolute inside a 1180px artboard. On a real
   page they are fixed to the viewport so they persist through scroll.
   .fx uses display:contents so it creates no stacking context — the
   grain layer must blend against page content, not against its wrapper. */

.fx{display:contents}

.fx__scan,.fx__grain,.fx__band,.fx__torch,.fx__vignette{
  position:fixed;pointer-events:none;
}

.fx__scan{
  inset:0;z-index:40;opacity:.55;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.34) 0 1px,rgba(0,0,0,0) 1px 3px);
  animation:hp-scan 5s steps(4) infinite;
}

.fx__grain{
  inset:-20%;z-index:41;opacity:.13;mix-blend-mode:overlay;
  background-image:
    repeating-conic-gradient(from 0deg at 11% 23%,#fff 0deg .6deg,#000 .6deg 1.2deg),
    repeating-conic-gradient(from 63deg at 77% 61%,#fff 0deg .5deg,#000 .5deg 1deg);
  background-size:3px 3px,2px 2px;
  animation:hp-grain .9s steps(3) infinite;
}

.fx__band{
  left:0;right:0;top:0;height:70px;z-index:42;
  background:linear-gradient(to bottom,transparent,var(--sweep),transparent);
  animation:hp-band 11s linear infinite;
}

.fx__torch{
  inset:0;z-index:39;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at 50% 50%,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 42%,rgba(2,3,4,.82) 78%);
}

.fx__vignette{
  inset:0;z-index:38;
  box-shadow:inset 0 0 var(--vig-spread) var(--vig);
}


/* ── ACADEMY LEADER ────────────────────────────────────────────────── */

.leader{
  position:fixed;inset:0;z-index:100;overflow:hidden;background:transparent;

  /* The leader's panes are hardcoded dark in both states — a projector
     gate does not turn cream when the room lights come up. So its ink has
     to stay dark-mode ink, or the countdown turns near-black on near-black
     and the whole thing plays invisibly with the lights on. Same reasoning
     as --screen-ink on the project titles. */
  --ink: var(--screen-ink);
  --green: var(--screen-green);
  --green-bright: var(--screen-green);
}
.leader[hidden]{display:none}

.leader__pane{position:absolute;left:0;right:0;height:50.5%;background:#08090b}
.leader__pane--top{top:0}
.leader__pane--bot{bottom:0}

.leader__body{position:absolute;inset:0}
/* while assets load it is a plain black screen — no dial, no frozen digit */
.leader.is-loading .leader__body{opacity:0}
/* If the script never runs, nothing would ever take this overlay down and
   the site would be a black wall. Cancelled as soon as JS removes
   .is-loading, so it only ever fires when something is actually wrong. */
.leader.is-loading{animation:hp-failsafe .5s linear 12s forwards}

.leader__line{
  position:absolute;left:0;right:0;top:50%;height:2px;opacity:0;
  transform:translateY(-50%) scaleX(.15);
  background:rgb(var(--ink));
  box-shadow:0 0 26px 7px rgb(var(--ink) / .55);
}

.leader.is-glitch .leader__body{animation:hp-glitch .2s steps(1) forwards}
.leader.is-glitch .leader__flash{animation:hp-hit .2s ease-out forwards}
.leader.is-open{pointer-events:none}
.leader.is-open .leader__pane--top{animation:hp-open-top .62s cubic-bezier(.62,0,.2,1) forwards}
.leader.is-open .leader__pane--bot{animation:hp-open-bot .62s cubic-bezier(.62,0,.2,1) forwards}
.leader.is-open .leader__line{animation:hp-seam .62s ease-out forwards}


.leader__scan{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.4) 0 1px,transparent 1px 3px);
}
.leader__grain{
  position:absolute;inset:-20%;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:repeating-conic-gradient(from 0deg at 11% 23%,#fff 0deg .6deg,#000 .6deg 1.2deg);
  background-size:3px 3px;
  animation:hp-grain .9s steps(3) infinite;
}

.leader__stage{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}

.dial{
  position:relative;
  width:clamp(240px,62vw,420px);
  height:clamp(240px,62vw,420px);
  display:flex;align-items:center;justify-content:center;
}
.dial__ring{position:absolute;border-radius:50%}
.dial__ring--1{inset:0;border:1px solid rgb(var(--ink) / .22)}
.dial__ring--2{inset:12.4%;border:1px solid rgb(var(--ink) / .13)}
.dial__ring--3{inset:30%;border:1px solid rgb(var(--ink) / .09)}
.dial__cross{position:absolute;background:rgb(var(--ink) / .16)}
.dial__cross--v{left:50%;top:0;bottom:0;width:1px}
.dial__cross--h{top:50%;left:0;right:0;height:1px}
.dial__sweepclip{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.dial__sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgb(var(--ink) / .14) 0deg,rgb(var(--ink) / .03) 46deg,transparent 92deg);
  animation:hp-sweep 1s linear infinite;
}
.dial__hand{
  position:absolute;left:50%;top:50%;width:50%;height:1px;transform-origin:0 50%;
  background:linear-gradient(to right,rgb(var(--ink) / .6),rgb(var(--ink) / 0));
  animation:hp-sweep 1s linear infinite;
}
.dial__count{
  position:relative;
  font:400 clamp(110px,26vw,210px)/1 var(--display);
  color:rgb(var(--ink));
  text-shadow:0 0 70px rgba(0,0,0,.9);
  animation:hp-cue 1s steps(1) infinite;
}

.leader__marks{position:absolute;inset:0;pointer-events:none}
.leader__mark{
  position:absolute;
  font:400 10.5px var(--mono);letter-spacing:.26em;
  color:rgb(var(--ink) / .4);
}
.leader__mark--tl{left:var(--pad-x);top:34px}
.leader__mark--tr{right:var(--pad-x);top:34px;color:var(--green-bright);opacity:0;transition:opacity .2s}
.leader__mark--tr.is-on{opacity:1}

/* The reel number is the view counter. Centred at the foot so the two
   top corners and this form a stable triangle around the dial — with the
   frame counter and progress track gone, anchoring it to one corner left
   the whole frame lopsided. */
.leader__mark--reel{
  left:0;right:0;bottom:46px;text-align:center;
  color:rgb(var(--ink) / .3);
}
.leader__mark--reel b{font-weight:400;color:rgb(var(--ink) / .62)}

.leader__flash{
  position:absolute;inset:0;background:rgb(var(--ink));pointer-events:none;
  opacity:0;
}


body.is-leading{overflow:hidden}


/* ── BUTTONS ───────────────────────────────────────────────────────── */

.btn{
  display:inline-block;
  font:500 12px var(--mono);letter-spacing:.2em;
  padding:16px 26px;cursor:pointer;
  border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s;
}

.btn--solid{color:var(--bg);background:rgb(var(--ink));border-color:rgb(var(--ink))}
.btn--solid:hover{background:var(--green-bright);border-color:var(--green-bright);color:var(--bg)}

.btn--outline{color:rgb(var(--ink) / .7);border-color:rgb(var(--ink) / .22)}
.btn--outline:hover{border-color:rgb(var(--ink));color:rgb(var(--ink))}

.btn--quiet{
  font:400 10.5px var(--mono);letter-spacing:.14em;padding:6px 11px;
  color:rgb(var(--ink) / .62);background:transparent;border-color:rgb(var(--ink) / .14);
}
.btn--quiet:hover{border-color:rgb(var(--ink));color:rgb(var(--ink))}

.btn--wire{
  font:400 10.5px var(--mono);letter-spacing:.14em;padding:6px 11px;
  color:rgb(var(--ink));background:transparent;border-color:rgb(var(--ink) / .22);
}
.btn--wire:hover{border-color:var(--green);color:var(--green-bright)}


/* ── TAPE BAR ──────────────────────────────────────────────────────── */

.tapebar{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:13px clamp(16px,4vw,26px);
  border-bottom:var(--hair);
  background:var(--bar);backdrop-filter:blur(2px);
}
.tapebar__group{
  display:flex;align-items:center;gap:clamp(12px,2.4vw,22px);flex-wrap:wrap;
  font:400 10.5px var(--mono);letter-spacing:.14em;color:rgb(var(--ink) / .62);
}
.tapebar__rec{display:flex;align-items:center;gap:7px}
.tapebar__dot{
  width:7px;height:7px;border-radius:50%;background:var(--red);
  animation:hp-rec 1.7s steps(1) infinite;
}
.tapebar__tc{color:var(--green)}


/* ── SHARED SECTION FURNITURE ──────────────────────────────────────── */

main{position:relative;z-index:20}

.hero,.reel{
  max-width:var(--wrap);margin-inline:auto;
  padding:var(--pad-y) var(--pad-x);
  border-top:var(--hair);
}
.hero{border-top:0;padding-top:clamp(58px,8vw,96px)}

.reelhead{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-bottom:40px;
}
.reelhead--tight{margin-bottom:14px}
.reelhead__no{
  font:400 10.5px var(--mono);letter-spacing:.26em;color:var(--green-bright);
  white-space:nowrap;
}
.reelhead__title{
  font:400 clamp(28px,4.4vw,44px)/1 var(--display);
  text-transform:uppercase;letter-spacing:.005em;
}
/* every reel head carries the same short green dash — REEL 02 had a long
   plain rule and the others had nothing, which read as two systems */
.reelhead__dash{flex:none;width:40px;height:1px;background:var(--green)}
.reelhead__aside{margin-left:auto;font:300 11px var(--mono);color:rgb(var(--ink) / .64)}

.reel__lede{
  max-width:620px;margin-bottom:40px;
  font:300 12.5px/1.75 var(--mono);color:rgb(var(--ink) / .64);
}

.slot{
  background-color:transparent;
  border:1px solid rgb(var(--ink) / .1);
  display:flex;text-align:center;
  font:400 10px/1.7 var(--mono);letter-spacing:.1em;color:rgb(var(--ink) / .64);
}


/* ── HERO ──────────────────────────────────────────────────────────── */

.hero__grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}

.eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:30px;
  font:400 10.5px var(--mono);letter-spacing:.3em;color:var(--green-bright);
}
.eyebrow__rule{width:54px;height:1px;background:var(--green);flex:none}

.title{position:relative}
.title__text,.title__ghost{
  font:400 clamp(52px,10.6vw,150px)/0.84 var(--display);
  letter-spacing:-.02em;text-transform:uppercase;
}
.title__text{
  color:rgb(var(--ink));
  text-shadow:0 0 60px rgba(0,0,0,.9);
  animation:hp-flick 7s steps(1) infinite;
}
.title__ghost{
  position:absolute;top:0;pointer-events:none;mix-blend-mode:screen;
}
.title__ghost--green{left:-3px;color:var(--green-dim);opacity:.34;animation:hp-jitter 5.5s steps(2) infinite}
.title__ghost--blue{left:3px;top:1px;color:var(--blue);opacity:.26}

.hero__lede{
  margin-top:34px;max-width:560px;
  font:300 15px/1.75 var(--mono);color:rgb(var(--ink) / .72);
}
.hero__sub{
  margin-top:16px;max-width:560px;
  font:300 13px/1.7 var(--mono);color:rgb(var(--ink) / .64);
}
.hero__cta{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}

.plate{
  width:290px;display:flex;flex-direction:column;gap:18px;
  animation:hp-drift 9s ease-in-out infinite;
}
.card{border:1px solid rgb(var(--ink) / .16);padding:16px}
.card__label{
  font:400 9.5px var(--mono);letter-spacing:.24em;
  color:rgb(var(--ink) / .64);margin-bottom:12px;
}
.card__note{
  margin-top:12px;font:400 9.5px/1.6 var(--mono);letter-spacing:.1em;
  color:rgb(var(--ink) / .64);
}

/* PLATE 01 — the portrait, treated to match the tape.
   Grayscale + crushed contrast, duotoned toward the tape green, then
   scanlines, animated grain and a vignette stacked over it. The figure
   is `isolation:isolate` so those blend modes composite against the
   photo rather than against the page behind it. */

.plate__shot{
  position:relative;height:332px;margin:0;overflow:hidden;
  isolation:isolate;
  border:1px solid rgb(var(--ink) / .12);
  /* The portrait is cut out, so the plate supplies its own darkness. Just
     a faint glow behind the head so he isn't sitting on flat black — no
     grid or rings; they read as sci-fi rather than analog horror. Left
     unanimated on purpose: animating this background promotes it to its
     own compositing layer, and the <img> above it is promoted too by its
     hp-flick opacity animation, at which point the engine paints the
     background over the portrait and he vanishes. */
  background:
    radial-gradient(100% 76% at 50% 32%,rgba(17,27,22,.7),rgba(4,6,5,0) 70%),
    var(--screen);
}

.plate__shot img{
  position:relative;
  display:block;width:100%;height:100%;
  object-fit:contain;object-position:50% 100%;
  /* The dots are already the tape green and already tone-mapped, so no
     grayscale here — that would strip the colour straight back out. Just
     a phosphor bloom, which is one blur of the rasterised image rather
     than per-dot work. */
  filter:brightness(1.04) drop-shadow(0 0 2.5px rgba(126,224,176,.4));
  transition:filter .45s ease;
  animation:hp-flick 11s steps(1) infinite;
}
.plate__shot:hover img{filter:brightness(1.3) drop-shadow(0 0 5px rgba(126,224,176,.6))}

.plate__tint,.plate__scan,.plate__grain,.plate__vig{
  position:absolute;pointer-events:none;
}
.plate__tint{inset:0;background:var(--green);mix-blend-mode:color;opacity:.3}
.plate__scan{
  inset:0;opacity:.55;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.5) 0 1px,transparent 1px 3px);
}
.plate__grain{
  inset:-30%;opacity:.22;mix-blend-mode:overlay;
  background-image:repeating-conic-gradient(from 0deg at 11% 23%,#fff 0deg .6deg,#000 .6deg 1.2deg);
  background-size:3px 3px;
  animation:hp-grain .9s steps(3) infinite;
}
.plate__vig{inset:0;box-shadow:inset 0 0 46px 14px rgba(0,0,0,.9)}

.cert{
  border:1px solid rgb(var(--ink) / .16);padding:14px 16px;
  display:flex;flex-direction:column;gap:9px;
  font:400 10px var(--mono);letter-spacing:.12em;color:rgb(var(--ink) / .62);
}
.cert__row{display:flex;justify-content:space-between;gap:12px}
/* BUILDS stacks its three lines. Measured row pitch in this card is 22px,
   so the stacked lines use exactly that — otherwise they sit tighter than
   the rows above them and the box reads uneven. Fixed px because the card
   type is a fixed 10px, not clamped. */
.cert__row--stack{align-items:flex-start}
.cert__row--stack dt,
.cert__row--stack dd{line-height:22px}   /* same leading, so BUILDS sits on its first line */
.cert dd{margin:0;color:rgb(var(--ink));text-align:right;overflow-wrap:anywhere}



/* ── REEL 01 · PREVIOUS HAUNTINGS ──────────────────────────────────── */

.jobs{display:flex;flex-direction:column}

.job{
  display:grid;grid-template-columns:150px 1fr 210px;gap:30px;
  padding:26px 0;border-top:1px solid rgb(var(--ink) / .11);
  align-items:start;transition:background .2s;
}
.job:hover{background:var(--lift)}
.job__when{font:400 11px/1.6 var(--mono);letter-spacing:.14em;color:rgb(var(--ink) / .64)}
.job__role{font:400 clamp(21px,2.4vw,26px)/1.2 var(--display);text-transform:uppercase;color:rgb(var(--ink))}
.job__org{margin-top:5px;font:400 11px var(--mono);letter-spacing:.16em;color:var(--green-mid)}
.job__note{margin-top:14px;max-width:470px;font:300 12px/1.75 var(--mono);color:rgb(var(--ink) / .66)}

/* unfilled copy — deliberately conspicuous so it can't ship by accident */
.job__todo{
  font-style:normal;color:var(--red-bright);
  border-bottom:1px dashed rgb(var(--ink) / .25);
}

.tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tags li{
  font:400 9.5px var(--mono);letter-spacing:.14em;color:rgb(var(--ink) / .62);
  border:1px solid rgb(var(--ink) / .16);padding:4px 8px;
}


/* ── REEL 02 · FOUR THINGS THAT SURVIVED ───────────────────────────── */

.records{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgb(var(--ink) / .13);
}
.record{
  display:block;background:var(--bg);padding:32px 30px 30px;color:inherit;
  transition:background .25s,filter .25s;
}
.record:hover{background:var(--hover);filter:contrast(1.15) saturate(1.3)}
/* cards with no URL yet are divs, not links — don't offer a hover state
   that implies somewhere to go */
.record--nolink{cursor:default}
.record--nolink:hover{background:var(--bg);filter:none}

.record__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px}

/* Each record leads with the one number it earned rather than a mocked-up
   screenshot. Scanlines keep it reading as a readout off the tape. */
.figure{
  min-height:104px;margin-bottom:24px;padding:0 18px;
  display:flex;flex-direction:column;justify-content:center;
  border:1px solid rgb(var(--ink) / .09);
  background-color:var(--screen);
  background-image:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.30) 0 1px,transparent 1px 3px),
    linear-gradient(to bottom,rgb(255 255 255 / .022),transparent);
  overflow:hidden;
}
.figure__name{
  margin:0;
  font:400 clamp(25px,3.2vw,37px)/1.12 var(--display);
  text-transform:uppercase;letter-spacing:.055em;
  color:rgb(var(--screen-ink));
  /* the hero headline's chromatic split, reused — it is already this
     page's signature for display type, and unlike a dot fill it does not
     eat the letterforms */
  text-shadow:-2px 0 var(--green-dim), 2px 1px var(--blue);
  overflow-wrap:anywhere;
}
.record:hover .figure__name{
  text-shadow:-3px 0 var(--green), 3px 1px var(--blue);
}
.figure__cap{
  margin-top:10px;
  font:400 9px var(--mono);letter-spacing:.2em;color:var(--screen-green);
}
.record__no{font:400 10px var(--mono);letter-spacing:.22em;color:rgb(var(--ink) / .64)}
.record__status{
  font:400 9.5px var(--mono);letter-spacing:.2em;color:var(--green-bright);
  border:1px solid var(--green-edge);padding:3px 8px;
}
.record__stack{font:400 10px/1.7 var(--mono);letter-spacing:.13em;color:rgb(var(--ink) / .62);margin-bottom:18px}
.record__line{margin-bottom:14px;font:300 13px/1.7 var(--mono);color:rgb(var(--ink) / .75)}
.record__detail{margin-bottom:22px;font:300 12px/1.7 var(--mono);color:rgb(var(--ink) / .64)}
.record__decision{
  border-top:1px solid rgb(var(--ink) / .13);padding-top:16px;
  font:400 10px/1.6 var(--mono);letter-spacing:.14em;color:var(--green-mid);
}


/* ── REEL 03 · THE CAST ────────────────────────────────────────────── */

.reel--cast{background:var(--bg-sunk)}
.cast{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgb(var(--ink) / .13);
}
.dept{background:var(--bg-sunk);padding:24px 22px 26px}
.dept{position:relative;overflow:hidden}
/* faint scanlines so each department reads as its own panel of tape */
.dept::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.26) 0 1px,transparent 1px 3px);
}
.dept > *{position:relative}

/* Solid, not dotted. The dot fill needs glyph area to read — at this size
   it turned the labels to mush, so the dots stay on the large project
   names and these just get promoted to display type. */
.dept__name{
  margin-bottom:20px;
  font:400 16px/1 var(--display);
  text-transform:uppercase;letter-spacing:.17em;
  color:var(--green-bright);
}

/* quiet hover feedback only — the shake was doing too much */
.dept:hover{background:var(--lift)}
.dept:hover .dept__list b{color:rgb(var(--ink))}
.dept__list{display:flex;flex-direction:column;gap:13px}
.dept__list b{
  display:block;font:400 17px/1.1 var(--display);letter-spacing:.01em;
  text-transform:uppercase;color:rgb(var(--ink));
}
.dept__list span{
  display:block;margin-top:3px;
  font:300 10.5px/1.4 var(--mono);color:rgb(var(--ink) / .62);
}


/* ── REEL 04 · CONTACT ─────────────────────────────────────────────── */

.reel--contact{
  text-align:center;
  padding-block:clamp(56px,7vw,80px);
  background:radial-gradient(700px 300px at 50% 0%,var(--glow),transparent);
}
.contact__eyebrow{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-bottom:22px;
  font:400 10.5px var(--mono);letter-spacing:.3em;color:var(--green-bright);
}
.contact__title{
  margin-bottom:26px;
  font:400 clamp(38px,7.2vw,84px)/0.95 var(--display);
  text-transform:uppercase;
  animation:hp-flick 9s steps(1) infinite;
}
.contact__lede{
  margin:0 auto 38px;max-width:470px;
  font:300 12.5px/1.8 var(--mono);color:rgb(var(--ink) / .64);
}
.contact__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.contact__cta .btn{font-size:12.5px;letter-spacing:.14em;padding:17px 28px}


/* ── REEL 05 · AUDIENCE RESEARCH ──────────────────────────────────── */

.reel--poll{background:linear-gradient(to bottom,var(--lift),transparent)}

.poll{
  margin:0;padding:26px 22px;
  border:1px solid rgb(var(--ink) / .13);
  background:var(--lift);
}
.poll__q{
  padding:0 0 20px;
  font:400 10.5px var(--mono);letter-spacing:.22em;color:rgb(var(--ink) / .62);
}
.poll__opts{display:flex;flex-direction:column;gap:1px;background:rgb(var(--ink) / .1)}

.poll__opt{
  display:grid;grid-template-columns:180px 1fr 52px;gap:18px;align-items:center;
  background:var(--bg);border:0;padding:15px 18px;text-align:left;cursor:pointer;
  font:400 11.5px var(--mono);letter-spacing:.14em;color:rgb(var(--ink) / .72);
  transition:background .2s,color .2s;
}
.poll__opt:hover:not(:disabled){background:var(--hover);color:rgb(var(--ink))}
.poll__opt:disabled{cursor:default}
.poll__opt.is-mine{color:var(--green-bright)}

.poll__bar{position:relative;height:2px;background:rgb(var(--ink) / .1);overflow:hidden}
.poll__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--green);transition:width .5s ease}
.poll__opt.is-mine .poll__fill{background:var(--green-bright)}

.poll__pct{text-align:right;color:rgb(var(--ink) / .64);font-variant-numeric:tabular-nums}
.poll__status{margin-top:18px;font:300 11px var(--mono);color:var(--green-mid)}

/* ── FOOTER ────────────────────────────────────────────────────────── */

.footer{
  position:relative;z-index:20;
  max-width:var(--wrap);margin-inline:auto;
  padding:44px var(--pad-x);border-top:var(--hair);
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;
  font:400 10.5px var(--mono);letter-spacing:.16em;color:rgb(var(--ink) / .64);
}
.footer__mid{color:rgb(var(--ink) / .7)}


/* ── RESPONSIVE ────────────────────────────────────────────────────── */

@media (max-width:1000px){
  .cast{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;align-items:start}
  .plate{width:100%;max-width:360px}
  .job{grid-template-columns:120px 1fr;gap:20px 24px}
  .tags{grid-column:1 / -1;justify-content:flex-start}
}

@media (max-width:760px){
  .records{grid-template-columns:1fr}
  .record{padding:26px 22px 24px}
}

@media (max-width:620px){
  .cast{grid-template-columns:1fr}
  .job{grid-template-columns:1fr;gap:12px}
  .job__note{max-width:none}
  .footer{flex-direction:column;gap:10px}
  .poll__opt{grid-template-columns:1fr 52px;gap:6px 12px}
  .poll__bar{grid-column:1 / -1;order:3}
  /* the email is one unbreakable 26-char token — at 320px it and the
     GitHub handle blow past the viewport unless they can break */
  .contact__cta .btn{
    overflow-wrap:anywhere;
    font-size:11.5px;letter-spacing:.08em;padding:15px 16px;
  }
  .hero__cta,.contact__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn,.contact__cta .btn{text-align:center}
}


/* ── REDUCED MOTION ────────────────────────────────────────────────────
   Not optional polish. The default design flickers the <h1>, jitters a
   chromatic-aberration layer, and runs continuous grain, scanlines, a
   travelling light band and a 1s sweep — a genuine photosensitivity and
   vestibular trigger. Hold everything at its resting frame; app.js also
   skips the leader and disables the torch under this query.            */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .fx__scan,.fx__grain,.fx__band{display:none}
  .fx__torch{display:none}
  .title__ghost{opacity:.18}
  .tapebar__dot{opacity:1}
}

/* ═══════════════════════════════════════════════════════════════════════
   THE 404 — EVERYTHING THAT IS NOT A DESKTOP
   The site is a desktop-only tape, so this is the common case, not an edge
   case: phones, tablets and narrow windows all land here.

   Two queries, and neither is about phones specifically. The first is
   width: under 1024px there is not enough room for the reel layout. The
   second is (hover:none) and (pointer:coarse) — the standard test for a
   true touch device — which catches an iPad Pro in landscape at 1366px
   that the width rule alone would wave through. A touchscreen laptop
   reports hover:hover from its trackpad, so it is not caught.

   The .98 is deliberate: on a fractional-DPI screen a 1024px viewport can
   measure 1023.33, which is neither <= 1023 nor >= 1024, and a device
   would fall clean through the gap between the two halves of the rule.
   ═══════════════════════════════════════════════════════════════════════ */

.gate{display:none}

@media (max-width: 1023.98px), (hover: none) and (pointer: coarse){

  html,body{overflow:hidden;height:100%}

  /* The real site is not laid out at all. It is behind an opaque panel, so
     this is not about appearance — it keeps the page's links out of the tab
     order and stops the browser doing layout nobody will ever see. */
  main,footer{display:none!important}

  /* Both of these sit BELOW the .fx layers (38–42) on purpose. That is what
     puts the same torch, vignette, scanline, grain and sweep over the 404
     as over the site — one set of atmosphere, not a second copy that would
     drift out of step. The leader still outranks everything at 100. */
  .gate{z-index:30}
  .tapebar{position:fixed;top:0;left:0;right:0;z-index:35}

  .gate{
    position:fixed;inset:0;
    display:flex;flex-direction:column;justify-content:space-between;align-items:center;
    padding:calc(clamp(22px,7vw,40px) + 56px) clamp(20px,6vw,34px) clamp(22px,7vw,40px);
    background:var(--bg);
    color:rgb(var(--ink));
    text-align:center;
    overflow:hidden;
    height:100dvh;
  }

  .gate__body,.gate__foot{position:relative;z-index:1}

  .gate__body{
    flex:1;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:clamp(13px,3.4vw,19px);
  }

  .gate__sig{
    display:inline-flex;align-items:center;gap:8px;
    font-size:10px;letter-spacing:.24em;color:var(--red-bright);
  }
  .gate__dot{
    width:7px;height:7px;border-radius:50%;background:var(--red);
    animation:hp-rec 1.7s steps(1) infinite;
  }

  /* ── the live 404 ──────────────────────────────────────────────────
     The number does not move. It sits dead still and is interrupted — at
     random intervals app.js corrupts the glyphs and, for those few frames
     only, cuts the two coloured copies into slices at random heights and
     offsets. Between bursts the clip is inset(100%), so the ghosts are
     not merely invisible, they are not painted at all.

     An earlier version had those slices travelling smoothly down the
     glyphs on a fixed loop, and the number itself drifting off its
     baseline. Both read as decoration rather than as a fault: anything
     that repeats on a timer stops looking broken. */
  .gate__code{
    position:relative;
    font:400 clamp(96px,36vw,168px)/.84 var(--display);
    letter-spacing:.02em;
    color:rgb(var(--ink));
  }
  .gate__code::before,
  .gate__code::after{
    content:attr(data-text);
    position:absolute;left:0;top:0;width:100%;
    pointer-events:none;
    mix-blend-mode:screen;
  }
  .gate__code::before{
    color:var(--green-bright);
    clip-path:var(--tear-a,inset(100% 0 0 0));
    transform:translateX(var(--tear-ax,0));
  }
  .gate__code::after{
    color:var(--blue);
    clip-path:var(--tear-b,inset(100% 0 0 0));
    transform:translateX(var(--tear-bx,0));
  }

  .gate__rule{
    display:block;width:min(240px,60%);height:1px;
    background:linear-gradient(to right,transparent,var(--green) 20%,var(--green) 80%,transparent);
  }

  .gate__line{
    font-size:clamp(12px,3.6vw,14px);letter-spacing:.16em;
    color:rgb(var(--ink) / .82);
  }

  .gate__foot{
    font-size:9px;letter-spacing:.24em;
    color:rgb(var(--ink) / .45);
  }

  @media (prefers-reduced-motion: reduce){
    .gate__code,.gate__dot{animation:none}
    .gate__code::before,.gate__code::after{display:none}
  }
}