/* ── Type, unified with the rest of the site ─────────────────────────────────
   Measured off /work/ rather than guessed:
     item title   37.4px  weight 500  tracking -0.01em   (the reel's titles)
     filter chip  11px    weight 400  tracking  0.19em   (the reel's filter)
     meta line    10px    weight 300  tracking  0.24em   (the masthead eyebrow)
     micro chrome 10px    weight 300  tracking  0.2em
   10px is the site's floor for mono; nothing here goes under it any more.
   ────────────────────────────────────────────────────────────────────────── */
/* ============================================================
   ERF CHANNEL STAGE — CH.03 ERFI.
   Three views in the CH.02 shell: STAGE, EPISODES, PROCESS.

   The look is a lit plate floating in a black void with him
   standing on it, small in frame. The render carries that
   composition itself, so the page's job is to stay out of the
   way: no frame, no border, no panel, just black.

   Phosphor is "on air" only: the tally dot and the pose that is
   currently playing. Everything else is bone and hairline.
   ============================================================ */

.erf-chs{
  --ink:#ededea; --faint:#6f6f68; --line:rgba(237,237,234,.14); --phos:#38ff70;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --disp:'Kanit',system-ui,sans-serif;
  --hdr:62px;
  background:#000; color:var(--ink); font-family:var(--disp);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--hdr);
}
.erf-chs *{box-sizing:border-box}
.erf-chs a{color:inherit;text-decoration:none}
.erf-chs button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.erf-chs img{display:block;max-width:100%}
.erf-chs ::selection{background:var(--phos);color:#000}
.erf-chs button:focus-visible,.erf-chs a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.erf-chs-shell{height:calc(100vh - var(--hdr));min-height:560px;display:flex;flex-direction:column;overflow:hidden}

/* ── bar ── */
.erf-chs-bar{display:flex;gap:2px;align-items:center;padding:10px 4vw;flex:0 0 auto;
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.erf-chs-bar::-webkit-scrollbar{display:none}
.erf-chs-bar>*{flex:0 0 auto}
.erf-chs-brand{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.24em;color:var(--faint);
  margin-right:12px;white-space:nowrap}
.erf-chs-views{display:flex;gap:2px}
.erf-chs-views button{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.19em;
  border:1px solid var(--line);color:var(--faint);padding:8px 14px;white-space:nowrap}
.erf-chs-views button:hover{color:var(--ink)}
.erf-chs-views button.on{color:var(--ink);border-color:rgba(237,237,234,.55)}
.erf-chs-sp{flex:1 1 auto}
.erf-chs-clock{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.2em;color:var(--faint);
  margin-right:18px;white-space:nowrap}
/* When the clock is the LAST thing on the bar (the channel rail came off,
   Erf 2026-08-08), the 18px that used to separate it from the rail pushed it
   off the 4vw gutter, and letter-spacing leaves a trailing .2em after the
   final glyph. Both compensated, so the digits end ON the gutter like the
   hamburger above them. */
.erf-chs-clock:last-child{margin-right:-0.2em}
.erf-chs-rail{display:flex;gap:18px;font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.2em;color:var(--faint)}
.erf-chs-rail a:hover{color:var(--ink)}
.erf-chs-rail .here{color:var(--ink);border-bottom:1px solid rgba(237,237,234,.55);padding-bottom:2px}

/* ── stage area ── */
.erf-chs-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.erf-chs-view{position:absolute;inset:0;display:none}
.erf-chs-view.on{display:block}

.erf-chs-chips{position:absolute;top:14px;left:4vw;z-index:30;display:flex;gap:2px;flex-wrap:wrap}
.erf-chs-chips button{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.19em;color:var(--faint);
  border:1px solid var(--line);padding:7px 12px;background:rgba(0,0,0,.75)}
.erf-chs-chips button:hover{color:var(--ink)}
.erf-chs-chips button.on{color:var(--ink);border-color:rgba(237,237,234,.55)}
.erf-chs-chips button.dim{opacity:.35;border-style:dashed;cursor:default}

.erf-chs-cap{position:absolute;left:4vw;bottom:46px;z-index:30;pointer-events:none;max-width:58%}
.erf-chs-cap .k{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.24em;color:var(--faint);
  display:flex;align-items:center;gap:9px}
.erf-chs-cap .tal{width:6px;height:6px;border-radius:50%;background:var(--phos);
  box-shadow:0 0 9px rgba(56,255,112,.8);animation:erfchs-tal 2.4s infinite}
@keyframes erfchs-tal{0%,100%{opacity:1}50%{opacity:.35}}
.erf-chs-cap h2{font-family:var(--disp);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.6rem);font-weight:500;
  letter-spacing:-.01em;margin:4px 0 0}
.erf-chs-cap .note{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.2em;color:var(--faint);
  margin-top:7px;line-height:1.7;max-width:46ch}
.erf-chs-hud{position:absolute;left:4vw;bottom:12px;z-index:30;font-family:var(--mono);font-size:10px;font-weight:300;
  letter-spacing:.2em;color:var(--faint);pointer-events:none;max-width:76%}

/* ── the turntable ── */
.erf-chs-turn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  cursor:grab;touch-action:pan-y;background:#000;
  user-select:none;-webkit-user-select:none}
