/* ============================================================================
   THE CREATORS CLUB — PRODUCTIONS (v2)
   "Late-night transmission from Taiwan."
   Fullscreen CRT trailer · fullscreen video reel · CLI accents · scroll-driven.
   ============================================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --red:      #ff2e2e;
  --red-hot:  #ff5a3c;
  --red-deep: #8c0d0d;
  --gold:     #ffb000;
  --cream:    #ecdcc0;
  --bg:       #070403;   /* warm near-black */
  --ink:      #0d0907;
  --line:     rgba(255, 70, 50, 0.18);
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --disp: 'Bricolage Grotesque', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cline x1='11' y1='1' x2='11' y2='8' stroke='%23ff2e2e' stroke-width='1'/%3E%3Cline x1='11' y1='14' x2='11' y2='21' stroke='%23ff2e2e' stroke-width='1'/%3E%3Cline x1='1' y1='11' x2='8' y2='11' stroke='%23ff2e2e' stroke-width='1'/%3E%3Cline x1='14' y1='11' x2='21' y2='11' stroke='%23ff2e2e' stroke-width='1'/%3E%3Ccircle cx='11' cy='11' r='2.5' fill='none' stroke='%23ff2e2e' stroke-width='1'/%3E%3C/svg%3E") 11 11, crosshair;
}

a { color: inherit; text-decoration: none; cursor: pointer; }
::selection { background: var(--red); color: var(--bg); }

.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 1000;
  background: var(--red-deep); color: var(--cream); padding: 8px 14px;
  font-family: var(--mono); transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* Film grain over everything */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  background: url('../assets/img/grain.png') repeat;
  opacity: 0.06; mix-blend-mode: overlay; pointer-events: none; z-index: 900;
  animation: grain 0.4s steps(3) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 33% { transform: translate(-2%,-3%); }
  66% { transform: translate(3%,1%); } 100% { transform: translate(-1%,2%); }
}

/* Scroll-progress hairline at the very top */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--red-deep), var(--red), var(--gold));
  box-shadow: 0 0 10px rgba(255,46,46,.7); z-index: 950; pointer-events: none;
  transition: width .08s linear;
}

/* ════════════════ TOP HUD / NAV ════════════════ */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 26px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px;
  mix-blend-mode: difference;            /* legible over bright/dark video */
  transition: background .4s var(--ease), padding .4s var(--ease);
}
.hud.docked {
  mix-blend-mode: normal;
  background: linear-gradient(180deg, rgba(7,4,3,0.94), rgba(7,4,3,0.74));
  border-bottom: 1px solid var(--line);
  padding: 11px 26px; backdrop-filter: blur(7px);
}
.hud-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.hud-mark { width: 34px; height: 16px; color: var(--red); display: block; flex: none;
  filter: drop-shadow(0 0 6px rgba(255,46,46,.55)); }
.hud-mark use, .hud-mark path { fill: currentColor; }
.hud-name { color: #fff; letter-spacing: 3px; font-weight: 500; }
.hud.docked .hud-name { color: var(--cream); }

.hud-nav { display: flex; gap: 22px; color: #fff; }
.hud-nav a { position: relative; color: inherit; opacity: .85; transition: opacity .2s; }
.hud.docked .hud-nav a { color: var(--cream); }
.hud-nav a .slash { color: var(--red); }
.hud-nav a:hover { opacity: 1; }
.hud-nav a.active { color: var(--gold); opacity: 1; }
.hud-nav a.active .slash { color: var(--gold); }

.hud-meta { display: flex; align-items: center; gap: 16px; color: #fff; }
.hud.docked .hud-meta { color: var(--cream); }
.hud-reel { color: var(--cream); opacity: 0; transform: translateY(-2px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  letter-spacing: 1.5px; font-variant-numeric: tabular-nums; }
.hud-reel b { color: var(--gold); font-weight: 700; }
.hud-reel.show { opacity: .9; transform: none; }
.rec { display: flex; align-items: center; gap: 7px; color: var(--red); font-weight: 700; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 8px var(--red); animation: rec 1.4s ease-in-out infinite; }
@keyframes rec { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.tc { color: var(--cream); opacity: .8; font-variant-numeric: tabular-nums; }

/* ════════════════ HERO — FULLSCREEN CRT ════════════════ */
.hero {
  position: relative; height: 100svh; width: 100%;
  background: #000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* The screen itself — curved glass that crops the video at its rounded edges.
   JS rewrites `transform` on scroll for the CRT power-off collapse. */
.crt {
  position: absolute; inset: 0;
  border-radius: 26px;
  overflow: hidden;
  transform: scale(1.015);
  transform-origin: center center;
  will-change: transform, filter;
  box-shadow:
    inset 0 0 120px 30px rgba(0,0,0,0.85),
    inset 0 0 400px rgba(140,13,13,0.18);
}
/* the bright collapsing line of a CRT switching off */
.crt-off-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; z-index: 12;
  transform: translateY(-50%) scaleX(.2); transform-origin: center;
  background: linear-gradient(90deg, transparent, #fff 12%, #fff 88%, transparent);
  box-shadow: 0 0 24px 6px rgba(255,255,255,.85), 0 0 60px 12px rgba(255,90,60,.6);
  opacity: 0; pointer-events: none;
}
.crt-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
}

.crt-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply; opacity: .55;
}
.crt-bloom {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at center, rgba(255,90,60,0.10), transparent 60%);
  mix-blend-mode: screen;
}
.crt-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    radial-gradient(ellipse 120% 120% at center, transparent 52%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.92) 100%);
}
.crt-glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(125deg, rgba(255,255,255,0.07) 0%, transparent 22%, transparent 80%, rgba(255,255,255,0.04) 100%);
  mix-blend-mode: screen;
}
.crt-flicker {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: rgba(255,90,60,0.03);
  animation: flicker 5s steps(60) infinite;
}
@keyframes flicker {
  0%,100% { opacity: .3; } 3% { opacity: .55; } 6% { opacity: .25; }
  47% { opacity: .4; } 50% { opacity: .7; } 53% { opacity: .35; } 80% { opacity: .45; }
}
.crt-track {
  position: absolute; left: 0; right: 0; height: 22%; top: -22%; z-index: 6;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.04), rgba(255,90,60,0.05), transparent);
  animation: track 9s linear infinite;
}
@keyframes track { 0% { top: -22%; } 100% { top: 100%; } }

/* ── Broadcast overlay text ── */
.hero-overlay {
  position: relative; z-index: 10;
  width: 100%; max-width: 1300px; padding: 0 7vw;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  pointer-events: none;
  will-change: transform, opacity;       /* parallax target */
}
.hero-overlay > * { pointer-events: auto; }

.hero-tag {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  color: var(--cream); text-shadow: 0 0 12px rgba(0,0,0,.8);
  padding: 6px 12px; border: 1px solid var(--line);
  background: rgba(7,4,3,0.35); backdrop-filter: blur(3px);
  opacity: 0; animation: rise .8s var(--ease) .2s forwards;
}
.hero-tag .blink { color: var(--red); animation: rec 1.1s steps(1) infinite; }

/* Big glowing CC mark — the logo, front and centre */
.hero-mark {
  width: clamp(150px, 30vw, 440px); height: auto; aspect-ratio: 654.89 / 305.2;
  color: var(--red); display: block;
  filter: drop-shadow(0 0 26px rgba(255,46,46,.55)) drop-shadow(0 0 60px rgba(255,46,46,.25));
  opacity: 0; animation: rise 1s var(--ease) .3s forwards, markpulse 6s ease-in-out 1.4s infinite;
}
.hero-mark use, .hero-mark path { fill: currentColor; }
@keyframes markpulse {
  0%,100% { filter: drop-shadow(0 0 26px rgba(255,46,46,.55)) drop-shadow(0 0 60px rgba(255,46,46,.22)); }
  50%     { filter: drop-shadow(0 0 34px rgba(255,90,60,.75)) drop-shadow(0 0 90px rgba(255,46,46,.32)); }
}

.hero-wordmark {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(38px, 8vw, 120px);
  line-height: 0.86; letter-spacing: -0.02em; color: var(--cream);
  text-shadow: 0 0 40px rgba(0,0,0,.7), 0 6px 30px rgba(0,0,0,.6);
}
.hero-wordmark .line { display: block; }
.hero-wordmark .line:nth-child(1) { opacity: 0; animation: rise .9s var(--ease) .45s forwards; }
.hero-wordmark .line.outline {
  color: transparent; -webkit-text-stroke: 2px var(--red);
  text-shadow: 0 0 30px rgba(255,46,46,0.45);
  opacity: 0; animation: rise .9s var(--ease) .6s forwards;
}

.hero-sub {
  font-family: var(--mono); font-size: clamp(13px, 1.4vw, 16px);
  color: var(--cream); max-width: 40ch; opacity: 0;
  text-shadow: 0 1px 14px rgba(0,0,0,.8);
  animation: rise .9s var(--ease) .75s forwards;
}

.hero-controls {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px;
  opacity: 0; animation: rise .9s var(--ease) .9s forwards;
}
.btn-sound, .btn-work {
  font-family: var(--mono); font-size: 13px; letter-spacing: 1.5px;
  padding: 12px 20px; border: 1px solid var(--red);
  background: rgba(140,13,13,0.12); color: var(--cream);
  transition: background .25s, box-shadow .25s, transform .15s, color .25s;
}
.btn-sound .sw { color: var(--red); }
.btn-sound:hover, .btn-work:hover {
  background: var(--red); color: var(--bg); transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(255,46,46,.5);
}
.btn-sound:hover .sw { color: var(--bg); }
.btn-work { background: var(--cream); color: var(--bg); border-color: var(--cream); font-weight: 700; }
.btn-work .arr { color: var(--red); }
.btn-work:hover { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 26px rgba(255,176,0,.5); }
.btn-work:hover .arr { color: var(--bg); }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 3px; color: var(--cream); opacity: .7;
}
.scroll-cue:hover { opacity: 1; }
.cue-line { width: 1px; height: 34px; background: linear-gradient(var(--red), transparent); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0%,100% { transform: scaleY(.5); opacity: .5; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; } }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

/* ════════════════ TICKER ════════════════ */
.ticker {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--ink); overflow: hidden; white-space: nowrap; padding: 13px 0;
  position: relative; z-index: 5;
}
.ticker-track {
  display: inline-flex; align-items: center; gap: 28px;
  font-family: var(--disp); font-weight: 700; font-size: 22px; letter-spacing: 1px;
  color: var(--cream); animation: ticker 26s linear infinite; will-change: transform;
}
.ticker-track span { opacity: .85; }
.tick-dot { color: var(--red); font-size: 12px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ════════════════ CLI SECTION HEADS ════════════════ */
.cli-head {
  font-family: var(--mono); font-size: clamp(13px, 1.6vw, 18px);
  letter-spacing: .5px; color: var(--cream);
  padding: 0 6vw; max-width: 1500px; margin: 0 auto;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.cli-head[data-revealed], .about-pin .cli-head { opacity: 1; transform: none; }
.cli-head .prompt { color: var(--red); }
.cli-head .colon  { color: var(--cream); opacity: .6; }
.cli-head .path   { color: var(--gold); }
.cli-head .dollar { color: var(--cream); opacity: .6; margin: 0 8px 0 2px; }
.cli-head .cmd    { color: var(--cream); }
.cli-head .caret  { color: var(--gold); animation: rec 1s steps(1) infinite; margin-left: 2px; }
.cli-head.center { display: flex; justify-content: center; }

/* ════════════════ WORK — CATEGORY-FILTERED CLI FEED ════════════════ */
.work { position: relative; }
.work-inner {
  display: flex; flex-direction: column; min-height: 100svh;
  padding-top: 52px;                                /* clear the HUD */
}

/* terminal header bar above the grid */
.work-term {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px clamp(16px, 4vw, 40px);
  font-family: var(--mono); font-size: clamp(12px, 1.4vw, 16px);
  border-bottom: 1px solid var(--line); background: var(--ink);
}
.work-term .prompt { color: var(--red); }
.work-term .colon { opacity: .6; }
.work-term .path { color: var(--gold); }
.work-term .dollar { opacity: .6; margin: 0 8px 0 2px; }
.work-term .cmd { color: var(--cream); }
.work-term .caret { color: var(--gold); animation: rec 1s steps(1) infinite; }
.wt-meta { color: var(--cream); opacity: .6; letter-spacing: 1px; white-space: nowrap; }
.wt-meta #workCount { color: var(--gold); opacity: 1; }
.wt-cat { color: var(--gold); opacity: 1; }
#workCount { color: var(--gold); opacity: 1; }

/* category switcher — modelled on the original portfolio filter */
.cat-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line); background: var(--ink);
}
.cat-tab {
  font-family: var(--mono); font-size: clamp(10px, 1.05vw, 13px); letter-spacing: 1.5px;
  color: rgba(236,220,192,.5); background: none; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(255,46,46,.22); padding: 7px 14px;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s, text-shadow .2s;
}
.cat-tab:hover { color: var(--cream); background: rgba(255,46,46,.06); border-color: rgba(255,46,46,.42); }
.cat-tab.active {
  color: var(--cream); border-color: var(--red); background: rgba(255,46,46,.1);
  text-shadow: 0 0 8px rgba(255,46,46,.5); box-shadow: 0 0 12px rgba(255,46,46,.25);
}
.cat-tab.disabled { color: rgba(255,46,46,.3); border-color: rgba(255,46,46,.1); cursor: default; font-style: italic; }
.cat-tab.disabled:hover { color: rgba(255,46,46,.3); background: none; border-color: rgba(255,46,46,.1); }

.work-sentinel { width: 100%; height: 1px; }

/* scroll prompt — shown while there's more reel to load */
.work-cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 8; display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--cream); padding: 8px 16px;
  background: rgba(7,4,3,.7); border: 1px solid var(--line); backdrop-filter: blur(4px);
  box-shadow: 0 0 24px rgba(0,0,0,.5);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.work-cue .wc-txt { opacity: .85; }
.work-cue .wc-arr { color: var(--red); animation: cuebob 1.5s var(--ease) infinite; }
@keyframes cuebob { 0%,100% { transform: translateY(-2px); opacity: .6; } 50% { transform: translateY(3px); opacity: 1; } }
.work-cue.hide { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; }

/* the wall — 3 across, grows downward as more loads in */
.work-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(280px, 46vh, 520px);
  background: var(--bg);
}

.tile {
  position: relative; overflow: hidden; background: #000;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  cursor: pointer;
}

/* the clip stays hidden behind a left→right wipe until the tile "renders" */
.tile-vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.5) contrast(1.06) saturate(.85) brightness(.66);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s var(--ease), filter .5s var(--ease), transform .8s var(--ease);
}
.tile.rendered .tile-vid { clip-path: inset(0 0 0 0); }
.tile.rendered:hover .tile-vid { filter: grayscale(0) contrast(1.08) saturate(1.06) brightness(1); transform: scale(1.04); }

.tile-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply; opacity: .45;
}
.tile-grad {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,4,3,.55) 0%, transparent 30%, transparent 48%, rgba(7,4,3,.88) 100%);
}

/* the render-head: a glowing red bar that sweeps left→right as the clip draws */
.tile-sweep {
  position: absolute; top: 0; bottom: 0; left: -12%; width: 9%; z-index: 5;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,90,60,.95) 50%, transparent);
  box-shadow: 0 0 34px 10px rgba(255,46,46,.6);
}
.tile.rendered .tile-sweep { animation: sweep .9s var(--ease) forwards; }
@keyframes sweep { 0% { opacity: 1; left: -12%; } 100% { opacity: 0; left: 104%; } }

/* glowing red ASCII boot log — typed by scroll, accumulates top→bottom */
.tile-term {
  position: absolute; inset: 0; z-index: 6; margin: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  padding: clamp(40px, 6vh, 64px) clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px);
  font-family: var(--mono); font-size: clamp(8px, .8vw, 11px); line-height: 1.55;
  color: #ff4338; text-shadow: 0 0 5px rgba(255,46,46,.85), 0 0 12px rgba(255,46,46,.4);
  background: radial-gradient(ellipse at 28% 0%, rgba(255,46,46,.07), transparent 62%);
  opacity: 0; transition: opacity .3s;
}
.tile.spawning .tile-term { opacity: 1; }
.tile.rendered .tile-term { opacity: 0; }
.tline { white-space: pre; min-height: 1.55em; }
.tline.cursor::after { content: '▌'; margin-left: 1px; animation: rec .8s steps(1) infinite; }

/* CLI targeting corner brackets — snap in as the tile spawns */
.tile-frame { position: absolute; inset: 12px; z-index: 4; pointer-events: none; }
.tile-frame i {
  position: absolute; width: 16px; height: 16px; opacity: 0;
  border: 0 solid var(--red); box-shadow: 0 0 8px rgba(255,46,46,.5);
  transform: scale(.4); transition: opacity .35s, transform .35s, width .3s, height .3s;
}
.tile-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.tile-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.tile-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.tile-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.tile.spawning .tile-frame i { opacity: .6; transform: scale(1); }
.tile.rendered:hover .tile-frame i { opacity: 1; width: 26px; height: 26px; }

.tile-top {
  position: absolute; top: 18px; left: 20px; right: 20px; z-index: 7;
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: clamp(10px, 1vw, 13px); letter-spacing: 1px;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
  opacity: 0; transition: opacity .4s .15s;
}
.tile.rendered .tile-top { opacity: 1; }
.tile-top { align-items: center; }
.tile-no { color: var(--red); font-weight: 700; }
.tile-file { color: var(--cream); opacity: .9; }
.tile-cat {
  font-family: var(--mono); font-size: clamp(9px, .82vw, 11px); letter-spacing: 1.5px;
  color: var(--gold); border: 1px solid var(--line); padding: 3px 9px;
  background: rgba(7,4,3,.5); backdrop-filter: blur(3px);
}

.tile-info {
  position: absolute; left: 20px; right: 20px; bottom: 48px; z-index: 7;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s .2s var(--ease), transform .5s .2s var(--ease);
}
.tile.rendered .tile-info { opacity: 1; transform: none; }
.tile.rendered:hover .tile-info { transform: translateY(-2px); }
.tile-title {
  font-family: var(--disp); font-weight: 700; line-height: 1.02;
  font-size: clamp(17px, 1.8vw, 28px); color: var(--cream);
  text-shadow: 0 4px 24px rgba(0,0,0,.7);
}
.tile-cred {
  font-family: var(--mono); font-size: clamp(10px, .85vw, 12px); letter-spacing: 1px;
  color: var(--cream); opacity: .7; margin-top: 7px; text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.tile-cred .role { color: var(--gold); opacity: 1; }
.tile-open {
  position: absolute; left: 20px; bottom: 18px; z-index: 7;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px;
  color: var(--bg); background: var(--red); padding: 4px 10px;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.tile.rendered:hover .tile-open { opacity: 1; transform: none; }

/* ════════════════ ABOUT — FLOPPY SCROLL-SCRUB ════════════════ */
.about { position: relative; height: 360vh; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), var(--ink) 50%, var(--bg)); }
.about-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 92px 0 40px;
}
.about-pin .cli-head { margin-bottom: clamp(20px, 4vh, 48px); }

.about-stage {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4.5vw, 88px);
  align-items: center; padding: 0 clamp(20px, 5vw, 70px); max-width: 1640px; margin: 0 auto; width: 100%;
}

