@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Oswald:wght@500;600;700&family=Permanent+Marker&family=Rock+Salt&family=Sedgwick+Ave+Display&display=swap');

:root { --black:#050509; --ink:#0b0b11; --white:#f7f4ed; --pink:#ff007f; --cyan:#00e5ff; --acid:#dfff00; --purple:#8c45ff; --green:#19e675; --red:#ff1744; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--white); font-family:Arial, sans-serif; overflow-x:hidden; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; z-index:90; background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0,rgba(255,255,255,.022) 1px,transparent 1px,transparent 4px); mix-blend-mode:screen; }
.vhs-noise { position:fixed; inset:0; z-index:89; pointer-events:none; opacity:.08; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:5px 5px; animation:static .18s steps(2) infinite; }
@keyframes static { 0%{transform:translate(0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(1px,-2px)} 75%{transform:translate(2px,2px)} }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }
.site-header { min-height:76px; display:flex; align-items:center; gap:36px; padding:12px clamp(20px,5vw,76px); border-bottom:3px solid var(--cyan); background:#08080dd9; backdrop-filter:blur(12px); position:relative; z-index:10; box-shadow:0 4px 0 var(--pink); }
.wordmark { font:400 29px/.88 Sedgwick Ave Display,Permanent Marker,cursive; text-transform:uppercase; margin-right:auto; transform:rotate(-3deg) skewX(-7deg); color:var(--white); -webkit-text-stroke:1px #050509; text-shadow:2px 2px 0 var(--pink),4px 4px 0 var(--cyan),0 0 12px #ff007f99; letter-spacing:-.03em; }
.wordmark span { color:var(--acid); font:400 .55em/1 Rock Salt,Permanent Marker,cursive; display:block; margin-left:9px; -webkit-text-stroke:0; text-shadow:2px 2px 0 var(--pink); }
.site-header nav { display:flex; gap:26px; font:500 12px DM Mono, monospace; text-transform:uppercase; }
.site-header nav a:hover, footer a:hover { color:var(--acid); text-shadow:0 0 12px var(--acid); }
.button { display:inline-flex; align-items:center; gap:22px; background:var(--pink); color:#fff; padding:16px 21px; font:500 14px DM Mono, monospace; text-transform:uppercase; border:3px solid var(--white); box-shadow:6px 6px 0 var(--cyan); transition:.15s; transform:rotate(-1deg); }
.button:hover { transform:translate(3px,3px) rotate(-1deg); box-shadow:3px 3px 0 var(--cyan); }
.button-small { padding:11px 14px; font-size:11px; box-shadow:4px 4px 0 var(--acid); }
.hero { min-height:760px; padding:78px clamp(20px,6vw,100px) 0; position:relative; overflow:hidden; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:6vw; background:radial-gradient(circle at 75% 35%,#191260 0,transparent 26%),linear-gradient(135deg,var(--black) 0,#0d0615 55%,#001b20 100%); }
.hero:before,.hero:after { content:""; position:absolute; height:4px; width:80%; right:-20%; background:var(--pink); box-shadow:0 0 14px var(--pink),0 65px 0 var(--cyan),0 65px 14px var(--cyan); transform:rotate(-32deg); top:16%; }
.hero:after { top:67%; right:33%; width:40%; }
.hero-copy-block,.art-stack { position:relative; z-index:2; }
.eyebrow,.kicker,.tape-number { font:500 11px DM Mono, monospace; text-transform:uppercase; letter-spacing:.09em; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--cyan); }
.eyebrow span { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); animation:blink 1.2s steps(1) infinite; }
@keyframes blink { 50%{opacity:.2} }
h1 { margin:28px 0 38px; max-width:820px; text-transform:uppercase; isolation:isolate; }
h1 > span { position:relative; display:block; width:max-content; max-width:100%; font:400 clamp(82px,11vw,168px)/.64 Sedgwick Ave Display,Permanent Marker,cursive; letter-spacing:-.075em; transform:rotate(-5deg) skewX(-8deg); -webkit-text-stroke:clamp(2px,.28vw,5px) #050509; paint-order:stroke fill; filter:drop-shadow(0 0 1px currentColor); }
h1 > span:before { content:""; position:absolute; z-index:-1; left:-2%; right:-6%; bottom:8%; height:20%; background:currentColor; opacity:.35; transform:rotate(-2deg) skewX(-18deg); filter:blur(1px); }
h1 .hot { color:var(--pink); text-shadow:4px 5px 0 var(--cyan),9px 10px 0 #050509,12px 13px 0 var(--acid); }
h1 .acid { color:var(--acid); transform:translateX(8%) rotate(2deg) skewX(-10deg); text-shadow:4px 5px 0 var(--purple),9px 10px 0 #050509,12px 13px 0 var(--pink); }
h1 .white { color:var(--white); transform:translateX(2%) rotate(-3deg) skewX(-6deg); text-shadow:4px 5px 0 var(--pink),9px 10px 0 #050509,12px 13px 0 var(--cyan); }
h1 .hot:after,h1 .acid:after,h1 .white:after { content:""; position:absolute; width:7px; height:clamp(16px,2.8vw,42px); bottom:calc(-1 * clamp(10px,2vw,28px)); left:18%; border-radius:0 0 8px 8px; background:currentColor; box-shadow:clamp(54px,8vw,120px) 8px 0 -1px currentColor,clamp(150px,20vw,270px) -3px 0 1px currentColor; }
.hero-copy { max-width:610px; font:20px/1.55 Arial,sans-serif; }
.hero-actions { display:flex; align-items:center; gap:34px; margin-top:32px; }
.text-link { font:500 12px DM Mono,monospace; text-transform:uppercase; border-bottom:2px solid var(--cyan); padding-bottom:5px; }
.art-stack { max-width:560px; justify-self:center; filter:drop-shadow(14px 14px 0 var(--pink)); transform:rotate(2deg); }
.art-stack img { display:block; width:100%; height:auto; border:5px solid var(--white); }
.live-sticker { position:absolute; z-index:3; top:-18px; right:-18px; background:var(--acid); color:#000; padding:10px 13px; border:3px solid #000; font:700 13px DM Mono,monospace; transform:rotate(7deg); }
.live-sticker i { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); margin-right:7px; }
.episode-tag { position:absolute; left:-32px; bottom:-35px; background:var(--cyan); color:#000; border:4px solid #000; padding:12px 17px; transform:rotate(-5deg); box-shadow:5px 5px 0 var(--acid); }
.episode-tag small { display:block; font:10px DM Mono,monospace; text-transform:uppercase; }.episode-tag strong { display:block; font:400 38px Permanent Marker,cursive; }
.ticker { grid-column:1/-1; margin:80px calc(clamp(20px,6vw,100px) * -1) 0; min-height:58px; display:flex; align-items:center; justify-content:space-around; gap:28px; background:var(--acid); color:#050509; padding:0 28px; font:500 13px DM Mono,monospace; text-transform:uppercase; white-space:nowrap; transform:rotate(-.5deg); }
.ticker b { color:var(--pink); }
.numbers { display:grid; grid-template-columns:repeat(3,1fr); background:var(--cyan); color:#050509; border-block:4px solid #050509; }
.numbers div { padding:45px; text-align:center; border-right:4px solid #050509; }
.numbers div:last-child { border:0; }.numbers strong { display:block; font:400 72px/1 Permanent Marker,cursive; }.numbers span { display:block; font:500 11px DM Mono,monospace; text-transform:uppercase; margin-top:9px; }
.platforms,.latest,.explore,.about,.newsletter,.books { padding:95px clamp(20px,7vw,112px); }
.platforms { background:#f6f2ea; color:#09090d; background-image:linear-gradient(90deg,transparent 49%,#00e5ff18 50%,transparent 51%); background-size:34px 34px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:38px; }
.section-heading h2,.about h2,.guest h2,.playlist h2 { font:400 clamp(48px,6vw,88px)/.92 Permanent Marker,cursive; text-transform:uppercase; margin:8px 0 0; letter-spacing:-.035em; }
.section-heading > p { max-width:480px; line-height:1.6; }.section-heading > a { font:500 12px DM Mono,monospace; text-transform:uppercase; border-bottom:2px solid var(--pink); padding-bottom:5px; }
.kicker,.tape-number { color:var(--pink); }
.platform-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.platform-card { min-height:220px; padding:24px; border:4px solid #09090d; display:flex; flex-direction:column; position:relative; box-shadow:7px 7px 0 #09090d; transition:.15s; }
.platform-card:hover { transform:translate(4px,4px) rotate(-1deg); box-shadow:3px 3px 0 #09090d; }.platform-card span,.platform-card small { font:500 10px DM Mono,monospace; text-transform:uppercase; }.platform-card strong { font:400 31px/1.05 Permanent Marker,cursive; margin:auto 0 8px; }.platform-card b { position:absolute; top:18px; right:20px; font-size:28px; }.platform-card.green{background:var(--green)}.platform-card.purple{background:var(--purple);color:#fff}.platform-card.pink{background:var(--pink);color:#fff}.platform-card.cyan{background:var(--cyan)}
.latest { background:linear-gradient(140deg,#0d0816,#050509 65%); }
.crt-frame { background:#20202b; border:7px solid #343444; border-radius:24px; padding:44px 80px 44px 35px; box-shadow:inset 0 0 0 3px #050509,15px 17px 0 var(--pink); position:relative; }
.video-shell { background:#000; border:4px solid #000; border-radius:13px; overflow:hidden; position:relative; box-shadow:inset 0 0 30px #00e5ff30; }.video-shell iframe { width:100%; aspect-ratio:16/9; display:block; border:0; }.crt-label { position:absolute; z-index:2; top:13px; left:35px; font:500 10px DM Mono,monospace; color:var(--acid); }.crt-controls { position:absolute; width:55px; right:12px; top:70px; display:grid; gap:24px; }.crt-controls span { aspect-ratio:1; border:5px solid #09090d; border-radius:50%; background:radial-gradient(circle,#777 0 14%,#222 16% 48%,#050509 50%); }.sync-note { margin:34px 0 0; font:500 11px/1.7 DM Mono,monospace; color:var(--cyan); text-align:center; }
.explore { background:var(--acid); color:#06060a; }.topic-grid { display:grid; grid-template-columns:repeat(2,1fr); border:2px solid #06060a; }.topic-card { min-height:300px; padding:35px; border:2px solid #06060a; transition:.2s; background:#eaff29; }.topic-card:hover { background:var(--pink); color:#fff; transform:rotate(-1deg); }.topic-card > span { font:11px DM Mono,monospace; }.topic-card h3 { font:400 36px/1 Permanent Marker,cursive; text-transform:uppercase; margin:58px 0 14px; }.topic-card p { max-width:520px; line-height:1.55; }.topic-card b { font:500 11px DM Mono,monospace; text-transform:uppercase; }
.about { display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; align-items:center; background:#f6f2ea; color:#07070b; }.about-art { position:relative; transform:rotate(-3deg); box-shadow:14px 14px 0 var(--cyan); border:4px solid #07070b; }.about-art:after { content:"ORIGINAL SIGNAL"; position:absolute; right:-30px; bottom:-18px; padding:9px 12px; background:var(--pink); color:#fff; border:3px solid #07070b; font:500 10px DM Mono,monospace; transform:rotate(7deg); }.about-art img { display:block; width:100%; height:auto; }.about p { max-width:650px; font-size:18px; line-height:1.7; }
.newsletter { display:grid; grid-template-columns:1fr 1fr; gap:7vw; align-items:center; background:var(--cyan); color:#050509; border-block:5px solid #050509; position:relative; overflow:hidden; }.newsletter:after { content:"SIGNAL IN"; position:absolute; right:3vw; top:18px; color:var(--pink); font:400 54px Permanent Marker,cursive; transform:rotate(5deg); opacity:.28; }.newsletter h2 { font:400 clamp(48px,6vw,88px)/.92 Permanent Marker,cursive; text-transform:uppercase; margin:8px 0 20px; letter-spacing:-.035em; }.newsletter p { max-width:650px; font-size:18px; line-height:1.6; }.newsletter-form { position:relative; z-index:1; background:#f6f2ea; border:4px solid #050509; padding:30px; box-shadow:10px 10px 0 var(--pink); transform:rotate(1deg); }.newsletter-form label { display:block; margin-bottom:10px; font:500 11px DM Mono,monospace; text-transform:uppercase; }.newsletter-form>div { display:flex; gap:12px; }.newsletter-form input { flex:1; min-width:0; border:3px solid #050509; background:#fff; color:#050509; padding:15px; font:16px DM Mono,monospace; }.newsletter-form input:focus { outline:4px solid var(--acid); outline-offset:2px; }.newsletter-form .button { border-color:#050509; cursor:pointer; white-space:nowrap; }.newsletter-form small { display:block; margin-top:17px; font:10px/1.5 DM Mono,monospace; }
.books { background:#f6f2ea; color:#050509; background-image:repeating-linear-gradient(90deg,transparent 0 47px,#ff007f12 48px 50px); }.book-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.book-card { min-height:430px; display:grid; grid-template-columns:68px 1fr; border:5px solid #050509; box-shadow:12px 12px 0 #050509; transform:rotate(-1deg); overflow:hidden; }.book-card:nth-child(2){transform:rotate(1deg)}.book-spine { writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; justify-content:center; padding:18px; background:var(--acid); border-left:4px solid #050509; font:500 12px DM Mono,monospace; letter-spacing:.14em; }.book-copy { display:flex; flex-direction:column; padding:34px; background:var(--cyan); }.book-after-dark .book-copy { background:var(--purple); color:#fff; }.book-after-dark .book-spine { background:var(--pink); color:#fff; }.book-copy h3 { margin:40px 0 5px; font:400 clamp(38px,4vw,62px)/.92 Permanent Marker,cursive; text-transform:uppercase; }.book-copy h4 { max-width:550px; margin:0 0 18px; font:700 18px/1.35 Oswald,sans-serif; text-transform:uppercase; }.book-copy p { margin-bottom:28px; font:500 12px DM Mono,monospace; text-transform:uppercase; }.book-actions { display:flex; align-items:center; gap:28px; margin-top:auto; }.book-link { font:500 12px DM Mono,monospace; text-transform:uppercase; border-bottom:3px solid currentColor; padding-bottom:5px; }
.guest { text-align:center; background:var(--pink); padding:95px 22px; color:#fff; border-block:5px solid #07070b; position:relative; overflow:hidden; }.guest:before { content:""; position:absolute; inset:-70%; background:repeating-linear-gradient(45deg,transparent 0 40px,#00e5ff33 42px 46px); transform:rotate(8deg); }.guest>* { position:relative; }.guest .kicker { color:var(--acid); }.guest p { max-width:650px; margin:22px auto 30px; font-size:18px; line-height:1.6; }.white-button { background:#fff;color:#06060a;box-shadow:6px 6px 0 var(--acid); }
footer { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:30px; align-items:start; padding:60px clamp(20px,5vw,76px) 35px; background:#050509; color:#fff; border-top:4px solid var(--cyan); }footer p { color:#999; }footer div:nth-of-type(2) { display:flex; flex-wrap:wrap; gap:20px; font:11px DM Mono,monospace; text-transform:uppercase; }footer small { grid-column:1/-1; border-top:1px solid #ffffff33; padding-top:25px; color:#777; font:10px DM Mono,monospace; }
.archive-hero { padding:90px clamp(20px,7vw,112px); background:radial-gradient(circle at 80% 30%,#35106d,transparent 25%),#050509; border-bottom:5px solid var(--pink); }.archive-hero h1 { max-width:950px; }.archive-grid { padding:80px clamp(20px,7vw,112px); display:grid; gap:90px; background:#0a0a10; }.playlist h2 { color:#fff; margin:10px 0 15px; }.playlist p { max-width:680px; line-height:1.6; color:#c8c8d0; }
@media (max-width:900px) { .platform-grid{grid-template-columns:repeat(2,1fr)} .hero{grid-template-columns:1fr;padding-top:55px}.art-stack{width:min(86vw,560px);margin-top:30px}.ticker{margin-top:95px}.about,.newsletter{grid-template-columns:1fr}.book-grid{grid-template-columns:1fr}.about-art{max-width:540px}.crt-frame{padding-right:65px} }
@media (max-width:650px) { .site-header nav,.button-small{display:none}.site-header{min-height:70px}.wordmark{font-size:20px}.hero{padding-inline:20px}.hero h1>span{font-size:65px}.hero h1 .acid{margin-left:25px}.hero-copy{font-size:18px}.hero-actions{align-items:flex-start;flex-direction:column}.episode-tag{left:-10px}.ticker{overflow:hidden;justify-content:flex-start}.numbers,.platform-grid,.topic-grid{grid-template-columns:1fr}.numbers div{border-right:0;border-bottom:4px solid #050509}.numbers div:last-child{border:0}.section-heading{align-items:flex-start;flex-direction:column}.platforms,.latest,.explore,.about,.newsletter,.books{padding:65px 20px}.book-card{grid-template-columns:45px 1fr;min-height:400px}.book-copy{padding:24px 20px}.book-copy h3{margin-top:28px}.book-actions{align-items:flex-start;flex-direction:column;gap:18px}.newsletter-form>div{flex-direction:column}.newsletter-form .button{justify-content:center}.platform-card{min-height:180px}.crt-frame{padding:38px 14px 18px}.crt-controls{display:none}.crt-label{left:18px}.section-heading h2,.about h2,.guest h2,.playlist h2,.newsletter h2{font-size:45px}footer{grid-template-columns:1fr}footer small{grid-column:auto} }