/* Concrete Jungle Radio — site v2 shared styles
   Design language carried from the live one-pager: dark, cinematic, minimal, premium.
   Near-black warm background, amber accent, Spectral serif display + Libre Franklin sans. */

:root{
  --bg:#0b0908;
  --bg-raise:#141110;
  --bg-card:#171310;
  --line:#2c251e;
  --line-soft:#211c17;
  --ink:#f2ead9;
  --ink-soft:#cfc4ae;
  --ink-mute:#9a8f7a;
  --amber:#e9a83c;
  --amber-hi:#f6c169;
  --amber-deep:#9c6a1e;
  --danger:#e0684f;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Page background collage — one shared Bronx collage, banked locally
     (assets/backgrounds/bronx-collage.jpg; see
     community-hub/background-collage-design.md). The dark gradient over
     the photos is the contrast guarantee: text never sits on a raw photo.
     --bg is the fallback if the image cannot load. */
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(11,9,8,.66), rgba(11,9,8,.80)),
    url("assets/backgrounds/bronx-collage.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* Fixed backgrounds stutter on phones — scroll with the page there. */
@media (max-width:720px){body{background-attachment:scroll}}
img{max-width:100%}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber-hi);text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:#14100a;padding:8px 14px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------- Header / nav ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(11,9,8,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.site-head .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;flex-direction:column;line-height:1.15;margin-right:auto}
.brand .brand-over{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.brand .brand-name{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--ink)}
.brand:hover{text-decoration:none}
nav.mainnav{display:flex;gap:4px;flex-wrap:wrap}
nav.mainnav a{
  color:var(--ink-soft);font-size:14.5px;font-weight:600;
  padding:7px 10px;border-radius:6px;
}
nav.mainnav a:hover{color:var(--ink);text-decoration:none;background:var(--bg-raise)}
nav.mainnav a[aria-current="page"]{color:var(--amber)}
.listen-btn{
  background:var(--amber);color:#171106 !important;font-weight:800;
  padding:8px 16px;border-radius:999px;font-size:14.5px;white-space:nowrap;
}
.listen-btn:hover{background:var(--amber-hi);text-decoration:none}

/* ---------- Type & sections ---------- */
h1,h2,h3{font-family:var(--serif);line-height:1.2;color:var(--ink)}
h1{font-size:clamp(34px,5.4vw,58px);font-weight:700;margin:0 0 14px}
h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 12px}
h3{font-size:21px;margin:0 0 8px}
p{margin:0 0 14px;color:var(--ink-soft)}
.lede{font-size:19px;color:var(--ink-soft)}
.eyebrow{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber);font-weight:700;margin:0 0 10px;
}
section.block{padding:56px 0;border-bottom:1px solid var(--line-soft)}
/* Alt sections stay translucent (not solid) so the collage breathes
   through the page instead of hiding behind flat bands. */