/* The drive — a hardware chassis with a recessed, framed screen. The disk
   renders edge-to-edge; top/bottom fades hide the (baked-in) cut drive edge so
   it reads as recessed into the bezel rather than floating. */
.floppy { position: relative; padding: clamp(12px, 1.5vw, 22px);
  border-radius: 22px; isolation: isolate;
  background: linear-gradient(158deg, #1d1411 0%, #0c0706 58%, #060403 100%);
  border: 1px solid rgba(255,70,50,.16);
  box-shadow: inset 0 1px 0 rgba(255,150,110,.10), inset 0 0 0 1px rgba(0,0,0,.55),
    0 40px 100px rgba(0,0,0,.62); }
.floppy::before {                          /* pulsing accent frame */
  content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; z-index: 6;
  box-shadow: inset 0 0 0 1px rgba(255,46,46,.18), inset 0 0 36px rgba(255,46,46,.08);
  animation: floppyPulse 4.5s ease-in-out infinite; }
@keyframes floppyPulse { 50% { box-shadow: inset 0 0 0 1px rgba(255,90,60,.36), inset 0 0 60px rgba(255,46,46,.16); } }

.floppy-screen {
  position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 13px;
  background:
    radial-gradient(130% 80% at 50% 6%, rgba(255,90,60,.15), transparent 52%),
    radial-gradient(ellipse at 50% 42%, rgba(140,13,13,.20), #050302 74%);
  box-shadow: inset 0 0 120px rgba(0,0,0,.92), inset 0 0 0 1px rgba(255,70,50,.14);
}
.floppy-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 44%;
  image-rendering: auto; pointer-events: none;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.55));
}
.floppy-scan {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply; opacity: .5;
}
.floppy-glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 22%, rgba(120,255,90,.22), transparent 60%);
  mix-blend-mode: screen; transition: opacity .25s;
}
/* top/bottom recess fades + glass vignette */
.floppy-screen::before {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(180deg, #050302 0%, rgba(5,3,2,.92) 4%, rgba(5,3,2,0) 17%),
    linear-gradient(0deg, #050302 0%, rgba(5,3,2,.55) 5%, transparent 17%),
    radial-gradient(125% 100% at 50% 44%, transparent 60%, rgba(0,0,0,.5));
}
/* corner brackets — framed-instrument flair */
.floppy-screen::after {
  content: ''; position: absolute; inset: 11px; z-index: 5; pointer-events: none; opacity: .55;
  background:
    linear-gradient(var(--gold),var(--gold)) 0 0/15px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 0/2px 15px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 0/15px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 0/2px 15px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 100%/15px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 100%/2px 15px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/15px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/2px 15px no-repeat;
}
.floppy-label {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px;
  color: var(--cream); opacity: .8;
}
.fc-led { width: 9px; height: 9px; border-radius: 50%; background: #3a2; opacity: .35;
  transition: background .2s, box-shadow .2s, opacity .2s; }
.fc-led.read { background: #6f6; opacity: 1; box-shadow: 0 0 10px #6f6, 0 0 20px rgba(110,255,110,.5); }
.fc-txt .ok { color: var(--gold); }

/* one chapter per floppy — only the active disk's chapter is shown */
.about-readout { position: relative; min-height: clamp(240px, 46vh, 380px); }
.about-ch {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.about-ch.active { opacity: 1; transform: none; pointer-events: auto; }
.ach-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.ach-no { font-family: var(--mono); color: var(--red); font-size: 13px; letter-spacing: 2px; }
.ach-name {
  font-family: var(--disp); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(30px, 4.4vw, 60px); line-height: .92; color: var(--cream);
}
.ach-body {
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(17px, 2.1vw, 29px); line-height: 1.3; color: var(--cream);
  max-width: 32ch;
}

.about-cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: var(--cream);
  opacity: .55; transition: opacity .4s; animation: rec 1.8s ease-in-out infinite;
}
.about-cue.hide { opacity: 0; animation: none; }

/* ── About · right-side CLI terminal (mounts each disk) ──────────────── */
.about-cli {
  position: relative; display: flex; flex-direction: column;
  height: clamp(330px, 58vh, 540px);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(13,9,7,.97), rgba(6,3,2,.97));
  box-shadow: inset 0 0 90px rgba(0,0,0,.78), 0 26px 70px rgba(0,0,0,.5);
}
.about-cli::after {            /* faint CRT scanlines over the terminal */
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply; opacity: .45;
}
.acli-chrome {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,46,46,.08), transparent);
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
}
.acli-title { color: var(--red); text-shadow: 0 0 8px rgba(255,46,46,.45); }
.acli-dots { display: flex; gap: 6px; }
.acli-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(236,220,192,.16); }
.acli-dots i:nth-child(1) { background: var(--red); box-shadow: 0 0 7px rgba(255,46,46,.6); }
.acli-dots i:nth-child(2) { background: var(--gold); box-shadow: 0 0 7px rgba(255,176,0,.5); }
/* sector read bar — fills with line progress, sits under the chrome */
.acli-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; font-size: 9px;
  letter-spacing: 2px; color: var(--gold); text-transform: uppercase;
  padding: 8px clamp(14px, 2vw, 26px); border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.acli-bar-track { flex: 1; height: 7px; border: 1px solid rgba(255,176,0,.3);
  border-radius: 2px; overflow: hidden; background: rgba(255,176,0,.05); }
.acli-bar-fill { display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--red) 0 6px, var(--red-hot) 6px 8px);
  box-shadow: 0 0 10px rgba(255,90,60,.6); transition: width .12s linear; }
.acli-bar-pct { min-width: 3.5ch; text-align: right; color: var(--red-hot); }

/* terminal scrollback — output lines print one per scroll-step */
.acli-scroll {
  flex: 1; min-height: 0; overflow: hidden; position: relative; z-index: 2;
  padding: 15px clamp(14px, 2vw, 26px) 18px; font-family: var(--mono);
}
.tline { opacity: 0; transform: translateY(3px); transition: opacity .25s var(--ease), transform .25s var(--ease);
  margin-bottom: 5px; font-family: var(--mono); }
.tline.in { opacity: 1; transform: none; }
.tl-boot { font-size: clamp(10.5px, 1vw, 12.5px); line-height: 1.5;
  color: var(--red-hot); text-shadow: 0 0 6px rgba(255,90,60,.32); }
.tl-banner { margin: 5px 0 7px; white-space: pre; overflow: hidden;
  font-size: clamp(5px, .92vw, 10px); line-height: 1.05; color: var(--gold);
  text-shadow: 0 0 12px rgba(255,176,0,.5), 0 0 2px rgba(255,176,0,.8); }
.tl-meta { font-size: clamp(11px, 1.05vw, 13px); letter-spacing: .5px; margin-bottom: 8px;
  color: var(--cream); text-shadow: 0 0 7px rgba(255,46,46,.25); }
.tl-art { float: right; shape-outside: margin-box; margin: 0 0 8px 18px;
  white-space: pre; font-size: clamp(8px, .9vw, 11px); line-height: 1.12;
  color: var(--red); text-shadow: 0 0 8px rgba(255,46,46,.4); }
.tl-art.in { opacity: .62; }
.tl-body { font-size: clamp(11.5px, 1.08vw, 14px); line-height: 1.55; margin-bottom: 3px;
  color: var(--cream); text-shadow: 0 0 8px rgba(236,220,192,.16);
  padding-left: 12px; border-left: 2px solid rgba(255,46,46,.45); }
.tl-tags { font-size: clamp(10px, 1vw, 12px); letter-spacing: .5px; margin-top: 7px;
  color: var(--gold); text-shadow: 0 0 7px rgba(255,176,0,.35); }
.tl-prompt { font-size: clamp(11px, 1.05vw, 13px); margin-top: 9px; color: var(--cream); }
.acli-pwd { color: var(--gold); }
.cli-caret::after {
  content: '▌'; color: var(--red-hot); margin-left: 1px;
  animation: cliBlink 1s steps(1) infinite;
}
@keyframes cliBlink { 50% { opacity: 0; } }

/* ── Work detail window (video + project info) ──────────────────────── */
.detail-overlay {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(4,2,2,.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.detail-overlay.visible { opacity: 1; pointer-events: auto; }
.detail-window {
  position: relative; width: min(1100px, 92vw); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(255,46,46,.18), 0 30px 90px rgba(0,0,0,.7),
    0 0 60px rgba(255,46,46,.12);
  transform: scale(.92) translateY(8px);
  transition: transform .3s var(--ease);
}
.detail-overlay.visible .detail-window { transform: none; }
.detail-window::after {            /* scanline veneer over chrome (not the iframe) */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.14) 0px, rgba(0,0,0,.14) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply; opacity: .5;
}
.detail-chrome {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,46,46,.08), transparent);
  user-select: none;
}
.detail-title { font-family: var(--mono); font-size: 12px; letter-spacing: 1px;
  color: var(--red); text-shadow: 0 0 8px rgba(255,46,46,.4); }
.detail-close {
  font-family: var(--mono); font-size: 13px; color: var(--cream);
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  transition: color .2s, text-shadow .2s;
}
.detail-close:hover { color: var(--red); text-shadow: 0 0 10px rgba(255,46,46,.6); }
.detail-body {
  flex: 1; min-height: 0; overflow-y: auto; position: relative; z-index: 3;
  background: var(--bg);
  scrollbar-width: thin; scrollbar-color: var(--red-deep) var(--bg);
}
.detail-body::-webkit-scrollbar { width: 7px; }
.detail-body::-webkit-scrollbar-track { background: var(--bg); }
.detail-body::-webkit-scrollbar-thumb { background: var(--red-deep); border-radius: 4px; }
.detail-video {
  position: relative; width: 100%; padding-top: 56.25%; background: #000;
  border-bottom: 2px solid var(--red); box-shadow: 0 2px 20px rgba(255,46,46,.18);
}
.detail-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.detail-info { padding: 22px clamp(18px, 3vw, 30px); }
.detail-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px;
  margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px dashed var(--red-deep);
}
.detail-meta-item { font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.detail-meta-label {
  color: var(--red); letter-spacing: 1.5px; font-size: 9px;
  text-transform: uppercase; margin-bottom: 5px;
}
.detail-meta-value { color: var(--cream); }
.detail-section-header {
  font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: var(--gold);
  margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--red-deep);
}
.detail-description {
  font-family: var(--mono); font-size: 13px; line-height: 1.8;
  color: var(--cream); opacity: .82; margin-bottom: 24px; max-width: 720px;
}
.detail-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.detail-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--gold);
  border: 1px solid var(--red-deep); padding: 4px 11px; border-radius: 3px;
}
.tile { cursor: pointer; }
@media (max-width: 720px) {
  .detail-meta { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════ CONTACT / FOOTER ════════════════ */
.contact {
  padding: 110px 6vw 70px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}
.contact .cli-head { margin-bottom: 6px; }
.contact-mail {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(28px, 6vw, 86px); line-height: .95; letter-spacing: -0.02em;
  color: var(--cream); word-break: break-word;
  transition: color .3s, text-shadow .3s;
  opacity: 0; transform: translateY(24px);
}
.contact-mail[data-revealed] { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.contact-mail:hover { color: var(--red); text-shadow: 0 0 40px rgba(255,46,46,.4); }
.contact-cli { font-family: var(--mono); font-size: 14px; color: var(--cream); opacity: .8; }
.contact-cli .prompt { color: var(--red); }
.contact-cli .caret { color: var(--gold); animation: rec 1s steps(1) infinite; }
.contact-foot {
  margin-top: 40px; width: 100%; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--cream); opacity: .5; letter-spacing: 1px;
}
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-mark { width: 26px; height: 12px; color: var(--red); display: inline-block; }
.foot-mark use, .foot-mark path { fill: currentColor; }
.privacy-link { color: var(--gold); opacity: .9; }
.privacy-link:hover { text-shadow: 0 0 10px rgba(255,176,0,.4); }

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 860px) {
  .hud-nav { display: none; }
  .hud-reel { display: none; }
  /* grid: 2-col wall of taller tiles */
  .work-inner { padding-top: 64px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 38vh; }
  .about { height: auto; }
  .about-pin { position: static; height: auto; padding: 90px 0 40px; }
  .about-stage { grid-template-columns: 1fr; gap: 30px; }
  .floppy-screen { aspect-ratio: 5 / 4; max-width: 460px; margin: 0 auto; }
  .about-cli { height: clamp(360px, 64vh, 460px); max-width: 560px; margin: 0 auto; width: 100%; }
  .about-cue { display: none; }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; grid-auto-rows: 46vh; }
  .work-term { font-size: 12px; }
}

/* ════════════════ REDUCED MOTION ════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .crt-flicker, .crt-track, .ticker-track, .rec-dot, .cue-line, .blink, .caret,
  .hero-mark, .about-cue, .scroll-prog { animation: none !important; }
  .tile-vid, .tile-top, .tile-info, .cli-head,
  .hero-tag, .hero-wordmark .line, .hero-sub, .hero-controls, .contact-mail, .hero-mark {
    opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important;
  }
  .tile-term, .tile-sweep, .work-cue { display: none !important; }
  /* unpin the about scrub — JS renders the Mission disk + content statically */
  .about { height: auto !important; }
  .about-pin { position: static !important; height: auto !important; }
}

/* ============================================================================
   v3 ADDITIONS — boot sequence + ASCII hero logo
   ============================================================================ */

/* Hero intro animations hold until the boot screen hands off (body.booted).
   animation-play-state also freezes the delay clock, so the rise sequence
   plays in full the moment the boot lifts. */
body:not(.booted) .hero-tag,
body:not(.booted) .hero-wordmark .line,
body:not(.booted) .hero-sub,
body:not(.booted) .hero-controls { animation-play-state: paused; }

/* ── Boot screen ─────────────────────────────────────────────────────── */
.boot-screen {
  position: fixed; inset: 0; z-index: 2000;
  background: #050302;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .9s ease;
}
.boot-screen.dismissed { opacity: 0; pointer-events: none; }

.boot-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.32) 0px, rgba(0,0,0,.32) 1px, transparent 1px, transparent 3px);
}
.boot-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse 130% 130% at center,
    transparent 50%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.95) 100%);
}
.boot-flash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: #fff; opacity: 0;
}
.boot-flash.on { animation: bootFlash .38s ease-out forwards; }
@keyframes bootFlash { 0% { opacity: 0; } 18% { opacity: .85; } 100% { opacity: 0; } }

.boot-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  width: min(92vw, 780px);
}
.boot-log {
  align-self: flex-start;
  font-family: var(--mono); font-size: clamp(10px, 1.05vw, 13px);
  line-height: 1.55; letter-spacing: .5px; margin: 0;
  min-height: 13em; width: 100%;
  color: var(--red);
  text-shadow: 0 0 8px rgba(255,46,46,.85), 0 0 26px rgba(255,46,46,.3);
  animation: crtTextFlicker 3s infinite;
  white-space: pre-wrap;
}
.boot-logo {
  font-family: var(--mono);
  font-size: clamp(4px, 0.62vw, 7px); line-height: 1.2; letter-spacing: 0;
  margin: 0; height: 24em; overflow: hidden;
  color: var(--red);
  text-shadow: 0 0 10px rgba(255,46,46,.8), 0 0 30px rgba(255,46,46,.3);
  animation: crtTextFlicker 3s infinite .4s;
  white-space: pre;
}
.boot-foot {
  display: flex; align-items: baseline; gap: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--cream);
}
.boot-pct {
  color: var(--red); font-variant-numeric: tabular-nums; font-weight: 700;
  text-shadow: 0 0 10px rgba(255,46,46,.7);
}
.boot-status { opacity: .55; animation: crtTextFlicker 4s infinite .5s; }
.boot-skip { opacity: .25; font-size: 10px; }

@keyframes crtTextFlicker {
  0%, 100% { opacity: 1; }
  92%      { opacity: 1; }
  93%      { opacity: .72; }
  94%      { opacity: .96; }
  96%      { opacity: .8; }
  97%      { opacity: 1; }
}

/* ── ASCII hero logo ─────────────────────────────────────────────────── */
/* The logo art is 100 columns × ~20 rows of monospace. Width tracks the old
   .hero-mark clamp; font-size ≈ target-width / (100ch × .6em/ch). */
.hero-ascii {
  position: relative; margin: 2px 0 0 -4px;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(3.2px, 0.74vw, 10.4px);
  line-height: 1.18; letter-spacing: 0; white-space: pre;
  color: var(--red); user-select: none;
  text-shadow:
    0 0 6px  rgba(255,46,46,.9),
    0 0 18px rgba(255,46,46,.5),
    0 0 44px rgba(255,46,46,.26);
  animation: crtTextFlicker 3.4s infinite, markpulse 6s ease-in-out 1.4s infinite;
}
.hero-ascii .ha-ghost { display: block; opacity: .12; }
.hero-ascii .ha-live  { position: absolute; inset: 0; display: block; }

/* ── v3: about-CLI formatting fixes ──────────────────────────────────────
   .tline is also used by tile boot logs with white-space:pre (line ~417) —
   that bled in here, so long sentences couldn't wrap (clipped at the right
   edge) and never flowed around the floated ASCII art. Terminal text wraps;
   only banner + art stay rigid. */
.acli-scroll .tline { white-space: pre-wrap; overflow-wrap: break-word; }
.acli-scroll .tl-banner, .acli-scroll .tl-art { white-space: pre; }
.acli-scroll .tl-art { max-width: 44%; overflow: hidden; }   /* float can't eat the column */
.acli-scroll .tl-banner { max-width: 100%; }
.acli-scroll .tl-prompt { clear: both; }                      /* prompt below the art */

/* ── v3: Win98 drag-trails for the about window ─────────────────────── */
.cli-trail {
  position: fixed; z-index: 55; pointer-events: none;
  border: 1px solid rgba(255, 46, 46, .55);
  background: rgba(255, 46, 46, .07);
  box-shadow: 0 0 14px rgba(255, 46, 46, .22), inset 0 0 22px rgba(255, 46, 46, .06);
  border-radius: 12px;
  animation: trailFade .42s linear forwards;
}
@keyframes trailFade { from { opacity: .9; } to { opacity: 0; } }

/* ── v3: full-archive door at the bottom of the work feed ───────────── */
.work-more {
  display: none; margin: 34px auto 0; width: fit-content;
  font-family: var(--mono); font-size: 13px; letter-spacing: 2px;
  padding: 14px 26px; border: 1px solid var(--red);
  background: rgba(140, 13, 13, .12); color: var(--cream);
  transition: background .25s, box-shadow .25s, transform .15s, color .25s;
}
.work-more.show { display: block; }
.work-more .sw { color: var(--red); }
.work-more:hover {
  background: var(--red); color: var(--bg); transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(255, 46, 46, .5);
}
.work-more:hover .sw { color: var(--bg); }

/* ============================================================================
   v4 — RETRO IN THE FABRIC
   Orbitron display · Win98 bevel chrome · ASCII buttons + dithered bars ·
   caddy page-markers · ARCHIVE.EXE explorer window · telnet contact.
   ============================================================================ */

:root { --disp: 'Orbitron', system-ui, sans-serif; }

/* Orbitron runs wide — pull tracking in on the big wordmark */
.hero-wordmark { letter-spacing: -0.01em; font-size: clamp(30px, 6.4vw, 96px); }