.erf-chs-turn.grabbing{cursor:grabbing}
.erf-chs-holder{position:relative;height:var(--figscale,78%);aspect-ratio:var(--figar,1091/1200);z-index:1}
.erf-chs-holder canvas{width:100%;height:100%;display:block}

/* The personal mark sits at the head of the bar, the way a channel logo does.
   It stays out of the picture entirely: the render is the image, not a
   backdrop for a watermark. */
.erf-chs-mark{height:15px;width:auto;margin-right:11px;color:var(--ink);fill:currentColor;opacity:.72;
  flex:0 0 auto;transition:opacity .3s}
.erf-chs-bar:hover .erf-chs-mark{opacity:1}

/* the pose rack */
.erf-chs-rack{position:absolute;right:4vw;top:14px;z-index:30;display:flex;flex-direction:column;gap:2px}
.erf-chs-rack .rlabel{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.24em;color:#4d4d49;
  padding:0 2px 5px;text-align:right}
.erf-chs-rack button{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.19em;color:var(--faint);
  border:1px solid var(--line);padding:8px 12px;background:rgba(0,0,0,.78);
  display:flex;gap:14px;align-items:center;justify-content:space-between;min-width:132px}
.erf-chs-rack button:hover{color:var(--ink)}
.erf-chs-rack button i{font-style:normal;width:5px;height:5px;border-radius:50%;background:#232320;flex:0 0 auto}
.erf-chs-rack button.lit{color:var(--ink);border-color:rgba(237,237,234,.4)}
.erf-chs-rack button.lit i{background:var(--phos);box-shadow:0 0 7px rgba(56,255,112,.8)}
.erf-chs-rack button.pend{opacity:.4;border-style:dashed}

.erf-chs-counter{position:absolute;right:4vw;bottom:46px;z-index:30;text-align:right;
  font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.2em;color:var(--faint);line-height:1.9}
.erf-chs-counter b{color:var(--ink);font-weight:400}
.erf-chs-scrub{position:absolute;right:4vw;bottom:86px;z-index:30;width:min(220px,32vw);height:3px;
  background:rgba(237,237,234,.18)}
.erf-chs-scrub i{position:absolute;top:0;bottom:0;width:9px;background:var(--phos);
  box-shadow:0 0 8px rgba(56,255,112,.5)}
.erf-chs-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:31;
  font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.24em;color:var(--faint)}
.erf-chs-load.done{display:none}