section.block.alt{background:rgba(20,17,16,.86)}
.muted{color:var(--ink-mute)}
.small{font-size:14px}
strong{color:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  padding:74px 0 58px;
  /* Base is transparent now: the collage shows behind the amber glows
     instead of a flat dark band. */
  background:
    radial-gradient(900px 420px at 85% -80px, rgba(233,168,60,.16), transparent 60%),
    radial-gradient(700px 380px at 8% 110%, rgba(156,106,30,.12), transparent 60%),
    transparent;
  border-bottom:1px solid var(--line-soft);
}
.hero .tagline{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,25px);color:var(--amber-hi);margin:0 0 16px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{
  display:inline-block;background:var(--amber);color:#171106;font-weight:800;
  padding:12px 22px;border-radius:999px;font-size:15.5px;border:1px solid var(--amber);
}
.btn:hover{background:var(--amber-hi);text-decoration:none;color:#171106}
.btn.ghost{background:transparent;color:var(--amber)}
.btn.ghost:hover{background:rgba(233,168,60,.12);color:var(--amber-hi)}

/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:920px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
.card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;gap:6px;
}
.card p{margin:0}
.card .card-link{margin-top:auto;padding-top:10px;font-weight:700}
.tag{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);border:1px solid var(--amber-deep);
  border-radius:999px;padding:3px 10px;width:fit-content;
}
.tag.live{color:#14100a;background:var(--amber);border-color:var(--amber)}
.clock-card .slot{
  font-family:var(--serif);font-size:26px;color:var(--ink);margin:2px 0;
}
.dj-mama{border-top:4px solid #d9b36a}
.dj-campeon{border-top:4px solid #e0684f}
.dj-baoyu{border-top:4px solid #7d6fd0}
.dj-night{border-top:4px solid #4d4237}
.dj-conductor{border-top:4px solid #c98a3d}
.dj-sabado{border-top:4px solid #3f9e6b}
.dj-domingo{border-top:4px solid #7a9cc4}
.dj-wire{border-top:4px solid #b0483e}

/* ---------- On-air ---------- */
.onair{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:var(--bg-card);border:1px solid var(--amber-deep);border-radius:12px;
  padding:14px 18px;margin:0 0 26px;
}
.onair .dot{width:10px;height:10px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 4px rgba(224,104,79,.18)}
.onair .onair-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);font-weight:800}
.onair .onair-show{font-family:var(--serif);font-size:20px;color:var(--ink)}
.onair .onair-next{color:var(--ink-mute);font-size:14.5px;margin-left:auto}
.onair .onair-listen,.onair .onair-peak{color:var(--ink-mute);font-size:14.5px;white-space:nowrap}
.onair .onair-listen strong,.onair .onair-peak strong{color:var(--ink)}
.visit-count{margin-top:16px}
.countdown{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:14px 0}
.countdown div{text-align:center;min-width:64px}
.countdown b{display:block;font-family:var(--serif);font-size:34px;line-height:1;color:var(--ink)}
.countdown span{font-size:13px;color:var(--ink-mute)}
tr.on-now td, .show-row.on-now{border-color:var(--amber-deep)}
.show-row.on-now{background:rgba(233,168,60,.07)}
.now-badge{
  display:none;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--danger);color:#fff;border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle;
}
.on-now .now-badge{display:inline-block}

/* ---------- Schedule table ---------- */
table.sched{width:100%;border-collapse:collapse;font-size:15.5px}
table.sched th,table.sched td{padding:11px 12px;border:1px solid var(--line-soft);text-align:left;vertical-align:top}
table.sched th{background:var(--bg-card);font-family:var(--serif);color:var(--ink)}
table.sched td.time{white-space:nowrap;color:var(--amber-hi);font-weight:700}
.day-head{font-family:var(--serif);font-size:22px;margin:30px 0 10px;color:var(--ink)}

/* ---------- Player ---------- */
.player-box{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:22px}
.player-box audio{width:100%;margin:8px 0 4px}
.player-frame{width:100%;height:340px;border:1px solid var(--line);border-radius:12px;background:#000}
.presence-band{margin-top:14px;border:1px dashed var(--line);border-radius:14px;padding:16px 22px}
.presence-band .presence-line{margin:0;font-family:var(--serif);font-size:19px;color:var(--ink)}
.presence-band .presence-line strong{color:var(--amber,inherit)}

/* ---------- Reviews ---------- */
.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
@media (max-width:600px){.score-grid{grid-template-columns:repeat(2,1fr)}}
.score-cell{background:var(--bg-raise);border:1px solid var(--line-soft);border-radius:10px;padding:14px;text-align:center}
.score-cell .lane{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:800}
.score-cell .score{font-family:var(--serif);font-size:32px;color:var(--amber)}
blockquote.pull{
  font-family:var(--serif);font-style:italic;font-size:23px;color:var(--ink);
  border-left:3px solid var(--amber);margin:18px 0;padding:4px 0 4px 18px;
}
.verdict-tier{font-family:var(--serif);font-size:19px;color:var(--amber-hi)}

/* ---------- Merch ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.filters button{
  background:var(--bg-card);color:var(--ink-soft);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;
}
.filters button:hover{border-color:var(--amber-deep);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--amber);color:#171106;border-color:var(--amber)}
.product-card{padding:0;overflow:hidden}
.product-card .ph{aspect-ratio:1/1;background:var(--bg-raise);display:block;overflow:hidden}
.product-card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.product-card .ph .ph-fallback{
  display:flex;align-items:center;justify-content:center;height:100%;padding:20px;text-align:center;
  font-family:var(--serif);font-size:20px;color:var(--ink-mute);
  background:radial-gradient(420px 220px at 50% 0%, rgba(233,168,60,.13), transparent 70%),var(--bg-raise);
}
.product-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.product-card .price{font-family:var(--serif);font-size:22px;color:var(--amber)}
.product-card .buy{margin-top:auto;padding-top:8px}
[hidden]{display:none !important}

/* ---------- Forms ---------- */
form.station-form{display:grid;gap:14px;max-width:640px}
form.station-form label{font-weight:700;font-size:14.5px;color:var(--ink)}
form.station-form input,form.station-form select,form.station-form textarea{
  width:100%;margin-top:6px;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;color:var(--ink);padding:11px 12px;font-family:var(--sans);font-size:15.5px;
}
.form-note{
  background:rgba(233,168,60,.08);border:1px solid var(--amber-deep);
  border-radius:10px;padding:14px 16px;color:var(--ink-soft);font-size:15px;
}

/* ---------- Track list ---------- */
ol.tracks{columns:2;column-gap:40px;padding-left:22px;color:var(--ink-soft)}
@media (max-width:600px){ol.tracks{columns:1}}
ol.tracks li{margin-bottom:6px}
ol.tracks li::marker{color:var(--amber);font-weight:700}

/* ---------- Banner zones & house promos ---------- */
section.block.banner-zone{padding:34px 0}
.house-promo{
  border:1px dashed var(--amber-deep);border-radius:14px;background:var(--bg-card);
  padding:28px;text-align:center;
}
.house-promo p{margin:0 0 8px}
.house-promo p:last-child{margin-bottom:0}
.house-line{font-family:var(--serif);font-size:clamp(22px,3vw,28px);color:var(--ink)}

/* Sponsor banner slot (Phase 4A): filled by site.js only when the panel
   reports a currently-active, approved creative for this zone and week.
   Hidden — renders nothing — whenever no banner is sold. */
.sponsor-banner{
  border:1px solid var(--amber-deep);border-radius:14px;background:var(--bg-card);
  padding:18px 22px;text-align:center;margin-bottom:18px;
}
.sponsor-tag{
  margin:0 0 10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);font-weight:700;
}
.sponsor-banner-img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:8px}

/* ---------- Sponsor tiers ---------- */
.tier-price{font-family:var(--serif);font-size:32px;color:var(--ink);margin:0}
.tier-credits{font-family:var(--serif);font-size:20px;color:var(--amber);margin:0}
.card.tier-founder{
  border-color:var(--amber-deep);border-top:4px solid var(--amber);
  background:linear-gradient(180deg, rgba(233,168,60,.09), var(--bg-card) 55%);
}

/* ---------- Footer ---------- */
.site-foot{padding:44px 0 54px;color:var(--ink-mute);font-size:14.5px}
/* Background photo credits (CC BY / CC BY-SA, Wikimedia Commons — full
   sources + licenses: community-hub/background-collage-design.md §4):
   Yankee Stadium — Rachel Nicastro; Grand Concourse — MMZach;
   Bronx Zoo Asia Gate — SnowFire; New York Botanical Garden — King of Hearts;
   Orchard Beach — Bebo2good1; Jerome Ave el — Sashimi-b. */
.site-foot::after{
  content:"Background photos: Yankee Stadium © Rachel Nicastro · Grand Concourse © MMZach · Bronx Zoo © SnowFire · New York Botanical Garden © King of Hearts · Orchard Beach © Bebo2good1 · Jerome Ave el © Sashimi-b — CC BY / CC BY-SA, via Wikimedia Commons.";
  display:block;margin-top:26px;font-size:12.5px;color:var(--ink-mute);
}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
@media (max-width:720px){.site-foot .cols{grid-template-columns:1fr}}
.site-foot h3{font-size:17px;margin-bottom:10px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:6px}
.site-foot a{color:var(--ink-soft)}
.foot-rule{border:0;border-top:1px solid var(--line-soft);margin:0 0 34px}

/* ---------- Growth page ---------- */
.growth-scene{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:#0d0a14;line-height:0;
}
.growth-scene svg{display:block;width:100%;height:auto}
.growth-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
@media (max-width:920px){.growth-legend{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.growth-legend{grid-template-columns:1fr}}
.legend-item{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--bg-card);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;
}
.legend-dot{width:11px;height:11px;border-radius:50%;margin-top:5px;flex:none}
.legend-item strong{display:block;color:var(--ink);font-size:15px;line-height:1.35}
.legend-item span{font-size:13.5px;color:var(--ink-mute)}
.stamp{text-align:center;font-size:13.5px;color:var(--ink-mute);margin-top:18px}
.phase-card .goal-line{font-size:16px}
.goal-num{font-family:var(--serif);font-size:30px;color:var(--amber);white-space:nowrap}
.meter{
  height:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;overflow:hidden;margin-top:8px;
}
.meter-fill{height:100%;background:linear-gradient(90deg,var(--amber-deep),var(--amber));border-radius:999px}
.meter-row{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:14.5px;color:var(--ink-soft);margin-top:8px;
}
.mini-label{
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);margin:14px 0 6px;
}
ul.phase-list{list-style:none;margin:0;padding:0}
ul.phase-list li{position:relative;padding-left:22px;margin-bottom:7px;color:var(--ink-soft);font-size:15.5px}
ul.phase-list li:last-child{margin-bottom:0}
ul.phase-list.done li::before{content:"\2713";position:absolute;left:0;color:var(--amber);font-weight:800}
ul.phase-list.next li::before{content:"\2192";position:absolute;left:0;color:var(--ink-mute);font-weight:800}
ul.phase-list.build li::before{content:"\2022";position:absolute;left:2px;color:var(--danger);font-weight:800;font-size:19px;line-height:1.2}

/* ---------- The Door (front-door gate, index.html only) ---------- */
html.door-open{overflow:hidden}
body.dock-on{padding-bottom:60px}
.door{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(120% 100% at 50% 0%,#1a1410 0%,var(--bg) 62%);overflow-y:auto}
.door[hidden]{display:none}
.door-inner{max-width:640px;width:100%;text-align:center;animation:door-in .35s ease}
@keyframes door-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.door-frame{margin:0 0 22px}
.door-frame img{display:block;width:100%;height:min(34vw,260px);object-fit:cover;object-position:center 42%;border:1px solid var(--amber-deep);border-radius:14px}
.door-over{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);font-weight:800;margin:0 0 8px}
.door-name{font-family:var(--serif);font-size:clamp(34px,6vw,54px);line-height:1.05;margin:0 0 10px;color:var(--ink)}
.door-tagline{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.6vw,24px);color:var(--amber-hi);margin:0 0 12px}
.door-line{font-size:clamp(17px,2.4vw,20px);color:var(--ink-soft);margin:0 0 6px}
.door-sub{color:var(--ink-mute);font-size:14.5px;margin:0 0 22px}
.door-actions{margin:0 0 14px}
.door-enter{font-size:17px;padding:14px 26px}
.door-status{color:var(--danger);margin:0 0 10px}
.door-fallback{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 10px}
.door-fallback[hidden]{display:none}
.door-skip{margin:6px 0 0}
.door-skip-btn{background:none;border:0;color:var(--ink-mute);text-decoration:underline;cursor:pointer;font:inherit;font-size:14.5px;padding:10px}
.door-skip-btn:hover{color:var(--amber-hi)}
.door-poll{margin:10px 0 0}
.door-poll-btn{background:none;border:0;color:var(--ink-mute);text-decoration:underline;cursor:pointer;font:inherit;font-size:14.5px;padding:10px}
.door-poll-btn:hover{color:var(--amber-hi)}
/* Door sponsor showcase (front-door slot): the invitation line shows
   until the panel serves a real banner for the door zone; the banner
   slot itself stays hidden until then, same as every banner zone. */
.door-sponsor{margin:16px 0 0;border-top:1px solid var(--line-soft);padding-top:14px}
.door-sponsor-empty{margin:0;color:var(--ink-mute);font-size:14px}
.door-sponsor-empty a{color:var(--amber)}
.door .sponsor-banner{margin:12px 0 0;padding:14px 16px}
.door .sponsor-banner-img{max-height:120px;width:auto;max-width:100%}
/* Poll permission checkbox: opt-in, unchecked by default. The form's
   inputs are full-width by default; the checkbox stays its own size. */
.station-form .check-label{display:flex;gap:8px;align-items:flex-start;font-weight:400}
.station-form input[type="checkbox"]{width:auto;margin-top:3px;flex:none}
/* Docked player bar (appears after Enter starts the stream) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;align-items:center;gap:12px;padding:12px 16px;background:#141110;border-top:1px solid var(--line);color:var(--ink)}

/* ---------- The Dial — five boroughs, one station ---------- */
.dial-band{position:relative;display:flex;border:1px solid var(--amber-deep);border-radius:14px;background:var(--bg-card);padding:8px 4px 10px;--pos:0}
.dial-band::before{content:"";position:absolute;left:20px;right:20px;top:50%;height:2px;background:linear-gradient(90deg,var(--amber-deep),var(--amber),var(--amber-deep));opacity:.7}
.dial-needle{position:absolute;top:8px;bottom:8px;left:calc(var(--pos)*20% + 10%);width:3px;margin-left:-1px;background:var(--amber-hi);box-shadow:0 0 12px rgba(246,193,105,.8);border-radius:2px;transition:left .35s ease;z-index:0}
.dial-pos{position:relative;z-index:1;flex:1;min-width:0;background:none;border:0;color:var(--ink-soft);font:inherit;font-weight:700;font-size:14.5px;padding:16px 4px 4px;cursor:pointer}
.dial-pos:hover{color:var(--ink)}
.dial-pos[aria-pressed="true"]{color:var(--amber-hi)}
.dial-pos[aria-disabled="true"]{color:var(--ink-mute);cursor:default}
.dial-pos .dial-sub{display:block;font-size:12px;font-weight:600;color:var(--ink-mute);margin-top:2px}
.dial-pos[aria-pressed="true"] .dial-sub{color:var(--amber)}
.dial-readout{font-family:var(--serif);font-size:19px;color:var(--ink);margin:16px 0 0}
.dial-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.dial-cards .pop{font-size:13px;color:var(--ink-mute)}
@media (max-width:920px){.dial-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.dial-cards{grid-template-columns:1fr}.dial-pos{font-size:12.5px}.dial-pos .dial-sub{font-size:11px}}
.dock[hidden]{display:none}
.dock-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 4px rgba(224,104,79,.18);flex:none}
.dock-label{font-size:14.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-toggle{background:var(--amber);color:#171106;border:0;border-radius:999px;padding:8px 16px;font-weight:800;cursor:pointer;flex:none}
.dock-link{color:var(--amber);font-size:14px;white-space:nowrap;flex:none}
@media (max-width:600px){.dock-label{font-size:13px}.dock-link{display:none}}
/* Persistent player states (site.js runPersistentPlayer): the dot is
   red only while the stream is actually playing. Idle, paused, and
   refused-resume states show amber — waiting, not live — so the dock
   never claims to be live when it is not. */
.dock.is-idle .dock-dot,
.dock.is-paused .dock-dot,
.dock.is-resume .dock-dot{background:var(--amber);box-shadow:0 0 0 4px rgba(233,168,60,.18)}
@media (prefers-reduced-motion:reduce){.door-inner{animation:none}}

.welcome-figure{margin:0 auto 22px;max-width:600px}
.welcome-figure img{width:100%;height:auto;display:block;border-radius:14px}
.welcome-figure figcaption{margin-top:8px;font-size:15px;color:var(--ink);opacity:.8}

.spotlight-figure{margin:22px auto;max-width:600px}
.spotlight-figure img{width:100%;height:auto;display:block;border-radius:14px}
.spotlight-figure figcaption{margin-top:8px;font-size:15px;color:var(--ink);opacity:.8}

/* ---------- Station player bar (.org) ----------
   The station's player, carried under this site's header in the
   station's own design language — the .com dock's dark bar, red
   live dot, amber pill toggle, and "Full player" link, restated as
   an in-flow strip so it sits directly under the header on every
   page. The dot is red only while the stream is actually playing;
   idle, blocked, starting, and paused states show amber — waiting,
   not live — so the bar never claims to be live when it is not. */
.org-player{background:#141110;border-bottom:1px solid var(--line);color:var(--ink)}
.org-player-in{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.org-player audio{display:none}
.org-player-dot{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(233,168,60,.18);flex:none}
.org-player[data-state="playing"] .org-player-dot{background:var(--danger);box-shadow:0 0 0 4px rgba(224,104,79,.18)}
.org-player-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.org-player-name{font-weight:800;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-player-live{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--danger);margin-left:6px}
.org-player-now{color:var(--ink-mute);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-player-toggle{background:var(--amber);color:#171106;border:0;border-radius:999px;padding:8px 16px;font:inherit;font-weight:800;cursor:pointer;flex:none}
.org-player-toggle:hover{background:var(--amber-hi)}
.org-player-link{color:var(--amber);font-size:14px;white-space:nowrap;flex:none}
@media (max-width:600px){.org-player-name{font-size:13.5px}.org-player-now{font-size:12.5px}.org-player-toggle{padding:8px 13px}.org-player-link{display:none}}

/* ---------- Station counters (player bar + footer) ----------
   The listening figures ride in the player bar's meta column, styled
   after the .com's on-air strip (.onair-listen / .onair-peak): quiet
   ink, the number itself in full ink. The footer counter reuses the
   shared .visit-count rule above, exactly as the .com footer does. */
.org-player-stats{display:flex;flex-wrap:wrap;gap:2px 12px}
.org-player [data-listening-now],.org-player [data-listening-peak]{color:var(--ink-mute);font-size:13px;white-space:nowrap}
.org-player [data-listening-now] strong,.org-player [data-listening-peak] strong{color:var(--ink)}
@media (max-width:600px){.org-player [data-listening-now],.org-player [data-listening-peak]{font-size:12px}}