:root{
  --accent: #E11D2E;
  --accent-ink: #ffffff;
  --bg: #0a0a0b;
  --bg-2: #111114;
  --bg-3: #17171c;
  --line: #24242c;
  --line-2: #34343e;
  --ink: #f5f5f7;
  --ink-2: #a3a3ad;
  --ink-3: #6b6b74;
  --display: 'Oswald', 'Bebas Neue', Impact, Arial Narrow, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}

/* ---------- TOP MARQUEE ---------- */
.marquee{
  background:var(--accent);color:#fff;font-family:var(--display);letter-spacing:.08em;
  font-size:14px;padding:8px 0;overflow:hidden;white-space:nowrap;position:relative;
  border-bottom:1px solid rgba(0,0,0,.3);
}
.marquee-track{display:inline-flex;gap:48px;padding-left:24px;animation:mq 60s linear infinite backwards}
.marquee-track span{display:inline-flex;align-items:center;gap:12px}
.marquee-track span::before{content:"";width:6px;height:6px;background:#fff;border-radius:50%}
/* Right→left ticker. Starts with the newest item just past the right edge of
   the viewport so it slides in fully readable, then travels exactly one
   items-set width (-50% of the duplicated track) so the loop seam is
   invisible. `backwards` fill makes the `from` keyframe apply before the
   animation starts so there's no flash at translateX(0) on first paint. */
@keyframes mq{
  from{transform:translateX(100vw)}
  to  {transform:translateX(calc(100vw - 50%))}
}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(10,10,11,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:1400px;margin:0 auto;padding:18px 28px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:baseline;gap:10px;font-family:var(--display);letter-spacing:.02em}
.logo-mark{
  font-size:32px;line-height:.9;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
}
.logo-mark .radio{
  font-size:12px;font-family:var(--body);font-weight:700;letter-spacing:.2em;
  padding:4px 8px;border:1px solid var(--line-2);color:var(--ink-2);border-radius:3px;transform:translateY(-4px)
}
.logo-sub{font-size:10px;color:var(--ink-3);letter-spacing:.25em;text-transform:uppercase;font-family:var(--body);font-weight:500}
.nav-links{display:flex;gap:28px;margin-left:24px;font-family:var(--display);letter-spacing:.08em;font-size:16px}
.nav-links a{color:var(--ink-2);position:relative;padding:4px 0;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line-2);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink-2)
}
.pill.live{border-color:var(--accent);color:#fff;background:rgba(225,29,46,.08)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(225,29,46,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(225,29,46,.6)}70%{box-shadow:0 0 0 10px rgba(225,29,46,0)}100%{box-shadow:0 0 0 0 rgba(225,29,46,0)}}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);transition:all .15s}
.icon-btn:hover{color:var(--ink);border-color:var(--ink-2)}

/* ---------- HERO ---------- */
.hero{
  position:relative;width:100%;padding:32px 28px 48px;
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);gap:32px;align-items:center;max-width:1400px;margin:0 auto}
/* min-width:0 lets the text column shrink below its intrinsic content width
   (long song titles otherwise push the column wider, squeezing .hero-art into
   a tiny square because of its 1:1 aspect ratio). */
.hero-now{position:relative;min-width:0}
.now-kicker{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;margin-bottom:22px}
.now-kicker .bars{display:inline-flex;gap:2px;align-items:end;height:14px}
.now-kicker .bars i{display:block;width:3px;background:var(--accent);animation:eq 1s infinite ease-in-out}
.now-kicker .bars i:nth-child(1){animation-delay:-0.4s}
.now-kicker .bars i:nth-child(2){animation-delay:-0.2s}
.now-kicker .bars i:nth-child(3){animation-delay:-0.6s}
.now-kicker .bars i:nth-child(4){animation-delay:-0.1s}
body.paused .now-kicker .bars i{animation-play-state:paused;height:4px !important}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.channel-tag{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:var(--accent);color:#fff;
  font-family:var(--display);letter-spacing:.1em;font-size:14px;margin-bottom:18px
}
.hero-title{
  font-family:var(--display);font-size:clamp(80px,8vw,168px);line-height:.86;letter-spacing:-.01em;
  margin:0;color:var(--ink);
  /* Safety net only: if a single unbroken word is still wider than the
     column even after the JS-applied font-size step-down, break it instead
     of pushing the column wider. Title length-based scaling lives in
     applyHeroTitleScale() (app.js) — that handles the common case so we
     stay on a single line per artist/track. */
  overflow-wrap:break-word;
}
/* Length-based step-down classes — set by JS when artist or track text is
   long. Each step reduces font-size enough to keep the title on one line
   per <span> in the typical hero column width (~600px desktop). */
.hero-title.is-long      { font-size:clamp(56px,5.5vw,112px) !important; }
.hero-title.is-very-long { font-size:clamp(40px,4vw,80px)    !important; }
.hero-title.is-extra-long{ font-size:clamp(32px,3vw,60px)    !important; }
.hero-title .artist{display:block;color:var(--ink)}
.hero-title .track{display:block;color:var(--ink-3);position:relative}
.hero-title .track::before{
  content:"";position:absolute;left:-28px;top:10%;bottom:10%;width:4px;background:var(--accent);
}
.hero-meta{display:flex;gap:24px;margin-top:28px;align-items:center;flex-wrap:wrap}
.hero-meta .time{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.1em}
.progress{flex:1;min-width:200px;height:3px;background:var(--line);position:relative;overflow:hidden}
.progress::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(.42);animation:prog 120s linear infinite}
body.paused .progress::after{animation-play-state:paused}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero-controls{display:flex;gap:14px;margin-top:36px;align-items:center}
.btn{
  font-family:var(--display);letter-spacing:.08em;padding:14px 22px;font-size:18px;
  display:inline-flex;align-items:center;gap:10px;transition:transform .1s, background .15s, color .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#f02a3c}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}

.hero-art{
  position:relative;aspect-ratio:1/1;border:1px solid var(--line);
  background:
    radial-gradient(circle at 30% 20%, rgba(225,29,46,.25), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(225,29,46,.12), transparent 50%),
    var(--bg-2);
  overflow:hidden;
}
.hero-art::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:40px 40px;opacity:.35
}
.hero-art-inner{
  position:absolute;inset:36px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;
  background:linear-gradient(160deg, #1a1a20, #0c0c10);border:1px solid var(--line-2);
}
.album-placeholder{
  width:64%;aspect-ratio:1/1;background:
    repeating-linear-gradient(45deg, #1e1e24 0 8px, #16161b 8px 16px);
  border:1px solid var(--line-2);display:grid;place-items:center;position:relative
}
.album-placeholder::after{content:"ALBUM ART";position:absolute;bottom:12px;right:12px;font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.15em}
.album-placeholder .vinyl{width:40%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle, var(--accent) 0 8%, #111 8% 10%, #18181d 10% 100%);position:relative;animation:spin 10s linear infinite}
body.paused .album-placeholder .vinyl{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
.album-placeholder .vinyl::after{content:"";position:absolute;inset:30%;border-radius:50%;background:#0b0b0e;border:1px solid #2a2a32}
.hero-art-meta{display:flex;justify-content:space-between;width:100%;padding:0 20px;font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.2em;text-transform:uppercase}

.hero-corners{position:absolute;inset:0;pointer-events:none}
.hero-corners i{position:absolute;width:24px;height:24px;border:2px solid var(--accent)}
.hero-corners i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.hero-corners i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.hero-corners i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.hero-corners i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* ---------- SECTION HEADER ---------- */
.section{max-width:1400px;margin:0 auto;padding:80px 28px;position:relative}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;gap:24px;flex-wrap:wrap}
.section-head .eyebrow{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.3em;text-transform:uppercase;margin-bottom:10px}
.section-head h2{font-family:var(--display);font-size:clamp(48px,6vw,88px);margin:0;line-height:.9;letter-spacing:-.01em}
.section-head .lead{max-width:420px;color:var(--ink-2);font-size:14px;line-height:1.6}
.section-num{font-family:var(--mono);color:var(--ink-3);font-size:12px;letter-spacing:.2em}
.section-divider{height:1px;background:var(--line);margin:0 auto;max-width:1400px}

/* ---------- CHANNELS ---------- */
.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1200px){.channels{grid-template-columns:repeat(2,1fr)}}
.ch-card{
  position:relative;background:var(--bg-2);border:1px solid var(--line);padding:28px;
  display:flex;flex-direction:column;gap:24px;min-height:420px;overflow:hidden;
  transition:border-color .15s, transform .2s, background .2s;cursor:pointer
}
.ch-card:hover{border-color:var(--line-2);background:var(--bg-3)}
.ch-card.active{border-color:var(--accent);background:linear-gradient(180deg, rgba(225,29,46,.08), transparent 60%), var(--bg-2)}
.ch-head{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.ch-num{font-family:var(--mono);color:var(--ink-3);font-size:11px;letter-spacing:.2em}
.ch-status{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.2em;display:flex;align-items:center;gap:6px}
.ch-status.live{color:var(--accent)}
.ch-status .sq{width:6px;height:6px;background:currentColor}
.ch-visual{
  aspect-ratio:4/3;background:var(--bg-3);border:1px solid var(--line);position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.ch-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;filter:grayscale(.2) contrast(1.05)}
.ch-card.active .ch-visual img{opacity:1;filter:none}
.ch-visual .placeholder-txt{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.2em;text-transform:uppercase;position:absolute;bottom:10px;left:10px;z-index:1;background:rgba(0,0,0,.55);padding:3px 8px}
.ch-visual .ch-glyph{font-family:var(--display);font-size:96px;color:var(--accent);line-height:1;position:relative;z-index:1;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.ch-visual::before{
  content:"";position:absolute;inset:0;opacity:.6;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px)
}
.ch-body{position:relative;z-index:1}
.ch-tag{display:inline-block;font-family:var(--mono);font-size:10px;padding:3px 8px;border:1px solid var(--line-2);color:var(--ink-2);letter-spacing:.2em;margin-bottom:14px}
.ch-title{font-family:var(--display);font-size:36px;line-height:.95;margin:0 0 8px;letter-spacing:.01em}
.ch-sub{color:var(--ink-2);font-size:13px;line-height:1.5}
.ch-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.ch-listeners{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em}
.ch-play{
  width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);
  display:grid;place-items:center;transition:background .15s, transform .15s
}
.ch-card.active .ch-play{background:var(--accent);color:#fff}
.ch-play:hover{transform:scale(1.06)}

/* ---------- NEWS ---------- */
.news{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.news-card{
  grid-column:span 4;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s, transform .2s;position:relative
}
.news-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.news-card.feature{grid-column:span 8;grid-row:span 2;flex-direction:row}
.news-card.feature .news-media{flex:1.2;aspect-ratio:auto}
.news-card.feature .news-body{flex:1;padding:36px}
.news-card.feature .news-title{font-size:40px}
.news-media{
  aspect-ratio:16/10;background:var(--bg-3);position:relative;overflow:hidden;
  display:grid;place-items:center
}
.news-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.news-card:hover .news-media img{transform:scale(1.04)}
.news-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,11,.0) 40%, rgba(10,10,11,.75) 100%)
}
.news-media .ph-date{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:10px;color:#fff;letter-spacing:.15em;background:rgba(0,0,0,.65);padding:4px 8px;z-index:1}
.news-body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.news-cat{font-family:var(--display);font-size:12px;letter-spacing:.15em;color:var(--accent);display:inline-block}
.news-title{font-family:var(--display);font-size:22px;line-height:1.05;margin:0;letter-spacing:.01em;color:var(--ink)}
.news-excerpt{color:var(--ink-2);font-size:13px;line-height:1.6;display:none}
.news-card.feature .news-excerpt{display:block}
.news-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.news-meta .reads{color:var(--ink-2)}

/* ---------- PARTNERS ---------- */
.partners{
  background:var(--bg-2);border:1px solid var(--line);padding:48px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:center
}
.partner{
  height:100px;border:1px solid var(--line);display:grid;place-items:center;padding:18px;
  transition:border-color .15s, background .15s
}
.partner img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) brightness(1.2) contrast(.9);opacity:.55;transition:filter .2s, opacity .2s}
.partner:hover{border-color:var(--line-2);background:rgba(255,255,255,.02)}
.partner:hover img{filter:none;opacity:1}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:64px 28px 140px;margin-top:48px}
.foot-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot-brand h3{font-family:var(--display);font-size:56px;margin:0 0 4px;letter-spacing:.01em}
.foot-brand .foot-logo{display:block;max-width:240px;width:100%;height:auto}
.foot-brand p{color:var(--ink-2);font-size:13px;line-height:1.6;max-width:340px;margin:16px 0 24px}
.foot-socials{display:flex;gap:10px}
.foot-col h4{font-family:var(--display);font-size:16px;margin:0 0 18px;letter-spacing:.1em;color:var(--ink-3)}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--ink-2)}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{max-width:1400px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em}

