:root{
  --ink:#0c1210;
  --panel:#141c18;
  --cream:#f3efe4;
  --muted:#9aa89a;
  --amber:#e8a317;
  --amber-hot:#ffb82e;
  --tube:#3ecf8e;
  --tube-dim:#1f7a52;
  --line:rgba(243,239,228,.12);
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --display:"Bebas Neue",Impact,sans-serif;
  --wrap:1120px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:18px}
body{margin:0;font-family:var(--sans);background:var(--ink);color:var(--cream);line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
.skip{position:absolute;left:-9999px;z-index:9999;background:var(--amber);color:#000;padding:.5rem 1rem}
.skip:focus{left:1rem;top:1rem}
.scanlines{pointer-events:none;position:fixed;inset:0;z-index:1;opacity:.04;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.35) 2px 3px)}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin:0 auto}

/* Header — high z, clickable */
.top{position:fixed;inset:0 0 auto;z-index:10000;display:flex;align-items:center;gap:1.25rem;
  padding:.85rem 1.35rem;background:linear-gradient(to bottom,rgba(12,18,16,.92),rgba(12,18,16,.55),transparent);
  pointer-events:none}
.top a,.top nav,.onair{pointer-events:auto}
.logo{font-family:var(--display);font-size:1.55rem;letter-spacing:.06em;line-height:1}
.logo span{color:var(--amber)}
.top nav{display:flex;gap:1rem;margin-left:auto}
.top nav a{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.top nav a:hover{color:var(--amber);opacity:1}
.onair{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  color:var(--tube);border:1px solid var(--tube-dim);padding:.28rem .55rem;border-radius:999px;background:rgba(62,207,142,.08)}
.onair i{width:.45rem;height:.45rem;border-radius:50%;background:var(--tube);box-shadow:0 0 8px var(--tube);
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.85)}}

/* Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:6.5rem 0 3rem;overflow:hidden;background:
  radial-gradient(ellipse at 70% 20%,rgba(232,163,23,.12),transparent 50%),
  radial-gradient(ellipse at 20% 80%,rgba(62,207,142,.08),transparent 45%),
  var(--ink)}
.wave{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}
.hero-grid{position:relative;z-index:2;width:min(100% - 2.5rem,var(--wrap));margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.75fr);gap:clamp(1.5rem,4vw,3rem);align-items:end}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tube);margin:0 0 1rem}
.kinetic{font-family:var(--display);font-weight:400;font-size:clamp(4rem,14vw,9.5rem);line-height:.86;letter-spacing:.02em;margin:0 0 1.2rem}
.k-line{display:block}
.k-mad{color:var(--amber);text-shadow:0 0 40px rgba(232,163,23,.35);animation:flicker 5s ease-in-out infinite}
.kinetic em{font-style:normal;color:var(--tube)}
@keyframes flicker{0%,100%{opacity:1;filter:brightness(1)} 46%{opacity:1} 48%{opacity:.72;filter:brightness(1.3)} 50%{opacity:1}}
.lede{font-size:clamp(1.05rem,2vw,1.25rem);max-width:34rem;color:rgba(243,239,228,.92);margin:0 0 .75rem}
.byline{font-size:.95rem;color:var(--muted);margin:0 0 1.5rem}
.byline strong{color:var(--cream);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;padding:.85rem 1.15rem;border:2px solid transparent;border-radius:2px;transition:transform .15s,background .15s,color .15s}
.btn-amber{background:var(--amber);color:#111;border-color:#000}
.btn-amber:hover{background:var(--amber-hot);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.hero-cover{margin:0;position:relative;justify-self:end;width:min(100%,340px)}
.hero-cover img{width:100%;border:3px solid #000;box-shadow:12px 12px 0 rgba(232,163,23,.85),0 0 0 1px rgba(243,239,228,.15)}
.hero-cover figcaption{position:absolute;left:.7rem;bottom:.7rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--ink);color:var(--amber);padding:.3rem .5rem;border:1px solid var(--amber)}
.vu{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;gap:3px;height:48px;
  padding:0 max(1.25rem,calc((100vw - var(--wrap))/2));pointer-events:none;opacity:.7}
.vu span{flex:1;background:linear-gradient(to top,var(--tube-dim),var(--amber));border-radius:1px 1px 0 0;
  animation:vu 1.1s ease-in-out infinite alternate;transform-origin:bottom;min-height:8%}
.vu span:nth-child(odd){animation-duration:1.35s}
.vu span:nth-child(3n){animation-duration:.9s;background:linear-gradient(to top,var(--tube-dim),var(--tube))}
.vu span:nth-child(1){animation-delay:0s}.vu span:nth-child(2){animation-delay:.05s}.vu span:nth-child(3){animation-delay:.1s}
.vu span:nth-child(4){animation-delay:.02s}.vu span:nth-child(5){animation-delay:.15s}.vu span:nth-child(6){animation-delay:.08s}
.vu span:nth-child(7){animation-delay:.12s}.vu span:nth-child(8){animation-delay:.03s}
.vu span:nth-child(n+9){animation-delay:calc((var(--i,0)) * .04s)}
@keyframes vu{from{height:12%} to{height:92%}}
@media (prefers-reduced-motion:reduce){
  .k-mad,.onair i,.vu span,.wave{animation:none!important}
  .vu span{height:40%}
  html{scroll-behavior:auto}
}

/* Sections */
.band{padding:clamp(3.5rem,8vw,6rem) 0;position:relative;z-index:2}
.band:nth-child(even){background:var(--panel)}
#listen,#archive,#contact{scroll-margin-top:5rem}
#featured,#hosts,#top{scroll-margin-top:5rem}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:0 0 .6rem}
.eyebrow.light{color:var(--tube)}
.sec h2,.feat-grid h2,.contact-box h2{font-family:var(--display);font-weight:400;font-size:clamp(2.8rem,8vw,5rem);line-height:.92;margin:0 0 1rem;letter-spacing:.02em}
.sec-note{color:var(--muted);max-width:40rem;margin:0 0 2rem}
.feat-grid h2 em,.contact-box h2{font-style:normal}
.feat-grid h2 em{color:var(--amber)}

