*{margin:0;box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font:300 12px/1.7 var(--mono);letter-spacing:.08em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--red);color:var(--ink)}

/* screen: noise + scanlines + vignette */
.screen-bg{position:relative;overflow:hidden;background:radial-gradient(ellipse at center,var(--ink-2) 0,var(--ink) 70%)}
.screen-bg::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000055 2px 3px);pointer-events:none;z-index:3}
.screen-bg::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 220px 60px #000;pointer-events:none;z-index:3}
canvas.noise{position:absolute;inset:0;width:100%;height:100%;opacity:.07;image-rendering:pixelated}

.hero{height:100vh;height:100svh;display:grid;place-items:center}
.hero.short{height:62vh;height:62svh}
.hud{position:absolute;inset:32px 40px;z-index:4;display:flex;flex-direction:column;justify-content:space-between;text-transform:uppercase;color:#bdb6a8;pointer-events:none}
.hud>div{display:flex;justify-content:space-between;align-items:center}
.hud a{pointer-events:auto;text-decoration:none;margin-left:28px;opacity:.8;transition:opacity .2s}
.hud a:hover,.hud a[aria-current]{opacity:1;color:var(--bone)}
.hud .home{margin:0}
.rec{color:var(--red)}.rec::before{content:"● ";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.mark{position:relative;z-index:2;font:700 min(8.4vw,132px)/1 var(--display);letter-spacing:.3em;margin-right:-.3em;white-space:nowrap;color:var(--bone)}
.mark .n{display:inline-block}
.mark.glitch{text-shadow:-3px 0 var(--red),3px 0 var(--cyan);transform:translateX(2px) skewX(-4deg)}
.mark.lost .n{opacity:0}
.sub{position:absolute;top:calc(50% + max(5.4vw,34px));left:0;right:0;z-index:4;display:flex;justify-content:center;align-items:center;gap:.25em;color:var(--mute);text-transform:uppercase;letter-spacing:.5em;margin-right:-.5em}
.cursor{display:inline-block;width:.62em;height:1.15em;background:var(--red);margin-left:.15em;animation:blink 1.06s steps(1) infinite}

/* sections */
section{padding:110px 8vw 120px}
h2{font-weight:400;font-size:12px;letter-spacing:.4em;color:var(--mute);margin-bottom:30px;text-transform:uppercase}
.tuner{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
.list{list-style:none;padding:0}
.list button{all:unset;box-sizing:border-box;width:100%;padding:18px 0;border-top:1px solid var(--line);display:flex;gap:18px;align-items:baseline;opacity:.45;cursor:pointer;text-transform:uppercase;transition:opacity .2s}
.list li:last-child button{border-bottom:1px solid var(--line)}
.list button:hover{opacity:.75}.list button[aria-pressed=true]{opacity:1}
.list button:focus-visible{outline:1px solid var(--red);outline-offset:4px}
.list b{font-weight:400;color:var(--mute)}.list button[aria-pressed=true] b{color:var(--red)}
.list span{font:700 15px var(--display);letter-spacing:.14em}
.list small{margin-left:auto;font-size:10px;color:var(--mute);letter-spacing:.2em}
.tv{aspect-ratio:16/9;background:#000;position:relative;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px #ffffff12,0 40px 120px #000}
.tv::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000003a 2px 3px);pointer-events:none;z-index:2}
.tv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.tv .poster{all:unset;position:absolute;inset:0;background:center/cover;cursor:pointer}
.tv .poster:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.tv .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;border-radius:50%;background:#08080Ad9;box-shadow:0 0 0 1px #EDE6D640;z-index:4;pointer-events:none;transition:transform .2s,background .2s}
.tv .play::after{content:"";position:absolute;left:31px;top:24px;border-left:20px solid var(--bone);border-top:14px solid transparent;border-bottom:14px solid transparent}
.tv:hover .play{transform:scale(1.08);background:var(--red)}
.tv .nosig{position:absolute;inset:0;display:grid;place-items:center;z-index:4;text-transform:uppercase;letter-spacing:.4em;text-align:center}
.tv .nosig b{display:block;font:700 clamp(18px,2.4vw,30px) var(--display);letter-spacing:.3em;margin-bottom:10px}
.tv canvas.noise{opacity:.22}

/* about */
.prose{max-width:620px;font-size:14px;line-height:1.9;letter-spacing:.03em}
.prose p+p{margin-top:1.3em}
.prose a{color:var(--bone);text-decoration-color:var(--red);text-underline-offset:4px}
.prose .lead{font:700 clamp(22px,2.6vw,32px)/1.25 var(--display);letter-spacing:.06em}

footer{padding:40px 8vw 48px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;text-transform:uppercase;color:var(--mute);font-size:11px}
footer a{text-decoration:none}footer a:hover{color:var(--bone)}

@media (max-width:760px){
  .hud{inset:20px 16px}.hud a{margin-left:16px}
  .sub{letter-spacing:.35em;margin-right:-.35em;font-size:10px}
  section{padding:80px 16px 90px}
  .tuner{grid-template-columns:1fr;gap:28px}.tuner .list{order:2}
  footer{padding:32px 16px 40px}
}
@media (prefers-reduced-motion:reduce){
  .cursor,.rec::before{animation:none}
  html{scroll-behavior:auto}
}