/* ── shared Win98 bevel language ─────────────────────────────────────── */
.w98-titlebar {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  background: linear-gradient(90deg, var(--red-deep), var(--red) 65%, var(--red-hot));
  color: #fff; user-select: none; cursor: grab;
}
.w98-titlebar:active { cursor: grabbing; }
.w98-title { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w98-btns { margin-left: auto; display: flex; gap: 3px; }
.w98-btn { width: 20px; height: 18px; font-size: 10px; line-height: 13px; text-align: center;
  background: var(--ink); color: var(--cream); border: 2px solid; cursor: pointer;
  border-color: #f5e6d0 #4a1008 #4a1008 #f5e6d0; font-family: var(--mono); padding: 0; }
.w98-btn:active { border-color: #4a1008 #f5e6d0 #f5e6d0 #4a1008; }

/* bevel the existing windows — kill the rounded-material look */
.about-cli, .detail-window {
  border-radius: 0;
  border: 2px solid; border-color: #f5e6d0 #4a1008 #4a1008 #f5e6d0;
}
.acli-chrome, .detail-chrome {
  background: linear-gradient(90deg, var(--red-deep), var(--red) 65%, var(--red-hot));
  border-bottom: 0; padding: 5px 8px;
}
.acli-title, .detail-title { color: #fff; text-shadow: none; font-weight: 700; }
.acli-dots i { border-radius: 0; width: 14px; height: 12px; background: var(--ink);
  border: 2px solid; border-color: #f5e6d0 #4a1008 #4a1008 #f5e6d0; box-shadow: none !important; }
.detail-close { border: 2px solid; border-color: #f5e6d0 #4a1008 #4a1008 #f5e6d0;
  background: var(--ink); border-radius: 0; }
.detail-close:active { border-color: #4a1008 #f5e6d0 #f5e6d0 #4a1008; }

/* dithered DOS shadow under floating windows */
.detail-window, .archive-win { position: relative; }
.detail-window::before, .archive-win::before {
  content: ''; position: absolute; left: 10px; top: 10px; right: -10px; bottom: -10px;
  background: repeating-conic-gradient(rgba(0,0,0,.85) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  z-index: -1; pointer-events: none;
}

/* ── ASCII buttons (design-lab 03-A) ─────────────────────────────────── */
.btn-sound, .btn-work, .work-more {
  border: 0; background: none; border-radius: 0; padding: 10px 8px;
  transition: color .2s, text-shadow .2s, transform .12s;
}
.btn-sound:hover { background: none; color: var(--red); transform: none;
  text-shadow: 0 0 12px rgba(255,46,46,.7); box-shadow: none; }
.btn-sound:hover .sw { color: var(--red); }
.btn-work {
  background: var(--red); color: var(--bg); font-weight: 700; padding: 11px 20px;
  box-shadow: 5px 5px 0 rgba(255,46,46,.28);
}
.btn-work:hover { background: var(--red-hot); border-color: transparent; color: var(--bg);
  transform: none; box-shadow: 5px 5px 0 rgba(255,46,46,.28); }
.btn-work:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 rgba(255,46,46,.28); }
.work-more.show { display: block; color: var(--cream); }
.work-more:hover { background: none; color: var(--red); transform: none; box-shadow: none;
  text-shadow: 0 0 12px rgba(255,46,46,.7); }
.work-more:hover .sw { color: var(--red); }
.cat-tab { border: 0; padding: 7px 6px; }
.cat-tab:hover { background: none; }
.cat-tab.active { background: none; box-shadow: none; }

/* ── about: the caddy (concept B — page markers) ─────────────────────── */
.about-stage { grid-template-columns: auto 1.1fr 0.85fr; }
.about-caddy { display: flex; flex-direction: column; align-items: center; align-self: center; }
.ac-box {
  border: 1px solid var(--line); background: linear-gradient(160deg, #191310, #0a0705);
  padding: 14px 12px 12px; display: flex; gap: 8px; align-items: flex-end;
  box-shadow: inset 0 8px 22px rgba(0,0,0,.7);
}
.ac-spine {
  position: relative; width: 26px; height: 96px; cursor: pointer; padding: 0;
  border: 1px solid rgba(236,220,192,.22); border-bottom-width: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(0,0,0,.4)), var(--sc, #4a423c);
  transition: transform .28s var(--ease), box-shadow .28s;
}
.ac-sp-label { position: absolute; inset: 7px 6px; writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.5px; color: #111;
  background: var(--cream); text-align: center; padding: 3px 1px; font-weight: 700;
  overflow: hidden; }
.ac-spine:hover { transform: translateY(-8px); }
.ac-spine.active { transform: translateY(-18px); border-color: var(--red);
  box-shadow: 0 0 18px rgba(255,46,46,.45); }
.ac-spine.read::after { content: '✓'; position: absolute; top: -15px; left: 50%;
  transform: translateX(-50%); color: var(--gold); font-size: 10px; }
.ac-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 2px; opacity: .45;
  margin-top: 8px; }

/* ASCII read bar in the CLI chrome strip */
.acli-bar { border-bottom: 1px solid var(--line); }
.acli-bar-ascii { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0;
  color: var(--red); text-shadow: 0 0 7px rgba(255,46,46,.5); flex: 1; }

/* ── ARCHIVE.EXE explorer window ─────────────────────────────────────── */
.archive-win {
  position: fixed; z-index: 880; width: min(860px, calc(100vw - 24px));
  height: min(72vh, 640px); display: none; flex-direction: column;
  border: 2px solid; border-color: #f5e6d0 #4a1008 #4a1008 #f5e6d0;
  background: var(--ink);
}
.archive-win.open { display: flex; }
.archive-win.maxed { left: 12px !important; top: 12px !important;
  width: calc(100vw - 24px); height: calc(100vh - 24px); }
.aw-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.3); }
.aw-tab { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; cursor: pointer;
  padding: 6px 13px 5px; color: rgba(236,220,192,.55);
  background: transparent; border: 1px solid transparent; border-bottom: 0; }
.aw-tab:hover { color: var(--cream); }
.aw-tab.on { color: var(--red); background: var(--ink);
  border-color: var(--line); position: relative; top: 1px;
  text-shadow: 0 0 8px rgba(255,46,46,.45); }
.aw-pathbar { display: flex; align-items: baseline; gap: 14px; padding: 7px 12px;
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; }
.aw-path { color: var(--gold); letter-spacing: .5px; }
.aw-hint { margin-left: auto; opacity: .35; font-size: 10px; }
.aw-grid { flex: 1; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 14px;
  scrollbar-width: thin; scrollbar-color: var(--red-deep) transparent; }
.aw-item { cursor: pointer; text-align: center; padding: 8px 6px 7px; border: 1px solid transparent; }
.aw-item:hover, .aw-item:focus-visible { border-color: var(--line); background: rgba(255,46,46,.07); }
.aw-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 7px;
  background: #000; }
.aw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.05); }
.aw-thumb::after { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }
.aw-play { position: absolute; right: 5px; bottom: 4px; z-index: 2; font-size: 10px;
  color: var(--red); text-shadow: 0 0 8px rgba(255,46,46,.8); opacity: 0; transition: opacity .15s; }
.aw-item:hover .aw-play { opacity: 1; }
.aw-name { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-item:hover .aw-name { color: var(--red); }
.aw-meta { display: block; font-family: var(--mono); font-size: 9px; opacity: .4;
  letter-spacing: 1px; margin-top: 2px; }
.aw-status { flex: 0 0 auto; padding: 6px 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px; opacity: .55; }

/* ── cassette label in the detail window ─────────────────────────────── */
.cassette { display: block; border: 1px solid var(--line); padding: 14px 18px;
  background:
    linear-gradient(180deg, rgba(255,46,46,.10), transparent 30%),
    repeating-linear-gradient(0deg, rgba(236,220,192,.03) 0 2px, transparent 2px 4px),
    var(--ink); }
.tape-title { font-family: var(--disp); font-weight: 700; font-size: 16px; color: var(--cream);
  border-bottom: 1px dashed rgba(236,220,192,.35); padding-bottom: 6px; margin-bottom: 6px; }
.tape-line { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; opacity: .78;
  border-bottom: 1px dashed rgba(236,220,192,.18); padding: 3px 0; }
.tape-dim { opacity: .4; }
.spools { font-family: var(--mono); font-size: 14px; letter-spacing: 4px; margin-top: 9px;
  color: var(--red); }
.dv-cassette { margin-bottom: 18px; }

/* ── boot v4: log top-left · logo centre = the loading bar ───────────── */
.boot-pic { position: absolute; inset: 0; z-index: 2;
  filter: url(#bootwobble);
  animation: mainsFlick 5s steps(60) infinite; }
@keyframes mainsFlick {
  0%,100% { opacity: 1; } 3% { opacity: .93; } 6% { opacity: 1; }
  50% { opacity: .95; } 53% { opacity: 1; } 80% { opacity: .97; }
}
.boot-log {
  position: absolute; top: 20px; left: 24px; right: auto; width: auto; margin: 0; min-height: 0;
  font-size: clamp(9px, .85vw, 12px); line-height: 1.5; text-align: left;
  animation: crtTextFlicker 3s infinite;
}
.boot-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: auto; overflow: visible; margin: 0;
  font-size: clamp(4.5px, .72vw, 9px); line-height: 1.2;
}
.boot-foot { position: absolute; left: 24px; bottom: 22px; right: 24px;
  display: flex; align-items: baseline; gap: 26px; }
.boot-bar { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0;
  color: var(--red); text-shadow: 0 0 9px rgba(255,46,46,.7); }
.boot-fx { position: absolute; inset: 0; pointer-events: none; }
.boot-scan { z-index: 5; }
.boot-mask { z-index: 6; mix-blend-mode: multiply; opacity: .22;
  background: repeating-linear-gradient(90deg,
    rgba(255,60,60,.9) 0 1px, rgba(60,255,90,.9) 1px 2px, rgba(70,90,255,.9) 2px 3px); }
.boot-track { z-index: 7; left: 0; right: 0; height: 18%; top: -18%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.04),
    rgba(255,46,46,.05), transparent);
  animation: track 5s linear infinite; }
.boot-glare { z-index: 9; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 40% 26% at 26% 18%, rgba(255,255,255,.08), transparent 70%),
    linear-gradient(125deg, rgba(255,255,255,.05), transparent 24%); }
.boot-vignette { z-index: 8; }

/* ── contact: telnet session ─────────────────────────────────────────── */
.contact { display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 90px 20px 40px; }
.ct-term { width: min(680px, 94vw);
  border: 2px solid; border-color: #f5e6d0 #4a1008 #4a1008 #f5e6d0;
  background: linear-gradient(180deg, rgba(13,9,7,.97), rgba(6,3,2,.97));
  position: relative; }
.ct-term::before { content: ''; position: absolute; left: 10px; top: 10px; right: -10px; bottom: -10px;
  background: repeating-conic-gradient(rgba(0,0,0,.8) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  z-index: -1; }
.ct-chrome { display: flex; align-items: center; padding: 5px 8px;
  background: linear-gradient(90deg, var(--red-deep), var(--red) 65%, var(--red-hot)); }
.ct-title { font-family: var(--mono); font-size: 12px; font-weight: 700; color: #fff; }
.ct-scroll { margin: 0; padding: 18px 20px 4px; font-family: var(--mono);
  font-size: 13px; line-height: 1.6; color: var(--cream); white-space: pre-wrap;
  min-height: 12em; text-shadow: 0 0 7px rgba(236,220,192,.14); }
.ct-promptline { display: flex; align-items: baseline; gap: 8px; padding: 0 20px 6px;
  font-family: var(--mono); font-size: 13px; cursor: text; }
.glow-g { color: var(--gold); text-shadow: 0 0 8px rgba(255,176,0,.5); }
.ct-input { flex: 1; background: none; border: 0; outline: none; color: var(--red);
  font-family: var(--mono); font-size: 13px; caret-color: transparent;
  text-shadow: 0 0 8px rgba(255,46,46,.5); }
.ct-caret { color: var(--red-hot); animation: cliBlink 1.06s steps(1) infinite; }
.ct-caret.lit { text-shadow: 0 0 10px rgba(255,90,60,.9); }
.ct-hint { margin: 0; padding: 0 20px 16px; font-family: var(--mono); font-size: 10.5px;
  opacity: .4; }
.contact-mail-fallback { font-family: var(--mono); font-size: 11px; opacity: .5;
  letter-spacing: 1px; }
.contact-mail-fallback:hover { opacity: 1; color: var(--red); }
.foot-eof { margin: 8px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  opacity: .35; text-align: center; }

@media (max-width: 980px) {
  .about-stage { grid-template-columns: 1fr; }
  .about-caddy { flex-direction: row; gap: 14px; }
  .ac-box { align-items: flex-end; }
  .archive-win { left: 12px !important; top: 12px !important;
    width: calc(100vw - 24px); height: calc(100vh - 24px); }
}

/* ============================================================================
   v5 — TWO WORLDS
   Pure white text · neon cyan accents · ASCII box-drawing chrome (red) ·
   page-by-page navigation · windowed hero + work · disk-first boot &
   transitions · ASCII video reveal · About split: physical | digital.
   ============================================================================ */

:root {
  --cream: #ffffff;                 /* "cream" is pure white now */
  --cyan:  #00e5ff;
  --cyan-rgb: 0, 229, 255;
}
::selection { background: var(--cyan); color: #000; }

/* ── page-by-page: the document never scrolls ────────────────────────── */
body.paged { overflow: hidden; height: 100svh; }
body.paged .scroll-prog { display: none; }

.page {
  position: fixed; inset: 0; z-index: 1;
  visibility: hidden; opacity: 0;
  transform: translateY(26px) scale(.992);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s .55s;
}
.page.pg-active {
  visibility: visible; opacity: 1; transform: none; z-index: 2;
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s 0s;
}
.page.pg-past:not(.pg-active) { transform: translateY(-26px) scale(.992); }
.page.about { height: auto; }               /* kill the old 360vh scroll runway */

.page-dots { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: #fff; }
.page-dots b { color: var(--cyan); font-weight: 500;
  text-shadow: 0 0 8px rgba(var(--cyan-rgb), .6); }

/* ── .term-win: ASCII box-drawing chrome, red frame ──────────────────── */
.term-win {
  position: relative;
  border: 1px solid var(--red);
  background: rgba(7, 3, 2, .93);
  box-shadow: 0 0 26px rgba(255, 46, 46, .13), inset 0 0 60px rgba(0, 0, 0, .55);
}
.term-win::after {                          /* dithered DOS shadow */
  content: ''; position: absolute; left: 10px; top: 10px; right: -10px; bottom: -10px;
  background: repeating-conic-gradient(rgba(0,0,0,.8) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  z-index: -1; pointer-events: none;
}
.tw-bar {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0;
  color: var(--red); padding: 4px 8px;
  border-bottom: 1px solid var(--red);
  background: rgba(20, 4, 3, .85);
  text-shadow: 0 0 8px rgba(255, 46, 46, .4);
  user-select: none; white-space: nowrap;
}
.tw-t b, .tw-btns b { color: var(--cyan); }
.tw-dith {
  flex: 1; min-width: 20px; align-self: center; height: 1px; margin: 0 6px;
  background: repeating-linear-gradient(90deg, rgba(255,46,46,.55) 0 8px, transparent 8px 13px);
}
.tw-btns { letter-spacing: 1px; }
.tw-btns:hover { color: var(--cyan); text-shadow: 0 0 10px rgba(var(--cyan-rgb), .6); }
.pg-active .term-win > .tw-bar .tw-t { color: #fff; }

/* restyle every existing window to the ASCII language — bevels are gone */
.about-cli, .detail-window, .ct-term, .archive-win {
  border: 1px solid var(--red) !important; border-radius: 0;
  box-shadow: 0 0 26px rgba(255, 46, 46, .13), inset 0 0 60px rgba(0, 0, 0, .5);
}
.w98-titlebar, .acli-chrome, .detail-chrome, .ct-chrome {
  background: rgba(20, 4, 3, .9);
  border-bottom: 1px solid var(--red);
  color: var(--red); cursor: grab;
}
.acli-chrome, .detail-chrome, .ct-chrome { cursor: default; }
.w98-title, .acli-title, .detail-title, .ct-title {
  color: #fff; font-weight: 500; text-shadow: 0 0 8px rgba(255, 46, 46, .35);
}
.w98-btn, .detail-close {
  border: 0 !important; background: none !important; color: var(--red);
  width: auto; height: auto; line-height: 1.4; padding: 0 3px;
}
.w98-btn:hover, .detail-close:hover { color: var(--cyan);
  text-shadow: 0 0 10px rgba(var(--cyan-rgb), .6); }
.acli-dots i { border: 1px solid var(--red); background: none; width: 10px; height: 10px; }
.acli-dots i:nth-child(2) { border-color: var(--gold); }
.acli-dots i:nth-child(3) { border-color: var(--cyan); }
.aw-tab.on { color: var(--cyan); text-shadow: 0 0 8px rgba(var(--cyan-rgb), .5); }
.ct-caret { color: var(--cyan); }

/* ── hero + work inside windows ──────────────────────────────────────── */
.hero-win {
  position: absolute; inset: 62px 24px 24px;
  display: flex; flex-direction: column;
}
.hero-win .tw-body {
  position: relative; flex: 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-win .crt { border-radius: 14px; }     /* the tube inside the window */
.hero .scroll-cue { bottom: 34px; z-index: 20; }

.page.work { padding: 0; }
.work { padding: 0; }
.work-win {
  position: absolute; inset: 62px 18px 18px;
  display: flex; flex-direction: column;
}
.work-body { flex: 1; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--red-deep) transparent; }
.work-body .work-inner { padding: 22px 2.6vw 60px; }
.ascii-rev { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%;
  pointer-events: none; transition: opacity .45s; }
.ascii-rev.done { opacity: 0; }

/* ── ABOUT: the split — physical world | digital world ───────────────── */
.page.about { padding: 62px 18px 18px; }
.about-pin.about-split {
  position: static; height: 100%; padding: 0; overflow: visible;
  display: grid; grid-template-columns: 36% 1fr; gap: 0;
  align-items: stretch; justify-content: stretch; max-width: none;
}

/* THE REAL WORLD — objects on a shelf. No scanlines. No phosphor. */
.about-real {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 4vh, 40px); padding: 40px 30px;
  background:
    radial-gradient(ellipse 90% 70% at 55% 38%, #1b1613, #0b0908 75%),
    #0b0908;
  border: 1px solid rgba(255, 255, 255, .08);   /* neutral frame — not red */
  box-shadow: inset 0 -40px 80px rgba(0, 0, 0, .55);
}
.ar-tag {
  position: absolute; top: 13px; left: 16px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 2.5px;
  color: #93887a;                                /* printed museum label */
  text-shadow: none;
}
.about-real .floppy { width: min(82%, 360px); }
/* physical objects don't glow or scan */
.about-real .floppy-scan, .about-real .floppy-glow { display: none; }
.about-real .floppy-label { color: #93887a; text-shadow: none; }
.about-real .floppy-label .ok { color: #93887a; }
.about-real .ac-label { color: #93887a; opacity: 1; }
.about-real .ac-spine.active { box-shadow: 0 6px 18px rgba(0, 0, 0, .6); border-color: rgba(255,255,255,.4); }

/* bits crossing the boundary: red in the room, cyan once inside the machine */
.data-link {
  position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
  z-index: 6; display: flex; gap: 5px; pointer-events: none;
}
.data-link i { font-style: normal; font-family: var(--mono); font-size: 15px;
  color: var(--red); opacity: 0; animation: dlmarch 1.1s linear infinite; }
.data-link i:nth-child(2) { animation-delay: .11s; }
.data-link i:nth-child(3) { animation-delay: .22s; }
.data-link i:nth-child(4) { animation-delay: .33s; color: var(--cyan); }
.data-link i:nth-child(5) { animation-delay: .44s; color: var(--cyan); }
@keyframes dlmarch {
  0% { opacity: 0; transform: translateX(-8px); }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(10px); }
}

/* THE DIGITAL WORLD — inside the machine. Full CRT. */
.about-digital {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 22px 16px 34px;
  background: #050302; overflow: hidden;
  border: 1px solid var(--red); border-left: 0;
}
.about-digital::before {                    /* phosphor bloom */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 40% 30%, rgba(255, 46, 46, .07), transparent 65%);
}
.about-digital::after {                     /* scanlines over the whole world */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 8;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply; opacity: .5;
}
.about-digital .cli-head { margin-bottom: 0; position: relative; z-index: 2; }
.about-digital .about-cli { flex: 1; height: auto; min-height: 0; position: relative; z-index: 2; }
.about-cue { position: absolute; right: 26px; bottom: 12px; z-index: 9; }

/* ── boot v5: disk first, then the windows ───────────────────────────── */
.boot-drive {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(34vw, 380px); height: auto;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, .8));
}
.boot-win { position: absolute; visibility: hidden; z-index: 4; }
.boot-win.show { visibility: visible; }
.boot-logwin { top: 24px; left: 26px; width: min(440px, 46vw); }
.boot-logwin .boot-log {
  position: static; width: auto; min-height: 11em; margin: 0;
  padding: 10px 12px; text-align: left;
  font-size: clamp(9px, .8vw, 12px); line-height: 1.5;
}
.boot-logowin { left: calc(50% - 230px); top: calc(50% - 170px); width: 460px; max-width: 92vw; }
.boot-logowin .boot-logo {
  position: static; transform: none; margin: 0; overflow: visible;
  padding: 12px 12px 4px; min-height: 15em;
  font-size: clamp(3.6px, .46vw, 4.4px); line-height: 1.2;
}
.boot-foot { position: static; display: flex; align-items: baseline; gap: 22px;
  padding: 4px 12px 10px; }
.boot-skip { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); }

/* ── disk transition (hero → work) ───────────────────────────────────── */
.disk-transition {
  position: fixed; inset: 0; z-index: 1900; background: #050302;
  display: none; opacity: 1; transition: opacity .4s ease;
}
.disk-transition.on { display: block; }
.disk-transition.lift { opacity: 0; pointer-events: none; }
.dt-drive {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(30vw, 330px); height: auto;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, .8));
}
.dt-win { position: absolute; left: calc(50% - 195px); top: calc(50% - 230px);
  width: 390px; max-width: 90vw; visibility: hidden; z-index: 4; }
.dt-win.show { visibility: visible; }
.dt-log { margin: 0; padding: 10px 12px; min-height: 7.5em;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--red); text-shadow: 0 0 8px rgba(255, 46, 46, .5); white-space: pre-wrap; }

/* trails read as data now — a cyan lick on the edge */
.cli-trail { border-color: rgba(255, 46, 46, .55); box-shadow:
  0 0 14px rgba(255, 46, 46, .22), inset 0 0 22px rgba(255, 46, 46, .06),
  0 0 4px rgba(var(--cyan-rgb), .25); border-radius: 0; }

/* white-out the warm text shadows that mattered */
.hero-sub, .tl-body { text-shadow: 0 0 8px rgba(255, 255, 255, .12); }

@media (max-width: 980px) {
  .about-pin.about-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .about-real { flex-direction: row; padding: 26px 16px; gap: 20px; }
  .data-link { right: 50%; top: auto; bottom: -30px; transform: translateX(50%) rotate(90deg); }
  .hero-win, .work-win { inset: 56px 10px 10px; }
  .boot-logwin { width: 60vw; }
}

/* ── v5.1: boot maximise polish ──────────────────────────────────────────
   Wireframe maximize rect + bigger, self-sized logo window (the window is
   the logo's final size; the logo builds inside it, nothing scales). */
.zoom-rect {
  position: absolute; z-index: 5; pointer-events: none;
  border: 1px solid var(--red);
  background: rgba(255, 46, 46, .05);
  box-shadow: 0 0 18px rgba(255, 46, 46, .35), inset 0 0 24px rgba(255, 46, 46, .08),
    0 0 6px rgba(var(--cyan-rgb), .25);
}
.boot-win { opacity: 0; }
.boot-win.show { opacity: 1; transition: opacity .14s steps(2); }  /* CRT pop, not a fade */
.boot-logowin {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: auto; max-width: 94vw;
}
.boot-logowin .boot-logo {
  font-size: clamp(5.5px, .85vw, 10px);        /* ~2× v5.0 — the logo leads */
  min-height: 0; padding: 14px 16px 6px;
}

/* ── v5.2: the drive is BIG — hitting the top of the screen ──────────── */
.boot-drive, .dt-drive {
  top: 0; left: 50%; transform: translateX(-50%);
  width: auto; height: min(74vh, 940px);
  filter: drop-shadow(0 22px 60px rgba(0, 0, 0, .85));
}
/* overlay fades up before the hero window minimises into it */
.disk-transition { transition: opacity .22s ease; }
.disk-transition.on { animation: dtFadeUp .22s ease; }
@keyframes dtFadeUp { from { opacity: 0; } to { opacity: 1; } }
.disk-transition .zoom-rect { z-index: 12; }
/* the boot windows sit clear of the big drive */
.boot-logwin { top: 20px; left: 22px; }

/* ============================================================================
   v5.3 — TAPE RACK WORK GRID + SIDEBAR ARCHIVE
   ============================================================================ */

/* ── work window: fixed 6-up rack, no internal scroll ────────────────── */
.work-body { overflow: hidden; }
.work-body .work-inner {
  height: 100%; min-height: 0;      /* kill v2's 100svh — the WINDOW is the bound */
  display: flex; flex-direction: column;
  padding: 16px 2.2vw 12px; max-width: none;
}
.work-cue, .work-sentinel, #workSentinel { display: none !important; }
.wt-pager { color: var(--cyan); text-shadow: 0 0 8px rgba(var(--cyan-rgb), .4);
  letter-spacing: 1px; }

.work-grid {
  flex: 1; min-height: 0; margin-top: 12px;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-rows: unset; gap: 14px;
}
.work-grid.gr-in-up { animation: grIn .32s var(--ease); }
.work-grid.gr-in-down { animation: grInDown .32s var(--ease); }
@keyframes grIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes grInDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }

