/* EL STUDIO — base */
/* =========================================================
   EL STUDIO — late night broadcast
   ========================================================= */
:root {
  --ink: #0a0708;
  --ink-2: #141011;
  --ink-3: #1d1719;
  --text: #f3ece2;
  --muted: #a59c96;
  --line: rgba(255,255,255,.08);
  --tungsten: #ffd9a0;
  --maxw: 1320px;
  --paper: #f2e9d6;
  --paper-2: #e3d6b8;
  --paper-ink: #1d1814;
  --tape: rgba(233, 221, 172, .86);

  --red: #ff2a3c;
  --red-deep: #b3001b;
  --pink: #ff4fb4;
  --cyan: #42f3ff;
  --green: #8fff52;
  --amber: #ffb45c;
  --yellow: #ffd400;
  --navy: #000080;
  --prevue: #1a2aa0;

  --f-neon: "Tilt Neon", system-ui, sans-serif;
  --f-script: "Neonderthaw", cursive;
  --f-marker: "Permanent Marker", "Caveat", cursive;
  --f-pen: "Reenie Beanie", "Caveat", cursive;
  --f-crt: "VT323", ui-monospace, monospace;
  --f-poster: "Anton", Impact, sans-serif;
  --f-mono: "Rubik Mono One", system-ui, sans-serif;
  --f-type: "Courier Prime", "Courier New", monospace;
  --f-98: Tahoma, Verdana, "Segoe UI", sans-serif;

  --osd-h: 54px;
  --gutter: clamp(16px, 4vw, 56px);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--osd-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 17px/1.55 var(--f-type);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.is-booting { overflow: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--pink); color: #000; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; background: var(--yellow); color: #000; font: 400 13px/1 var(--f-mono); text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
/* ---------- shared bits ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: var(--noise); opacity: .075;
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.flash { position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: 0; background: var(--noise), #fff; mix-blend-mode: overlay; }
.flash.is-on { animation: flash .28s steps(3) 1; }
@keyframes flash { 0% { opacity: .55; } 60% { opacity: .25; } 100% { opacity: 0; } }
.tape {
  position: absolute; width: 112px; height: 30px; background: var(--tape);
  clip-path: polygon(3% 0, 97% 4%, 100% 22%, 96% 45%, 100% 70%, 97% 100%, 2% 96%, 0 74%, 4% 50%, 0 26%);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  z-index: 3;
}
.tape::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .35; mix-blend-mode: multiply; }
.tape--tl { top: -12px; left: -26px; transform: rotate(-32deg); }
.tape--top { top: -15px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.tape--tr { top: -10px; right: -24px; transform: rotate(28deg); }
.tilt-l { transform: rotate(-2.2deg); }
.tilt-r { transform: rotate(2.6deg); }
.hand { font: 400 clamp(22px, 2.2vw, 28px)/1.15 var(--f-pen); color: #d9d2e6; margin: 0; max-width: 34ch; }
.hand--light { color: #eaf7ff; }
.hand-red { font-family: var(--f-marker); color: var(--red); letter-spacing: .02em; }
.type { font-family: var(--f-type); }
.nw { white-space: nowrap; }
.strike { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; opacity: .8; }
.section-title {
  font: 400 clamp(52px, 8vw, 112px)/.86 var(--f-poster); text-transform: uppercase; margin: 0 0 12px; letter-spacing: .01em;
}
.chunky {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 18px 12px; border: 2px solid #000; border-radius: 6px;
  font: 400 12px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  background: linear-gradient(#efe8da, #cfc5b1); color: #141014;
  box-shadow: 0 5px 0 #000, inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(0,0,0,.18);
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.chunky:hover { filter: brightness(1.06); }
.chunky:active { transform: translateY(4px); box-shadow: 0 1px 0 #000, inset 0 2px 0 rgba(255,255,255,.6); }
.chunky--red { background: linear-gradient(#ff5560, #d1001b); color: #fff; text-shadow: 0 1px 0 #6b000c; }
.chunky--yellow { background: linear-gradient(#ffe45c, #f0b800); }
/* neon */
.neon-svg { stroke: #ffe9e9; stroke-width: 3.2; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--red)) drop-shadow(0 0 16px var(--red)) drop-shadow(0 0 34px var(--red-deep)); }
@keyframes flick {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .18; }
}
@keyframes buzz { 0%, 100% { opacity: 1; } 50% { opacity: .93; } }
/* sticker cutouts (white border baked into the image) */
.sticker { margin: 0; position: relative; }
.sticker img { width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)) drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
[data-drop] { opacity: 0; transform: translateY(-24px) scale(1.08) rotate(var(--r, 0deg)); transition: opacity .5s ease, transform .7s cubic-bezier(.2, 1.6, .4, 1); }
[data-drop].is-in { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r, 0deg)); }
.scribble { position: absolute; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scribble path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.1s ease .3s; }
.is-in .scribble path, .scribble.is-in path { stroke-dashoffset: 0; }
/* =========================================================
   BOOT: the intro is just the EL STUDIO ident (el-intro.mp4) on black. Nothing sits on it except two quiet
   controls that step back while it plays: "skip ›", and "tap for sound" when the browser made it start muted
   (a tap anywhere turns the sound on). The end of the video, skip or Esc fade it out and the page shows through.
   Repeat visits, deep links, reduced motion and ?noboot never show it (html.no-boot, set in <head>).
   ========================================================= */
