/* ===== HotBeatsTV Studio v300 — Direction 3 Hybrid "Immersive Broadcast Studio" =====
   Visual layer loaded after styles.css. It only restyles; all IDs, hooks and player/chat
   logic stay in styles.css + script.js. Equal-specificity rules here win by source order,
   so every breakpoint this file touches is redefined below. */

/* Inter Tight Variable (SIL OFL 1.1, see assets/fonts/InterTight-OFL.txt), self-hosted: no third-party font request. */
@font-face {
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --container:1720px;
  --studio-font:"Inter Tight",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --studio-bg:#050506;
  --studio-panel:#0a0a0d;
  --studio-panel-2:#0e0e12;
  --studio-line:rgba(255,255,255,.075);
  --studio-line-strong:rgba(255,255,255,.14);
  --studio-red:#d42b1f;          /* white text on it: ~5:1 */
  --studio-red-hot:#ff3d2e;
  --studio-red-glow:rgba(234,67,53,.34);
  --studio-chat:clamp(372px,calc(26vw + 20px),440px);
  --studio-radius:18px;
  --studio-radius-sm:12px;
  --discord:#5865f2;
  --spotify:#1ed760;
}

html { scroll-padding-top:84px; }
body {
  font-family:var(--studio-font);
  background:var(--studio-bg);
  overflow-x:hidden; /* fallback for browsers without overflow:clip (e.g. Safari < 16) */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Page base: near-black with a faint warm falloff; the Red Haze photo carries the atmosphere at the top. */
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60% 50% at 100% 0,rgba(120,14,10,.16),transparent 70%),
    linear-gradient(180deg,#070708 0%,#050506 50%,#040405 100%);
}
.ambient { display:none; }
::selection { background:rgba(234,67,53,.42); color:#fff; }

a:focus-visible,button:focus-visible,textarea:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:2px solid #ff7a6d;
  outline-offset:3px;
}

.eyebrow,.small-label { font-weight:800; letter-spacing:.16em; }