/* ---------- STICKY PLAYER ---------- */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(10,10,11,.92);backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
}
.player-inner{
  max-width:1400px;margin:0 auto;padding:14px 28px;
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:24px
}
.pl-left{display:flex;align-items:center;gap:14px;min-width:0}
.pl-art{width:52px;height:52px;background:linear-gradient(135deg,#1a1a20,#0a0a0b);border:1px solid var(--line-2);display:grid;place-items:center;flex:none}
.pl-art .mini-vinyl{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0 12%,#111 12% 16%,#1c1c22 16% 100%);animation:spin 8s linear infinite}
body.paused .pl-art .mini-vinyl{animation-play-state:paused}
.pl-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-ch{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.2em;text-transform:uppercase}
.pl-track{font-family:var(--display);font-size:18px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-artist{font-size:11px;color:var(--ink-2)}
.pl-center{display:flex;flex-direction:column;align-items:center;gap:8px}
.pl-controls{display:flex;align-items:center;gap:18px}
.pl-btn{color:var(--ink-2);width:32px;height:32px;display:grid;place-items:center;transition:color .15s}
.pl-btn:hover{color:var(--ink)}
.pl-btn.play{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--bg)}
.pl-btn.play:hover{background:#fff}
/* Small red/black toggles in the top nav, between ON AIR and the menu icons. */
.kicker-btn{
  width:24px;height:24px;padding:0;cursor:pointer;
  display:grid;place-items:center;position:relative;
  border:1px solid var(--line);
  background:#000;color:rgba(255,255,255,.55);
  transition:background .15s, border-color .15s, color .15s, transform .1s;
}
.kicker-btn:hover{transform:scale(1.08)}
/* Tooltip — appears below the button on hover. Replaces the native browser
   tooltip (which has too much delay) with one we can style. */
.kicker-btn .kicker-tip{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.94);
  color:#fff;
  border:1px solid var(--line);
  padding:5px 9px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.05em;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s;
  z-index:1000;
}
.kicker-btn:hover .kicker-tip{ opacity:1; }
.kicker-btn[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.kicker-btn[aria-pressed="false"]{
  background:#000;border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.45);
}
.kicker-btn .ico-on,.kicker-btn .ico-off{display:none}
.kicker-btn[aria-pressed="true"]  .ico-on { display:block }
.kicker-btn[aria-pressed="false"] .ico-off{ display:block }
.pl-bar{width:min(520px, 100%);display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.pl-bar .track-line{flex:1;height:3px;background:var(--line);position:relative;cursor:pointer}
.pl-bar .track-line::after{content:"";position:absolute;inset:0 60% 0 0;background:var(--ink);}
.pl-bar .track-line:hover::after{background:var(--accent)}
.pl-right{display:flex;align-items:center;gap:14px;justify-content:flex-end}
.pl-eq{display:inline-flex;gap:3px;align-items:end;height:18px}
.pl-eq i{display:block;width:3px;background:var(--accent);animation:eq 1.1s infinite ease-in-out}
.pl-eq i:nth-child(2){animation-delay:-.3s}
.pl-eq i:nth-child(3){animation-delay:-.6s}
body.paused .pl-eq i{animation-play-state:paused;height:4px}
.pl-vol{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.pl-vol-track{width:90px;height:3px;background:var(--line);position:relative}
.pl-vol-track::after{content:"";position:absolute;inset:0 30% 0 0;background:var(--ink)}

/* ---------- TWEAKS PANEL ---------- */
.tweaks{
  position:fixed;right:24px;bottom:104px;width:300px;background:var(--bg-2);border:1px solid var(--line-2);
  padding:18px;z-index:70;font-size:12px;box-shadow:0 24px 60px rgba(0,0,0,.5);
  display:none
}
.tweaks.open{display:block}
.tweaks h4{font-family:var(--display);font-size:18px;margin:0 0 14px;letter-spacing:.08em;display:flex;justify-content:space-between;align-items:center}
.tweaks h4 button{font-size:18px;color:var(--ink-2)}
.tw-group{margin-bottom:14px}
.tw-group > label{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.tw-swatches{display:flex;gap:8px}
.tw-sw{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s}
.tw-sw.active{border-color:var(--ink)}
.tw-sw:hover{transform:scale(1.1)}
.tw-seg{display:flex;gap:4px;background:var(--bg);padding:3px;border:1px solid var(--line)}
.tw-seg button{flex:1;padding:8px;font-size:11px;color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase;font-family:var(--body);font-weight:600}
.tw-seg button.active{background:var(--accent);color:#fff}

/* Layout variants */
body.layout-editorial .hero-grid{grid-template-columns:1fr 1fr}
body.layout-editorial .hero-title{font-size:clamp(80px,8vw,168px)}
body.layout-magazine .hero-grid{grid-template-columns:1fr;text-align:left}
body.layout-magazine .hero-art{max-width:520px;aspect-ratio:4/5;margin-top:32px}
body.layout-magazine .hero-title{font-size:clamp(80px,8vw,168px)}

/* Font variants */
body.font-editorial{--display:'Oswald',Impact,sans-serif}
body.font-industrial{--display:'Anton',Impact,sans-serif}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .channels{grid-template-columns:1fr}
  .news{grid-template-columns:1fr}
  .news-card,.news-card.feature{grid-column:span 1}
  .news-card.feature{flex-direction:column}
  .partners{grid-template-columns:repeat(3,1fr)}
  .foot-inner{grid-template-columns:1fr 1fr}
  .player-inner{grid-template-columns:1fr auto;gap:12px;padding:10px 16px}
  .pl-right{display:none}
  .pl-center{grid-column:1/-1;order:3}
  .nav-links{display:none}
}

/* ===================== ADDITIONS (post-split) ===================== */

/* Logo image */
.logo-img{height:42px;width:auto;max-width:180px;object-fit:contain}

/* Smaller partner logos */
.partners{grid-template-columns:repeat(3,1fr);gap:24px;padding:36px}
.partner{height:72px;padding:12px}
.partner img{max-height:40px !important;max-width:80% !important}

/* Shrink marquee dot spacing when many items */
.marquee-track{gap:42px}

/* ---------- TESTIMONIALS (auto-scrolling marquee, author up front) ---------- */
.testimonials-marquee{position:relative;margin-top:24px}
.testimonials,
.testimonials-section .testimonials{
  display:flex !important;gap:22px !important;align-items:stretch !important;
  grid-template-columns:none !important;
}
.testimonial,
.testimonials-section .testimonial{
  flex:0 0 360px !important;max-width:360px !important;min-width:0 !important;
  background:linear-gradient(180deg, rgba(225,29,46,.06) 0%, var(--bg-2) 60%) !important;
  border:1px solid var(--line) !important;
  padding:30px 26px 26px !important;
  display:flex !important;flex-direction:column !important;gap:14px !important;
  position:relative !important;overflow:hidden !important;
  transition:border-color .2s, transform .25s ease, box-shadow .25s ease;
}
.testimonial:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 16px 40px -16px rgba(225,29,46,.45), 0 0 0 1px rgba(225,29,46,.25);
}
/* Big stylised quote mark in the corner */
.testimonial .t-quote-mark{
  position:absolute;top:-22px;right:14px;
  font-family:var(--display);font-size:140px;line-height:1;
  color:var(--accent);opacity:.18;pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.testimonial:hover .t-quote-mark{opacity:.32;transform:translateY(-2px) rotate(-4deg)}
/* Author up FRONT — that's what catches the eye first */
.testimonial .t-head{
  display:flex;flex-direction:column;gap:2px;
  padding-bottom:14px;border-bottom:1px solid rgba(225,29,46,.25);
  position:relative;z-index:1;
}
.testimonial .t-author{
  font-family:var(--body);font-size:18px;letter-spacing:.01em;
  color:var(--ink);text-transform:none;line-height:1.25;font-weight:700;
}
.testimonial .t-role{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:var(--accent);text-transform:uppercase;margin-top:4px;
}
.testimonial .t-text{
  margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;
  font-style:italic;position:relative;z-index:1;
}

/* Marquee container: clip + soft fade on edges */
.testimonials-scroll,
.testimonials-section .testimonials-scroll{
  overflow:hidden !important;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%) !important;
  mask-image:linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%) !important;
}
.testimonials-scroll .testimonials-track,
.testimonials-section .testimonials-track{
  display:flex !important;gap:22px !important;width:max-content !important;
  /* Right→left marquee. The newest card starts just past the right edge of
     its container so visitors can actually read it as it slides in. Distance
     to scroll is exactly one items-set width (the track is duplicated, so
     after travelling that distance the second copy aligns with where the
     first started and the loop seam is invisible).
     `--t-start` and `--t-end` are set inline by JS in pixels — using vars
     instead of % avoids any flex/max-content edge cases. `animation-fill-mode:
     backwards` makes the `from` keyframe apply BEFORE the animation begins,
     so the track never flashes at translateX(0) on first paint. */
  animation: testimonialsScroll var(--t-dur, 90s) linear infinite backwards !important;
  will-change:transform;
  flex-direction:row !important;
  transform: translateX(var(--t-start, 100vw));
}
.testimonials-scroll:hover .testimonials-track{animation-play-state:paused !important}
@keyframes testimonialsScroll{
  from{transform: translateX(var(--t-start, 100vw))}
  to  {transform: translateX(var(--t-end, calc(100vw - 100%)))}
}

/* ---------- TEAM ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.team-card{
  background:var(--bg-2);border:1px solid var(--line);padding:24px;text-align:center;
  display:flex;flex-direction:column;gap:14px;align-items:center;
  transition:border-color .15s, transform .2s;
}
.team-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.team-avatar{
  width:96px;height:96px;border-radius:50%;background:
    radial-gradient(circle at 30% 30%, #2a2a34, #0b0b0e);
  display:grid;place-items:center;font-family:var(--display);font-size:38px;
  color:var(--accent);border:2px solid var(--line-2);overflow:hidden
}
.team-avatar img{width:100%;height:100%;object-fit:cover}
.team-name{font-family:var(--display);font-size:22px;letter-spacing:.04em;margin:0;color:var(--ink)}
.team-role{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--ink-3);text-transform:uppercase;margin:0}

/* ---------- LISTENING LINKS ---------- */
.listen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.listen-card{
  background:var(--bg-2);border:1px solid var(--line);padding:28px;
  display:flex;flex-direction:column;gap:16px;position:relative;
  transition:border-color .15s, transform .2s, background .2s;color:inherit;
}
.listen-card:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--bg-3)}
.listen-icon{
  width:54px;height:54px;border:1px solid var(--line-2);display:grid;place-items:center;
  color:var(--accent)
}
.listen-name{font-family:var(--display);font-size:24px;margin:0;letter-spacing:.04em}
.listen-note{color:var(--ink-2);font-size:13px;margin:0}
.listen-go{
  margin-top:auto;font-family:var(--mono);font-size:11px;color:var(--accent);
  letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:6px
}

/* ---------- CONTACTS ---------- */
.contacts-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.contacts-info{display:flex;flex-direction:column;gap:20px}
.contact-item{
  display:flex;align-items:center;gap:16px;padding:18px 20px;
  background:var(--bg-2);border:1px solid var(--line)
}
.contact-item .c-icon{
  width:42px;height:42px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--accent);flex:none
}
.contact-item .c-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-item .c-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}
.contact-item .c-value{font-size:15px;color:var(--ink);word-break:break-word}

.opinion-form{
  background:var(--bg-2);border:1px solid var(--line);padding:32px;
  display:flex;flex-direction:column;gap:16px
}
.opinion-form label{display:flex;flex-direction:column;gap:6px}
.opinion-form label span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}
.opinion-form input,.opinion-form textarea{
  background:var(--bg);border:1px solid var(--line-2);color:var(--ink);
  padding:12px 14px;font-family:var(--body);font-size:14px;transition:border-color .15s
}
.opinion-form input:focus,.opinion-form textarea:focus{outline:0;border-color:var(--accent)}
.opinion-form textarea{resize:vertical;min-height:120px}
.opinion-form button{align-self:flex-start}
.opinion-status{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.15em;min-height:14px}

