/* ── 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 FLIGHT — CH.02 dual-view archive.
   FLIGHT: the unveil-derived camera move over 4:5 plates.
   BOARD: the trivision grid; filters rotate the slats.

   Phosphor is the single accent: the active filter, the live
   tick, the tally dot, the front plate's edge. Chrome stays
   bone / faint / hairline, zero radius.
   ============================================================ */

.erf-chf{
  --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;                       /* the global fixed header's height */
  background:#000; color:var(--ink); font-family:var(--disp);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--hdr);
}
.erf-chf *{box-sizing:border-box}
.erf-chf a{color:inherit;text-decoration:none}
.erf-chf button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.erf-chf ::selection{background:var(--phos);color:#000}
.erf-chf button:focus-visible,.erf-chf a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.erf-chf img{display:block;max-width:100%}

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

/* ── bar ── */
.erf-chf-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-chf-bar::-webkit-scrollbar{display:none}
.erf-chf-bar>*{flex:0 0 auto}
.erf-chf-brand{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.24em;color:var(--faint);margin-right:12px;white-space:nowrap}
.erf-chf-brand i{font-style:normal;color:var(--faint)}
.erf-chf-views{display:flex;gap:2px}
.erf-chf-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-chf-views button:hover{color:var(--ink)}
.erf-chf-views button.on{color:var(--ink);border-color:rgba(237,237,234,.55)}
.erf-chf-sp{flex:1 1 auto}
.erf-chf-clock{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.2em;color:var(--faint);margin-right:18px;white-space:nowrap}
/* last on the bar (rail removed): kill the rail gap and the trailing letter-space
   so the digits end on the 4vw gutter (Erf 2026-08-08) */
.erf-chf-clock:last-child{margin-right:-0.2em}
.erf-chf-clock i{font-style:normal;color:var(--faint)}
.erf-chf-rail{display:flex;gap:18px;font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.2em;color:var(--faint)}
.erf-chf-rail a:hover{color:var(--ink)}
.erf-chf-rail .here{color:var(--ink);border-bottom:1px solid rgba(237,237,234,.55);padding-bottom:2px}

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

/* filters float over both views */
.erf-chf-chips{position:absolute;top:14px;left:4vw;z-index:30;display:flex;gap:2px;flex-wrap:wrap}
.erf-chf-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-chf-chips button:hover{color:var(--ink)}
.erf-chf-chips button.on{color:var(--ink);border-color:rgba(237,237,234,.55)}
.erf-chf-chips button.dim:not(.on){opacity:.4;border-style:dashed}

.erf-chf-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:80%}
.erf-chf-hud .ph{color:var(--ink)}

.erf-chf-emptystate{position:absolute;inset:0;z-index:25;display:none;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--faint);pointer-events:none}
.erf-chf-emptystate.on{display:flex}

/* ── FLIGHT ── */
.erf-chf-space{position:absolute;inset:0;overflow:hidden;perspective:1100px;perspective-origin:50% 30%;
  background:radial-gradient(70% 60% at 60% 32%,#0e0e0e,#000 80%);cursor:grab;touch-action:pan-y}
.erf-chf-space.grabbing{cursor:grabbing}
.erf-chf-flight{position:absolute;inset:0;transform-style:preserve-3d}
.erf-chf-pane{position:absolute;left:46%;top:40%;width:min(30vw,340px);aspect-ratio:4/5;
  transform-style:preserve-3d;cursor:pointer;will-change:transform,opacity;background:#000;
  border:1px solid rgba(237,237,234,.22);backface-visibility:hidden}
.erf-chf-pane img,.erf-chf-pane video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.erf-chf-pane video{opacity:0;transition:opacity .5s}
.erf-chf-pane.playing video{opacity:1}
/* Less glass, more paper. The specular sweep across each plate was doing most
   of the work of making these read as panes of glass; a trace of it stays so a
   plate still catches the light as it passes, but it no longer announces a
   material. The cast shadow underneath goes entirely: these are flat prints
   held in space, not objects sitting on a surface. */
.erf-chf-pane::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.04),transparent 28%,transparent 80%,rgba(255,255,255,.018))}
.erf-chf-pane.noart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.erf-chf-pane.noart .na-s{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--faint)}
.erf-chf-pane.noart .na-t{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--faint);
  text-align:center;padding:0 14px}

