/* Radio Jox — site styles. No inline styles anywhere (CSP style-src 'self').
   Contrast: every text/background pair below is ≥ 4.5:1 (most ≥ 7:1).
   Brand colours are sampled from the owner's logo PNG: orange #FF9200, dark brown #592100.
   Orange is only ever a FILL with brown text/icons on it (5.7:1) — never orange text on white (2.2:1). */
:root{
  --ink:#111827;--muted:#4b5563;--line:#d1d5db;--soft:#f3f4f6;--bg:#fff;
  --brand-orange:#ff9200;--brand-brown:#592100;--brand-orange-hover:#ffb040;--brand-cream:#fff4e5;
  --accent:var(--brand-orange);--accent-ink:var(--brand-brown);--accent-hover:var(--brand-orange-hover);--link:#592100;--ok:#05603a;--ok-bg:#d1fadf;
  --focus:#1d4ed8;--focus-on-dark:#fbbf24;
  --radius:12px;--maxw:1180px;
  /* sticky player: 84px originally (20px over a compact 64px player); owner asked for +10px on phones (<768px)
     and +25px on desktop/laptop (>=768px, set below). Body padding + the favorites prompt follow this variable. */
  --player-h:109px; /* +10px (ui 2026-10-27), +5px (2026-10-31) */
  /* legacy names used by admin/submit styles */
  --fg:var(--ink);--card:#fff;--warn:#b54708

  /* theme tokens: every colour used below is a variable (themes override them on body.theme-*) */
  --surface:#fff;--surface-2:#f9fafb;--on-dark:#fff;--on-dark-muted:#f5e6d6;--on-dark-error:#fca5a5;--live:#ef4444;
  --danger:#b42318;--danger-soft:#fef3f2;--danger-line:#fecdca;--heart:#c2410c;--field-border:#6b7280;--line-strong:#9ca3af;--line-soft:#f1ece6;
  --warn-bg:#fef3c7;--warn-ink:#b45309;--warn-ink-2:#78350f;--ok-soft:#ecfdf3;--ok-line:#abefc6;--ad-line:#e8d5c0;--ad-muted:#7c5a3c;
  --shadow-sm:0 1px 6px rgba(17,24,39,.12);--shadow-md:0 6px 18px rgba(17,24,39,.12);--shadow-lg:0 8px 24px rgba(0,0,0,.18);--shadow-up:0 -2px 12px rgba(0,0,0,.25);
  --ring:0 0 0 3px rgba(29,78,216,.35);--on-dark-hover:rgba(255,255,255,.12);
  --primary:var(--brand-brown);--primary-hover:#3d1600;--primary-ink:#fff;--primary-soft:var(--brand-cream);--player-bg:var(--brand-brown);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:112.5%;-webkit-text-size-adjust:100%} /* 18px base */
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.55;background:var(--bg);color:var(--ink);
  padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom,0px))}
a{color:var(--link);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
img{max-width:100%}
h1{font-size:2rem;line-height:1.2;margin:.75rem 0 1.1rem}
h2{font-size:1.35rem;margin:3rem 0 1.1rem}
h3{font-size:1.1rem;margin:2rem 0 .85rem}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
h1:focus-visible,main:focus-visible{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:.75rem;top:-4rem;z-index:100;background:var(--ink);color:var(--on-dark);padding:.6rem 1rem;border-radius:8px;font-weight:700}
.skip-link:focus{top:.75rem;outline:3px solid var(--focus-on-dark)}
.muted{color:var(--muted)}
.lead{font-size:1.15rem;color:var(--muted);max-width:42rem}

/* ---------- buttons & form controls ---------- */
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{padding:.55rem .75rem;border:2px solid var(--field-border);border-radius:10px;background:var(--surface);min-height:48px}
input[type=checkbox]{min-height:0;width:1.25rem;height:1.25rem;accent-color:var(--brand-brown)}
.layout-setting label{display:flex;align-items:center;gap:.6rem}.layout-setting input[type=radio]{min-height:0;width:1.25rem;height:1.25rem;padding:0;margin:0;flex:none;accent-color:var(--brand-brown)}
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:48px;padding:.55rem 1.15rem;border-radius:999px;
  border:2px solid var(--ink);background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer;line-height:1.2}
.btn:hover,button:hover{background:var(--soft)}
.btn--primary,button.btn--primary,.form button,.panel button{background:var(--accent);border-color:var(--accent-ink);color:var(--accent-ink)}
.btn--primary:hover,.form button:hover,.panel button:hover{background:var(--accent-hover);border-color:var(--accent-ink)}
button.danger{background:var(--danger);border-color:var(--danger);color:var(--on-dark)}
.btn--small{min-height:40px;padding:.35rem .9rem;font-size:.9rem}
.btn--lg{min-height:56px;font-size:1.1rem;padding:.7rem 1.5rem}
.btn--icon{width:48px;padding:0}
button[disabled]{opacity:.5;cursor:not-allowed}
.icon{width:1.25em;height:1.25em;flex:none}

/* ---------- app prompt ---------- */
.app-banner{display:flex;align-items:center;gap:.75rem;padding:.5rem max(1rem,calc((100% - var(--maxw))/2));background:var(--soft);border-bottom:1px solid var(--line);font-size:.95rem}
.app-banner__text{margin:0;flex:1;display:flex;align-items:center;gap:.5rem}
.app-banner__close{background:transparent;border:0;min-height:44px;width:44px;padding:0;border-radius:50%;color:var(--ink)}
@media (min-width:1600px){.app-banner{display:none!important}} /* phones, tablets and laptops only */

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line);background:var(--surface)}
.site-header--home{border-bottom:0}
.site-header__inner{max-width:var(--maxw);margin:0 auto;padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);border-radius:6px;padding:.15rem}
.wordmark{display:inline-flex;align-items:baseline;font-weight:900;letter-spacing:-.02em;line-height:1;text-transform:uppercase}
.wordmark__radio{color:var(--ink)}
.wordmark__jox{color:var(--brand-brown);margin-left:.18em}
.wordmark--sm{font-size:1.6rem}
.wordmark--lg{font-size:clamp(2.6rem,8vw,4.5rem)}
.wordmark-pic{display:block;line-height:0}
.wordmark-img--sm{height:48px;width:auto;display:block}
.wordmark-img--lg{width:min(100%,640px);height:auto;display:block}
.home__logo{width:100%;display:flex;justify-content:center;margin:0 0 2.25rem}
.home__logo .wordmark-pic{width:min(100%,640px);margin:0 auto}
.home__logo .wordmark-img--lg{width:100%}
.header-search{flex:1 1 320px;display:flex;gap:.4rem;max-width:560px}
.header-search input{flex:1;min-width:0;border-radius:999px;padding-left:1rem}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .8rem;border-radius:999px;color:var(--ink);font-weight:600;text-decoration:none}
.site-nav a:hover{background:var(--soft)}
.site-nav a[aria-current=page]{background:var(--brand-brown);color:var(--on-dark)}

/* ---------- main ---------- */
main{display:block;max-width:var(--maxw);margin:0 auto;padding:2rem 1.25rem 5rem;min-height:50vh}
.page.narrow,.narrow{max-width:46rem}
#app[aria-busy=true] main{opacity:.55;transition:opacity .2s .15s}

/* ---------- home ---------- */
.home{min-height:calc(100vh - 260px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6vh 0 3rem}
.home__slogan{font-size:clamp(1.5rem,4.2vw,2.6rem);font-weight:900;letter-spacing:.06em;margin:0 0 3rem;color:var(--ink)}
.hero-search{width:100%;max-width:640px}
.hero-search__box{display:flex;align-items:center;gap:.6rem;border:2px solid var(--field-border);border-radius:999px;padding:.2rem 1.2rem;background:var(--surface);box-shadow:var(--shadow-sm)}
.hero-search__box:focus-within{border-color:var(--focus);box-shadow:var(--ring)}
.hero-search__box .icon{color:var(--muted)}
.hero-search__box input{flex:1;border:0;min-height:52px;font-size:1.15rem;padding:.4rem 0;background:transparent;min-width:0}
.hero-search__box input:focus-visible{outline:none}
.hero-search__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero-search--inline{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin:1.5rem 0}
.hero-search--inline .hero-search__box{flex:1 1 320px}
.home__stats{color:var(--muted);margin:3.5rem 0 1rem}
.home__chips{max-width:860px}
.home__chips-title{font-size:1rem;margin:2.5rem 0 1.25rem;color:var(--muted);font-weight:600}

/* ---------- chips, tiles, lists ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.75rem;list-style:none;padding:0;margin:1rem 0}
.chips--center{justify-content:center}
.chip{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.35rem .95rem;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;background:var(--surface)}
.chip:hover{border-color:var(--ink)}
.chip--alt{background:var(--soft)}
.chip__n{color:var(--muted);font-weight:400;font-size:.85em}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem;list-style:none;padding:0}
.tile{display:flex;flex-direction:column;padding:1.5rem 1.75rem;border:1.5px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink)}
.tile:hover{border-color:var(--ink)}
.tile__name{font-size:1.25rem;font-weight:800}.tile__n{color:var(--muted)}
.link-columns{columns:4 13rem;column-gap:2rem;list-style:none;padding:0;margin:0}
.link-columns li{break-inside:avoid;padding:.4rem 0}
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:.25rem 0 0;font-size:.95rem}
.crumbs li+li::before{content:"›";margin:0 .45rem;color:var(--muted)}

/* ---------- results ---------- */
.results-count{color:var(--muted);margin:0 0 1.5rem}
.filters{border:1.5px solid var(--line);border-radius:var(--radius);padding:.5rem 1.5rem;margin:1.5rem 0 2.25rem}
.filters summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.filters__form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem;align-items:end;padding:.5rem 0 1rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-weight:600}
.field--check{flex-direction:row;align-items:center;gap:.5rem;min-height:48px}
.card:hover{border-color:var(--line-strong)}
.card.is-current{border-color:var(--brand-brown);box-shadow:inset 6px 0 0 var(--accent)}
.card__title a{color:var(--ink);text-decoration:none}
.card__title a:hover{text-decoration:underline}
.badge{display:inline-flex;align-items:center;gap:.2rem;font-size:.85rem;font-weight:700;padding:.1rem .55rem;border-radius:999px;background:var(--soft);color:var(--ink)}
.badge .icon{width:1em;height:1em}
.badge--verified,.badge.verified{background:var(--ok-bg);color:var(--ok)}
.pager{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin:3rem 0 1rem}
.pager__info{color:var(--muted)}
.empty{padding:2rem 0}

/* play buttons (cards + station page); icon state synced by player.js */
.play-btn{flex:none;width:52px;height:52px;min-height:52px;padding:0;border-radius:50%;background:var(--accent);border-color:var(--accent-ink);color:var(--accent-ink)}
.play-btn:hover{background:var(--accent-hover);border-color:var(--accent-ink)}
.play-btn .icon{width:26px;height:26px}
.play-btn .icon--pause,.play-btn.is-playing .icon--play{display:none}
.play-btn.is-playing .icon--pause{display:block}
.play-btn--lg{width:auto;height:auto;min-height:60px;border-radius:999px;padding:.6rem 1.6rem .6rem 1.1rem;font-size:1.2rem}
.play-btn--lg .icon{width:32px;height:32px}

/* ---------- station page ---------- */
.station__head{display:flex;gap:2.5rem;align-items:center;flex-wrap:wrap;margin:2rem 0 3rem}
.station__logo{width:160px;height:160px;border-radius:20px;object-fit:contain;background:var(--surface);border:1px solid var(--line)}
.station__intro{flex:1 1 320px}
.station__intro h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 .5rem}
.station__place{font-size:1.15rem;color:var(--muted);margin:0 0 .75rem}
.station__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
/* station page "Now playing": fixed box (64px art + 2 lines) so live updates never shift the page */
.np{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;padding:.75rem 1rem;min-height:88px;max-width:36rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--brand-cream)}
.np__art{flex:none;width:64px;height:64px;border-radius:8px;object-fit:contain;background:var(--surface)}
.np__text{min-width:0;flex:1}
.np__label{margin:0 0 .15rem;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-brown)}
.np__line{margin:0;display:flex;flex-direction:column;min-height:2.7em;justify-content:center;line-height:1.35}
.np__title{font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np__artist{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np__hint{color:var(--muted);font-size:.95rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem 2.5rem;margin:0;padding:1.75rem 2rem;border:1.5px solid var(--line);border-radius:var(--radius)}
.facts dd{margin-top:.2rem}
.facts dt{font-size:.9rem;color:var(--muted);font-weight:600}
.facts dd{margin:0;font-weight:600}

/* ---------- near me ---------- */
.near__form{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:end;margin:1.75rem 0 2.25rem}
.near__status{font-weight:600;min-height:1.6em}
.card__distance{font-weight:700;color:var(--ink)}

/* ---------- legal ---------- */
.draft-banner{background:var(--warn-bg);border:2px solid var(--warn-ink);color:var(--warn-ink-2);padding:.75rem 1rem;border-radius:10px}
.legal h2{font-size:1.2rem}
.store-list{list-style:none;padding:0}.store-list li{margin:.5rem 0}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--soft);font-size:.95rem;margin-top:3rem}
.site-footer__inner{max-width:var(--maxw);margin:0 auto;padding:2.75rem 1.25rem 3rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;list-style:none;padding:0;margin:0 0 1.75rem}
.footer-links a{color:var(--ink);display:inline-block;padding:.35rem 0}
.lang-switch{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.75rem}
.lang-switch label{font-weight:600}
.footer-note{color:var(--muted);margin:.5rem 0}