/* ---------- SEARCH OVERLAY ---------- */
.search-overlay{
  position:fixed;inset:0;z-index:80;background:rgba(5,5,7,.85);backdrop-filter:blur(16px);
  display:none;padding:80px 28px;overflow-y:auto
}
.search-overlay.open{display:block}
.search-panel{
  max-width:820px;margin:0 auto;background:var(--bg-2);border:1px solid var(--line-2);
  min-height:120px;display:flex;flex-direction:column
}
.search-head{display:flex;border-bottom:1px solid var(--line);padding:8px 10px 8px 20px;align-items:center;gap:10px}
.search-head input{
  flex:1;background:transparent;border:0;outline:0;color:var(--ink);
  font-family:var(--display);font-size:24px;letter-spacing:.02em;padding:18px 0
}
.search-results{padding:12px 0;max-height:56vh;overflow-y:auto}
.search-result{
  display:flex;gap:14px;align-items:flex-start;padding:14px 24px;
  border-bottom:1px solid var(--line);color:inherit;
  transition:background .1s
}
.search-result:hover{background:var(--bg-3)}
.search-result .r-thumb{
  width:56px;height:56px;object-fit:cover;border:1px solid var(--line-2);flex:none;background:var(--bg-3)
}
.search-result .r-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.search-result .r-kind{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.2em;text-transform:uppercase}
.search-result .r-title{font-family:var(--display);font-size:18px;color:var(--ink);line-height:1.2}
.search-result .r-sub{font-size:12px;color:var(--ink-2)}
.search-empty{padding:60px 24px;text-align:center;color:var(--ink-3);font-family:var(--mono);letter-spacing:.2em;font-size:12px;text-transform:uppercase}

/* ---------- MOBILE DRAWER ---------- */
.mobile-drawer{
  position:fixed;inset:0;z-index:80;background:rgba(5,5,7,.85);backdrop-filter:blur(10px);
  display:none
}
.mobile-drawer.open{display:block}
.drawer-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(360px,85vw);
  background:var(--bg-2);border-left:1px solid var(--line-2);
  display:flex;flex-direction:column;padding:20px;gap:24px;animation:slideIn .22s ease-out
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
.drawer-nav{display:flex;flex-direction:column;gap:4px}
.drawer-nav a{
  padding:14px 8px;border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:22px;letter-spacing:.05em;color:var(--ink);
  transition:color .1s, padding-left .15s
}
.drawer-nav a:hover{color:var(--accent);padding-left:16px}

/* Volume slider interactivity */
.pl-vol-track{cursor:pointer;border-radius:2px}
.pl-vol-track::after{transition:width .05s linear}

/* Responsive for new sections */
@media (max-width:1100px){
  .testimonials,.team-grid,.listen-grid{grid-template-columns:repeat(2,1fr)}
  .contacts-grid{grid-template-columns:1fr}
  .partners{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .testimonials,.team-grid,.listen-grid{grid-template-columns:1fr}
  .partners{grid-template-columns:repeat(2,1fr);padding:24px;gap:16px}
}

/* Hero cover image - real channel art behind the vinyl */
#hero-cover-box{position:relative}
#hero-cover-box #hero-cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;z-index:0
}
#hero-cover-box.has-cover #hero-cover{opacity:.85}
#hero-cover-box.has-cover::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(135deg, rgba(225,29,46,.18), transparent 55%);
  pointer-events:none
}
/* Hide the diagonal stripe placeholder art when we have a real cover */
#hero-cover-box.has-cover{background:var(--bg-3) !important}
#hero-cover-box.has-cover::after{
  content:"";position:absolute;inset:0;
  background:none
}
/* Keep vinyl spinning ABOVE the cover */
#hero-cover-box .vinyl{position:relative;z-index:2}

/* YouTube music-video preview (covers artwork when track has an official video)
   Structure: #hero-video-wrap clips an oversized iframe; YT.Player replaces
   the inner #hero-video div with the actual iframe. Scale pushes the YouTube
   title/logo chrome off-frame, gradient shields mask whatever slips through. */
#hero-cover-box #hero-video-wrap{
  position:absolute;inset:0;
  z-index:2;pointer-events:none;opacity:0;
  transition:opacity .4s ease;overflow:hidden;
  background:#000;
}
#hero-cover-box #hero-video{
  position:absolute;top:50%;left:50%;
  width:165%;height:165%;
  transform:translate(-50%,-50%);
  border:0;pointer-events:none;
  /* Vintage CRT tube treatment: punchy colors, slight warmth, no blur.
     The retro overlays (scanlines + vignette + curve) live on the wrap. */
  filter:saturate(1.25) contrast(1.1) brightness(.78) sepia(.12) blur(2px);
}
#hero-cover-box.has-video #hero-video-wrap{
  opacity:1;
  border-radius:14px;
  box-shadow:
    inset 0 0 80px 20px rgba(0,0,0,.65),
    inset 0 0 6px 2px rgba(255,255,255,.06);
  animation:crtFlicker 5.2s steps(1,end) infinite;
}
/* CRT scanlines + top title mask + vignette — one pseudo-element stack.
   mix-blend-mode:multiply makes the scanlines darken the video underneath
   rather than overlay gray bands. */
#hero-cover-box #hero-video-wrap::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,.35) 2px,
      rgba(0,0,0,.35) 3px
    ),
    linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 8%,transparent 20%),
    radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%);
  pointer-events:none;z-index:3;
  mix-blend-mode:multiply;
}
/* Full-width bottom mask — covers YouTube watermark AND any player chrome
   (big center/bottom play button) that briefly flashes on loopback/seek. */
#hero-cover-box #hero-video-wrap::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:28%;
  background:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 35%,rgba(0,0,0,.5) 65%,transparent 100%);
  pointer-events:none;z-index:4;
}
/* Very subtle flicker — not distracting but sells the old-TV vibe. */
@keyframes crtFlicker{
  0%,96%,100%{filter:none}
  97%{filter:brightness(1.08)}
  98%{filter:brightness(.93)}
  99%{filter:brightness(1.04)}
}
#hero-cover-box.has-video #hero-cover{opacity:0}
#hero-cover-box.has-video .vinyl{display:none}
/* Channel cover in hero - mobile responsive */
@media (max-width:900px){
  #hero-cover-box #hero-cover{opacity:.75}
}

