/* Reference composition. The original 0.14 backdrop opacity and dark overlays remain in hero.css. */
:root { --reference-yellow: #ffdf00; }
.topbar { background: #060a0deF; }
.header-search { border: 0; background: transparent; color: #fff; width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; cursor: pointer; }
.header-search svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.header-play { display: inline-flex; gap: 12px; align-items: center; justify-content: center; white-space: nowrap; text-transform: uppercase; background: var(--reference-yellow); color: #080b0c; min-height: 60px; padding: 17px 28px; font-size: .86rem; font-weight: 800; }
.topbar .nav a { position: relative; }
.topbar .nav a[aria-current] { color: var(--reference-yellow); }
.topbar .nav a[aria-current]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--reference-yellow); }
.story-nav { display: none; }
.opening-actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.opening-play { background: var(--reference-yellow); text-transform: uppercase; min-height: 72px; padding: 20px 35px; font-size: 1rem; box-shadow: 0 0 32px #ffdf0024; }
.opening-programs { display: inline-flex; gap: 30px; align-items: center; justify-content: center; min-height: 72px; padding: 20px 32px; border: 1px solid #ffffff70; border-radius: 50px; font-size: .94rem; font-weight: 750; text-transform: uppercase; }
.opening-programs span { font-size: 1.7rem; line-height: 1; }
.opening-programs:hover { border-color: var(--reference-yellow); color: var(--reference-yellow); }
.opening-brand figcaption { font-family: 'Segoe Print','Bradley Hand','Apple Chancery',cursive; font-style: italic; font-size: clamp(1.8rem,2.4vw,2.8rem); line-height: 1.1; color: #fff; letter-spacing: 0; transform: rotate(-6deg); margin: 0 0 0 25%; }
.opening-brand figcaption::after { content: ''; display: block; height: 4px; width: 150px; margin: 12px auto 0; background: var(--reference-yellow); border-radius: 100%; transform: rotate(-7deg); }
.music-strip { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 28px clamp(24px,3.4vw,64px); min-height: 132px; border-block: 1px solid #ffffff1b; background: #060b0e; }
.music-genres { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 20px; list-style: none; margin: 0; padding: 0; }
.music-genres li { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: #fff; font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .035em; }
.music-genres svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.music-socials { display: flex; align-items: center; gap: 12px; padding-left: 34px; border-left: 1px solid #ffffff30; }
.music-socials>span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin-right: 10px; }
.music-socials a { width: 46px; height: 46px; border-radius: 50%; background: #ffffff0e; display: grid; place-items: center; color: #fff; }
.music-socials a:hover { color: var(--reference-yellow); background: #ffffff19; }
.music-socials svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.music-socials a[aria-label='Facebook'] svg { fill: currentColor; stroke: none; }
.station-search { width: min(650px,calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 28px; margin: auto; border: 1px solid #ffdf0055; border-radius: 22px; background: #101317; color: #fff; overflow: auto; }
.station-search::backdrop { background: #000b; backdrop-filter: blur(7px); }
.station-search-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.station-search-heading h2 { margin: 0; font-size: 1.7rem; }
.station-search-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff40; background: none; color: #fff; font-size: 28px; cursor: pointer; }
.station-search label { display: block; font-size: .85rem; color: #c3c5ca; margin-bottom: 12px; }
.station-search input { width: 100%; color: #fff; background: #05080a; border: 1px solid #ffffff45; border-radius: 12px; min-height: 52px; padding: 14px; font: inherit; }
.station-search input:focus { outline: 2px solid var(--reference-yellow); outline-offset: 2px; }
#station-search-status { color: #aaaeb4; font-size: .8rem; margin: 20px 0 10px; }
#station-search-results { list-style: none; margin: 0; padding: 0; }
#station-search-results a { display: flex; flex-direction: column; gap: 7px; padding: 15px 8px; border-bottom: 1px solid #ffffff17; }
#station-search-results a:hover { background: #ffffff08; }
#station-search-results strong { font-size: .95rem; }
#station-search-results span { font-size: .75rem; color: #a4a8ad; }
.header-search:focus-visible,.header-play:focus-visible,.music-socials a:focus-visible { outline: 2px solid var(--reference-yellow); outline-offset: 3px; }
@media(min-width:1200px) {
 :root { --header-height: 116px; }
 .topbar { height: var(--header-height); display: flex; padding: 8px clamp(24px,2.8vw,60px); gap: clamp(20px,2.5vw,44px); }
 .topbar .energy-brand { flex: 0 0 clamp(130px,11vw,195px); width: auto; }
 .topbar .energy-brand img { width: 100%; height: 100px; object-fit: contain; }
 .topbar>.nav { display: flex; flex: 1; width: auto; justify-content: center; gap: clamp(12px,1.6vw,28px); padding: 0; }
 .topbar .nav a { font-size: clamp(.65rem,.8vw,.94rem); letter-spacing: .035em; padding: 15px 0; }
 .topbar>.header-actions { display: flex; gap: 18px; margin: 0; }
 .topbar .menu-toggle,.topbar .story-menu { display: none; }
 .broadcast-hero { --page-gutter: clamp(30px,3.4vw,64px); min-height: calc(100svh - var(--player-height) - 132px); padding: calc(var(--header-height) + 52px) var(--page-gutter) 60px; }
 .station-opening { padding-top: 0; }
 .opening-layout { grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); gap: 50px; padding: 0; }
 .opening-copy { max-width: 850px; }
 .opening-copy h1 { font-size: clamp(4.5rem,6.65vw,8.2rem); line-height: .98; letter-spacing: -.06em; }
 .opening-copy h1>span:nth-child(2) { color: var(--reference-yellow); }
 .opening-eyebrow { margin-bottom: 28px; text-transform: uppercase; font-size: .88rem; letter-spacing: .2em; gap: 18px; }
 .opening-eyebrow>span { width: 44px; height: 2px; border-radius: 0; background: var(--reference-yellow); }
 .opening-description { max-width: 650px; font-size: clamp(1rem,1.25vw,1.4rem); margin: 24px 0 32px; line-height: 1.6; }
 .opening-brand { max-width: 520px; justify-self: center; }
 .broadcast-slide-controls { top: auto; bottom: 12px; left: auto; right: var(--page-gutter); }
 .broadcast-slide-controls button { min-height: 32px; padding: 7px 12px; font-size: .65rem; }
}
@media(min-width:1200px) and (max-width:1399px) {
 .topbar { gap: 18px; }
 .header-play { min-height: 50px; padding: 14px 18px; font-size: .7rem; }
 .topbar>.header-actions { gap: 8px; }
 .opening-actions { gap: 14px; }
 .opening-play,.opening-programs { min-height: 60px; padding: 16px 22px; font-size: .8rem; }
 .music-strip { gap: 24px; }
 .music-socials { padding-left: 20px; }
 .music-socials>span { display: none; }
}
@media(max-width:1199px) {
 :root { --header-height: 80px; }
 .topbar { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; gap: 16px; }
 .topbar>.nav,.topbar .story-menu,.header-play { display: none; }
 .topbar .energy-brand,.topbar .energy-brand img { width: 132px; height: 72px; object-fit: contain; }
 .topbar>.header-actions { display: flex; margin-left: auto; gap: 12px; }
 .topbar .menu-toggle { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: auto; min-width: 96px; height: 44px; padding: 0 14px; border: 1px solid #ffffff30; border-radius: 12px; background: #ffffff09; color: #fff; }
 .topbar .menu-toggle b { display: inline; font-size: .85rem; }
 .topbar .menu-toggle i { display: flex; flex-direction: column; gap: 5px; }
 .topbar .menu-toggle i span { display: block; width: 17px; height: 2px; background: currentColor; }
 .music-strip { flex-direction: column; gap: 24px; }
 .music-genres { width: 100%; }
 .music-socials { border-left: 0; padding-left: 0; }
}
@media(max-width:760px) {
 .topbar { padding-inline: 16px; }
 .topbar>.header-actions { gap: 8px; }
 .header-search { width: 36px; flex-basis: 36px; }
 .opening-actions { flex-direction: column; gap: 12px; }
 .opening-play,.opening-programs { width: 100%; min-height: 56px; padding: 15px 18px; font-size: .85rem; }
 .opening-copy h1>span:nth-child(2) { color: var(--reference-yellow); }
 .music-strip { padding: 24px; }
 .music-genres { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px 12px; }
 .music-genres li { font-size: .56rem; line-height: 1.4; gap: 10px; }
 .music-genres svg { width: 26px; height: 26px; }
 .station-search { padding: 20px; }
}

/* Live video sits ahead of the station's video archive. */
.live-broadcast { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(240px,1fr); gap: clamp(24px,4vw,56px); align-items: center; padding: clamp(20px,3vw,36px); margin: 0 0 48px; background: #101417; border: 1px solid #ffffff22; border-radius: 24px; }
.live-broadcast-screen { min-width: 0; background: #020405; border-radius: 14px; overflow: hidden; }
.live-broadcast video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #020405; }
.live-broadcast-copy h3 { margin: 12px 0 16px; color: #fff; font-size: clamp(1.6rem,2.5vw,2.7rem); line-height: 1.08; letter-spacing: -.035em; }
.live-broadcast-copy>p { color: #b9bdc2; font-size: .9rem; line-height: 1.6; }
.live-broadcast-label { display: inline-flex; gap: 8px; align-items: center; color: var(--reference-yellow); text-transform: uppercase; font-size: .72rem; font-weight: 750; letter-spacing: .1em; }
.live-broadcast-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.live-broadcast .energy-button { margin-top: 8px; min-height: 48px; cursor: pointer; }
.live-broadcast .energy-button:disabled { opacity: .65; cursor: wait; }
.live-broadcast .energy-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#live-video-status { min-height: 3.2em; margin: 16px 0 0; font-size: .78rem; }
@media(max-width:760px) {
 .live-broadcast { grid-template-columns: minmax(0,1fr); gap: 22px; padding: 16px; border-radius: 18px; }
 .live-broadcast .energy-button { width: 100%; }
}

/* Left-aligned footer logo with centered text, links and credits. */
.energy-footer { grid-template-columns: minmax(0,1fr); justify-items: center; gap: 24px; text-align: center; }
.energy-footer > div { width: 100%; }
.energy-footer img { margin-inline: 0; }
.energy-footer nav { justify-content: center; max-width: 960px; }
.energy-footer > p { margin: 0; text-align: center; }


/* Logo-inspired lettering for the first slide, served with a local font. */
@font-face { font-family: 'Racing Sans One'; src: url('../fonts/racing-sans-one.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
.opening-radio-label { margin: 0 0 38px; font-family: 'Racing Sans One',Geist,Arial,sans-serif; font-size: clamp(3.5rem,6.6vw,7.4rem); font-weight: 400; line-height: .95; letter-spacing: -.04em; text-transform: lowercase; }
.opening-radio-label span { display: block; position: relative; isolation: isolate; width: fit-content; margin-inline: auto; padding: 0 .08em .06em; color: #fff; }
.opening-radio-label span::after { content: attr(data-text); position: absolute; inset: 0; padding: inherit; z-index: 1; background: linear-gradient(#fff 35%,#f5f5f5 65%,#a9a9a9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.opening-radio-label span:nth-child(2)::after { background-image: linear-gradient(#ffe944 15%,#ffd000 65%,#f3a600); }
.opening-radio-label span::before { content: attr(data-text); position: absolute; inset: 0; padding: inherit; z-index: -1; color: #050607; -webkit-text-fill-color: #050607; -webkit-text-stroke: .13em #050607; paint-order: stroke fill; filter: drop-shadow(1px 0 #fff) drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(0 -1px #fff); }
@media(max-width:760px) {
 .opening-brand { width: 200px; }
 .opening-radio-label { margin: 0; font-size: clamp(2.4rem,10vw,3.4rem); }
}