.erf-chf-cap{position:absolute;left:4vw;bottom:48px;z-index:26;pointer-events:none;max-width:70%}
.erf-chf-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-chf-cap .tal{width:6px;height:6px;border-radius:50%;background:var(--phos);
  box-shadow:0 0 9px rgba(56,255,112,.8);animation:erfchf-tal 2.4s infinite}
@keyframes erfchf-tal{0%,100%{opacity:1}50%{opacity:.35}}
.erf-chf-cap .t2{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.6rem);font-weight:500;
  letter-spacing:-.01em;margin:6px 0 0;color:var(--ink);pointer-events:auto}
.erf-chf-cap .t2:hover{opacity:.75}
.erf-chf-cap .cr{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--faint);
  margin-top:6px;pointer-events:auto;display:inline-block}
.erf-chf-cap .cr a{border-bottom:1px solid var(--line)}
.erf-chf-cap .cr a:hover{color:var(--ink)}
.erf-chf-cap .cr:empty{display:none}

.erf-chf-strip{position:absolute;right:4vw;top:50%;transform:translateY(-50%);z-index:28;
  display:flex;flex-direction:column;gap:7px;align-items:flex-end;
  padding-left:26px}
/* The strip is a scale, not a stray mark: every work is a visible rung, so the
   phosphor one reads as a position among them rather than a floating dash. */
button.erf-chf-tick{position:relative;width:16px;height:3px;background:rgba(237,237,234,.38);cursor:pointer;
  transition:background .2s,width .2s;border:0;padding:0}
button.erf-chf-tick:hover{background:var(--ink);width:26px}
button.erf-chf-tick.on{background:var(--phos);width:38px;height:4px;
  box-shadow:0 0 10px rgba(56,255,112,.45)}
.erf-chf-tick.on::after{content:"";position:absolute;right:100%;top:50%;margin-top:-1px;
  width:14px;height:1px;background:var(--phos);opacity:.5}
.erf-chf-tick .tip{position:absolute;right:34px;top:50%;transform:translateY(-50%);display:none;
  width:86px;border:1px solid var(--line);background:#050505}
.erf-chf-tick .tip img{width:100%;aspect-ratio:4/5;object-fit:cover}
.erf-chf-tick:hover .tip{display:block}

/* ── BOARD ── */
.erf-chf-board{position:absolute;inset:0;overflow-y:auto;padding:64px 4vw 40px;scrollbar-width:thin}
.erf-chf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.erf-chf-cell{position:relative;aspect-ratio:4/5;cursor:pointer;background:#030303;overflow:hidden;
  opacity:1;transition:opacity .4s ease}
/* a filtered-out cell fades, then JS collapses it out of the grid entirely:
   a two-project lane is two tiles, not a page of black rectangles */
.erf-chf-cell.off{pointer-events:none;opacity:0}
/* Two faces, a plain crossfade. The trivision slats (three rotating strips per
   cell) were the one 3D move on a flat site and Erf called the slicing cheesy
   (2026-08-08). The motion now lives in the STAGGER across cells, not inside
   the tile. */
.erf-chf-face{position:absolute;inset:0;overflow:hidden;background:#0a0a0a;
  opacity:1;transition:opacity .45s ease}
.erf-chf-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;
  /* the work carries the colour; the board does not tint it. Erf 2026-08-01. */
  filter:none}
.erf-chf-face.bq{opacity:0}
.erf-chf-cell.flip .erf-chf-face.fa{opacity:0}
.erf-chf-cell.flip .erf-chf-face.bq{opacity:1}
.erf-chf-cell .lb{position:absolute;left:10px;bottom:8px;z-index:5;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;color:rgba(255,255,255,.9);text-shadow:0 1px 4px #000;opacity:0;transition:opacity .25s;
  pointer-events:none}
.erf-chf-cell:hover .lb,.erf-chf-cell.showlb .lb{opacity:1}

/* ── small screens ── */
@media(max-width:820px){
  .erf-chf-grid{grid-template-columns:repeat(2,1fr)}
  .erf-chf-pane{width:min(62vw,340px)}
  .erf-chf-clock{display:none}
  .erf-chf-cap h2{font-size:1.4rem}
  .erf-chf-strip{display:none}
  .erf-chf-board{padding-top:96px}
}
@media(prefers-reduced-motion:reduce){
  .erf-chf-face{transition:none}
  .erf-chf-cap .tal{animation:none}
}