/* When we have a real cover, hide placeholder art and vinyl overlay */
#hero-cover-box.has-cover #hero-cover{opacity:1}
#hero-cover-box.has-cover .vinyl{display:none}
#hero-cover-box.has-cover::after{
  content:"В МОМЕНТА";position:absolute;bottom:12px;right:12px;
  font-family:var(--mono);font-size:10px;color:#fff;letter-spacing:.2em;
  background:rgba(0,0,0,.6);padding:4px 8px;z-index:3
}
/* Hide the original "ALBUM ART" placeholder text on real cover */
#hero-cover-box.has-cover .album-placeholder-label{display:none}
/* Override the striped background when cover is present */
#hero-cover-box.has-cover{background:#0b0b0e !important}
/* Make sure the placeholder's original ::after (the ALBUM ART label) is hidden */
.album-placeholder.has-cover::after{content:"В МОМЕНТА" !important;font-size:10px;letter-spacing:.2em;color:#fff;background:rgba(0,0,0,.6);padding:4px 8px}

/* ===== Batch fixes: hero cover larger, team photos, testimonials scroll, news modal ===== */

/* Bigger hero cover */
.album-placeholder{width:86% !important}

/* Team card redesign: full photo + name + role + bio */
.team-grid{grid-template-columns:repeat(4,1fr);gap:20px}
.team-card{padding:0;overflow:hidden;align-items:stretch;text-align:left}
.team-avatar{display:none}
.team-photo{width:100%;aspect-ratio:4/5;overflow:hidden;background:
  radial-gradient(circle at 30% 30%, #2a2a34, #0b0b0e);
  position:relative;border-bottom:1px solid var(--line)}
.team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.team-card:hover .team-photo img{transform:scale(1.04)}
.team-photo-empty{display:grid;place-items:center;aspect-ratio:4/5}
.team-photo-empty span{font-family:var(--display);font-size:72px;color:var(--accent)}
.team-info{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px}
.team-name{font-size:24px;margin:0}
.team-role{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin:0 0 8px}
.team-bio{color:var(--ink-2);font-size:13px;line-height:1.55;margin:0}


/* Favorite button active (in hero) */
#hero-fav.is-fav{background:var(--accent);color:#fff;border-color:var(--accent)}
#hero-fav.is-fav svg{fill:currentColor}

/* News article modal */
.article-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(5,5,7,.88);backdrop-filter:blur(14px);
  display:none;overflow-y:auto;padding:60px 20px
}
.article-overlay.open{display:block}
.article-panel{
  max-width:900px;margin:0 auto;background:var(--bg-2);border:1px solid var(--line-2);
  display:flex;flex-direction:column
}
.article-hero{position:relative;background:var(--bg-3);aspect-ratio:16/9;overflow:hidden}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(10,10,11,.85))}
.article-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;
  display:grid;place-items:center;border:1px solid var(--line-2)
}
.article-body{padding:40px 48px 56px}
.article-kicker{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.25em;text-transform:uppercase;margin-bottom:14px;display:flex;gap:14px;align-items:center}
.article-title{font-family:var(--display);font-size:clamp(36px,5vw,64px);line-height:.95;margin:0 0 20px;letter-spacing:-.005em}
.article-content{color:var(--ink-2);font-size:15px;line-height:1.72}
.article-content p{margin:0 0 18px}
.article-content h2,.article-content h3{font-family:var(--display);color:var(--ink);letter-spacing:.02em;margin:32px 0 12px}
.article-content img{max-width:100%;height:auto;margin:18px 0;border:1px solid var(--line)}
.article-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article-content blockquote{border-left:3px solid var(--accent);padding:0 0 0 18px;margin:18px 0;color:var(--ink);font-style:italic}
.article-loading{padding:80px 40px;text-align:center;color:var(--ink-3);font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.article-link-orig{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.2em;text-transform:uppercase}

@media (max-width:900px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .article-body{padding:28px 22px 40px}
}
@media (max-width:600px){
  .team-grid{grid-template-columns:1fr}
  .testimonials-scroll .testimonial{flex:0 0 280px;max-width:280px}
}

/* ===== Round 2 polish ===== */

/* Bigger logo */
.logo-img{height:60px !important;max-width:220px !important}
.logo-mark{font-size:42px !important}
.logo-mark .radio{font-size:13px !important}

/* Nav uppercase */
.nav-links a,
.drawer-nav a{text-transform:uppercase !important}

/* Enforce hero-title clamp across all layouts + devices */
.hero-title{font-size:clamp(80px,8vw,168px) !important}

/* Marquee items as links */
.marquee a.marquee-item{
  color:inherit;text-decoration:none;transition:opacity .15s
}
.marquee a.marquee-item:hover{opacity:.75;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.marquee a.marquee-item::before{content:"";width:6px;height:6px;background:#fff;border-radius:50%;display:inline-flex;margin-right:12px;flex:none}
.marquee-track{align-items:center}

/* ===== Round 2 polish ===== */

/* Bigger logo */
.logo-img{height:60px !important;max-width:220px !important}
.logo-mark{font-size:42px !important}
.logo-mark .radio{font-size:13px !important}

/* Nav uppercase */
.nav-links a,
.drawer-nav a{text-transform:uppercase !important}

/* Enforce hero-title clamp across all layouts + devices */
.hero-title{font-size:clamp(80px,8vw,168px) !important}

/* Marquee items as links */
.marquee a.marquee-item{color:inherit;text-decoration:none;transition:opacity .15s}
.marquee a.marquee-item:hover{opacity:.75;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.marquee a.marquee-item::before{content:"";width:6px;height:6px;background:#fff;border-radius:50%;display:inline-block;margin-right:12px}
.marquee-track{align-items:center}

/* Player bar: replace mini-vinyl with album art img when available */
.pl-art img{width:100%;height:100%;object-fit:cover;display:block}
.pl-art.has-art .mini-vinyl{display:none}

/* Article modal: responsive media (fix iframe/video overflow) */
.article-content iframe,
.article-content video,
.article-content embed,
.article-content object{
  width:100% !important;
  max-width:100% !important;
  height:auto;
  aspect-ratio:16/9;
  border:0;
  margin:18px 0;
  display:block
}
.article-content figure,
.article-content .wp-block-embed,
.article-content .wp-block-embed__wrapper,
.article-content .wp-block-video{
  max-width:100% !important;
  margin:18px 0;
  overflow:hidden
}
.article-content .wp-block-embed__wrapper{position:relative}
.article-content * {max-width:100%}

/* Slight logo touch: center baseline when image shown */
.logo{align-items:center}

/* ===== Player background: blurred album art (Apple Music / Spotify style) ===== */
.player{position:fixed;overflow:hidden;isolation:isolate}
.pl-bg{
  position:absolute;inset:-40px;z-index:0;
  background-size:cover;background-position:center;
  filter:blur(40px) saturate(1.6) brightness(.55);
  transform:scale(1.15);
  opacity:0;transition:opacity .6s ease, background-image .3s;
}
.pl-bg.active{opacity:.85}
/* Subtle dark overlay on top of blur so text stays readable */
.player::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(10,10,11,.40) 0%, rgba(10,10,11,.70) 100%);
  pointer-events:none
}
/* Keep player-inner above the bg + overlay */
.player-inner{position:relative;z-index:2}
/* Slight accent gradient fallback when no artwork yet */
.player:not(:has(.pl-bg.active))::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(225,29,46,.14), transparent 50%),
    radial-gradient(ellipse at 85% 50%, rgba(225,29,46,.08), transparent 50%)
}

/* ===== Fixes: player bg + volume slider ===== */

/* Let the blurred album-art bg actually show through */
.player{background:transparent !important;backdrop-filter:none !important}
/* Dim the .pl-bg scale so it doesn't leak out */
.pl-bg{inset:0 !important;transform:scale(1.25) !important}
/* Less dark overlay so image is visible */
.player::before{background:linear-gradient(180deg, rgba(10,10,11,.25) 0%, rgba(10,10,11,.60) 100%) !important}

/* Volume slider: override the static ::after, use --vol-pct var */
.pl-vol-track{position:relative;--vol-pct:70%}
.pl-vol-track::after{content:""!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;right:auto!important;width:var(--vol-pct)!important;background:var(--ink)!important;transition:width .05s linear}
.pl-vol-track:hover::after{background:var(--accent)!important}
/* Little draggable handle */
.pl-vol-track .pl-vol-knob{
  position:absolute;top:50%;width:10px;height:10px;border-radius:50%;
  background:var(--ink);border:2px solid var(--bg);
  transform:translate(-50%,-50%);left:var(--vol-pct);
  pointer-events:none;box-shadow:0 0 6px rgba(0,0,0,.4)
}
.pl-vol-track:hover .pl-vol-knob{background:var(--accent)}

/* ===== Player bg via real <img> (more reliable than background-image with blur) ===== */
#pl-bg{position:absolute;inset:0;overflow:hidden;z-index:0;opacity:0;transition:opacity .5s ease;background:transparent !important}
#pl-bg.active{opacity:1}
#pl-bg img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:blur(18px) saturate(1.5) brightness(.9);
  transform:scale(1.3);
  opacity:.65
}
/* Softer dark overlay so image is actually visible */
.player::before{background:linear-gradient(180deg, rgba(10,10,11,.20) 0%, rgba(10,10,11,.55) 100%) !important}

/* ===== REVERT: player back to solid black, remove blur bg experiment ===== */
.player{background:rgba(10,10,11,.96) !important;backdrop-filter:blur(20px) !important}
.player::before{display:none !important}
.player::after{display:none !important}
#pl-bg, #pl-bg-img, .pl-bg{display:none !important}

/* ===== Hero atmospheric bg: blurred album art behind the ENTIRE hero ===== */
:root{--hero-bg:none}
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hero-bg);
  background-size:cover;background-position:center;
  filter:blur(60px) saturate(1.3);
  transform:scale(1.15);
  opacity:.45;
  transition:opacity .6s ease, background-image .3s ease;
  pointer-events:none
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,11,.4) 0%, rgba(10,10,11,.85) 70%, var(--bg) 100%)
}
.hero-grid{position:relative;z-index:2}
.hero-art{position:relative;overflow:hidden}
@media (max-width: 900px){
  .hero::before{opacity:.25}
}

/* =========================================================
   RESPONSIVE — tablet + phone optimization pass
   ========================================================= */

/* ---------- TABLET (769-1199px) ---------- */
@media (max-width:1199px) and (min-width:769px){
  .hero{padding:32px 24px 48px}
  .section{padding:60px 24px}
  .hero-grid{grid-template-columns:1fr 1fr;gap:36px}
  .hero-art{max-width:520px;justify-self:center}
  .hero-title{font-size:clamp(72px,9vw,148px) !important}
  .hero-controls{flex-wrap:wrap;gap:12px}
  .news{grid-template-columns:repeat(2,1fr)}
  .news-card,.news-card.feature{grid-column:span 1 !important;grid-row:auto !important}
  .news-card.feature{flex-direction:column}
  .news-card.feature .news-media,.news-card.feature .news-body{flex:initial}
  .news-card.feature .news-title{font-size:28px}
  .team-grid,.listen-grid,.testimonials{grid-template-columns:repeat(2,1fr)}
  .partners{grid-template-columns:repeat(3,1fr);padding:32px;gap:20px}
  .partner img{max-height:36px !important}
  .testimonials-scroll .testimonial{flex:0 0 300px;max-width:300px}
  .foot-inner{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}
  .contacts-grid{grid-template-columns:1fr 1fr;gap:28px}
}

/* ---------- PHONE (<=767px) ---------- */
@media (max-width:767px){
  /* Nav + marquee */
  .marquee{font-size:12px;padding:6px 0}
  .marquee-track{gap:28px}
  .nav-inner{padding:14px 16px;gap:12px}
  .logo-img{height:44px !important;max-width:170px !important}
  .logo-mark{font-size:30px !important}
  .logo-mark .radio{font-size:11px !important;padding:3px 6px}
  .pill.live{display:none}
  .nav-right{gap:6px}
  .icon-btn{width:34px;height:34px}

  /* Hero */
  .hero{padding:28px 16px 48px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-art{max-width:360px;width:100%;margin:0 auto;aspect-ratio:1/1}
  .hero-art-inner{inset:20px}
  .hero-title{font-size:clamp(56px,14vw,92px) !important;line-height:.9}
  .now-kicker{font-size:10px;letter-spacing:.22em;margin-bottom:14px}
  .channel-tag{font-size:12px;padding:5px 9px;margin-bottom:12px}
  .hero-controls{flex-wrap:wrap;gap:10px;margin-top:24px}
  .hero-controls .btn{padding:12px 16px;font-size:15px}
  .hero::before{opacity:.3}

  /* Sections */
  .section{padding:44px 16px}
  .section-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
  .section-head h2{font-size:clamp(40px,10vw,64px);line-height:.92}
  .section-head .lead{font-size:13px;max-width:100%}
  .section-head .btn-ghost{align-self:flex-start !important}

  /* Channels */
  .channels{grid-template-columns:1fr;gap:14px}
  .ch-card{padding:20px;min-height:auto;gap:18px}
  .ch-title{font-size:30px}
  .ch-visual{aspect-ratio:16/9}
  .ch-visual .ch-glyph{font-size:64px}

  /* News */
  .news{grid-template-columns:1fr;gap:16px}
  .news-card,.news-card.feature{grid-column:span 1 !important;grid-row:auto !important}
  .news-card.feature{flex-direction:column}
  .news-card.feature .news-body{padding:22px}
  .news-card.feature .news-title{font-size:22px}
  .news-title{font-size:20px}
  .news-body{padding:18px;gap:10px}
  .news-excerpt{display:none !important}

  /* Testimonials carousel */
  .testimonials-scroll .testimonial{flex:0 0 260px;max-width:260px;padding:22px 20px}
  .testimonials-scroll{-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%)}
  .testimonial p{font-size:13px}

  /* Team */
  .team-grid{grid-template-columns:1fr;gap:16px}
  .team-photo{aspect-ratio:3/4;max-height:400px}
  .team-name{font-size:22px}

  /* Listen */
  .listen-grid{grid-template-columns:1fr;gap:14px}
  .listen-card{padding:22px}
  .listen-name{font-size:22px}

  /* Partners */
  .partners{grid-template-columns:repeat(2,1fr) !important;padding:20px !important;gap:14px !important}
  .partner{height:64px;padding:10px}
  .partner img{max-height:34px !important}

  /* Contacts + form */
  .contacts-grid{grid-template-columns:1fr;gap:20px}
  .opinion-form{padding:22px}
  .contact-item{padding:14px 16px;gap:12px}
  .contact-item .c-icon{width:36px;height:36px}
  .contact-item .c-value{font-size:14px}

  /* Player */
  .player-inner{padding:8px 12px;grid-template-columns:1fr;gap:8px}
  .pl-left{gap:10px}
  .pl-art{width:40px;height:40px}
  .pl-track{font-size:13px}
  .pl-ch{font-size:9px}
  .pl-artist{font-size:10px}
  .pl-right{display:none}
  .pl-center{display:flex;order:3}
  .pl-bar{display:none}
  .pl-controls{gap:12px}
  .pl-btn{width:30px;height:30px}
  .pl-btn.play{width:38px;height:38px}
  footer{padding-bottom:130px}

  /* Footer */
  .foot-inner{grid-template-columns:1fr;gap:24px}
  .foot-brand h3{font-size:44px}
  .foot-brand p{max-width:100%}
  .foot-bottom{flex-direction:column;gap:10px;text-align:center}

  /* Search overlay */
  .search-overlay{padding:40px 10px 20px}
  .search-panel{border:0}
  .search-head{padding:6px 8px 6px 14px}
  .search-head input{font-size:18px;padding:12px 0}
  .search-result{padding:10px 14px;gap:10px}
  .search-result .r-thumb{width:44px;height:44px}
  .search-result .r-title{font-size:15px}
  .search-result .r-sub{font-size:11px}

  /* Article modal */
  .article-overlay{padding:28px 8px 80px}
  .article-panel{border:0}
  .article-body{padding:22px 18px 36px}
  .article-title{font-size:clamp(28px,7vw,44px);line-height:1}
  .article-content{font-size:14px;line-height:1.65}
  .article-hero{aspect-ratio:4/3}

  /* Mobile drawer */
  .drawer-panel{width:88vw;padding:18px;gap:18px}
  .drawer-nav a{font-size:20px;padding:12px 6px}

  /* Tweaks panel (if shown) */
  .tweaks{right:12px;bottom:calc(env(safe-area-inset-bottom) + 140px);width:calc(100vw - 24px);max-width:320px}
}

