/* Shared hero layout and DJ Vantash slide. */
.broadcast-hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - var(--player-height)); padding: calc(var(--header-height) + 82px) var(--page-gutter) 32px; display: flex; flex-direction: column; justify-content: center; background: #080b0c; }
.broadcast-backdrop { position: absolute; z-index: -3; left: 0; top: var(--header-height); width: 100%; height: calc(100% - var(--header-height)); object-fit: cover; object-position: center; opacity: .14; }
.broadcast-hero::before { content: ""; position: absolute; z-index: -2; inset: var(--header-height) 0 0; background: linear-gradient(90deg,#080b0c 0%,#080b0cb0 42%,#080b0c25 100%),linear-gradient(0deg,#080b0c,transparent 40%); }
.broadcast-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; color: #f5f5f2; text-transform: uppercase; font: 450 clamp(.55rem,.8vw,.8rem)/1.7 monospace; letter-spacing: .15em; }
.broadcast-eyebrow i { display: block; flex: 0 0 42px; height: 2px; background: #ffd000; }
.broadcast-eyebrow b { color: #ffd000; font-weight: 750; }
.broadcast-description { max-width: 560px; font-size: clamp(.95rem,1.2vw,1.25rem); line-height: 1.65; color: #d1d2d4; margin: 0; text-wrap: pretty; }
.broadcast-actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.broadcast-actions .energy-button { gap: 12px; padding: 19px 24px; font-size: clamp(.72rem,.95vw,.98rem); text-transform: uppercase; background: linear-gradient(125deg,#ffd800,#ffc900); white-space: nowrap; }
.broadcast-actions .energy-button > span { font-size: 1.25rem; }
.broadcast-actions > a { display: inline-flex; align-items: center; justify-content: center; gap: 22px; border: 1px solid #ffffff50; border-radius: 50px; padding: 14px 22px; font-size: clamp(.62rem,.78vw,.85rem); text-transform: uppercase; font-weight: 750; white-space: nowrap; background: #04080780; }
.broadcast-actions > a span { color: #ffda00; font-size: 1.5rem; line-height: 1; }
.broadcast-actions > a:hover { border-color: #ffda00; background: #161508; }
.broadcast-hero a:focus-visible,.broadcast-hero button:focus-visible { outline: 3px solid #ffdb00; outline-offset: 5px; }
@media(min-width:761px) and (max-width:1100px) {
 .broadcast-eyebrow { font-size: .5rem; letter-spacing: .08em; gap: 10px; }
 .broadcast-eyebrow i { flex-basis: 24px; }
 .broadcast-actions { gap: 10px; }
 .broadcast-actions .energy-button { padding: 16px; font-size: .67rem; gap: 8px; }
 .broadcast-actions > a { padding: 13px; gap: 10px; font-size: .58rem; }
}
@media(max-width:760px) {
 .broadcast-hero { min-height: 0; padding-bottom: 25px; }
 .broadcast-eyebrow { font-size: .52rem; letter-spacing: .12em; gap: 10px; margin-bottom: 20px; }
 .broadcast-eyebrow i { flex-basis: 25px; }
 .broadcast-description { font-size: .93rem; line-height: 1.65; }
 .broadcast-actions { gap: 12px; flex-wrap: wrap; margin-top: 22px; }
 .broadcast-actions .energy-button { width: 100%; font-size: .84rem; padding: 16px; }
 .broadcast-actions > a { width: 100%; font-size: .7rem; padding: 13px; gap: 25px; }
}
/* Manually selected hero slides; the station's audio element stays outside. */
.broadcast-hero { padding-top: calc(var(--header-height) + 82px); }
.broadcast-slide-controls { position: absolute; top: calc(var(--header-height) + 16px); left: var(--page-gutter); z-index: 4; display: flex; gap: 8px; }
.broadcast-slide-controls button { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 16px; border: 1px solid #ffffff35; border-radius: 24px; color: #ddd; background: #0a1012cc; font: 600 .74rem/1.2 Geist,Arial,sans-serif; cursor: pointer; }
.broadcast-slide-controls button span { font: 500 .62rem monospace; color: #999; }
.broadcast-slide-controls button[aria-pressed="true"] { color: #ffd648; border-color: #ffd64880; background: #28240be6; }
.broadcast-slide-controls button[aria-pressed="true"] span { color: #ffd648; }
.broadcast-slide-controls button:hover { border-color: #ffd648; }
.broadcast-slide { width: 100%; }
.broadcast-vantash { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(30px,6vw,90px); align-items: center; padding: 20px 4% 36px; }
.showing-vantash .broadcast-backdrop { opacity: .35; object-position: left center; }
.showing-vantash::before { background: linear-gradient(90deg,#020708d9,#02070875),radial-gradient(ellipse at 76% 50%,#ffc40020,transparent 65%); }
.vantash-copy { min-width: 0; }
.vantash-copy h2 { margin: 0 0 20px; font-size: clamp(4.2rem,8.5vw,8rem); line-height: .88; letter-spacing: -.065em; font-weight: 900; text-transform: uppercase; color: #fff; }
.vantash-copy h2 span { color: #ffc400; }
.vantash-station { color: #fff; font-size: 1.1rem; margin: 24px 0 16px; font-weight: 650; }
.vantash-copy .broadcast-description { max-width: 460px; }
.vantash-tagline { font: 500 .75rem/1.6 monospace; text-transform: uppercase; letter-spacing: .18em; color: #b6ad90; margin-top: 30px; }
.vantash-photo { margin: 0; width: min(100%,350px); justify-self: center; position: relative; }
.vantash-photo::before { content: ""; position: absolute; inset: -14px; border: 1px solid #ffc40065; border-radius: 24px; transform: rotate(4deg); pointer-events: none; }
.vantash-photo img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid #ffffff25; box-shadow: 0 24px 70px #0009; position: relative; }
.vantash-photo figcaption { position: relative; margin-top: 18px; color: #b8b8ba; font-size: .67rem; text-align: center; }
.vantash-photo figcaption span { color: #ffd657; font-weight: 700; }
.hero-slide-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(min-width:761px) and (max-width:1100px) {
  .broadcast-vantash { padding-inline: 0; grid-template-columns: minmax(0,1.1fr) minmax(0,.8fr); gap: 30px; }
  .vantash-copy h2 { font-size: clamp(3.8rem,8vw,6rem); }
  .vantash-copy .broadcast-actions { flex-wrap: wrap; }
  .vantash-photo { width: min(100%,300px); }
}
@media(max-width:760px) {
  .broadcast-hero { padding-top: calc(var(--header-height) + 78px); }
  .broadcast-slide-controls { top: calc(var(--header-height) + 14px); }
  .broadcast-slide-controls button { min-height: 44px; padding: 11px 16px; }
  .broadcast-vantash { grid-template-columns: minmax(0,1fr); padding: 0 0 28px; gap: 30px; }
  .vantash-copy h2 { font-size: clamp(3.3rem,15vw,6rem); }
  .vantash-copy .broadcast-eyebrow { margin-bottom: 26px; }
  .vantash-station { font-size: .95rem; margin-top: 20px; }
  .vantash-tagline { margin: 22px 0 0; font-size: .62rem; letter-spacing: .12em; }
  .vantash-photo { width: min(100% - 24px,303px); }
  .vantash-photo figcaption { font-size: .62rem; }
}
@media(max-width:760px) {
  .broadcast-vantash { gap: 18px; }
  .vantash-copy { display: contents; }
  .vantash-copy .broadcast-eyebrow { order: 0; margin: 0; }
  .vantash-copy h2 { order: 1; margin: 6px 0 10px; }
  .vantash-photo { order: 2; }
  .vantash-station { order: 3; margin: 12px 0 0; }
  .vantash-copy .broadcast-description { order: 4; }
  .vantash-copy .broadcast-actions { order: 5; margin-top: 4px; }
  .vantash-tagline { order: 6; margin-top: 4px; }
}

/* First slide: a single message, a single listening action, and room for the brand. */
.station-opening { padding-top: clamp(30px,5vh,72px); }
.opening-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: center; gap: clamp(40px,6vw,100px); padding-block: 20px 64px; }
.opening-copy { max-width: 680px; }
.opening-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; color: #c4c5bc; font-size: .8rem; letter-spacing: .09em; }
.opening-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #ffd000; }
.opening-copy h1 { margin: 0; color: #f7f7f0; font-size: clamp(3.4rem,5.8vw,6.2rem); font-weight: 800; line-height: 1.02; letter-spacing: -.065em; text-transform: uppercase; }
.opening-copy h1 > span { display: block; }
.opening-copy h1 > span:nth-child(2) { color: #ffd000; }
.opening-description { max-width: 470px; margin: 26px 0 30px; color: #b7babc; font-size: clamp(.95rem,1.2vw,1.125rem); line-height: 1.75; text-wrap: pretty; }
.opening-play { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 17px 27px; background: #ffd000; color: #10100b; font-size: .93rem; font-weight: 750; }
.opening-play svg { width: 20px; height: 20px; fill: currentColor; }
.opening-brand { width: 100%; max-width: 460px; margin: 0; justify-self: center; text-align: center; }
.opening-brand img { display: block; width: 100%; height: auto; }
.opening-brand figcaption { margin-top: 24px; color: #b7babc; font-size: .8rem; letter-spacing: .08em; }
.opening-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 23px; border-top: 1px solid #ffffff1a; color: #a7acae; font-size: .76rem; }
.opening-footer p { margin: 0; }
.opening-footer p span { margin-inline: 10px; color: #786b36; }
.opening-footer a { display: inline-flex; align-items: center; gap: 18px; color: #e1e3dd; min-height: 44px; }
.opening-footer a span { color: #ffd000; font-size: 1.2rem; }
@media(max-width:1000px) and (min-width:761px) {
 .opening-layout { gap: 28px; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
 .opening-copy h1 { font-size: 5.7vw; }
}
@media(max-width:760px) {
 .station-opening { padding-top: 22px; }
 .opening-layout { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 0 0 30px; }
 .opening-brand { order: -1; width: 160px; align-self: center; }
 .opening-brand figcaption { display: none; }
 .opening-eyebrow { margin-bottom: 18px; font-size: .72rem; letter-spacing: .05em; }
 .opening-copy h1 { font-size: clamp(2.7rem,10.4vw,4.8rem); letter-spacing: -.06em; }
 .opening-description { font-size: .95rem; margin: 22px 0 25px; }
 .opening-play { width: 100%; }
 .opening-footer { padding-top: 18px; flex-direction: column; align-items: flex-start; gap: 4px; font-size: .7rem; }
 .opening-footer p span { margin-inline: 5px; }
}