/* ---------- Header ---------- */
.topbar {
  margin-top:10px;
  min-height:58px;
  padding:7px 10px 7px 12px;
  border-color:rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(6,6,8,.58);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
}
.topbar::after {
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,92,72,.4) 30%,rgba(255,92,72,.12) 70%,transparent);
}
.brand { gap:11px; }
.brand img { width:40px; height:40px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.brand div { gap:3px; }
.brand strong { font-size:1.12rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.brand span { color:#9aa1ac; font-size:.56rem; font-weight:700; letter-spacing:.24em; line-height:1; }
.topnav { gap:0; }
.topnav a { position:relative; padding:8px 13px; border-radius:8px; color:#bfc5cf; font-size:.82rem; font-weight:600; letter-spacing:.01em; }
.topnav a:hover { color:#fff; background:transparent; }
.topnav a:not([href="#support"])::after { content:""; position:absolute; left:13px; right:13px; bottom:3px; height:1px; background:currentColor; opacity:0; transform:scaleX(.4); transition:opacity .18s ease,transform .18s ease; }
.topnav a:not([href="#support"]):hover::after { opacity:.5; transform:scaleX(1); }
.topnav .nav-live { color:#fff; font-weight:700; }
.nav-live-dot { width:7px; height:7px; background:var(--studio-red-hot); box-shadow:0 0 0 0 rgba(255,61,46,.55); animation:studio-pulse 1.8s ease-out infinite; }
.topnav a[href="#support"] { margin:0 4px 0 8px; padding:8px 14px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.04); color:#fff; font-weight:700; }
.topnav a[href="#support"]:hover { border-color:rgba(255,107,93,.55); background:rgba(212,43,31,.22); }

@keyframes studio-pulse {
  0% { box-shadow:0 0 0 0 rgba(255,61,46,.55); }
  70% { box-shadow:0 0 0 7px rgba(255,61,46,0); }
  100% { box-shadow:0 0 0 0 rgba(255,61,46,0); }
}

/* ---------- Hero (compact, live character) ---------- */
.live-hero { padding-top:8px; }
.live-intro {
  position:relative;
  isolation:isolate;
  max-width:none;
  margin-bottom:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:18px 32px;
}
/* Red Haze stage (approved photo, assets/studio/hero-red-haze-*). One full-bleed layer behind header,
   hero and the broadcast; controlled overlays keep text calm on the left and fade it into the page. */
/* No isolation here: the fixed mini player inside must keep competing in .site's stacking context. */
.live-hero { position:relative; }
.live-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  width:100vw;
  top:-96px;
  height:calc(100% + 96px);
  transform:translateX(-50%);
  pointer-events:none;
  background-color:#050506;
  background-image:
    linear-gradient(180deg,rgba(5,5,6,.5) 0,rgba(5,5,6,0) 150px),
    linear-gradient(90deg,rgba(5,5,6,.9) 0%,rgba(5,5,6,.62) 26%,rgba(5,5,6,.12) 52%,rgba(5,5,6,0) 70%),
    linear-gradient(180deg,rgba(5,5,6,0) 34%,rgba(5,5,6,.78) 62%,#050506 92%),
    radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%),
    url("assets/studio/hero-red-haze-1672.webp"),
    radial-gradient(40% 50% at 78% 22%,rgba(160,20,12,.55),transparent 75%);
  background-image:
    linear-gradient(180deg,rgba(5,5,6,.5) 0,rgba(5,5,6,0) 150px),
    linear-gradient(90deg,rgba(5,5,6,.9) 0%,rgba(5,5,6,.62) 26%,rgba(5,5,6,.12) 52%,rgba(5,5,6,0) 70%),
    linear-gradient(180deg,rgba(5,5,6,0) 34%,rgba(5,5,6,.78) 62%,#050506 92%),
    radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%),
    image-set(url("assets/studio/hero-red-haze-1672.avif") type("image/avif"),url("assets/studio/hero-red-haze-1672.webp") type("image/webp")),
    radial-gradient(40% 50% at 78% 22%,rgba(160,20,12,.55),transparent 75%);
  background-repeat:no-repeat;
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,cover,100% 100%;
  background-position:0 0,0 0,0 0,0 0,var(--studio-haze-pos,72% 34%),0 0;
}
body.hb-partner-route-active .live-hero::before { display:none; }
.hero-copy-block { min-width:0; }
.live-intro .eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 11px 6px 9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(6,6,8,.5);
  color:#f2f3f5;
  font-size:.62rem;
  letter-spacing:.22em;
}
.eyebrow-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--studio-red-hot); animation:studio-pulse 1.8s ease-out infinite; }
.live-intro h1 {
  margin-top:10px;
  max-width:none;
  font-size:clamp(2rem,2.7vw,3.1rem);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.042em;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.hero-title-accent {
  color:#ff4d3d;
  background:linear-gradient(92deg,#ff3b2e 0%,#ff5b45 60%,#ff8a72 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-copy { margin-top:8px; max-width:62ch; color:#b9bec7; font-size:.98rem; line-height:1.45; text-shadow:0 1px 12px rgba(0,0,0,.6); }

.hero-stats { margin:0; display:flex; gap:8px; }
.hero-stat {
  min-width:0;
  padding:10px 14px 10px 10px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:1px;
  align-items:center;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(7,7,9,.72);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  backdrop-filter:blur(14px) saturate(115%);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-stat-icon {
  grid-row:1 / 3;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#ff9a8f;
  background:rgba(234,67,53,.12);
  border:1px solid rgba(255,107,93,.2);
}
.hero-stat-icon svg { width:18px; height:18px; }
.hero-stat-icon--live { color:#fff; background:var(--studio-red); border-color:transparent; box-shadow:0 6px 18px rgba(212,43,31,.35); }
.hero-stat dd { grid-column:2; grid-row:1; margin:0; color:#fff; font-size:1.08rem; font-weight:800; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero-stat dt { grid-column:2; grid-row:2; color:var(--muted); font-size:.68rem; font-weight:600; line-height:1.25; white-space:nowrap; }

/* ---------- Broadcast: video left, full-height chat right ---------- */
.broadcast-layout { grid-template-columns:minmax(0,1fr) var(--studio-chat); gap:14px; border-radius:14px; background:#050506; }
body.hb-partner-route-active .broadcast-layout { background:none; }
/* Broadcast screen: player and Now/Next form one unit (screen + lower third); the chat shares its
   top bar height, surfaces and edge light, so the three read as one studio console. */
.video-column {
  gap:0;
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.65),0 40px 110px -20px rgba(0,0,0,.75),0 -30px 120px -60px rgba(212,43,31,.55);
}
.player-shell,.chat-column {
  border-color:rgba(255,255,255,.1);
  border-radius:14px;
  background:#060608;
}
.player-shell {
  position:relative;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:none;
}
.chat-column { box-shadow:0 0 0 1px rgba(0,0,0,.65),0 40px 110px -20px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.03); }

.player-top,.chat-head {
  background:linear-gradient(180deg,#121216 0%,#0b0b0e 100%);
  box-shadow:inset 0 1px 0 rgba(255,130,110,.16);
}
.player-top {
  min-height:44px;
  padding:0 10px 0 11px;
  gap:12px;
  border-bottom-color:rgba(255,255,255,.06);
  font-size:.72rem;
  letter-spacing:normal;
}
.player-label { min-width:0; display:flex; align-items:center; gap:10px; }
.live-pill {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px 5px 7px;
  border-radius:6px;
  background:var(--studio-red);
  color:#fff;
  font-size:.64rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.14em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 6px 18px rgba(212,43,31,.32);
}
.live-pill-dot { width:6px; height:6px; border-radius:50%; background:#fff; animation:studio-blink 1.6s ease-in-out infinite; }
@keyframes studio-blink { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.player-label-text { min-width:0; overflow:hidden; color:#fff; font-size:.82rem; font-weight:750; letter-spacing:-.01em; white-space:nowrap; text-overflow:ellipsis; }
.player-label-sub { margin-left:2px; color:var(--muted); font-size:.74rem; font-weight:550; }
.player-label-sub::before { content:"·"; margin-right:6px; color:#5d636d; }
.player-status-actions { gap:8px; }
/* Full player: the LIVE pill replaces "ON AIR"; the mini player keeps its compact ON AIR label. */
.player-shell .on-air-label { display:none; }
body.hb-home-player-mini .player-shell .on-air-label,
body.hb-partner-route-active .player-shell .on-air-label { display:inline-flex; }

/* Wave 2a viewer fallback: discreet stream option in the bar, never over the player's own controls. */
.player-source { display:flex; align-items:center; min-width:0; }
.player-source-switch,
.hb-native-audio-only {
  min-height:30px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:#cfd4dc;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.player-source-switch::before {
  content:"";
  width:13px;
  height:13px;
  flex:0 0 13px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3.5-3.5M20 16H6l3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3.5-3.5M20 16H6l3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.player-source-switch:hover,
.hb-native-audio-only:hover { color:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.07); }
.hb-native-audio-only svg { width:14px; height:14px; flex-basis:14px; }
.hb-native-audio-only.is-active { color:#ffb1a8; border-color:rgba(255,107,93,.42); background:rgba(234,67,53,.14); }
.hb-audio-only-active .player-source,
body.hb-home-player-mini .player-source,
body.hb-partner-route-active .player-source { display:none; }

.player-aspect { background:#000; }
.hb-player-start-icon { background:var(--studio-red); }
.hb-native-audio-view {
  background:
    radial-gradient(circle at 50% 38%,rgba(234,67,53,.16),transparent 38%),
    linear-gradient(180deg,#0b0b0e 0%,#050507 100%);
}
.hb-native-audio-view strong { font-weight:800; }

/* ---------- Now Playing / Up Next directly under the player ---------- */
.now-strip {
  min-height:0;
  padding:0;
  display:flex;
  align-items:stretch;
  gap:0;
  border:1px solid rgba(255,255,255,.1);
  border-top:0;
  border-radius:0 0 14px 14px;
  overflow:hidden;
  background:linear-gradient(180deg,#0e0e11 0%,#09090b 100%);
}
.now-card {
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 14px 11px 12px;
  border:0;
  border-radius:0;
  background:none;
}
.now-card--current {
  flex:1.45 1 0;
  background:linear-gradient(90deg,rgba(212,43,31,.16),rgba(212,43,31,0) 70%);
  box-shadow:inset 3px 0 0 var(--studio-red);
}
.now-card--next { border-left:1px solid rgba(255,255,255,.07); }
.now-card--next { flex:1 1 0; }
.now-main,.now-next-main { min-width:0; flex:1 1 auto; display:grid; gap:3px; }
.now-main strong,.now-next-main strong {
  margin-top:3px;
  overflow:hidden;
  color:#fff;
  font-size:1.22rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.025em;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.now-next-main strong { font-size:1.02rem; color:#e9ebf0; }
.now-main > span:last-child,.now-next-main > span:last-child {
  overflow:hidden;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.3;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.now-next-main > span:last-child { font-size:.8rem; }
.now-card--current .small-label { display:inline-flex; align-items:center; gap:7px; }
/* Tiny equalizer next to NOW PLAYING (decorative). */
.now-card--current .small-label::before {
  content:"";
  width:12px;
  height:10px;
  flex:0 0 12px;
  background:
    linear-gradient(var(--red-bright),var(--red-bright)) 0 100% / 2px 60% no-repeat,
    linear-gradient(var(--red-bright),var(--red-bright)) 5px 100% / 2px 100% no-repeat,
    linear-gradient(var(--red-bright),var(--red-bright)) 10px 100% / 2px 40% no-repeat;
  animation:studio-eq 1.1s ease-in-out infinite alternate;
}
@keyframes studio-eq {
  0% { background-size:2px 60%,2px 100%,2px 40%; }
  50% { background-size:2px 100%,2px 35%,2px 80%; }
  100% { background-size:2px 30%,2px 75%,2px 100%; }
}
.now-card--next .small-label { color:#a9b0bb; }

/* Square artist artwork: real image only when the data provides one, else an equal-size initials tile. */
.artist-art {
  position:relative;
  flex:0 0 auto;
  width:58px;
  height:58px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:
    radial-gradient(90% 90% at 100% 0,rgba(255,92,72,.5),transparent 60%),
    linear-gradient(140deg,#3a0f0b 0%,#17090a 48%,#0c0c0f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.35);
}
.artist-art::after {
  content:"";
  position:absolute;
  left:7px;
  bottom:7px;
  width:12px;
  height:2px;
  border-radius:2px;
  background:var(--red-bright);
  opacity:.9;
}
.artist-art-initials {
  position:relative;
  z-index:1;
  color:#fff;
  font-size:1.18rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
}
.artist-art img { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .2s ease; }
.artist-art.has-image img { opacity:1; }
.artist-art.has-image::after,.artist-art.has-image .artist-art-initials { visibility:hidden; }
.now-card--next .artist-art { width:48px; height:48px; border-radius:11px; background:linear-gradient(140deg,#1d1d23 0%,#111115 60%,#0c0c0f 100%); }
.now-card--next .artist-art::after { background:#8b929d; }
.now-card--next .artist-art-initials { font-size:1rem; color:#d9dde4; }

/* Artist link: compact pill; on narrow cards an icon button with the same accessible text. */
.now-card-link {
  flex:0 0 auto;
  align-self:center;
  min-height:32px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  border-color:rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:#cfd4dc;
  font-size:.7rem;
  font-weight:700;
}
.now-card-link:hover { color:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.07); }

/* Narrow Now/Next cards (phones, or the Up Next card on smaller desktops): the artist link becomes a
   40px icon button; its text stays in the DOM as the accessible name. */
.now-card { container-type:inline-size; container-name:now-card; }
@container now-card (max-width:440px) {
  .now-card-link {
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    justify-content:center;
    overflow:hidden;
    color:transparent;
    font-size:0;
    border-radius:12px;
  }
  .now-card-link::after {
    content:"";
    width:15px;
    height:15px;
    background:#e6e8ec;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .now-card--next .now-card-link { width:36px; min-width:36px; height:36px; min-height:36px; }
}

/* ---------- On-air artist transition (only on a real set change, see hbBeginArtistTransition) ----------
   ~450 ms: the previous content (decorative copy, no IDs, not interactive) fades out and lifts 5 px,
   the new content rises in, the square art cross-fades, and a thin red light line passes once. */
.artist-transition-ghost {
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:inherit;
  padding:inherit;
  overflow:hidden;
  pointer-events:none;
  animation:hb-artist-out 170ms cubic-bezier(.4,0,1,1) var(--hb-artist-delay,0ms) both;
}
.now-card.is-artist-changing > .now-main,
.now-card.is-artist-changing > .now-next-main { animation:hb-artist-in 300ms cubic-bezier(.2,.75,.25,1) calc(var(--hb-artist-delay,0ms) + 130ms) both; }
.now-card.is-artist-changing > .artist-art { animation:hb-artist-art-in 300ms cubic-bezier(.2,.75,.25,1) calc(var(--hb-artist-delay,0ms) + 100ms) both; }
.now-card.is-artist-changing::after {
  content:"";
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,92,72,.9) 45%,rgba(255,150,130,.6) 60%,transparent 100%);
  transform-origin:left center;
  animation:hb-artist-line 440ms cubic-bezier(.2,.75,.25,1) var(--hb-artist-delay,0ms) both;
}
@keyframes hb-artist-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-5px); } }
@keyframes hb-artist-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes hb-artist-art-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@keyframes hb-artist-line {
  0% { opacity:0; transform:scaleX(0); }
  35% { opacity:1; }
  100% { opacity:0; transform:scaleX(1); }
}
@media (prefers-reduced-motion:reduce) {
  .artist-transition-ghost { display:none; }
  .now-card.is-artist-changing > *,.now-card.is-artist-changing::after { animation:none; }
}

/* ---------- Chat column (behaviour untouched) ---------- */
.chat-head {
  min-height:44px;
  padding:0 10px 0 13px;
  border-bottom-color:rgba(255,255,255,.06);
}
/* One-line studio bar, same height as the player bar: KICK CHAT · Live Community · participants … LIVE */
.chat-head-main { display:flex; align-items:center; gap:10px; min-width:0; }
.chat-head .small-label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.chat-head h2 { font-size:.86rem; font-weight:750; letter-spacing:-.01em; white-space:nowrap; }
.chat-title-row { gap:8px; }
.chat-on-air {
  padding:5px 8px 5px 7px;
  border-radius:6px;
  background:rgba(234,67,53,.12);
  border:1px solid rgba(255,107,93,.28);
  color:#fff;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.14em;
}
.chat-feed-wrap { background:#060608; }
.chat-compose { background:#09090c; }
.kick-connect-button {
  border-color:transparent;
  background:var(--studio-red);
  color:#fff;
  font-weight:800;
  box-shadow:0 8px 22px rgba(212,43,31,.3);
}
.kick-connect-button:hover { background:#e2382b; border-color:transparent; }
.chat-send-button {
  border:1px solid rgba(255,150,130,.24);
  background:linear-gradient(180deg,#5c1b17 0%,#47130f 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.chat-send-button:hover:not(:disabled) { border-color:rgba(255,160,140,.38); background:linear-gradient(180deg,#6d221d 0%,#561713 100%); box-shadow:0 6px 16px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.09); }
.chat-send-button:focus-visible { outline:2px solid #ffb0a4; outline-offset:-4px; }
/* Disabled also covers the sending state (script.js disables the button while a message is sent). */
.chat-send-button:disabled { border-color:rgba(255,255,255,.08); background:#241312; color:rgba(255,255,255,.55); opacity:1; cursor:not-allowed; }
#kick-chat-message { border-radius:12px; background:rgba(255,255,255,.035); }

/* ---------- Below the broadcast: shared section language ---------- */
.section-intro h2,
.support-copy h2,
.partner-heading h2 {
  margin-top:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.042em;
  text-wrap:balance;
}
.section-intro h2 { max-width:16ch; font-size:clamp(2rem,3vw,3.25rem); }
/* Editorial chapter numbers on the section labels (decorative, CSS counter only). */
.site { counter-reset:studio-chapter; }
.network-section,.explore-section,.support-section,.partner-section { counter-increment:studio-chapter; }
.network-section .eyebrow::before,.explore-section .eyebrow::before,.support-copy .eyebrow::before,.partner-heading .eyebrow::before {
  content:counter(studio-chapter,decimal-leading-zero);
  margin-right:12px;
  padding-right:12px;
  border-right:1px solid rgba(255,255,255,.18);
  color:#7f8691;
}
.section-intro > p:last-child { margin-top:14px; max-width:46ch; color:#a6adb8; font-size:.98rem; line-height:1.55; }

/* Network: live audience per platform + 24/7 / since 2018 facts. */
.network-section {
  position:relative;
  margin-top:56px;
  padding:40px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-areas:"intro list" "facts list";
  gap:30px 64px;
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
  border-radius:0;
  overflow:visible;
  background:radial-gradient(42% 70% at 0 0,rgba(150,18,12,.16),transparent 70%);
}
.network-section::before {
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:min(360px,40%);
  height:1px;
  background:linear-gradient(90deg,rgba(255,92,72,.8),transparent);
}
.network-section > .section-intro { grid-area:intro; }
.network-section > .platform-list { grid-area:list; align-self:center; display:grid; gap:0; border-top:1px solid rgba(255,255,255,.08); }
.network-section > .network-facts { grid-area:facts; align-self:end; }
.platform-row {
  position:relative;
  min-height:76px;
  padding:18px 4px 18px 20px;
  grid-template-columns:minmax(110px,.45fr) minmax(0,1fr);
  border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0;
  background:none;
  overflow:hidden;
  transition:background .2s ease;
}
.platform-row:hover { background:linear-gradient(90deg,rgba(255,255,255,.03),transparent); }
.platform-row:last-child { border-bottom:1px solid rgba(255,255,255,.08); }
.platform-row::before { content:""; position:absolute; left:0; top:50%; width:3px; height:22px; margin-top:-11px; border-radius:2px; background:#7b8492; }
.platform-row.kick::before { background:var(--kick); }
.platform-row.rumble::before { background:var(--rumble); }
.platform-row.twitch::before { background:#9146ff; }
.platform-row .platform-dot { display:none; }
.platform-name { color:#fff; font-size:.78rem; font-weight:800; letter-spacing:.14em; }
.platform-row-meta { font-size:.86rem; }
.platform-row-meta > span:first-child { color:#fff; font-weight:700; }
.platform-row-meta strong { color:#fff; font-weight:800; font-variant-numeric:tabular-nums; }
/* Rumble live page link (Wave 2a fallback, filled from player-config.json) – moved out of the player area. */
.platform-row:has(> .platform-link:not([hidden])) { grid-template-columns:minmax(110px,.45fr) minmax(0,1fr) auto; }
.platform-link {
  justify-self:end;
  min-height:32px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:#e6e8ec;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}
.platform-link:hover { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.07); }

.network-facts { margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border:0; }
.fact-item { min-height:0; padding:4px 24px 4px 0; gap:6px; border:0; border-radius:0; background:none; }
.fact-item + .fact-item { padding:4px 0 4px 28px; border-left:1px solid rgba(255,255,255,.12); }
.fact-item strong {
  font-size:clamp(2.6rem,3.6vw,3.8rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.045em;
  background:linear-gradient(180deg,#fff 30%,#ffb3a9);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.fact-item span { color:#a6adb8; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }

/* Artists & community */
.explore-section { padding:64px 0 0; }
.section-heading { margin-bottom:24px; }
.explore-grid { grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr); gap:14px; align-items:stretch; }
.artist-feature,.explore-side-card {
  border-color:rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.015);
}
.artist-feature {
  min-height:0;
  align-self:stretch;
  border-color:rgba(255,255,255,.1);
  background:
    radial-gradient(48% 80% at 8% 30%,rgba(170,22,14,.26),transparent 70%),
    linear-gradient(180deg,#0e0e11,#08080a);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
.artist-feature-current {
  padding:30px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:28px;
  align-content:center;
}
.artist-art--large { grid-column:1; grid-row:1 / 4; width:148px; height:148px; border-radius:16px; box-shadow:0 24px 60px -16px rgba(212,43,31,.45),inset 0 1px 0 rgba(255,255,255,.1); }
.artist-art--large .artist-art-initials { font-size:3rem; letter-spacing:-.05em; }
.artist-art--large::after { left:14px; bottom:14px; width:22px; height:3px; }
.artist-feature-current > .small-label { grid-column:2; align-self:start; margin-top:4px; }
.artist-feature-copy { grid-column:2; margin-top:16px; min-width:0; }
.artist-feature-copy h3 { font-size:clamp(2.2rem,3.6vw,3.8rem); font-weight:800; line-height:.98; letter-spacing:-.05em; overflow-wrap:anywhere; }
.artist-feature-copy p { margin-top:12px; color:#a6adb8; }
.artist-feature-current > a { grid-column:2; margin-top:22px; align-self:start; }
.artist-feature a,.explore-side-card a {
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:#e6e8ec;
  font-size:.78rem;
  font-weight:700;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.artist-feature a:hover,.explore-side-card a:hover { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.07); }
.artist-feature-next { min-height:0; padding:20px 30px 22px; border-top-color:var(--studio-line); background:rgba(0,0,0,.18); align-items:center; }
.artist-feature-next .small-label { color:#a9b0bb; }
.artist-feature-next h4 { margin-top:8px; font-size:1.4rem; font-weight:800; }
.artist-feature-next p { margin-top:5px; color:#a6adb8; }
.explore-stack { grid-template-rows:1fr 1fr; gap:14px; }
.explore-side-card { position:relative; min-height:0; padding:24px; overflow:hidden; }
.explore-side-card::before {
  content:"";
  position:absolute;
  right:-60px;
  top:-60px;
  width:180px;
  height:180px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,var(--card-accent-glow,rgba(234,67,53,.16)),transparent 70%);
}
.explore-side-card#community { --card-accent:var(--discord); --card-accent-glow:rgba(88,101,242,.22); }
.explore-side-card:not(#community) { --card-accent:var(--spotify); --card-accent-glow:rgba(30,215,96,.14); }
.explore-side-card .small-label { display:inline-flex; align-items:center; gap:8px; color:#c3c8d1; }
.explore-side-card .small-label::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--card-accent,var(--red-bright)); }
.explore-side-card h3 { margin-top:14px; font-size:1.5rem; font-weight:800; letter-spacing:-.035em; }
.explore-side-card p { color:#a6adb8; }
.explore-side-card a { margin-top:auto; }
.explore-side-card > a { margin-top:18px; }

/* Support / donations */
.support-section {
  position:relative;
  margin-top:64px;
  padding:48px;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.75fr);
  gap:48px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(55% 140% at 100% 50%,rgba(190,26,16,.34),transparent 65%),
    radial-gradient(30% 60% at 92% 0,rgba(255,110,90,.12),transparent 70%),
    linear-gradient(90deg,#08080a 0%,#0c0a0b 60%,#140c0c 100%);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.8);
}
.support-section::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 10%,rgba(255,120,100,.45) 70%,transparent);
}
.support-copy,.support-actions { position:relative; z-index:1; }
.support-copy h2 { max-width:13ch; font-size:clamp(2.2rem,3.6vw,3.9rem); }
.support-copy > p:last-child { color:#b3b9c3; }
.support-actions { gap:10px; }
.button { min-height:62px; padding:0 18px; border-radius:14px; font-weight:750; }
.button-primary {
  border-color:transparent;
  background:linear-gradient(180deg,#e0372a,#c2271c);
  box-shadow:0 14px 34px rgba(212,43,31,.32),inset 0 1px 0 rgba(255,255,255,.14);
}
.button-primary:hover { background:linear-gradient(180deg,#ea4335,#cc2c20); }
.button-primary .button-kicker { color:rgba(255,255,255,.78); }
.button-secondary { border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.035); }
.button-secondary:hover { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.07); }

/* Commercial partners */
.partner-section {
  margin-top:24px;
  padding:48px 0;
  grid-template-columns:minmax(0,1fr) minmax(300px,.8fr) auto;
  gap:40px;
  border:0;
  border-radius:0;
  background:none;
}
.partner-heading h2 { max-width:12ch; font-size:clamp(2rem,3vw,3.2rem); }
.partner-copy { color:#a6adb8; }
.partner-copy span { color:#8a919c; }
.partner-button { min-width:230px; }

/* Footer with legal links */
.footer {
  position:relative;
  margin-top:56px;
  padding:44px 0 26px;
  border-top:1px solid var(--studio-line);
}
.footer::before {
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:min(320px,40%);
  height:1px;
  background:linear-gradient(90deg,var(--red-bright),transparent);
}
.footer-brand strong { font-weight:800; }
.footer-group > strong { color:#e6e8ec; letter-spacing:.14em; }
.footer-group a,.footer-pending-link { color:#a6adb8; font-size:.84rem; }
.footer-pending-link { color:#7d8490; }
.footer-bottom { color:#8a919c; }

/* ---------- Desktop ≥ 1121px ---------- */
@media (min-width:1121px) {
  /* Compact header keeps its flow footprint: 58px = 50px + 8px margin. */
  .topbar { height:58px; min-height:58px; }
  .topbar .brand img { width:38px; height:38px; }
  .topbar.is-compact { height:50px; min-height:50px; margin-bottom:8px; padding-top:5px; padding-bottom:5px; }
  .topbar.is-compact .brand img { width:32px; height:32px; }
  .topbar.is-compact .brand strong { font-size:.9rem; }
  .topbar.is-compact .brand span { font-size:.56rem; }

  .platform-row { min-height:72px; padding:18px 4px 18px 20px; }
  .network-facts { margin:0; padding:0; }
  .fact-item { min-height:0; }
  .support-section { padding:48px; }
  .explore-section { padding:64px 0 0; }
  .artist-feature { min-height:0; }
  .partner-section { padding:48px 0; }
  .footer { padding:44px 0 26px; }
}
@media (min-width:1121px) and (max-width:1320px) {
  .hero-stat--static { display:none; }
  .live-intro h1 { font-size:clamp(1.9rem,2.7vw,2.6rem); }
}
/* Height-aware broadcast: the video column never grows taller than the viewport leaves room for
   (header + hero + player bar + Now/Next = --studio-chrome), so player, Now/Next and the chat input
   stay above the fold on common laptop heights; the chat column takes the remaining width. */
@media (min-width:1121px) {
  :root { --studio-chrome:336px; }
  .broadcast-layout { grid-template-columns:minmax(0,max(640px,calc((100vh - var(--studio-chrome)) * 16 / 9))) minmax(var(--studio-chat),1fr); }
}
@media (min-width:1600px) and (min-height:1000px) {
  :root { --studio-chrome:365px; }
  .live-hero { padding-top:26px; }
  .live-intro { margin-bottom:18px; }
  .player-top { min-height:48px; }
}
@media (min-width:1121px) and (max-height:899px) {
  :root { --studio-chrome:314px; }
  .live-hero { padding-top:10px; }
  .live-intro { margin-bottom:10px; }
  .live-intro h1 { margin-top:7px; font-size:clamp(1.7rem,2.2vw,2.2rem); }
  .hero-copy { margin-top:4px; font-size:.9rem; }
  .hero-stat { padding:7px 12px 7px 8px; }
  .hero-stat-icon { width:30px; height:30px; }
  .player-top { min-height:42px; }
}

/* ---------- Tablet ≤ 1120px ---------- */
@media (max-width:1120px) {
  .live-hero::before { height:min(calc(100% + 96px),820px); }
  .live-intro { grid-template-columns:1fr; align-items:start; }
  .hero-stats { flex-wrap:wrap; }
  .broadcast-layout { grid-template-columns:1fr; gap:12px; }
  .chat-column { height:640px; min-height:0; }
  .network-section { grid-template-columns:1fr; grid-template-areas:"intro" "list" "facts"; padding:40px 0 0; gap:28px; }
  .platform-row-meta { justify-content:flex-end; text-align:right; }
  .explore-grid { grid-template-columns:1fr; }
  .explore-stack { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .support-section { grid-template-columns:1fr; gap:30px; padding:36px; }
  .partner-section { grid-template-columns:1fr 1fr; padding:40px 0; gap:28px; }
  .partner-button { grid-column:1 / -1; width:max-content; }
}

/* ---------- Mobile ≤ 820px ---------- */
@media (max-width:820px) {
  html { scroll-padding-top:72px; }
  .topbar { min-height:54px; margin-top:8px; padding:6px 8px 6px 10px; border-radius:14px; }
  .topbar::after { left:12px; right:12px; }
  .brand img { width:34px; height:34px; }
  .brand strong { font-size:.94rem; }
  .brand span { font-size:.55rem; letter-spacing:.12em; }
  .mobile-nav-toggle { min-height:38px; border-radius:10px; font-weight:750; }
  .topnav a { font-size:.86rem; font-weight:650; }
  .topnav a[href="#support"] { margin-left:0; }

  .live-hero { padding-top:16px; }
  .live-intro { margin-bottom:14px; gap:12px; }
  .live-intro h1 { margin-top:9px; max-width:none; font-size:clamp(1.85rem,6.4vw,2.6rem); line-height:1.02; letter-spacing:-.035em; }
  .hero-copy { margin-top:7px; font-size:.9rem; line-height:1.42; }
  .hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .hero-stat--static { display:grid; }
  .hero-stat { padding:8px 9px; grid-template-columns:auto minmax(0,1fr); column-gap:7px; border-radius:12px; }
  .hero-stat-icon { width:26px; height:26px; border-radius:8px; }
  .hero-stat-icon svg { width:15px; height:15px; }
  .hero-stat dd { font-size:.92rem; }
  .hero-stat dt { font-size:.6rem; white-space:normal; }

  .broadcast-layout { gap:10px; }
  .video-column { gap:0; }
  .player-shell,.chat-column { border-radius:13px; }
  .player-shell { border-bottom-left-radius:0; border-bottom-right-radius:0; }
  .video-column { border-radius:13px; }
  .now-strip { border-radius:0 0 13px 13px; }
  .player-top { min-height:46px; padding:0 6px 0 9px; gap:8px; font-size:.68rem; }
  .player-label { gap:8px; }
  .live-pill { padding:4px 7px 4px 6px; font-size:.6rem; }
  .player-label-text { font-size:.78rem; }
  .player-status-actions { gap:6px; }
  /* Touch: stream option and Audio Only keep the Wave 2a tap target of at least 36px. */
  .player-source-switch,.hb-native-audio-only { min-height:36px; padding:0 10px; font-size:.66rem; }

  .now-strip { display:flex; flex-direction:column; gap:0; }
  .now-card { flex:0 0 auto; padding:10px 10px 10px 11px; gap:12px; }
  .now-card--next { border-left:0; border-top:1px solid rgba(255,255,255,.07); }
  .now-card .artist-art { width:54px; height:54px; border-radius:11px; }
  .now-card--next { padding:8px 10px; }
  .now-card--next .artist-art { width:40px; height:40px; border-radius:9px; }
  .now-card--next .artist-art-initials { font-size:.88rem; }
  .now-card--next .artist-art::after { left:5px; bottom:5px; width:9px; }
  .now-main strong { margin-top:2px; font-size:1.14rem; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .now-next-main { grid-template-columns:auto minmax(0,1fr); column-gap:8px; align-items:baseline; }
  .now-next-main .small-label { grid-column:1; }
  .now-next-main strong { grid-column:2; margin-top:0; font-size:.94rem; }
  .now-next-main > span:last-child { grid-column:1 / -1; font-size:.76rem; }
  .now-main > span:last-child { font-size:.8rem; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

  .chat-head { min-height:46px; padding:0 9px 0 12px; }
  .chat-head h2 { font-size:.9rem; }

  .network-section { margin-top:36px; padding:32px 0 0; gap:22px; }
  .section-intro h2 { font-size:clamp(1.85rem,7vw,2.6rem); }
  .section-intro > p:last-child { font-size:.92rem; }
  .platform-row { min-height:0; padding:14px 2px 14px 16px; }
  .network-facts { gap:8px; }
  .fact-item { padding:2px 16px 2px 0; }
  .fact-item + .fact-item { padding:2px 0 2px 20px; }
  .fact-item strong { font-size:2.4rem; }

  .explore-section { padding:44px 0 0; }
  .section-heading { margin-bottom:16px; }
  .artist-feature-current { padding:22px; column-gap:18px; }
  .artist-art--large { width:96px; height:96px; border-radius:16px; }
  .artist-art--large .artist-art-initials { font-size:2rem; }
  .artist-feature-copy { margin-top:10px; }
  .artist-feature-copy h3 { font-size:clamp(1.8rem,7vw,2.6rem); }
  .artist-feature-next { padding:18px 22px 20px; }
  .explore-stack { gap:10px; }
  .explore-side-card { padding:20px; }

  .support-section { margin-top:44px; padding:28px 20px 36px; border-radius:20px; gap:24px; }
  .support-copy h2 { font-size:clamp(2rem,8vw,2.8rem); }
  .partner-section { margin-top:16px; padding:32px 0; grid-template-columns:1fr; gap:18px; }
  .partner-heading h2 { font-size:clamp(1.85rem,7vw,2.6rem); }
  .partner-button { grid-column:auto; width:100%; min-width:0; }
  .footer { margin-top:40px; padding:32px 0 22px; grid-template-columns:1fr; gap:28px; }
}

/* ---------- Phone ≤ 560px ---------- */
@media (max-width:560px) {
  /* Phone polish v320: tighter rhythm above the player; nothing is removed, only spacing and density change. */
  .topbar { min-height:50px; margin-top:5px; padding:5px 6px 5px 9px; }
  .brand img { width:32px; height:32px; }
  .brand strong { font-size:.92rem; }

  .live-hero { padding-top:4px; }
  .live-intro { margin-bottom:9px; gap:8px; }
  .live-intro .eyebrow { gap:7px; padding:3px 9px 3px 7px; font-size:.55rem; }
  .live-intro .eyebrow-dot { width:6px; height:6px; }
  .live-intro h1 { margin-top:6px; font-size:clamp(1.5rem,6.9vw,1.95rem); line-height:1; }
  .hero-title-accent { display:block; }
  .hero-copy { margin-top:4px; font-size:.8rem; line-height:1.38; }
  /* Phones: the three hero tiles as one compact row of equal cells (value over label). */
  .hero-stats { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); gap:5px; }
  .hero-stat { min-width:0; padding:6px 8px 6px 9px; display:grid; grid-template-columns:minmax(0,1fr); row-gap:1px; align-content:start; border-radius:10px; }
  .hero-stat-icon { display:none; }
  .hero-stat dd,.hero-stat dt { grid-column:1; }
  .hero-stat dd { grid-row:1; display:flex; align-items:center; gap:5px; font-size:.9rem; }
  .hero-stat:first-child dd::before { content:""; width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--studio-red-hot); }
  .hero-stat dt { grid-row:2; font-size:.56rem; line-height:1.2; white-space:normal; }

  .player-label-sub { display:none; }

  /* Calm player bar: LIVE + the two real controls. The station name stays readable for screen readers. */
  .player-top { min-height:44px; padding:0 4px 0 8px; }
  .player-label-text { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .player-source-switch,.hb-native-audio-only { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.025); }

  /* Compact lower third: two slim rows, square art kept; titles wrap (max. 2 lines) instead of overlapping. */
  .now-card { padding:8px 8px 8px 10px; gap:10px; }
  .now-card .artist-art { width:46px; height:46px; border-radius:10px; }
  .now-card .artist-art-initials { font-size:1rem; }
  .now-card .artist-art::after { left:6px; bottom:6px; width:10px; }
  .now-main { gap:1px; }
  .now-card--current .small-label { font-size:.56rem; }
  .now-main strong { margin-top:1px; font-size:1.02rem; line-height:1.15; }
  .now-main > span:last-child { font-size:.75rem; line-height:1.3; }
  .now-card--next { padding:6px 8px 6px 10px; }
  .now-card--next .artist-art { width:36px; height:36px; border-radius:8px; }
  .now-card--next .artist-art-initials { font-size:.8rem; }
  .now-next-main { row-gap:0; }
  .now-next-main strong { font-size:.88rem; line-height:1.2; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .now-next-main > span:last-child { font-size:.72rem; line-height:1.3; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

  /* Participants button in the chat bar: same 36px touch target as the other phone controls. */
  .chat-users-button { min-width:36px; min-height:36px; justify-content:center; }

  /* Phones: own crop of the same photo (stage + lights), calmer and darker behind header and hero text. */
  .live-hero::before {
    top:-80px;
    height:440px;
    background-image:
      linear-gradient(180deg,rgba(5,5,6,.62) 0,rgba(5,5,6,.2) 120px),
      linear-gradient(90deg,rgba(5,5,6,.86) 0%,rgba(5,5,6,.55) 45%,rgba(5,5,6,.2) 100%),
      linear-gradient(180deg,rgba(5,5,6,0) 40%,rgba(5,5,6,.85) 78%,#050506 100%),
      url("assets/studio/hero-red-haze-mobile-800.webp"),
      radial-gradient(60% 50% at 80% 25%,rgba(160,20,12,.5),transparent 75%);
    background-image:
      linear-gradient(180deg,rgba(5,5,6,.62) 0,rgba(5,5,6,.2) 120px),
      linear-gradient(90deg,rgba(5,5,6,.86) 0%,rgba(5,5,6,.55) 45%,rgba(5,5,6,.2) 100%),
      linear-gradient(180deg,rgba(5,5,6,0) 40%,rgba(5,5,6,.85) 78%,#050506 100%),
      image-set(url("assets/studio/hero-red-haze-mobile-800.avif") type("image/avif"),url("assets/studio/hero-red-haze-mobile-800.webp") type("image/webp")),
      radial-gradient(60% 50% at 80% 25%,rgba(160,20,12,.5),transparent 75%);
    background-size:100% 100%,100% 100%,100% 100%,cover,100% 100%;
    background-position:0 0,0 0,0 0,60% 30%,0 0;
  }

  .chat-column { height:clamp(470px,66svh,570px); max-height:570px; }

  .platform-row,.platform-row:has(> .platform-link:not([hidden])) { grid-template-columns:minmax(72px,.42fr) minmax(0,1fr); gap:9px; }
  .platform-link { grid-column:1 / -1; justify-self:start; }
  .network-facts { grid-template-columns:1fr 1fr; }
  .fact-item + .fact-item { border-top:0; border-left:1px solid rgba(255,255,255,.12); padding:2px 0 2px 18px; }
  .explore-stack { grid-template-columns:1fr; }
  .artist-feature-current { grid-template-columns:auto minmax(0,1fr); }
  .artist-art--large { width:76px; height:76px; grid-row:1 / 3; }
  .artist-art--large .artist-art-initials { font-size:1.6rem; }
  .artist-feature-current > a { grid-column:1 / -1; margin-top:18px; }
  .artist-feature-next { grid-template-columns:1fr; gap:12px; }
  .support-actions .button { min-height:60px; }
  .footer-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
}

@media (max-width:380px) {
  .player-source-switch,.hb-native-audio-only { padding:0 9px; }
}
@media (max-width:350px) {
  /* Smallest phones: keep all three tiles on one row. */
  .hero-stats { gap:4px; }
  .hero-stat { padding:5px 6px 5px 7px; }
  .hero-stat dd { font-size:.82rem; }
  .hero-stat dt { font-size:.54rem; }
}

/* ---------- Persistent mini player + partner route ---------- */
/* While the player floats as mini player, the lower third stands on its own; on the partners route the
   collapsed (0px) column must not draw the console frame. */
body.hb-home-player-mini .video-column,
body.hb-partner-route-active .video-column { box-shadow:none; }
body.hb-home-player-mini .video-column > .now-strip { border-top:1px solid rgba(255,255,255,.1); border-radius:14px; }
body.hb-home-player-mini .player-shell .player-label,
body.hb-partner-route-active .player-shell .player-label { display:none; }
body.hb-home-player-mini .player-shell,
body.hb-partner-route-active .player-shell {
  border-color:rgba(255,107,93,.22);
  box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 0 1px rgba(234,67,53,.08);
}
body.hb-home-player-mini .player-shell .player-top,
body.hb-partner-route-active .player-shell .player-top { min-height:40px; }
body.hb-home-player-mini .player-shell .hb-native-audio-only,
body.hb-partner-route-active .player-shell .hb-native-audio-only { min-height:26px; padding:0 8px; font-size:.6rem; }
.persistent-player-return { border-radius:999px; }
@media (max-width:820px) {
  body.hb-home-player-mini .player-shell .player-top,
  body.hb-partner-route-active .player-shell .player-top { min-height:36px; }
}

/* Partner page shares the studio skin but keeps its own reading width. */
.partner-page { max-width:1460px; }
.partner-route-host.partner-page { margin-left:auto; margin-right:auto; }

@media (prefers-reduced-motion:reduce) {
  .nav-live-dot,.eyebrow-dot,.live-pill-dot,.now-card--current .small-label::before { animation:none; }
}

/* ===================== Finishing pass v360 =====================
   Spotlight (Now Playing / Up Next), chapter rhythm below the stage, small-text readability,
   touch targets and the Share Live button. Overrides only; nothing above is removed. */

/* Share Live: one compact icon button beside the artist link; feedback appears inside the card. */
.now-share-button {
  flex:0 0 auto;
  align-self:center;
  width:34px;
  height:34px;
  margin-left:-6px;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:#cfd4dc;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.now-share-button svg { width:15px; height:15px; }
.now-share-button:hover { color:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.07); }
/* While visible, the confirmation sits exactly over "Artist links" + share, like a short state change. */
.now-share-status {
  position:absolute;
  right:14px;
  top:50%;
  z-index:3;
  min-width:132px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:#19191d;
  color:#f1f2f5;
  font-size:.74rem;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%);
  transition:opacity .16s ease;
}
.now-share-status.is-visible { opacity:1; }
.now-share-status.is-visible.is-selectable { pointer-events:auto; user-select:all; }
@container now-card (max-width:440px) {
  .now-share-button { width:40px; height:40px; margin-left:-4px; border-radius:12px; }
  .now-share-status { min-width:86px; height:40px; border-radius:12px; }
}

/* Pressed state for the pill links and buttons (hover and focus rings already exist). */
.now-card-link:active,.now-share-button:active,.platform-link:active,
.artist-feature a:active,.explore-side-card a:active { background:rgba(255,255,255,.1); }
.button:active { transform:translateY(1px); }

/* Spotlight: Now Playing and Up Next use the strip's language (same labels, red edge, square art). */
.artist-feature-current {
  padding:32px 34px;
  column-gap:30px;
  box-shadow:inset 3px 0 0 var(--studio-red);
}
.artist-art--large { width:164px; height:164px; border-radius:18px; }
.artist-feature-current > .small-label { display:inline-flex; align-items:center; gap:8px; font-size:.74rem; }
.artist-feature-current > .small-label::before {
  content:"";
  width:12px;
  height:10px;
  flex:0 0 12px;
  background:
    linear-gradient(var(--red-bright),var(--red-bright)) 0 100% / 2px 60% no-repeat,
    linear-gradient(var(--red-bright),var(--red-bright)) 5px 100% / 2px 100% no-repeat,
    linear-gradient(var(--red-bright),var(--red-bright)) 10px 100% / 2px 40% no-repeat;
}
.artist-feature-copy p { color:#b3b9c3; }
.artist-feature-next {
  padding:18px 34px 20px;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  background:rgba(0,0,0,.22);
}
.artist-art--next {
  width:64px;
  height:64px;
  border-radius:14px;
  background:linear-gradient(140deg,#1d1d23 0%,#111115 60%,#0c0c0f 100%);
}
.artist-art--next::after { background:#8b929d; }
.artist-art--next .artist-art-initials { font-size:1.3rem; color:#d9dde4; }
.artist-feature-next .small-label { font-size:.74rem; }
.artist-feature-next h4 { margin:6px 0 0; font-size:1.5rem; }
.artist-feature-next p { margin-top:4px; color:#b3b9c3; }
.artist-feature-next > a { align-self:center; padding-bottom:0; }
.explore-side-card { padding:24px 24px 22px; }
.explore-side-card .small-label { font-size:.74rem; }
.explore-side-card p { color:#b3b9c3; }

/* Chapters below the stage: each starts with the same hairline + short red light and a faint,
   local haze in the corner (network already had it; artists and partners now match). */
.explore-section,.partner-section { position:relative; border-top:1px solid rgba(255,255,255,.08); }
.explore-section { margin-top:56px; padding-top:40px; background:radial-gradient(38% 120px at 0 0,rgba(150,18,12,.13),transparent 70%); }
.partner-section { margin-top:64px; padding-top:40px; background:radial-gradient(30% 120px at 0 0,rgba(150,18,12,.1),transparent 70%); }
.explore-section::before,.partner-section::before {
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:min(360px,40%);
  height:1px;
  background:linear-gradient(90deg,rgba(255,92,72,.8),transparent);
}
.support-section { border-radius:16px; }

/* Readability: labels, kickers, meta and footer text one step larger and lighter. */
.network-section .eyebrow,.explore-section .eyebrow,.support-copy .eyebrow,.partner-heading .eyebrow { font-size:.75rem; }
.network-section .eyebrow::before,.explore-section .eyebrow::before,.support-copy .eyebrow::before,.partner-heading .eyebrow::before { color:#9aa1ac; }
.button-kicker { margin-bottom:5px; font-size:.66rem; letter-spacing:.12em; }
.button-secondary .button-kicker { color:#b3b9c3; }
.fact-item span { color:#b3b9c3; font-size:.78rem; }
.platform-link { min-height:36px; padding:0 14px; font-size:.78rem; }
.partner-copy { color:#b3b9c3; }
.partner-copy span { color:#9aa1ac; font-size:.86rem; }
.footer-brand span { font-size:.7rem; color:#9aa1ac; }
.footer-brand-block > p { color:#b3b9c3; }
.footer-group { gap:2px; }
.footer-group > strong { margin-bottom:6px; font-size:.74rem; }
.footer-group a,.footer-pending-link { min-height:30px; display:inline-flex; align-items:center; justify-self:start; color:#b3b9c3; font-size:.9rem; }
.footer-pending-link { color:#8a919c; }
.footer-bottom { color:#9aa1ac; font-size:.8rem; }

@media (max-width:820px) {
  .footer-group a,.footer-pending-link { min-height:40px; justify-self:stretch; }
  .footer-group { gap:0; }
  .now-share-status { right:10px; }
}
@media (max-width:560px) {
  /* Touch targets: pills 42px, footer rows 40px; the compact layout stays. */
  .artist-feature a,.explore-side-card a,.platform-link { min-height:42px; padding:0 16px; }
  .artist-feature-current { padding:22px; box-shadow:inset 3px 0 0 var(--studio-red); }
  .artist-art--large { width:84px; height:84px; border-radius:16px; }
  .artist-feature-next { padding:16px 22px 18px; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; align-items:center; }
  .artist-art--next { width:52px; height:52px; border-radius:12px; }
  .artist-art--next .artist-art-initials { font-size:1.05rem; }
  .artist-feature-next h4 { font-size:1.3rem; }
  .artist-feature-next > a { grid-column:1 / -1; justify-self:start; margin-top:8px; }
  .explore-section { margin-top:40px; padding-top:32px; }
  .partner-section { margin-top:44px; padding-top:32px; }
  .now-share-status { right:8px; }
}