/* ---------- SMALL PHONES (<=380px) ---------- */
@media (max-width:380px){
  .logo-img{height:38px !important;max-width:140px !important}
  .logo-mark{font-size:24px !important}
  .nav-right .icon-btn:not(#nav-menu-btn){display:none}
  .hero-title{font-size:clamp(48px,13vw,72px) !important}
  .section-head h2{font-size:36px}
  .hero-controls .btn{width:100%;justify-content:center}
  .pl-ch{display:none}
  .pl-track{font-size:12px}
  .article-title{font-size:24px}
}

/* =========================================================
   MOBILE POLISH PASS
   - Hard-cap every container to viewport (no horizontal scroll EVER)
   - Bigger Play CTA
   - Channel chips always 1-column on phone
   - Cover image clamped to viewport width
   - Studio news strip = scrolling marquee on mobile, static on desktop
   ========================================================= */
html,body{overflow-x:hidden;max-width:100vw}
*{box-sizing:border-box}
img{max-width:100%;height:auto}

@media (max-width:767px){
  /* --- HARD overflow protection on every layout container --- */
  body, .hero, .hero-grid, .hero-now, .hero-art,
  .hero-channels, .hero-controls,
  .section, .section-head, .section-divider,
  .news, .testimonials, .testimonials-marquee,
  .channels, .partners, .contacts-grid,
  .listen-grid, .team-grid, .foot-inner,
  .marquee, .marquee-track,
  .quote-strip, .quote-strip-inner,
  .studio-strip, .studio-strip-inner,
  .nav, .nav-inner, footer, .player, .player-inner{
    max-width:100vw !important;
    box-sizing:border-box;
  }
  .hero, .section, .nav-inner, footer{
    width:100%;
  }

  /* --- Hero PLAY button: dominant, full-width, easy to thumb-tap --- */
  .hero-controls{flex-direction:column;align-items:stretch;gap:12px;margin-top:22px;width:100%}
  .hero-controls .btn{
    width:100%;justify-content:center;
    padding:20px 22px;font-size:19px;letter-spacing:.12em;
    min-height:60px;
  }
  .hero-controls .btn-primary svg{width:20px;height:20px}
  #hero-play-label{font-size:18px;letter-spacing:.14em}

  /* --- Channel chips: ALWAYS 1 column on phone, full width, no overflow --- */
  .hero-channels{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px;width:100%;max-width:100%;margin-top:18px
  }
  .hc-chip{
    width:100%;max-width:100%;
    padding:14px;gap:12px;min-height:60px;
    box-sizing:border-box;
  }
  .hc-chip .hc-glyph{font-size:24px;width:24px;flex:none}
  .hc-chip .hc-body{flex:1 1 0;min-width:0;overflow:hidden}
  .hc-chip .hc-name{font-size:15px;letter-spacing:.04em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hc-chip .hc-tag{font-size:9px;letter-spacing:.18em}
  .hc-chip .hc-state{font-size:8px;letter-spacing:.18em;flex:none}

  /* --- Hero cover image: NEVER exceeds viewport --- */
  .hero{padding:24px 14px 40px}
  .hero-art{
    max-width:min(320px, calc(100vw - 32px)) !important;
    width:100%;
    margin:0 auto;
    aspect-ratio:1/1;
  }
  .hero-art img,
  .hero-art .album-cover,
  #hero-cover{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    object-fit:cover;
    display:block;
  }
  .hero-grid{grid-template-columns:1fr;gap:24px;width:100%}

  /* --- Nav top-right: declutter --- */
  .nav-inner{padding:12px 14px;gap:10px}
  .nav-right{gap:4px;flex-wrap:nowrap}
  #pl-video,#pl-snapshots,#pl-cinema{display:none !important}
  .kicker-btn .kicker-tip{display:none}

  /* --- Quote strip + studio strip: tighter --- */
  .quote-strip-inner{padding:6px 14px}
  .studio-strip{margin-top:12px}
  .studio-strip-label{padding:0 12px;font-size:10px;letter-spacing:.14em}

  /* --- Studio news strip: SCROLLING marquee on mobile (text usually doesn't
        fit a phone screen). Reactivate the keyframe animation that's off on
        desktop, so all items scroll right→left. --- */
  .studio-strip-inner{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
    mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
    padding:0;
  }
  .studio-strip-track{
    display:flex !important;flex-wrap:nowrap !important;gap:0 !important;
    width:max-content !important;
    animation:ssScroll var(--ss-dur, 36s) linear infinite;
    will-change:transform;
    padding-left:14px;
  }
  .studio-strip:hover .studio-strip-track{animation-play-state:paused}
  .studio-strip-track > .ss-item,
  .studio-strip-track > .ss-item ~ .ss-item{
    display:inline-flex !important;
    flex:0 0 auto !important;
    padding:10px 22px;
    gap:10px;
    border-right:1px solid rgba(225,29,46,.22);
  }
  .studio-strip-track > .ss-item:last-child{border-right:none}
  .ss-item .ss-time{font-size:10px}
  .ss-item .ss-text{
    font-size:13px;letter-spacing:0;
    white-space:nowrap !important;overflow:visible !important;
    text-overflow:clip !important;
    flex:none !important;
  }

  /* --- Hero title: no clamp so it never overflows --- */
  .hero-title{font-size:clamp(44px,12vw,80px) !important;word-break:break-word}
  .hero-title .artist,.hero-title .track{display:block}

  /* --- Section padding tighter --- */
  .section{padding:36px 14px}
}

/* Marquee keyframe used by mobile studio-strip animation */
@keyframes ssScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media (max-width:380px){
  .hero-controls .btn{padding:18px;font-size:17px;min-height:56px}
  .hc-chip{padding:12px;min-height:56px}
  .hc-chip .hc-name{font-size:14px}
  .hero-art{max-width:min(280px, calc(100vw - 28px)) !important}
  .studio-strip-label span:last-child{display:none}
}

/* Safe-area for notched devices */
@supports(padding:env(safe-area-inset-bottom)){
  .player{padding-bottom:env(safe-area-inset-bottom)}
  footer{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
  @media (max-width:767px){
    footer{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
  }
}

/* Touch devices: bigger tap targets, no hover-dependent features */
@media (hover:none) and (pointer:coarse){
  .testimonials-scroll:hover .testimonials-track{animation-play-state:running}
  .btn,.icon-btn,.pl-btn{min-height:44px;min-width:44px}
  .nav-links a{padding:8px 4px}
}

/* Drawer logo (mobile menu head) */
.drawer-logo{height:50px;width:auto;max-width:180px;object-fit:contain}

/* ===== Team photos: cinematic monochrome treatment ===== */
.team-photo{position:relative !important;isolation:isolate;border-bottom:2px solid var(--accent) !important}
.team-photo img{
  filter:grayscale(1) contrast(1.1) brightness(0.75);
  transition:filter .4s ease, transform .4s ease
}
.team-photo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,11,.20) 0%, rgba(10,10,11,.85) 100%);
  mix-blend-mode:multiply;
  opacity:1;transition:opacity .4s ease
}
.team-photo::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, transparent 50%, rgba(225,29,46,.15) 100%);
  mix-blend-mode:overlay
}
.team-card:hover .team-photo img{
  filter:grayscale(0) contrast(1) brightness(0.9);
  transform:scale(1.04)
}
.team-card:hover .team-photo::after{opacity:.4}
.team-card{background:var(--bg-2) !important;border:1px solid var(--line) !important}
.team-name{
  font-family:var(--display) !important;
  font-size:28px !important;
  letter-spacing:.02em !important;
  color:var(--ink) !important;
  margin:0 !important
}
.team-role{
  font-family:var(--mono) !important;
  font-size:10px !important;
  letter-spacing:.25em !important;
  text-transform:uppercase !important;
  color:var(--accent) !important;
  margin:0 0 8px !important
}
.team-bio{
  color:var(--ink-2) !important;
  line-height:1.6 !important;
  font-size:13px !important;
  margin:0 !important
}

/* ===== Marquee: no underline on hover ===== */
.marquee a.marquee-item:hover{text-decoration:none !important}
.marquee a.marquee-item{text-decoration:none !important}

/* Oswald: tighter weight for rock feel; consistent Cyrillic+Latin metrics */
.hero-title,
.section-head h2,
.ch-title,
.news-title,
.listen-name,
.team-name,
.logo-mark,
.foot-brand h3,
.article-title,
.marquee,
.btn,
.nav-links a,
.drawer-nav a,
.channel-tag,
.pl-track{
  font-family:'Oswald','Bebas Neue',Impact,'Arial Narrow',sans-serif !important;
  font-weight:600 !important
}
.hero-title,.section-head h2,.foot-brand h3,.article-title{font-weight:700 !important}
.marquee{font-weight:500 !important;letter-spacing:.12em !important}

/* =========================================================
   HERO ATMOSPHERIC POLISH PASS
   ========================================================= */

/* Blur backdrop — stronger visibility + lighter base */
.hero{background-color:#1a1a20 !important;padding:48px 28px 64px !important}
.hero::before{opacity:.65 !important;filter:blur(80px) saturate(1.5) brightness(1.1) !important}

/* Softer overlay on top, darker on bottom */
.hero::after{background:linear-gradient(180deg,
  rgba(10,10,11,.15) 0%,
  rgba(10,10,11,.55) 60%,
  rgba(10,10,11,.9) 100%) !important}

/* Radial warm spotlight behind album art */
.hero-art-inner{position:relative}
.hero-art-inner::before{
  content:"";position:absolute;inset:-40px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at center, rgba(225,29,46,.22) 0%, transparent 60%);
  filter:blur(40px)
}

/* Album card floats above background */
.hero-art{
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 60px -10px rgba(225,29,46,.3);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease
}
.hero-art:hover{
  transform:scale(1.02) rotate(-0.5deg);
  box-shadow:
    0 50px 100px -20px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 80px -5px rgba(225,29,46,.45)
}

/* Text visibility */
.hero-title .track{color:var(--ink-2) !important}

/* Film grain noise */
.hero{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/></svg>")
}