/* ── the cassette mini-window (design-lab 04-E as a component) ───────── */
.tape-tile {
  display: flex; flex-direction: column; min-height: 0; cursor: pointer;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 46, 46, .08), transparent 22%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px),
    var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.tape-tile:hover, .tape-tile:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 18px rgba(255, 46, 46, .22);
}
.tt-head {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, .25);
  font-family: var(--mono);
}
.tt-no { color: var(--red); font-size: 10px; }
.tt-title { flex: 1; font-family: var(--disp); font-weight: 700; font-size: 12px;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-side { font-size: 8.5px; letter-spacing: 1.5px; opacity: .5; }
.tt-screen { position: relative; flex: 1; min-height: 0; background: #030202; overflow: hidden; }
.tt-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .55s ease; filter: saturate(1.05) contrast(1.03); }
.tape-tile.loaded .tt-vid { opacity: 1; }
.tt-scan { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity: .5; }

/* the real-text ascii — types in line by line over the screen */
.tt-ascii {
  position: absolute; inset: 0; z-index: 4; margin: 0; padding: 4px 7px;
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--mono); font-size: clamp(4px, .62vw, 10px); line-height: 1.06;
  overflow: hidden; background: rgba(3, 2, 2, .9);
  transition: opacity .5s ease .12s;
}
.tape-tile.loaded .tt-ascii { opacity: 0; }
.tt-line {
  white-space: pre; color: var(--red);
  text-shadow: 0 0 6px rgba(255, 46, 46, .6), 0 0 16px rgba(255, 46, 46, .25);
}
.tt-line.hot {
  color: #fff;
  text-shadow:
    0 0 6px  rgba(255, 255, 255, .95),
    0 0 14px rgba(255, 46, 46, 1),
    0 0 30px rgba(255, 46, 46, .75),
    0 0 52px rgba(255, 46, 46, .4);
}
.tt-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 10px; border-top: 1px dashed rgba(255, 255, 255, .16);
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: rgba(255,255,255,.6);
}
.tt-spools { color: var(--red); letter-spacing: 2px; }
.tape-tile.loading .tt-spools { animation: spoolturn 1s steps(4) infinite; }
@keyframes spoolturn { 0% { letter-spacing: 2px; } 50% { letter-spacing: 3px; } }

/* the archive door — folder + prompt, centred under the rack */
.work-body .work-more {
  display: inline-flex !important; align-items: center; gap: 10px;
  margin: 12px auto 0; font-size: 12px; letter-spacing: 2px; color: #fff;
}
.wm-folder { width: 21px; height: 17px; color: var(--red); flex: none;
  filter: drop-shadow(0 0 6px rgba(255, 46, 46, .5)); }
.work-body .work-more:hover { color: var(--cyan); text-shadow: 0 0 12px rgba(var(--cyan-rgb), .6); }
.work-body .work-more:hover .wm-folder { color: var(--cyan); }
.work-body .work-more:hover .sw { color: var(--cyan); }

