/* ==========================================================================
   Radio Dad — directory (SEO) pages: country & genre landing pages.
   Lightweight, crawlable, brand-consistent (tokens from the app). No JS app
   weight here — these are fast static content pages that funnel into /player.
   ========================================================================== */
@font-face { font-family:"Fraunces"; src:url("/assets/fonts/Fraunces.ttf") format("truetype-variations"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/InterVariable.ttf") format("truetype-variations"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("/assets/fonts/JetBrainsMono.ttf") format("truetype"); font-weight:400; font-display:swap; }

:root {
  --paper:#F5F1EA; --linen:#FBF7F0; --shell:#FFFDF8; --ink:#1F1D1A; --smoke:#6E6962;
  --ember:#D9684A; --ember-2:#C2563A; --lantern:#E8804A; --sand:#E8E2DA; --on-ember:#FFF8F2;
  --ember-wash:rgba(217,104,74,.08); --shadow:rgba(31,29,26,.10);
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark) {
  :root { --paper:#1A1815; --linen:#252320; --shell:#33302C; --ink:#F0EBE4; --smoke:#9A938A;
    --ember:#E68864; --ember-2:#D6754F; --lantern:#F0995A; --sand:#3D3934; --on-ember:#1A1815;
    --ember-wash:rgba(230,136,100,.10); --shadow:rgba(0,0,0,.45); }
}
* { box-sizing:border-box; margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { font-family:var(--sans); font-size:16px; line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
a { color:var(--ember); text-decoration:none; }
a:hover { text-decoration:underline; }
img { display:block; max-width:100%; }
.eyebrow { font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ember); }

/* header */
.dh { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:18px; height:60px;
  padding-inline:clamp(16px,4vw,32px); background:color-mix(in srgb,var(--paper) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--sand); }
.dh-brand { display:inline-flex; align-items:center; gap:.55em; font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--ink); }
.dh-brand img { width:30px; height:30px; border-radius:9px; }
.dh-nav { display:flex; gap:clamp(12px,2vw,24px); margin-inline:auto; }
.dh-nav a { color:var(--smoke); font-weight:500; font-size:.95rem; }
.dh-nav a:hover { color:var(--ember); text-decoration:none; }
.dh-cta { background:var(--ember); color:var(--on-ember); padding:.5em 1.1em; border-radius:999px; font-weight:600; font-size:.9rem; }
.dh-cta:hover { background:var(--ember-2); text-decoration:none; }
@media (max-width:720px){ .dh-nav { display:none; } }

/* main */
.dwrap { max-width:1060px; margin-inline:auto; padding:clamp(22px,4vw,40px) clamp(16px,4vw,32px) 64px; }
.crumb { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--smoke); margin-bottom:18px; }
.crumb a { color:var(--smoke); } .crumb a:hover { color:var(--ember); }
h1 { font-family:var(--serif); font-weight:600; font-size:clamp(2rem,5vw,3.1rem); line-height:1.05; letter-spacing:-.02em; margin-top:6px; }
.lead { font-size:1.1rem; color:var(--smoke); margin-top:14px; max-width:60ch; }
.lead b { color:var(--ink); font-weight:600; }
.dbtn { display:inline-flex; align-items:center; gap:.5em; margin-top:22px; background:var(--ember); color:var(--on-ember);
  padding:.8em 1.4em; border-radius:999px; font-weight:600; box-shadow:0 14px 30px -14px var(--ember); }
.dbtn:hover { background:var(--ember-2); text-decoration:none; transform:translateY(-1px); }

/* station grid */
h2 { font-family:var(--serif); font-weight:600; font-size:1.4rem; letter-spacing:-.01em; margin:40px 0 16px; }
.dgrid { list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.dc a { display:flex; flex-direction:column; gap:3px; padding:13px 15px; border:1px solid var(--sand); border-radius:12px;
  background:var(--linen); transition:border-color .18s, transform .15s, box-shadow .18s; }
.dc a:hover { border-color:var(--ember); transform:translateY(-2px); box-shadow:0 14px 28px -22px var(--shadow); text-decoration:none; }
.dc-name { font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-sub { font-family:var(--mono); font-size:.66rem; letter-spacing:.02em; color:var(--smoke); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* related chips */
.drel { margin-top:8px; }
.dchips { display:flex; flex-wrap:wrap; gap:8px; }
.dchips a { padding:.45em .9em; border:1px solid var(--sand); border-radius:999px; background:var(--linen); color:var(--ink); font-size:.88rem; font-weight:500; }
.dchips a:hover { border-color:var(--ember); color:var(--ember); text-decoration:none; }

/* browse index groups */
.dgroup { margin-top:34px; }
.dgroup .cnt { font-family:var(--mono); font-size:.62rem; color:var(--smoke); margin-left:.3em; }

/* footer */
.df { border-top:1px solid var(--sand); background:var(--linen); padding:34px clamp(16px,4vw,32px); margin-top:40px;
  font-size:.86rem; color:var(--smoke); display:grid; gap:6px; }
.df a { color:var(--smoke); text-decoration:underline; text-underline-offset:2px; }
.df a:hover { color:var(--ember); }

@media (prefers-reduced-motion:reduce){ * { transition:none !important; } html { scroll-behavior:auto; } }