/* ── EPISODES ── */
.erf-chs-eps{position:absolute;inset:0;overflow-y:auto;padding:64px 4vw 40px;background:#000}
.erf-chs-epgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.erf-chs-ep{position:relative;border:1px solid var(--line);background:#050505;overflow:hidden;display:block}
.erf-chs-ep img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:brightness(.84);transition:filter .25s}
.erf-chs-ep:hover img{filter:none}
.erf-chs-ep .num{position:absolute;right:10px;top:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;color:var(--faint)}
.erf-chs-ep .lb{position:absolute;left:10px;bottom:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;color:rgba(255,255,255,.9);text-shadow:0 1px 4px #000}
.erf-chs-ep.pending{pointer-events:none}
.erf-chs-ep.pending .ph{width:100%;aspect-ratio:4/5;background:#070707;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:#33332f}

/* ── PROCESS: an editorial scroll. Each chapter is sized to its own
   material: wide things run wide, vertical paintings stand in a row,
   films play in place. One column, oldest first. ── */
/* Everything sits inside the same 4vw gutter the header and footer use, so the
   page has one left edge and one right edge: headers, pictures, films and notes
   all line up against it. */
.erf-chs-proc{position:absolute;inset:0;overflow-y:auto;padding:76px 4vw 90px}
.erf-chs-pchap{margin:0 0 92px}
.erf-chs-pchap:last-child{margin-bottom:0}
.phead{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);
  padding-bottom:12px;margin:0 0 20px}
.phead h3 a{color:inherit}
.phead h3 a:hover{opacity:.7}
.phead .pnum{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.24em;color:var(--faint)}
.phead h3{font-family:var(--disp);font-weight:500;font-size:20px;letter-spacing:-.01em;margin:0;color:var(--ink)}
.phead .pmeta{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:300;
  letter-spacing:.24em;color:var(--faint);white-space:nowrap;display:flex;align-items:baseline;gap:12px}
.phead .pdate{font-weight:400;font-size:11px;letter-spacing:.2em;color:var(--ink);
  border-left:1px solid var(--line);padding-left:12px}
.pmedia{position:relative}
/* a wide frame is a full band; bands stack */
.pband{margin-bottom:8px}
.pband:last-child{margin-bottom:0}
.pband img{width:100%;height:auto;display:block}
/* vertical frames stand together in one row. The row's aspect ratio is the sum
   of the frames' real proportions, so equal heights come out exactly and
   nothing is cropped; past 80vh the whole row scales down and centres. */
/* Equal columns, an 8px gap and a 9:16 tile: the same geometry as the vertical
   video widget on the case studies. Pictures are CONTAINED rather than cropped,
   because these are artworks of different shapes and none of them should lose
   an edge to a grid. */
.prow{display:grid;grid-template-columns:repeat(var(--pcols,3),1fr);gap:8px;
  width:100%;margin-top:8px}
.prow:first-child{margin-top:0}
.prow > *{position:relative;aspect-ratio:var(--ptile,9/16);background:#050505;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.prow img{width:100%;height:100%;object-fit:contain;display:block}
.prow .erf-chs-vfacade{width:100%;height:100%;padding:0}
.prow .erf-chs-vfacade img{object-fit:contain}
.prow .erf-chs-player{width:100%;height:100%}
.prow .erf-chs-player video{width:100%;height:100%;object-fit:contain;max-height:none}

/* A film taller than it is wide gets one column of the three-up rhythm rather
   than the full width, so a vertical clip cannot swallow the page. */
.pvideo{display:block;background:transparent}
.pvideo.pupright{width:calc((100% - 16px) / 3);margin-left:auto;margin-right:auto}
@media(max-width:900px){.pvideo.pupright{width:calc((100% - 8px) / 2)}}
.pvideo.pafter{margin-top:8px}

.pvideo .erf-chs-vfacade,.pvideo .erf-chs-play{width:100%;max-width:none}
.pvideo .erf-chs-vfacade img,.pvideo .erf-chs-play img{width:100%;max-height:none;height:auto}
.pvideo .erf-chs-player{width:100%}
.pvideo .erf-chs-player video{width:100%;max-height:none;height:auto}

/* a release is two reels standing together */
.pvidpair{display:flex;gap:2px;justify-content:center}
.pvidpair .erf-chs-vfacade{width:auto;max-width:calc(50% - 1px);background:transparent}
.pvidpair .erf-chs-vfacade img{max-height:74vh;width:auto;max-width:100%}
.pvidpair .erf-chs-player{max-width:calc(50% - 1px)}
.pvidpair .erf-chs-player video{max-height:74vh}
.pembed{position:relative;aspect-ratio:16/9;background:#050505}
.pembed .erf-chs-play,.pembed .erf-chs-frame{position:absolute;inset:0;width:100%;height:100%}
.pnote{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.2em;
  color:var(--faint);line-height:1.9;max-width:66ch;margin:14px 0 0;text-transform:uppercase}
.pcreds{margin:0;border-top:1px solid var(--line);padding-top:20px}
.pcreds h4{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.24em;
  color:var(--faint);margin:0 0 16px;text-transform:uppercase}
.pcreds .crows{display:flex;flex-direction:column;gap:12px}
.pcreds .crow{display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.pcreds .crole{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.24em;color:var(--faint)}
.pcreds .cname{font-family:var(--disp);font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.pcreds a.cname{border-bottom:1px solid var(--line)}
.pcreds a.cname:hover{border-bottom-color:rgba(237,237,234,.55)}

.pfilm-pending{aspect-ratio:16/9;border:1px dashed rgba(237,237,234,.22);display:flex;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:300;
  letter-spacing:.24em;color:var(--faint);text-align:center;padding:0 6vw}

/* facades: the poster and a play mark, nothing else */
.erf-chs-play,.erf-chs-vfacade{position:relative;display:block;width:100%;padding:0;border:0;
  background:#050505;cursor:pointer;overflow:hidden}
.erf-chs-play img,.erf-chs-vfacade img{width:100%;height:auto;display:block;
  filter:brightness(.72);transition:filter .3s}
.erf-chs-play:hover img,.erf-chs-vfacade:hover img{filter:brightness(.88)}
.erf-chs-play .noposter,.erf-chs-vfacade .noposter{display:block;aspect-ratio:16/9;background:#070707}
.erf-chs-play .tri,.erf-chs-vfacade .tri{position:absolute;left:50%;top:50%;width:0;height:0;
  transform:translate(-46%,-50%);border-left:19px solid var(--ink);
  border-top:12px solid transparent;border-bottom:12px solid transparent;transition:border-left-color .25s}
.erf-chs-play:hover .tri,.erf-chs-vfacade:hover .tri{border-left-color:#fff}
.erf-chs-play .lbl,.erf-chs-vfacade .lbl{position:absolute;left:50%;top:calc(50% + 30px);
  transform:translateX(-50%);font-family:var(--mono);font-size:10px;font-weight:300;
  letter-spacing:.24em;color:var(--faint)}
.erf-chs-frame{width:100%;height:100%;border:0;display:block;background:#000}

/* the date plate, inside the frame at bottom right, exactly as the case
   studies label their video tiles */
.vlabel{position:absolute;right:.75rem;bottom:.75rem;z-index:3;background:#000;
  padding:.5em .85em;font-family:var(--mono);font-size:10px;font-weight:300;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);pointer-events:none}
/* and the corner mark that throws it full screen */
.vfull{position:absolute;left:.75rem;bottom:.75rem;z-index:4;background:rgba(0,0,0,.72);
  padding:.35em .6em;font-size:12px;line-height:1;color:var(--faint);cursor:pointer;
  transition:color .2s,background .2s}
.vfull:hover{color:var(--ink);background:#000}

/* spotlight */
.erf-chs-spot{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.96);
  display:flex;align-items:center;justify-content:center;padding:5vh 4vw}
.erf-chs-spot .spotbody{max-width:100%;max-height:90vh;display:flex;align-items:center;justify-content:center}
/* fill the spotlight rather than sitting at the browser's default video size */
.erf-chs-spot video{height:90vh;width:auto;max-width:92vw;display:block;background:#000}
.erf-chs-spot iframe{display:block;background:#000;border:0}
.erf-chs-spot iframe{width:min(92vw,1600px);aspect-ratio:16/9;height:auto}
.erf-chs-spot .spotclose{position:absolute;top:18px;right:4vw;font-family:var(--mono);
  font-size:10px;font-weight:300;letter-spacing:.24em;color:var(--faint);
  border:1px solid var(--line);padding:8px 14px;background:rgba(0,0,0,.7)}
.erf-chs-spot .spotclose:hover{color:var(--ink);border-color:rgba(237,237,234,.5)}

/* the player: the picture, a hairline, a timecode. Chrome stays out of it. */
.erf-chs-player{position:relative;background:#000;cursor:pointer}
.erf-chs-player video{display:block;max-width:100%;max-height:78vh;width:auto;height:auto}
.erf-chs-player .vrail{position:absolute;left:0;right:0;bottom:0;height:16px;cursor:pointer}
.erf-chs-player .vrail::before{content:"";position:absolute;left:0;right:0;bottom:7px;height:2px;
  background:rgba(237,237,234,.18)}
.erf-chs-player .vrail i{position:absolute;left:0;bottom:7px;height:2px;width:0;background:var(--ink)}
.erf-chs-player .vtime{position:absolute;right:12px;bottom:14px;font-family:var(--mono);
  font-size:10px;font-weight:300;letter-spacing:.2em;color:rgba(237,237,234,.78);
  text-shadow:0 1px 4px #000;pointer-events:none}
.erf-chs-player .vstate{position:absolute;left:50%;top:50%;transform:translate(-46%,-50%);
  width:0;height:0;border-left:19px solid rgba(237,237,234,.92);border-top:12px solid transparent;
  border-bottom:12px solid transparent;opacity:0;pointer-events:none;transition:opacity .2s;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.7))}
.erf-chs-player.paused .vstate{opacity:1}

.erf-chs-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--faint);text-align:center;padding:0 6vw}

@media(max-width:900px){
  .erf-chs-epgrid{grid-template-columns:repeat(2,1fr)}
  .erf-chs-clock{display:none}
  .erf-chs-holder{height:var(--figscale-m,64%)}
  .erf-chs-ident{height:44%}
  /* the rack stays positioned: static would drop it behind the stage */
  .erf-chs-rack{top:56px;left:4vw;right:4vw;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none}
  .erf-chs-rack::-webkit-scrollbar{display:none}
  .erf-chs-rack .rlabel{display:none}
  .erf-chs-rack button{min-width:0;padding:7px 10px;gap:8px}
  .erf-chs-counter{bottom:40px}.erf-chs-scrub{bottom:76px}
  .erf-chs-cap{max-width:74%}
  .prow{max-height:70vh}
  .phead h3{font-size:17px}
  .erf-chs-pchap{margin-bottom:64px}
}
/* ── a video step: poster plus play, embedded only once asked ── */
.erf-chs-play{position:relative;display:block;width:100%;height:100%;padding:0;border:0;
  background:#050505;cursor:pointer;overflow:hidden}
.erf-chs-play img{width:100%;height:100%;object-fit:contain;filter:brightness(.72);transition:filter .3s}
.erf-chs-play:hover img{filter:brightness(.86)}
.erf-chs-play .noposter{position:absolute;inset:0;background:#070707}
.erf-chs-play .tri{position:absolute;left:50%;top:50%;width:0;height:0;
  transform:translate(-46%,-50%);border-left:19px solid var(--ink);
  border-top:12px solid transparent;border-bottom:12px solid transparent;transition:border-left-color .25s}
.erf-chs-play:hover .tri{border-left-color:#fff}
.erf-chs-play .lbl{position:absolute;left:50%;top:calc(50% + 30px);transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--faint)}
.erf-chs-frame{width:100%;height:100%;border:0;display:block;background:#000;object-fit:contain}


@media(prefers-reduced-motion:reduce){
  .erf-chs-cap .tal{animation:none}
}