/* ── archive: left rail + sliding stage ──────────────────────────────── */
.aw-main { flex: 1; display: flex; min-height: 0; }
.aw-rail {
  width: 172px; flex: none; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: rgba(0, 0, 0, .38);
  padding: 10px 0 8px;
}
.awr-tab {
  display: flex; align-items: center; gap: 7px; padding: 10px 12px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  color: rgba(255, 255, 255, .55);
  transition: color .16s, background .16s, transform .16s;
}
.awr-tab:hover { color: #fff; background: rgba(255, 46, 46, .08); transform: translateX(3px); }
.awr-tab.on {
  color: var(--cyan); text-shadow: 0 0 9px rgba(var(--cyan-rgb), .55);
  background: linear-gradient(90deg, rgba(var(--cyan-rgb), .12), transparent 70%);
}
.awr-mark { width: 1ch; color: var(--red); flex: none; }
.awr-tab.on .awr-mark { color: var(--cyan); }
.awr-ico { width: 2ch; flex: none; opacity: .8; }
.awr-label { flex: 1; }
.awr-count { font-size: 9px; opacity: .5; font-variant-numeric: tabular-nums; }
.awr-hint { margin-top: auto; padding: 10px 12px 4px; font-family: var(--mono);
  font-size: 9px; letter-spacing: 1px; opacity: .35; line-height: 1.7; }

.aw-stage { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.aw-stage .aw-grid {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--red-deep) transparent;
}
/* direction-aware slide */
.aw-grid.out-left  { transform: translateX(-36px); opacity: 0; transition: transform .19s ease-in, opacity .19s ease-in; }
.aw-grid.out-right { transform: translateX(36px);  opacity: 0; transition: transform .19s ease-in, opacity .19s ease-in; }
.aw-grid.enter-right { transform: translateX(36px);  opacity: 0; transition: none; }
.aw-grid.enter-left  { transform: translateX(-36px); opacity: 0; transition: none; }
.aw-grid.in { transform: none; opacity: 1; transition: transform .34s var(--ease), opacity .3s ease; }
/* item cascade + hover wake */
.aw-grid .aw-item { opacity: 0; transform: translateY(12px);
  transition: opacity .32s var(--ease), transform .32s var(--ease),
    border-color .15s, background .15s; }
.aw-grid.in .aw-item { opacity: 1; transform: none; }
.aw-thumb img { filter: saturate(.12) contrast(1.05);
  transition: filter .28s ease, transform .45s var(--ease); }
.aw-item:hover .aw-thumb img, .aw-item:focus-visible .aw-thumb img {
  filter: saturate(1.12) contrast(1.04); transform: scale(1.06); }
.aw-item:hover .aw-name { color: var(--cyan); text-shadow: 0 0 9px rgba(var(--cyan-rgb), .5); }
.aw-play { font-size: 11px; letter-spacing: 1px; right: 7px; bottom: 6px; }

@media (max-width: 980px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .aw-rail { width: 52px; }
  .awr-label, .awr-count, .awr-hint { display: none; }
}

/* ============================================================================
   v5.4 — BOOT REWORK: real-world disk · rack focus · data wires · 1-2 snap
   ============================================================================ */

:root { --grn: #3aff6e; --grn-rgb: 58, 255, 110; }

/* ── the drive is REAL — no wobble, no mains flicker on the picture ───── */
.boot-pic { filter: none; animation: none; }
/* the windows are the digital things — they carry the wobble + flicker.
   (animation also snaps opacity to 1 on .show — the pop IS the snap) */
.boot-win.show {
  filter: url(#bootwobble);
  animation: mainsFlick 5s steps(60) infinite;
}

/* ── rack focus: CRT stack fades IN when the first window spawns ──────── */
.boot-crt { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity .6s ease; }
.boot-screen.digital .boot-crt { opacity: 1; }
/* …and the real world falls soft behind the glass */
.boot-drive { transition: filter .6s ease; }
.boot-screen.digital .boot-drive {
  filter: blur(2.2px) brightness(.62) saturate(.85)
    drop-shadow(0 22px 60px rgba(0, 0, 0, .85));
}

/* ── data wires: reader → terminal → logo ─────────────────────────────── */
.boot-wires { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none; overflow: visible; }
.wire-base { fill: none; stroke: rgba(255, 46, 46, .55); stroke-width: 1.5; }
.wire-pulse { fill: none; stroke: var(--cyan); stroke-width: 1.5; opacity: .9;
  stroke-dasharray: 4 16;
  filter: drop-shadow(0 0 4px rgba(var(--cyan-rgb), .8));
  animation: wireFlow .42s linear infinite; }
@keyframes wireFlow { to { stroke-dashoffset: -20; } }
.wire-pkt { fill: #fff;
  filter: drop-shadow(0 0 5px var(--cyan)) drop-shadow(0 0 10px rgba(var(--cyan-rgb), .7)); }

/* ── the log: fixed-height fast flow, completions land green ──────────── */
.boot-logwin .boot-log { height: min(21em, 38vh); min-height: 0; overflow: hidden; }
.bl-line { color: var(--red); }
.bl-line.ok { color: var(--grn);
  text-shadow: 0 0 7px rgba(var(--grn-rgb), .75), 0 0 18px rgba(var(--grn-rgb), .3); }

/* ── logo window: NOTHING but the logo ────────────────────────────────── */
.boot-logowin .boot-logo { padding: 14px 16px; }

/* ── transition overlay gets the same rack-focus treatment ────────────── */
.disk-transition .dt-crt { opacity: 0; transition: opacity .45s ease; }
.disk-transition.digital .dt-crt { opacity: 1; }
.dt-drive { transition: filter .45s ease; }
.disk-transition.digital .dt-drive {
  filter: blur(2px) brightness(.62) saturate(.85)
    drop-shadow(0 22px 60px rgba(0, 0, 0, .85));
}

/* ============================================================================
   v5.5 — VHS GLITCH (repeat page transitions) + per-section disk rituals
   ============================================================================ */

/* the active page shears apart: RGB split + line-skip clip tears + frame
   jumps. steps(1) = hard jump-cuts, no tweening — pure tracking error. */
body.vhs-glitch .page.pg-active {
  filter: url(#vhsplit);
  animation: vhsSkip .46s steps(1) both;
}
@keyframes vhsSkip {
  0%   { transform: translate(0, 0); clip-path: inset(0); }
  10%  { transform: translate(-9px, 3px); clip-path: inset(6% 0 64% 0); }
  20%  { transform: translate(8px, -2px); clip-path: inset(38% 0 21% 0); }
  32%  { transform: translate(-14px, 0) scaleY(1.03); clip-path: inset(61% 0 3% 0); }
  44%  { transform: translate(12px, 6px); clip-path: inset(10% 0 47% 0); }
  56%  { transform: translate(-5px, -9px); clip-path: inset(0); }
  70%  { transform: translate(4px, 2px); clip-path: inset(26% 0 38% 0); }
  84%  { transform: translate(-2px, 0); clip-path: inset(0); }
  100% { transform: none; clip-path: inset(0); }
}

/* tracking bar + dropout static rolling through on top of everything */
body.vhs-glitch::after {
  content: ''; position: fixed; inset: -20% 0; z-index: 3000;
  pointer-events: none; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,
      transparent 34%,
      rgba(255, 255, 255, .10) 36%, rgba(190, 190, 190, .22) 38%,
      rgba(255, 255, 255, .07) 40%, transparent 43%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .04) 0 2px, transparent 2px 7px);
  animation: vhsBar .46s steps(6) both;
}
@keyframes vhsBar {
  0%   { transform: translateY(-38%); opacity: 1; }
  60%  { transform: translateY(22%); opacity: 1; }
  100% { transform: translateY(52%); opacity: 0; }
}

/* the HUD flinches too — everything is on the same tape */
body.vhs-glitch .hud { animation: vhsHud .46s steps(1) both; }
@keyframes vhsHud {
  0%, 100% { transform: none; }
  20% { transform: translateX(5px); }
  40% { transform: translateX(-7px); }
  62% { transform: translateX(2px); }
}

/* ============================================================================
   v5.6 — TACTILE CASSETTES: turning reels, tape counter, marker labels
   ============================================================================ */

:root { --hand: 'Permanent Marker', 'Comic Sans MS', cursive; }

/* ── the shell: springy lift, corner screws, a real object ────────────── */
.tape-tile { position: relative;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
    border-color .18s, box-shadow .18s; }
.tape-tile:hover, .tape-tile:focus-visible {
  transform: translateY(-4px) rotate(-.35deg);
  border-color: var(--red);
  box-shadow: 5px 7px 0 rgba(0, 0, 0, .5), 0 0 22px rgba(255, 46, 46, .22);
}
.tape-tile:active { transform: translateY(-1px) rotate(-.15deg); transition-duration: .08s; }
/* screws — top pair on the shell, bottom pair on the deck */
.tape-tile::before, .tape-tile::after,
.tt-deck::before, .tt-deck::after {
  content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a6a6a, #1a1a1a 75%);
  z-index: 6; pointer-events: none;
}
.tape-tile::before { top: 3px; left: 3px; }
.tape-tile::after { top: 3px; right: 3px; }
.tt-deck::before { bottom: 3px; left: 3px; }
.tt-deck::after { bottom: 3px; right: 3px; }

/* ── the label: colour stripes, ruled line, marker-pen title ──────────── */
.tt-head {
  align-items: center; gap: 8px; padding: 9px 12px 4px;
  background:
    linear-gradient(180deg, rgba(255, 46, 46, .8) 0 3px, transparent 3px),
    linear-gradient(180deg, transparent 0 4px, rgba(var(--cyan-rgb), .5) 4px 5px, transparent 5px),
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 65%);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.tt-title {
  font-family: var(--hand); font-weight: 400; font-size: 14px;
  letter-spacing: .5px; transform: rotate(-.7deg); padding-bottom: 1px;
  border-bottom: 1px dotted rgba(255, 255, 255, .3);   /* the writing line */
}
.tt-side { font-size: 9px; letter-spacing: 1px; opacity: .95; color: #fff;
  border: 1px solid rgba(255, 255, 255, .4); padding: 1px 5px; flex: none; }

/* ── the deck: reel window + counter readout ──────────────────────────── */
.tt-deck {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 3px 12px 5px; border-top: 1px dashed rgba(255, 255, 255, .16);
  font-family: var(--mono);
}
.tt-deck .tt-meta { font-size: 9px; letter-spacing: 1px; color: rgba(255, 255, 255, .6);
  flex: none; max-width: 38%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-cass { flex: 1; min-width: 0; height: 38px; display: block; }
.tt-count { flex: none; font-size: 10px; letter-spacing: 2px;
  color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255, 255, 255, .18); padding: 1px 4px 1px 6px;
  background: #050303; }
.tape-tile:hover .tt-count, .tape-tile.loading .tt-count {
  color: var(--cyan); text-shadow: 0 0 8px rgba(var(--cyan-rgb), .55);
  border-color: rgba(var(--cyan-rgb), .4); }

/* cassette internals */
.tc-window { fill: #060303; stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.tc-tape { fill: rgba(255, 46, 46, .16); stroke: rgba(255, 46, 46, .8); stroke-width: 1; }
.tc-mark { stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.tc-hub { fill: #0a0606; stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
.tc-teeth { stroke: rgba(255, 255, 255, .7); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.tc-guide { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1; }
.tc-run { stroke: rgba(255, 46, 46, .7); stroke-width: 1.2; stroke-dasharray: 4 4; }

/* ── motion: reels turn + tape marches — paused, resumes where it was ─── */
.tc-spin {
  transform-box: fill-box; transform-origin: center;
  animation: reelspin 1.7s linear infinite paused;
}
.tc-spin.fast { animation-duration: .95s; }        /* take-up reel runs hotter */
@keyframes reelspin { to { transform: rotate(1turn); } }
.tape-tile:hover .tc-spin, .tape-tile:focus-visible .tc-spin,
.tape-tile.loading .tc-spin { animation-play-state: running; }

.tc-run { animation: tapeRun .5s linear infinite paused; }
@keyframes tapeRun { to { stroke-dashoffset: -8; } }
.tape-tile:hover .tc-run, .tape-tile:focus-visible .tc-run,
.tape-tile.loading .tc-run { animation-play-state: running; }

.tape-tile:hover .tc-teeth { stroke: var(--cyan); }
.tape-tile:hover .tc-run { stroke: rgba(var(--cyan-rgb), .8); }

@media (prefers-reduced-motion: reduce) {
  .tc-spin, .tc-run { animation: none !important; }
  .tape-tile:hover, .tape-tile:focus-visible { transform: none; }
}

/* ============================================================================
   v5.7 — CASSETTE ROLLOVER OVERLAY: ASCII reels over the video, monochrome
   (replaces the v5.6 SVG foot deck — .tt-deck/.tc-* markup is gone)
   ============================================================================ */

/* label stripes: red + GREY (no blue in the cassette language) */
.tt-head {
  background:
    linear-gradient(180deg, rgba(255, 46, 46, .8) 0 3px, transparent 3px),
    linear-gradient(180deg, transparent 0 4px, rgba(255, 255, 255, .35) 4px 5px, transparent 5px),
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 65%);
}

/* slim foot returns; screws move onto it */
.tt-foot { position: relative; }
.tt-ref { font-size: 8.5px; letter-spacing: 1.5px; opacity: .45; }
.tt-foot::before, .tt-foot::after {
  content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a6a6a, #1a1a1a 75%);
  z-index: 6; pointer-events: none; bottom: 3px;
}
.tt-foot::before { left: 3px; }
.tt-foot::after { right: 3px; }

/* ── the rollover: deck + dossier fades up OVER the video ─────────────── */
.tt-over {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 8px 12px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    rgba(3, 2, 2, .78);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .26s var(--ease);
}
.tape-tile.loaded:hover .tt-over,
.tape-tile.loaded:focus-visible .tt-over { opacity: 1; transform: none; }
/* the tape itself drops to a grey murmur underneath */
.tt-vid { transition: opacity .55s ease, filter .25s ease; }
.tape-tile.loaded:hover .tt-vid,
.tape-tile.loaded:focus-visible .tt-vid { filter: saturate(.12) brightness(.55) contrast(1.05); }

/* ASCII reels — pure white-on-black terminal drawing */
.tto-reels {
  margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.25;
  color: rgba(255, 255, 255, .9); white-space: pre;
  text-shadow: 0 0 7px rgba(255, 255, 255, .28);
}

/* the dossier */
.tto-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.tto-row { display: flex; gap: 10px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 1px; min-width: 0; }
.tto-row .k { flex: none; width: 7.5ch; color: rgba(255, 255, 255, .45); }
.tto-row .v { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 6px rgba(255, 255, 255, .2); }

.tto-play {
  font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .45);
  animation: ttoBlink 1.1s steps(2) infinite;
}
@keyframes ttoBlink { 50% { opacity: .3; } }

/* counter inside the overlay: monochrome, kill the v5.6 cyan/border look */
.tt-over .tt-count { border: 0; background: none; padding: 0;
  font-size: 9.5px; letter-spacing: 1px; }
.tape-tile:hover .tt-count, .tape-tile.loading .tt-count {
  color: #fff; text-shadow: 0 0 6px rgba(255, 255, 255, .4); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .tto-play { animation: none; }
  .tt-over { transition: none; transform: none; }
}

/* ============================================================================
   v5.8 — A3 ROLLOVER: terminal dossier above hot-glow spools (lab winner)
   ============================================================================ */

/* black tint — the tape plays through it (override v5.7's heavy desat) */
.tt-over {
  gap: 7px; justify-content: center;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px),
    rgba(0, 0, 0, .6);
}
.tape-tile.loaded:hover .tt-vid,
.tape-tile.loaded:focus-visible .tt-vid { filter: brightness(.85) saturate(.75); }

/* the terminal dossier — ABOVE the spools */
.tto-top { font-family: var(--mono); font-size: 8.5px; letter-spacing: 2px;
  color: #ff5a48; text-shadow: 0 0 8px rgba(255, 46, 46, .6); }
.tto-title { font-family: var(--disp); font-weight: 700;
  font-size: clamp(11px, 1vw, 15px); letter-spacing: 2.5px; color: #fff;
  text-shadow: 0 0 12px rgba(255, 255, 255, .3); text-align: center;
  max-width: 94%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tto-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 2px;
  color: #ff5a48; text-shadow: 0 0 8px rgba(255, 46, 46, .6); }

/* the spools — MASSIVE phosphor glow, white-hot core */
.tto-reels {
  margin: 2px 0; font-family: var(--mono); white-space: pre;
  font-size: clamp(4.5px, .5vw, 7.5px); line-height: 1.1; color: #ff5a48;
  text-shadow:
    0 0 1px #ffe3dc,
    0 0 6px rgba(255, 80, 50, .95),
    0 0 16px rgba(255, 46, 46, .9),
    0 0 34px rgba(255, 30, 20, .7),
    0 0 70px rgba(255, 0, 0, .45);
}

/* live readouts — UNDER the spools */
.tto-stat { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px;
  color: #ff5a48; text-shadow: 0 0 7px rgba(255, 46, 46, .55); }
.tto-stat .tt-count, .tto-sig { color: #fff; text-shadow: 0 0 7px rgba(255, 255, 255, .45); }
.tto-cmd { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px;
  color: rgba(255, 255, 255, .85); }
.tto-cur { color: #ff5a48; animation: ttoCur .9s steps(2) infinite;
  text-shadow: 0 0 8px rgba(255, 46, 46, .8); }
@keyframes ttoCur { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .tto-cur { animation: none; } }

/* ── ascii-transition mode: the player owns the screen ───────────────── */
/* the player's opaque ground hides the video until the glitch — the old
   fade-in must not fight it, and the typing layer stands down entirely */
.tape-tile.ascii-mode .tt-vid { opacity: 1; transition: none; }
.tape-tile.ascii-mode .tt-ascii { display: none; }

/* hover works mid-scan too — not just after the reveal */
.tape-tile:hover .tt-over,
.tape-tile:focus-visible .tt-over { opacity: 1; transform: none; }

/* the tape's ascii ghost loops red behind the dossier while hovered */
.tt-over > * { position: relative; z-index: 1; }
.tt-over .tto-bg {
  position: absolute; inset: 0; z-index: 0; margin: 0;
  overflow: hidden; white-space: pre; pointer-events: none;
  color: rgba(255, 46, 46, .48);
  text-shadow: 0 0 6px rgba(255, 46, 46, .4), 0 0 18px rgba(255, 30, 20, .22);
}

/* archive: items hug the top — a lone row must not stretch to the floor */
.aw-stage .aw-grid { align-content: start; grid-auto-rows: max-content; }

/* ── v6.0: glitch retune — 280ms, one tear each side of the swap, calm ──
   (re-declares the v5.5 keyframes; last declaration wins) */
@keyframes vhsSkip {
  0%   { transform: none; clip-path: inset(0); }
  15%  { transform: translate(-4px, 1px); clip-path: inset(12% 0 56% 0); }
  35%  { transform: translate(3px, -1px); clip-path: inset(0); }
  55%  { transform: translate(-2px, 0); clip-path: inset(58% 0 10% 0); }
  75%  { transform: translate(1px, 0); clip-path: inset(0); }
  100% { transform: none; clip-path: inset(0); }
}
body.vhs-glitch .page.pg-active { animation-duration: .28s; }
body.vhs-glitch::after {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 40%,
      rgba(255, 255, 255, .06) 42%, rgba(190, 190, 190, .10) 44%, transparent 47%);
  animation-duration: .28s;
}
@keyframes vhsBar {
  0%   { transform: translateY(-14%); opacity: 1; }
  100% { transform: translateY(18%); opacity: 0; }
}
body.vhs-glitch .hud { animation: none; }

/* ── archive open: the world behind dims, tapes pause ────────────────── */
body.archive-open::after {
  content: ''; position: fixed; inset: 0; z-index: 870;   /* under the win (880) */
  background: rgba(0, 0, 0, .45);
  animation: awDim .3s ease both;
  pointer-events: none;
}
@keyframes awDim { from { opacity: 0; } }

/* ============================================================================
   v6.2 — TERMINAL WORK GRID: growing windows · PLAY.EXE popup · full catalog
   ============================================================================ */

/* the tile is now a bare grid cell — the terminal window lives inside it */
.tape-tile { border: none; background: none; box-shadow: none; }
.tape-tile:hover, .tape-tile:focus-visible { border: none; box-shadow: none; }
.tape-tile::before, .tape-tile::after,
.tt-foot::before, .tt-foot::after { display: none; }

/* the window: opens as a title bar, snaps wide, then grows downward in
   sync with the ascii scan (1.25s linear ≈ the 1.2s reveal) */
.tt-win {
  position: absolute; top: 0; left: 0;
  width: 62%; height: 24px; overflow: hidden;
  border: 1px solid var(--red); background: #0a0404;
  box-shadow: 0 0 12px rgba(255, 46, 46, .10), 5px 6px 0 rgba(0, 0, 0, .45);
  transition: width .16s ease-out, height 1.25s linear;
}
.tape-tile.open .tt-win { width: 100%; height: 100%; }
.tape-tile.instant .tt-win { transition: none; }
.tape-tile:hover .tt-win, .tape-tile:focus-visible .tt-win {
  box-shadow: 0 0 22px rgba(255, 46, 46, .25), 5px 7px 0 rgba(0, 0, 0, .5);
}
.tt-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 22px;
  display: flex; align-items: center; gap: 5px; padding: 0 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--red);
  border-bottom: 1px dashed rgba(255, 46, 46, .4); background: #0d0505;
  white-space: nowrap; overflow: hidden;
}
.tt-bar .tb-t { overflow: hidden; text-overflow: ellipsis; }
.tape-tile.loaded .tb-t, .tape-tile:hover .tb-t { color: #fff; }
.tt-bar .tb-fill { flex: 1; height: 1px; min-width: 8px;
  background: repeating-linear-gradient(90deg, rgba(255, 46, 46, .5) 0 6px, transparent 6px 10px); }
/* the screen is pinned to the CELL's final size — the growing frame just
   reveals it (the ascii player never sees a resize) */
.tt-screen {
  position: absolute; top: 22px; left: 0; flex: none;
  width: calc(var(--cellW, 100%) - 2px);
  height: calc(var(--cellH, 100%) - 24px);
}

/* ── PLAY.EXE — the detail popup terminal ────────────────────────────── */
.dt2 { position: fixed; inset: 0; z-index: 2000; display: none;
  background: rgba(0, 0, 0, .55); }
.dt2.visible { display: block; animation: awDim .25s ease; }
.dt2-win {
  position: fixed; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--red); background: #0a0404;
  box-shadow: 0 0 30px rgba(255, 46, 46, .18), 8px 10px 0 rgba(0, 0, 0, .5);
  opacity: 0; z-index: 2101;
}
.dt2-win.show { opacity: 1; transition: opacity .1s steps(2); }
.dt2-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  border-bottom: 1px dashed rgba(255, 46, 46, .4); background: #0d0505;
  white-space: nowrap; overflow: hidden; }
.dt2-bar .db-t { color: #fff; overflow: hidden; text-overflow: ellipsis; }
.dt2-bar .db-c { color: var(--red); }
.dt2-bar .db-fill { flex: 1; height: 1px; min-width: 8px;
  background: repeating-linear-gradient(90deg, rgba(255, 46, 46, .5) 0 6px, transparent 6px 10px); }
.dt2-close { font-family: var(--mono); font-size: 10px; color: var(--red);
  background: none; border: 0; cursor: pointer; padding: 2px 4px; }
.dt2-close:hover { color: var(--cyan); text-shadow: 0 0 8px rgba(var(--cyan-rgb), .5); }
.dt2-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 56% 1fr; }
.dt2-vid { position: relative; background: #000; border-right: 1px solid #2a0d0d; min-height: 0; }
.dt2-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt2-vhud { position: absolute; left: 10px; bottom: 8px; font-family: var(--mono);
  font-size: 9px; letter-spacing: 1.5px; color: #fff; background: rgba(5, 2, 2, .72);
  padding: 3px 8px; }
.dt2-info { padding: 18px 22px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--red-deep) transparent;
  font-family: var(--mono); }
.di-kick { font-size: 9px; letter-spacing: 2.5px; color: var(--red);
  text-shadow: 0 0 8px rgba(255, 46, 46, .5); margin-bottom: 7px; }
.di-title { font-family: var(--disp); font-weight: 700;
  font-size: clamp(15px, 1.6vw, 22px); letter-spacing: 1.5px; color: #fff;
  line-height: 1.35; margin: 0 0 8px; }
.di-meta { font-size: 9.5px; letter-spacing: 1.5px; color: var(--red); margin-bottom: 14px; }
.di-desc { font-size: 11.5px; line-height: 1.9; color: rgba(255, 255, 255, .88);
  margin-bottom: 4px; }
.di-sec { font-size: 9px; letter-spacing: 2px; color: rgba(255, 255, 255, .45);
  border-top: 1px dashed rgba(255, 255, 255, .15); padding-top: 10px; margin: 14px 0 6px; }
.di-crew { font-size: 10px; line-height: 1.85; }
.di-crew .cn { color: #fff; }
.di-crew .cr { color: rgba(255, 255, 255, .5); }
.di-vimeo { display: inline-block; margin-top: 16px; font-size: 10.5px; letter-spacing: 2px;
  color: var(--cyan); border: 1px solid rgba(var(--cyan-rgb), .4); padding: 7px 14px;
  text-decoration: none; }
.di-vimeo:hover { background: rgba(var(--cyan-rgb), .08);
  text-shadow: 0 0 8px rgba(var(--cyan-rgb), .5); }
.dt2-foot { flex: none; padding: 5px 12px; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 1.5px; color: rgba(255, 255, 255, .4);
  border-top: 1px dashed rgba(255, 46, 46, .3); }

@media (max-width: 900px) {
  .dt2-body { grid-template-columns: 1fr; grid-template-rows: 42% 1fr; }
  .dt2-vid { border-right: none; border-bottom: 1px solid #2a0d0d; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-win { transition: none; }
}

/* ── v6.3: aspect mosaic — justified rows, widths follow the source AR ── */
.work-grid { display: flex !important; flex-direction: column; gap: 14px; }
.wg-row { flex: 1; min-height: 0; display: flex; gap: 14px; }
.work-grid .tape-tile { flex: var(--ar, 1.778) 1 0; min-width: 0; min-height: 0; }

/* ── v6.4: hover dossier = console-typed lines, top-left ─────────────── */
.tt-over { align-items: flex-start; justify-content: flex-start; padding: 10px 12px; }
.tto-lines { position: relative; z-index: 1; text-align: left; max-width: 100%;
  font-family: var(--mono); font-size: clamp(8.5px, .78vw, 11.5px);
  line-height: 1.8; letter-spacing: .5px; }
.tto-lines .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* dark halo so it reads over the red ascii ghost */
  text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, .95),
    0 2px 10px rgba(0, 0, 0, .8); }
.tl-w { color: #fff; }
/* the command line + chevrons: bright, powerful red — heavy glow carries it */
.tl-r, .tl-ch { color: #ff5a48;
  text-shadow: 0 0 1px #ffe3dc, 0 0 7px rgba(255, 80, 50, .95),
    0 0 16px rgba(255, 46, 46, .9), 0 0 34px rgba(255, 30, 20, .6),
    0 0 3px rgba(0, 0, 0, 1); }
.tl-a { color: #ffb000; }
/* interactive cue = the vimeo-button blue (no green anywhere) */
.tl-c { color: var(--cyan);
  text-shadow: 0 0 8px rgba(var(--cyan-rgb), .55), 0 0 3px rgba(0, 0, 0, 1); }
.tl-c .tl-ch { color: var(--cyan); text-shadow: inherit; }
.tl-cur { display: inline-block; animation: ttoCur .9s steps(2) infinite; color: #fff; }

/* popup video pane hosts an embed now */
.dt2-vid iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }

/* ── v6.6: boot wire = lab6's cable → I/O port → pipe boundary ────────── */
.wire-real { fill: none; stroke: #8f8f88; stroke-width: 2.4; opacity: .85;
  stroke-linecap: round; }
.wire-real-shadow { fill: none; stroke: rgba(0, 0, 0, .5); stroke-width: 4; }
.wire-pkt-real { fill: #cfcfc8; opacity: .6; }
.port { position: absolute; z-index: 4; width: 12px; height: 30px;
  transform: translate(-50%, -50%); opacity: 0;
  background: #1b1b1e; border: 1px solid #55555a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 0 4px rgba(0, 0, 0, .8); }
.port .led { position: absolute; left: 50%; top: 4px; width: 4px; height: 4px;
  transform: translateX(-50%); border-radius: 50%; background: #402020; }
.port.on { opacity: 1; }
.port.on .led { background: var(--red); box-shadow: 0 0 6px rgba(255, 46, 46, .9);
  animation: portBlink .7s steps(2) infinite; }
@keyframes portBlink { 50% { opacity: .25; } }

/* ============================================================================
   v6.7 — ABOUT: THE WINDOW MOSAIC (about-lab6 ported, 2026-07-20)
   Left = physical reader + 4-disk caddy (page markers) · Right = a desktop
   of ASCII windows growing out of the reader, wired cable → port → window.
   Entrance: the drive lands LARGE centre-stage, then shrinks to the shelf.
   ============================================================================ */

/* the split becomes reader | desktop — stage is the coordinate space for
   wires, port, zoom wireframes and trails */
.about-pin.about-split {
  position: relative;
  grid-template-columns: 30% 1fr;
}

/* ── physical pane: the drive is a plain object on the shelf now ──────── */
.about-real { justify-content: center; gap: clamp(14px, 3vh, 34px); }
.about-real .ab-drive {
  margin: 0; position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%;
}
#floppyFrame {
  display: block; width: min(88%, 380px); height: auto;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .75));
  will-change: transform;
}
.about-real .real-tag {
  font-family: var(--mono); font-size: 8px; letter-spacing: 2px;
  color: #93887a; border: 1px solid #333; padding: 4px 10px; background: #17171a;
}
.about-real .floppy-label { margin-top: 0; font-size: 11px; }

/* ── wires + port live on the stage, over the world boundary ──────────── */
.about-wires { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 5; pointer-events: none; overflow: visible; }
.about-port { z-index: 7; }

/* ── digital pane: tabs · desk · statusbar ────────────────────────────── */
#about .about-digital {
  display: flex; flex-direction: column; min-width: 0;
  padding: 0; gap: 0;
}
.ab-tabs {
  position: relative; z-index: 2;
  display: flex; gap: 16px; padding: 10px 20px 9px;
  border-bottom: 1px solid #2a0d0d;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px;
}
.ab-tab { cursor: pointer; color: rgba(255, 255, 255, .45); }
.ab-tab:hover { color: #fff; }
.ab-tab.on { color: var(--cyan); text-shadow: 0 0 9px rgba(var(--cyan-rgb), .5); cursor: default; }
.ab-tab.on::before { content: '▸ '; color: var(--red); }
.ab-desk { position: relative; z-index: 2; flex: 1; min-height: 0; overflow: hidden; }
.ab-status {
  position: relative; z-index: 2; flex: none;
  display: flex; justify-content: space-between; gap: 18px;
  padding: 7px 20px; background: #140808; border-top: 1px solid #3a1010;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .6);
}
.ab-status .mnt { color: var(--grn); }
.ab-status .bar { color: #fff; }

/* ── the windows ──────────────────────────────────────────────────────── */
.twin {
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--red); background: rgba(10, 4, 4, .96);
  box-shadow: 0 0 14px rgba(255, 46, 46, .14), 6px 7px 0 rgba(0, 0, 0, .45);
  opacity: 0; z-index: 6;
  font-family: var(--mono);
}
.twin.show { opacity: 1; transition: opacity .1s steps(2); }
.twin .bar {
  flex: none; display: flex; font-size: 8.5px; letter-spacing: 1px;
  color: var(--red); padding: 3px 8px; border-bottom: 1px dashed rgba(255, 46, 46, .4);
  white-space: nowrap; overflow: hidden;
}
.twin .bar .fill { flex: 1; overflow: hidden; opacity: .5; }
.twin .bod {
  flex: 1; min-height: 0; padding: 8px 10px; overflow: hidden;
  font-size: clamp(9px, .82vw, 12px); line-height: 1.65;
}

/* the stage's grow-out wireframe + trails ride the stage, not the viewport */
#aboutStage .zoom-rect { z-index: 40; }
#aboutStage .cli-trail { position: absolute; z-index: 39; border-radius: 0; }

/* ── content voices ───────────────────────────────────────────────────── */
@keyframes abBlink { 50% { opacity: 0; } }
.vt-man .sec { color: #fff; font-weight: 700; letter-spacing: 2px; }
.vt-man .bod2 { color: rgba(255, 255, 255, .85); padding-left: 2ch; }
.vt-man .flag { color: var(--gold); }
.vt-diff .del { color: var(--red); text-shadow: 0 0 7px rgba(255, 46, 46, .45); }
.vt-diff .add { color: var(--grn); text-shadow: 0 0 7px rgba(var(--grn-rgb), .45); }
.vt-diff .ctx { color: rgba(255, 255, 255, .4); }
.vt-tbl { white-space: pre; color: rgba(255, 255, 255, .85); }
.vt-tbl .dir { color: var(--cyan); }
.vt-tbl .dim { color: rgba(255, 255, 255, .4); }
.vt-tbl .you { color: var(--cyan); text-shadow: 0 0 8px rgba(var(--cyan-rgb), .55);
  animation: abBlink 1.4s steps(2) infinite; }
.vt-anim { white-space: pre; color: var(--red);
  text-shadow: 0 0 7px rgba(255, 46, 46, .5), 0 0 18px rgba(255, 30, 20, .2); }
.vt-anim .b { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .4); }
.vt-anim .c { color: var(--cyan); text-shadow: 0 0 8px rgba(var(--cyan-rgb), .5); }
.vt-anim .g { color: var(--grn); text-shadow: 0 0 8px rgba(var(--grn-rgb), .45); }
.vt-hot { display: flex; align-items: center; justify-content: center; height: 100%;
  text-align: center; font-weight: 700; letter-spacing: 1px;
  font-size: clamp(13px, 1.5vw, 22px); line-height: 1.5; color: var(--red);
  text-shadow: 0 0 1px #ffd9d2, 0 0 8px rgba(255, 60, 40, .95),
    0 0 22px rgba(255, 46, 46, .8), 0 0 48px rgba(255, 0, 0, .4); }
.vt-hot span { opacity: 0; }
.vt-hot span.in { opacity: 1; transition: opacity .06s; }
.vt-count { display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 4px; }
.vt-count .lab { font-size: .8em; letter-spacing: 3px; color: rgba(255, 255, 255, .55); }
.vt-count .t { font-family: var(--disp); font-weight: 700; letter-spacing: 2px;
  font-size: clamp(14px, 1.6vw, 24px); color: var(--grn);
  text-shadow: 0 0 12px rgba(var(--grn-rgb), .55); font-variant-numeric: tabular-nums; }
.vt-tick { display: flex; align-items: center; height: 100%; white-space: pre;
  color: var(--gold); text-shadow: 0 0 8px rgba(255, 176, 0, .4); letter-spacing: 1px; }
.vt-mail .ps1 { color: var(--grn); text-shadow: 0 0 7px rgba(var(--grn-rgb), .4); }
.vt-mail .caret { display: inline-block; width: .55em; height: 1.05em; background: #fff;
  vertical-align: text-bottom; animation: abBlink .9s steps(2) infinite; }

/* inline image viewer (red duotone, row decode) */
.timg { border: 1px solid #4a1515; background: #050303; padding: 4px;
  width: 100%; height: 100%; display: flex; flex-direction: column; }
.timg .frame { position: relative; overflow: hidden; flex: 1; min-height: 0; }
.timg img { display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) sepia(1) hue-rotate(-52deg) saturate(3.4) brightness(.75) contrast(1.15); }
.timg .shade { position: absolute; left: 0; right: 0; bottom: 0; top: 100%; background: #050303; }
.timg .scanline { position: absolute; left: 0; right: 0; height: 2px; background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, .9), 0 0 22px rgba(255, 46, 46, .8); opacity: 0; }
.timg .ibar { flex: none; font-size: .78em; color: rgba(255, 255, 255, .55); padding-top: 4px;
  display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; overflow: hidden; }
.timg .ibar .pct { color: var(--grn); }
.sheetrow { display: flex; gap: 8px; height: 100%; }

/* the floppy-stack index (clickable) */
.vt-idx { white-space: pre; }
.vt-idx .frame { color: rgba(255, 255, 255, .35); }
.vt-idx .row { cursor: pointer; }
.vt-idx .row.act { color: var(--red); cursor: default;
  text-shadow: 0 0 8px rgba(255, 46, 46, .6), 0 0 20px rgba(255, 30, 20, .25); }
.vt-idx .row.read { color: var(--gold); text-shadow: 0 0 6px rgba(255, 176, 0, .3); }
.vt-idx .row.un { color: rgba(255, 255, 255, .4); }
.vt-idx .row.un:hover, .vt-idx .row.read:hover { color: #fff; }
.vt-idx .pager { color: rgba(255, 255, 255, .55); padding-top: 4px; }
.vt-idx .pager b { color: var(--red); font-weight: 500; }

/* ── the entrance: everything else holds its breath while the drive is
   huge; JS drives the transform, this fades the furniture back in ─────── */
.about-real .about-caddy, .about-real .real-tag, .about-real .floppy-label,
.about-real .ar-tag, #about .ab-tabs, #about .ab-status {
  transition: opacity .45s ease;
}
.ab-intro .about-caddy, .ab-intro .real-tag, .ab-intro .floppy-label,
.ab-intro .ar-tag, .ab-intro .ab-tabs, .ab-intro .ab-status { opacity: 0; }
.ab-intro #floppyFrame { z-index: 60;
  filter: drop-shadow(0 22px 60px rgba(0, 0, 0, .85)); }
.ab-intro .ab-drive { z-index: 60; }
.ab-intro .about-real { background: none; border-color: transparent; box-shadow: none; }

@media (max-width: 980px) {
  .about-pin.about-split { grid-template-columns: 1fr; }
  #floppyFrame { width: min(50%, 260px); }
}

/* v6.7b — cue: pin to the desk's corner (base rule's left:50% won), and
   hold it back until the entrance has finished */
#about .about-cue { left: auto; transform: none; right: 26px; bottom: 44px; }
.ab-intro .about-cue { opacity: 0; }

/* v6.7c — ORIGINS copy port: handoff + chrono instruments */
.vt-hand pre { margin: 6px 0 0; }
.vt-chrono { display: flex; gap: 18px; align-items: center; height: 100%; }
.vt-chrono pre { margin: 0; }

/* v6.7d — the drive gets its chassis frame back (v5.0 .floppy language):
   soft red-warm gradient plate + pulsing accent inset. Painted on the
   figure's pseudo-elements so it can fade while the intro drive is huge. */
.about-real .ab-drive { width: min(90%, 400px); isolation: isolate;
  padding: clamp(12px, 1.5vw, 22px); border-radius: 22px; }
#floppyFrame { width: 100%; }
.about-real .ab-drive::before {            /* the chassis plate */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 22px;
  background: linear-gradient(158deg, #1d1411 0%, #0c0706 58%, #060403 100%);
  border: 1px solid rgba(255, 70, 50, .16);
  box-shadow: inset 0 1px 0 rgba(255, 150, 110, .10), inset 0 0 0 1px rgba(0, 0, 0, .55),
    0 40px 100px rgba(0, 0, 0, .62);
  transition: opacity .45s ease;
}
.about-real .ab-drive::after {             /* pulsing accent frame */
  content: ''; position: absolute; inset: 0; border-radius: 22px;
  pointer-events: none; z-index: 6;
  box-shadow: inset 0 0 0 1px rgba(255, 46, 46, .18), inset 0 0 36px rgba(255, 46, 46, .08);
  animation: floppyPulse 4.5s ease-in-out infinite;
  transition: opacity .45s ease;
}
.ab-intro .ab-drive::before, .ab-intro .ab-drive::after { opacity: 0; animation: none; }

/* v6.7e — left pane: drive on top and BIGGER, caddy below · pipe z-order fix.
   The pipes drew over window bodies because .about-digital (z1) and .ab-desk
   (z2) were stacking contexts that flattened every .twin beneath the
   stage-level wires (z5). Lab6's flat stacking restored: no contexts on the
   desk side, so .twin (z6) sits above the wires and the CRT overlays (z8)
   stay on top. */
.about-real { padding: 40px 22px 26px; }
.about-real .ab-drive { width: min(98%, 470px); }
#about .about-digital { z-index: auto; }
#about .ab-desk { z-index: auto; }
#about .ab-tabs, #about .ab-status { z-index: 6; }

/* ============================================================================
   v6.8 — ARCHIVE v2: THE ENDLESS CINEMA WALL
   Fullscreen ARCHIVE.EXE · fixed 3×2 wall of big autoplaying loops ·
   one wheel gesture = one page slide (direction-aware, tiles cascade) ·
   pages wrap forever. Old .aw-rail/.aw-item/.aw-grid styles are retired.
   ============================================================================ */
.aw-pathbar { align-items: center; gap: 16px; }
.aw-cats { display: flex; gap: 4px; }
.aw-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; cursor: pointer;
  background: none; border: 1px solid transparent; color: rgba(255, 255, 255, .45);
  padding: 3px 9px; }
.aw-cat:hover { color: #fff; }
.aw-cat.on { color: var(--cyan); border-color: rgba(var(--cyan-rgb), .4);
  text-shadow: 0 0 8px rgba(var(--cyan-rgb), .5); }
.aw-cat .c { opacity: .5; margin-left: 6px; }
.aw-pager { margin-left: auto; font-family: var(--mono); font-size: 10px;
  letter-spacing: 1.5px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.aw-pager b { color: var(--red); font-weight: 500; }

.aw-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #050303; }

/* two walls coexist during a slide: outgoing exits one way, incoming enters
   from the other — the same gesture language as the page manager */
.aw-wall { position: absolute; inset: 12px; display: grid; gap: 12px;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
  transition: transform .42s var(--ease), opacity .36s ease; }
.aw-wall.from-below { transform: translateY(52px); opacity: 0; }
.aw-wall.from-above { transform: translateY(-52px); opacity: 0; }
.aw-wall.in { transform: none; opacity: 1; }
.aw-wall.exit-up { transform: translateY(-52px); opacity: 0; pointer-events: none; }
.aw-wall.exit-down { transform: translateY(52px); opacity: 0; pointer-events: none; }

.aw-tile { position: relative; overflow: hidden; min-height: 0; cursor: pointer;
  border: 1px solid #2a0d0d; background: #000;
  opacity: 0; transform: translateY(28px) scale(.985);
  transition: opacity .4s ease, transform .46s var(--ease),
    border-color .18s, box-shadow .18s; }
.aw-wall.in .aw-tile { opacity: 1; transform: none; }
.aw-tile video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.awt-scan { position: absolute; inset: 0; pointer-events: none; opacity: .45; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); }
.awt-no { position: absolute; top: 8px; left: 10px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: #fff;
  opacity: .75; text-shadow: 0 0 6px rgba(0, 0, 0, .95); }
.awt-play { position: absolute; right: 10px; top: 8px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--cyan);
  opacity: 0; text-shadow: 0 0 8px rgba(var(--cyan-rgb), .55); transition: opacity .15s; }
.awt-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 30px 12px 9px; display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, transparent, rgba(3, 1, 1, .9) 74%);
  pointer-events: none; }
.awt-title { font-family: var(--disp); font-weight: 700;
  font-size: clamp(12px, 1.15vw, 17px); letter-spacing: 1px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awt-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-tile:hover, .aw-tile:focus-visible { border-color: var(--red);
  box-shadow: 0 0 20px rgba(255, 46, 46, .3), inset 0 0 24px rgba(255, 46, 46, .07); }
.aw-tile:hover .awt-play, .aw-tile:focus-visible .awt-play { opacity: 1; }
.aw-tile:hover .awt-title { color: var(--cyan);
  text-shadow: 0 0 9px rgba(var(--cyan-rgb), .5); }

@media (max-width: 980px) {
  .aw-wall { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .aw-wall, .aw-tile { transition: none; }
}

/* ============================================================================
   v6.9 — ARCHIVE WALL: rail returns · glitch page-cut · ascii scan-in
   + PLAY.EXE popup conforms to source aspect · about desk left border
   ============================================================================ */

/* the about desk lost its left border when the CLI frame went away */
#about .about-digital { border-left: 1px solid var(--red); }

/* rail is back — the wall shares the row with the file browser */
.archive-win { overflow: hidden; }
.aw-pathbar { align-items: center; }
.aw-pager { margin-left: auto; font-family: var(--mono); font-size: 10px;
  letter-spacing: 1.5px; color: rgba(255, 255, 255, .6); white-space: nowrap; }

/* tiles no longer slide in — the ASCII scan IS the entrance */
.aw-wall { transition: none; }
.aw-tile { opacity: 1; transform: none;
  transition: border-color .18s, box-shadow .18s; }
.aw-tile .ascii-rev { z-index: 3; }        /* over scan/info while writing */

/* the page-cut: VHS glitch scoped to the archive window */
.archive-win.aw-glitch .aw-stage {
  filter: url(#vhsplit);
  animation: vhsSkip .28s steps(1) both;
}
.archive-win.aw-glitch::after {
  content: ''; position: absolute; inset: -20% 0; z-index: 30;
  pointer-events: none; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,
      transparent 34%,
      rgba(255, 255, 255, .10) 36%, rgba(190, 190, 190, .22) 38%,
      rgba(255, 255, 255, .07) 40%, transparent 43%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .04) 0 2px, transparent 2px 7px);
  animation: vhsBar .28s steps(6) both;
}

/* ── PLAY.EXE popup: video pane at TRUE aspect (no bars), dossier below ── */
.dt2 .dt2-body { display: flex; flex-direction: column; }
.dt2 .dt2-vid { flex: none; width: 100%; min-height: 0;
  border-right: 0; border-bottom: 1px solid #2a0d0d; }
.dt2 .dt2-vid iframe, .dt2 .dt2-vid video {
  position: absolute; inset: 0; width: 100%; height: 100%; }
.dt2 .dt2-info { flex: 1; min-height: 0; overflow-y: auto; }

/* ============================================================================
   v7.0 — REAL-WINDOW disk ritual + about-intro blackout + 4×6 reel
   ============================================================================ */

/* the ritual overlay goes TRANSPARENT while the real windows FLIP in/out of
   the reader — the drive floats over the live page, then fades */
.disk-transition { transition: opacity .22s ease, background .18s ease; }
.disk-transition.dt-clear { background: transparent; }
/* swap happens beneath the overlay: the entering page must not run its
   .5s fade/slide — it has to simply BE there when the black lifts */
body.dt-live .page { transition: none !important; }

/* about entrance: the desk pane stays DARK (frame and all) while the drive
   is huge — it fades in only as the drive lands on the shelf */
#about .about-digital { transition: opacity .5s ease; }
.ab-intro .about-digital { opacity: 0; transition: none; }

/* ============================================================================
   v7.0 — ABOUT: lab7 port (the written copy, v2.2)
   Phosphor red/cyan/green voices (no white body text) · typed write-on caret ·
   ch-width .cbar bars (block glyphs misalign — webfont has none) · centred
   poppy labels · analogue trio · spectrogram · coffee machine · maze race ·
   reels · rocket · mugshot roster · shapeshift glitch-merge video.
   ============================================================================ */
#about .twin .bod { color: #ff7263; text-shadow: 0 0 6px rgba(255, 46, 46, .3); }
.ab-caret { display: inline-block; width: .55em; height: 1em; background: var(--red);
  vertical-align: text-bottom; box-shadow: 0 0 6px rgba(255, 46, 46, .8);
  animation: abBlink .8s steps(2) infinite; }
#about .vt-man .sec { color: var(--cyan); text-shadow: 0 0 9px rgba(var(--cyan-rgb), .5); }
#about .vt-man .bod2 { color: #ff7263; text-shadow: 0 0 7px rgba(255, 46, 46, .4);
  padding-left: 0; }
#about .vt-man .dim { color: rgba(255, 120, 100, .42); text-shadow: none; }
#about .vt-man .g { color: var(--grn); text-shadow: 0 0 8px rgba(var(--grn-rgb), .45); }
#about .vt-man .c { color: var(--cyan); text-shadow: 0 0 8px rgba(var(--cyan-rgb), .5); }
#about .vt-anim .b { color: var(--cyan); text-shadow: 0 0 8px rgba(var(--cyan-rgb), .5); }
.vt-anim .a { color: var(--gold); text-shadow: 0 0 8px rgba(255, 176, 0, .55); }
.vt-anim .m { color: #ff2ea6; text-shadow: 0 0 8px rgba(255, 46, 166, .65); }
#about .vt-anim .dim { color: rgba(255, 120, 100, .42); text-shadow: none; }
#about .timg .ibar { color: rgba(255, 120, 100, .6); }
.twin .bod pre { margin: 0; line-height: 1.18; font-family: inherit; }

/* block-char readouts: tame glow; bars are ch-width spans on the mono grid */
.lowglow, .lowglow span { text-shadow: 0 0 3px rgba(255, 46, 46, .3) !important; }
.cbar { display: inline-block; height: .72em; vertical-align: baseline;
  margin-bottom: -.02em; background: var(--red);
  box-shadow: 0 0 6px rgba(255, 46, 46, .55); }
.cbar.grn { background: var(--grn); box-shadow: 0 0 6px rgba(var(--grn-rgb), .5); }
.cbar.hollow { background: rgba(255, 46, 46, .14);
  border: 1px solid rgba(255, 46, 46, .5); box-shadow: none; box-sizing: border-box; }
.cbar.dimf { background: rgba(255, 255, 255, .22); box-shadow: none; }
.tickw { display: inline-block; width: 1ch; }

/* centred poppy labels on images (container-query sized) */
.timg { position: relative; container-type: inline-size; }
.timg .biglbl { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; font-size: clamp(8px, 10.5cqw, 22px); letter-spacing: .14em; font-weight: 700;
  background: rgba(5, 3, 3, .78); padding: .12em .5em; white-space: nowrap;
  border: 1px solid var(--lc, var(--red)); color: var(--lc, var(--red));
  text-shadow: 0 0 10px var(--lc, var(--red)); box-shadow: 0 0 16px rgba(0, 0, 0, .6); }

/* analogue trio */
.trio { display: flex; gap: 14px; height: 100%; align-items: stretch; }
.trio .pane { flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  border: 1px dashed rgba(255, 46, 46, .35); padding: 4px; }
.trio .pane pre { font-size: 1.25em; }
.trio .pane .plab { font-size: .75em; letter-spacing: 2px; color: rgba(255, 120, 100, .6); }
.rec { color: var(--red); animation: abBlink 1s steps(2) infinite;
  text-shadow: 0 0 8px rgba(255, 46, 46, .9); }

/* spectrogram */
.vt-spec pre { letter-spacing: 1px; }
.vt-spec .axis { color: rgba(255, 255, 255, .3); text-shadow: none; }

/* equation + maze */
.vt-eq .eq { display: block; text-align: center; margin: 8px 0 4px;
  font-family: var(--disp); font-weight: 800; letter-spacing: 4px;
  font-size: clamp(17px, 1.9vw, 30px); color: var(--red);
  text-shadow: 0 0 10px rgba(255, 60, 40, .9), 0 0 30px rgba(255, 0, 0, .45); }
.vt-eq .eq span { opacity: 0; }
.vt-eq .eq span.in { opacity: 1; transition: opacity .08s; }
.vt-eq .eq sup { font-size: .6em; color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 176, 0, .9); }
.vt-eq .eq sup.pop { display: inline-block; animation: abEqPop .5s ease-out; }
@keyframes abEqPop { 0% { transform: scale(3); } 100% { transform: scale(1); } }
.vt-eq .expand { text-align: center; color: var(--grn); font-size: .85em;
  letter-spacing: 1px; opacity: 0; transition: opacity .4s; }
.vt-eq .expand.in { opacity: 1; }
.vt-eq .eq.win { animation: abEqWin .55s steps(2) 4; }
@keyframes abEqWin { 50% { color: var(--grn);
  text-shadow: 0 0 14px rgba(var(--grn-rgb), .95), 0 0 36px rgba(var(--grn-rgb), .5); } }

/* coffee */
.vt-coffee { display: flex; gap: 22px; align-items: center; }

/* make / use grid */
.vt-grid pre { text-shadow: 0 0 8px rgba(255, 46, 46, .45), 0 0 20px rgba(255, 30, 20, .2); }
.vt-grid .it { color: rgba(255, 255, 255, .88); text-shadow: none; }
.vt-grid .hd { color: var(--cyan); font-weight: 700;
  text-shadow: 0 0 8px rgba(var(--cyan-rgb), .5); }

/* reels */
.avcap { flex: none; padding-bottom: 5px; color: #ff7263; }
.avcap .p { color: var(--cyan); }
.avnote { flex: none; padding-top: 4px; font-size: .75em; color: rgba(255, 120, 100, .4);
  text-shadow: none; }

/* filmstrip */
.strip { display: flex; gap: 5px; height: 100%; align-items: stretch; overflow: hidden; }
.strip .cell { flex: 1; min-width: 0; border: 1px solid #4a1515; background: #050303;
  padding: 2px; opacity: 0; }
.strip .cell.in { opacity: 1; transition: opacity .12s steps(2); }
.strip .cell img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) sepia(1) hue-rotate(-52deg) saturate(3.4) brightness(.72) contrast(1.15); }

/* roster — full-height intelligence board, portrait mugshot cards */
.roster { display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr; gap: 8px; height: 100%; }
.rcard { border: 1px solid rgba(255, 46, 46, .55); background: rgba(12, 5, 5, .9);
  padding: 5px 6px; font-size: .78em; line-height: 1.4; opacity: 0; position: relative;
  box-shadow: 0 0 10px rgba(255, 46, 46, .1); overflow: hidden;
  display: flex; flex-direction: column; gap: 3px; }
.rcard.in { opacity: 1; transition: opacity .12s steps(2); }
.rcard .mug { flex: 1; min-height: 0; position: relative; border: 1px solid #4a1515;
  background:
    repeating-linear-gradient(45deg, rgba(255, 46, 46, .06) 0 3px, transparent 3px 7px),
    #150808; display: flex; align-items: center; justify-content: center; }
.rcard .mug img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(1) hue-rotate(-52deg) saturate(3.2) brightness(.72) contrast(1.2); }
.rcard .mug .phtag { position: absolute; bottom: 3px; left: 50%;
  transform: translateX(-50%); font-size: .62em; letter-spacing: 2px;
  color: rgba(255, 120, 100, .6); background: rgba(5, 3, 3, .65); padding: 0 5px; }
.rcard .rid { font-size: .8em; color: rgba(255, 120, 100, .5); letter-spacing: 1px; }
.rcard .rname { color: var(--red); font-weight: 700; letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255, 46, 46, .55); }
.rcard .rrole { color: var(--cyan); font-size: .88em;
  text-shadow: 0 0 8px rgba(var(--cyan-rgb), .4); white-space: nowrap; overflow: hidden; }
.rcard .stamp { position: absolute; right: 4px; top: 4px; z-index: 2; font-size: .7em;
  letter-spacing: 2px; color: var(--grn); border: 1px solid rgba(var(--grn-rgb), .6);
  padding: 0 4px; text-shadow: 0 0 8px rgba(var(--grn-rgb), .5); transform: rotate(6deg);
  background: rgba(5, 3, 3, .7); }

/* shapeshift — two feeds glitch-merging in one frame */
.vidwrap { position: relative; overflow: hidden; flex: 1; min-height: 0;
  border: 1px solid #4a1515; background: #050303; }
.vidwrap video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .12s steps(2);
  filter: grayscale(1) sepia(1) hue-rotate(-52deg) saturate(3.2) brightness(.78) contrast(1.15); }
.vidwrap video.live { opacity: 1; }
.vidwrap.glitching video.live { animation: abVglitch .38s steps(1) both; }
@keyframes abVglitch {
  0%   { transform: translate(-7px, 2px) scaleY(1.02); filter: grayscale(1) invert(1) contrast(2); clip-path: inset(8% 0 34% 0); }
  25%  { transform: translate(6px, -3px); filter: grayscale(1) sepia(1) hue-rotate(90deg) saturate(4); clip-path: inset(46% 0 5% 0); }
  50%  { transform: translate(-4px, 0) scaleX(1.04); filter: grayscale(1) sepia(1) hue-rotate(-52deg) saturate(6) brightness(1.6); clip-path: inset(0 30% 0 8%); }
  75%  { transform: translate(3px, 4px); filter: grayscale(1) invert(1); clip-path: inset(20% 0 20% 0); }
  100% { transform: none; clip-path: none; }
}
.vidwrap .vscan { position: absolute; left: 0; right: 0; height: 30%; top: -35%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: abSheen 3.4s linear infinite; pointer-events: none; z-index: 2; }
@keyframes abSheen { to { top: 110%; } }

/* ============================================================================
   v7.1 — CONTACT: WRITE.EXE (contact-lab ported, 2026-07-25)
   The inverse of About: the visitor writes a disk and it leaves. Left = the
   physical drive (blank disk, dark WRITE led); right = WRITE.EXE terminal
   form + FD0 sector dump, wired form → port → cable → drive (data flows
   INTO the machine). Reuses the shared .twin / .port / wire / zoom-rect
   language from v6.6–6.7; everything new is scoped under #contact.
   ============================================================================ */

/* the page: stage fills the viewport like About, footer strip beneath */
.page.contact { padding: 62px 18px 12px; display: flex; flex-direction: column;
  align-items: stretch; text-align: left; gap: 8px; border-top: 0; }
.cw-stage { position: relative; flex: 1; min-height: 0; overflow: hidden;
  border: 1px solid #3a1010; background: #0a0505;
  display: grid; grid-template-columns: 27% 1fr; font-family: var(--mono); }

/* ── THE REAL WORLD — the drive on its shelf ─────────────────────────── */
.cw-real { background: #101013; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; padding-top: 3%; }
.cw-real img { display: block; height: 66%; width: auto;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .75)); }
#contact .real-tag { position: absolute; bottom: 14px; font-size: 8px;
  letter-spacing: 2px; color: #93887a; border: 1px solid #333; padding: 4px 10px;
  background: #17171a; white-space: nowrap; }