/* ---------- persistent player (root level, outside #app) ---------- */
.player{position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--player-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);background:var(--player-bg);color:var(--on-dark);border-top:4px solid var(--brand-orange);box-shadow:var(--shadow-up)}
.player__inner{max-width:var(--maxw);height:calc(var(--player-h) - 4px);margin:0 auto;padding:0 1rem;display:flex;align-items:center;gap:1rem}
.player :focus-visible{outline-color:var(--focus-on-dark)}
.player__toggle{position:relative;flex:none;width:64px;height:64px;min-height:64px;padding:0;border-radius:50%;background:var(--brand-orange);border:0;color:var(--brand-brown)}
.player__toggle:hover{background:var(--brand-orange-hover)}
.player__toggle .icon{width:34px;height:34px}
.player__toggle .icon--pause,.player[data-state=playing] .player__toggle .icon--play,.player[data-state=loading] .player__toggle .icon--play{display:none}
.player[data-state=playing] .player__toggle .icon--pause,.player[data-state=loading] .player__toggle .icon--pause{display:block}
.player__toggle[disabled]{opacity:.45}
.player__spinner{position:absolute;inset:-5px;border-radius:50%;border:3px solid transparent;border-top-color:var(--focus-on-dark);display:none}
.player[data-state=loading] .player__spinner{display:block;animation:rj-spin .9s linear infinite}
@keyframes rj-spin{to{transform:rotate(360deg)}}
.player__logo{width:60px;height:60px;border-radius:10px;object-fit:contain;background:var(--surface);flex:none}
.player__info{flex:1;min-width:0}
.player__name{margin:0;font-size:1.2rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__name a{color:var(--on-dark);text-decoration:none}
.player__name a:hover{text-decoration:underline}
.player__status{margin:0;font-size:.95rem;color:var(--on-dark-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player[data-state=playing] .player__status::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--live);margin-right:.4em;vertical-align:.05em}
.player[data-state=error] .player__status{color:var(--on-dark-error)}
/* now playing: line height is always reserved (empty when there's no song), so updates never shift the bar */
.player__name,.player__status,.player__np{line-height:1.3}
.player__np{margin:0;font-size:.9rem;height:1.3em;color:var(--on-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__logo[data-art]{object-fit:cover}
.player__volume{display:flex;align-items:center;gap:.5rem;flex:0 1 200px}
.player__volume-label{display:flex;color:var(--on-dark-muted)}
.player__volume input{flex:1;min-height:44px;padding:0;border:0;background:transparent;accent-color:var(--brand-orange);min-width:80px}
@media (max-width:640px){
  .player__volume{display:none} /* phones: hardware volume buttons; keeps room for the station name */
  .player__inner{gap:.75rem}
  .player__logo{width:52px;height:52px}
  .site-nav a{padding:.4rem .5rem;font-size:1rem}
  .wordmark--sm{font-size:1.35rem}
  .wordmark-img--sm{height:36px}
  .home__logo{margin-bottom:1.5rem}
  .home{padding:3vh 0 2rem}
  .home__slogan{margin-bottom:2rem}
  .hero-search__actions{margin-top:1.5rem;gap:.75rem}
  .home__stats{margin-top:2.5rem}
  .home__chips-title{margin-top:1.75rem}
  main{padding:1.25rem 1rem 4rem}
  h2{margin-top:2.25rem}
  .cards{gap:1rem}
  .station__head{gap:1.5rem;margin:1.25rem 0 2rem}
  .facts{padding:1.25rem;gap:1.1rem 1.5rem}
  .panel{padding:1.5rem 1.25rem}
  .site-footer__inner{padding:2rem 1rem 2.5rem}
  .site-header__inner{gap:.5rem}
  .app-banner{font-size:.9rem}
  .header-search{order:3;flex-basis:100%}
  h1{font-size:1.7rem}
  .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.play-btn,.player__toggle{border:2px solid ButtonText}}

/* ---------- broadcaster submission + admin (server-rendered forms) ---------- */
.panel{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:2rem 2.25rem}.panel.narrow{max-width:560px;margin:1rem auto}
.form{display:grid;gap:1.25rem}.form label{display:flex;flex-direction:column;gap:.25rem;font-weight:600}.form label input,.form label select,.form label textarea{font-weight:400}
.form.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.form .full{grid-column:1/-1}
.chk{display:flex;align-items:center;gap:.35rem}
.err{color:var(--danger);font-weight:400;font-size:.9rem}.alert{background:var(--danger-soft);border:1px solid var(--danger-line);padding:.6rem .8rem;border-radius:8px}.alert.ok{background:var(--ok-soft);border-color:var(--ok-line)}
table{border-collapse:collapse;width:100%;margin:.5rem 0 1rem;font-size:.9rem}td,th{border-bottom:1px solid var(--line);padding:.35rem .5rem;text-align:left;vertical-align:top}td code{word-break:break-all}
.sub{display:flex;gap:1rem;border:1px solid var(--line);border-radius:10px;padding:.75rem;margin:.5rem 0}.sublogo{width:96px;height:96px;object-fit:contain;background:var(--soft);border-radius:8px}
form.inline{display:inline-flex;gap:.35rem;margin-right:.75rem}

/* ads v2 ---------- ad slots (config/ads.php, docs/ADS.md) ----------
   Calm by design: a small quiet label, no frames or borders, a soft surface for house promos, generous space around.
   Space is reserved by the box size, so filling a slot never shifts the layout. Never inside/over the player.
   A slot that has nothing to show is not rendered at all. */
.ad{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin:4rem auto 3.5rem;max-width:100%;clear:both}
.ad__label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.ad__box{position:relative;overflow:hidden;max-width:100%;border-radius:14px;background:var(--soft)}
.ad--direct .ad__box,.ad--embed .ad__box{background:transparent}
.ad__link{display:block;width:100%;height:100%;line-height:0}
.ad__link picture,.ad__link img{display:block;width:100%;height:100%}
.ad__link img{object-fit:cover}
.ad__frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:transparent;z-index:1;visibility:hidden}
.ad--filled .ad__frame{visibility:visible}
.ad__creative{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1}
.ad--embed.ad--filled .ad__house,.ad--provider.ad--filled .ad__house{visibility:hidden}
.ad--nofallback:not(.ad--filled){display:none}
/* house promo: one line of words and one quiet text action */
.ad__house{width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t c" "x c";align-items:center;align-content:center;gap:.2rem 1.75rem;padding:0 1.75rem;text-align:left;position:relative}
.ad__title{grid-area:t;margin:0;font-weight:700;font-size:1.02rem;line-height:1.25;color:var(--ink);align-self:end}
.ad__text{grid-area:x;margin:0;color:var(--muted);font-size:.9rem;line-height:1.35;align-self:start}
.ad__cta{grid-area:c;display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0;border:0;background:none;border-radius:0;color:var(--primary);font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
.ad__cta::after{content:"\2192";transition:transform .15s ease}
.ad__cta:hover{background:none;text-decoration:underline;text-underline-offset:.25em}
.ad__cta:hover::after{transform:translateX(3px)}
.ad__cta:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.ad__cta::after{transition:none}}
/* desktop sizes (>= 768px) */
.ad--d728x90 .ad__box{width:728px;height:90px}
.ad--d300x250 .ad__box{width:300px;height:250px}
.ad--d300x250 .ad__house{grid-template-columns:1fr;grid-template-areas:"t" "x" "c";justify-items:center;text-align:center;gap:.6rem;padding:0 1.75rem}
.ad--d300x250 .ad__title{align-self:auto;font-size:1.25rem}
.ad--d300x250 .ad__text{align-self:auto}
@media (max-width:767px){
  .ad--m320x100 .ad__box{width:320px;height:100px}
  .ad--m320x50 .ad__box{width:320px;height:50px}
  .ad--m300x250 .ad__box{width:300px;height:250px}
  .ad--m320x100 .ad__house{padding:0 1.25rem;gap:.2rem 1rem}
  .ad--m320x100 .ad__text{display:none}
  .ad--m320x100 .ad__title{align-self:center;grid-row:1/3}
  .ad--m300x250 .ad__house{grid-template-columns:1fr;grid-template-areas:"t" "x" "c";justify-items:center;text-align:center;gap:.6rem}
  .ad--m300x250 .ad__title{align-self:auto;font-size:1.25rem}
  .ad--m300x250 .ad__text{display:block;align-self:auto}
  .ad--m-none{display:none}
  .ad{margin-top:3rem;margin-bottom:2.75rem}
}
.home__ad{margin-top:4.5rem}
.cards__ad{grid-column:1/-1;display:flex;justify-content:center}
.cards__ad .ad{margin:2.5rem auto}
@media (max-width:767px){.cards__ad .ad{margin:2rem auto}}
/* the in-feed 728 box needs its full width even when a card grid uses fixed-width tracks */
.cards .cards__ad{min-width:min(728px,calc(100vw - 2rem))}
.lp__ad{margin-top:3.5rem;margin-bottom:3rem}
/* results right rail: wide screens only */
.with-rail{display:block}
.ad--wide-only{display:none}
@media (min-width:1280px){
  .with-rail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;align-items:start}
  .with-rail .ad--wide-only{display:flex;margin:0;position:sticky;top:1.5rem}
}
/* station page: rectangle beside "About this station" on desktop, below it on mobile */
.station__body--ad{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:1024px){
  .station__body--ad{grid-template-columns:minmax(0,1fr) 300px;gap:3rem;align-items:start}
  .station__body--ad .station__ad{margin:4.4rem 0 0}
}
.station__ad-lb{margin-top:4.5rem}
/* two ads on one station page: keep clear air between them, and never an ad hard against the claim band */
.station__body--ad + .station__ad-lb{margin-top:5.5rem}
.home__cta + .ad,.ad + .home__cta{margin-top:5rem}

/* mi/km toggle (near-me) */
.unit-toggle{display:inline-flex;align-items:center;gap:0;border:0;margin:0;padding:0}
.unit-toggle legend{font-weight:700;margin-bottom:.4rem;padding:0;float:left;width:100%}
.unit-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.unit-toggle label{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:48px;padding:0 1rem;border:2px solid var(--brand-brown);color:var(--brand-brown);font-weight:700;cursor:pointer;background:var(--surface)}
.unit-toggle label abbr{text-decoration:none}
.unit-toggle label:first-of-type{border-radius:999px 0 0 999px}
.unit-toggle label:last-of-type{border-radius:0 999px 999px 0;border-left:0}
.unit-toggle input:checked+label{background:var(--accent);color:var(--accent-ink)}
.unit-toggle input:focus-visible+label{outline:3px solid var(--focus,var(--brand-brown));outline-offset:2px}

/* ---------- favorites (heart toggle) + listener accounts ---------- */
.fav-btn{flex:none;position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:52px;height:52px;min-height:52px;padding:0;border-radius:50%;background:var(--surface);border:2px solid var(--brand-brown);color:var(--brand-brown)}
.fav-btn:hover{background:var(--brand-cream)}
.fav-btn .icon{width:26px;height:26px}
.fav-btn[aria-pressed=true] .icon--fav{fill:currentColor;color:var(--heart)}
.fav-btn--lg{width:60px;height:60px;min-height:60px}
.fav-btn--lg .icon{width:30px;height:30px}
.fav-btn--player{width:48px;height:48px;min-height:48px;background:transparent;border:2px solid var(--on-dark-muted);color:var(--on-dark-muted)}
.fav-btn--player:hover{background:var(--on-dark-hover)}
.fav-btn--player[aria-pressed=true] .icon--fav{color:var(--brand-orange)}
.fav-btn--player[disabled]{opacity:.4}
.fav-btn.is-busy{opacity:.7}
@keyframes rj-pop{50%{transform:scale(1.18)}}
.fav-btn.is-pop .icon--fav{animation:rj-pop .25s ease-out}
@media (forced-colors:active){.fav-btn{border:2px solid ButtonText}}
.site-nav__account{gap:.35rem}
.site-nav__account .icon{width:20px;height:20px;color:var(--heart)}
.site-nav a[aria-current=page].site-nav__account .icon{color:var(--brand-orange)}
@media (max-width:640px){
  .site-nav__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* homepage "Your favorites" */
.home__favs{width:100%;max-width:var(--maxw);text-align:left;margin:2.5rem 0 0}
.home__favs-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.home__favs-head h2{margin:0}
.cards--favs{margin-top:1rem}

/* dashboard /u/{slug} */
.account__head h1{margin-bottom:.25rem}
.notice{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:.6rem .8rem;display:inline-block}
.fav-list{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.75rem}
.fav-list__item{display:flex;align-items:center;gap:.9rem;padding:.75rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.fav-list__logo{width:48px;height:48px;border-radius:8px;object-fit:contain;flex:none}
.fav-list__body{flex:1;min-width:0;display:flex;flex-direction:column}
.fav-list__body a{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-list__body .muted{font-size:.9rem}
.fav-list__actions{display:flex;gap:.35rem;margin:0}
.fav-list__actions .btn--icon{width:40px}
.account__settings .form,.account__delete .form{max-width:30rem}
.account .unit-toggle{flex-wrap:wrap}
.account .unit-toggle label:not(:first-of-type){border-left:0}
.account__signout{margin-top:1.5rem}
.account__delete{margin-top:1rem;border-top:1px solid var(--line)}
.form .check{flex-direction:row;align-items:center;gap:.6rem;font-weight:400}
.btn--danger,.form button.btn--danger{background:var(--surface);border:2px solid var(--danger);color:var(--danger)}
.btn--danger:hover,.form button.btn--danger:hover{background:var(--danger-soft)}
@media (max-width:640px){
  .fav-list__item{flex-wrap:wrap}
  .fav-list__body{flex-basis:calc(100% - 130px)}
  .fav-list__actions{margin-left:auto}
}

/* taller sticky player — inner sizes scale with the bar (4px of the height is the orange top border) */
.player__toggle{width:68px;height:68px;min-height:68px}
.player__logo{width:62px;height:62px}
@media (max-width:640px){.player__logo{width:56px;height:56px}}
@media (min-width:768px){
  :root{--player-h:124px} /* +10px (ui 2026-10-27), +5px (2026-10-31) */
  .player__inner{gap:1.25rem}
  .player__toggle{width:76px;height:76px;min-height:76px}
  .player__toggle .icon{width:38px;height:38px}
  .player__logo{width:72px;height:72px;border-radius:12px}
  .player__name{font-size:1.3rem}
  .player__status{font-size:1rem}
  .player__np{font-size:.95rem}
  .fav-btn--player{width:52px;height:52px;min-height:52px}
}
/* station header: never wider than the screen (long names / now-playing lines wrap or ellipsize instead) */
.station__intro{min-width:0;max-width:100%}
.station__intro h1{overflow-wrap:anywhere}

/* ---------- station cards (home, browse, search, near me, more stations, favorites) ----------
   Grid card: [logo | name (≤2 lines) + one meta line] on top, [badges/distance | heart + play] in a footer row.
   Text never shares a row with the buttons, so names stay readable at every width. */
.cards{list-style:none;padding:0;margin:1.25rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.25rem}
.card{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:1fr auto;column-gap:1rem;row-gap:.9rem;align-items:start;
  padding:1.1rem 1.15rem .9rem;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0;position:relative}
.card__logo{grid-column:1;grid-row:1;width:56px;height:56px;border-radius:10px;object-fit:contain;background:var(--surface);border:1px solid var(--line)}
.card__body{grid-column:2;grid-row:1;min-width:0;min-height:4.3rem}
.card__title{font-size:1.05rem;line-height:1.3;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:normal}
.card__meta{margin:.3rem 0 0;font-size:.9rem;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__format:not(:empty)::before{content:" · "}
.card__foot{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.8rem;border-top:1px solid var(--soft,var(--line-soft));min-width:0}
.card__badges{margin:0;font-size:.9rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.25rem .6rem;align-items:center;min-width:0}
.card__actions{display:flex;align-items:center;gap:.6rem;flex:none;margin-left:auto}
.card .play-btn{width:48px;height:48px;min-height:48px}
.fav-btn--card{width:44px;height:44px;min-height:44px;border:1.5px solid var(--line);background:var(--surface);color:var(--brand-brown)}
.fav-btn--card:hover{border-color:var(--brand-brown);background:var(--brand-cream)}
.fav-btn--card .icon{width:22px;height:22px}
@media (max-width:640px){.card{padding:1rem 1rem .8rem}}


/* =====================================================================================================
   Theme layer (homepage redesign + polish). Everything below reads tokens only; a theme is a body class
   (body.theme-<SITE_THEME>, default "purple") that sets those tokens. Fonts are self-hosted (OFL, see
   assets/fonts/OFL-*.txt): Plus Jakarta Sans for display, Inter for body text.
   ===================================================================================================== */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/jakarta-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/jakarta-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --font-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* type scale (major third, fluid at the top end); html is 18px */
  --step--1:.875rem;--step-0:1rem;--step-1:1.2rem;--step-2:1.44rem;--step-3:clamp(1.6rem,1.3rem + 1.2vw,1.95rem);
  --step-4:clamp(1.9rem,1.4rem + 2vw,2.6rem);--step-5:clamp(2.2rem,1.5rem + 3vw,3.4rem);
  /* spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4.5rem;--space-9:6rem;
  --radius-sm:10px;--radius-lg:20px;
  --ease:cubic-bezier(.2,.7,.2,1);--dur:.18s;--dur-slow:.3s
}

/* ---------- theme: purple (default) — purple primary, the logo's orange as the accent ---------- */
body.theme-purple{
  --ink:#1e1633;--muted:#5b5670;--line:#e4dff0;--line-soft:#f1eef8;--line-strong:#b7aed0;--soft:#f4f1fb;--bg:#fff;--surface:#fff;--surface-2:#faf8ff;
  --primary:#5b21b6;--primary-hover:#4c1d95;--primary-ink:#fff;--primary-soft:#f3eefe;--primary-line:#d9cdf7;
  --link:#5b21b6;--focus:#6d28d9;--ring:0 0 0 4px rgba(109,40,217,.28);
  --field-border:#8b84a3;
  --player-bg:#2a0f5c;--on-dark:#fff;--on-dark-muted:#e4d9ff;--on-dark-hover:rgba(255,255,255,.12);
  --hero-glow:radial-gradient(60rem 26rem at 50% -6rem,#f1eaff 0%,rgba(241,234,255,0) 70%);
  --shadow-sm:0 1px 2px rgba(30,22,51,.06),0 2px 8px rgba(30,22,51,.06);
  --shadow-md:0 2px 4px rgba(30,22,51,.06),0 10px 24px rgba(46,16,101,.10);
  --shadow-lg:0 4px 8px rgba(30,22,51,.08),0 18px 40px rgba(46,16,101,.16);
  --shadow-up:0 -6px 24px rgba(30,22,51,.22)
}

/* ---------- base typography ---------- */
body{font-family:var(--font-body);font-size:var(--step-0);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,.home__slogan,.wordmark,.tile__name,.card__title,.player__name{font-family:var(--font-display);letter-spacing:-.015em}
h1{font-size:var(--step-4);font-weight:800;line-height:1.15;margin:var(--space-4) 0 var(--space-5)}
h2{font-size:var(--step-3);font-weight:800;line-height:1.2;margin:var(--space-8) 0 var(--space-5)}
h3{font-size:var(--step-1);font-weight:700}
a{color:var(--link);transition:color var(--dur) var(--ease)}
main{padding:var(--space-6) 1.5rem var(--space-9)}

/* ---------- controls ---------- */
.btn,button{transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}
.btn:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-text,var(--primary))}
.btn--primary,button.btn--primary,.form button,.panel button{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow-sm)}
.btn--primary:hover,.form button:hover,.panel button:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--primary-ink);box-shadow:var(--shadow-md)}
.btn--danger,.form button.btn--danger{background:var(--surface);border-color:var(--danger);color:var(--danger);box-shadow:none}
input,select,textarea{border-color:var(--field-border);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--focus);box-shadow:var(--ring)}
input[type=checkbox]{accent-color:var(--primary)}
.icon--stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- header ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.site-header__inner{padding:var(--space-4) 1.5rem}
.header-search input{border-color:var(--line-strong)}
.site-nav a{transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.site-nav a:hover{background:var(--primary-soft);color:var(--primary-text,var(--primary))}
.site-nav a[aria-current=page]{background:var(--primary);color:var(--primary-ink)}

/* ---------- homepage ---------- */
.home{min-height:0;justify-content:flex-start;padding:clamp(2.5rem,7vh,5.5rem) 0 var(--space-6);background:var(--hero-glow) no-repeat;background-position:50% 0;margin:0 -1.5rem;padding-left:1.5rem;padding-right:1.5rem}
.home__logo{margin:0 0 var(--space-6)}
.home__logo .wordmark-pic{width:min(100%,560px)}
.home__slogan{font-size:var(--step-5);font-weight:800;letter-spacing:-.01em;line-height:1.1;margin:0 0 var(--space-4);max-width:22ch;text-wrap:balance}
.home__lede{font-size:var(--step-1);color:var(--muted);margin:0 0 var(--space-7);max-width:38rem;line-height:1.5;text-wrap:pretty}
.hero-search{max-width:680px}
.hero-search__box{border:2px solid var(--line-strong);padding:.3rem 1.4rem;background:var(--surface);box-shadow:var(--shadow-md);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.hero-search__box:hover{border-color:var(--primary-line)}
.hero-search__box:focus-within{border-color:var(--focus);box-shadow:var(--ring),var(--shadow-md)}
.hero-search__box .icon{color:var(--primary-text,var(--primary))}
.hero-search__box input{min-height:58px;font-size:var(--step-1)}
.hero-search__box input:focus-visible{box-shadow:none}
.hero-search__actions{gap:var(--space-4);margin-top:var(--space-5)}
.home__stats{display:inline-flex;align-items:center;gap:.5rem;margin:var(--space-7) 0 0;padding:.4rem 1rem;border-radius:999px;background:var(--primary-soft);color:var(--primary-text,var(--primary));font-weight:600;font-size:var(--step--1)}
.home__stats .icon{width:1.1em;height:1.1em}
.home__section{width:100%;max-width:var(--maxw);text-align:left;margin:var(--space-8) 0 0}
.home__section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.home__section-head h2{margin:0;display:flex;align-items:center;gap:.6rem}
.home__section-head h2 .icon{color:var(--brand-orange);width:1.05em;height:1.05em}
.home__section-sub{margin:.35rem 0 0;color:var(--muted)}
.home__favs{margin:var(--space-8) 0 0}
.home__chips{max-width:900px;margin-top:var(--space-8)}
.home__chips-title{display:flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-size:var(--step-1);font-weight:700;color:var(--ink);margin:var(--space-7) 0 var(--space-4)}
.home__chips-title .icon{color:var(--brand-orange)}
.home__ad{margin-top:var(--space-8)}

/* ---------- chips, tiles ---------- */
.chips{gap:var(--space-3)}
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.chip:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-text,var(--primary));box-shadow:var(--shadow-sm)}
.chip--alt{background:var(--surface-2)}
.tile{border:1.5px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.tile:hover{border-color:var(--primary-line);box-shadow:var(--shadow-md)}
.tile__name{color:var(--ink)}

/* ---------- cards ---------- */
.cards{gap:var(--space-5)}
.card{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{border-color:var(--primary-line);box-shadow:var(--shadow-md)}
.card.is-current{border-color:var(--primary);box-shadow:inset 6px 0 0 var(--accent),var(--shadow-md)}
.card__logo{border-color:var(--line-soft);border-radius:12px}
.card__title{font-weight:700}
.card__foot{border-top-color:var(--line-soft)}
.card .play-btn,.play-btn{box-shadow:var(--shadow-sm)}
.play-btn:hover{box-shadow:var(--shadow-md)}
.badge{background:var(--soft);color:var(--ink)}
.badge--featured{background:var(--brand-orange);color:var(--brand-brown)}
.card--featured{border-color:var(--primary-line);background:linear-gradient(180deg,var(--primary-soft),var(--surface) 55%)}
.fav-btn--card{border-color:var(--line)}

/* ---------- results / browse ---------- */
.results-count{font-size:var(--step--1);font-weight:600;color:var(--muted)}
.results-region{margin:-.5rem 0 var(--space-5)}
.filters{border:1px solid var(--line);background:var(--surface-2);border-radius:16px;padding:var(--space-2) var(--space-5)}
.filters summary{color:var(--ink)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--primary-text,var(--primary))}
.pager{gap:var(--space-4)}

/* ---------- station page ---------- */
.station__head{gap:var(--space-6) 3rem;margin:var(--space-6) 0 var(--space-7);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--hero-glow),var(--surface-2);border:1px solid var(--line)}
.station__logo{border-color:var(--line);box-shadow:var(--shadow-md);border-radius:var(--radius-lg)}
.station__intro h1{font-size:var(--step-4);font-weight:800}
.np{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-sm)}
.np__label{color:var(--primary-text,var(--primary))}
.facts{border:1px solid var(--line);border-radius:16px;background:var(--surface)}

/* ---------- player ---------- */
.player__name a:hover{color:var(--on-dark)}

@media (max-width:640px){
  main{padding-left:1.1rem;padding-right:1.1rem}
  .home{margin:0 -1.1rem;padding-left:1.1rem;padding-right:1.1rem}
  .home__lede{margin-bottom:var(--space-6)}
  .station__head{padding:var(--space-5)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card:hover,.tile:hover{transform:translateY(-2px)}
  .chip:hover{transform:translateY(-1px)}
  .btn--primary:hover{transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media (forced-colors:active){.card,.tile,.chip{border:1px solid CanvasText}}
/* contact form: off-screen honeypot (bots fill it, people never see it) */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.contact .small{font-size:.9rem}
.contact .form input,.contact .form select,.contact .form textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box}

/* ---------- homepage sections (2026-10-26) ---------- */
.rj-pic{display:contents}
.home__section{margin-top:clamp(3.5rem,8vw,5.5rem)}
.home__section-head h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}
.home__section .cards{margin-top:var(--space-5)}
.home__more{margin:var(--space-5) 0 0;text-align:center}
.home__near-tools{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.home__region-form{display:flex;gap:.5rem;align-items:center}
.home__region-form select{min-width:13rem;max-width:100%}
.home__near-status{margin:.5rem 0 0;color:var(--muted);min-height:1.5em}
.btn .icon{width:1.1em;height:1.1em}
.genre-tiles{list-style:none;padding:0;margin:var(--space-5) 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:var(--space-4)}
.genre-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.25rem;min-height:132px;padding:1.1rem 1.25rem;border-radius:16px;
  color:#fff;text-decoration:none;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.genre-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.genre-tile:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px}
.genre-tile .icon{position:absolute;top:1rem;right:1rem;width:30px;height:30px;opacity:.9}
.genre-tile__name{font-weight:800;font-size:1.15rem;text-transform:capitalize;line-height:1.2}
.genre-tile__count{font-size:.9rem;opacity:.92}
.genre-tile--0{background:linear-gradient(135deg,#592100,#b34700)}
.genre-tile--1{background:linear-gradient(135deg,#7a2e00,#e07000)}
.genre-tile--2{background:linear-gradient(135deg,#3d1600,#8a3b12)}
.genre-tile--3{background:linear-gradient(135deg,#6b2a10,#c2410c)}
.genre-tile--4{background:linear-gradient(135deg,#4a1d05,#a14b00)}
.genre-tile--5{background:linear-gradient(135deg,#5c2400,#cc5a00)}
.genre-tile--6{background:linear-gradient(135deg,#2e1206,#7c2d12)}
.genre-tile--7{background:linear-gradient(135deg,#6e3000,#b45309)}
.region-cols{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-6);margin-top:var(--space-5)}
.region-cols h3{font-size:1.05rem;margin:0 0 .75rem;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:.5rem}
.region-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:.5rem}
.region-list a{display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-height:48px;padding:.6rem 1rem;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600}
.region-list a:hover{border-color:var(--primary-line);box-shadow:var(--shadow-sm)}
.region-list__n{color:var(--muted);font-weight:500;font-size:.9rem;font-variant-numeric:tabular-nums}
.home__cta{margin-top:clamp(3.5rem,8vw,5.5rem);margin-bottom:var(--space-6);padding:clamp(1.75rem,4vw,2.75rem);border-radius:var(--radius-lg,20px);
  background:linear-gradient(120deg,var(--brand-brown),#8a3b12);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap}
.home__cta h2{margin:0 0 .4rem;color:#fff;font-size:clamp(1.35rem,2.6vw,1.9rem)}
.home__cta p{margin:0;max-width:52ch;color:var(--on-dark-muted)}
.home__cta .btn{background:var(--brand-orange);border-color:var(--brand-orange);color:var(--brand-brown)}
.home__cta .btn:hover{background:var(--brand-orange-hover)}
@media (max-width:760px){
  .region-cols{grid-template-columns:1fr}
  .home__near-tools,.home__region-form{width:100%}
  .home__region-form select{flex:1;min-width:0}
  .home__near-tools .btn{width:100%;justify-content:center}
  .genre-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .genre-tile{min-height:108px}
}

/* ---------- enhanced station page ---------- */
.station__head--enhanced{background:var(--enh-band,#592100);color:var(--enh-text,#fff);border:0;border-bottom:6px solid var(--enh-accent,#ffd300);box-shadow:var(--shadow-md)}
.station__head--enhanced h1,.station__head--enhanced .station__place,.station__head--enhanced .station__meta{color:var(--enh-text,#fff)}
.station__head--enhanced a:not(.btn){color:var(--enh-text,#fff)}
.station__head--enhanced .station__logo{width:224px;height:224px;border:4px solid var(--enh-accent,#ffd300);border-radius:24px;background:#fff;box-shadow:0 8px 24px rgb(0 0 0 / .25)}
.station__head--enhanced .station__logo--wide{width:min(440px,100%);height:auto;max-height:260px;object-fit:contain;border-radius:18px}
.station__logo--plate{background:#fff;padding:14px}
.station__head--enhanced .badge--featured{background:var(--enh-accent,#ffd300);color:var(--enh-accent-text,#111);font-size:.95rem;padding:.35rem .8rem}
.station__head--enhanced .play-btn,.station__head--enhanced .btn--primary{border-color:var(--enh-accent,#ffd300)}
.station__place svg,.station__place .icon{width:1.05em;height:1.05em;vertical-align:-.15em;margin-right:.3rem}
@media (max-width:760px){
  .station__head--enhanced .station__logo{width:160px;height:160px}
  .station__head--enhanced .station__logo--wide{width:100%;height:auto}
}
.home__cta{width:100%;max-width:var(--maxw);text-align:left}
.home__cta-icon{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgb(255 255 255 / .12);color:var(--brand-orange)}
.home__cta-icon .icon{width:32px;height:32px}
.home__cta-text{flex:1 1 320px}
.home__country-chips{margin-top:var(--space-5)}
.region-cols h3 a{color:inherit;text-decoration:none}
.region-cols h3 a:hover{text-decoration:underline}

/* ---------- homepage hero: airy stack, nothing overlaps (strip / photo / slogan+search; order via ?strip=top|below) ---------- */
.home{padding-top:clamp(2rem,5vh,3.5rem)}
.hero{width:100%;max-width:var(--maxw);display:flex;flex-direction:column;align-items:center;gap:clamp(3rem,7vh,5rem);text-align:center}
.hero__photo{margin:0;width:100%}
.hero__photo img{display:block;width:100%;height:auto;aspect-ratio:1200/520;object-fit:cover;object-position:50% 50%;border-radius:28px;box-shadow:var(--shadow-lg);background:var(--soft)}
.hero__search{width:100%;display:flex;flex-direction:column;align-items:center}
.hero .home__slogan{margin:0 0 var(--space-6)}
.hero__dot{color:var(--accent);padding:0 .12em}
.hero .hero__stats{margin-top:var(--space-6)}

.onair{width:100%;text-align:left}
.onair__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin:0 0 var(--space-4)}
.onair__title{display:flex;align-items:center;gap:.6rem;margin:0;font-size:var(--step--1);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-text,var(--primary))}
.hero__live-dot{width:.6rem;height:.6rem;border-radius:50%;background:#e11d48;flex:none;animation:hero-pulse 2s ease-out infinite}
@keyframes hero-pulse{0%{box-shadow:0 0 0 0 rgba(225,29,72,.45)}70%{box-shadow:0 0 0 .55rem rgba(225,29,72,0)}100%{box-shadow:0 0 0 0 rgba(225,29,72,0)}}
.onair__pause{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.35rem .95rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:var(--step--1);font-weight:600;cursor:pointer}
.onair__pause:hover{border-color:var(--primary);color:var(--primary-text,var(--primary))}
.onair__pause .icon{width:1em;height:1em}
.onair__track{display:flex;gap:var(--space-5);list-style:none;margin:0;padding:.25rem .25rem var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
.onair__item{flex:0 0 clamp(260px,30%,340px);scroll-snap-align:start;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}
.onair__link{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-4);color:inherit;text-decoration:none;border-radius:12px}
.onair__link:hover .onair__name{text-decoration:underline}
.onair__logo{flex:none;width:64px;height:64px;border-radius:14px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line-soft);display:grid;place-items:center}
.onair__logo img{display:block;width:100%;height:100%;object-fit:contain}
.onair__text{display:grid;gap:.2rem;min-width:0}
.onair__name{font-family:var(--font-display);font-size:var(--step-1);font-weight:800;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onair__np{color:var(--muted);font-size:var(--step--1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onair__np.is-song{color:var(--ink);font-weight:600}
.onair__item .play-btn{width:44px;height:44px;min-height:44px}
.onair__item .play-btn .icon{width:20px;height:20px}
.onair.is-static .onair__track{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
.onair.is-static .onair__item{flex:1 1 280px}

/* iPad portrait and phones: a taller crop, focus on the group */
@media (max-width:900px){.hero__photo img{aspect-ratio:4/3;border-radius:22px}.onair__item{flex-basis:300px}}
@media (max-width:560px){.hero__photo img{aspect-ratio:1/1;border-radius:18px}.onair__item{flex-basis:84%}}
@media (prefers-reduced-motion:reduce){.hero__live-dot{animation:none}.onair__track{scroll-behavior:auto}}
.hero + .home__section,.hero + .home__favs{margin-top:clamp(4.5rem,9vw,6.5rem)}
/* logo tile backgrounds: colour from /brand.css ([data-logo-bg]), padding by size */
[data-logo-pad="sm"]{padding:4px}
[data-logo-pad="lg"]{padding:10px}
/* crop focus per hero photo (the faces sit in the upper-middle band of the sofa shot) */
.hero__photo--hero-sofa img{object-position:50% 35%}
@media (max-width:900px){.hero__photo--hero-sofa img{object-position:52% 40%}}

/* ---------- station cards v2 (ui 2026-10-27) ----------
   Three text lines: name (headline) / "City, ST" / specs "MP3 · 128k" (muted). Whole card is one big link (stretched title
   link), the heart + play buttons sit above it. Layout variants on #app[data-cards]: "3" forces 3 per row, "2" the wide
   2-up card (logo | text | actions on one row). Preview switch on staging only: ?cards=2 / ?cards=3 (remembered in a cookie). */
.card{grid-template-columns:92px minmax(0,1fr);column-gap:var(--space-4);row-gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-4);border-radius:20px;
  border:1px solid var(--line);isolation:isolate}
.card__logo{width:92px;height:92px;border-radius:18px;border:1px solid var(--line-soft);background:#fff;object-fit:contain;padding:6px;box-shadow:0 1px 2px rgba(30,22,51,.05)} /* bigger tile; the logo is fitted inside (contain), never cropped or stretched */
.card__body{min-height:0;display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding-top:.05rem}
.card__title{font-size:var(--step-1);font-weight:750;line-height:1.22;letter-spacing:-.012em;color:var(--ink);-webkit-line-clamp:2;line-clamp:2}
.card__title a{color:inherit;text-decoration:none}
.card__title a::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit}
.card__title a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;text-decoration-color:var(--primary-line)}
.card__title a:focus-visible{outline:none}
.card__place{margin:0;font-size:.95rem;line-height:1.35;font-weight:500;color:var(--ink);opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__specs{margin:0;font-size:.82rem;line-height:1.3;font-weight:500;letter-spacing:.015em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__specs[hidden]{display:none}
.card__foot{border-top:1px solid var(--line-soft);padding-top:var(--space-3);position:relative;z-index:1;pointer-events:none}
.card__foot > *{pointer-events:auto}
.card__badges{pointer-events:none}
.card__actions{gap:.5rem}
.card__actions .play-btn,.card__actions .fav-btn{transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.fav-btn--card{width:44px;height:44px;min-height:44px;border:1.5px solid var(--line-strong);color:var(--heart)}
.fav-btn--card:hover{border-color:var(--heart);background:var(--brand-cream)}
.fav-btn--card:focus-visible,.card .play-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.card:hover{border-color:var(--primary-line);box-shadow:var(--shadow-md)}
@supports selector(:has(a)){
  .card:has(.card__title a:focus-visible){border-color:var(--focus);box-shadow:var(--ring),var(--shadow-md)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card__actions .play-btn:hover{transform:scale(1.06)}
  .card__actions .fav-btn:hover{transform:scale(1.06)}
}
.card__badges .badge{font-size:.78rem;padding:.12rem .55rem}
@media (max-width:640px){.card{padding:var(--space-4) var(--space-4) var(--space-3);grid-template-columns:84px minmax(0,1fr)}.card__logo{width:84px;height:84px}}
/* larger cards: a roomier minimum column so three fit comfortably on desktop and two on iPad portrait */
.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}

/* forced 3-up (desktop / iPad landscape) */
@media (min-width:900px){#app[data-cards="3"] .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}}

/* wide 2-up: one row per card — [logo] [name / place / specs / badges] [heart play] */
@media (min-width:700px){
  #app[data-cards="2"] .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-5)}
  #app[data-cards="2"] .card{grid-template-columns:116px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:var(--space-4);row-gap:0;padding:var(--space-4) var(--space-5) var(--space-4) var(--space-4);align-items:center}
  #app[data-cards="2"] .card__logo{grid-column:1;grid-row:1/3;width:116px;height:116px;border-radius:22px;padding:8px;align-self:center}
  #app[data-cards="2"] .card__body{grid-column:2;grid-row:1;align-self:end;padding-top:0}
  #app[data-cards="2"] .card__title{font-size:var(--step-2);line-height:1.18;-webkit-line-clamp:2;line-clamp:2}
  #app[data-cards="2"] .card__place{font-size:1rem}
  #app[data-cards="2"] .card__specs{font-size:.86rem}
  #app[data-cards="2"] .card__foot{display:contents}
  #app[data-cards="2"] .card__badges{grid-column:2;grid-row:2;align-self:start;margin:0;pointer-events:none}
  #app[data-cards="2"] .card__badges > :not([hidden]){margin-top:.55rem}
  #app[data-cards="2"] .card__actions{grid-column:3;grid-row:1/3;align-self:center;position:relative;z-index:1;gap:.6rem}
  #app[data-cards="2"] .card .play-btn{width:52px;height:52px;min-height:52px}
  #app[data-cards="2"] .fav-btn--card{width:48px;height:48px;min-height:48px}
}
@media (max-width:699px){#app[data-cards="2"] .cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}}


/* ---------- sticky player v2 (ui 2026-10-27) ----------
   10px taller than before (104px phone / 119px desktop incl. the 4px top border), identical on every page: the bar is a fixed
   box, text lines have fixed heights and long names / song titles end in an ellipsis. Volume is a compact slider.
   Hovering a cut-off line slowly slides the full text across (pointer devices without reduced-motion only). */
.player{overflow:hidden}
.player__inner{padding-block:0}
.player__info{display:flex;flex-direction:column;justify-content:center;gap:.05rem;overflow:hidden}
.player__name,.player__status,.player__np{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.player__name a{display:inline;max-width:100%}
.player__volume{flex:0 0 auto;gap:.35rem}
.player__volume input{flex:none;width:96px;min-width:0}
.player__popout{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:transparent;border:2px solid var(--on-dark-muted);color:var(--on-dark-muted);cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.player__popout .icon{width:20px;height:20px}
.player__popout:hover:not([disabled]){background:var(--on-dark-hover);color:var(--on-dark)}
.player__popout[disabled]{opacity:.4;cursor:default}
@media (max-width:640px){.player__popout{display:none}} /* phones: no small windows; the station page offers a new-tab pop-out */
@keyframes rj-marquee{0%,12%{text-indent:0}88%,100%{text-indent:calc(var(--rj-over,0px) * -1)}}
.player__name.is-marquee,.player__np.is-marquee{text-overflow:clip;animation:rj-marquee var(--rj-dur,8s) linear infinite alternate}
@media (prefers-reduced-motion:reduce){.player__name.is-marquee,.player__np.is-marquee{animation:none;text-overflow:ellipsis}}

/* ---------- pop-out player page (/player) ---------- */
.popout-page{padding-bottom:0;min-height:100vh;background:var(--surface-2)}
.popout{max-width:420px;min-height:100vh;margin:0 auto;padding:var(--space-4) var(--space-5) var(--space-4);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-1)}
.popout__brand{display:block;margin-bottom:var(--space-2)}
.popout__brand .wordmark-img{height:30px;width:auto}
.popout__art{width:128px;height:128px;border-radius:22px;background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;margin:var(--space-1) 0 var(--space-2);overflow:hidden}
@media (min-height:700px){.popout__art{width:200px;height:200px;border-radius:28px}.popout__toggle{width:84px;height:84px}}
.popout__logo{width:100%;height:100%;object-fit:contain;padding:12px}
.popout__logo[data-art]{object-fit:cover;padding:0}
.popout__name{margin:0;font-size:var(--step-1);line-height:1.2;font-weight:800;overflow-wrap:anywhere}
.popout__place{margin:0;color:var(--muted);font-size:.95rem}
.popout__np{margin:0;min-height:2.5em;display:flex;flex-direction:column;justify-content:center;gap:.1rem;width:100%}
.popout__song{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.popout__artist{color:var(--muted);font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.popout__status{margin:0;font-size:.85rem;color:var(--muted);min-height:1.4em}
.popout[data-state=playing] .popout__status::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--live);margin-right:.4em}
.popout[data-state=error] .popout__status{color:var(--danger)}
.popout__controls{margin:var(--space-2) 0 var(--space-1)}
.popout__toggle{position:relative;width:72px;height:72px;border-radius:50%;border:0;padding:0;background:var(--primary);color:var(--primary-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.popout__toggle:hover:not([disabled]){background:var(--primary-hover)}
.popout__toggle:focus-visible{outline:none;box-shadow:var(--ring)}
.popout__toggle[disabled]{opacity:.45}
.popout__toggle .icon{width:36px;height:36px}
.popout__toggle .icon--pause,.popout[data-state=playing] .popout__toggle .icon--play,.popout[data-state=loading] .popout__toggle .icon--play{display:none}
.popout[data-state=playing] .popout__toggle .icon--pause,.popout[data-state=loading] .popout__toggle .icon--pause{display:block}
.popout[data-state=loading] .player__spinner{display:block;border-top-color:var(--primary);animation:rj-spin .9s linear infinite}
.popout__volume{display:flex;align-items:center;gap:.6rem;width:min(260px,100%);color:var(--muted)}
.popout__volume label{display:flex}
.popout__volume input{flex:1;min-height:44px;padding:0;border:0;background:transparent;accent-color:var(--primary)}
.popout__back{margin:auto 0 0;padding-top:var(--space-3);font-size:.95rem}
.popout__back a{display:inline-flex;align-items:center;gap:.4rem;font-weight:600}
.popout__back .icon{width:18px;height:18px}
.popout__empty{margin:auto 0}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.popout__toggle:hover:not([disabled]){transform:scale(1.05)}}
.btn--popout .icon{width:20px;height:20px}

/* ---------- positioning subline + About (ui 2026-10-27) ---------- */
.hero__subline{margin:var(--space-3) auto 0;max-width:34rem;text-align:center;font-size:var(--step-0);line-height:1.6;color:var(--muted)}
.hero__subline strong{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--step-1);letter-spacing:-.01em;color:var(--ink);margin-bottom:.15rem}
.hero .hero__subline + .hero-search{margin-top:var(--space-5)}
.about{padding-block:var(--space-7)}
.about__lead{font-size:var(--step-1);line-height:1.6;color:var(--ink);margin-bottom:var(--space-6)}
.about__section{margin-top:var(--space-6)}
.about__section h2{margin-bottom:var(--space-2)}
.about__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.about__made{margin-top:var(--space-7)}


/* ---------- themes: orange + minimal neutral (ui 2026-10-27) ----------
   Everything else in this file reads these variables, so a theme is only a variable block. Orange is a FILL colour here (buttons,
   chips, badges) with brown text on it for WCAG contrast; --primary-text is the text/outline colour used where purple used --primary. */
body.theme-orange{
  --ink:#2b1a0d;--muted:#66503d;--line:#ead9c4;--line-soft:#f6ede1;--line-strong:#c9a97f;--soft:#fdf5e9;--bg:#fff;--surface:#fff;--surface-2:#fffaf2;
  --primary:#ff9200;--primary-hover:#ffa62e;--primary-ink:#3b1800;--primary-soft:#fff3df;--primary-line:#ffd39a;--primary-text:#8a3d00;
  --link:#8a3d00;--focus:#b45309;--ring:0 0 0 4px rgba(255,146,0,.38);--field-border:#8c7458;
  --accent:#ff9200;--heart:#c2410c;
  --player-bg:#3b1800;--on-dark:#fff;--on-dark-muted:#f7e3cc;--on-dark-hover:rgba(255,255,255,.13);
  --hero-glow:radial-gradient(60rem 26rem at 50% -6rem,#ffe9c9 0%,rgba(255,233,201,0) 70%);
  --shadow-sm:0 1px 2px rgba(59,24,0,.07),0 2px 8px rgba(59,24,0,.06);
  --shadow-md:0 2px 4px rgba(59,24,0,.07),0 10px 24px rgba(89,33,0,.11);
  --shadow-lg:0 4px 8px rgba(59,24,0,.09),0 18px 40px rgba(89,33,0,.17);
  --shadow-up:0 -6px 24px rgba(59,24,0,.26)
}
body.theme-neutral{
  --ink:#111827;--muted:#525a68;--line:#e5e7eb;--line-soft:#f1f2f4;--line-strong:#aeb4be;--soft:#f5f6f8;--bg:#fff;--surface:#fff;--surface-2:#fafafb;
  --primary:#1f2937;--primary-hover:#0b1220;--primary-ink:#fff;--primary-soft:#f3f4f6;--primary-line:#d5d9e0;
  --link:#1f2937;--focus:#2563eb;--ring:0 0 0 4px rgba(37,99,235,.28);--field-border:#79808d;
  --accent:#ff9200;--heart:#b42318;
  --player-bg:#111827;--on-dark:#fff;--on-dark-muted:#d5d9e0;--on-dark-hover:rgba(255,255,255,.12);
  --hero-glow:none;
  --shadow-sm:0 1px 2px rgba(17,24,39,.06),0 2px 6px rgba(17,24,39,.05);
  --shadow-md:0 2px 4px rgba(17,24,39,.06),0 8px 20px rgba(17,24,39,.08);
  --shadow-lg:0 4px 8px rgba(17,24,39,.08),0 16px 36px rgba(17,24,39,.13);
  --shadow-up:0 -6px 24px rgba(17,24,39,.22)
}


/* ---------- favorites sign-up dialog ---------- */
html.has-modal{overflow:hidden}
.favmodal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:var(--space-4);overflow-y:auto}
.favmodal__backdrop{position:fixed;inset:0;background:rgba(20,12,36,.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s var(--ease)}
.favmodal__dialog{position:relative;width:min(30rem,100%);margin:auto;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:var(--space-5) var(--space-6) var(--space-3);text-align:center;opacity:0;transform:translateY(14px) scale(.97);outline:0;
  transition:opacity .26s var(--ease),transform .32s var(--ease);border-top:5px solid var(--accent)}
.fav-prompt.is-open .favmodal__backdrop{opacity:1}
.fav-prompt.is-open .favmodal__dialog{opacity:1;transform:none}
.fav-prompt.is-leaving .favmodal__backdrop{opacity:0}
.fav-prompt.is-leaving .favmodal__dialog{opacity:0;transform:translateY(8px) scale(.98);transition-duration:.15s}
.favmodal__close{position:absolute;top:var(--space-3);right:var(--space-3);width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:0;background:transparent;color:var(--muted);display:grid;place-items:center}
.favmodal__close:hover{background:var(--primary-soft);color:var(--ink)}
.favmodal__close .icon{width:22px;height:22px}
.favmodal__brand{display:flex;justify-content:center;margin:0 0 var(--space-3)}
.favmodal__brand .wordmark-img{height:38px;width:auto}
.favmodal__title{margin:0 0 var(--space-3);font-size:var(--step-2);line-height:1.2;font-weight:800;text-wrap:balance}
.favmodal__lead{margin:0 auto var(--space-4);max-width:26rem;color:var(--muted);font-size:var(--step-0);line-height:1.55}
.favmodal__benefits{list-style:none;margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);display:grid;gap:var(--space-2);text-align:left;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius-lg)}
.favmodal__benefits li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--step--1);line-height:1.4;color:var(--muted)}
.favmodal__benefits strong{color:var(--ink);font-weight:700}
.favmodal__ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--primary-soft);color:var(--primary-text,var(--primary));display:grid;place-items:center;border:1px solid var(--primary-line)}
.favmodal__ico .icon{width:22px;height:22px}
.favmodal__form{margin:0;text-align:left}
.favmodal__label{display:block;margin:0 0 var(--space-1);font-size:var(--step--1);font-weight:700;color:var(--ink)}
.favmodal__row{display:flex;gap:var(--space-2);align-items:stretch}
.favmodal__row input{flex:1;min-width:0;min-height:52px;font-size:1rem;padding:0 var(--space-4);border-radius:14px}
.favmodal__send{flex:none;min-height:52px;padding:0 var(--space-5);border-radius:14px;font-weight:700;white-space:nowrap}
.favmodal__msg{min-height:1.2em;margin:var(--space-1) 0 0;font-size:var(--step--1);color:var(--danger,#b42318)}
.favmodal__privacy{display:flex;align-items:flex-start;justify-content:center;gap:var(--space-2);margin:var(--space-3) 0 0;font-size:var(--step--1);color:var(--muted);text-align:left;line-height:1.45}
.favmodal__privacy .icon{flex:none;width:20px;height:20px;margin-top:1px;color:var(--primary-text,var(--primary))}
.favmodal__privacy a{white-space:nowrap}
.favmodal__later{display:block;margin:var(--space-1) auto 0;min-height:44px;padding:0 var(--space-4);background:transparent;border:0;color:var(--muted);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.favmodal__later:hover{color:var(--ink);background:transparent}
.favmodal__done{padding:var(--space-4) 0 var(--space-2)}
.favmodal__badge{display:grid;place-items:center;width:64px;height:64px;margin:0 auto var(--space-4);border-radius:50%;background:var(--primary-soft);color:var(--primary-text,var(--primary));border:1px solid var(--primary-line)}
.favmodal__badge .icon{width:30px;height:30px}
.favmodal__ok{min-height:48px;padding:0 var(--space-5);border-radius:14px}
@media (max-width:520px){
  .favmodal{align-items:flex-end;padding:var(--space-2)}
  .favmodal__dialog{padding:var(--space-5) var(--space-4) var(--space-4);border-radius:var(--radius-lg)}
  .favmodal__row{flex-direction:column}
  .favmodal__title{font-size:var(--step-1)}
  .favmodal__brand .wordmark-img{height:32px}
}
@media (prefers-reduced-motion:reduce){.favmodal__backdrop,.favmodal__dialog{transition:none!important;transform:none}}

/* ---- ZIP search note (results page) ---- */
.results-zip { display: flex; align-items: center; gap: var(--space-2); margin: calc(var(--space-2) * -1) 0 var(--space-5); color: var(--muted); font-size: var(--step-0); }
.results-zip svg { width: 18px; height: 18px; flex: none; color: var(--primary-text, var(--primary)); }

/* ---- Submit / claim flow: Find your station -> Claim this station -> (My station isn't here) -> new station ---- */
.submit { max-width: 760px; margin-inline: auto; padding-block: var(--space-6) var(--space-7); }
.submit .eyebrow { margin: 0 0 var(--space-2); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-text, var(--primary)); }
.submit h1 { margin: 0 0 var(--space-3); line-height: 1.15; }
.submit__lead { margin: 0 0 var(--space-5); color: var(--muted); font-size: 1.08rem; line-height: 1.6; max-width: 56ch; }
.submit__search { display: flex; gap: var(--space-2); align-items: stretch; }
.submit__search input[type=search] { flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--space-4); font-size: 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.submit__search input[type=search]:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 1px; border-color: var(--primary); }
.submit__search .btn { min-height: 52px; padding-inline: var(--space-5); display: inline-flex; align-items: center; gap: .5rem; }
.submit__search .btn svg { width: 18px; height: 18px; fill: currentColor; }
.submit__results { margin-top: var(--space-6); }
.submit__h2 { margin: 0 0 var(--space-4); font-size: 1.25rem; }
.submit__muted { color: var(--muted); line-height: 1.6; }
.claim-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.claim-card { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.claim-card--solo { margin: var(--space-4) 0; border-style: dashed; }
.claim-card__logo { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: var(--surface-2, var(--bg)); }
.claim-card__body { min-width: 0; }
.claim-card__title { margin: 0; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.claim-card__title a { color: inherit; text-decoration: none; }
.claim-card__title a:hover { text-decoration: underline; }
.claim-card__place, .claim-card__specs { margin: .15rem 0 0; color: var(--muted); font-size: .92rem; }
.claim-card__specs { font-size: .85rem; }
.claim-card__btn { white-space: nowrap; }
.submit__missing { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.submit__missing p { margin: 0; display: grid; gap: .25rem; }
.submit__missing span { color: var(--muted); font-size: .95rem; }
.submit__back { margin: var(--space-4) 0 0; }
.submit__new h1 { font-size: 1.6rem; }
@media (max-width: 640px) {
  .submit__search { flex-direction: column; }
  .claim-card { grid-template-columns: 56px 1fr; }
  .claim-card__logo { width: 56px; height: 56px; }
  .claim-card__btn { grid-column: 1 / -1; text-align: center; }
  .submit__missing { flex-direction: column; align-items: stretch; text-align: left; }
  .submit__missing .btn { text-align: center; }
}

/* ---------- hero audit (UI 2026-10-27): the slogan, subline and search must be reachable without scrolling on desktop / iPad landscape ---------- */
@media (min-width:901px){
  .hero{gap:clamp(1.75rem,3.5vh,2.5rem)}
  /* splash 2026-10-27: desktop photo crop reverted to the prod treatment (1200/520, sofa focus 50% 35%); see docs/CHANGES-splash-2026-10-27.md */
  .hero .home__slogan{margin-bottom:var(--space-4)}
}

/* cards audit (UI 2026-10-27): in the forced 3-up the columns are narrow, so the card stacks (logo above the text) instead of squeezing the three lines into ~100px */
@media (min-width:900px){
  #app[data-cards="3"] .card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-3)}
  #app[data-cards="3"] .card__logo{width:96px;height:96px;flex:none}
  #app[data-cards="3"] .card__body{justify-content:flex-start;width:100%}
  #app[data-cards="3"] .card__foot{width:100%;gap:.5rem;margin-top:auto}
  #app[data-cards="3"] .card__distance{white-space:nowrap;font-size:.85rem}
}
.submit__missing .btn{white-space:nowrap;flex:none}
.rj-pic source{display:none} /* WebKit can create a grid item for <source> inside a display:contents <picture> */

/* ---------- splash photo (2026-10-27, src/Splash): per-photo focal point + shared scrim; classes only, the CSP forbids inline styles ---------- */
.hero__photo--splash img{object-position:var(--sfx,50%) var(--sfy,50%)}
.sfx-0{--sfx:0%}.sfx-2{--sfx:2%}.sfx-4{--sfx:4%}.sfx-6{--sfx:6%}.sfx-8{--sfx:8%}.sfx-10{--sfx:10%}.sfx-12{--sfx:12%}.sfx-14{--sfx:14%}.sfx-16{--sfx:16%}.sfx-18{--sfx:18%}.sfx-20{--sfx:20%}.sfx-22{--sfx:22%}.sfx-24{--sfx:24%}.sfx-26{--sfx:26%}.sfx-28{--sfx:28%}.sfx-30{--sfx:30%}.sfx-32{--sfx:32%}.sfx-34{--sfx:34%}.sfx-36{--sfx:36%}.sfx-38{--sfx:38%}.sfx-40{--sfx:40%}.sfx-42{--sfx:42%}.sfx-44{--sfx:44%}.sfx-46{--sfx:46%}.sfx-48{--sfx:48%}.sfx-50{--sfx:50%}.sfx-52{--sfx:52%}.sfx-54{--sfx:54%}.sfx-56{--sfx:56%}.sfx-58{--sfx:58%}.sfx-60{--sfx:60%}.sfx-62{--sfx:62%}.sfx-64{--sfx:64%}.sfx-66{--sfx:66%}.sfx-68{--sfx:68%}.sfx-70{--sfx:70%}.sfx-72{--sfx:72%}.sfx-74{--sfx:74%}.sfx-76{--sfx:76%}.sfx-78{--sfx:78%}.sfx-80{--sfx:80%}.sfx-82{--sfx:82%}.sfx-84{--sfx:84%}.sfx-86{--sfx:86%}.sfx-88{--sfx:88%}.sfx-90{--sfx:90%}.sfx-92{--sfx:92%}.sfx-94{--sfx:94%}.sfx-96{--sfx:96%}.sfx-98{--sfx:98%}.sfx-100{--sfx:100%}
.sfy-0{--sfy:0%}.sfy-2{--sfy:2%}.sfy-4{--sfy:4%}.sfy-6{--sfy:6%}.sfy-8{--sfy:8%}.sfy-10{--sfy:10%}.sfy-12{--sfy:12%}.sfy-14{--sfy:14%}.sfy-16{--sfy:16%}.sfy-18{--sfy:18%}.sfy-20{--sfy:20%}.sfy-22{--sfy:22%}.sfy-24{--sfy:24%}.sfy-26{--sfy:26%}.sfy-28{--sfy:28%}.sfy-30{--sfy:30%}.sfy-32{--sfy:32%}.sfy-34{--sfy:34%}.sfy-36{--sfy:36%}.sfy-38{--sfy:38%}.sfy-40{--sfy:40%}.sfy-42{--sfy:42%}.sfy-44{--sfy:44%}.sfy-46{--sfy:46%}.sfy-48{--sfy:48%}.sfy-50{--sfy:50%}.sfy-52{--sfy:52%}.sfy-54{--sfy:54%}.sfy-56{--sfy:56%}.sfy-58{--sfy:58%}.sfy-60{--sfy:60%}.sfy-62{--sfy:62%}.sfy-64{--sfy:64%}.sfy-66{--sfy:66%}.sfy-68{--sfy:68%}.sfy-70{--sfy:70%}.sfy-72{--sfy:72%}.sfy-74{--sfy:74%}.sfy-76{--sfy:76%}.sfy-78{--sfy:78%}.sfy-80{--sfy:80%}.sfy-82{--sfy:82%}.sfy-84{--sfy:84%}.sfy-86{--sfy:86%}.sfy-88{--sfy:88%}.sfy-90{--sfy:90%}.sfy-92{--sfy:92%}.sfy-94{--sfy:94%}.sfy-96{--sfy:96%}.sfy-98{--sfy:98%}.sfy-100{--sfy:100%}
.splash-ov{position:relative}
.splash-ov::after{content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;background:linear-gradient(to bottom,rgba(8,10,24,0) 45%,rgba(8,10,24,var(--sov,0)) 100%)}
@media (max-width:900px){.splash-ov::after{border-radius:22px}}
@media (max-width:560px){.splash-ov::after{border-radius:18px}}
.sov-5{--sov:0.05}.sov-10{--sov:0.10}.sov-15{--sov:0.15}.sov-20{--sov:0.20}.sov-25{--sov:0.25}.sov-30{--sov:0.30}.sov-35{--sov:0.35}.sov-40{--sov:0.40}.sov-45{--sov:0.45}.sov-50{--sov:0.50}.sov-55{--sov:0.55}.sov-60{--sov:0.60}
.splash-frame{padding-bottom:0}

/* ---------- editorial info pages + homepage intro (copy pass 2026-10-27) ---------- */
.page.info{max-width:44rem;margin:0 auto;padding-block:clamp(1.5rem,5vw,3.5rem)}
.info__head{margin-bottom:clamp(3rem,8vw,5rem)}
.info__eyebrow{margin:0 0 var(--space-3);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-text,var(--primary))}
.info h1{font-size:var(--step-5);line-height:1.08;margin:0 0 var(--space-5);text-wrap:balance}
.info__lead{font-size:var(--step-2);line-height:1.5;color:var(--muted);margin:0;max-width:34rem}
.info__block{margin-top:clamp(2.5rem,6vw,4rem)}
.info__block h2{font-size:var(--step-3);margin:0 0 var(--space-3)}
.info__block p{font-size:1.08rem;line-height:1.7;max-width:36rem;margin:0}
.info__block p+p{margin-top:var(--space-4)}
.info__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)!important}
.info__note{margin-top:clamp(3rem,7vw,4.5rem);font-size:1rem;max-width:36rem}
.info__credits{margin-top:clamp(3.5rem,8vw,5.5rem);font-size:.85rem;line-height:1.6;max-width:36rem}
.info__steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:clamp(2.25rem,6vw,3.5rem)}
.info__steps li{counter-increment:step;display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:var(--space-5)}
.info__steps li::before{content:counter(step);grid-row:1 / span 2;font:800 var(--step-4)/1 var(--font-display);color:var(--primary)}
.info__steps h2{font-size:var(--step-3);margin:0 0 var(--space-2)}
.info__steps p{grid-column:2;margin:0;font-size:1.08rem;line-height:1.7;max-width:34rem}
.info__more{margin-top:clamp(3.5rem,8vw,5rem)}
.info__more h2{font-size:var(--step-2);margin:0 0 var(--space-4)}
.info__more details{border-top:1px solid var(--line)}
.info__more details:last-child{border-bottom:1px solid var(--line)}
.info__more summary{cursor:pointer;list-style:none;padding:var(--space-4) 0;font-weight:700;display:flex;justify-content:space-between;gap:var(--space-4);min-height:48px;align-items:center}
.info__more summary::-webkit-details-marker{display:none}
.info__more summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--primary);flex:none}
.info__more details[open] summary::after{content:"\2212"}
.info__more details p{margin:0 0 var(--space-4);max-width:34rem;line-height:1.65;color:var(--muted)}
.info>.info__actions{margin-top:clamp(3rem,7vw,4.5rem)!important}

.hm-intro{max-width:none;padding-block:clamp(.5rem,2vw,1.5rem)}
.hm-intro h2{margin:0 0 var(--space-4);font-size:var(--step-4);line-height:1.12}
.hm-intro .hm-intro__lead{font-size:var(--step-1);line-height:1.6;max-width:40rem}
.hm-intro__points{list-style:none;margin:clamp(1.75rem,4vw,2.5rem) 0 0;padding:clamp(1.5rem,3vw,2.25rem) 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.hm-intro__points strong{display:block;font-family:var(--font-display);font-size:var(--step-1);margin-bottom:var(--space-1);color:var(--ink)}
.hm-intro__points span{color:var(--muted);line-height:1.55;display:block}
.hm-intro .hm-intro__more{margin-top:var(--space-5);font-size:1rem}
.hm-intro__more a{font-weight:700}
@media (max-width:760px){.hm-intro__points{grid-template-columns:1fr;gap:var(--space-5)}}

/* footer: grouped links (copy pass 2026-10-27) */
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,12rem));gap:var(--space-6) var(--space-8);margin-bottom:var(--space-6)}
.footer-cols .footer-links{flex-direction:column;flex-wrap:nowrap;gap:0;margin:0}
.footer-h{margin:0 0 var(--space-2);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.footer-links--legal{gap:.25rem 1.5rem;margin-bottom:var(--space-5)!important;font-size:.9rem}
.footer-links--legal a{color:var(--muted)}
@media (max-width:640px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-5)}}

/* ==== home near + spotlight (2026-10-27): "Stations near <place>" and the Station of the Day spotlight ==== */
.nearby__head{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.nearby__head h2{margin:0;display:flex;align-items:center;gap:.6rem;font-size:clamp(1.5rem,2.8vw,2rem)}
.nearby__head h2:focus{outline:none}
.nearby__head h2 .icon{flex:none;color:var(--brand-orange);width:1.05em;height:1.05em}
.nearby__change{display:inline-flex;align-items:center;min-height:44px;padding:0 .35rem;font-size:.95rem;font-weight:600;color:var(--primary-text,var(--link));text-decoration:underline;text-underline-offset:3px}
.nearby__change:hover{text-decoration-thickness:2px}
.nearby__sub{margin:var(--space-2) 0 0;max-width:42rem;color:var(--muted)}
.nearby__sub--alert{color:var(--danger)}
.nearby__find{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);margin-top:var(--space-5)}
.nearby__find[hidden],.nearby__precise[hidden]{display:none}
.nearby__form{display:flex;gap:.6rem;flex:1 1 26rem;max-width:38rem}
.nearby__input{flex:1;min-width:0;min-height:52px;padding:.4rem 1.3rem;border:2px solid var(--field-border);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:1rem;box-shadow:var(--shadow-sm)}
.nearby__input:focus-visible{outline:none;border-color:var(--focus);box-shadow:var(--ring)}
.nearby__status{margin:var(--space-2) 0 0;color:var(--muted)}
.nearby__status:empty{margin:0;height:0}
.nearby--ask .nearby__find{margin-top:var(--space-5)}
@media (max-width:640px){
  .nearby__form{flex-basis:100%;flex-wrap:wrap}
  .nearby__form .btn{flex:1 1 100%;justify-content:center}
  .nearby__precise{width:100%;justify-content:center}
}

.spot__card{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4.5vw,3.5rem);padding:clamp(1.5rem,4.5vw,3.25rem);border:1px solid var(--primary-line,var(--line));border-radius:28px;background:linear-gradient(135deg,var(--primary-soft,var(--brand-cream)) 0%,var(--surface) 72%);box-shadow:var(--shadow-md)}
.spot__logo{display:grid;place-items:center;width:100%;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line-soft);border-radius:26px;background:#fff;box-shadow:var(--shadow-sm)}
.spot__img{display:block;width:100%;height:100%;object-fit:contain;padding:14px;background:transparent}
.spot__body{min-width:0}
.spot__eyebrow{display:flex;align-items:center;gap:.5rem;margin:0 0 var(--space-3);font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-text,var(--brand-brown))}
.spot__eyebrow .icon{width:1.15em;height:1.15em;color:var(--brand-orange)}
.spot__name{margin:0;font-family:var(--font-display,inherit);font-size:clamp(1.75rem,4.2vw,2.75rem);font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.spot__name a{color:inherit;text-decoration:none}
.spot__name a:hover{text-decoration:underline;text-underline-offset:4px}
.spot__place{display:flex;align-items:center;gap:.45rem;margin:var(--space-3) 0 0;color:var(--muted);font-size:1.05rem}
.spot__place .icon{flex:none;width:1.1em;height:1.1em}
.spot__blurb{margin:var(--space-4) 0 0;max-width:36rem;font-size:1.1rem;line-height:1.55;color:var(--ink)}
.spot__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);margin-top:var(--space-5)}
.spot__past{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:600;color:var(--primary-text,var(--link));text-decoration:none}
.spot__past:hover{text-decoration:underline;text-underline-offset:3px}
.spot__past .icon{width:1.1em;height:1.1em}
@media (max-width:640px){
  .spot__card{grid-template-columns:1fr;gap:var(--space-5);border-radius:22px}
  .spot__logo{width:min(56vw,200px);border-radius:22px}
}

/* brand27: RADIO JOX branding (player label, footer statement) */
.player__brand{flex:none;align-self:center;font-family:var(--font-display);font-weight:800;font-size:.7rem;letter-spacing:.18em;color:var(--on-dark-muted);white-space:nowrap;opacity:.9}
@media (max-width:700px){.player__brand{display:none}}
.footer-brand{margin:0 0 var(--space-6);max-width:26rem;font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:1.25;letter-spacing:-.01em}

/* ==== site-wide layout + homepage rhythm (2026-10-27) ====
   ONE container for every page: --maxw = min(90vw, 1600px) on desktop, 95vw on phones/small tablets (<=768px), centred.
   header, main, footer, player, hero and home sections all read --maxw, so changing it here changes the whole site.
   /tower (admin) keeps its old 1180px. Content padding is 0 so the content edge IS the container edge (header, page and footer align). */
:root{--maxw:min(90vw,1600px);--section-gap:clamp(3rem,8vw,7.5rem);--band-pad:clamp(2.5rem,6vw,5rem);--card-min:330px;--card-max:400px}
@media (max-width:768px){:root{--maxw:95vw}}
body:has(#app[data-path^="/tower"]){--maxw:1180px}
body{overflow-x:clip}
main{padding-inline:0}
.site-header__inner,.site-footer__inner,.player__inner{padding-inline:0}
.home{margin-inline:0;padding-inline:0}
.app-banner{padding-inline:max(1rem,calc((100% - var(--maxw))/2))}

/* cards keep their designed size and the grid gains columns as the container grows (no stretching beyond --card-max) */
.cards,#app[data-cards="3"] .cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--card-min)),var(--card-max)));justify-content:start}
@media (min-width:700px){#app[data-cards="2"] .cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,500px),640px));justify-content:start}}
.genre-tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),260px));justify-content:start}
@media (max-width:640px){.genre-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* logos are never cropped or distorted */
.card__logo img,.spot__logo img,.station__logo img,.player__logo img,.onair__logo img{object-fit:contain}

/* homepage: generous, even vertical rhythm */
.home__section{margin-top:var(--section-gap)}
.hero + .home__section,.spot{margin-top:var(--section-gap)}
.home__section-head{margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.home__ad{margin-top:var(--section-gap)}
.home__cta{margin-bottom:0}
/* full-width bands (background bleeds to the viewport edges, content stays in the container) */
.home__band{position:relative;isolation:isolate;padding-block:var(--band-pad)}
.home__band::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:var(--band-bg,var(--primary-soft))}
.home__band--tint{--band-bg:var(--surface-2)}
.hm-intro{padding-block:var(--band-pad)}
.hm-intro__eyebrow{margin:0 0 var(--space-3);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--primary)}
.home__cta--band{padding:clamp(2rem,5vw,4rem)}
.home__cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.home__cta-link{color:var(--on-dark-muted);font-weight:600}
.home__cta-link:hover{color:#fff}

/* Artists playing now: a calm pill row, no cards, no counts */
.artists-now__head{max-width:42rem;margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.artists-now__head h2{margin:0;font-size:clamp(1.35rem,2.4vw,1.75rem)}
.artists-now__sub{margin:.35rem 0 0;color:var(--muted)}
.artists-now__pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem .75rem}
.artist-pill{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.15rem;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none;
  transition:background-color var(--dur,.15s) ease,border-color var(--dur,.15s) ease,transform var(--dur,.15s) ease}
.artist-pill:hover{background:var(--primary-soft);border-color:var(--brand-orange);transform:translateY(-1px)}
.artist-pill:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px}

/* ==== information band (headlines tabs + local weather + stats), right under the hero ==== */
.home__info{text-align:left}
.home__info-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-3) var(--space-6);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.home__info-head h2{margin:0;font-size:clamp(1.5rem,2.8vw,2.1rem)}
.home__info-stats{margin:0;color:var(--muted);font-weight:600;font-size:clamp(1rem,1.4vw,1.15rem)}
.home__info-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:clamp(2rem,5vw,5rem);align-items:start}
.home__info-grid--solo{grid-template-columns:minmax(0,1fr)}
.home__info .tabs.tabs--seg{display:inline-flex;flex-wrap:wrap;margin-bottom:clamp(1.25rem,2.5vw,2rem);border-radius:26px;background:var(--surface)}
.home__info .tabs.tabs--seg .tabs__tab{min-height:44px;font-size:.95rem}
.home__info .hl-list{grid-template-columns:minmax(0,1fr);gap:0}
.home__info-grid--solo .hl-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,5vw,4rem)}
.home__info .hl{display:block;padding:clamp(.9rem,1.6vw,1.25rem) 0;border-bottom:1px solid var(--line)}
.home__info .hl__title{display:inline;font-size:clamp(1.05rem,1.5vw,1.2rem);font-weight:700;line-height:1.4}
.home__info .hl__meta{margin:.35rem 0 0}
.home__info-note{margin:clamp(1rem,2vw,1.5rem) 0 0;font-size:.85rem;color:var(--muted)}
.wxcard{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;text-align:left}
.wxcard p{margin:0}
.wxcard__place{font-weight:700;color:var(--muted)}
.wxcard__now{display:flex;align-items:center;gap:1rem;margin:.5rem 0 .25rem}
.wxcard__icon{flex:none;color:var(--brand-orange)}
.wxcard__temp{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,5vw,4rem);line-height:1;letter-spacing:-.02em}
.wxcard__unit{font-size:.45em;font-weight:700;margin-left:.15em;vertical-align:top;color:var(--muted)}
.wxcard__cond{font-size:1.15rem;font-weight:600}
.wxcard__range{color:var(--muted)}
.wxcard__more{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-3);font-weight:700;color:var(--primary-text,var(--link))}
.wxcard__credit{font-size:.78rem;color:var(--muted)}
@media (max-width:900px){
  .home__info-grid,.home__info-grid--solo{grid-template-columns:minmax(0,1fr)}
  .home__info-grid--solo .hl-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .home__info .tabs.tabs--seg{display:flex;overflow:visible}
  .home__info .tabs.tabs--seg .tabs__tab{flex:1 1 auto;padding:.5rem .9rem}
}

/* self-hosted proof-of-work check (templates/partials/pow.php) */
.pow{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem;margin:1.5rem 0 1.75rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--muted);font-size:.9rem;line-height:1.3}
.pow__dot{position:relative;flex:none;width:1.15rem;height:1.15rem;border:2px solid var(--line);border-radius:50%;box-sizing:border-box}
.pow[data-state=working] .pow__dot{border-color:var(--accent);border-top-color:transparent;animation:pow-spin .8s linear infinite}
.pow[data-state=done] .pow__dot{border-color:var(--ok);background:var(--ok)}
.pow[data-state=done] .pow__dot::after{content:"";position:absolute;left:.3rem;top:.12rem;width:.25rem;height:.5rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pow[data-state=done] .pow__label{color:var(--ok)}
.pow[data-state=error] .pow__dot{border-color:#b42318}
.pow__brand{margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);opacity:.75}
@keyframes pow-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pow[data-state=working] .pow__dot{animation:none;border-top-color:var(--accent)}}

/* item6: no horizontal overflow at 390 (On Air header wraps) */
.onair__head{flex-wrap:wrap;min-width:0}
.onair{min-width:0;max-width:100%}
.onair__track{max-width:100%}

/* Headlines with photos (2026-10-31): card grid reflows to more columns (auto-fill) instead of stretching; photos 16:9 cover, RADIO JOX placeholder logo contain; shared spacing scale */
.home__info .hl-list.hl-grid,.home__info-grid--solo .hl-list.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:var(--space-7) var(--space-6)}
.home__info .hl.hl--card{display:flex;flex-direction:column;gap:var(--space-3);padding:0;border:0;min-width:0}
.hl__media{display:block;aspect-ratio:16/9;width:100%;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.hl__media img{display:block;width:100%;height:100%;object-fit:cover}
.hl__media.is-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-soft,var(--surface)),var(--surface))}
.hl__media.is-placeholder img{width:52%;height:52%;object-fit:contain;opacity:.9}
.home__info .hl--card .hl__title{display:block;font-size:clamp(1.02rem,1.3vw,1.12rem);line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.home__info .hl--card .hl__meta{margin:0;font-size:.88rem;color:var(--muted)}
.hl__src{font-weight:700;color:var(--ink)}
@media (max-width:768px){.home__info .hl-list.hl-grid,.home__info-grid--solo .hl-list.hl-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--space-6) var(--space-5)}}

/* ---------- player song-line marquee (2026-10-31) ----------
   player.js wraps the line in .rj-mq and, when it overflows, scrolls it ~35px/s 2x (each pass returns to the start), then
   drops back to an ellipsis. Never with reduced motion. */
.player__np .rj-mq{display:inline}
.player__np.is-scroll{text-overflow:clip}
.player__np.is-scroll .rj-mq{display:inline-block;will-change:transform;animation:rj-np-scroll var(--rj-dur,8s) ease-in-out 2}
@keyframes rj-np-scroll{0%,12%{transform:translateX(0)}44%,56%{transform:translateX(calc(var(--rj-over,0px) * -1))}88%,100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.player__np.is-scroll{text-overflow:ellipsis}.player__np.is-scroll .rj-mq{display:inline;animation:none}}

/* ---------- browse: "Stations around the world" (2026-10-31) — modest block below US/CA ---------- */
.browse-jump{margin:-.25rem 0 1rem;font-size:.95rem}
.browse-jump a{color:var(--muted);font-weight:600}
.intl{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line,#e5e7eb)}
.intl__h{font-size:1.2rem}
.intl__intro{margin:.25rem 0 1rem;font-size:.95rem}
.intl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:.6rem 1.25rem;list-style:none;margin:0;padding:0}
@media (max-width:520px){.intl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem .75rem}}
.intl-grid__a{display:flex;align-items:center;gap:.55rem;min-height:44px;padding:.35rem .5rem;border-radius:10px;color:var(--ink);text-decoration:none;font-size:.95rem}
.intl-grid__a:hover{background:var(--soft)}
.intl-grid__flag{flex:none;font-size:1.15rem;line-height:1}
.intl-grid__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intl-grid__n{flex:none;color:var(--muted);font-size:.85rem}

/* ---------- visual polish (2026-10-31): bigger artwork, softer cards, fewer lines, stronger headings ----------
   CSS-only overrides; widths, brand, player and menus untouched. Logos stay object-fit:contain (never cropped). */
:root{--card-radius:24px;--card-shadow:0 1px 2px rgba(17,24,39,.04),0 6px 20px rgba(17,24,39,.07);--card-shadow-hover:0 2px 6px rgba(17,24,39,.06),0 14px 34px rgba(17,24,39,.12)}
/* 1. bigger station artwork */
.card{grid-template-columns:108px minmax(0,1fr);padding:var(--space-5) var(--space-5) var(--space-4);column-gap:var(--space-5)}
.card__logo{width:108px;height:108px;border-radius:20px;border:0;background:var(--surface-2);padding:8px;object-fit:contain;box-shadow:inset 0 0 0 1px rgba(17,24,39,.05)}
#app[data-cards="3"] .card__logo{width:112px;height:112px}
@media (min-width:700px){#app[data-cards="2"] .card{grid-template-columns:132px minmax(0,1fr) auto}#app[data-cards="2"] .card__logo{width:132px;height:132px;border-radius:24px}}
@media (max-width:640px){.card{grid-template-columns:96px minmax(0,1fr);padding:var(--space-4);column-gap:var(--space-4)}.card__logo{width:96px;height:96px;border-radius:18px}}
/* 2. rounder, softer cards: shadow instead of outline */
.card,.tile{border-color:transparent;border-radius:var(--card-radius);box-shadow:var(--card-shadow)}
.card:hover,.tile:hover{border-color:transparent;box-shadow:var(--card-shadow-hover)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.card:hover,.tile:hover{transform:translateY(-2px)}}
.card.is-current{border-color:var(--primary);box-shadow:inset 6px 0 0 var(--accent),var(--card-shadow-hover)}
/* 3. fewer borders and dividers */
.card__foot{border-top:0;padding-top:var(--space-2)}
.site-header,.site-header--home{border-bottom:0;box-shadow:0 1px 0 rgba(17,24,39,.05)}
.filters,.facts,.panel,.fav-list__item{border-color:var(--line-soft)}
/* 4. calmer body type, stronger section headings */
body{line-height:1.6}
h1{font-weight:850;letter-spacing:-.025em}
h2{font-weight:850;letter-spacing:-.02em;font-size:calc(var(--step-3) * 1.08)}
.card__place{opacity:.75}

/* Homepage fixes (2026-10-31) ---------------------------------------------------------------------------------------- */
/* (7) shared vertical rhythm: ~80px phone, ~120px iPad (768-1024), ~160px desktop; more air inside sections too */
:root{--section-gap:80px;--band-pad:clamp(3rem,7vw,6.5rem);--inner-gap:var(--space-6)}
@media (min-width:768px){:root{--section-gap:120px;--inner-gap:2.5rem}}
@media (min-width:1200px){:root{--section-gap:160px;--inner-gap:var(--space-7)}}
.home__section,.home__favs,.home__ad,.spot,.hero + .home__section,.hero + .home__favs{margin-top:var(--section-gap)}
.home__section-head{margin-bottom:var(--inner-gap)}
.home__section .cards,.home__favs .cards{margin-top:var(--inner-gap)}
.home__more{margin-top:var(--inner-gap)}
.home__country-chips,.home__continent-chips{margin-top:var(--inner-gap)}
.home__continent-chips{margin-top:var(--space-4)}

/* (1) Station of the Day headline */
.spot__title{margin:0 0 var(--inner-gap);font-family:var(--font-display,inherit);font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:800;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-align:center}
.onair__tag{display:inline-flex;align-items:center;padding:.2rem .7rem;border-radius:999px;background:var(--brand-cream);color:var(--brand-brown);font-size:.72rem;letter-spacing:.08em}

/* (2) On the Air Now cards: stacked layout, never squeezed into one row */
.onair .onair__item{flex:0 0 clamp(280px,31%,360px);display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--line-soft,var(--line));border-radius:var(--card-radius,24px);box-shadow:var(--card-shadow);min-width:0}
.onair .fcard__badge{align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;max-width:100%;padding:.25rem .7rem;border-radius:999px;background:var(--brand-cream);color:var(--brand-brown);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onair .fcard__badge .icon{flex:none;width:1em;height:1em;color:var(--brand-orange)}
.onair .onair__link{flex:none;display:flex;align-items:center;gap:var(--space-4);min-width:0}
.onair .onair__logo{width:80px;height:80px;border-radius:16px;background:#fff}
.onair .onair__logo img{object-fit:contain;padding:6px}
.onair .onair__text{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1}
.onair .onair__name{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:clip;overflow-wrap:break-word;line-height:1.2}
.onair .fcard__place{display:flex;align-items:center;gap:.35rem;min-width:0;color:var(--muted);font-size:var(--step--1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onair .fcard__place .icon{flex:none;width:1em;height:1em}
.onair .fcard__genres{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.onair .fcard__genres li{padding:.2rem .65rem;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:.78rem;white-space:nowrap}
.onair .onair__np{margin:0;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.4}
.onair .onair__np[hidden]{display:none}
.onair .fcard__foot{margin-top:auto;padding-top:var(--space-2)}
.onair .onair__item .play-btn{width:100%;height:auto;min-height:48px;justify-content:center;white-space:nowrap}
.onair.is-static .onair__item{flex:1 1 280px}
@media (max-width:1024px){.onair .onair__item{flex-basis:clamp(280px,44%,360px)}}
@media (max-width:560px){.onair .onair__item{flex-basis:86%}.onair .onair__logo{width:72px;height:72px}}

/* (4)+(6) FREE. ALWAYS. section: search box + icon cards */
.hm-intro__head{max-width:46rem}
.hm-intro .hm-intro__eyebrow{font-size:.85rem}
.hm-intro h2{font-size:clamp(2rem,4.6vw,3.25rem);margin-bottom:var(--space-5)}
.hm-search{margin:var(--inner-gap) 0 0;max-width:52rem}
.hm-search__label{display:block;margin:0 0 var(--space-3);font-family:var(--font-display,inherit);font-weight:800;font-size:var(--step-1);color:var(--ink)}
.hm-search__row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hm-search__box{flex:1 1 320px;display:flex;align-items:center;gap:.75rem;min-height:60px;padding:0 1.15rem;border:2px solid var(--line-strong,var(--line));border-radius:999px;background:var(--surface,#fff);box-shadow:var(--card-shadow)}
.hm-search__box:focus-within{border-color:var(--brand-orange)}
.hm-search__box svg{flex:none;color:var(--muted)}
.hm-search__box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:1.05rem;color:var(--ink);padding:.9rem 0}
.hm-search__btn{min-height:60px;padding-inline:2rem;border-radius:999px;white-space:nowrap}
@media (max-width:560px){.hm-search__btn{width:100%}}
.hm-intro .hm-intro__points{margin:var(--inner-gap) 0 0;padding:0;border-top:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.hm-card{display:flex;flex-direction:column;gap:var(--space-3);padding:clamp(1.5rem,3vw,2.25rem);border-radius:24px;background:var(--surface,#fff);border:1px solid var(--line-soft,var(--line));box-shadow:var(--card-shadow)}
.hm-card__icon{display:grid;place-items:center;width:72px;height:72px;margin-bottom:var(--space-2);border-radius:20px;background:var(--brand-cream);color:var(--brand-brown)}
.hm-card__icon svg{width:40px;height:40px}
.hm-intro .hm-card strong{margin:0;font-size:var(--step-2,1.35rem)}
.hm-intro .hm-intro__more{margin-top:var(--inner-gap)}
@media (max-width:1024px){.hm-intro .hm-intro__points{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hm-intro .hm-intro__points{grid-template-columns:1fr;gap:var(--space-5)}}

/* (5) continent pages: country grid above the station list */
.intl--continent{margin:var(--space-6) 0 var(--space-7)}

/* ---- Phone header + menu (<=640px). Desktop header untouched: everything below is hidden above 640px. ---- */
.mnav-bar,.mnav{display:none}
@media (max-width:640px){
  .site-header .site-header__inner{flex-wrap:nowrap;align-items:center;gap:.5rem;padding:.6rem max(0px,env(safe-area-inset-right,0px)) .6rem max(0px,env(safe-area-inset-left,0px))}
  .site-header .site-nav,.site-header .header-search{display:none}
  .site-header .brand{flex:0 0 auto;padding:.25rem}
  .site-header .wordmark-img--sm{height:34px;width:auto;max-width:none;object-fit:contain}
  .mnav-btn--menu{padding:0 .8rem}
  .mnav-bar{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:0 0 auto}
  .mnav-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-width:48px;height:48px;padding:0 .9rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 1px 2px rgba(17,24,39,.05);-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,border-color .15s ease}
  .mnav-btn--search{padding:0;width:48px}
  .mnav-btn--menu{background:var(--primary);border-color:var(--primary);color:var(--primary-ink,#fff)}
  .mnav-btn:active{transform:scale(.97)}
  .mnav-btn--search:hover{background:var(--primary-soft)}
  .mnav-btn:focus-visible{outline:3px solid var(--brand-orange);outline-offset:2px}

  .mnav{display:block;position:fixed;inset:0;z-index:95}
  .mnav[hidden]{display:none}
  .mnav__backdrop{position:absolute;inset:0;background:rgba(30,22,51,.45);opacity:0;transition:opacity .28s ease}
  .mnav__panel{position:absolute;top:0;right:0;bottom:0;width:100%;display:flex;flex-direction:column;background:var(--surface);transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);box-shadow:-12px 0 40px rgba(30,22,51,.18)}
  .mnav.is-open .mnav__backdrop{opacity:1}
  .mnav.is-open .mnav__panel{transform:none}
  .mnav__top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .9rem;border-bottom:1px solid var(--line)}
  .mnav__brand{display:inline-flex;min-width:0;padding:.25rem;border-radius:8px}
  .mnav__brand .wordmark-img{height:40px;width:auto;max-width:100%;object-fit:contain;display:block}
  .mnav__close{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;flex:0 0 auto}
  .mnav__close:hover{background:var(--primary-soft)}
  .mnav__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
  .mnav__search{display:flex;gap:.5rem;margin:0 0 1.25rem}
  .mnav__search-box{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem;height:52px;padding:0 1rem;border:1.5px solid var(--line-strong,var(--line));border-radius:999px;background:var(--surface);color:var(--muted,#6b6480)}
  .mnav__search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
  .mnav__search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:1.0625rem;color:var(--ink);padding:0;height:100%;box-shadow:none}
  .mnav__go{height:52px;width:52px;min-width:52px;border-radius:999px;padding:0;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
  .mnav svg{width:24px;height:24px;flex:0 0 auto}
  .mnav-btn svg{width:22px;height:22px;flex:0 0 auto}
  .mnav .mnav__chev svg{width:20px;height:20px}
  .mnav .mnav__h-ico svg{width:18px;height:18px}
  .mnav__list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
  .mnav__item{display:flex;align-items:center;gap:.9rem;min-height:60px;padding:.55rem .75rem .55rem .55rem;border-radius:18px;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.0625rem;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease}
  .mnav__item:hover,.mnav__item:active{background:var(--primary-soft)}
  .mnav__ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--primary-soft);color:var(--primary);flex:0 0 auto}
  .mnav__label{flex:1;min-width:0}
  .mnav__chev{display:inline-flex;color:var(--muted,#6b6480);opacity:.7}
  .mnav__chev svg{width:20px;height:20px}
  .mnav__item[aria-current=page]{background:var(--primary);color:var(--primary-ink,#fff);box-shadow:0 6px 18px rgba(91,33,182,.25)}
  .mnav__item[aria-current=page] .mnav__ico{background:rgba(255,255,255,.18);color:#fff}
  .mnav__item[aria-current=page] .mnav__chev{color:#fff;opacity:1}
  .mnav__h{display:flex;align-items:center;gap:.5rem;margin:1.75rem .25rem .75rem;font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b6480)}
  .mnav__h-ico svg{width:18px;height:18px;display:block}
  .mnav__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .mnav__cont{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:.6rem .9rem;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:0 2px 10px rgba(30,22,51,.05)}
  .mnav__cont:hover,.mnav__cont:active{border-color:var(--primary);background:var(--primary-soft)}
  .mnav__cont-name{font-weight:700;font-size:1rem;line-height:1.25}
  .mnav__cont-n{font-size:.8125rem;color:var(--muted,#6b6480);margin-top:.15rem}
  .mnav__cont[aria-current=page]{background:var(--primary);border-color:var(--primary);color:#fff}
  .mnav__cont[aria-current=page] .mnav__cont-n{color:rgba(255,255,255,.85)}
  .mnav__foot{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line)}
  .mnav__item--soft .mnav__ico{background:#fff3e0;color:var(--brand-brown)}
  .mnav a:focus-visible,.mnav button:focus-visible{outline:3px solid var(--brand-orange);outline-offset:2px}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .mnav__panel,.mnav__backdrop,.mnav-btn{transition:none}
}

/* ===== RADIO JOX Featured card (2026-10-31, Bob's mockup, enhanced): templates/partials/featured_card.php + js/fcard.js =====
   Border / dark header strip (gold star, ON AIR pulse) / logo stage tinted by the logo's dominant hue (LogoTint buckets,
   neutral fallback) / name (wraps, never truncated) / full place / orange pills / now playing / big Listen Live button. */
.fc{--fc-glow:#b8b2aa;--fc-gold:#f5c542;--fc-dark:#16120f;position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;border:1px solid var(--line-soft,var(--line));border-radius:24px;background:var(--surface);box-shadow:0 1px 2px rgba(17,24,39,.05),0 10px 28px rgba(17,24,39,.07);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;text-align:center}
.fc:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(17,24,39,.06),0 20px 44px rgba(17,24,39,.14)}
.fc:has(.fc__listen.is-playing){border-color:var(--brand-orange);box-shadow:0 0 0 2px rgba(255,146,0,.28),0 16px 36px rgba(255,146,0,.18)}
[data-fc-tint="red"]{--fc-glow:#e5484d}[data-fc-tint="orange"]{--fc-glow:#ff9200}[data-fc-tint="amber"]{--fc-glow:#f5a524}[data-fc-tint="yellow"]{--fc-glow:#f2c94c}
[data-fc-tint="lime"]{--fc-glow:#94c11f}[data-fc-tint="green"]{--fc-glow:#30a46c}[data-fc-tint="teal"]{--fc-glow:#12a594}[data-fc-tint="cyan"]{--fc-glow:#05a2c2}
[data-fc-tint="blue"]{--fc-glow:#3e63dd}[data-fc-tint="indigo"]{--fc-glow:#5b5bd6}[data-fc-tint="purple"]{--fc-glow:#8e4ec6}[data-fc-tint="pink"]{--fc-glow:#d6409f}
.fc__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem .75rem;padding:.75rem 1.15rem .8rem;background:linear-gradient(90deg,var(--fc-gold),var(--brand-orange)) left bottom/100% 2px no-repeat,var(--fc-dark);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.12em;line-height:1.3;text-transform:uppercase}
.fc__badge{display:inline-flex;align-items:center;gap:.5rem;min-width:0;text-align:left}
.fc__star{flex:none;width:18px;height:18px;color:var(--fc-gold);filter:drop-shadow(0 0 6px rgba(245,197,66,.5))}
.fc__live{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;color:rgba(255,255,255,.82);font-size:.66rem}
.fc__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--live,#ef4444);animation:fc-pulse 1.8s ease-out infinite}
@keyframes fc-pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.fc__stage{position:relative;display:flex;align-items:center;justify-content:center;margin:1rem 1rem 0;padding:2.5rem .75rem 1.75rem;border-radius:18px;background-color:var(--surface-2);background-image:radial-gradient(110% 95% at 50% 0%,color-mix(in srgb,var(--fc-glow) 30%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--fc-glow) 9%,var(--surface-2)),var(--surface-2))}
.fc__logo{display:flex;align-items:center;justify-content:center;width:100%;height:150px;border-radius:14px}
.fc__logo .rj-pic{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.fc .fc__img{display:block;width:90%;max-width:90%;height:150px;max-height:150px;object-fit:contain;object-position:center;border-radius:14px;filter:drop-shadow(0 6px 14px rgba(17,24,39,.10))}
.fc__corner{position:absolute;top:.6rem;z-index:1}.fc__corner--l{left:.6rem}.fc__corner--r{right:.6rem}
.fc .fav-btn--fc,.fc .share-btn--fc{display:inline-grid;place-items:center;width:40px;height:40px;min-height:40px;min-width:40px;padding:0;gap:0;border:1px solid rgba(17,24,39,.08);border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .15s ease,background .15s ease}
.fc .fav-btn--fc{color:var(--heart)}
.fc .fav-btn--fc:hover,.fc .share-btn--fc:hover{transform:scale(1.06);background:#fff}
.fc .fav-btn--fc .icon,.fc .share-btn--fc .icon{width:20px;height:20px}
.fc .share-btn--fc .share-btn__label{display:none}
.fc__body{display:flex;flex-direction:column;align-items:center;gap:.65rem;padding:1.5rem 1.35rem 0;min-width:0}
.fc__name{display:flex;align-items:center;justify-content:center;min-height:2.4em;max-width:100%;margin:0;font-family:var(--font-display);font-size:clamp(1.2rem,1.05rem + .45vw,1.45rem);font-weight:800;line-height:1.2;color:var(--ink);overflow-wrap:anywhere;hyphens:auto;white-space:normal}
.fc__name a{color:inherit;text-decoration:none}.fc__name a:hover{text-decoration:underline;text-underline-offset:3px}
.fc__place{display:flex;align-items:center;justify-content:center;gap:.35rem;max-width:100%;margin:0;color:var(--muted);font-size:.95rem;line-height:1.35}
.fc__place .icon{flex:none;width:16px;height:16px;color:var(--brand-orange)}
.fc__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:.1rem 0 0;padding:0;list-style:none}
.fc__tags li{padding:.3rem .85rem;border:1px solid rgba(255,146,0,.45);border-radius:999px;background:rgba(255,146,0,.13);color:#8a3b00;font-size:.78rem;font-weight:700;line-height:1.2;white-space:nowrap}
.fc__np{display:flex;align-items:center;gap:.55rem;width:100%;min-width:0;margin:.35rem 0 0;padding:.55rem .8rem;border-radius:14px;background:var(--surface-2);color:var(--ink);font-size:.88rem;line-height:1.3}
.fc__np[hidden],.fc__art[hidden]{display:none}
.fc__art{flex:none;width:34px;height:34px;border-radius:8px;object-fit:contain;background:#fff}
.fc__eq{flex:none;display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.fc__eq i{display:block;width:3px;height:100%;border-radius:2px;background:var(--brand-orange);transform-origin:bottom;animation:fc-eq 1.1s ease-in-out infinite}
.fc__eq i:nth-child(2){animation-delay:-.35s}.fc__eq i:nth-child(3){animation-delay:-.7s}.fc__eq i:nth-child(4){animation-delay:-.2s}
@keyframes fc-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.fc__note{flex:none;color:var(--brand-orange);font-weight:800}
.fc__song{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;font-weight:600}
.fc__song .rj-mq{display:inline}
.fc__song.is-scroll{text-overflow:clip}
.fc__song.is-scroll .rj-mq{display:inline-block;will-change:transform;animation:rj-np-scroll var(--rj-dur,8s) ease-in-out 2}
.fc__foot{margin-top:auto;padding:1.35rem 1.25rem 1.25rem}
.fc .play-btn.fc__listen{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;height:auto;min-height:60px;padding:.75rem 1.25rem;border:0;border-radius:16px;background:var(--brand-orange);color:#1f0d00;font:inherit;font-size:1.12rem;font-weight:800;line-height:1.2;white-space:normal;box-shadow:0 8px 18px rgba(255,146,0,.32);cursor:pointer;transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.fc .play-btn.fc__listen:hover{background:var(--brand-orange-hover);transform:translateY(-1px)}
.fc .play-btn.fc__listen:focus-visible{outline:none;box-shadow:var(--ring),0 8px 18px rgba(255,146,0,.32)}
.fc .play-btn.fc__listen:disabled{opacity:.5;cursor:not-allowed;transform:none}
.fc__ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#1f0d00;color:var(--brand-orange)}
.fc__ico svg{display:block;width:22px;height:22px}
.fc__ico--pause,.fc__btn-text--on{display:none}
.fc .fc__listen.is-playing{background:var(--fc-dark);color:#fff;box-shadow:0 8px 18px rgba(17,24,39,.25)}
.fc .fc__listen.is-playing:hover{background:#2a2420}
.fc .fc__listen.is-playing .fc__ico{background:var(--brand-orange);color:#1f0d00}
.fc .fc__listen.is-playing .fc__ico--play,.fc .fc__listen.is-playing .fc__btn-text--play{display:none}
.fc .fc__listen.is-playing .fc__ico--pause{display:grid}.fc .fc__listen.is-playing .fc__btn-text--on{display:inline}
/* placements */
.onair .onair__track{padding-top:.75rem;padding-bottom:1.75rem}
.onair .onair__item.fc{flex:0 0 clamp(290px,31%,370px);display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border-radius:24px}
.onair .onair__item.fc{box-shadow:0 1px 2px rgba(17,24,39,.05),0 10px 28px rgba(17,24,39,.07);background:var(--surface)}
.onair .onair__item.fc:hover{box-shadow:0 2px 4px rgba(17,24,39,.06),0 20px 44px rgba(17,24,39,.14)}
.onair .onair__item.fc:has(.fc__listen.is-playing){border-color:var(--brand-orange);box-shadow:0 0 0 2px rgba(255,146,0,.28),0 16px 36px rgba(255,146,0,.18)}
.onair.is-static .onair__item.fc{flex:1 1 290px}
.fc--demo{max-width:420px;width:100%;margin-inline:auto}
@media (max-width:1024px){.onair .onair__item.fc{flex-basis:clamp(290px,44%,370px)}}
@media (max-width:560px){.onair .onair__item.fc{flex-basis:86%}.fc__logo,.fc .fc__img{height:130px;max-height:130px}.fc__body{padding-inline:1.1rem}}
@media (prefers-reduced-motion:reduce){.fc,.fc .play-btn.fc__listen{transition:none}.fc:hover{transform:none}.fc__dot,.fc__eq i{animation:none}.fc__eq i:nth-child(1){transform:scaleY(.5)}.fc__eq i:nth-child(3){transform:scaleY(.7)}.fc__eq i:nth-child(4){transform:scaleY(.4)}.fc__song.is-scroll{text-overflow:ellipsis}.fc__song.is-scroll .rj-mq{display:inline;animation:none}}

/* ---------- station page header redesign (2026-11-01) ----------
   Wide page (min(90vw,1600px) desktop, 95vw phone); a tall, airy header block; larger logo plate for Enhanced tiers only;
   cover shown at its own ratio (never cropped or stretched); Now playing centred at the bottom (92% wide), hidden until a
   song is known, its line scrolls twice then stops (player.js autoMarquee). VERIFIED pill. */
.page.station{width:min(90vw,1600px);max-width:none;margin-left:calc(50% - min(45vw,800px))}
.sh{position:relative;overflow:hidden;margin:var(--space-6,2rem) 0 var(--space-8,4.5rem);border-radius:28px;background:var(--hero-glow,none),var(--surface-2,#faf7f2);border:1px solid var(--line);color:var(--ink)}
.sh--enh{background:var(--enh-band,#592100);color:var(--enh-text,#fff);border:0;border-bottom:6px solid var(--enh-accent,#ffd300);box-shadow:var(--shadow-md)}
.sh__cover{display:block;margin:0;background:rgb(0 0 0 / .08)}
.sh__cover img{display:block;width:100%;height:auto}
.sh__cover:not(.sh__cover--native){aspect-ratio:16/5}
.sh__cover:not(.sh__cover--native) img{height:100%;object-fit:cover}
.sh__img{display:block;width:160px;height:160px;object-fit:contain;border-radius:24px;background:var(--surface,#fff);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.sh--enh .sh__img{width:260px;height:260px;border:4px solid var(--enh-accent,#ffd300);border-radius:30px;background:#fff;box-shadow:0 12px 32px rgb(0 0 0 / .25)}
.sh--enh .sh__img--wide{width:min(520px,100%);height:auto;max-height:300px;object-fit:contain;border-radius:22px}
.sh__img--plate{background:#fff;padding:16px}
.sh__badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.65rem}
.sh--enh .badge--featured{background:var(--enh-accent,#ffd300);color:var(--enh-accent-text,#111);font-size:.95rem;padding:.4rem .9rem}
.sh h1{font-size:clamp(2.1rem,4.6vw,3.8rem);font-weight:800;line-height:1.05;overflow-wrap:anywhere;color:inherit}
.sh__place{font-size:clamp(1.05rem,1.6vw,1.3rem);margin:0;color:inherit;opacity:.88}
.sh__place .icon,.sh__place svg{width:1.05em;height:1.05em;vertical-align:-.15em;margin-right:.35rem}
.sh__pinned{padding:.85rem 1.1rem;border-radius:14px;background:rgb(255 255 255 / .9);color:var(--ink);max-width:44rem}
.sh__pinned-k{font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-right:.4rem}
.sh--enh a:not(.btn){color:inherit}
.sh--enh .play-btn,.sh--enh .btn--primary{border-color:var(--enh-accent,#ffd300)}
.np[hidden]{display:none!important}
.np--head{max-width:none;width:100%;margin:0;min-height:76px;padding:.8rem 1.4rem .8rem .8rem;gap:1.1rem;border-radius:20px;background:rgb(255 255 255 / .96);color:var(--ink);border:1px solid rgb(0 0 0 / .06);box-shadow:0 10px 30px rgb(0 0 0 / .14)}
.np--head .np__art{width:56px;height:56px;border-radius:12px}
.np--head .np__text{text-align:center;min-width:0;flex:1}
.np--head .np__label{margin:0 0 .2rem}
.np__song{margin:0;font-weight:700;font-size:clamp(1rem,1.5vw,1.2rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np__song .rj-mq{display:inline}
.np__song.is-scroll{text-overflow:clip;text-align:left}
.np__song.is-scroll .rj-mq{display:inline-block;will-change:transform;animation:rj-np-scroll var(--rj-dur,8s) ease-in-out 2}
@media (prefers-reduced-motion:reduce){.np__song.is-scroll{text-overflow:ellipsis}.np__song.is-scroll .rj-mq{display:inline;animation:none}}
/* VERIFIED pill: blue check + word, outlined */
.vpill{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .85rem .28rem .32rem;border:2px solid #1d6fe0;border-radius:999px;background:#fff;color:#0b3d91;font-size:.82rem;font-weight:800;letter-spacing:.09em;line-height:1.2}
.vpill__check{display:inline-flex;align-items:center;justify-content:center;width:1.55em;height:1.55em;border-radius:50%;background:#1d6fe0;color:#fff;flex:none}
.vpill__check svg,.vpill__check .icon{width:1.05em;height:1.05em;fill:currentColor}
/* showcase slots (Enhanced Featured) */
.shx{margin:0 0 var(--space-8,4.5rem)}
.shx h2{margin:0 0 var(--space-5,1.5rem)}
.shx__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-5,1.5rem)}
.shx__tile{padding:1.5rem 1.6rem;border-radius:20px;background:var(--surface-2,#faf7f2);border:1px solid var(--line)}
.shx__tile h3{margin:0 0 .5rem;font-size:1.05rem}
.shx__empty{margin:0;color:var(--muted)}
.shx__sched{margin:0;display:grid;gap:.5rem}.shx__sched div{display:flex;gap:1rem;justify-content:space-between}.shx__sched dd{margin:0;font-weight:700}
.shx__photos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.shx__photos img{display:block;width:100%;height:auto;border-radius:12px}
@media (max-width:640px){
  .page.station{width:95vw;margin-left:calc(50% - 47.5vw)}
  .sh{border-radius:22px;margin-top:1.25rem}
  .np--head{padding:.65rem .9rem .65rem .65rem;gap:.75rem;min-height:68px}
  .np--head .np__art{width:48px;height:48px}
}

/* ---------- station page header: standing spacing rule (2026-11-01, Bob) ----------
   One centred column on every station page. Each row owns the gap ABOVE it, so a missing row (no badges, no website,
   Now playing hidden) takes its gap with it: never a double gap. Desktop px values; tablet x0.75, phone x0.4. */
.sh{--sh-k:1;--sh-top:66px;--sh-g-badges:112.5px;--sh-g-name:150px;--sh-g-place:112.5px;--sh-g-pinned:36px;--sh-g-actions:150px;--sh-g-more:42px;--sh-g-links:30px;--sh-g-np:150px;--sh-g-end:150px;--sh-btn-gap:30px} /* 2026-11-01 15:33 Bob: all gaps x0.75 of the first spacing rule */
.sh__body{display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--sh-top) * var(--sh-k)) clamp(1.25rem,5vw,5.5rem) 0}
.sh__body>*{margin:0;max-width:100%}
.sh__logo{display:flex;justify-content:center}
.sh__body>.sh__badges{margin-top:calc(var(--sh-g-badges) * var(--sh-k))}
.sh__body>.sh__name{margin-top:calc(var(--sh-g-name) * var(--sh-k))}
.sh__body>.sh__place{margin-top:calc(var(--sh-g-place) * var(--sh-k))}
.sh__body>.sh__pinned{margin-top:calc(var(--sh-g-pinned) * var(--sh-k))}
.sh__body>.sh__actions{margin-top:calc(var(--sh-g-actions) * var(--sh-k))}
.sh__body>.sh__more{margin-top:max(24px,calc(var(--sh-g-more) * var(--sh-k)))}
.sh__body>.sh__links{margin-top:max(20px,calc(var(--sh-g-links) * var(--sh-k)))}
.sh__actions,.sh__more{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.sh__actions{gap:1rem 1.25rem}
.sh__more{gap:1rem max(32px,calc(var(--sh-btn-gap) * var(--sh-k)));align-items:stretch}
.sh__links{justify-content:center}
.sh__np{width:92%;margin:calc(var(--sh-g-np) * var(--sh-k)) auto 0}
.sh__np:has(>.np[hidden]){display:none}
.sh::after{content:"";display:block;height:calc(var(--sh-g-end) * var(--sh-k))}
@media (max-width:1100px){.sh{--sh-k:.75}}
@media (max-width:640px){
  .sh{--sh-k:.4}
  .sh--enh .sh__img{width:200px;height:200px}
  .sh--enh .sh__img--wide{width:min(340px,100%);height:auto}
  .sh__actions{gap:.75rem .85rem}
  .sh__more{flex-wrap:nowrap;width:100%;max-width:26rem}
  .sh__more .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;white-space:normal;font-size:.95rem;padding:.6rem .7rem;gap:.35rem}
}