/* Studio-style opening, built from editable text and live controls. */
.broadcast-hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - var(--player-height)); padding: calc(var(--header-height) + 55px) var(--page-gutter) 24px; display: flex; flex-direction: column; justify-content: center; background: #050909; }
.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; }
.broadcast-hero::before { content: ""; position: absolute; z-index: -2; inset: var(--header-height) 0 0; background: linear-gradient(90deg,#02070850,transparent 72%),linear-gradient(0deg,#020608a0,transparent 23%); }
.broadcast-hero::after { content: ""; position: absolute; z-index: -1; left: 0; top: var(--header-height); bottom: 0; width: 120px; opacity: .24; background: radial-gradient(#ffc400 1px,transparent 2px) 0 0 / 15px 15px; mask-image: linear-gradient(0deg,#000,transparent 30%,transparent 80%,#000); pointer-events: none; }
.broadcast-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.broadcast-hero svg:not(.broadcast-symbols) { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.broadcast-stage { display: grid; grid-template-columns: 44% 43%; gap: 2.5%; align-items: center; position: relative; z-index: 1; }
.broadcast-copy { min-width: 0; }
.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-copy h1 { text-transform: uppercase; font-size: clamp(3.5rem,5.55vw,6.5rem); font-weight: 900; letter-spacing: -.07em; line-height: .97; margin: 0 0 22px; color: #fff; }
.broadcast-copy h1 > span { display: block; }
.broadcast-copy h1 > span:nth-child(2) { color: #ffd400; background: linear-gradient(#ffef00 20%,#ffd500 60%,#efa300); background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #825a1640); }
.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; transition: border-color .2s,background .2s; }
.broadcast-actions > a span { color: #ffda00; font-size: 1.5rem; line-height: 1; }
.broadcast-actions > a:hover { border-color: #ffda00; background: #161508; }
.broadcast-genres { list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0; margin: 27px 0 0; max-width: 510px; }
.broadcast-genres li { display: flex; align-items: center; flex-direction: column; gap: 10px; position: relative; }
.broadcast-genres li:first-child { align-items: flex-start; }
.broadcast-genres li:not(:last-child)::after { content: ""; position: absolute; top: 7px; bottom: 6px; right: 0; width: 1px; background: #ffffff30; }
.broadcast-genres li > span { color: #ffda00; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #ffda00; border-radius: 50%; }
.broadcast-genres b { color: #f4f4f4; font-size: .66rem; line-height: 1.15; font-weight: 650; text-align: center; max-width: 90px; text-transform: uppercase; }
.broadcast-genres li:first-child b { width: 46px; }
.broadcast-art { position: relative; min-width: 0; padding-top: 20px; }
.broadcast-art > img { width: 100%; height: auto; display: block; transform: rotate(-5deg) scale(1.08); filter: drop-shadow(0 0 2px #ffda00) drop-shadow(0 6px 15px #000b); }
.broadcast-equalizer { align-items: flex-end; height: 58px; gap: 4px; opacity: .95; margin-top: 15px; transform: none; }
.broadcast-equalizer i { width: 4px; border-radius: 1px; background: linear-gradient(#ffde00,#b7860070); box-shadow: 0 0 6px #e9b00030; }
.broadcast-art > p { text-align: center; font: 450 clamp(.5rem,.7vw,.74rem)/1.6 monospace; letter-spacing: .18em; color: #eceeea; text-transform: uppercase; margin: 6px 0 0; }
.broadcast-art > p i { color: #92958d; padding: 0 8px; font-style: normal; }
.broadcast-city { position: absolute; right: 4.5%; top: calc(var(--header-height) + 25px); display: flex; flex-direction: column; align-items: center; color: #ffdc00; transform: rotate(-9deg); }
.broadcast-city > span { font: italic clamp(2.6rem,4.2vw,4.8rem)/1 'Snell Roundhand','Brush Script MT',cursive; }
.broadcast-city b { font: 650 clamp(.5rem,.8vw,.8rem)/1.5 monospace; text-transform: uppercase; letter-spacing: .2em; border-bottom: 2px solid #ffdc00; padding-bottom: 8px; }
.broadcast-mic-copy { position: absolute; left: 82%; top: calc(var(--header-height) + (100% - var(--header-height)) * .51); display: flex; flex-direction: column; font: 800 clamp(.6rem,.9vw,1rem)/1.2 monospace; text-transform: uppercase; color: #f9f9f5; }
.broadcast-mic-copy b { color: #ffe000; }
.broadcast-mic-copy i { width: 45px; height: 3px; background: #ffda00; margin-top: 12px; }
.broadcast-bottom { display: flex; width: 88%; gap: 0; margin-top: 34px; position: relative; z-index: 1; }
.broadcast-benefits { flex: 1; min-width: 0; list-style: none; padding: 20px 10px; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #ffffff24; border-radius: 16px; background: linear-gradient(110deg,#101510ee,#11160ed9,#4c3b10c9); backdrop-filter: blur(10px); }
.broadcast-benefits li { display: flex; align-items: center; gap: 12px; padding: 0 17px; }
.broadcast-benefits li + li { border-left: 1px solid #ffffff18; }
.broadcast-benefits svg { color: #ffd500; width: 30px !important; height: 30px !important; }
.broadcast-benefits li > span { display: flex; flex-direction: column; gap: 7px; }
.broadcast-benefits b { font-size: clamp(.6rem,.74vw,.8rem); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.broadcast-benefits small { color: #c5c7c4; font-size: clamp(.55rem,.66vw,.72rem); line-height: 1.5; }
.broadcast-quote { position: relative; flex-shrink: 0; display: block; align-content: center; margin: 0 0 0 -1px; padding: 22px 22px 22px 44px; color: #f6f6f0; border: 1px solid #ffffff24; border-radius: 16px; font: 500 clamp(.6rem,.8vw,.85rem)/1.7 monospace; letter-spacing: .1em; text-transform: uppercase; background: #0d120eeb; }
.broadcast-quote > span { position: absolute; left: 18px; top: 18px; font-size: 2rem; line-height: 1; color: #ffda00; }
.broadcast-quote b { color: #ffda00; }
.broadcast-footer { display: flex; align-items: center; gap: 25px; margin-top: 30px; color: #eee; position: relative; z-index: 1; }
.broadcast-footer > a { font: 450 .63rem/1.6 monospace; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 20px; }
.broadcast-footer > a > span { color: #ffda00; font-size: 1.3rem; }
.broadcast-socials { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.broadcast-socials a { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; }
.broadcast-socials a span { font: 800 24px/1 Arial,sans-serif; }
.broadcast-socials svg { width: 19px !important; height: 19px !important; }
.broadcast-socials a:hover { color: #ffda00; }
.broadcast-location { padding-left: 30px; border-left: 1px solid #ffffff30; text-transform: uppercase; font: 500 .62rem/1.6 monospace; letter-spacing: .1em; }
.broadcast-location small { display: block; color: #a6aaa8; font-size: .58rem; }
.broadcast-hero a:focus-visible,.broadcast-hero button:focus-visible { outline: 3px solid #ffdb00; outline-offset: 5px; }
@media(min-width:1600px) {
  .broadcast-stage { grid-template-columns: 46% 44%; }
  .broadcast-copy h1 { font-size: 5.65rem; }
  .broadcast-bottom { width: 96%; }
}
@media(min-width:761px) and (max-width:1100px) {
  .broadcast-hero { padding-top: calc(var(--header-height) + 48px); }
  .broadcast-backdrop { object-position: right center; }
  .broadcast-hero::before { background: linear-gradient(90deg,#020708b0,transparent 90%),linear-gradient(0deg,#020608a0,transparent 25%); }
  .broadcast-stage { grid-template-columns: 53% 45%; gap: 2%; }
  .broadcast-copy h1 { font-size: clamp(3.3rem,7.6vw,4.6rem); }
  .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; }
  .broadcast-art { align-self: center; padding-top: 0; }
  .broadcast-art > img { transform: rotate(-5deg); }
  .broadcast-city { top: calc(var(--header-height) + 20px); right: 6%; }
  .broadcast-mic-copy { display: none; }
  .broadcast-bottom { width: 100%; }
  .broadcast-benefits li { gap: 8px; padding: 0 10px; }
  .broadcast-benefits svg { width: 24px !important; height: 24px !important; }
  .broadcast-quote { padding: 18px 16px 18px 32px; font-size: .58rem; }
  .broadcast-quote > span { left: 12px; }
}
@media(max-width:760px) {
  .broadcast-hero { padding: calc(var(--header-height) + 36px) var(--page-gutter) 25px; min-height: 0; }
  .broadcast-backdrop { object-position: 63% top; height: 700px; }
  .broadcast-hero::before { background: linear-gradient(0deg,#050909 5%,#050909b0 50%,#05090965); }
  .broadcast-stage { display: flex; flex-direction: column; gap: 34px; align-items: stretch; }
  .broadcast-eyebrow { font-size: .52rem; letter-spacing: .12em; gap: 10px; margin-bottom: 20px; }
  .broadcast-eyebrow i { flex-basis: 25px; }
  .broadcast-copy h1 { font-size: clamp(2.6rem,12vw,5rem); margin-bottom: 20px; }
  .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; }
  .broadcast-genres { margin-top: 26px; max-width: none; }
  .broadcast-genres li:first-child { align-items: center; }
  .broadcast-genres b { font-size: .55rem; max-width: 66px; }
  .broadcast-genres li > span { width: 40px; height: 40px; }
  .broadcast-genres svg { width: 22px !important; height: 22px !important; }
  .broadcast-art { width: 100%; max-width: 480px; padding: 0 8px; margin: 0 auto; }
  .broadcast-art > img { transform: rotate(-4deg); }
  .broadcast-equalizer { height: 42px; gap: 3px; margin-top: 10px; }
  .broadcast-equalizer i { width: 3px; }
  .broadcast-art > p { font-size: .52rem; letter-spacing: .1em; }
  .broadcast-city,.broadcast-mic-copy { display: none; }
  .broadcast-bottom { width: 100%; flex-direction: column; margin-top: 30px; gap: 10px; }
  .broadcast-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 6px 14px; background: #10170ff0; }
  .broadcast-benefits li { padding: 16px 4px; gap: 9px; }
  .broadcast-benefits li + li { border-left: none; }
  .broadcast-benefits li:nth-child(even) { padding-left: 12px; }
  .broadcast-benefits li:nth-child(n+3) { border-top: 1px solid #ffffff20; }
  .broadcast-benefits svg { width: 24px !important; height: 24px !important; }
  .broadcast-benefits b { font-size: .58rem; }
  .broadcast-benefits small { font-size: .56rem; }
  .broadcast-quote { font-size: .72rem; padding: 18px 20px 18px 48px; margin: 0; }
  .broadcast-quote br { display: none; }
  .broadcast-quote > span { top: 17px; }
  .broadcast-footer { flex-wrap: wrap; gap: 18px; margin-top: 25px; }
  .broadcast-footer > a { font-size: .56rem; letter-spacing: .07em; gap: 10px; }
  .broadcast-socials { gap: 8px; }
  .broadcast-location { width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid #ffffff20; font-size: .57rem; }
}
@media(prefers-reduced-motion:reduce) { .broadcast-hero .equalizer i { animation: none; } }
@media(min-width:1101px) {
  .broadcast-copy h1 { font-size: clamp(4rem,6.5vw,6.5rem); }
  .broadcast-mic-copy { left: auto; right: 6%; text-shadow: 0 2px 5px #000; }
}
@media(min-width:1600px) {
  .broadcast-copy h1 { font-size: 6.5rem; }
  .broadcast-mic-copy { right: 11%; }
}
/* 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; }
}