#contact .real-tag .wr { color: var(--red); text-shadow: 0 0 7px rgba(255, 46, 46, .6); }
/* the drive's WRITE led — dark until the head is actually writing */
#contact .drive-led { position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #2c1616; transform: translate(-50%, -50%); z-index: 3; }
#contact .drive-led.on { background: var(--red);
  box-shadow: 0 0 7px rgba(255, 46, 46, .95), 0 0 16px rgba(255, 46, 46, .5);
  animation: abBlink .5s steps(2) infinite; }

/* ── wires + world boundary (port visible from the start here) ───────── */
.cw-wires { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 5; pointer-events: none; overflow: visible; }
.cw-port { z-index: 7; opacity: 1; }

/* ── DIGITAL: tabs · desk · statusbar (ab-* chrome reused) ───────────── */
.cw-digital { display: flex; flex-direction: column; min-width: 0;
  border-left: 1px solid #3a1010; background: #0a0505; }
.cw-desk { position: relative; z-index: 2; flex: 1; min-height: 0; overflow: hidden; }
.cw-desk::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: .3;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
#contact .ab-status .mnt.hot { color: var(--red);
  text-shadow: 0 0 8px rgba(255, 46, 46, .6); }
#cwStage .zoom-rect { z-index: 40; }
#cwStage .cli-trail { position: absolute; z-index: 39; border-radius: 0; }