.players{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.player-card{background:rgba(0,0,0,.35);border:1px solid var(--line);padding:1rem;border-radius:4px}
.player-label{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .75rem}

.feat-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.stats{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;padding:0;margin:0 0 1.25rem}
.stats li{background:rgba(0,0,0,.35);border:1px solid var(--line);padding:.75rem 1rem;min-width:7.5rem}
.stats strong{display:block;font-family:var(--display);font-size:1.6rem;letter-spacing:.04em;color:var(--amber)}
.stats span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.feat-grid blockquote{margin:1.5rem 0;padding:1rem 0 1rem 1rem;border-left:3px solid var(--tube)}
.feat-grid blockquote p{font-family:var(--display);font-size:clamp(1.4rem,3vw,2rem);line-height:1.1;margin:0 0 .5rem;letter-spacing:.02em}
.feat-grid blockquote footer{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.08em}
.feat-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.25rem}
.text-link{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tube);border-bottom:1px solid var(--tube-dim)}
.feat-thumb{position:relative;display:block;border:3px solid #000;box-shadow:10px 10px 0 var(--tube-dim)}
.feat-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover}
.feat-thumb .play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:3.2rem;height:3.2rem;border-radius:50%;
  background:var(--amber);color:#111;display:grid;place-items:center;font-size:1rem;border:2px solid #000}

.tracklist{list-style:none;padding:0;margin:0 0 1.5rem;border-top:1px solid var(--line)}
.tracklist li{display:grid;grid-template-columns:3.5rem 1fr auto;gap:1rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.tracklist .num{font-family:var(--mono);font-size:.75rem;color:var(--amber);letter-spacing:.08em}
.tracklist h3{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .25rem;letter-spacing:.03em;line-height:1}
.tracklist p{margin:0;color:var(--muted);font-size:.92rem}
.tracklist .yt{display:block;width:120px;border:2px solid #000;overflow:hidden;background:#000}
.tracklist .yt img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.9;transition:opacity .2s}
.tracklist .yt:hover img{opacity:1}
.more{color:var(--muted);font-size:.92rem;max-width:42rem}

.host-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.75rem}
.host-cards article{background:rgba(0,0,0,.3);border:1px solid var(--line);padding:1.35rem 1.4rem}
.host-cards h3{font-family:var(--display);font-size:2rem;margin:0 0 .2rem;letter-spacing:.04em}
.host-cards .role{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tube);margin:0 0 .85rem}
.host-cards p:last-child{margin:0;color:rgba(243,239,228,.88)}
.host-quote{margin:0;padding:1.25rem 1.4rem;border:1px solid var(--amber);background:rgba(232,163,23,.06)}
.host-quote p{font-family:var(--display);font-size:clamp(1.5rem,3.5vw,2.3rem);line-height:1.1;margin:0 0 .6rem;letter-spacing:.02em}
.host-quote footer{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.08em}

.contact{background:linear-gradient(160deg,#0a1612 0%,#0c1210 50%,#1a1408 100%)}
.contact-box{max-width:36rem}
.talk-form{display:grid;gap:.9rem;margin-top:1.5rem}
.f-lab{display:grid;gap:.35rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.f-lab input,.f-lab textarea{background:rgba(0,0,0,.4);border:1px solid var(--line);padding:.75rem .85rem;border-radius:2px;color:var(--cream)}
.f-lab input:focus,.f-lab textarea:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-status{font-family:var(--mono);font-size:.75rem;min-height:1.2em;color:var(--tube)}
.form-status.is-err{color:#ff6b6b}

.foot{border-top:1px solid var(--line);padding:2rem 0;font-size:.85rem;color:var(--muted)}
.foot-grid{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between;align-items:center}
.foot-copy{margin:.35rem 0 0}
.foot-sites{display:flex;flex-wrap:wrap;gap:.55rem}
.foot-sites a{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;padding:.45rem .7rem;border:1px solid var(--line);
  color:var(--cream);transition:border-color .15s,color .15s}
.foot-sites a:hover{border-color:var(--amber);color:var(--amber)}

@media (max-width:900px){
  .hero-grid,.feat-grid,.players,.host-cards{grid-template-columns:1fr}
  .hero-cover{justify-self:start;max-width:280px}
  .top nav{display:none}
  .tracklist li{grid-template-columns:2.5rem 1fr}
  .tracklist .yt{grid-column:2;width:160px;margin-top:.35rem}
}
@media (max-width:520px){
  .kinetic{font-size:clamp(3.2rem,18vw,5rem)}
  .vu{height:36px}
  .stats li{min-width:45%}
}