/* Pulsing LIVE dot */
.now-kicker .live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);margin-right:4px;
  box-shadow:0 0 0 0 rgba(225,29,46,.7);
  animation:livePulse 1.8s infinite
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(225,29,46,.7)}
  70%{box-shadow:0 0 0 12px rgba(225,29,46,0)}
  100%{box-shadow:0 0 0 0 rgba(225,29,46,0)}
}

/* Play CTA: bigger + glow */
#hero-play{
  padding:16px 28px !important;
  font-size:20px !important;
  box-shadow:0 0 40px -10px var(--accent);
  transition:transform .25s ease, box-shadow .25s ease, background .15s
}
#hero-play:hover{
  transform:translateY(-2px);
  box-shadow:0 0 60px -5px var(--accent)
}

/* ===== Hero album art: simplified single-frame ===== */

/* Hide old inner box + any leftover decorative pseudos */
.hero-art-inner{display:none !important}
.hero-art::after{display:none !important}
#hero-cover-box::after{content:none !important;display:none !important}

/* Clean square base */
.hero-art{
  aspect-ratio:1/1;
  position:relative !important;
  background:var(--bg-2) !important;
  border:none !important;
  overflow:hidden
}

/* Readability gradient: dark top + dark bottom */
.hero-art::before{
  content:"" !important;
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 20%, transparent 80%, rgba(0,0,0,.6) 100%) !important;
  background-size:100% 100% !important;
  opacity:1 !important
}

/* Album cover fills the whole square */
.hero-art .album-cover{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  object-fit:cover;
  opacity:0;transition:opacity .5s ease;
  z-index:0
}
#hero-cover-box.has-cover .album-cover{opacity:1}

/* Vinyl fallback only when no real cover */
.hero-art > .vinyl{
  position:absolute;left:50%;top:50%;
  width:40%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, var(--accent) 0 8%, #111 8% 10%, #18181d 10% 100%);
  animation:spin 10s linear infinite;
  z-index:1;opacity:.9
}
.hero-art > .vinyl::after{
  content:"";position:absolute;inset:30%;border-radius:50%;background:#0b0b0e;border:1px solid #2a2a32
}
#hero-cover-box.has-cover > .vinyl{display:none !important}

/* Meta overlays on image */
.hero-art .hero-art-meta{
  position:absolute;z-index:3;pointer-events:none;
  left:16px;right:16px;
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  background:none !important;border:0 !important;padding:0 !important;
  width:auto !important;height:auto !important;inset:auto
}
.hero-art .hero-art-meta.top{top:12px}
.hero-art .hero-art-meta.bottom{bottom:12px}

/* NOW PLAYING glass pill */
.hero-art .hero-art-badge{
  position:absolute;top:40px;left:16px;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:#fff;text-transform:uppercase;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.08)
}

/* Corner brackets on top */
.hero-corners{z-index:4}

/* =========================================================
   QUOTE STRIP (under nav)
   ========================================================= */
.quote-strip{border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);position:relative;z-index:5}
.quote-strip-inner{max-width:1400px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:24px}
.qs-label{font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:var(--accent);flex:none;text-transform:uppercase}
/* Quote strip: continuous horizontal marquee — newest first, full comment,
   author up front. Scrolls like the news marquee at the very top.
   Two layers: outer .quote-strip-inner clips & masks; inner #qs-track is a
   max-content flex row that animates translateX. */
.quote-strip{overflow:hidden}
.quote-strip-inner{
  /* Only fade the right edge — the left stays sharp so the first comment is
     fully readable when the page loads. */
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 80px), transparent 100%);
  mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 80px), transparent 100%);
}
#qs-track{
  display:flex !important;flex-wrap:nowrap !important;gap:0 !important;
  width:max-content !important;flex:0 0 auto !important;min-width:0 !important;
  height:auto !important;position:static !important;overflow:visible !important;
  /* Single right→left marquee. The newest comment starts at the right edge of
     the visible strip (--qs-start is set inline by JS to the container's
     pixel width, so item0 sits flush with the mask's right edge — visible
     immediately at load, no empty wait). The track then travels exactly one
     items-set width (-50% of the duplicated track), keeping the loop seam
     invisible. `backwards` fill applies the `from` keyframe before the
     animation begins so there's no translateX(0) flash on first paint. */
  animation: qsScroll var(--qs-dur, 90s) linear infinite backwards;
  will-change:transform;
  padding-left:0;
  transform: translateX(var(--qs-start, 100%));
}
.quote-strip:hover #qs-track{animation-play-state:paused}
@keyframes qsScroll{
  from{transform:translateX(var(--qs-start, 100%))}
  to  {transform:translateX(calc(var(--qs-start, 100%) - 50%))}
}
.qs-item{
  display:inline-flex !important;align-items:center;gap:14px;
  flex:0 0 auto !important;
  font-family:var(--body);font-size:18px;font-weight:500;letter-spacing:.02em;
  line-height:1.3;
  color:var(--ink-2);padding:0 32px;
  border-right:1px solid var(--line);
  position:static !important;opacity:1 !important;transform:none !important;
  white-space:nowrap;text-transform:uppercase;
}
.qs-item:last-child{border-right:none}
.qs-item .author{
  color:var(--ink);font-family:var(--body);font-weight:700;
  letter-spacing:.02em;font-size:18px;text-transform:uppercase;flex:none;
  white-space:nowrap;
}
.qs-item .author::after{content:" -";color:var(--accent);margin-left:10px;font-weight:500}
.qs-item .text{
  font-style:normal;flex:none;white-space:nowrap;font-weight:400;
  text-overflow:clip;overflow:visible;text-transform:uppercase;
}
.qs-dots{display:flex;gap:6px;flex:none}
.qs-dots i{display:block;width:5px;height:5px;border-radius:50%;background:var(--line-2);transition:background .2s;cursor:pointer}
.qs-dots i.active{background:var(--accent)}
@media (max-width:767px){
  .quote-strip-inner{padding:10px 16px;gap:12px}
  .qs-label{font-size:9px;letter-spacing:.2em}
  .qs-item .author{display:none}
  .qs-dots{display:none}
}

/* ---------- STUDIO NEWS STRIP ---------- */
/* Same marquee mechanic as the quote strip, but red "ON AIR" accent so fresh
   studio updates feel urgent and distinct from listener comments above. */
.studio-strip{
  background:linear-gradient(90deg, #1a0508 0, #0b0b0e 30%, #0b0b0e 70%, #1a0508 100%);
  border-top:1px solid rgba(225,29,46,.35);
  border-bottom:1px solid rgba(225,29,46,.35);
  margin-top:18px;
  overflow:hidden;
  position:relative;
}
/* Inner row mirrors .nav-inner / .quote-strip-inner / .hero-grid so the
   first child (label or CTA) sits exactly under the logo and the red track
   line in the hero. The strip's gradient fills the viewport behind it. */
.studio-strip-row{
  display:flex;align-items:stretch;min-height:54px;
  max-width:1400px;margin:0 auto;padding:0 28px;
  position:relative;
}
/* Permanent "ПУСНИ НИ РОК" CTA — sits right after the studio-strip label so
   it's the first thing the listener sees, before any scrolling news or
   dedications. Matches the label's chevron-right shape for visual continuity. */
.studio-strip-cta{
  display:none;flex:none;align-items:center;gap:8px;
  padding:0 22px;background:var(--accent);color:#fff !important;
  font-family:var(--display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;white-space:nowrap;text-decoration:none;
  position:relative;z-index:2;
  transition:filter .12s;
}
.studio-strip-cta:hover{filter:brightness(1.12);text-decoration:none}
.studio-strip-cta svg{margin-top:1px}
/* When approved listener requests are in the feed, swap label -> CTA. */
.studio-strip.has-requests .studio-strip-label{display:none !important}
.studio-strip.has-requests .studio-strip-cta{display:flex}
.studio-strip-label{
  display:flex;align-items:center;gap:10px;flex:none;
  padding:0 22px;background:var(--accent);color:#fff;
  font-family:var(--display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
}
.studio-strip-dot{
  display:block;width:9px;height:9px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);
  animation:livePulse 1.6s ease-out infinite;
}
.studio-strip-inner{
  flex:1;min-width:0;overflow:hidden;
  display:flex;align-items:center;
  padding:0 24px;
}
.studio-strip-track{
  display:flex;align-items:center;gap:14px;
  width:100%;min-width:0;
}
/* Desktop: only show the first item statically. JS renders all (duplicated)
   so the mobile marquee has content to scroll; this hides the rest here. */
.studio-strip-track > .ss-item ~ .ss-item{display:none}
.ss-item{
  display:flex;align-items:center;gap:14px;flex:1;min-width:0;
  padding:11px 0;
}
.ss-item .ss-time{
  color:var(--accent);font-weight:700;font-family:var(--mono);font-size:12px;
  letter-spacing:.05em;flex:none;
}
.ss-item .ss-text{
  color:var(--ink);font-family:Inter,system-ui,sans-serif;
  font-weight:500;letter-spacing:.01em;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:1;
}
.ss-item a.ss-text{color:var(--ink);text-decoration:none}
.ss-item a.ss-text:hover{color:var(--accent);text-decoration:underline}
/* Listener-request items stand out — all-caps + heavier weight so they're
   distinguishable from posted studio news at a glance. */
.ss-item--request .ss-text{
  text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  color:#fff
}
@media (max-width:680px){
  .studio-strip-label{padding:0 14px;font-size:11px;letter-spacing:.14em}
  .studio-strip-label span:last-child{display:none}
  .ss-item{font-size:13px;padding:10px 18px}
  .studio-strip-cta{padding:0 14px;font-size:11px;letter-spacing:.12em}
  /* CTA stays in normal flow; the inner-track mask fades content before it
     reaches the button so scrolling items appear to slide behind, never on
     top of, the CTA. */
  .studio-strip-inner{
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  }
}

.testimonials-head{align-items:flex-start !important}

/* Mobile-friendlier card width for the marquee */
@media (max-width:1100px){
  .testimonials-scroll .testimonial{flex:0 0 300px;max-width:300px;padding:24px 20px}
  .testimonials-scroll .testimonial .t-author{font-size:16px}
  .testimonials-scroll .testimonial .t-text{font-size:13px}
}
@media (max-width:680px){
  .testimonials-scroll .testimonial{flex:0 0 84vw;max-width:84vw}
  .testimonials-scroll{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}
@media (max-width:767px){
  .testimonials-head .btn-ghost{align-self:flex-start !important;margin-top:8px}
}

/* =========================================================
   USER REQ: brightness filter on has-cover hero
   ========================================================= */
#hero-cover-box.has-cover{
  background:#0b0b0e !important;
  filter:brightness(78%)
}

/* ===== Hero title: user-spec typography for .artist and .track ===== */
.hero-title .artist,
#hero-artist{
  display:block;
  color:#FFF !important;
  font-family:"Oswald", "Bebas Neue", Impact, sans-serif !important;
  font-size:70px !important;
  font-weight:400 !important;
  text-decoration:none;
  line-height:.9em !important;
  letter-spacing:2.5px !important;
  word-spacing:0
}
.hero-title .track,
#hero-track{
  display:block;
  color:#FFF !important;
  font-family:"Oswald", "Bebas Neue", Impact, sans-serif !important;
  font-size:70px !important;
  font-weight:400 !important;
  text-decoration:none;
  line-height:1.1em !important;
  letter-spacing:2.5px !important;
  word-spacing:0
}
/* Disable parent clamp for hero-title so child size applies cleanly */
.hero-title{font-size:initial !important;line-height:initial !important}

/* qs-dots are unused now (marquee replaces dot navigation), keep compact in case */
.qs-dots i{width:4px;height:4px}