/* windows: white body voice (the visitor's words, not the About phosphor) */
#contact .twin .bod { color: #fff; text-shadow: 0 0 7px rgba(255, 255, 255, .22);
  padding: 10px 12px; font-size: clamp(9px, .82vw, 12.5px); line-height: 1.7; }
#contact .cw-scroll { overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 46, 46, .4) transparent; }

/* ── the WRITE.EXE terminal form ─────────────────────────────────────── */
#contact .wlog div { white-space: pre-wrap; word-break: break-word; }
#contact .wlog .sys { color: rgba(255, 255, 255, .65); }
#contact .wlog .ok { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .35); }
#contact .wlog .err { color: var(--red); text-shadow: 0 0 7px rgba(255, 46, 46, .45); }
#contact .wlog .door { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .35); }
#ctForm { margin: 8px 0 4px; }
#contact .fline { display: flex; align-items: flex-start; gap: 1ch; margin: 2px 0; }
#contact .fline label { flex: none; color: var(--red);
  text-shadow: 0 0 7px rgba(255, 46, 46, .6), 0 0 16px rgba(255, 46, 46, .25);
  cursor: pointer; }
#contact .fline:hover label {
  text-shadow: 0 0 7px rgba(255, 46, 46, .95), 0 0 20px rgba(255, 46, 46, .45); }
#contact .hp { position: absolute; left: -9999px; top: -9999px; }
#contact .fwrap { position: relative; flex: 1; min-width: 0; }
#contact .fwrap input, #contact .fwrap textarea { display: block; width: 100%;
  background: transparent; border: 0; outline: 0; color: #fff; font: inherit;
  line-height: inherit; caret-color: transparent; padding: 0; resize: none;
  overflow: hidden; text-shadow: 0 0 7px rgba(255, 255, 255, .35); }
#contact .fwrap input:disabled, #contact .fwrap textarea:disabled {
  color: rgba(255, 255, 255, .55); }
#contact .mirror { position: absolute; inset: 0; visibility: hidden;
  pointer-events: none; white-space: pre-wrap; word-break: break-word; }
#contact .mirror.oneline { white-space: pre; }
#contact .bcaret { position: absolute; width: .6em; height: 1.15em; margin-top: .12em;
  background: var(--red); opacity: 0; pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 46, 46, .85), 0 0 18px rgba(255, 46, 46, .4); }
#contact .fwrap.focus .bcaret { opacity: 1; animation: abBlink .9s steps(2) infinite; }
#contact .txrow { display: flex; align-items: baseline; gap: 2ch; margin-top: 10px; }
#contact .abtn { background: none; border: 0; padding: 0; font: inherit;
  letter-spacing: 1px; color: var(--cyan); cursor: pointer;
  text-shadow: 0 0 8px rgba(var(--cyan-rgb), .55), 0 0 20px rgba(var(--cyan-rgb), .25); }
#contact .abtn:hover, #contact .abtn:focus-visible { color: #fff; outline: none;
  text-shadow: 0 0 6px rgba(var(--cyan-rgb), .9), 0 0 16px rgba(var(--cyan-rgb), .6); }
#contact .abtn:disabled { color: rgba(255, 255, 255, .25); text-shadow: none;
  cursor: default; }
#contact .txhint { font-size: .8em; color: rgba(255, 255, 255, .35); letter-spacing: 1px; }

/* ── sector dump window ──────────────────────────────────────────────── */
#cwWinDump .bod { display: flex; flex-direction: column; }
#contact .trackline { flex: none; color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 176, 0, .35); white-space: pre; margin-bottom: 6px; }
#contact .dump { flex: 1; min-height: 0; overflow: hidden; white-space: pre;
  font-size: .92em; line-height: 1.55; }
#contact .dump .off { color: rgba(255, 255, 255, .35); text-shadow: 0 0 5px rgba(255, 255, 255, .15); }
#contact .dump .hx { color: rgba(255, 255, 255, .75); text-shadow: 0 0 6px rgba(255, 255, 255, .25); }
#contact .dump .asc { color: #fff; text-shadow: 0 0 7px rgba(255, 255, 255, .4); }
#contact .dump .fresh .hx, #contact .dump .fresh .asc { color: var(--red);
  text-shadow: 0 0 7px rgba(255, 46, 46, .6); }
#contact .dumpdone { flex: none; color: rgba(255, 255, 255, .75);
  text-shadow: 0 0 7px rgba(255, 255, 255, .3); white-space: pre; }

/* ── eject → label → envelope → stamp → ships ────────────────────────── */
#contact .env-scene { position: absolute; inset: 0; z-index: 60;
  background: rgba(4, 2, 2, 0); transition: background .3s; }
#contact .env-scene.dim { background: rgba(4, 2, 2, .62); }
#contact .ship { position: absolute; inset: 0; }
#contact .ship.away { transition: transform .45s cubic-bezier(.5, 0, .9, .4);
  transform: translateX(120%); }
#contact .disk { position: absolute; width: 148px; height: 148px; z-index: 2;
  background: #23232a; border: 1px solid #4a4a52; border-radius: 2px 8px 2px 2px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .7); transform: translate(-50%, -50%); }
#contact .disk .shutter { position: absolute; top: 6px; left: 50%; width: 62px;
  height: 34px; transform: translateX(-50%); background: #7d7d84;
  border: 1px solid #55555a; }
#contact .disk .shutter::after { content: ''; position: absolute; top: 4px; right: 8px;
  width: 16px; height: 26px; background: #23232a; }
#contact .disk .dlabel { position: absolute; left: 10px; right: 10px; bottom: 8px;
  height: 78px; background: #e9e7dc; border: 1px solid #b9b7aa; padding: 6px 8px 0;
  font-family: var(--hand); color: #1c1c22; overflow: hidden; }
#contact .disk .dlabel::before { content: ''; position: absolute; left: 0; right: 0;
  top: 22px; height: 1px; background: rgba(28, 28, 34, .25);
  box-shadow: 0 18px 0 rgba(28, 28, 34, .25); }
#contact .dl1 { position: relative; font-size: 15px; line-height: 22px;
  margin-top: 10px; white-space: nowrap; text-align: center; text-shadow: none; }
#contact .envelope { position: absolute; z-index: 3; transform: translate(-50%, -50%);
  width: 350px; font-family: var(--mono); font-size: 13px; color: #fff;
  background: #0a0505; border: 1px solid rgba(255, 255, 255, .85);
  text-shadow: 0 0 6px rgba(255, 255, 255, .2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .8); opacity: 0; }
#contact .envelope.show { opacity: 1; transition: opacity .12s steps(3); }
#contact .env-flap { position: relative; height: 46px; overflow: hidden;
  border-bottom: 1px dashed rgba(255, 255, 255, .45); }
#contact .env-flap i { position: absolute; top: 50%; width: 60%; height: 0;
  border-top: 1px solid rgba(255, 255, 255, .55); }
#contact .env-flap i:first-child { left: -5%; transform: rotate(15deg);
  transform-origin: left top; }
#contact .env-flap i:last-child { right: -5%; transform: rotate(-15deg);
  transform-origin: right top; }
#contact .env-addr { padding: 16px 26px 6px; line-height: 1.7; }
#contact .env-addr .dimc { color: rgba(255, 255, 255, .45); }
#contact .env-foot { display: flex; align-items: center; gap: 12px;
  padding: 6px 26px 14px; font-size: 9.5px; letter-spacing: 2px;
  color: rgba(255, 255, 255, .55); }
#contact .env-foot i { flex: 1; border-top: 1px solid rgba(255, 255, 255, .35); }
#contact .env-scene .stamp { position: absolute; z-index: 4; padding: 5px 7px;
  text-align: center; font-size: 8.5px; letter-spacing: 2px; line-height: 1.5;
  color: var(--red); border: 2px double var(--red); border-radius: 3px;
  background: rgba(10, 4, 4, .5); text-shadow: 0 0 7px rgba(255, 46, 46, .5);
  transform: translate(-50%, -50%) rotate(-7deg); opacity: 0; }
#contact .env-scene .stamp.slam { opacity: 1; animation: cwSlam .18s ease-out; }
@keyframes cwSlam {
  from { transform: translate(-50%, -50%) rotate(-7deg) scale(2.4); opacity: 0; }
  to   { transform: translate(-50%, -50%) rotate(-7deg) scale(1); opacity: 1; }
}

