/* Moosed Radio: graphic radio vibe. Dark studio, signal red, warm amber. */
:root{
  --bg:#0a0a0f; --bg2:#0e0e14; --panel:#13131b; --panel2:#191922;
  --ink:#f4f1e8; --dim:#aaa698; --faint:#6f6e66;
  --red:#ff2d40; --red-dk:#c40f22; --amber:#ffb43a; --line:#26262f;
  --rad:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--amber)}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
h1,h2,h3,.disp{font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:.98;margin:0}
h2{font-size:clamp(30px,4.6vw,52px);margin-bottom:10px}
h2 .thin{color:var(--red)}
.kicker{color:var(--red);font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:12px;margin:0 0 10px}
.sub{color:var(--dim);max-width:62ch;margin:0 0 26px}
section{padding:64px 0 8px}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;
  font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px;
  border:0;border-radius:999px;padding:13px 24px;cursor:pointer;text-decoration:none;
  transition:transform .15s ease, background .15s ease}
.btn:hover{background:var(--red-dk);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn.amber{background:var(--amber);color:#17130a}
.btn.amber:hover{background:#ffc766}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(10,10,15,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{height:36px;width:auto}
.brand .bt{font-weight:900;text-transform:uppercase;font-size:19px;letter-spacing:.02em}
.brand .bt span{color:var(--red)}
nav.main{margin-left:auto;display:flex;align-items:center;gap:22px}
nav.main a.nl{color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.05em}
nav.main a.nl:hover{color:var(--amber)}
.onair{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--red);
  color:#fff;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:800;letter-spacing:.14em}
.onair i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,45,64,.55)}70%{box-shadow:0 0 0 9px rgba(255,45,64,0)}100%{box-shadow:0 0 0 0 rgba(255,45,64,0)}}
.install-btn[hidden]{display:none}
/* hero */
.hero{padding:52px 0 10px;position:relative;overflow:hidden}
.hero:before{content:"ON AIR 24/7";position:absolute;right:-30px;top:6px;
  font-size:clamp(90px,16vw,220px);font-weight:900;color:transparent;
  -webkit-text-stroke:1px #1d1d27;letter-spacing:.02em;pointer-events:none;line-height:1}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:34px;align-items:start;position:relative}
.hero h1{font-size:clamp(52px,8.4vw,110px)}
.hero h1 .r{color:var(--red)}
.hero .lede{color:var(--dim);font-size:18px;max-width:52ch;margin:16px 0 24px}
.hero .lede strong{color:var(--ink)}
.stripes{height:10px;border-radius:6px;margin:26px 0 0;
  background:repeating-linear-gradient(-45deg,var(--red) 0 16px,#14141b 16px 32px)}
/* player card */
.player{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:var(--rad);padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.player .p-top{display:flex;gap:18px;align-items:center}
.p-art{width:118px;height:118px;border-radius:12px;object-fit:cover;background:#000;flex:none}
.p-meta{min-width:0}
.p-live{display:inline-flex;align-items:center;gap:7px;color:var(--red);font-weight:800;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.p-live i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
.p-title{font-size:clamp(20px,2.6vw,27px);font-weight:900;line-height:1.12;margin:5px 0 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-artist{color:var(--amber);font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-show{color:var(--dim);font-size:13.5px;margin-top:4px}
.p-ctl{display:flex;align-items:center;gap:16px;margin-top:20px}
.playbtn{width:74px;height:74px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:var(--red);color:#fff;font-size:27px;display:grid;place-items:center;
  transition:transform .15s ease, background .15s ease;box-shadow:0 10px 26px rgba(255,45,64,.35)}
.playbtn:hover{background:var(--red-dk);transform:scale(1.04)}
.playbtn:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.p-status{font-size:13px;color:var(--dim)}
.p-status b{color:var(--ink)}
.eq{display:flex;gap:3px;align-items:flex-end;height:26px;margin-left:auto}
.eq i{width:5px;background:var(--amber);border-radius:2px;height:30%}
.eq.on i{animation:eq 0.9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}
.eq i:nth-child(4){animation-delay:.45s}.eq i:nth-child(5){animation-delay:.6s}
@keyframes eq{from{height:18%}to{height:100%}}
.vol{display:flex;align-items:center;gap:9px;color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.08em}
.vol input[type=range]{accent-color:var(--red);width:110px}
.p-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:700}
.chip:hover{border-color:var(--amber);color:var(--amber)}
/* persistent bottom player bar: the Moosed Studio bar pattern (fixed bottom,
   play/pause, artwork thumb, station line + now-playing line, volume), in this
   site's tokens. Body padding keeps the bar from ever covering content. The bar
   is fixed at left/right 0 with min-width:0 children, so it cannot widen the page. */
:root{--bar-h:72px}
body{padding-bottom:calc(var(--bar-h) + 18px)}
.barplayer{position:fixed;left:0;right:0;bottom:0;z-index:80;height:var(--bar-h);
  display:flex;align-items:center;gap:14px;padding:8px 20px;
  background:rgba(10,10,15,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.b-play{width:50px;height:50px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:var(--red);color:#fff;font-size:19px;display:grid;place-items:center;
  transition:transform .15s ease, background .15s ease;box-shadow:0 8px 22px rgba(255,45,64,.35)}
.b-play:hover{background:var(--red-dk);transform:scale(1.04)}
.b-play:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.b-art{width:48px;height:48px;flex:none;border-radius:9px;object-fit:cover;background:#000}
.b-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.b-station{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.b-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
.b-live{color:var(--red)}
.b-np{color:var(--dim);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-vol{flex:none}
@media (max-width:640px){
  .barplayer{gap:10px;padding:8px 12px}
  .b-play{width:46px;height:46px;font-size:17px}
  .b-art{width:42px;height:42px}
  .b-np{font-size:13.5px}
  .b-eq,.b-vol{display:none}
}
/* recent */
.recent{margin-top:20px}
.recent h3{font-size:13px;letter-spacing:.18em;color:var(--dim);margin-bottom:10px}
.recent-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.recent-item{flex:none;width:150px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px}
.recent-item img{width:100%;height:74px;object-fit:cover;border-radius:8px;background:#000}
.recent-item .rt{font-size:12.5px;font-weight:800;margin-top:7px;line-height:1.25}
.recent-item .ra{font-size:12px;color:var(--dim)}
/* hero side art */
.hero-art{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:18px;text-align:center}
.hero-art img{border-radius:12px;margin:0 auto}
.hero-art .big{font-size:44px;font-weight:900;margin-top:12px}
.hero-art .big span{color:var(--red)}
.hero-art p{color:var(--dim);margin:4px 0 0;font-size:14px}
.upnext{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:16px 18px}
.upnext h3{font-size:13px;letter-spacing:.18em;color:var(--dim);margin-bottom:8px}
.upnext li{list-style:none;display:flex;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:14.5px}
.upnext li:first-of-type{border-top:0}
.upnext ul{margin:0;padding:0}
.upnext .t{color:var(--amber);font-weight:800;flex:none;min-width:86px}
.upnext .n{font-weight:700}
/* hosts */
.host-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.host-card{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:20px}
.mono{flex:none;width:92px;height:92px;border-radius:14px;display:grid;place-items:center;
  font-size:34px;font-weight:900;color:#fff;background:linear-gradient(150deg,var(--red),#7a0a16)}
.mono.alt{background:linear-gradient(150deg,var(--amber),#8a5a08);color:#1c1405}
.host-card h3{font-size:24px}
.host-card .role{color:var(--amber);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:3px 0 7px}
.host-card p{color:var(--dim);margin:0;font-size:14.5px}
.desk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.desk-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.desk-card .mono{width:54px;height:54px;font-size:20px;border-radius:10px;margin-bottom:10px}
.desk-card h3{font-size:18px}
.desk-card .role{color:var(--amber);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;margin:2px 0 6px}
.desk-card p{color:var(--dim);margin:0;font-size:13.5px}
/* party band */
.party{margin-top:64px;background:linear-gradient(120deg,#1c0510,#0e0e14 55%,#160b02);
  border:1px solid var(--red-dk);border-radius:var(--rad);padding:30px}
.party h2{margin-bottom:6px}
.party p{color:var(--dim);max-width:66ch;margin:0 0 16px}
/* schedule */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;
  padding:9px 18px;font-weight:800;font-size:13.5px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em}
.tab[aria-selected=true]{background:var(--red);border-color:var(--red);color:#fff}
table.grid{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
table.grid td,table.grid th{padding:12px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:top;font-size:14.5px}
table.grid tr:first-child td{border-top:0}
table.grid .tm{color:var(--amber);font-weight:800;white-space:nowrap;width:150px}
table.grid .sn{font-weight:800}
table.grid .sd{color:var(--dim)}
table.grid tr.now td{background:#221016}
table.grid tr.now .sn:after{content:"ON NOW";color:var(--red);font-size:10.5px;letter-spacing:.14em;margin-left:9px;vertical-align:2px}
.sched-note{color:var(--faint);font-size:13px;margin-top:10px}
/* news + events */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:22px}
.panel h3{font-size:20px;margin-bottom:12px}
.news-item{padding:12px 0;border-top:1px solid var(--line)}
.news-item:first-of-type{border-top:0;padding-top:2px}
.news-item .d{color:var(--red);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.news-item .t{font-weight:800;font-size:16.5px;margin:3px 0}
.news-item p{color:var(--dim);margin:0;font-size:14px}
.ev{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.ev:first-of-type{border-top:0}
.ev .when{flex:none;width:118px;color:var(--amber);font-weight:800;font-size:13px;text-transform:uppercase}
.ev .what{font-size:14.5px}
.ev .what b{display:block;font-size:15px}
/* giveaways */
.give{margin-top:20px;background:var(--panel);border:1px dashed #3a3a46;border-radius:var(--rad);padding:22px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.give h3{font-size:21px}
.give p{color:var(--dim);margin:4px 0 0;max-width:70ch;font-size:14.5px}
/* listen everywhere */
.listen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.lcard h3{font-size:18px;margin-bottom:7px}
.lcard p{color:var(--dim);font-size:14px;margin:0 0 14px}
.copyrow{display:flex;gap:8px}
.copyrow input{flex:1;min-width:0;background:#0a0a0f;border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:10px 12px;font-size:13px}
.copyrow button{flex:none}
/* footer */
footer{margin-top:76px;border-top:1px solid var(--line);background:var(--bg2)}
footer .wrap{padding-top:30px;padding-bottom:36px}
.f-brand{display:flex;gap:12px;align-items:center}
.f-brand img{height:30px;width:auto}
footer p{color:var(--dim);font-size:13.5px;max-width:78ch}
footer .fl{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0}
footer .fl a{color:var(--ink);text-decoration:none;font-weight:700;font-size:13.5px}
footer .fl a:hover{color:var(--amber)}
.fine{color:var(--faint);font-size:12.5px}
/* dialog */
dialog{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:16px;max-width:440px;width:calc(100% - 40px)}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog h3{font-size:20px;margin-bottom:8px}
dialog p, dialog li{color:var(--dim);font-size:14.5px}
dialog .x{margin-top:14px}
/* responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .desk-grid,.listen-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:640px){
  nav.main a.nl{display:none}
  .host-grid{grid-template-columns:1fr}
  .desk-grid,.listen-grid{grid-template-columns:1fr}
  .p-top{flex-direction:column;align-items:flex-start}
  .p-art{width:100%;height:auto;aspect-ratio:1}
  .p-title{white-space:normal}
  section{padding:46px 0 4px}
  table.grid .tm{width:104px}
}
@media (prefers-reduced-motion:reduce){
  .eq i,.onair i,.p-live i{animation:none}
  html{scroll-behavior:auto}
}

/* ==== MOBILE OVERFLOW FIX 2026-10-21 (see BUILD-RECORD.md) ====
   Cause: .p-ctl (the player controls row) never wraps. Its min-content,
   about 357px including the player padding and driven by the fixed
   110px volume slider group, exceeded the hero column width on phones.
   Grid items default to min-width:auto, so the entire first hero
   column (kicker, H1, lede, player) was forced to that width and the
   text clipped at the right edge of the screen (Chairman's phone
   screenshot, 2026-10-20 23:57 EDT). The sticky header also sat at its
   ~373px min-content floor at these widths.
   Fix: let the hero grid columns and the player internals shrink below
   min-content, wrap the controls row instead of forcing the width,
   trim the header gaps on small screens, and clip any residual
   horizontal overflow at the root (clip, not hidden, so the sticky
   header keeps working). Desktop rendering is unchanged.
   Amendment, same night, after the first real layout measurement
   (chrome-headless-shell): at 360px the three listen cards also
   overflowed their grid track by 7px, forced by the stream URL
   input's intrinsic min-content inside .copyrow (bisect-proven:
   hiding that one card cleared it). .lcard and .copyrow therefore
   also get min-width:0 below. Final measured state: zero
   overflowing elements at 360, 375, 412, 600, 768, 1024, 1440. */
html,body{overflow-x:clip}
.hero-grid>div{min-width:0}
.player,.p-top,.p-ctl{min-width:0}
.p-art{min-width:0}
.p-ctl{flex-wrap:wrap}
.lcard{min-width:0}
.copyrow{min-width:0}
@media (max-width:640px){
  .site-head .wrap{gap:10px}
  nav.main{gap:10px}
  .onair{padding:6px 10px}
  .site-head .btn{padding:11px 16px}
}
/* ==== END MOBILE OVERFLOW FIX ==== */