/* Revert hero artist/track sizes to original clamp; keep only Oswald font */
.hero-title{font-size:clamp(80px,8vw,168px) !important;line-height:.86 !important}
.hero-title .artist, #hero-artist,
.hero-title .track,  #hero-track{
  font-size:inherit !important;
  line-height:inherit !important;
  letter-spacing:-.01em !important;
  font-family:"Oswald","Bebas Neue",Impact,sans-serif !important
}

/* Smaller hero title per user request */
.hero-title{font-size:clamp(56px,6vw,120px) !important}

/* Smaller hero album art */
.hero-art{max-width:440px;justify-self:end;width:100%}

/* Hero title per-element overrides */
#hero-artist{line-height:1 !important;margin-bottom:12px !important}
#hero-track{font-size:3.2rem !important}

/* Long artist/track names: clamp each to a single line with ellipsis (…)
   so the listen buttons stay anchored under the title and don't get pushed
   down when the metadata is long (e.g. "THE WARNING & CARIN LEÓN"). */
#hero-artist, #hero-track,
.hero-title .artist, .hero-title .track{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  min-width:0;
}
/* Red accent bar: lift it off .track (which has overflow:hidden from the
   ellipsis rule above and was clipping it) and onto .hero-title. The bar now
   spans the full height of both lines — a single clean marker for the whole
   "now playing" block, instead of a stubby fragment beside just the track. */
.hero-title{position:relative}
.hero-title::before{
  content:"";position:absolute;
  left:-28px;top:8%;bottom:8%;width:4px;
  background:var(--accent);
}
.hero-title .track::before{display:none !important}

/* Track line-height was inheriting .86 from .hero-title — too tight for an
   overflow:hidden box: descenders (g, p, y…) were getting clipped at the
   bottom. Give it room without breaking single-line layout. */
#hero-track{line-height:1.1 !important}

/* Cast button */
#hero-cast.is-casting{background:var(--accent);color:#fff;border-color:var(--accent)}
#hero-cast.is-casting svg{animation:castWaves 1.4s ease-in-out infinite}
@keyframes castWaves{0%,100%{opacity:1}50%{opacity:.5}}

/* Quote strip counter (instead of 189 dots) */
.qs-counter{
  display:inline-flex !important;align-items:center;gap:4px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);flex:none;min-width:52px;justify-content:flex-end
}
.qs-counter .qs-n{color:var(--accent);font-weight:600}
.qs-counter .qs-sep{opacity:.5}
.qs-counter .qs-total{color:var(--ink-2)}
/* No more dots fallback */
.qs-counter i{display:none !important}

/* ===== TV Cast Modal (QR + URL) ===== */
.tvcast-overlay{
  position:fixed;inset:0;z-index:95;background:rgba(5,5,7,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:none;overflow-y:auto;padding:40px 20px
}
.tvcast-overlay.open{display:block}
.tvcast-panel{
  max-width:760px;margin:40px auto;background:var(--bg-2);border:1px solid var(--line-2);
  padding:40px;position:relative
}
.tvcast-close{
  position:absolute;top:16px;right:16px;
  width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.6);
  color:#fff;display:grid;place-items:center;border:1px solid var(--line-2);cursor:pointer
}
.tvcast-close:hover{background:var(--accent);border-color:var(--accent)}
.tvcast-head{margin-bottom:32px}
.tvcast-head .eyebrow{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.3em;text-transform:uppercase;margin-bottom:10px}
.tvcast-head h2{font-family:var(--display);font-size:clamp(32px,4vw,54px);margin:0;line-height:.95}
.tvcast-body{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start}
.tvcast-qr{
  background:#fff;padding:12px;width:280px;height:280px;
  display:grid;place-items:center;flex:none
}
.tvcast-qr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.tvcast-steps{display:flex;flex-direction:column;gap:14px}
.tvcast-step{font-size:14px;line-height:1.55;color:var(--ink-2)}
.tvcast-step b{color:var(--accent);font-family:var(--display);font-size:16px;margin-right:6px;letter-spacing:.05em}
.tvcast-url{
  font-family:var(--mono);font-size:13px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);
  padding:12px 14px;word-break:break-all;cursor:pointer;transition:border-color .2s
}
.tvcast-url:hover{border-color:var(--accent)}
.tvcast-url::after{content:" ↗ КЛИКНИ ЗА КОПИРАНЕ";color:var(--ink-3);font-size:10px;letter-spacing:.15em}
.tvcast-note{font-size:12px;color:var(--ink-3);font-style:italic;margin-top:10px;line-height:1.5}
@media (max-width:700px){
  .tvcast-panel{padding:28px 22px}
  .tvcast-body{grid-template-columns:1fr;gap:24px}
  .tvcast-qr{width:240px;height:240px;margin:0 auto}
}

/* Kill channel card "page link" text */
.ch-listeners{display:none !important}
.ch-foot{justify-content:flex-end !important}

/* Hero-now wider */
.hero-now{width:110%}

/* ===== Live visitor toasts (top-right stack) ===== */
/* Lowered to 120px so the toast doesn't overlap the nav's kicker-btn row
   (bell / video / snapshots / cinema). At 80px it covered them on landing. */
#listener-toasts{
  position:fixed;top:120px;right:20px;z-index:200;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none
}
.listener-toast{
  background:rgba(10,10,11,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-left:4px solid var(--accent);
  padding:18px 22px;
  display:flex;align-items:center;gap:16px;
  min-width:320px;max-width:400px;
  transform:translateX(120%);opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.7);
  pointer-events:auto
}
.listener-toast.show{transform:translateX(0);opacity:1}
.lt-icon{
  width:46px;height:46px;
  background:var(--accent);color:#fff;
  display:grid;place-items:center;
  font-size:22px;border-radius:50%;flex:none
}
.lt-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.lt-title{
  font-family:var(--display);font-size:16px;letter-spacing:.1em;
  color:var(--ink);text-transform:uppercase
}
.lt-city{
  font-family:var(--mono);font-size:11px;color:var(--ink-2);
  letter-spacing:.14em;text-transform:uppercase
}
@media (max-width:767px){
  #listener-toasts{top:100px;right:12px;left:12px}
  .listener-toast{min-width:0;max-width:none}
}

/* Toast: channel line */
.listener-toast .lt-ch{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.14em;margin-top:3px;text-transform:uppercase
}
.listener-toast .lt-ch b{color:var(--accent);font-family:var(--display);font-weight:600;letter-spacing:.05em;font-size:13px;text-transform:uppercase}
.listener-toast .lt-ch-sub{margin-top:1px}
.listener-toast .lt-ch-sub b{color:var(--ink);font-size:12px}

/* Bigger hero title */
.hero-title{font-size:clamp(54px,6vw,118px) !important}

/* Bigger listener toast */
.listener-toast{
  padding:24px 30px !important;
  gap:20px !important;
  min-width:420px !important;max-width:520px !important;
  border-left-width:6px !important
}
.listener-toast .lt-icon{
  width:60px !important;height:60px !important;
  font-size:28px !important
}
.listener-toast .lt-title{font-size:20px !important}
.listener-toast .lt-city{font-size:13px !important}
.listener-toast .lt-ch{font-size:12px !important;margin-top:6px !important}
.listener-toast .lt-ch b{font-size:14px !important}
.listener-toast .lt-ch-sub{margin-top:7px !important}
.listener-toast .lt-ch-sub b{font-size:13px !important}
@media (max-width:767px){
  .listener-toast{min-width:0 !important;max-width:none !important;padding:18px 22px !important}
  .listener-toast .lt-icon{width:50px !important;height:50px !important;font-size:24px !important}
  .listener-toast .lt-title{font-size:17px !important}
}

/* ===== News archive full-page overlay ===== */
.archive-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(5,5,7,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:none;overflow-y:auto;padding:60px 20px 80px
}
.archive-overlay.open{display:block}
.archive-overlay .archive-panel{
  max-width:1400px;margin:0 auto;background:var(--bg);
  border:1px solid var(--line-2);padding:40px 40px 56px
}
.archive-head-bar{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--line)
}
.archive-head-bar .eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase
}
.archive-overlay .news{grid-template-columns:repeat(12,1fr);gap:20px}
.archive-overlay .news-card{grid-column:span 4}
.archive-overlay .news-card.feature{grid-column:span 4;grid-row:auto;flex-direction:column}
.archive-overlay .news-card.feature .news-body{padding:24px}
.archive-overlay .news-card.feature .news-title{font-size:24px}
@media (max-width:900px){
  .archive-overlay{padding:20px 12px 60px}
  .archive-overlay .archive-panel{padding:24px 20px 40px}
  .archive-overlay .news{grid-template-columns:1fr}
  .archive-overlay .news-card,
  .archive-overlay .news-card.feature{grid-column:span 1}
}

/* ===== News archive pagination ===== */
.archive-pager{
  display:flex;justify-content:center;align-items:center;gap:6px;
  margin-top:48px;flex-wrap:wrap
}
.archive-pager .ap-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);
  transition:border-color .15s, background .15s, color .15s;
  text-decoration:none
}
.archive-pager button.ap-btn{cursor:pointer}
.archive-pager a.ap-btn:hover,
.archive-pager button.ap-btn:not(.active):not(.disabled):hover{border-color:var(--line-2);background:var(--bg-3);color:var(--ink)}
.archive-pager .ap-btn.active{border-color:var(--accent);background:var(--accent);color:#fff}
.archive-pager .ap-btn.disabled{opacity:.35;cursor:not-allowed}
.archive-pager .ap-dots{
  font-family:var(--mono);font-size:14px;color:var(--ink-3);padding:0 6px
}
.archive-head{padding-top:60px;padding-bottom:20px}

/* Hero art: bound width, align right so it sits closer to title block */
.hero-art{max-width:480px;width:100%;margin-left:auto}
@media (max-width:900px){
  .hero-art{max-width:none;margin-left:0}
}

/* ===== Hero channel switcher chips ===== */
.hero-channels{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  margin-top:22px;max-width:560px
}
.hc-chip{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;background:var(--bg-2);border:1px solid var(--line);
  color:var(--ink-2);text-align:left;cursor:pointer;
  transition:border-color .15s, background .15s, transform .1s;
  position:relative;overflow:hidden
}
.hc-chip:hover{border-color:var(--line-2);background:var(--bg-3);color:var(--ink)}
.hc-chip:active{transform:translateY(1px)}
.hc-chip .hc-glyph{
  font-family:var(--display);font-size:22px;line-height:1;color:var(--ink-3);
  flex:none;width:28px;text-align:center;transition:color .15s
}
.hc-chip .hc-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hc-chip .hc-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:var(--ink-3);text-transform:uppercase
}
.hc-chip .hc-name{
  font-family:var(--display);font-size:14px;letter-spacing:.06em;
  color:var(--ink);line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.hc-chip .hc-state{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  color:var(--ink-3);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:5px;flex:none
}
.hc-chip .hc-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(225,29,46,.6);animation:pulse 1.6s infinite
}
.hc-chip.active{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(225,29,46,.12), rgba(225,29,46,.03))
}
.hc-chip.active .hc-glyph{color:var(--accent)}
.hc-chip.active .hc-state{color:var(--accent)}
.hc-chip.active::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)
}

@media (max-width:900px){
  .hero-channels{max-width:none}
}
@media (max-width:520px){
  .hero-channels{grid-template-columns:1fr}
}

/* =========================================================
   CINEMA MODE — video fills the ENTIRE hero (edge to edge,
   past the hero padding). Cover image, vinyl, corners, channels
   grid are hidden; artist+track slide to the center over the video.
   When a video is actually playing the blurred-album fallback bg
   is hidden too (otherwise it shows behind the iframe). When no
   video is playing, the blurred bg stays as graceful fallback.
   ========================================================= */