/* the [hidden] attribute must win over display:flex rules (lab reset) */
#contact [hidden] { display: none !important; }

/* the footer strip under the stage stays compact */
.page.contact .contact-foot { margin-top: 0; flex: none; }
.page.contact .foot-eof { margin: 0; flex: none; }

/* ============================================================================
   v7.2 — ABOUT: content upgrade v3 (2026-07-25, Alex's PDF notes)
   Cyan chevrons everywhere · round scanner · real handoff camera · camcorder
   de-bounced (box glyphs) · cup left of machine · MAKE.TBL as CSS ch-cells ·
   reels rotate real catalog stills · STRIP = rolling carousel (Baby Bonsai
   leads) · TEAM disk reformat (big colourful quest road w/ trees).
   ============================================================================ */

/* MAKE.TBL — alignment comes from CSS cells, never glyph widths */
.mktbl { border: 1px dashed rgba(255, 46, 46, .45); background: rgba(255, 46, 46, .03);
  padding: 12px 20px; }
.mktbl .row { white-space: nowrap; line-height: 1.9; }
.mktbl .mkc { display: inline-block; width: 15ch; }
.mktbl .usc { display: inline-block; width: 8ch; }
.mktbl .tk { display: inline-block; width: 2ch; text-align: center; }
.mktbl .sepv { display: inline-block; width: 5ch; text-align: center;
  color: rgba(255, 120, 100, .35); }
.mktbl .hr { border-top: 1px dashed rgba(255, 46, 46, .45); margin: 6px -20px; }

/* STRIP — rolling carousel of catalog stills (duplicated list, CSS loop) */
.carou { height: 100%; overflow: hidden; }
.carou-in { display: flex; gap: 5px; height: 100%; width: max-content;
  animation: carouRoll 48s linear infinite; }
@keyframes carouRoll { to { transform: translateX(calc(-50% - 2.5px)); } }
.carou .cell { flex: none; height: 100%; aspect-ratio: 16 / 9;
  border: 1px solid #4a1515; background: #050303; padding: 2px; opacity: 0; }
.carou .cell.in { opacity: 1; transition: opacity .12s steps(2); }
.carou .cell img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) sepia(1) hue-rotate(-52deg) saturate(3.4) brightness(.72) contrast(1.15); }
@media (prefers-reduced-motion: reduce) { .carou-in { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   v6.7 — 2026-07-25 · COLOPHON (footer prose)
   Sits between the contact stage and the thin .contact-foot strip. Styled as a
   terminal readout so it reads as native chrome rather than a marketing block:
   ASCII rule for the frame, mono type, red `>` keys, cream body at low opacity.
   Fills the dead space under WRITE.EXE — the stage flexes down to make room.
   ══════════════════════════════════════════════════════════════════════════ */
.colophon {
  flex: none;
  padding: 14px clamp(14px, 3vw, 40px) 6px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
}
.col-rule {
  font-size: 10px; line-height: 1; color: var(--red); opacity: .38;
  white-space: nowrap; overflow: hidden; margin-bottom: 12px;
  letter-spacing: -.2px;
}
.col-head {
  font-family: var(--disp); font-weight: 700; font-size: clamp(14px, 1.5vw, 19px);
  color: var(--cream); letter-spacing: .2px; margin-bottom: 12px;
  text-shadow: 0 0 12px rgba(255, 46, 46, .18);
}
.col-grid {
  display: grid; gap: 10px clamp(18px, 3vw, 46px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.col-key {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: var(--red); opacity: .85; margin-bottom: 5px;
}
.col-key .col-c { opacity: .55; }
.col-cell p {
  font-size: 11.5px; line-height: 1.62; color: var(--cream); opacity: .5;
  max-width: 46ch; text-wrap: pretty;
}
.col-cell p + p { margin-top: 7px; }
.col-mail { opacity: .62 !important; }
.col-mail a { color: var(--gold); }
.col-mail a:hover { text-shadow: 0 0 10px rgba(255, 176, 0, .45); }

/* The contact page is a fixed-height flex column: let the stage give up the
   space instead of the colophon overflowing off-screen. */
.page.contact .cw-stage { min-height: 0; }

/* Short viewports / phones-in-landscape: the scene matters more than the prose,
   so the colophon scrolls rather than squeezing the drive out of frame. */
@media (max-height: 780px) {
  .colophon { max-height: 30vh; overflow-y: auto; padding-top: 10px; }
  .col-head { font-size: 13px; margin-bottom: 8px; }
  .col-cell p { font-size: 11px; line-height: 1.5; }
}

/* Short-viewport colophon scrolls (above) — mask the cut so a half-clipped
   line reads as "more below" rather than a layout bug. */
@media (max-height: 780px) {
  .colophon {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    scrollbar-width: none;
  }
  .colophon::-webkit-scrollbar { width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v6.8 (2026-07-25) — STATIC BASE LAYER (progressive enhancement)
   #workGrid ships pre-filled with .wg-item catalogue anchors, generated by
   labs/tools/gen_works.py between the GENERATED WORK GRID markers in
   index.html. js/work-tapes.js replaces them with the CRT rack on first
   render; the rebuilt tiles are now real <a> elements carrying a visually
   hidden .tt-cap caption. Three jobs here: (a) neutralise anchor defaults
   on the tiles so the rack looks exactly as before, (b) style the static
   layer, (c) linearise the document when JS never runs (html.no-js — the
   class is removed by the first inline script in <head>). */

/* (a) CRT tiles became links — visually identical to the old <article>s */
a.tape-tile { text-decoration: none; color: inherit; }
.tt-cap {                        /* crawlable/AT caption — visually hidden */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  border: 0; white-space: nowrap; font-weight: 400;
}

/* (b) the static catalogue — what #workGrid IS before JS runs */
.wg-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px; margin: 0 0 14px;
  border: 1px solid var(--line); background: var(--ink);
  color: #cfc9c4; text-decoration: none;
}
.wg-item img { width: 220px; max-width: 38vw; height: auto; flex: none;
  border: 1px solid var(--line); }
.wg-title { margin: 0 0 5px; font-size: 15px; line-height: 1.35; color: #fff; }
.wg-meta { display: block; margin: 0 0 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px;
  color: var(--red); }
.wg-desc { margin: 0; font-size: 12.5px; line-height: 1.55; color: #a89f9a; }
.wg-item:hover, .wg-item:focus-visible { border-color: var(--red); }
.wg-item:hover .wg-title { color: var(--cyan); }
@media (max-width: 700px) {
  .wg-item { flex-direction: column; }
  .wg-item img { width: 100%; max-width: none; }
}

/* (c) no-JS: drop the boot screen, unstack the fixed pages, let the
   document scroll — a plain readable version of the same content */
html.no-js body.paged { overflow: auto; height: auto; }
html.no-js .boot-screen, html.no-js .grain, html.no-js .scroll-prog,
html.no-js .work-cue, html.no-js .work-sentinel { display: none; }
html.no-js .page {
  position: static; visibility: visible; opacity: 1;
  transform: none; transition: none;
}
html.no-js .hero-win, html.no-js .work-win {
  position: static; inset: auto; }
html.no-js .page.work { padding: 70px 18px 24px; }   /* clear the fixed HUD */
html.no-js .work-body { overflow: visible; }
html.no-js .work-body .work-inner { padding: 18px; }
html.no-js .work-grid { display: block !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v6.9 (2026-07-25) — /work/<slug>/ PROJECT PAGES
   Static per-project pages generated by labs/tools/gen_works.py. Each is
   the PLAY.EXE dossier window (dt2) given a URL and room to breathe: same
   chrome, same phosphor, no boot sequence. These rules unpin the overlay
   window into document flow and add the page scaffolding. */
body.work-page { overflow-y: auto; min-height: 100svh; }
.wp-main { max-width: 1100px; margin: 84px auto 48px; padding: 0 18px; }
body.work-page .dt2-win { position: static; opacity: 1; z-index: auto; }
body.work-page .dt2-info { overflow: visible; }
body.work-page .di-title { font-size: clamp(18px, 2.6vw, 27px); }
body.work-page .di-kick { font-size: 10px; }
body.work-page .di-desc { font-size: 12.5px; max-width: 72ch; }
body.work-page h2.di-sec { font-weight: 500; }
body.work-page .dt2-close { text-decoration: none; }
.wp-scan {                       /* the CRT scanline film over the page */
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
}
.wp-nav { display: flex; gap: 18px; justify-content: space-between;
  flex-wrap: wrap; }
.wp-nav a { color: var(--red); text-decoration: none; letter-spacing: 1.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34%; }
.wp-nav a:hover { color: var(--cyan);
  text-shadow: 0 0 8px rgba(var(--cyan-rgb), .5); }
@media (max-width: 700px) {
  .wp-nav a { max-width: 100%; }
  .wp-main { margin-top: 72px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v7.2 (2026-07-26) — /work/<slug>/: clean embed + terminal dossier

   (a) THE FILM IS NOT THE FURNITURE. .grain and .wp-scan are CRT dressing
       for the page; running them over a client's finished grade is just
       damage. Both drop below the video pane on project pages, which is a
       paint-order change only, so the rest of the page keeps the full
       treatment. The HUD stays at z 800 and still floats over everything.

   (b) The dossier under the player is rendered as console output in the
       SAME grammar as the tile hover-stat in work-tapes.js: a C:\TCC\REEL>
       prompt, > chevrons, dot leaders run out to a shared column, and
       box-drawn section rules instead of CSS dashes. Hovering a tile and
       opening its page now speak the same language.

   Everything is scoped to body.work-page / .wp-term, so the PLAY.EXE popup
   on the homepage is byte-for-byte unaffected. */

/* ── (a) the embed plays clean ─────────────────────────────────────────── */
body.work-page .grain   { z-index: 30; }
body.work-page .wp-scan { z-index: 40; }
body.work-page .dt2-vid { position: relative; z-index: 50; }

/* ── (b) the dossier as console output ─────────────────────────────────── */
body.work-page .wp-term { padding: 20px 24px 22px; background: #070303; }

/* prompt lines — the powerful red of the tile console, glow and all */
.wp-term .tm-cmd, .wp-term .tm-tail {
  font-size: 10.5px; letter-spacing: .5px; line-height: 1.7; color: #ff5a48;
  text-shadow: 0 0 1px #ffe3dc, 0 0 7px rgba(255, 80, 50, .55),
    0 0 16px rgba(255, 46, 46, .3);
}
.wp-term .tm-cmd { margin-bottom: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-term .tm-p { opacity: .7; }
.wp-term .tm-tail { margin-top: 22px; }
.wp-term .tm-cur { display: inline-block; width: .58em; height: 1.05em;
  vertical-align: -.16em; background: currentColor;
  animation: ttoCur .9s steps(2) infinite; }

/* header: series as a tag, title in the terminal face */
body.work-page .wp-term .di-kick { text-transform: uppercase; letter-spacing: 2.5px;
  margin-bottom: 9px; }
.wp-term .di-kick::before { content: '[ '; opacity: .65; }
.wp-term .di-kick::after  { content: ' ]'; opacity: .65; }
body.work-page .wp-term .di-title {
  font-family: var(--mono); font-weight: 700; letter-spacing: .5px;
  font-size: clamp(16px, 2.1vw, 23px); line-height: 1.4; margin: 0;
  text-shadow: 0 0 14px rgba(255, 255, 255, .12);
}

/* stat block: labels, dot leaders to a shared column, values */
.wp-term .tm-fields { display: grid; grid-template-columns: max-content 1fr;
  column-gap: 12px; row-gap: 3px; margin: 16px 0 2px;
  font-size: 10.5px; letter-spacing: 1px; }
/* nowrap is load-bearing: the leader is a flex item, and without it the
   label can wrap to its longest word, which collapses the max-content
   column and leaves every leader the same stubby length */
.wp-term .tm-fields dt { display: flex; align-items: baseline; gap: 7px;
  margin: 0; color: rgba(255, 255, 255, .4); white-space: nowrap; }
.wp-term .tm-fields dt::before { content: '>'; flex: none; color: var(--red); }
.wp-term .tm-fields dt::after { content: ''; flex: 1 1 16px;
  border-bottom: 1px dotted rgba(255, 46, 46, .38); transform: translateY(-3px); }
.wp-term .tm-fields dd { margin: 0; color: #fff; }

/* section rules: ├─╡ LABEL ┄┄┄┄┄┄┄┄ */
body.work-page .wp-term h2.di-sec {
  display: flex; align-items: center; gap: 10px;
  border-top: 0; padding-top: 0; margin: 24px 0 11px;
  font-size: 9.5px; letter-spacing: 3px; color: var(--red);
}
.wp-term h2.di-sec::before { content: '├─╡'; letter-spacing: 0; opacity: .85; }
.wp-term h2.di-sec::after { content: ''; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(255, 46, 46, .45) 0 6px, transparent 6px 10px); }

/* body copy: console output, hung off a dashed rail */
body.work-page .wp-term .di-desc { color: rgba(255, 255, 255, .86);
  border-left: 1px dashed rgba(255, 46, 46, .22); padding-left: 15px; }
.wp-term .di-desc p { margin: 0 0 13px; }
.wp-term .di-desc p:last-child { margin-bottom: 0; }

/* crew: name column sized to the longest name, leaders fill the slack */
.wp-term .di-crew { display: grid; grid-template-columns: max-content 1fr;
  column-gap: 12px; row-gap: 4px; font-size: 10.5px; line-height: 1.75; }
.wp-term .di-crew .cn { display: flex; align-items: baseline; gap: 7px;
  white-space: nowrap; }
.wp-term .di-crew .cn::before { content: '>'; flex: none; color: var(--red); }
.wp-term .di-crew .cn::after { content: ''; flex: 1 1 16px;
  border-bottom: 1px dotted rgba(255, 46, 46, .3); transform: translateY(-3px); }
/* a name with no role listed takes the full width and drops the leader */
.wp-term .di-crew .cn-wide { grid-column: 1 / -1; }
.wp-term .di-crew .cn-wide::after { display: none; }
.wp-term .di-thanks { font-size: 10.5px; line-height: 1.85; margin: 0;
  color: rgba(255, 255, 255, .55); padding-left: 15px;
  border-left: 1px dashed rgba(255, 46, 46, .22); }

/* the watch link reads as a command chip */
.wp-term .di-vimeo { margin-top: 20px; padding: 8px 14px;
  border-color: rgba(var(--cyan-rgb), .45); background: rgba(var(--cyan-rgb), .04); }
.wp-term .di-vimeo::before { content: '['; margin-right: 9px; opacity: .6; }
.wp-term .di-vimeo::after  { content: ']'; margin-left: 9px; opacity: .6; }

/* ── about section: real clips in the panes, and a lighter red wash ────
   The panes were grayscale(1) → sepia → hue-rotate, which throws away the
   original colour before tinting, so every frame came back the same red.
   Keeping the grade but letting most of the chroma survive reads as graded
   rather than filtered. One variable so it stays tunable in one place. */
:root {
  --ab-wash: grayscale(.3) sepia(.6) hue-rotate(-45deg) saturate(1.9)
             contrast(1.08);
}
.timg img, .timg video { display: block; width: 100%; height: 100%;
  object-fit: cover; filter: var(--ab-wash) brightness(.86); }
.strip .cell img, .carou .cell img { filter: var(--ab-wash) brightness(.84); }
.rcard .mug img { filter: var(--ab-wash) brightness(.84); }
.vidwrap video { filter: var(--ab-wash) brightness(.9); }

/* ── mission.exe camcorder: blink the dot, don't reflow the pane ───────
   The REC dot used to be typed in and out of the string, and the span
   carried the global .rec (display:flex, bold) — so every other tick the
   line changed width and broke onto two rows. Now the dot is permanent and
   only its opacity animates. */
.vt-anim .vt-rec { animation: abBlink 1s steps(2) infinite;
  text-shadow: 0 0 8px rgba(255, 46, 46, .9); }
@media (prefers-reduced-motion: reduce) {
  .vt-anim .vt-rec { animation: none !important; }
}

/* ── PLAY.EXE popup → the project page ─────────────────────────────────
   A plain tile click is captured by the popup, so this link is the only
   route from the reel into /work/<slug>/. It leads the watch link. */
.di-page { display: inline-block; margin: 16px 10px 0 0; padding: 7px 14px;
  font-size: 10.5px; letter-spacing: 2px; color: var(--red);
  border: 1px solid rgba(255, 46, 46, .45); text-decoration: none; }
.di-page:hover { background: rgba(255, 46, 46, .08);
  text-shadow: 0 0 8px rgba(255, 46, 46, .6); }
.dt2-foot .df-link { color: var(--red); text-decoration: none; }
.dt2-foot .df-link:hover { color: var(--cyan); }

@media (max-width: 700px) {
  body.work-page .wp-term { padding: 16px 15px 18px; }
  .wp-term .tm-cmd { font-size: 9.5px; }
  /* leaders cost more than they earn once the panel is this narrow */
  .wp-term .tm-fields, .wp-term .di-crew { grid-template-columns: 1fr; row-gap: 0; }
  .wp-term .tm-fields dd, .wp-term .di-crew .cr { margin: 0 0 7px 14px; }
  .wp-term .tm-fields dt::after, .wp-term .di-crew .cn::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-term .tm-cur { animation: none !important; }
}

/* ============================================================================
   v7.3 — PLAY.EXE popup split into TWO windows (2026-07-26): video window
   LEFT (the pane is exactly the source aspect — its height dictates both
   windows, so there are never bars), DOSSIER window RIGHT as a scrollable
   sidebar. Overlay-scoped (.dt2 .dtv/.dti) — the static /work/ pages keep
   the shared .dt2-win classes untouched.
   ============================================================================ */
.dt2 .dtv .dt2-vid { flex: 1 1 auto; min-height: 0; width: 100%;
  border-right: 0; border-bottom: 0; }
.dt2 .dti .dt2-body { min-height: 0; }
.dt2 .dti .dt2-info { padding: 16px 18px; }

/* ============================================================================
   v7.4 — HERO LOCKUP (2026-07-26): CLUB.productions + console hero-sub.
   Wordmark lines are max-content so the JS width-fit (ascii-hero.js v3 /
   mobile-core.js) can measure and equalise them; the sub is two `>>` mono
   lines that write on after boot (chevrons persist — no layout shift).
   ============================================================================ */
.hero-wordmark .line { width: max-content; }
.hero-sub.hero-term { max-width: none; }
.hero-sub .hs-line { display: block; white-space: nowrap; }
.hero-sub .hs-ch { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, .5); }
.hero-sub .hs-cur { display: inline-block; width: .6em; height: 1.05em;
  margin-left: 1px; background: var(--red); vertical-align: text-bottom;
  box-shadow: 0 0 7px rgba(255, 46, 46, .8);
  animation: hsBlink .9s steps(2) infinite; }
@keyframes hsBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-sub .hs-cur { display: none; } }

/* v7.4a — lockup recolour (2026-07-26): CLUB is solid white like line 1;
   only .productions wears the red outline stroke. Rise animation and the
   width-fit are untouched (colour-only overrides on the .outline line). */
.hero-wordmark .line.outline { color: var(--cream); -webkit-text-stroke: 0;
  text-shadow: 0 0 40px rgba(0, 0, 0, .7), 0 6px 30px rgba(0, 0, 0, .6); }
.hero-wordmark .wm-tld { color: transparent; -webkit-text-stroke: 2px var(--red);
  text-shadow: 0 0 30px rgba(255, 46, 46, .45); }