@font-face{font-family:"Unbounded";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/unbounded-cyrillic-ext-wght-normal.f25c38d2.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Unbounded";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/unbounded-cyrillic-wght-normal.e30bf6a6.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/unbounded-vietnamese-wght-normal.aa6b9cba.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Unbounded";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/unbounded-latin-ext-wght-normal.845e1c9f.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:"Unbounded";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/unbounded-latin-wght-normal.22f9b928.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:"Instrument Sans";font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/fonts/instrument-sans-latin-ext-wght-normal.c4fcfea4.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:"Instrument Sans";font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/fonts/instrument-sans-latin-wght-normal.2ee17598.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}
:root{
  --dune:#B9825A; --peach:#EBC39B; --ink:#2B2119; --ink2:#6E6157;
  --sage:#EDEFD9; --live:#6F8F4E; --line:#E9E1D7; --tint:#F7F2ED;
  --sky-top:#C8B4A2; --sky-mid:#E6C19C; --sky-low:#F4DAB8;
  --sun:rgba(255,236,205,.95); --cloud:rgba(255,240,222,.55);
  --far-a:#D8B596; --far-b:#E7CDB2; --peak-a:#B98864; --peak-b:#D7B08E;
  --dune-a:#C98B5A; --dune-b:#A46A43; --water-a:#E9D3BD; --water-b:#BFA590;
  --head:rgba(255,255,255,.92); --glass:rgba(128,84,52,.26); --glass-edge:rgba(255,255,255,.45);
  --wash:rgba(92,58,34,.34);
  --disp:"Unbounded","Helvetica Neue",Arial,system-ui,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-frame:34px; --r-sky:26px; --r-card:20px;
}
@media (prefers-color-scheme:dark){:root:not([data-sky="dusk"]){
  --sky-top:#1F2336; --sky-mid:#3A3550; --sky-low:#6B5566;
  --sun:rgba(236,222,255,.55); --cloud:rgba(170,160,205,.22);
  --far-a:#3B3650; --far-b:#4A4260; --peak-a:#2A2740; --peak-b:#3C3552;
  --dune-a:#4B3A47; --dune-b:#2F2533; --water-a:#4E4763; --water-b:#2A2538;
  --head:rgba(244,238,255,.9); --glass:rgba(60,54,84,.36); --glass-edge:rgba(255,255,255,.22);
  --wash:rgba(20,16,40,.38);
  --gate-btn:#fff; --gate-btn-ink:#2B2119;}}
:root[data-sky="night"]{
  --sky-top:#1F2336; --sky-mid:#3A3550; --sky-low:#6B5566;
  --sun:rgba(236,222,255,.55); --cloud:rgba(170,160,205,.22);
  --far-a:#3B3650; --far-b:#4A4260; --peak-a:#2A2740; --peak-b:#3C3552;
  --dune-a:#4B3A47; --dune-b:#2F2533; --water-a:#4E4763; --water-b:#2A2538;
  --head:rgba(244,238,255,.9); --glass:rgba(60,54,84,.36); --glass-edge:rgba(255,255,255,.22);
  --wash:rgba(20,16,40,.38);
  --gate-btn:#fff; --gate-btn-ink:#2B2119;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:linear-gradient(180deg,#E6DED6 0%,#EBDCCB 55%,#F1D9BC 100%);
  color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.sky :focus-visible,.topbar :focus-visible{outline-color:#fff}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- the language suggestion bar, above the frame ---------------------- */
.langbar{padding:11px 22px;font-size:14px;color:var(--ink2);
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.langbar a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.langbar button{color:var(--ink2);text-decoration:underline;text-underline-offset:3px}

/* --- frame --------------------------------------------------------------- */
.page{padding:40px 24px 64px}
.frame{position:relative;max-width:1240px;margin:0 auto;background:#fff;border-radius:var(--r-frame);
  padding:12px;box-shadow:0 0 0 6px rgba(255,255,255,.55),0 40px 80px -40px rgba(120,80,40,.35)}

/* --- the bar --------------------------------------------------------------
   Laid over the top of whichever sky opens the page rather than inside it, so
   the layout owns the bar and every page owns its own sky. Named topbar
   because .bar is the chart row's bar. */
.topbar{position:absolute;z-index:8;top:12px;inset-inline:12px;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:10px;padding:22px 24px 0}
.bar-l,.bar-r{display:flex;gap:8px;align-items:center;min-width:0}
.bar-r{justify-content:flex-end}
.pill{display:inline-flex;align-items:center;gap:10px;height:34px;padding-inline:12px 4px;border-radius:999px;
  background:#fff;color:var(--ink);font-size:14px;white-space:nowrap}
.pill .go{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff}
.pill .go svg{width:8px;height:10px}
[dir="rtl"] .pill .go svg{transform:scaleX(-1)}
.pill.on{background:var(--ink);color:#fff}
.pill.on .go{background:#fff;color:var(--ink)}
.mark{display:inline-flex;align-items:center;gap:10px;color:#fff;justify-self:center}
.mark .glyph{width:40px;height:34px;flex:none;fill:currentColor}
.mark .wm{display:flex;flex-direction:column;gap:4px;line-height:1}
.mark .wordmark{font:400 13px/1 var(--disp);letter-spacing:.02em}
.mark .tagline{font-size:10.5px;opacity:.86;white-space:nowrap}
.skyswitch{display:inline-flex;padding:4px;gap:2px;border-radius:999px;background:#fff}
.skyswitch[hidden]{display:none}
.skyswitch button{width:30px;height:26px;display:grid;place-items:center;border-radius:999px;color:var(--ink)}
.skyswitch button[aria-pressed="true"]{background:var(--ink);color:#fff}
.skyswitch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.duo{display:inline-flex;border-radius:999px;background:rgba(120,84,58,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.duo a{height:34px;display:inline-flex;align-items:center;padding:0 14px;font-size:14px;border-radius:999px;color:#fff;white-space:nowrap}
.duo a:last-child{background:#fff;color:var(--ink)}
.duo a.on{text-decoration:underline;text-underline-offset:4px}
.duo .find .ic{display:none}

/* The menu and the language picker are both <details>, so they open and
   close with no script at all; the script only adds closing on an outside
   click. */
.navpick,.langpick{position:relative;flex:none}
.navpick>summary,.langpick>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:14px;white-space:nowrap}
.navpick>summary::-webkit-details-marker,.langpick>summary::-webkit-details-marker{display:none}
.navpick>summary{width:42px;padding:0}
.navpick>summary svg{width:20px;height:12px}
.navmenu,.langmenu{position:absolute;z-index:40;top:calc(100% + 10px);background:#fff;color:var(--ink);border-radius:20px;
  padding:8px;box-shadow:0 24px 50px -20px rgba(70,40,20,.45)}
.navmenu{inset-inline-start:0;width:260px;display:grid}
.navmenu a{display:block;padding:10px 14px;border-radius:12px;font-size:15px}
.navmenu a:hover,.navmenu a.on{background:var(--tint)}
.langmenu{inset-inline-end:0;width:min(420px,78vw);max-height:60vh;overflow:auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:2px}
.langmenu a,.langmenu .on{display:block;padding:7px 10px;border-radius:10px;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langmenu a:hover{background:var(--tint)}
.langmenu .on{color:var(--dune);font-weight:600}

/* --- the sky ---------------------------------------------------------------- */
.sky{position:relative;border-radius:var(--r-sky);overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(60% 38% at 62% 58%,var(--sun) 0%,transparent 70%),
    linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 42%,var(--sky-low) 62%,var(--sky-low) 100%)}
.sky.has-panel{border-end-end-radius:0}
.sky-clouds,.landscape,.grain{position:absolute;inset:0;pointer-events:none}
.sky-clouds{z-index:-2;filter:blur(6px);
  background:radial-gradient(34% 7% at 22% 14%,var(--cloud),transparent 70%),
    radial-gradient(40% 6% at 70% 9%,var(--cloud),transparent 70%),
    radial-gradient(28% 5% at 48% 26%,var(--cloud),transparent 70%),
    radial-gradient(46% 8% at 84% 30%,var(--cloud),transparent 72%),
    radial-gradient(30% 6% at 12% 36%,var(--cloud),transparent 70%)}
.landscape{z-index:-1;width:100%;height:100%}
.lg-far .s0{stop-color:var(--far-b)} .lg-far .s1{stop-color:var(--far-a)}
.lg-peak .s0{stop-color:var(--peak-a)} .lg-peak .s1{stop-color:var(--peak-b)}
.lg-dune .s0{stop-color:var(--dune-a)} .lg-dune .s1{stop-color:var(--dune-b)}
.lg-water .s0{stop-color:var(--water-a)} .lg-water .s1{stop-color:var(--water-b)}
.grain{z-index:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.glass{background:var(--glass);border:1px solid var(--glass-edge);color:#fff;
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  text-shadow:0 1px 8px rgba(80,45,20,.35)}

/* The white panel that bites into a sky's lower inline-end corner. The two
   pseudo-elements are concave corners, so the sky looks cut around the panel
   rather than covered by it; RTL mirrors them. */
.panel{position:absolute;z-index:4;inset-inline-end:0;bottom:0;width:var(--panel-w,40%);
  padding:18px 20px 20px;background:#fff;border-start-start-radius:var(--r-sky);color:var(--ink)}
.panel::before,.panel::after{content:"";position:absolute;width:var(--r-sky);height:var(--r-sky);
  background:radial-gradient(circle at 0 0,transparent calc(var(--r-sky) - .5px),#fff var(--r-sky))}
.panel::before{left:calc(var(--r-sky) * -1);bottom:0}
.panel::after{right:0;top:calc(var(--r-sky) * -1)}
[dir="rtl"] .panel::before,[dir="rtl"] .panel::after{
  background:radial-gradient(circle at 100% 0,transparent calc(var(--r-sky) - .5px),#fff var(--r-sky))}
[dir="rtl"] .panel::before{left:auto;right:calc(var(--r-sky) * -1)}
[dir="rtl"] .panel::after{right:auto;left:0}
.panel h2,.plabel{margin:0 0 12px;font:500 14px/1.3 var(--body);color:var(--ink2)}

/* --- a page's own sky header ------------------------------------------------- */
.phead{min-height:420px;padding-bottom:40px}
/* A warm wash behind the title side, so white text stays readable over pale sand. */
.phead::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--wash) 0%,transparent 62%)}
[dir="rtl"] .phead::before{background:linear-gradient(270deg,var(--wash) 0%,transparent 62%)}
.phead-body{position:relative;z-index:2;max-width:56%;padding:118px 32px 0}
.phead:not(.has-panel) .phead-body{max-width:780px}
.phead h1{margin:18px 0 0;font:300 clamp(32px,4.4vw,60px)/1.05 var(--disp);letter-spacing:-.02em;
  color:var(--head);text-shadow:0 2px 30px rgba(140,90,50,.22);overflow-wrap:anywhere}
/* A page title with a tile beside it: a station page with a logo. */
.ptitle{display:flex;align-items:center;gap:16px;margin:18px 0 0}
.ptitle h1{margin:0;min-width:0}
.ptitle .av{width:64px;height:64px;flex:none;border-radius:16px}
/* An artist's photo (src/artist-photos/): round, bigger than a logo, and the
   licence's credit line under the title. */
.ptitle .av.photo{width:96px;height:96px;border-radius:50%}
.av.photo{background:#fff;overflow:hidden;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.av.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo-credit{margin:10px 0 0;max-width:56ch;font-size:11.5px;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(80,45,20,.4)}
.photo-credit a{text-decoration:underline;text-underline-offset:2px}
.crumbs{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;min-height:30px;padding:4px 14px;
  border-radius:999px;font-size:13px}
.crumbs a{opacity:.88}
.crumbs a:hover{opacity:1;text-decoration:underline}
.plede{margin:16px 0 0;max-width:56ch;font-size:16px;color:rgba(255,255,255,.95);text-shadow:0 1px 10px rgba(80,45,20,.4)}
.plede a{text-decoration:underline;text-underline-offset:3px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
/* A floor, not a height: station tags come from the AI profile, and a long one
   wraps on a phone and would spill out of a fixed-height pill. */
.tag{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;line-height:1.35;border-radius:999px;font-size:12.5px;
  background:var(--glass);border:1px solid var(--glass-edge);color:#fff;text-shadow:0 1px 8px rgba(80,45,20,.35);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
a.tag{text-decoration:none}
/* The glass pill is made for the sky. Out on the page (the genre lists) it
   would be white on white, so there it takes the chip's look. */
.sect .tag{background:var(--tint);border-color:transparent;color:var(--ink);text-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.sect .tags+h2{margin-top:44px}
a.tag:hover{text-decoration:underline;text-underline-offset:3px}
.tag.live::before{content:"";width:6px;height:6px;margin-inline-end:7px;border-radius:50%;background:#C9E4A8;
  box-shadow:0 0 0 3px rgba(201,228,168,.3)}
.phead .search{max-width:560px;margin-top:24px}

/* Figures in a header panel. The number is found inside the translated phrase
   and set in the display face; the words around it stay as translated. */
.nums{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:8px}
.nums>div{padding:14px 16px;border-radius:16px;background:var(--tint);font-size:12.5px;color:var(--ink2);line-height:1.35}
.nums b{display:block;margin-bottom:4px;font:300 24px/1.1 var(--disp);color:var(--ink);letter-spacing:-.01em}
.jump{display:grid;gap:8px;margin-top:14px}
.jump a{display:block;padding:12px 16px;border-radius:14px;background:var(--tint);font-size:14.5px}
.jump a:hover{background:#F1E9E0}

/* --- buttons --------------------------------------------------------------------- */
.act,.cta{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 20px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:14px;white-space:nowrap}
.cta{font-size:13px;letter-spacing:.06em;padding-inline:20px 6px}
.cta .go{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink)}
.cta .go svg{width:11px;height:12px;fill:currentColor}
[dir="rtl"] .cta .go svg{transform:scaleX(-1)}
.act:hover,.cta:hover{background:#433428}
.btn-line{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;
  border:1.5px solid var(--ink);font-size:15px;white-space:nowrap}
.btn-line:hover{background:var(--tint)}
.spot{display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:8px 20px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:15px}
.spot::before{content:"";width:30px;height:30px;border-radius:50%;flex:none;
  background:#1ED760 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5c4-1.3 8.5-1 12 1M7 13c3.3-1 6.8-.7 9.5.9M8 16.3c2.6-.7 5.2-.5 7.3.7' fill='none' stroke='%23191414' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
.spot:hover{background:#433428}
.listen-on{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;font-size:14px}
.listen-on a{text-decoration:underline;text-underline-offset:3px}
.listen-disclosure{margin:6px 0 0;font-size:12px;color:var(--ink2)}

/* --- forms: search, request --------------------------------------------------- */
.search{display:flex;gap:8px;padding:6px;border-radius:999px;background:#fff;box-shadow:0 14px 40px -20px rgba(80,45,20,.5)}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:0 16px;font:inherit;color:var(--ink);outline:none}
.search:focus-within{box-shadow:0 0 0 2px var(--ink),0 14px 40px -20px rgba(80,45,20,.5)}
.search button{height:42px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;white-space:nowrap}
.findbox{padding:22px;border-radius:24px;background:var(--tint)}
.findbox label{display:block;margin:0 0 10px;font-size:14px;font-weight:500}
.findbox input{display:block;width:100%;height:52px;border:0;border-radius:999px;background:#fff;padding:0 20px;
  font:inherit;color:var(--ink);outline:none;box-shadow:0 10px 30px -18px rgba(80,45,20,.45)}
.findbox input:focus{box-shadow:0 0 0 2px var(--ink)}
.contactform select,.contactform textarea{display:block;width:100%;border:0;border-radius:18px;background:#fff;padding:14px 20px;
  font:inherit;color:var(--ink);outline:none;box-shadow:0 10px 30px -18px rgba(80,45,20,.45);margin:0 0 14px}
.contactform select{height:52px;border-radius:999px;padding:0 20px}
.contactform textarea{min-height:180px;resize:vertical}
.contactform select:focus,.contactform textarea:focus{box-shadow:0 0 0 2px var(--ink)}
.contactform input{margin:0 0 14px}
.contactform .cf-turnstile{margin:4px 0 0}
.contactform .formerr{margin:0 0 14px;padding:12px 16px;border-radius:14px;background:#fff;color:#9B2C1F;font-weight:500}
.findbox .act{margin-top:14px}
.tip{margin:10px 0 0;font-size:13.5px;color:var(--ink2)}
.tip a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.hits{margin-top:14px;padding-top:6px;border-top:1px solid var(--line)}
.hitshead{margin:10px 0 2px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.hit{display:block;padding:10px 12px;border-radius:12px}
.hit:hover{background:#fff}
.hit b{display:block;font-weight:500;font-size:15px;line-height:1.3}
.hit span{font-size:13px;color:var(--ink2)}

/* --- sections -------------------------------------------------------------------- */
.sect{padding:64px 28px 12px}
.sect-head{display:grid;grid-template-columns:34% minmax(0,1fr);gap:40px;align-items:end;margin-bottom:28px}
.sect h2{margin:0;font:300 clamp(24px,2.8vw,36px)/1.14 var(--disp);letter-spacing:-.015em}
.lede{margin:0;max-width:60ch;color:var(--ink2);font-size:16px}
.sect>h2+*{margin-top:18px}
/* A section with no heading of its own, straight under the hero: the full
   .sect gap read as a hole above the song page's Spotify button. */
.sect.near{padding-top:16px}
.more{margin:22px 0 0;font-size:14px}
.more a{border-bottom:1.5px solid currentColor;padding-bottom:2px}
.more a+a{margin-inline-start:18px}
.empty{color:var(--ink2);font-size:15px;padding:18px 0;margin:0}
.variety{margin:0 0 12px;color:var(--ink2);font-size:14px}
/* A related station's card with its Compare link under it: two links side by side, never nested. */
.relcard{display:grid;gap:4px;min-width:0}
.relcard .cmp{justify-self:start;margin-inline-start:8px;font-size:13px;color:var(--ink2);border-bottom:1px solid currentColor}
.figs{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 12px;font-size:15px}
.figs dt{color:var(--ink2)}
.figs dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500}

/* --- filterable lists (ui/filter-list.ts) -------------------------------------------
   Every control arrives hidden and the script reveals it, so [hidden] must win
   over each control's own display, and over a row's (a chart row is a grid). */
.flist-boxed.ready .flist-tools{margin:0 0 18px;padding:18px 20px 16px;border:1px solid #E6DAC9;border-radius:16px;background:#FAF6EF}
.flist-bar{margin:0 0 12px}
.flist-label{display:block;margin:0 0 8px;font-size:13px;color:var(--ink2)}
.flist-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.flist-field{position:relative;flex:1 1 260px;min-width:0}
.flist-field svg{position:absolute;inset-inline-start:15px;top:50%;width:16px;height:16px;margin-top:-8px;fill:none;stroke:var(--ink2);
  stroke-width:1.6;pointer-events:none}
.flist-field input{display:block;width:100%;height:46px;padding-block:0;padding-inline:40px 15px;border:1px solid #E2D5C3;border-radius:11px;
  background:#FFFDF9;font:inherit;font-size:16px;color:var(--ink)}
.flist-count{padding:6px 12px;border-radius:999px;background:#ECE3D6;font-size:12px;color:var(--ink2);white-space:nowrap}
.flist-count:empty{display:none}
.flist-clear{padding:4px 2px;border:0;background:none;font:inherit;font-size:13px;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.flist-quick{display:flex;flex-wrap:wrap;gap:8px}
.flist-quick button{min-height:38px;padding:7px 14px;border:1px solid #E0D2BF;border-radius:999px;background:transparent;font:inherit;
  font-size:13px;color:var(--ink2);cursor:pointer}
.flist-quick button:hover{border-color:#C6AD96}
.flist-quick button[aria-pressed="true"]{border-color:#B9C29D;background:#E7EBD9;color:#475633}
.flist-tools>.flist-quick{margin:0 0 14px}
.flist-boxed .flist-tools>.flist-quick{margin:0}
.flist-none{margin:8px 0 0;font-size:14px;color:var(--ink2)}
/* The template's footer under a paged list: how many show, then the button. */
.flist-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.flist-shown{font-size:12px;color:var(--ink2)}
.flist-more{min-height:44px;padding:0 18px;border:1px solid #BBA585;border-radius:999px;background:#FAF6EF;font:inherit;font-size:13px;
  color:var(--ink);cursor:pointer}
.flist-more:hover{background:var(--tint)}
.flist-bar[hidden],.flist-quick[hidden],.flist-none[hidden],.flist-foot[hidden],.flist-more[hidden],.flist [data-rows]>[hidden]{display:none}
ol.reach{display:grid;gap:2px;margin:0;padding:0;list-style:none}
/* Tighter than a chart row: these lists run to dozens of rows. They measure
   52px at 1440px, against about 48px for the song page's old table rows
   (the shared song rows in .songs are 68px, the same as the old tracklist). */
ol.reach .crow{padding:7px 12px;gap:12px}
ol.reach .crow:nth-child(even){background:var(--tint)}

/* --- chart rows --------------------------------------------------------------------- */
.chart{display:grid;grid-template-columns:1fr 1fr;gap:6px 36px}
.chart.single{grid-template-columns:1fr}
.crow{display:grid;grid-template-columns:34px minmax(0,1fr) 110px 74px;align-items:center;gap:14px;
  padding:12px 14px;border-radius:14px}
.chart.single .crow{grid-template-columns:34px minmax(0,1fr) 38% 80px}
.crow.top3{background:var(--tint)}
.crow .rk{font:300 18px/1 var(--disp);color:var(--dune);font-variant-numeric:tabular-nums}
.crow .ttl{display:block;font-weight:500;font-size:15px;line-height:1.25}
.crow .art{display:block;font-size:13px;color:var(--ink2)}
.crow a.art-link:hover,.crow a.ttl-link:hover{color:var(--ink);text-decoration:underline}
a.ttl-link{color:inherit;text-decoration:none}
.creach{display:block;margin-top:2px;font-size:12px;color:var(--ink2)}
.bar-t,.crow .bar{display:block;height:4px;border-radius:4px;background:#EFE6DB;overflow:hidden}
.bar-t i,.crow .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--peach),var(--dune))}
.crow .num{text-align:end;font-size:14px;font-variant-numeric:tabular-nums}
.crow .num span{display:block;font-size:10.5px;letter-spacing:.06em;color:var(--ink2)}
.cmove{display:inline-block;margin:4px 8px 0 0;padding:1px 7px;border-radius:999px;background:var(--tint);
  font-size:11px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.cmove.up{color:#2f6b3a}
.cmove.down{color:#9a4a2a}
.cmove.same{color:var(--ink2)}
.cmove.new,.cmove.re{background:var(--dune);color:#fff}
.chist{font-size:12px;color:var(--ink2)}

/* --- widget snippet, on a station page ------------------------------------------------ */
.embed{max-width:760px}
.embed summary{cursor:pointer;font:300 clamp(20px,2.2vw,28px)/1.2 var(--disp);letter-spacing:-.01em}
.embed-code{display:block;width:100%;margin:14px 0 0;padding:12px 14px;border:1px solid #E6DACB;border-radius:12px;
  background:var(--tint);color:var(--ink);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.embed-preview{display:block;width:100%;max-width:420px;height:610px;margin-top:18px;border:0;border-radius:16px}

/* --- /partners, the guide for stations (issue #123) ----------------------------------- */
.partners-find,.partners-options,.partners-help{max-width:820px}
.partners-search{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.partners-search label{flex-basis:100%;font-size:14px;color:var(--ink2)}
.partners-search input{flex:1 1 240px;min-height:44px;padding:0 14px;border:1px solid #E6DACB;border-radius:12px;background:#fff;color:var(--ink);font-size:16px}
.partners-search button,.partners-style button{min-height:44px;padding:0 18px;border-radius:999px;background:var(--dune);color:#fff;font-weight:600}
.partners-results{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.partners-results a{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:12px;background:var(--tint);color:var(--ink);text-decoration:none}
.partners-results span{color:var(--ink2);font-size:14px}
.partners-option{margin-top:34px}
.partners-option h3{margin:0 0 6px;font-size:19px}
.partners-option>p{margin:0 0 10px;max-width:60ch;color:var(--ink2)}
.partners-style{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:end;margin:14px 0 4px;font-size:14px;color:var(--ink2)}
.partners-style label{display:flex;flex-direction:column;gap:6px}
.partners-style label.check{flex-direction:row;align-items:center}
.partners-style select{min-height:40px;padding:0 10px;border:1px solid #E6DACB;border-radius:10px;background:#fff;color:var(--ink)}
.partners-style input[type=color]{width:56px;height:40px;padding:2px;border:1px solid #E6DACB;border-radius:10px;background:#fff}
.partners-options .copy{position:static;margin-top:8px;height:34px;background:var(--ink);color:#F4EDE4}
.partners-options .embed-preview{background:repeating-conic-gradient(#f3ece4 0% 25%,#fff 0% 50%) 50%/16px 16px}
.partners-options .spotify-preview{margin:14px 0 0;max-width:420px}
.partners-why{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px;color:rgba(255,255,255,.95);font-size:15px}
.partners-why li::before{content:"✓";margin-inline-end:8px;color:var(--peach)}
.partners-other{margin:14px 0 0;font-size:14px}
.partners-other summary{cursor:pointer;color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.partners-send{margin:14px 0 0;padding:12px 16px;border-radius:12px;background:var(--sage);font-size:14.5px}
.partners-send a{font-weight:600}
.partners-help ol{padding-inline-start:20px;max-width:60ch}
.partners-help li{margin:8px 0}
.partners-help h3{margin:22px 0 4px;font-size:17px}
.partners-help p{max-width:60ch}

/* --- station waitlist, on a station page ---------------------------------------------- */
.waitlist{max-width:760px}
.waitlist summary{cursor:pointer;font:300 clamp(20px,2.2vw,28px)/1.2 var(--disp);letter-spacing:-.01em}
.waitlist .findbox{margin-top:14px}
.waitlist fieldset{margin:16px 0 0;padding:0;border:0}
.findbox .choice{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px;font-weight:400}
.findbox .choice input{display:inline-block;flex:none;width:auto;height:auto;margin:3px 0 0;box-shadow:none}
.waitlist .act{margin-top:14px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* --- API keys, on the signed-in account page ------------------------------------------ */
.apikeys{max-width:960px}
.apikeys .keystable{overflow-x:auto;margin:18px 0 0}
.apikeys td form{display:inline;margin-inline-start:10px}
.apikeys td .btn-line{height:32px;padding:0 12px;font-size:13px}
.apikeys code{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.keyreveal,.keyform{max-width:620px;margin-top:22px}
.keyreveal h3,.keyform h3{margin:0 0 10px;font-size:17px;font-weight:500}
.keyreveal p{margin:0 0 12px}
.keyreveal .keybox{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:12px}
.keyform .choice{margin-top:14px}
.keyform .choice a{text-decoration:underline;text-underline-offset:3px}
.keyform .act{margin-top:14px}
.keyerror{font-weight:500;color:var(--ink)}

/* --- podium, on /charts ---------------------------------------------------------------- */
.podium{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;margin-bottom:24px}
.pod{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:250px;padding:22px 24px;
  border-radius:26px;background:linear-gradient(160deg,#F6EADF,#EDD7C2)}
.pod:first-child{background:linear-gradient(160deg,#E4BF9B,#BF855A);color:#fff}
.pod .place{font:300 64px/.9 var(--disp);letter-spacing:-.03em;color:var(--dune)}
.pod:first-child .place{color:rgba(255,255,255,.92)}
.pod .ttl{display:block;font-weight:500;font-size:20px;line-height:1.25}
.pod .art{display:inline-block;margin-top:4px;font-size:15px;opacity:.82}
.pod a.art-link:hover,.pod a.ttl-link:hover{opacity:1;text-decoration:underline}
.pod .creach{font-size:12.5px;color:inherit;opacity:.8;text-align:end}
.pod .foot-row{display:flex;justify-content:space-between;align-items:end;gap:12px}
.pod .spins{display:block;font:300 30px/1 var(--disp);font-variant-numeric:tabular-nums}
.pod .spins span{display:block;margin-top:6px;font:400 11px/1 var(--body);letter-spacing:.06em;opacity:.8}

/* --- chips ---------------------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:var(--tint);font-size:14px}
.chip:hover{background:#F1E9E0}
.chip b{font-weight:500;color:var(--dune);font-variant-numeric:tabular-nums}
.chip.all{background:var(--ink);color:#fff}
.chip.all b{color:var(--peach)}

/* --- cards ------------------------------------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;
  padding-block:8px;padding-inline:8px 14px;border-radius:16px;background:var(--tint)}
.card.acard{grid-template-columns:48px minmax(0,1fr) auto}
.card:hover{background:#F1E9E0}
.av{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;font:400 15px/1 var(--disp);color:#fff;
  background:linear-gradient(135deg,hsl(var(--h,28) 52% 72%),hsl(var(--h,28) 38% 48%))}
.acard .av{border-radius:50%}
/* A station's logo in place of its letter (src/logos/). The white is the
   tile: logos with a clear background read the same on any page. */
.av.logo{background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(60,40,20,.08)}
.av.logo img{display:block;width:100%;height:100%;object-fit:contain}
.ct{min-width:0}
.card .nm,.card .meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .nm{font-weight:500;font-size:14.5px;line-height:1.3}
.card .meta{font-size:12.5px;color:var(--ink2)}
.card .n{display:block;margin-top:1px;font-size:12px;color:var(--ink2)}
.acard>.n{margin:0;font-size:13px;white-space:nowrap}
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px 18px}
/* Covers are square and shown whole (issue #125): contain, never crop. */
.pcard img,.nocover{width:100%;aspect-ratio:1;height:auto;object-fit:contain;background:var(--tint);border-radius:18px;margin-bottom:12px}
@media (min-width:1100px){.pcards{grid-template-columns:repeat(5,minmax(0,1fr))}}
.nocover{display:grid;place-items:center;font:300 54px/1 var(--disp);color:#fff;
  background:linear-gradient(135deg,hsl(var(--h,28) 52% 72%),hsl(var(--h,28) 38% 48%))}
.pcard .nm{display:block;font-weight:500;font-size:15px;line-height:1.3}
.pcard .meta{display:block;margin-top:4px;font-size:13px;color:var(--ink2)}
.pcard .meta.n{margin-top:2px}
.pcard:hover .nm{text-decoration:underline;text-underline-offset:3px}

/* --- tables: logs, tracklists, artist breakdowns --------------------------------------- */
.log{width:100%;border-collapse:separate;border-spacing:0}
.log th{font-size:12.5px;font-weight:500;color:var(--ink2);text-align:start;padding:0 12px 10px}
.log td{padding:10px 12px;vertical-align:baseline}
.log tbody tr:nth-child(even) td{background:var(--tint)}
.log td:first-child{border-start-start-radius:12px;border-end-start-radius:12px}
.log td:last-child{border-start-end-radius:12px;border-end-end-radius:12px}
.log .hour th{padding:26px 12px 8px;font:300 22px/1 var(--disp);color:var(--dune)}
.log .t{width:1%;white-space:nowrap;color:var(--ink2);font-variant-numeric:tabular-nums;font-size:14px}
.log .song{font-weight:500}
.log .by{color:var(--ink2);font-size:14px}
.log .n,.log th.n{text-align:end;width:1%;white-space:nowrap;font-variant-numeric:tabular-nums}
/* The adds chart's count headings are whole sentences; held on one line they
   took 400px for three digits and squeezed the station list into a column. */
.chips+.log{margin-top:28px}
.log.adds th.n{white-space:normal;min-width:6.5em}
.log.adds .first{white-space:nowrap}
.log.adds .addedby{font-size:14px;color:var(--ink2);min-width:16em}
.log td a:hover .song,.log td.song a:hover{text-decoration:underline}
/* The shared song row (ui/song-list.ts): the log row's type and padding, so a
   list of songs stays as tall as the tables it replaced and a playlist screen
   shows as many songs as before. Each number carries its own small label. */
.songs{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.srow{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:12px}
.songs>.srow:nth-child(even){background:var(--tint)}
.srow .rk{flex:none;width:26px;color:var(--ink2);font-size:14px;font-variant-numeric:tabular-nums}
.srow .sn{flex:1;min-width:0}
.srow .song{font-weight:500}
.srow .by{color:var(--ink2);font-size:14px}
.srow a:hover .song{text-decoration:underline}
.srow .sd{flex:0 1 230px;min-width:0;font-size:14px;color:var(--ink2)}
.srow .sm{flex:none;min-width:60px;text-align:end;font-variant-numeric:tabular-nums;line-height:1.3}
.srow .sm b{display:block;font-weight:400}
.srow .sm>span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.srow .trend{flex:none;width:20px}
.scroll{overflow-x:auto}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.twocol h2{margin:0 0 16px}
/* --- the comparison, in the template's layout (issue #125) --------------------
   A framed bar to jump about, the songs in common, a card per station (the
   second in sage), then the shared songs with a two-colour bar each. */
.rail{position:sticky;top:12px;z-index:5;display:flex;flex-wrap:wrap;gap:6px;margin:18px 28px 0;padding:8px;
  border:1px solid #DED0BB;border-radius:16px;background:#FFFDF9;box-shadow:0 4px 14px rgba(73,50,30,.05)}
.rail a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 15px;border-radius:10px;
  font-size:12px;color:#715437}
.rail a:hover{background:var(--tint)}
.rail a:first-child{background:#3F3023;color:#fff}
.cmpov{padding-top:36px}
.cmphead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 25px;margin:0 0 23px}
.cmphead h2{margin:0;font:500 38px/1.25 var(--body);letter-spacing:-.04em;color:#382B20}
.cmphead p{margin:9px 0 0;font-size:14px;color:#71604B}
.cmphead a{display:flex;align-items:center;gap:13px;min-height:36px;font-size:12px;color:#705338;text-decoration:underline;text-underline-offset:3px}
.cmppair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cmpcard{display:grid;grid-template-columns:minmax(0,1fr) 88px;column-gap:17px;align-content:start;padding:25px;border-radius:16px;
  border:1px solid #DFCFB8;background:#FAF6EE;--ringc:#AA8051;--ringt:#E8DECE;--meter:#A48058}
.cmpcard.b{border-color:#D8DEC6;background:#F5F6ED;--ringc:#7A8B58;--ringt:#E1E6D3;--meter:#7A8B58}
.cmpcard>*{grid-column:1}
.cmpcard .ring{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;
  background:conic-gradient(var(--ringc) var(--p),var(--ringt) 0)}
.cmpcard .ring span{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:inherit;
  background:#FAF6EE;font-size:22px;color:#6B4D2F}
.cmpcard.b .ring span{background:#F5F6ED;color:#55633C}
.cmpcard h3{margin:0;font:500 22px/1.45 var(--body);letter-spacing:-.02em;color:#3D3024}
.cmpcard h3 a:hover{text-decoration:underline}
.cmpcounts{display:flex;gap:16px;margin:6px 0 0;font-size:11px;line-height:1.8;color:#715D46}
.cmpcounts span{display:block}
.cmpcounts strong{display:block;font-weight:400;font-size:25px;line-height:1.8;letter-spacing:-.03em;color:#443526}
.cmpmeter{grid-column:1 / -1;height:6px;margin:12px 0 0;border-radius:6px;background:#EAE2D3;overflow:hidden}
.cmpmeter i{display:block;height:100%;border-radius:6px;background:var(--meter)}
.cmpshare{grid-column:1 / -1;margin:10px 0 0;font-size:12px;line-height:1.8;color:#6C5A43}
.cmpshare strong{font-size:16px;font-weight:500;color:#453A29}
.cmpsplit{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0 0;padding-top:14px;border-top:1px solid #DDCDB7;
  font-size:12px;color:#6B5339}
.cmpsplit b{margin-inline-end:3px;font-weight:500;color:#473422}
.cmpnote{margin:0 0 20px;font-size:12px;color:#6E563E}
.cmplisthead{display:flex;justify-content:space-between;gap:18px;margin:0;padding:0 0 14px;font-size:12px;color:#79634F}
.cmprows{margin:0;padding:0;list-style:none}
.cmprows.gated{-webkit-mask-image:linear-gradient(180deg,#000 max(30%,calc(100% - 230px)),transparent);
  mask-image:linear-gradient(180deg,#000 max(30%,calc(100% - 230px)),transparent)}
.cmprow{display:grid;grid-template-columns:minmax(0,1fr) 240px;align-items:center;gap:12px 16px;padding:12px 0;border-top:1px solid var(--line)}
.cmprow .song{font-weight:500}
.cmprow .by{color:var(--ink2);font-size:14px}
.cmprow a:hover .song{text-decoration:underline}
.cmpnums{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:end}
.cmpnums small{display:block;font-size:10px;line-height:1.6;color:#70583F}
.cmpnums b{display:block;margin-top:7px;font-weight:400;font-size:25px;line-height:1.3;letter-spacing:-.05em;color:#805438}
.cmpnums span:last-child b{color:#55633C}
.cmpbar{grid-column:1 / -1;display:flex;gap:4px;height:5px;border-radius:6px;background:#F6EFE5;overflow:hidden}
.cmpbar i{display:block;height:100%;background:#B38B64}
.cmpbar i+i{background:#9CAD90}

/* --- the station page ----------------------------------------------------------------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
/* The section links under a page's header (issue #125). On a wide screen they
   stay in reach while the page scrolls; on a phone they wrap so no link sits
   off screen, and scroll away. The script marks the one in view. */
.sectabs{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:25px 28px 12px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* The template's tab pills: muted until hovered, dark for the one in view. */
.sectabs a{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none;min-height:42px;padding:8px 18px;
  border:1px solid transparent;border-radius:999px;background:var(--tint);color:var(--ink2);font-size:14px;white-space:nowrap}
.sectabs a:hover{border-color:#C6AD96}
.sectabs a[aria-current]{background:var(--ink);color:#fff}
.sectabs+.sect{padding-top:28px}
.periodtabs{position:static}
#recent,#most,#playlist,#compare{scroll-margin-top:92px}
.cols h2{margin:0 0 16px}
.cols .log+h2,.cols .empty+h2,.cols .logctl+h2{margin-top:48px}
/* The older-plays button and the date field. [hidden] is restated because
   their own display rules would otherwise beat the browser's. */
.logctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px}
.logctl[hidden],.older[hidden]{display:none}
/* The signed-out end of a station's log: the last rows fade the way a
   paywalled article does, and a small sky rises out of them, the page's own
   sky and dunes, holding the sign-in form. */
.log.gated{-webkit-mask-image:linear-gradient(180deg,#000 max(30%,calc(100% - 230px)),transparent);
  mask-image:linear-gradient(180deg,#000 max(30%,calc(100% - 230px)),transparent)}
.gate{margin-top:6px;min-height:420px}
.gate[hidden]{display:none}
.gate::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 42%,var(--wash) 0%,transparent 75%)}
.gate-body{position:relative;z-index:2;max-width:520px;margin:0 auto;padding:64px 24px 170px;text-align:center}
.gate h2{margin:0;font:300 clamp(24px,3.1vw,36px)/1.12 var(--disp);letter-spacing:-.015em;color:var(--head);
  text-shadow:0 2px 24px rgba(140,90,50,.3);text-wrap:balance}
.gate-lede{margin:14px auto 0;max-width:44ch;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.95);
  text-shadow:0 1px 10px rgba(80,45,20,.45);text-wrap:pretty}
:is(.gate,.phead) .loginform{max-width:520px;margin-top:24px;padding:0;background:none;display:grid;grid-template-columns:1fr auto;gap:8px;text-align:start}
:is(.gate,.phead) .loginform label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:is(.gate,.phead) .loginform input[type=email]{grid-column:1;margin:0;box-shadow:0 6px 24px rgba(60,35,15,.18)}
/* Ink on the dusk sky, white on the night one, where ink would vanish. */
:is(.gate,.phead) .loginform .act{grid-column:2;margin:0;height:52px;padding-inline:22px;
  background:var(--gate-btn,var(--ink));color:var(--gate-btn-ink,#fff)}
:is(.gate,.phead) .loginform .tip{grid-column:1/-1;margin:6px 0 0;text-align:center;font-size:13px;color:rgba(255,255,255,.9);
  text-shadow:0 1px 8px rgba(80,45,20,.4)}
:is(.gate,.phead) .loginform .tip a{color:inherit;text-decoration:underline;text-underline-offset:3px}
:is(.gate,.phead) .loginform .loginmsg{font-size:14.5px;font-weight:500;color:#fff}
@media (max-width:560px){
  .gate-body{padding:44px 18px 110px}
  :is(.gate,.phead) .loginform{grid-template-columns:1fr}
  :is(.gate,.phead) .loginform .act{grid-column:1;justify-content:center;text-align:center}
}
/* On a page header the form sits under a left-aligned title, so it lines up
   with it; in the gate everything is centred. */
.gate .loginform{margin-inline:auto}
.phead .loginform .tip{text-align:start}
.cols .gate+h2{margin-top:48px}
.loginform .act{margin-top:12px}
.jump{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
.jump input{height:42px;padding:0 14px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:15px}
.log .hour .day{color:var(--ink)}
.plside{position:sticky;top:86px;padding:16px;border-radius:24px;background:linear-gradient(180deg,#F6EDE3,#EFDCC8)}
.plside img{width:100%;aspect-ratio:1;height:auto;object-fit:cover;border-radius:16px}
.plside h3{margin:16px 0 6px;font:500 17px/1.3 var(--body)}
.plside h3 a:hover{text-decoration:underline}
.plside .desc{margin:0 0 12px;font-size:14px;color:var(--ink2)}
.plside .meta{margin:0 0 16px;font-size:13px;color:var(--ink2)}
.plside .none{margin:0;color:var(--ink2);font-size:14px}
.plside iframe,.embed iframe,.spembed{display:block;margin-top:16px;border:0;border-radius:14px}
/* The station page puts its playlist panel first in the markup (issue #120),
   so a phone shows it above the airplay log; a wide screen keeps it on the right. */
.cols>.plside{grid-column:2;grid-row:1 / span 2}
.cols>.stmain{grid-column:1;min-width:0}
.cols>.strecent{grid-row:1}
.cols>.stweek{grid-row:2}
.stmain .log+h2,.stmain .facts+h2,.stmain .about+h2,.stmain .lede+h2{margin-top:48px}
.stmain>.lede{margin:-6px 0 14px;color:var(--ink2);font-size:14px}
.trend{width:28px;text-align:center;font-size:13px}
.trend.up{color:#2f7a3d}
.trend.down{color:#b0452f}
.trend.same{color:var(--ink2)}
.trend.new{color:#b07a12}
.facts{margin:0 0 16px;padding-inline-start:18px;color:var(--ink2);font-size:14px}
.facts li{margin:4px 0}
.facts a{text-decoration:underline}
.about{margin:0;max-width:62ch;color:var(--ink2)}

/* The station's own now-playing line, with the button that starts it
   playing. It stays a link in the markup for a visitor whose script is
   blocked; the script upgrades it into the dock. */
.listen{display:flex;align-items:center;gap:16px}
.listen .nowbox{min-width:0;flex:1}
.listen .lbl{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);min-width:0}
.listen .lbl::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 3px rgba(111,143,78,.2)}
.listen .song{display:block;margin-top:4px;font:300 21px/1.18 var(--disp);letter-spacing:-.01em;overflow-wrap:anywhere}
.listen .by{display:block;margin-top:3px;color:var(--ink2);font-size:14.5px}
.listen time{flex:none;align-self:flex-start;font-size:12.5px;color:var(--ink2)}
.listen .play{width:60px;height:60px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;order:-1;
  transition:transform .16s ease,background .16s ease}
.listen .play svg{width:24px;height:24px;fill:currentColor}
.listen .play:hover,.listen.playable .play:hover{transform:scale(1.06);background:var(--live)}
.listen .play.ext{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.listen .play.ext svg{width:20px;height:20px;fill:none}
/* A station's play button says "Listen live" in words, and the last played
   song sits apart behind a rule, so the two never read as one thing. */
.listen .play.golive{width:auto;height:auto;min-height:48px;display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px 8px 14px;border-radius:999px;font-size:14px;font-weight:500;line-height:1.2}
.listen .play.golive svg{width:18px;height:18px}
.listen .play.golive:hover{transform:none}
.listen.split{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.listen.split .nowbox{padding-inline-start:16px;border-inline-start:1px solid var(--line)}
.insecure{margin:12px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.45}
.follow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.follow img{width:120px;height:120px;border-radius:16px;object-fit:cover;box-shadow:0 14px 30px -14px rgba(60,30,10,.5)}
.follow p{margin:0 0 12px;font-size:13.5px;color:var(--ink2)}
.follow.flat{grid-template-columns:1fr}
section.embed{padding:40px 28px 0}

/* --- home: the hero ------------------------------------------------------------------ */
.hero{height:690px}
.headline{position:relative;z-index:2;margin:0 auto;padding:128px 24px 0;text-align:center;
  font:300 clamp(40px,7.2vw,98px)/.98 var(--disp);letter-spacing:-.02em;color:var(--head);
  text-shadow:0 2px 30px rgba(140,90,50,.18)}
.headline .row{display:block}
/* The search under the headline (issue #125): one white pill, the same shape as
   the stations badge below it. */
.herosearch{position:relative;z-index:3;display:flex;align-items:center;gap:10px;width:min(500px,calc(100% - 32px));
  margin:24px auto 0;padding:6px 6px 6px 18px;border-radius:999px;background:#fff;color:var(--ink);
  box-shadow:0 10px 30px -12px rgba(90,55,30,.35)}
.herosearch svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--ink2);stroke-width:1.6}
.herosearch input{flex:1;min-width:0;height:42px;border:0;background:none;font:inherit;font-size:16px;color:var(--ink)}
.herosearch input:focus{outline:none}
.herosearch button:focus-visible{outline-color:var(--ink)}
.herosearch:focus-within{box-shadow:0 0 0 2px var(--ink),0 10px 30px -12px rgba(90,55,30,.35)}
.herosearch button{flex:none;min-height:42px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);color:#fff;
  font:inherit;font-size:13px;font-weight:500;cursor:pointer}
/* The waveform stands in for the o of "radio" where the tagline has one: the
   one thing on the page that is always moving, because the stations are. */
.wave{display:inline-flex;align-items:center;justify-content:center;gap:.035em;width:1.05em;height:.5em;
  margin:0 .02em;vertical-align:.08em;border-radius:999px;background:rgba(255,255,255,.92)}
.wave i{display:block;width:.028em;min-width:2px;height:60%;border-radius:2px;background:#A77650;animation:level 1.2s ease-in-out infinite}
.wave i:nth-child(2n){animation-duration:.9s}
.wave i:nth-child(3n){animation-duration:1.5s}
.wave i:nth-child(4n+1){animation-delay:-.4s}
.wave i:nth-child(5n+2){animation-delay:-.8s}
@keyframes level{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.listeners{position:absolute;z-index:2;inset-inline-start:12%;top:456px;display:flex;align-items:center;gap:10px;
  padding-block:6px;padding-inline:6px 16px;border-radius:999px;background:#fff;color:var(--ink);
  box-shadow:0 10px 30px -12px rgba(90,55,30,.35)}
.faces{display:flex}
.faces img{width:32px;height:32px;border-radius:50%;border:2px solid #fff;object-fit:cover}
.faces img+img{margin-inline-start:-10px}
.listeners b{display:block;font-weight:500;font-size:14px;line-height:1.2}
.listeners small{font-size:11.5px;color:var(--ink2)}
.request{position:absolute;z-index:2;inset-inline-end:128px;top:168px;width:116px;padding:18px 10px 16px;
  border-radius:18px;text-align:center;font-size:13px;line-height:1.3}
.request .plus{display:block;font:300 26px/1 var(--disp);margin-bottom:6px}
.newcard{position:absolute;z-index:2;inset-inline-end:26px;top:250px;width:132px;padding:12px 12px 10px;
  border-radius:18px;font-size:11px;line-height:1.25}
.newcard .who{display:flex;gap:6px;align-items:center}
.newcard .av{width:26px;height:26px;flex:none;border-radius:50%;font-size:11px;text-shadow:none}
/* Clamped: some station names run to five lines ("TCTY20-FL 'Trending
   Country Top 20' (Digital, states/US-NAT)") and the card has a fixed width. */
.newcard strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:12px;font-weight:400;font-size:14px;overflow-wrap:anywhere}
.newcard em{display:block;font-style:normal;opacity:.88;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ghosts{position:absolute;z-index:1;inset-inline-start:90px;bottom:150px;width:230px;height:200px}
.ghosts div{position:absolute;width:220px;height:110px;padding:12px 14px;border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);font-size:11px;color:rgba(255,255,255,.75)}
.ghosts div:nth-child(1){inset-inline-start:60px;top:0;transform:rotate(-12deg);opacity:.5}
.ghosts div:nth-child(2){inset-inline-start:20px;top:50px;transform:rotate(-9deg);opacity:.75}

/* The on-air card. It is a .listen box, so the same click that works on a
   station page starts the dock here too. */
.player{position:absolute;z-index:3;inset-inline-start:24px;bottom:24px;width:350px;display:block;
  padding:18px 18px 14px;border-radius:var(--r-card);background:#fff;color:var(--ink);
  box-shadow:0 24px 50px -24px rgba(80,45,20,.45)}
.player-top{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;align-items:center;gap:12px}
.player .song{margin-top:4px;font:500 14.5px/1.25 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .by{margin-top:1px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .lbl{font-size:11.5px}
.player .lbl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transport{display:flex;align-items:center;gap:6px}
.transport button{width:30px;height:30px;display:grid;place-items:center;border-radius:50%}
.transport button[hidden]{display:none}
.transport button:hover{background:var(--tint)}
.transport button svg{width:12px;height:12px;fill:currentColor}
[dir="rtl"] .transport button svg{transform:scaleX(-1)}
.player .play{order:0;width:42px;height:42px}
.player .play svg{width:16px;height:16px}
.player-top img{width:52px;height:52px;border-radius:10px;object-fit:cover}
.player-meta{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-size:12px;color:var(--ink2)}
.player-meta a{text-decoration:underline;text-underline-offset:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scrollcue{position:absolute;z-index:3;inset-inline-start:390px;bottom:60px;width:36px;padding:14px 0;border-radius:999px}
.scrollcue svg{display:block;margin:0 auto;width:12px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;
  animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}
.panel.bleed{padding-block:16px 18px;padding-inline:16px 0}
.carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline-end:40px}
.carousel::-webkit-scrollbar{display:none}
.slide{flex:0 0 250px;display:grid;grid-template-columns:116px minmax(0,1fr);gap:10px;padding:5px;border-radius:16px;
  background:#F6F2EE;scroll-snap-align:start}
.slide.on{background:var(--sage)}
.slide img{width:116px;height:116px;border-radius:12px;object-fit:cover}
.slide>span{align-self:end;min-width:0;padding-block-end:8px;padding-inline-end:6px}
.slide .nm{display:block;font-weight:500;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.slide .meta{display:block;margin-top:6px;font-size:11.5px;color:var(--ink2)}
.track{height:2px;margin-top:16px;margin-inline-end:16px;background:var(--line);position:relative}
.track i{position:absolute;inset-inline-start:0;top:0;bottom:0;width:24%;background:var(--ink);transition:width .4s ease}
.landed{display:grid;grid-template-columns:minmax(0,1fr) 2px;gap:18px;margin-top:18px;margin-inline-end:22px}
.landed h2{margin:0 0 8px;font:500 15px/1.2 var(--body)}
.landed ol{list-style:none;margin:0;padding:0;height:64px;overflow:hidden;position:relative}
.landed ol::after{content:"";position:absolute;inset-inline:0;bottom:0;height:26px;background:linear-gradient(#fff0,#fff)}
.landed li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:baseline;gap:8px;
  font-size:13.5px;line-height:1.55;color:var(--ink2)}
.landed li:first-of-type{color:var(--ink)}
.landed li::before{content:"";width:7px;height:7px;border-radius:50%;background:#CFC6BC;transform:translateY(-1px)}
.landed li:first-of-type::before{background:var(--ink)}
.landed .line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.landed .bsong{color:inherit}
.landed .bc{margin-inline-start:8px;color:var(--ink2)}
.landed .bc:hover{color:var(--ink);text-decoration:underline}
.landed time{font-size:11px;font-variant-numeric:tabular-nums}
.landed .rule{width:2px;height:40px;margin-top:26px;background:var(--ink)}
.landed li.arriving{animation:land .6s ease both}
@keyframes land{from{opacity:0;transform:translateY(-8px)}}

/* --- home: the band under the hero ---------------------------------------------------- */
.band{display:grid;grid-template-columns:36% minmax(0,1fr);gap:40px;align-items:center;padding-block:68px 44px;padding-inline:28px 0}
.band h2{margin:0;font:400 clamp(24px,2.4vw,30px)/1.18 var(--body);text-transform:uppercase}
.band .lede{margin-top:16px;font-size:15.5px;max-width:48ch}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:30px 0 36px}
.stats{display:flex;flex-wrap:wrap;gap:12px 48px;font-size:15px}
.stats b{font-weight:500;font-variant-numeric:tabular-nums}
.showcase{position:relative;display:flex;gap:26px;overflow:hidden;margin-inline-end:-12px}
.showcase>a{flex:0 0 380px;height:196px;border-radius:26px;position:relative;overflow:hidden}
.chartcard{padding:18px 20px;background:linear-gradient(180deg,#F1E3D4,#EAD3BB)}
.chartcard ol{list-style:none;margin:0;padding-block:0;padding-inline:0 58px;font-size:13px}
.chartcard li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:6px;padding:3px 0}
.chartcard li b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chartcard li em{font-style:normal;color:var(--ink2);font-variant-numeric:tabular-nums}
.chartcard .big{position:absolute;inset-inline-start:20px;bottom:16px;font:300 22px/1 var(--disp);color:var(--dune)}
/* Cropped to the bottom of the cover, below the title printed on every cover,
   so the card's own label never sits on top of it. */
.stationcard{background:#6B5140 center bottom/200% auto no-repeat;color:#fff}
.stationcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,24,14,.45),rgba(40,24,14,.6))}
.stationcard>*{position:relative;z-index:1}
.stationcard .sc-label{display:block;padding:18px 20px 0;font-size:14px}
.stationcard .sc-song{padding:10px 20px 0;font:300 22px/1.2 var(--disp);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.stationcard .sc-by{display:block;padding:4px 20px 0;font-size:14px;opacity:.9}
.stationcard time{position:absolute;inset-inline-start:20px;bottom:16px;font-size:12px;opacity:.9}
.swipe{position:absolute;z-index:2;inset-inline-start:344px;top:58px;width:80px;height:80px;display:grid;place-items:center;
  border-radius:50%;background:#fff;box-shadow:0 10px 30px -10px rgba(60,40,20,.35)}
.swipe svg{width:28px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{padding:26px 24px 28px;border-radius:22px;background:linear-gradient(180deg,#FBF6F1,#F4EAE0)}
.step .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;font:400 13px/1 var(--disp)}
.step h3{margin:22px 0 8px;font:500 18px/1.25 var(--body)}
.step p{margin:0;color:var(--ink2);font-size:15px}
.steps.two{grid-template-columns:repeat(2,1fr)}
.steps.two h3{margin-top:0}
.step p.more{margin-top:16px;color:var(--ink)}
.findwrap{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:48px;align-items:start}
.findwrap h2{margin:0 0 14px}
.findwrap .lede+.lede{margin-top:12px}
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 44px}
.faq h3{margin:0 0 7px;font:500 17px/1.3 var(--body)}
.faq p{margin:0;color:var(--ink2);font-size:15px;line-height:1.6}
.faq p a{color:var(--ink);border-bottom:1px solid currentColor}
.ask{margin:64px 16px 16px;padding:40px;border-radius:28px;color:#fff;
  background:radial-gradient(60% 90% at 90% 110%,rgba(255,230,200,.9),transparent 60%),linear-gradient(135deg,#D9B695,#C38E66)}
.ask .lede{color:rgba(255,255,255,.95)}
.ask .findbox{background:rgba(255,255,255,.2);color:#fff}
.ask .findbox .tip{color:rgba(255,255,255,.92)}
.ask .findbox .act{background:#fff;color:var(--ink)}

/* --- countries -------------------------------------------------------------------------- */
.share{display:flex;height:22px;border-radius:999px;overflow:hidden;background:#E9DDD0}
.share i{display:block;height:100%;border-inline-end:2px solid #fff}
.share i:nth-child(1){background:#B9825A} .share i:nth-child(2){background:#CF9D72} .share i:nth-child(3){background:#E0B891}
.share i:nth-child(4){background:#EBC9A6} .share i:nth-child(5){background:#D8B596}
.sharekey{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--ink2)}
.sharekey li::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:6px;border-radius:50%}
.sharekey li:nth-child(1)::before{background:#B9825A} .sharekey li:nth-child(2)::before{background:#CF9D72}
.sharekey li:nth-child(3)::before{background:#E0B891} .sharekey li:nth-child(4)::before{background:#EBC9A6}
.sharekey li:nth-child(5)::before{background:#D8B596}
.ctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.ctile{display:grid;gap:10px;padding:14px 16px 16px;border-radius:18px;background:var(--tint)}
.ctile:hover{background:#F1E9E0}
.ctile .nm{font-weight:500;font-size:14.5px}
.ctile .cnt{font-size:12px;color:var(--ink2)}
.ctile .cnt b{margin-inline-end:5px;font:300 26px/1 var(--disp);color:var(--ink);font-variant-numeric:tabular-nums}
.ctile:first-child{background:var(--ink);color:#fff}
.ctile:first-child .cnt,.ctile:first-child .cnt b{color:#fff}
.ctile:first-child .bar-t{background:rgba(255,255,255,.15)}

/* --- about ----------------------------------------------------------------------------------- */
.doc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;padding:64px 28px 12px}
.toc{position:sticky;top:24px;align-self:start;display:grid;gap:2px}
.toc a{padding:9px 14px;border-radius:12px;font-size:14px;color:var(--ink2)}
.toc a:hover{background:var(--tint);color:var(--ink)}
.doc section{padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.doc section:last-of-type{border-bottom:0}
.doc h3{margin:0 0 8px;font:500 16px/1.3 var(--disp)}
.doc .endpoint{margin:0 0 26px}
.doc pre.code{margin:0 0 12px;padding:12px 14px;max-width:100%;overflow-x:auto;border:1px solid #E6DACB;border-radius:12px;background:#FBF6EE;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.doc table.plain{border-collapse:collapse;margin:0 0 14px;font-size:15px;max-width:100%;display:block;overflow-x:auto}
.doc table.plain th,.doc table.plain td{padding:7px 14px 7px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.doc h2{margin:0 0 14px;font:300 26px/1.2 var(--disp);letter-spacing:-.01em}
.doc p{margin:0 0 12px;max-width:64ch;font-size:16.5px;line-height:1.68;color:#3E332A}

/* --- developer docs (/developers and its terms) ------------------------------------------------
   Two columns on a wide screen: a sticky nav and the content. On a phone the
   nav is an "On this page" disclosure above the content instead. Nothing here
   may widen the page: every grid child can shrink (min-width:0), code blocks
   and tables scroll inside themselves, and inline code breaks anywhere. */
.apidoc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;padding:56px 28px 12px}
.apinav{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow-y:auto;min-width:0;font-size:14px}
.apinav ul,.apinav-m ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:1px}
.apinav a,.apinav-m a{display:block;padding:7px 12px;border-radius:10px;color:var(--ink2)}
.apinav a:hover,.apinav-m a:hover{background:var(--tint);color:var(--ink)}
.navhead{margin:16px 12px 6px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.eplinks a{display:flex;align-items:baseline;gap:8px;padding:5px 12px}
/* A path breaks only after a slash (the markup puts a <wbr> there), never mid-word. */
.eplinks code{min-width:0;font:12.5px/1.4 var(--mono);overflow-wrap:normal;word-break:keep-all}
.apinav-m{display:none}
.verb{flex:none;display:inline-block;padding:1px 6px;border-radius:6px;background:var(--sage);color:#3F5A26;
  font:600 10.5px/1.5 var(--mono);letter-spacing:.04em}
.apibody{min-width:0}
.apibody>section{padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid var(--line)}
.apibody>section:last-child{border-bottom:0;margin-bottom:0}
.apibody [id]{scroll-margin-top:20px}
.apibody h2{margin:0 0 16px;font:300 28px/1.2 var(--disp);letter-spacing:-.01em}
.apibody h3{margin:30px 0 10px;font:500 19px/1.3 var(--body)}
.apibody h4{margin:0 0 8px;font:500 17px/1.35 var(--body)}
.apibody h5{margin:18px 0 8px;font:600 11.5px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.apibody p{margin:0 0 12px;max-width:70ch;font-size:16px;line-height:1.65;color:#3E332A}
.apibody p a:not(.act),.apibody td a{text-decoration:underline;text-underline-offset:3px}
.apibody :not(pre)>code{padding:1px 5px;border-radius:5px;background:var(--tint);color:var(--ink);
  font:.86em/1.4 var(--mono);overflow-wrap:anywhere}
.codebox{position:relative;margin:0 0 14px;min-width:0}
.apibody pre.code{margin:0;padding:14px 16px;max-width:100%;overflow-x:auto;border-radius:14px;background:#2B2119;color:#F4EDE4;
  font:13px/1.6 var(--mono);tab-size:2}
.apibody pre.code code{white-space:pre;overflow-wrap:normal}
.codebox:has(.copy:not([hidden])) pre.code{padding-inline-end:84px}
.copy{position:absolute;top:8px;inset-inline-end:8px;height:28px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#F4EDE4;font-size:12.5px}
.copy:hover{background:rgba(255,255,255,.26)}
.copy[hidden]{display:none}
.baseurl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 16px;border-radius:14px;background:var(--sage)}
.apibody p.baseurl{max-width:none}
.baseurl span{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4C6334}
.qsteps{list-style:none;margin:22px 0 0;padding:0;counter-reset:qs;display:grid;gap:24px}
.qsteps>li{position:relative;min-width:0;padding-inline-start:46px;counter-increment:qs}
.qsteps>li::before{content:counter(qs);position:absolute;inset-inline-start:0;top:0;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:#fff;font:400 13px/1 var(--disp)}
.apibody .qsteps h3{margin:4px 0 8px}
/* Language tabs. With no script: three disclosures, curl open. The script
   adds .tabbed and a tab row, and hides the panels not picked. */
.langs{margin:0 0 14px;min-width:0}
.lang>summary{display:inline-block;margin:0 6px 8px 0;padding:5px 13px;border-radius:999px;background:var(--tint);
  font-size:13.5px;cursor:pointer;list-style:none}
.lang>summary::-webkit-details-marker{display:none}
.lang[open]>summary{background:var(--ink);color:#fff}
.langs.tabbed>.lang>summary{display:none}
.langs.tabbed>.lang[hidden]{display:none}
.tablist{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.tablist button{height:30px;padding:0 13px;border-radius:999px;background:var(--tint);font-size:13.5px}
.tablist button[aria-selected="true"]{background:var(--ink);color:#fff}
.resp{margin:0 0 10px;min-width:0}
.resp>summary{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  font-size:14px;cursor:pointer;list-style:none}
.resp>summary::-webkit-details-marker{display:none}
.resp>summary::before{content:"";width:7px;height:7px;flex:none;border-inline-end:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
[dir="rtl"] .resp>summary::before{transform:rotate(45deg)}
.resp[open]>summary{margin-bottom:8px}
.resp[open]>summary::before{transform:rotate(45deg)}
.tablewrap{max-width:100%;overflow-x:auto;margin:0 0 16px}
.apibody table{width:100%;border-collapse:collapse;font-size:14.5px}
.apibody th,.apibody td{padding:9px 14px 9px 0;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.apibody thead th{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.apibody tbody th{font-weight:500}
.apibody td:first-child code,.apibody td>code:only-child{white-space:nowrap}
.params .none,.noparams{color:var(--ink2)}
.ep{padding:24px 0 10px;border-top:1px solid var(--line)}
.eplink{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--ink);max-width:100%}
.apibody .eplink code{padding:0;background:none;font:500 16px/1.35 var(--mono)}
.eplink:hover code{text-decoration:underline;text-underline-offset:4px}
.epindex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:20px 0 8px;padding:20px 22px;
  border-radius:18px;background:var(--tint)}
.epindex ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.epindex a{display:flex;align-items:baseline;gap:8px;padding:3px 0;font-size:13.5px}
.epindex a:hover code{text-decoration:underline}
.apibody .epindex code{padding:0;background:none;font:12.5px/1.4 var(--mono);overflow-wrap:normal;word-break:keep-all}
.epindex .epgroup{margin:0 0 6px;font-size:14px;font-weight:600}

/* --- station request progress ---
   The quiet variant is for a request that ended without going live: the same
   bar, drained of colour, because a silent station is an outcome, not an error. */
.reqbar{height:10px;border-radius:999px;background:var(--tint);overflow:hidden}
.reqfill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--peach),var(--dune));transition:width .6s cubic-bezier(.2,.7,.3,1)}
.reqbar.quiet .reqfill{background:#CFC6BC}
.reqsteps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px;font-size:12.5px;color:var(--ink2)}
.reqsteps span::before{content:"";display:block;width:8px;height:8px;margin-bottom:6px;border-radius:50%;background:#DDD3C8}
.reqsteps .on{color:var(--ink);font-weight:500}
.reqsteps .on::before{background:var(--dune)}
.reqbar.quiet~.reqsteps .on::before{background:#B5AAA0}
.reqdetail{margin:16px 0 0;font-size:15.5px}
.keep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;max-width:720px;
  padding:20px 22px;border-radius:22px;background:var(--sage)}
.keep svg{width:20px;height:20px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8}
.keep p{margin:0}
.nores{max-width:640px}
.nores h2{margin:28px 0 10px}
.nores .empty{padding:0 0 4px}

/* --- pager ------------------------------------------------------------------------------------ */
.pager{display:flex;justify-content:center;gap:8px;margin-top:36px}
.pager a{height:40px;padding:0 18px;display:grid;place-items:center;border-radius:999px;background:var(--tint);font-size:14px}
.pager a:hover{background:var(--ink);color:#fff}

/* --- footer ----------------------------------------------------------------------------------- */
.foot{margin:56px 16px 4px;padding:32px 12px 18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-bottom:24px}
.fcols h4{margin:0 0 10px;font:500 13.5px/1.2 var(--body);color:var(--ink)}
.fcols .brand{margin:0 0 10px;font:400 15px/1.2 var(--disp);color:var(--ink)}
.fcols p{margin:0;max-width:44ch}
.fcols a{display:block;line-height:1.95}
.fcols a:hover{color:var(--ink)}
.fine{margin:0;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;letter-spacing:.04em}

/* --- the player dock ---------------------------------------------------------------------------
   Fixed to the bottom of every page, empty and hidden until somebody presses
   play. It survives navigation. #dock-glow is the station's own cover art,
   blurred behind the glass, which is where the dock's colour comes from. */
#dock{position:fixed;inset-inline:0;bottom:0;z-index:60;isolation:isolate;border-top:1px solid rgba(255,255,255,.6);
  background:color-mix(in srgb,#FBF7F2 80%,transparent);color:var(--ink);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 -18px 44px rgba(80,50,25,.2);animation:dockrise .34s cubic-bezier(.2,.9,.25,1)}
#dock[hidden]{display:none}
#dock-glow{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;
  filter:blur(46px) saturate(180%);opacity:.3;transform:scale(1.25)}
.dockin{max-width:1240px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:15px}
#dock-art{width:52px;height:52px;flex:none;border-radius:10px;object-fit:cover;box-shadow:0 6px 18px rgba(60,35,15,.3)}
#dock-art[hidden]{display:none}
#dock-toggle,#dock-close{flex:none}
#dock-toggle{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;
  transition:transform .16s ease,background .16s ease}
#dock-toggle:hover{transform:scale(1.07);background:var(--live)}
#dock-toggle svg{width:22px;height:22px;fill:currentColor;grid-area:1/1}
#dock-toggle .i-play{display:none}
#dock.paused #dock-toggle .i-pause{display:none}
#dock.paused #dock-toggle .i-play{display:block}
#dock.loading #dock-toggle{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
/* Five bars, deliberately not a real spectrum: the stream is cross-origin and
   sends no CORS headers, so nothing here can read a sample of it. */
.dock-eq{display:flex;align-items:flex-end;gap:3px;height:22px;flex:none;opacity:.35}
.dock-eq i{width:3px;height:5px;background:var(--dune);border-radius:1px}
#dock.playing .dock-eq{opacity:1}
#dock.playing .dock-eq i{animation:eq .9s ease-in-out infinite}
#dock.playing .dock-eq i:nth-child(2){animation-duration:1.25s;animation-delay:-.35s}
#dock.playing .dock-eq i:nth-child(3){animation-duration:.72s;animation-delay:-.12s}
#dock.playing .dock-eq i:nth-child(4){animation-duration:1.4s;animation-delay:-.6s}
#dock.playing .dock-eq i:nth-child(5){animation-duration:1.05s;animation-delay:-.25s}
#dock.failed .dock-eq{display:none}
.dock-txt{min-width:0;flex:1;padding-inline-end:6px}
#dock-station{font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dock-song{font:400 16px/1.3 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:songin .4s ease}
#dock.failed #dock-song{font:400 14px/1.4 var(--body);color:#A5521E}
.dock-vol{flex:none;display:flex;align-items:center}
#dock-vol{-webkit-appearance:none;appearance:none;width:92px;height:3px;border-radius:2px;background:#CFC3B6;cursor:pointer}
#dock-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink);border:0}
#dock-vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:0}
#dock-close{width:30px;height:30px;display:grid;place-items:center;color:var(--ink2);border-radius:50%}
#dock-close svg{width:17px;height:17px}
#dock-close:hover{color:var(--ink);background:rgba(255,255,255,.7)}
body:has(#dock:not([hidden])) .page{padding-bottom:110px}
@keyframes eq{0%,100%{height:5px}50%{height:20px}}
@keyframes dockrise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes songin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* --- smaller screens ---------------------------------------------------------------------------- */
@media (max-width:1100px){
  .request,.newcard,.ghosts,.scrollcue{display:none}
  .listeners{inset-inline-start:24px}
  .hero .panel{--panel-w:48%}
  .skyswitch{display:none}
}
@media (max-width:900px){
  .page{padding:12px 10px 40px}
  .frame{border-radius:26px;padding:8px}
  .sky{border-radius:20px}
  /* The panel drops under the sky here, white on the white frame, so a rounded
     lower corner would only show as a faint arc beside it. */
  .sky.has-panel{border-end-start-radius:0}
  .topbar{top:8px;inset-inline:8px;grid-template-columns:auto minmax(0,1fr) auto;padding:14px 14px 0}
  .bar-l .pill,.duo a:first-child{display:none}
  .mark .tagline{display:none}
  .mark .glyph{width:30px;height:26px}
  .phead{min-height:0;padding-bottom:0}
  .phead-body{max-width:none;padding:92px 18px 28px}
  .panel{position:relative;width:auto;padding:16px 12px;border-radius:0}
  .panel::before,.panel::after{display:none}
  .hero{height:auto;padding-bottom:0}
  .headline{padding-top:104px;font-size:clamp(32px,10vw,58px)}
  .listeners{position:relative;inset-inline-start:auto;top:auto;margin:24px auto 0;width:max-content;max-width:calc(100% - 28px)}
  .player{position:relative;inset-inline-start:auto;bottom:auto;margin:150px 14px 24px;width:auto}
  .panel.bleed{padding-block:16px 0;padding-inline:8px 0}
  .sect{padding:44px 12px 8px}
  .sect-head,.findwrap,.cols,.doc{grid-template-columns:1fr;gap:14px}
  .twocol{grid-template-columns:1fr;gap:40px}
  .doc{padding:40px 12px 8px}
  .toc{position:static;display:flex;flex-wrap:wrap}
  .toc a{background:var(--tint)}
  .band{grid-template-columns:1fr;padding:44px 12px 20px;gap:28px}
  .showcase{margin-inline-end:-8px}
  .showcase>a{flex-basis:290px}
  .swipe{display:none}
  .chart,.steps,.steps.two,.faq{grid-template-columns:1fr}
  .crow,.chart.single .crow{grid-template-columns:30px minmax(0,1fr) 64px}
  .crow .bar{display:none}
  .podium{grid-template-columns:1fr}
  .pod{min-height:0}
  .plside{position:static}
  .cols>.plside,.cols>.stmain{grid-column:auto;grid-row:auto}
  .cols>.plside{margin-block:20px 28px}
  /* On a phone the links wrap to two rows, too much to keep on screen: they
     scroll away with the header, and a jump lands its heading at the top. */
  .sectabs{position:static;padding:18px 12px 0;gap:8px}
  .rail{margin:16px 12px 0;top:8px}
  .cmppair{grid-template-columns:1fr;gap:16px}
  .cmphead h2{font-size:28px}
  .cmprow{grid-template-columns:1fr}
  .cmpnums{grid-template-columns:1fr 1fr;text-align:start}
  .sectabs a{padding:8px 14px}
  #recent,#most,#playlist,#compare{scroll-margin-top:16px}
  .sectabs+.sect{padding-top:24px}
  /* Under the log on a phone, and kept short: the cover shrinks to a
     thumbnail beside the name and the player embed is left out (the button
     opens Spotify, and the playlist page keeps its own embed). */
  .cols>.plside img{width:96px;float:inline-start;margin-inline-end:14px}
  .cols>.plside .spot{clear:both}
  .cols>.plside iframe{display:none}
  .srow .sd{display:none}
  .srow .song{overflow-wrap:anywhere}
  /* A table sizes itself to its longest unbreakable word, so one long station
     name or a heading that will not wrap is enough to push it off a phone. */
  .log .song{overflow-wrap:anywhere}
  .log th.n{white-space:normal}
  .follow{grid-template-columns:90px minmax(0,1fr)}
  .follow img{width:90px;height:90px}
  section.embed{padding:28px 12px 0}
  .ask{margin:44px 4px 8px;padding:26px 20px}
  .fcols{grid-template-columns:1fr 1fr}
  .fcols>div:first-child{grid-column:1 / -1}
  /* developer docs: one column, the nav as a disclosure */
  .apidoc{grid-template-columns:minmax(0,1fr);gap:18px;padding:32px 12px 8px}
  .apinav{display:none}
  .apinav-m{display:block;border:1px solid var(--line);border-radius:16px}
  .apinav-m>summary{padding:14px 18px;font-weight:500;cursor:pointer}
  .apinav-m>nav{max-height:60vh;overflow-y:auto;padding:0 6px 8px}
  .epindex{grid-template-columns:minmax(0,1fr);padding:16px}
  .apibody h2{font-size:24px}
}
@media (max-width:640px){
  .dockin{padding:9px 14px;gap:11px}
  .dock-vol{display:none}
  #dock-art{width:42px;height:42px}
  #dock-song{font-size:15px}
  .listen{flex-wrap:wrap}
  /* The adds chart had eight columns and ran 340px off a phone. Here each row
     is a grid: rank, song, artist and the count on one line, the stations
     that added it on the next, the rest stepping aside. */
  .log.adds,.log.adds thead,.log.adds tbody{display:block}
  .log.adds tr{display:grid;grid-template-columns:2.2em minmax(0,1.25fr) minmax(0,1fr) 6.5em;align-items:baseline;border-radius:12px}
  .log.adds .mono,.log.adds .playing,.log.adds .first,.log.adds thead .addedby{display:none}
  .log.adds th,.log.adds td{width:auto}
  .log.adds th.n{min-width:0}
  /* The count heading is a sentence, so on a phone it takes the artist
     heading's room as well; the artist column needs no label. */
  .log.adds thead th:nth-child(4){display:none}
  .log.adds thead th:nth-child(5){grid-column:3 / -1}
  .log.adds tbody tr:nth-child(even){background:var(--tint)}
  .log.adds tbody tr:nth-child(even) td{background:none}
  .log.adds .addedby{grid-column:2 / -1;min-width:0;padding-top:0;font-size:13px}
  .reqsteps{font-size:11px}
  .search{flex-wrap:wrap;border-radius:22px}
  .search input{height:42px}
  .search button{width:100%}
  /* "SEND INN DENNE STASJONEN" cannot wrap as a nowrap button, and its width
     alone pushed the home page's request form 49px off a 320px phone. */
  .findbox .act{white-space:normal;height:auto;min-height:42px;padding-block:10px;text-align:center}
  .langpick>summary{padding:0 10px}
  .ptitle{gap:12px}
  .ptitle .av{width:48px;height:48px;border-radius:12px}
  .ptitle .av.photo{width:72px;height:72px;border-radius:50%}
  /* developer docs */
  .qsteps>li{padding-inline-start:40px}
  .apibody pre.code{font-size:12.5px;padding:12px 14px}
  /* No room beside the copy button on a phone, so the code starts under it. */
  .codebox:has(.copy:not([hidden])) pre.code{padding-top:42px;padding-inline-end:14px}
  /* The parameter table stacks into one small card per parameter. */
  .params,.params tbody,.params tr,.params td{display:block}
  .params thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .params tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .apibody .params td{padding:2px 0;border:0}
  .params td::before{content:attr(data-label) ": ";font-size:12.5px;font-weight:600;color:var(--ink2)}
  .params td:first-child{display:inline-block;margin-inline-end:8px}
  .apibody .params td:nth-child(2),.apibody .params td:nth-child(3),.apibody .params td:nth-child(4){display:inline;font-size:13px;color:var(--ink2)}
  .params td:nth-child(2)::after,.params td:nth-child(3)::after{content:" · "}
  .params td:nth-child(-n+5)::before{content:none}
  .params td:nth-child(5){margin-top:6px}
  .params td:has(.none){display:none}
}
/* A 390px phone: the menu, the mark, Search and the language pill all have to
   share one row, so everything in the bar gets a little tighter rather than
   the wordmark being cut off against the Search pill. Search itself shrinks to
   its magnifier; the label steps aside the way .vh does, so it is still read. */
@media (max-width:480px){
  /* A row with two numbers and a trend mark must still fit 320px: tighter
     gaps, and a number's label may wrap under it. */
  /* On a phone a row's numbers keep their labels on the first row only, where
     they read as column headings; the rest keep them for screen readers. */
  .srow{gap:8px;padding-inline:8px}
  .srow .rk{width:20px}
  .srow .sm{min-width:0;width:50px}
  .srow .sm>span{letter-spacing:.02em;overflow-wrap:anywhere}
  .songs>.srow+.srow:not(.multi) .sm>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Two numbers and a trend do not fit beside a title: they go on a line of
     their own under it, each with its label. */
  .srow.multi{flex-wrap:wrap;row-gap:2px}
  .srow.multi .sn{flex-basis:calc(100% - 28px)}
  .srow.multi .sm{display:flex;align-items:baseline;gap:5px;width:auto;text-align:start}
  .srow.multi .rk+.sn+.sm{margin-inline-start:28px}
  .srow.multi .sm+.sm{margin-inline-start:10px}
  /* The time drops under the song on a phone, so the button and the song keep their width. */
  .listen.split{grid-template-columns:auto minmax(0,1fr)}
  .listen.split time{grid-column:2;padding-inline-start:16px}
  .topbar{gap:6px;padding:12px 10px 0}
  .mark{gap:6px}
  .mark .glyph{width:22px;height:20px}
  .mark .wordmark{font-size:11px}
  .navpick>summary{width:36px}
  .duo a{padding:0 10px}
  .duo .find{width:34px;padding:0;justify-content:center}
  .duo .find .ic{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
  .duo .find .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .log th,.log td,.log .hour th{padding-inline:8px}
}
/* A 320px phone still ran up to 14px short in Dutch and Macedonian, so the
   glyph gives way and the wordmark stays: the name is the brand. */
@media (max-width:360px){
  .mark .glyph{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}