/* =========================================================
   POLLUX RADIO v2.8 — Broadcast Editorial Pass
========================================================= */
body.radioPage{
  --radio-width:1180px;
}

/* Header and masthead become denser; get to the music sooner. */
body.radioPage main.wrap{
  width:min(var(--radio-width),calc(100% - 44px))!important;
  max-width:var(--radio-width)!important;
}
body.radioPage .hero{
  padding:clamp(52px,6vw,82px) 0 26px!important;
  margin-top:0!important;
}
body.radioPage .hero__grid{
  min-height:390px;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr)!important;
  align-items:center!important;
  gap:46px!important;
}
body.radioPage .hero__copy{max-width:790px}
body.radioPage .hero__title{
  max-width:none!important;
  font-size:clamp(58px,7.7vw,112px)!important;
  line-height:.82!important;
  letter-spacing:-.072em!important;
  margin:12px 0 22px!important;
}
body.radioPage .hero__title .hero__accent{
  max-width:660px;
  margin-top:16px!important;
  font-size:.29em!important;
  line-height:1.15!important;
  color:rgba(240,236,245,.33)!important;
}
body.radioPage .hero__lead{
  max-width:650px!important;
  font-size:14px!important;
  line-height:1.72!important;
  color:rgba(233,229,240,.58)!important;
}
body.radioPage .hero__actions{margin-top:22px!important}
body.radioPage .hero__chips{margin-top:12px!important;gap:6px!important}
body.radioPage .hero__chips .chip{
  padding:6px 8px!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.018)!important;
  border-color:rgba(255,255,255,.075)!important;
  color:rgba(240,236,245,.44)!important;
  font-size:9px!important;
}

/* The sigil becomes an architectural station-state object. */
body.radioPage .hero__sigil{
  min-height:260px;
  display:grid!important;
  place-items:center;
  position:relative;
  opacity:.86!important;
  transform:none!important;
  filter:none!important;
  border:1px solid rgba(255,255,255,.07);
  border-radius:24px;
  background:
    radial-gradient(circle at center,rgba(var(--room-accent),.08),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008));
}
body.radioPage .hero__sigil:before{
  content:"ARCHIVE / STATION 01";
  position:absolute;left:15px;top:14px;
  font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.17em;color:rgba(255,255,255,.31)
}
body.radioPage .hero__sigil:after{
  content:"SHUFFLE SOURCE / YOUTUBE";
  position:absolute;right:15px;bottom:14px;
  font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;color:rgba(255,255,255,.26)
}
body.radioPage .sigil{transform:scale(.7)}
body.radioPage .sigil__ring{opacity:.5}

/* Player is the visual centerpiece. */
body.radioPage .card--player{
  margin-top:0!important;
  border-radius:24px!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:0 26px 80px rgba(0,0,0,.30)!important;
}
body.radioPage .radioRoomStrip{
  margin:0!important;
  padding:11px 16px!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  border-radius:0!important;
  background:linear-gradient(90deg,rgba(var(--room-accent),.045),transparent 60%)!important;
}
body.radioPage .radioDeck{
  grid-template-columns:minmax(0,1.22fr) minmax(320px,.78fr)!important;
}
body.radioPage .radioDeck__screen{padding:16px!important}
body.radioPage .radioDeck__screenTop{margin-bottom:10px!important}
body.radioPage .ytPlayerShell{border-radius:14px!important}
body.radioPage .radioDeck__meta{padding:22px!important}
body.radioPage .radioDeck__title{
  font-size:clamp(30px,3.3vw,48px)!important;
}
body.radioPage .radioArtworkWrap{
  aspect-ratio:16/7.5!important;
  border-radius:14px!important;
}
body.radioPage .radioDeck__controls{
  gap:6px!important;
}
body.radioPage .radioDeck__controls .btn{min-height:38px!important}
body.radioPage .radioActionRail{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:5px!important;
  padding:10px 14px 14px!important;
}
body.radioPage .radioActionRail button{
  min-height:38px!important;
  border-radius:10px!important;
  font-size:9px!important;
}

/* Release context and Room Witness feel like editorial notes, not dashboard widgets. */
body.radioPage .radioContext,
body.radioPage .radioWitness{
  border-radius:20px!important;
}
body.radioPage .radioContext{
  margin-top:14px!important;
  padding:18px!important;
}
body.radioPage .radioWitness{
  margin:14px 0 0!important;
  min-height:220px!important;
}
body.radioPage .radioWitness__main{padding:27px!important}
body.radioPage .radioWitness__facility{padding:27px!important}
body.radioPage .radioWitness h2{
  font-size:clamp(36px,4.7vw,58px)!important;
}

/* Promotion now reads as a quiet sponsor strip AFTER the station experience. */
body.radioPage #promoCard{
  margin:16px 0 0!important;
  opacity:.88;
}
body.radioPage #promoCard:hover{opacity:1}

/* Secondary information is grouped and visually subordinate. */
body.radioPage .card--stats,
body.radioPage .card--chat{
  background:rgba(255,255,255,.018)!important;
  border-radius:18px!important;
}
body.radioPage .card--stats{margin-top:14px!important}
body.radioPage .card--chat{margin-top:14px!important}

/* No floating Portal UI survives on Radio. */
body.radioPage .portalCommandTrigger:not(.portalCommandTrigger--header),
body.radioPage .portalLiveChip:not(.portalLiveChip--header){
  display:none!important;
  position:static!important;
  inset:auto!important;
}

@media(max-width:980px){
  body.radioPage .hero__grid{grid-template-columns:1fr!important;min-height:auto!important}
  body.radioPage .hero__sigil{display:none!important}
  body.radioPage .radioDeck{grid-template-columns:1fr!important}
  body.radioPage .radioActionRail{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:680px){
  body.radioPage main.wrap{width:calc(100% - 24px)!important}
  body.radioPage .hero{padding:42px 0 24px!important}
  body.radioPage .hero__title{font-size:clamp(50px,16vw,76px)!important}
  body.radioPage .radioActionRail{grid-template-columns:1fr 1fr!important}
  body.radioPage .radioRoomStrip{align-items:flex-start!important}
  body.radioPage .radioRoomStrip>span{max-width:55%;text-align:right}
}