/* Oddly Informed — the station identity, shared by every public surface. */
@font-face{font-family:Outfit;src:url('/assets/outfit-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url('/assets/outfit-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Outfit;src:url('/assets/outfit-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;--bg:#050714;--white:#fff0ce;--muted:#b0b2bc;--dim:#8a8d9a;--red:#ff7849;--amber:#ffe1a0;--blue:#7296ff;--line:#a4b7ff20;--oi-cobalt:#315dff;--oi-orange:#ff7849;--oi-cream:#fff0ce;--oi-surface:#0a1025;--sans:'Outfit',sans-serif}
html{background:var(--bg);scroll-padding-top:28px}
body{background:var(--bg);color:var(--white);font-family:var(--sans)}
::selection{background:#315dff;color:#fff0ce}
a,button,input{accent-color:var(--oi-cobalt)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--oi-cream);outline-offset:5px}
em{font-family:var(--sans);font-weight:700;font-style:normal;color:var(--blue)}
h1,h2,h3{font-family:var(--sans)}
.brand{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;color:var(--white);text-decoration:none;font-family:var(--sans);white-space:nowrap;letter-spacing:-1.2px}
.brand-logo{display:block;position:relative;flex:0 0 76px;width:76px;height:76px;overflow:hidden}
.brand-logo img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;transform:scale(1.2)}
.brand-wordmark{display:flex;flex-direction:column;font-weight:700;font-size:29px;line-height:.88;letter-spacing:-1.1px;gap:3px;padding-bottom:2px}
.brand .brand-wordmark>span{display:block;color:var(--oi-cream)}
.brand .brand-wordmark .brand-dot{color:var(--oi-orange)}
.brand-dot{color:var(--oi-orange)}
.integrated-header .brand{gap:8px}
.integrated-header .brand-logo{width:90px;height:90px;flex-basis:90px;margin-left:-8px}
.integrated-header .brand-wordmark{font-size:35px;letter-spacing:-1.5px}
.site-footer .brand-logo{width:64px;height:64px;flex-basis:64px}
.site-footer .brand-wordmark{font-size:27px}
.integrated-header h1{font-size:14px;line-height:1.5;letter-spacing:0;margin-top:12px;color:var(--muted)}
.integrated-header h1 em{font-size:14px;font-weight:500;color:var(--white)}
.integrated-header .main-nav{gap:0;padding:0;min-height:45px;margin:14px 0 0;border-bottom:1px solid var(--line)}
.integrated-header .main-nav a{display:flex;align-items:center;justify-content:center;padding:9px 5px;position:relative;color:var(--muted);transition:color .2s}
.integrated-header .main-nav a:hover,.integrated-header .main-nav a.active{color:var(--white)}
.main-nav .active:after{width:20px;height:3px;border-radius:1px;background:var(--oi-cobalt);bottom:-2px;box-shadow:0 0 13px #315dff66}
.discover-section{position:relative}
.discover-section .channel-guide h2{font-size:27px;line-height:1.1;font-weight:700;letter-spacing:-.8px;margin-top:10px}
.discover-section .channel-guide h2 em{font-size:27px;margin:0;color:var(--blue)}
.guide-heading .eyebrow{color:var(--dim);letter-spacing:1.5px}
.channel-guide .channel-option{border-bottom-color:var(--line);position:relative}
.discover-section .channel-option.selected{border-bottom-color:var(--oi-cobalt);background:linear-gradient(90deg,#315dff18,transparent 85%)}
.discover-section .channel-option:hover{background:#315dff12}
.discover-section .channel-number{color:var(--dim);font-weight:400;font-style:normal;font-size:19px}
.discover-section .selected .channel-number,.discover-section .channel-option.selected .select-cursor{color:var(--blue)}
.channel-option .channel-copy strong{font-weight:500}
.discover-section .channel-option.on-air .channel-airtime{color:var(--oi-orange)}
.discover-section .channel-thumb img{border-radius:4px}
.broadcast-screen{border-radius:8px;isolation:isolate;background:#080e23}
.screen-corner{display:none}
.signal-square{background:var(--oi-orange);border-radius:50%;box-shadow:0 0 9px #ff784977}
.screen-ident{color:var(--oi-cream)}
.screen-preview{font-weight:500;letter-spacing:1.5px}
.screen-broadcast-state{border-radius:3px}
.featured-caption h2{font-weight:700;letter-spacing:-1.2px}
.featured-caption h2>span{color:var(--oi-orange)}
.featured-caption .eyebrow{color:var(--blue)}
.featured-description{color:var(--muted)}
.round-button{color:var(--oi-cream);background:var(--oi-cobalt);box-shadow:inset 0 1px 0 #ffffff30,0 5px 0 #172c83;transition:background .2s,transform .2s}
.round-button:hover{background:#4770ff;transform:translateY(-2px)}
.round-button svg{stroke:currentColor}
.broadcast-baseline{border-color:var(--line);color:var(--dim);letter-spacing:1.4px}
.broadcast-baseline span:first-child i{background:var(--oi-orange);border-radius:50%;box-shadow:0 0 8px #ff784955}
.broadcast-baseline span:last-child{color:var(--blue)}
.section-label{letter-spacing:1.6px;color:var(--dim)}
.section-label>span{color:var(--blue)}
.mission-heading h2,.section-heading h2,.about-statement h2{font-weight:700;letter-spacing:-1.5px;line-height:1.08}
.mission-heading h2 em,.section-heading h2 em,.about-statement h2 em{font-family:var(--sans);font-weight:700;color:var(--blue)}
.mission-copy .mission-lead{font-weight:500;color:var(--white)}
.text-link{color:var(--white)}
.text-link span{color:var(--oi-orange)}
.filter{border:0;background:transparent;color:var(--muted);border-radius:5px;box-shadow:none}
.filter:hover{color:var(--white);background:#315dff20}
.filter.selected{background:var(--oi-cobalt);color:var(--oi-cream);border-color:transparent;box-shadow:inset 0 1px 0 #ffffff25}
.filter.selected span{color:var(--oi-cream);background:#07112e44}
.programme{background:transparent;border-top:1px solid var(--line);border-radius:0;transition:background .2s}
.programme:hover{background:#121521}
.programme-copy h3{font-weight:700}
.programme-copy h3>span{color:var(--oi-orange)}
.programme-id strong{font-style:normal;color:var(--blue)}
.programme .programme-link>svg{border:1px solid var(--line);border-radius:50%;color:var(--white);background:#0d1632}
.programme:hover .programme-link>svg{background:var(--oi-cobalt);border-color:transparent;color:var(--white)}
.programme .host-face{border-color:#27479a}
.topic-tags span{color:var(--muted);border-color:var(--line);background:transparent}
.principles>div>span{color:var(--blue)}
.principles h3{font-weight:500}
.footer-top>p{font-weight:700;color:var(--white)}
.footer-bottom,.concept-note{color:var(--dim)}
.footer-status i{background:var(--oi-cobalt);box-shadow:0 0 7px #315dff66}
.live-pill{color:var(--oi-orange)}
.live-pill i{background:var(--oi-orange);box-shadow:0 0 10px #ff784966}
/* The approved reusable renderer stays byte-identical. Its decorative station
   bug is replaced at the presentation layer, outside its motion/review logic. */
.composition-brand{font-size:0;gap:0!important}
.composition-brand>span{display:none!important}
.composition-brand::before{content:'';width:3.5em;height:3.5em;font-size:12px;background:url('/assets/display/logo-256.png') center/130% no-repeat;margin-right:6px}
.composition-brand::after{content:'ODDLY INFORMED';font:700 clamp(7px,1vw,13px)/1 var(--sans);letter-spacing:1px;color:var(--oi-cream)}
@media(min-width:1600px){.integrated-header .brand-logo{width:104px;height:104px;flex-basis:104px}.integrated-header .brand-wordmark{font-size:42px}.integrated-header h1,.integrated-header h1 em{font-size:15px}.discover-section .channel-guide h2,.discover-section .channel-guide h2 em{font-size:30px}}
@media(min-width:851px) and (max-width:1150px){.integrated-header .brand-logo{width:72px;height:72px;flex-basis:72px}.integrated-header .brand-wordmark{font-size:31px}.integrated-header h1,.integrated-header h1 em{font-size:12px}.discover-section .channel-guide h2,.discover-section .channel-guide h2 em{font-size:24px}}
@media(max-width:850px){.integrated-header .brand{justify-self:start}.integrated-header .brand-logo{width:74px;height:74px;flex-basis:74px}.integrated-header .brand-wordmark{font-size:30px}.integrated-header h1{align-self:center;margin:0}.integrated-header .main-nav{margin-top:9px;justify-content:flex-start;gap:25px}.integrated-header .main-nav a{padding:11px 0}.brand-logo{width:62px;height:62px;flex-basis:62px}.brand-wordmark{font-size:26px}}
@media(max-width:580px){.integrated-header .brand-logo{width:75px;height:75px;flex-basis:75px}.integrated-header .brand-wordmark{font-size:32px}.integrated-header .main-nav{justify-content:space-between;gap:0;margin-top:10px}.integrated-header .main-nav a{padding:12px 4px}.discover-section .channel-guide h2{display:none}.discover-section .channel-number{font-size:18px}.broadcast-screen{border-radius:0}.featured-caption h2{font-size:29px}.mission-heading h2{font-size:36px}.section-heading h2{font-size:32px}.site-footer .brand-logo{width:58px;height:58px;flex-basis:58px}.site-footer .brand-wordmark{font-size:25px}.watch-header .brand-logo{width:58px;height:58px;flex-basis:58px}.watch-header .brand-wordmark{font-size:25px}.watch-header .brand{gap:4px}.brand{letter-spacing:-1px}.composition-brand::before{font-size:8px}.composition-brand::after{letter-spacing:.7px}}
@media(prefers-reduced-motion:reduce){.round-button{transition:none}}
/* The overview shows the next airtime; the player carries the full schedule. */
.discover-section .channel-copy{gap:3px}
.discover-section .channel-copy>.channel-daily-times{display:none}
.discover-section .channel-option{padding-block:11px}
.discover-section .channel-copy>.channel-airtime{margin-top:3px}
.discover-section .channel-guide{justify-content:flex-start}
@media(min-width:851px) and (max-width:1150px){.discover-section .channel-option{padding-block:9px}.discover-section .channel-copy>span:not(.channel-airtime){font-size:6px;letter-spacing:.3px}}

/* A subtle descriptor and cream headings add contrast to the blue identity. */
.brand .brand-news{font:400 10px/1 var(--sans);letter-spacing:.8px;color:var(--muted);align-self:flex-end;margin:0 0 8px 1px;padding:0;text-transform:lowercase}
.integrated-header .brand-news{margin-bottom:13px}
.discover-section .channel-guide h2 em,.mission-heading h2 em,.section-heading h2 em,.about-statement h2 em{color:var(--white)}
.composition-brand{position:relative}
.composition-brand .composition-brand-mark{display:block!important;position:absolute;left:100%;bottom:6px;width:auto;height:auto;margin-left:7px;transform:none;background:none}
.composition-brand .composition-brand-mark i{display:none}
.composition-brand .composition-brand-mark::after{content:'news';font:400 8px/1 var(--sans);letter-spacing:.6px;color:var(--muted)}
@media(min-width:851px) and (max-width:1150px){.integrated-header .brand{gap:4px}.integrated-header .brand-wordmark{font-size:29px}.integrated-header .brand-news{font-size:9px;margin-bottom:11px}}
@media(max-width:580px){.brand .brand-news{font-size:9px;margin-bottom:9px}.integrated-header .brand-news{margin-bottom:11px}}

/* A lighter desktop scale; keep small labels and touch targets readable. */
@media(min-width:851px){
  .discover-section.wrap{width:min(1680px,92%);padding-top:22px}
  .broadcast-layout{grid-template-columns:minmax(0,1fr) clamp(260px,21vw,300px);gap:22px 24px}
  .integrated-header .brand-logo{width:82px;height:82px;flex-basis:82px}
  .integrated-header .brand-wordmark{font-size:32px}
  .integrated-header .brand-news{margin-bottom:12px}
  .integrated-header h1{margin-top:9px}
  .integrated-header .main-nav{margin-top:10px}
  .discover-section .channel-guide h2,.discover-section .channel-guide h2 em{font-size:25px}
  .discover-section .channel-options{margin-top:12px}
  .discover-section .channel-option{padding-block:9px}
  .discover-section .channel-copy strong{font-size:15px}
  .discover-section .channel-number{font-size:18px}
  .featured-caption{padding-top:19px;gap:10px 22px}
  .featured-caption h2{font-size:32px}
  .broadcast-baseline{padding-block:22px 17px}
}
@media(min-width:1151px){
  .mission-section{padding-block:60px 64px;gap:60px}
  .mission-heading h2{font-size:clamp(32px,3.4vw,48px);margin-top:20px}
  .mission-copy .mission-lead{font-size:22px}
  .mission-copy p{font-size:15px}
  .lineup-section{padding-block:50px 60px}
  .section-heading{margin-bottom:28px}
  .section-heading h2{font-size:32px}
  .section-heading h2 em{font-size:37px}
  .programme{padding:30px 28px;gap:28px}
  .programme-list{gap:14px}
  .programme-copy h3{font-size:31px}
  .programme-id strong{font-size:40px}
  .programme-cast>strong{font-size:16px}
  .host-face{font-size:60px}
  .topic-tags{margin-top:17px}
  .about-section{padding-block:32px 52px;gap:60px}
  .about-statement h2{font-size:26px}
  .about-statement h2 em{font-size:30px}
  .site-footer{padding-block:25px 24px}
  .footer-top>p{font-size:27px}
}
@media(min-width:1600px){
  .discover-section.wrap{width:min(1680px,92%);padding-top:26px}
  .broadcast-layout{grid-template-columns:minmax(0,1fr) 330px;gap:26px 28px}
  .integrated-header .brand-logo{width:94px;height:94px;flex-basis:94px}
  .integrated-header .brand-wordmark{font-size:38px}
  .discover-section .channel-guide h2,.discover-section .channel-guide h2 em{font-size:27px}
  .discover-section .channel-copy strong{font-size:16px}
  .discover-section .channel-option{min-height:64px}
  .featured-caption h2{font-size:36px}
}
@media(min-width:851px) and (max-width:1150px){
  .discover-section.wrap{width:94%;padding-top:20px}
  .broadcast-layout{grid-template-columns:minmax(0,1fr) 250px;gap:15px 18px}
  .integrated-header .brand-logo{width:68px;height:68px;flex-basis:68px}
  .integrated-header .brand-wordmark{font-size:27px}
  .integrated-header .brand-news{margin-bottom:10px}
  .discover-section .channel-guide h2,.discover-section .channel-guide h2 em{font-size:22px}
  .discover-section .channel-copy strong{font-size:14px}
  .featured-caption h2{font-size:30px}
}
@media(max-width:580px){
  .discover-section.wrap{padding-top:14px}
  .integrated-header .brand-logo{width:69px;height:69px;flex-basis:69px}
  .integrated-header .brand-wordmark{font-size:29px}
  .integrated-header .brand-news{margin-bottom:10px}
  .integrated-header .main-nav{margin-top:7px}
  .broadcast-layout{gap:16px}
  .featured-caption{padding-top:17px}
  .featured-caption h2{font-size:27px}
  .mission-section{padding-block:32px 35px;gap:21px}
  .mission-heading h2{font-size:33px}
  .section-heading h2{font-size:30px}
  .section-heading h2 em{font-size:30px}
}

.powered-by-grok{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font:400 11px/1.4 var(--sans);letter-spacing:.1px;white-space:nowrap;text-decoration:none}.powered-by-grok svg{width:17px;height:16px;flex-shrink:0}.powered-by-grok:hover{color:var(--white)}