.boot {
  position: fixed; inset: 0; z-index: 200; overflow: hidden; background: #000;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.boot:focus { outline: none; }
.no-boot .boot { display: none; }
.boot__video {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; max-width: none;
  transform: translate(-50%, -50%); object-fit: contain; background: #000;
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.boot.is-playing .boot__video { opacity: 1; }
/* portrait screens: the ident is wide (1.85:1) but everything in it (logo, credit) sits in the middle third,
   so let it run past the sides instead of shrinking to a thin strip, and feather its top and bottom into the black */
@media (orientation: portrait) {
  .boot__video {
    width: 175vw; height: auto; aspect-ratio: 960 / 520; object-fit: cover;
    -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
  }
}
.boot__btn {
  position: absolute; z-index: 2; bottom: max(14px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 11px 16px 9px; border: 0; border-radius: 22px;
  background: rgba(10, 8, 12, .4); color: rgba(236, 229, 220, .78);
  font: 400 20px/1 var(--f-crt); letter-spacing: .1em; text-transform: uppercase;
  transition: opacity .6s ease, color .2s ease, background .2s ease;
}
.boot__btn:hover { color: #fff; background: rgba(10, 8, 12, .6); }
.boot__btn:focus { outline: none; }
.boot__btn:focus-visible { outline: 1px solid rgba(255, 255, 255, .55); outline-offset: 3px; }
.boot__skip { right: max(14px, env(safe-area-inset-right)); }
.boot__sound { left: max(14px, env(safe-area-inset-left)); }
/* while it plays untouched, the controls step back (they come back on any touch, mouse move or key) */
.boot.is-quiet .boot__btn { opacity: .3; }
.boot.is-quiet .boot__btn:hover, .boot.is-quiet .boot__btn:focus-visible { opacity: 1; }
.boot.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 1800px) { .boot__btn { font-size: 26px; padding: 13px 20px 11px; border-radius: 26px; } }
html { scrollbar-color: #ff2b3d #0b0710; }
/* =========================================================
   OSD BAR
   ========================================================= */
.osd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: var(--osd-h);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter);
  background: linear-gradient(rgba(10,7,8,.96), rgba(10,7,8,.9)); border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  font-family: var(--f-crt);
}
.osd__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.osd__logo { width: 22px; height: 26px; fill: var(--red); filter: drop-shadow(0 0 6px rgba(255,42,60,.55)); }
.osd__word { font: 400 20px/1 var(--f-crt); letter-spacing: .08em; color: var(--text); }
.osd__nav { display: flex; gap: 4px; margin-left: auto; }
.osd__nav a {
  position: relative; padding: 8px 10px 6px; text-decoration: none; font-size: 21px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: #b4aaa3; transition: color .2s;
}
.osd__nav a::before { content: attr(data-ch); font-size: 14px; color: #6f6661; margin-right: 6px; vertical-align: 2px; transition: color .2s; }
.osd__nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--red); box-shadow: 0 0 10px var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.osd__nav a:hover { color: var(--text); }
.osd__nav a.is-on { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.35); }
.osd__nav a.is-on::before { color: var(--red); }
.osd__nav a.is-on::after { transform: scaleX(1); }
.osd__right { display: flex; align-items: center; gap: 10px; flex: none; }
.osd__btn { min-height: 34px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.14); color: #cfc6bf; font: 400 18px/1 var(--f-crt); padding: 7px 11px 5px; border-radius: 4px; white-space: nowrap; transition: border-color .2s, background .2s; }
.osd__btn:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
.osd__btn b { font-weight: 400; color: #8a817b; }
.osd__btn[aria-pressed="true"] b { color: var(--red); text-shadow: 0 0 8px rgba(255,42,60,.6); }
.osd__remote-btn { display: none; }
.remote { position: fixed; z-index: 120; right: 12px; top: calc(var(--osd-h) + 8px); }
.remote__body {
  width: 230px; padding: 16px 16px 20px; border-radius: 40px 40px 56px 56px;
  background: linear-gradient(160deg, #3b3640, #18151b); box-shadow: 0 30px 60px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.15);
  animation: remoteIn .3s cubic-bezier(.2,1.4,.4,1);
}
@keyframes remoteIn { from { transform: translateY(-20px) rotate(-6deg); opacity: 0; } }
.remote__top { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
.remote__ir { width: 26px; height: 10px; border-radius: 6px; background: #3b0a12; box-shadow: inset 0 0 4px #000; }
.remote__close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: linear-gradient(#ff5966, #b30015); color: #fff; font-size: 18px; box-shadow: 0 3px 0 #3d0007; }
.remote__brand { text-align: center; font: 400 11px/1 var(--f-mono); color: #9e95a8; margin: 10px 0 12px; letter-spacing: .1em; }
.remote__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.remote__keys a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #5b5562, #29252d); box-shadow: 0 3px 0 #0e0c10; text-decoration: none;
  font: 400 14px/1 var(--f-crt); color: #c9c0d3; text-align: center;
}
.remote__keys a b { font: 400 22px/1 var(--f-mono); color: #fff; }
.remote__keys a:active { transform: translateY(2px); box-shadow: 0 1px 0 #0e0c10; }
/* =========================================================
   01 ON AIR
   ========================================================= */
.scrawl { pointer-events: none; position: absolute; z-index: 6; margin: 0; font: 400 clamp(22px, 2.2vw, 30px)/1 var(--f-marker); color: #fff; transform: rotate(-6deg); }
.scrawl span { font-family: var(--f-pen); font-size: 1.05em; color: #ffd6dc; }
@keyframes tick { to { transform: translateX(-50%); } }
/* =========================================================
   02 FILMS
   ========================================================= */
/* TV guide (Prevue) */
/* =========================================================
   PLAYER
   ========================================================= */
.player { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(3,2,5,.9); }
.player::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .12; pointer-events: none; }
.player__inner { position: relative; width: min(1040px, 100%, calc((100svh - 230px) * 1.62)); animation: playerIn .45s cubic-bezier(.2,1.2,.4,1); }
#playerScreen::before { content: ""; position: absolute; inset: 0; z-index: 4; background: #fff; pointer-events: none; animation: warm .7s ease-out forwards .1s; transform-origin: center; }
@keyframes warm { 0% { opacity: 1; transform: scale(1, .004); } 40% { opacity: 1; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1, 1); } }
@keyframes playerIn { from { transform: translateY(30px) scale(.94); opacity: 0; } }
.player__note { margin: 8px auto 0; max-width: 70ch; text-align: center; font-size: 15px; color: #cfc5d6; }
.player__title { margin: 16px 0 0; text-align: center; font: 400 26px/1.1 var(--f-crt); color: #9dff9d; text-shadow: 0 0 8px rgba(120,255,120,.6); }
/* =========================================================
   03 SLAYER
   ========================================================= */
/* =========================================================
   04 DARKROOM
   ========================================================= */
/* =========================================================
   05 STUFF
   ========================================================= */
/* =========================================================
   06 COMING NEVER
   ========================================================= */
/* =========================================================
   07 ARCHIVE + Win98 chrome
   ========================================================= */
/* =========================================================
   08 DESKTOP
   ========================================================= */
/* =========================================================
   FOOTER
   ========================================================= */
.foot { position: relative; padding: clamp(80px, 9vw, 130px) var(--gutter) 40px; background: linear-gradient(#0a0708, #050304 60%); border-top: 1px solid var(--line); text-align: center; overflow: clip; --accent: var(--red); }
.foot__glow { position: absolute; inset: 0 0 auto; height: 70%; pointer-events: none; background: radial-gradient(50% 60% at 28% 0%, rgba(255,42,60,.16), transparent 70%); }
.foot__inner { position: relative; max-width: var(--maxw); margin: 0 auto clamp(70px, 8vw, 110px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 100px); align-items: center; text-align: left; }
.foot__contact .sec-head__bar { margin-bottom: 30px; }
.foot__title { margin: 0 0 30px; font: 400 clamp(44px, 6vw, 88px)/.92 var(--f-poster); text-transform: uppercase; color: var(--text); letter-spacing: .005em; }
.foot__title span { display: block; color: var(--red); }
.foot__mail { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; padding: 16px 22px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; text-decoration: none; font: 400 clamp(16px, 4.6vw, 30px)/1.1 var(--f-type); font-weight: 700; color: var(--text); background: rgba(255,255,255,.03); transition: border-color .2s, background .2s, box-shadow .2s; }
.foot__mail span { overflow-wrap: anywhere; }
.foot__mail i { font-style: normal; color: var(--red); transition: transform .2s; }
.foot__mail:hover { border-color: var(--red); background: rgba(255,42,60,.08); box-shadow: 0 0 30px rgba(255,42,60,.18); }
.foot__mail:hover i { transform: translate(3px, -3px); }
.foot__links { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.foot__links a { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 12px 16px 10px; border-radius: 4px; text-decoration: none; background: rgba(255,255,255,.045); border: 1px solid var(--line); transition: background .2s, border-color .2s; }
.foot__links a:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.foot__links b { font: 400 20px/1 var(--f-crt); letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.foot__links span { font-size: 15px; color: var(--muted); }
.foot__bio { margin: 26px 0 0; max-width: 52ch; font-size: 16px; color: var(--muted); }

/* tape deck playing M E M O R I E S */
.deck { position: relative; justify-self: center; width: min(100%, 440px); padding-top: 40px; container-type: inline-size; }
.foot__slayer { position: absolute; z-index: 3; right: -70px; top: -150px; width: clamp(150px, 15vw, 230px); --r: 6deg; pointer-events: none; }
.deck__body { position: relative; padding: 20px 20px 18px; border-radius: 14px; background: linear-gradient(#2e2a2b, #1a1718 60%, #141112); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px #050404; }
.deck__body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--noise); opacity: .14; mix-blend-mode: overlay; pointer-events: none; }
.deck__well { position: relative; padding: 14px; border-radius: 8px; background: linear-gradient(#0c0a0b, #151213); box-shadow: inset 0 3px 10px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.06); }
.deck__well::after { content: ""; position: absolute; inset: 6px; border-radius: 5px; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.12), transparent 28%, transparent 70%, rgba(255,255,255,.05) 82%, transparent 90%); }
.cassette { position: relative; aspect-ratio: 100 / 63; border-radius: 6px; padding: 7% 7% 0; background: linear-gradient(#3a3536, #262223); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.4); }
.cassette__label { position: relative; height: 62%; border-radius: 3px; padding: 6px 10px; background: linear-gradient(#f3ead6, #e6dbc2); color: #2a201a; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.cassette__label::before { content: ""; position: absolute; left: 0; right: 0; bottom: 14%; height: 16%; background: linear-gradient(90deg, #b3001b, #ff3d3d 60%, #ff7a3d); opacity: .92; }
.cassette__label::after { content: ""; position: absolute; left: 34px; right: 10px; top: 62%; height: 1px; background: rgba(42,32,26,.25); box-shadow: 0 -9px 0 rgba(42,32,26,.18); }
.cassette__side { grid-row: 1 / 3; font: 400 5.6cqw/1 var(--f-poster); color: #c4001a; }
.cassette__title { position: relative; font: 400 4.8cqw/1 var(--f-marker); letter-spacing: .04em; white-space: nowrap; }
.cassette__sub { position: relative; font: 400 3.9cqw/1 var(--f-pen); color: #4a3d33; margin-top: .3em; grid-column: 2; white-space: nowrap; }
.cassette__window { position: absolute; left: 24%; right: 24%; bottom: 13%; height: 21%; border-radius: 30px; background: rgba(20,16,15,.92); box-shadow: inset 0 2px 4px #000, 0 0 0 2px #1a1617; display: flex; justify-content: space-between; align-items: center; padding: 0 6%; }
.reel { width: 26%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(#e9e2d4 0 10deg, #2b2526 10deg 60deg); box-shadow: 0 0 0 4px #4a2f20, 0 0 0 5px #1a1415; position: relative; }
.reel::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: #e9e2d4; box-shadow: inset 0 0 0 2px #2b2526; }
.deck.is-playing .reel { animation: reel 1.6s linear infinite; }
@keyframes reel { to { transform: rotate(-360deg); } }
.deck__row { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.deck__key { width: 52px; height: 44px; border: 0; border-radius: 4px; font: 400 18px/1 var(--f-98); color: #1a1617; background: linear-gradient(#e9e4dc, #b9b2a6); box-shadow: 0 4px 0 #3a3436, inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.15); transition: transform .06s, box-shadow .06s; }
.deck__key:active, .deck.is-playing .deck__key--play { transform: translateY(3px); box-shadow: 0 1px 0 #3a3436, inset 0 1px 0 #fff; }
.deck.is-playing .deck__key--play { color: var(--red-deep); }
.deck__lcd { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 4px; background: #0b1410; box-shadow: inset 0 2px 6px #000; font: 400 22px/1 var(--f-crt); color: #ffb45c; text-shadow: 0 0 8px rgba(255,180,92,.55); }
.deck__meter { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,180,92,.15); overflow: hidden; }
.deck__meter i { display: block; height: 100%; width: 0; background: #ffb45c; box-shadow: 0 0 8px #ffb45c; }
.deck__note { margin: 14px 2px 0; font: 400 22px/1.1 var(--f-pen); color: #d6ccc4; }

.foot__replay { min-height: 44px; background: none; border: 0; font: 400 22px/1 var(--f-crt); color: #d6ccc4; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.3); }
.foot__replay:hover { color: #fff; text-decoration-color: var(--red); }
.foot__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 40px; max-width: 980px; }
.b88 { width: 88px; height: 31px; display: grid; place-items: center; text-decoration: none; font: 400 8px/1 var(--f-mono); line-height: 1; letter-spacing: .02em; text-align: center; border: 1px solid #000; box-shadow: inset 1px 1px rgba(255,255,255,.45), inset -1px -1px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.5); overflow: hidden; image-rendering: pixelated; transition: transform .15s; }
a.b88:hover { transform: translateY(-2px); }
.b88 span { font: 400 14px/.9 var(--f-crt); letter-spacing: 0; }
.b88 svg { width: 16px; height: 19px; fill: currentColor; display: inline-block; vertical-align: middle; margin-right: 4px; }
.construction { overflow: hidden; margin: 0 calc(var(--gutter) * -1) 34px; background: repeating-linear-gradient(-45deg, #e8c200 0 18px, #141112 18px 36px); padding: 8px 0; box-shadow: inset 0 2px 0 rgba(255,255,255,.15), inset 0 -2px 0 rgba(0,0,0,.4); }
.construction span { display: block; width: max-content; padding: 4px 0 2px; background: #0a0708; color: #ffd84a; font: 400 22px/1 var(--f-crt); letter-spacing: .1em; animation: tick 26s linear infinite reverse; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 40px; }
.foot__counter { margin: 0; font: 400 24px/1 var(--f-crt); color: #d6ccc4; }
.odometer { display: inline-flex; gap: 2px; margin: 0 6px; vertical-align: -4px; }
.odometer i { font-style: normal; display: inline-block; width: 22px; padding: 4px 0 2px; background: linear-gradient(#262122, #0a0708 50%, #262122); color: #ffb45c; border: 1px solid #3a3335; border-radius: 2px; font-size: 24px; text-shadow: 0 0 6px rgba(255,180,92,.5); }
.foot__rewind { min-height: 44px; display: inline-flex; align-items: center; font: 400 24px/1 var(--f-crt); color: var(--text); text-decoration: none; padding: 8px 16px 6px; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; transition: background .2s, color .2s, border-color .2s; }
.foot__rewind:hover { background: var(--red); border-color: var(--red); color: #fff; }
.foot__fine { margin: 30px 0 0; font-size: 14px; color: #8a817b; }
/* =========================================================
   LOUPE
   ========================================================= */
.loupe { position: fixed; inset: 0; z-index: 160; display: grid; grid-template-rows: 1fr auto; background: #050304; }
.loupe::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 40%, rgba(255,20,20,.08), transparent 70%); pointer-events: none; }
.loupe__stage { position: relative; display: grid; place-items: center; padding: 60px 70px 10px; min-height: 0; }
.loupe__stage img, .loupe__stage video { max-width: 100%; max-height: calc(100svh - 190px); width: auto; height: auto; box-shadow: 0 0 0 10px #f5efe3, 0 30px 80px rgba(0,0,0,.8); background: #111; animation: loupeIn .35s ease; }
@keyframes loupeIn { from { opacity: 0; transform: scale(.97); } }
.loupe__meta { position: relative; padding: 14px var(--gutter) 22px; max-width: 980px; margin: 0 auto; width: 100%; text-align: center; }
.loupe__where { text-wrap: balance; margin: 0 0 4px; font: 400 15px/1.2 var(--f-mono); color: #ff8c7a; letter-spacing: .06em; text-transform: uppercase; }
.loupe__cap { margin: 0 auto 6px; max-width: 70ch; font-size: 15px; color: #e9e1d6; max-height: 4.6em; overflow: auto; white-space: pre-line; }
.loupe__foot { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 1.1em; font: 400 20px/1 var(--f-crt); color: #8a8094; }
.loupe__foot a { color: #ffd88a; white-space: nowrap; }
.loupe__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 80px; border: 0; background: rgba(255,255,255,.06); color: #fff; font: 400 54px/1 var(--f-crt); border-radius: 6px; }
.loupe__btn:hover { background: rgba(255,255,255,.14); }
.loupe__btn--prev { left: 10px; }
.loupe__btn--next { right: 10px; }
.loupe__close { position: absolute; top: 12px; right: 14px; width: 46px; height: 46px; border: 2px solid #fff; border-radius: 50%; background: transparent; color: #fff; font: 400 30px/1 var(--f-crt); }
.loupe__close:hover { background: #fff; color: #000; }
.loupe__dots { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.loupe__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.3); }
.loupe__dots button.is-on { background: #fff; }
@media (pointer: fine) {
  body { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g fill='none' stroke='%23ff2b3d' stroke-width='2'><circle cx='16' cy='16' r='7'/><path d='M16 1v8M16 23v8M1 16h8M23 16h8'/></g><circle cx='16' cy='16' r='1.5' fill='%23ff2b3d'/></svg>") 16 16, crosshair; }
  a, button, [role="button"], label { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g fill='none' stroke='%2342f3ff' stroke-width='2'><circle cx='16' cy='16' r='9'/><path d='M16 0v10M16 22v10M0 16h10M22 16h10'/></g><circle cx='16' cy='16' r='2.5' fill='%2342f3ff'/></svg>") 16 16, pointer; }
}
@media (max-width: 1180px) {
  .osd__nav a { font-size: 19px; padding: 8px 7px 6px; }
  .osd__nav a::before { display: none; }
  .osd__nav a::after { left: 7px; right: 7px; }
  .osd__word { display: none; }
}
@media (max-width: 980px) {
  :root { --osd-h: 52px; }
  .osd__nav { display: none; }
  .osd__right { margin-left: auto; }
  .osd__remote-btn { display: inline-block; }
  .foot__inner { grid-template-columns: 1fr; }
  .deck { justify-self: start; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .foot__slayer { right: -8px; top: -14px; width: 110px; }
  .deck { padding-top: 80px; }
  .foot__links a { flex: 1 1 100%; justify-content: space-between; }
  .loupe__stage { padding: 56px 12px 6px; }                 /* room for the print's 10px frame */
  .loupe__where .loupe__sep { display: none; }              /* place and date on their own lines */
  .loupe__where .nw { display: block; }
  .loupe__meta { padding: 12px 64px 22px; }
  .loupe__btn { top: auto; bottom: 18px; transform: none; width: 46px; height: 46px; font-size: 40px; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-drop] { opacity: 1; transform: rotate(var(--r, 0deg)); }
  .scribble path { stroke-dashoffset: 0; }
}

/* section kicker: <p class="kicker" data-n="04">Darkroom</p> — small label above every section title */
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 400 12px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.kicker::before { content: attr(data-n); color: var(--accent, var(--red)); }
.kicker::after { content: ""; flex: 0 0 48px; height: 1px; background: currentColor; opacity: .45; }

/* =========================================================
   UNIFORM SYSTEM (round 3) — every section uses these, nothing else
   ========================================================= */
:root { --line-2: rgba(255,255,255,.16); --sec-pad: clamp(96px, 13vh, 150px); }
/* section header: bar (number · name ……… meta) → title (+ optional controls on the right) → one deck line */
.sec-head { max-width: var(--maxw); margin: 0 auto clamp(36px, 5vh, 56px); }
.sec-head__bar { display: flex; align-items: baseline; gap: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font: 400 20px/1 var(--f-crt); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sec-head__bar b { font-weight: 400; color: var(--accent, var(--red)); }
.sec-head__bar span:last-child { margin-left: auto; text-align: right; }
.sec-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-top: clamp(18px, 3vh, 30px); }
.sec-head__title { margin: 0; font: 400 clamp(54px, 7.2vw, 108px)/.9 var(--f-poster); text-transform: uppercase; letter-spacing: .005em; color: var(--text); }
.sec-head__deck { margin: 14px 0 0; max-width: 56ch; font: 400 17px/1.5 var(--f-type); color: var(--muted); }
/* tabs (filters / views) */
.tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); }
.tabs button { min-height: 40px; padding: 8px 14px 6px; border: 0; border-left: 1px solid var(--line-2); background: transparent; font: 400 19px/1 var(--f-crt); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); transition: background .15s, color .15s; }
.tabs button:first-child { border-left: 0; }
.tabs button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.tabs button.is-on, .tabs button[aria-pressed="true"], .tabs button[aria-selected="true"] { background: var(--text); color: var(--ink); }
/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 2px; background: transparent; color: var(--text); font: 400 21px/1 var(--f-crt); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { border-color: var(--text); background: rgba(255,255,255,.06); }
.btn--solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn--solid:hover { background: #ff4757; border-color: #ff4757; }
.sec { position: relative; padding: var(--sec-pad) var(--gutter); }
@media (max-width: 640px) {
  .sec-head__bar { font-size: 17px; }
  .sec-head__bar span:last-child { display: none; }
  .sec-head__title { font-size: clamp(46px, 14vw, 64px); }
}

/* large screens: the whole site grows instead of sitting small in the middle */
@media (min-width: 1800px) {
  :root { --maxw: 1600px; --gutter: 64px; }
  .sec-head__title { font-size: clamp(108px, 6.6vw, 150px); }
  .sec-head__bar { font-size: 23px; }
  .sec-head__deck { font-size: 19px; }
  .btn { font-size: 23px; min-height: 50px; padding: 12px 22px 10px; }
  .tabs button { font-size: 21px; min-height: 46px; padding: 10px 18px 8px; }
}
@media (min-width: 2300px) {
  :root { --maxw: 2000px; --gutter: 80px; --osd-h: 64px; }
  body { font-size: 20px; }
  .sec-head__title { font-size: clamp(150px, 6.4vw, 190px); }
  .sec-head__bar { font-size: 27px; }
  .sec-head__deck { font-size: 22px; }
  .btn { font-size: 27px; min-height: 58px; padding: 14px 26px 12px; }
  .tabs button { font-size: 24px; min-height: 52px; padding: 12px 20px 10px; }
  .osd__nav a { font-size: 25px; }
}

/* round 4: footer + player scaling */
@media (max-width: 1220px) { .foot__slayer { display: none; } .deck { padding-top: 0; } }   /* below ~1220 it would hang off the screen */
@media (min-width: 1800px) {
  .foot__title { font-size: clamp(88px, 5.6vw, 130px); }
  .deck { width: min(100%, 560px); }
  .foot__links b { font-size: 23px; } .foot__links span, .foot__bio { font-size: 18px; }
  .player__inner { width: min(1500px, 100%, calc((100svh - 260px) * 1.62)); }
  .player__title { font-size: 32px; } .player__note { font-size: 18px; }
}
@media (min-width: 1800px) { .foot__contact .sec-head__bar { margin-bottom: 52px; } }

/* =========================================================
   round 5: every screen — overlays, header, footer
   ========================================================= */
.player { overflow-y: auto; overscroll-behavior: contain; }
.loupe { overscroll-behavior: contain; }
@media (pointer: coarse) {
  .osd__btn { min-height: 40px; }
  .loupe__dots button { position: relative; }
  .loupe__dots button::after { content: ""; position: absolute; inset: -8px -4px; }
  .vcr--big .vcr__eject { min-height: 40px; }
}
/* phone landscape / "widescreen phone": short screens */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --osd-h: 46px; }
  .osd__btn { padding-top: 6px; padding-bottom: 4px; }
  /* remote menu: a short, wide remote so every key fits under the header */
  .remote { top: calc(var(--osd-h) + 6px); }
  .remote__body { width: auto; max-height: calc(100svh - var(--osd-h) - 14px); overflow-y: auto; padding: 10px 14px 14px; border-radius: 26px; }
  .remote__brand { margin: 2px 0 8px; }
  .remote__keys { grid-template-columns: repeat(5, 54px); gap: 8px; }
  .remote__keys a { font-size: 12px; }
  .remote__keys a b { font-size: 18px; }
  /* player: TV (+ VCR) sized from the height, title + note in a column beside it */
  .player { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .player__inner {
    --tvw: min(calc((100svh - 90px) * 16 / 9 + 70px), 72vw);
    width: 100%; max-width: calc(var(--tvw) + 360px);
    display: grid; grid-template-columns: var(--tvw) minmax(0, 1fr); align-items: center; gap: 0 18px;
  }
  .player__inner > .tv { grid-row: 1 / 3; }
  .player .tv--big { --pad: 10px; --panel: 40px; }
  .player .tv--big .tv__body { border-radius: 16px; }
  .player .vcr--big { height: 46px; margin: 8px 5% 0; padding: 0 10px; gap: 10px; }
  .player .vcr--big .vcr__clock { font-size: 18px; }
  .player__title { margin: 0; align-self: end; text-align: left; font-size: 22px; }
  .player__note { margin: 8px 0 0; align-self: start; text-align: left; font-size: 13px; line-height: 1.45; max-height: calc(100svh - 120px); overflow-y: auto; }
  /* loupe: more photo, slimmer chrome; arrows stay outside the picture */
  .loupe__stage { padding: 36px 70px 4px; }
  .loupe__stage img, .loupe__stage video { max-height: calc(100svh - 136px); box-shadow: 0 0 0 7px #f5efe3, 0 20px 50px rgba(0,0,0,.8); }
  .loupe__meta { padding: 8px 76px 10px; }
  .loupe__where { font-size: 13px; }
  .loupe__cap { font-size: 14px; max-height: 2.9em; margin-bottom: 4px; }
  .loupe__foot { font-size: 18px; }
  .loupe__dots { top: 12px; }
  .loupe__close { top: 8px; right: 10px; width: 44px; height: 44px; }
  .loupe__btn { top: calc(50% - 40px); width: 50px; height: 72px; }
  /* footer: tighter vertical rhythm */
  .foot { padding-top: 64px; }
  .foot__inner { margin-bottom: 56px; }
  .foot__title { font-size: clamp(40px, 12svh, 64px); margin-bottom: 22px; }
}
/* tablets: player + loupe use the space */
@media (min-width: 641px) and (max-width: 1366px) and (min-height: 700px) {
  .loupe__stage img, .loupe__stage video { max-height: calc(100svh - 210px); }
}
/* ultrawide / very large: keep overlays big, chrome proportional */
@media (min-width: 1800px) {
  .loupe__where { font-size: 18px; }
  .loupe__cap { font-size: 18px; }
  .loupe__foot { font-size: 24px; }
  .loupe__btn { width: 64px; height: 96px; font-size: 64px; }
  .loupe__close { width: 54px; height: 54px; font-size: 34px; }
}
@media (min-width: 2300px) {
  .osd__word { font-size: 24px; }
  .osd__btn { font-size: 22px; min-height: 42px; padding: 9px 14px 7px; }
  .osd__logo { width: 26px; height: 30px; }
  .player__inner { width: min(2000px, 100%, calc((100svh - 300px) * 1.62)); }
  .player__title { font-size: 40px; } .player__note { font-size: 22px; max-width: 80ch; }
  .foot__fine { font-size: 17px; }
  .foot__counter, .foot__rewind, .foot__replay { font-size: 30px; }
  .odometer i { width: 28px; font-size: 30px; }
}
@media (min-width: 2300px) {
  .player .vcr--big { height: 64px; }
  .player .vcr--big .vcr__eject { font-size: 20px; padding: 11px 18px 9px; }
  .player .vcr--big .vcr__clock { font-size: 28px; }
}
/* the player's "watch on YouTube" link carries an inline 20px size (core.js); let it grow with the title on huge screens */
@media (min-width: 2300px) { .player__title a { font-size: .62em !important; } }