body.cinema-mode .hero{ min-height:62vh; }

/* Drop the grid's positioning so .hero becomes the absolute container.
   With .hero-grid static, we can pin .hero-art to the hero's padding box
   and bleed it edge-to-edge past the hero's own padding. */
body.cinema-mode .hero-grid{
  position:static;
  /* Override the base `display:grid` so we can vertically center the text
     column. In cinema mode .hero-art is absolutely positioned out of flow,
     so .hero-now is the only flex item and gets fully centered. */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:55vh;
}

/* The art container becomes a full-bleed background layer.
   IMPORTANT: must use #hero-cover-box (id) to beat the existing
   `#hero-cover-box{position:relative}` rule on line 571 — the id selector
   has specificity (1,0,0) and would otherwise override our positioning.
   Above .hero::after (z:1) so the existing !important overlay (which fades
   to .9 alpha at the bottom) doesn't darken the video into invisibility.
   Darkening the video itself is handled by the brightness filter below. */
body.cinema-mode #hero-cover-box{
  position:absolute !important;
  inset:0 !important;
  width:auto; height:auto;
  max-width:none;
  aspect-ratio:auto;
  border:0 !important;
  background:transparent !important;
  z-index:2;
  margin:0;
}
/* Strip every decorative layer except the video / cover image itself */
body.cinema-mode #hero-cover-box::before,
body.cinema-mode #hero-cover-box::after,
body.cinema-mode #hero-cover-box .hero-art-inner,
body.cinema-mode #hero-cover-box .hero-art-meta,
body.cinema-mode #hero-cover-box .hero-art-badge,
body.cinema-mode #hero-cover-box .hero-corners,
body.cinema-mode #hero-cover-box .vinyl{
  display:none !important;
}
/* Cover image: only hide when an actual video iframe is showing. In
   snapshots mode (no .has-video class) the cycling thumbnails ARE the cover
   image, so we want it visible as the full-hero background. */
body.cinema-mode #hero-cover-box.has-video #hero-cover{
  display:none !important;
}
/* Make the cover image fully opaque in cinema mode (not the .85 dim) so
   snapshots read as "background", and add the same brightness dim as video. */
body.cinema-mode #hero-cover-box #hero-cover{
  opacity:1 !important;
  filter:saturate(1.05) brightness(.55);
}
/* Drop the rounded corners and CRT shadow so the iframe bleeds clean */
body.cinema-mode #hero-cover-box.has-video #hero-video-wrap{
  border-radius:0;
  box-shadow:none;
  animation:none;
}
/* The wrap's ::before / ::after stack scanlines + a top mask + vignette
   designed for the tiny 520x520 frame. At full-hero size those masks cover
   roughly the top 20% and bottom 28% of the screen and vignette the edges
   nearly black — kill them in cinema mode so the video is actually visible. */
body.cinema-mode #hero-cover-box #hero-video-wrap::before,
body.cinema-mode #hero-cover-box #hero-video-wrap::after{
  display:none !important;
}

/* The text column floats above with stronger z-index and centered layout.
   z-index must beat .hero-art (now z:2) so the text stays on top of video. */
body.cinema-mode .hero-now{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px 16px;
  animation:cinema-slide .55s cubic-bezier(.2,.7,.2,1) both;
  /* Shadow replaces the now-useless .hero::after overlay (it sits below the
     video at z:2, so we can't rely on it for legibility). */
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.5);
}
/* Channel tag stays visible — listener needs to see WHICH channel is playing
   (not just "В МОМЕНТА - LIVE" which is identical for all four channels). */
body.cinema-mode .channel-tag{
  display:inline-flex;
  margin:0 auto 18px;
}
body.cinema-mode .hero-channels{ display:none; }
body.cinema-mode .now-kicker{ justify-content:center; margin-bottom:14px; }
body.cinema-mode .hero-title{ text-align:center; }
body.cinema-mode .hero-title .track::before{ display:none; }
body.cinema-mode .hero-controls{ justify-content:center; }

/* Sole source of darkening — the video iframe itself. We cannot use the
   .hero::after overlay (it has !important on line 1159 ending at .9 alpha,
   would hide the bottom of the video) and our z-index puts the video above
   it anyway. brightness(.55) gives a nicely cinematic dim. */
body.cinema-mode #hero-cover-box #hero-video{
  filter:saturate(1.05) contrast(1.05) brightness(.55);
}

@keyframes cinema-slide{
  from{ transform:translateX(-60px); opacity:0; }
  to  { transform:translateX(0);     opacity:1; }
}

/* Mobile: text already wraps; just tighten padding */
@media (max-width:767px){
  body.cinema-mode .hero{ min-height:50vh; }
  body.cinema-mode .hero-grid{ min-height:45vh; }
  body.cinema-mode .hero-now{ padding:16px 12px; }
}

/* Fullscreen toggle: only visible while cinema mode is on. The [hidden]
   attribute is removed by JS the moment cinema mode activates. */
body.cinema-mode .kicker-btn.cinema-only[hidden]{ display:grid; }

/* When the hero is in browser-fullscreen, fill the screen with solid black
   and let the existing cinema-mode rules handle the layout. */
.hero:fullscreen{
  width:100vw;
  height:100vh;
  min-height:100vh;
  background:#000;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero:fullscreen .hero-grid{ width:100%; min-height:100vh; }
.hero:-webkit-full-screen{
  width:100vw; height:100vh; min-height:100vh;
  background:#000; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.hero:-webkit-full-screen .hero-grid{ width:100%; min-height:100vh; }

/* In browser fullscreen: shove the text block to the top-left corner and
   left-align all of it. Overrides the centered cinema-mode rules above.
   NOTE: :fullscreen and :-webkit-full-screen MUST be in separate rule blocks —
   if a browser doesn't recognize one selector in a comma-list it discards the
   entire block, including the rule it would have matched. */
.hero:fullscreen{ align-items:flex-start; justify-content:flex-start; }
.hero:-webkit-full-screen{ align-items:flex-start; justify-content:flex-start; }

.hero:fullscreen .hero-grid{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  /* Base .hero-grid has max-width:1400px;margin:0 auto — that centers the
     whole grid in fullscreen, so even with flex-start the text looks centered.
     Strip the cap and the auto margin so the grid spans the full screen. */
  max-width:none !important;
  margin:0 !important;
}
.hero:-webkit-full-screen .hero-grid{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  max-width:none !important;
  margin:0 !important;
}

.hero:fullscreen .hero-now{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  padding:48px 56px !important;
}
.hero:-webkit-full-screen .hero-now{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  padding:48px 56px !important;
}

.hero:fullscreen .channel-tag{ margin:0 0 18px !important; }
.hero:-webkit-full-screen .channel-tag{ margin:0 0 18px !important; }

.hero:fullscreen .now-kicker{ justify-content:flex-start !important; }
.hero:-webkit-full-screen .now-kicker{ justify-content:flex-start !important; }

.hero:fullscreen .hero-title{ text-align:left !important; }
.hero:-webkit-full-screen .hero-title{ text-align:left !important; }

.hero:fullscreen .hero-controls{ justify-content:flex-start !important; }
.hero:-webkit-full-screen .hero-controls{ justify-content:flex-start !important; }

/* Belt-and-suspenders: JS adds body.fs-active on fullscreenchange. This avoids
   any browser quirk where :fullscreen wouldn't match (e.g. some chromium
   versions strip pseudo-class matching across the top-layer boundary). */
body.fs-active .hero-grid{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  max-width:none !important;
  margin:0 !important;
  width:100% !important;
}
body.fs-active .hero-now{
  /* Pin absolutely to top-left of .hero — bypasses flex centering entirely
     since .hero-art is already absolute (full-bleed video) and .hero-now is
     the only flex item left in .hero-grid. */
  position:absolute !important;
  top:48px !important;
  left:56px !important;
  right:auto !important;
  bottom:auto !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  width:auto !important;
  max-width:80vw !important;
  padding:0 !important;
  z-index:10 !important;
}
body.fs-active .channel-tag{ margin:0 0 18px !important; }
body.fs-active .now-kicker{ justify-content:flex-start !important; }
body.fs-active .hero-title{ text-align:left !important; }
body.fs-active .hero-controls{ justify-content:flex-start !important; }

/* ---------- EXTERNAL-PLAYER STREAM URLS ---------- */
.ext-streams{
  background:var(--bg-2);border:1px solid var(--line);
  padding:32px;margin-bottom:32px;position:relative;
}
.ext-streams::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)
}
.ext-streams-head{
  display:flex;flex-direction:column;gap:14px;margin-bottom:24px;
}
.ext-streams-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ext-streams-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  background:var(--accent);color:#fff;padding:5px 10px;font-weight:700;
}
.ext-streams-title h3{
  font-family:var(--display);font-size:30px;margin:0;letter-spacing:.04em;
  text-transform:uppercase;
}
.ext-streams-lead{
  color:var(--ink-2);font-size:14px;line-height:1.55;margin:0;max-width:780px;
}
.ext-streams-lead code{
  font-family:var(--mono);font-size:12px;background:var(--bg-3);
  border:1px solid var(--line-2);padding:1px 6px;color:var(--ink);
}
.ext-streams-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
.ext-stream-card{
  background:var(--bg-3);border:1px solid var(--line);
  padding:18px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .15s;
}
.ext-stream-card:hover{border-color:var(--line-2)}
.ext-stream-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ext-stream-ch{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--accent);border:1px solid var(--accent);padding:3px 7px;
  flex:none;
}
.ext-stream-name{
  font-family:var(--display);font-size:20px;margin:0;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);
}
.ext-stream-url-row{
  display:flex;gap:8px;align-items:stretch;
}
.ext-stream-url{
  flex:1 1 auto;min-width:0;
  background:var(--bg);border:1px solid var(--line-2);color:var(--ink);
  padding:9px 12px;font-family:var(--mono);font-size:12px;
  border-radius:0;
}
.ext-stream-url:focus{outline:none;border-color:var(--accent)}
.ext-stream-copy{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  border:1px solid var(--line-2);color:var(--ink-2);
  padding:0 12px;background:var(--bg);
  transition:all .15s;
}
.ext-stream-copy:hover{border-color:var(--accent);color:#fff;background:rgba(225,29,46,.1)}
.ext-stream-copy.is-copied{border-color:var(--accent);color:#fff;background:var(--accent)}
.ext-stream-actions{display:flex;gap:8px;flex-wrap:wrap}
.ext-stream-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  border:1px solid var(--line-2);color:var(--ink);
  padding:9px 14px;background:transparent;
  transition:all .15s;
}
.ext-stream-btn:hover{border-color:var(--accent);background:rgba(225,29,46,.1);color:#fff}
.ext-streams-tip{
  margin:20px 0 0;color:var(--ink-3);font-size:12px;line-height:1.55;
}
.ext-streams-tip code,
.ext-streams-tip kbd{
  font-family:var(--mono);font-size:11px;background:var(--bg-3);
  border:1px solid var(--line-2);padding:1px 6px;color:var(--ink-2);
}
.ext-streams-tip kbd{
  border-bottom-width:2px;
}

@media (max-width: 900px){
  .ext-streams{padding:22px}
  .ext-streams-grid{grid-template-columns:1fr;gap:12px}
  .ext-streams-title h3{font-size:24px}
}
@media (max-width: 600px){
  .ext-streams{padding:18px}
  .ext-stream-card{padding:14px}
  .ext-stream-url-row{flex-direction:column}
  .ext-stream-copy{padding:10px}
  .ext-stream-copy span{display:inline}
}