/* SUB92 D2: dark chassis look (docs/d2-build-plan.md). Loaded after style.css only by
   base_d2.html (body[data-ui=d2]); the classic look never sees it. Dark only. */

/* ---- tokens. html:root:root outranks style.css's dark-theme rules (0,2,0). */
html:root:root{color-scheme:dark;
  --d2-page:#15161a;--d2-chassis:#2a2d33;--d2-chassis-edge:#4a4e57;--d2-chassis-top:#5c616b;--d2-chassis-bot:#0d0e10;
  --d2-key:#3a3e46;--d2-key-top:#6a707b;--d2-key-edge:#0d0e10;--d2-win:#0b0c0e;
  --d2-glow:#7df0c2;--d2-amber:#F07A3A;--d2-card:#1d1f24;--d2-card-edge:#2f3238;--d2-rail:#6a707b;
  --d2-label:#8c8a82;--d2-quiet:#5f5e58;--d2-text:#e8e6df;
  --d2-body:"Archivo","IBM Plex Sans","DejaVu Sans",sans-serif;--d2-dots:"Doto","IBM Plex Mono",monospace;
  /* style.css tokens, so classic-styled content reads right on the dark ground */
  --bg:var(--d2-page);--fg:var(--d2-text);--card:var(--d2-card);--line:var(--d2-card-edge);--muted:var(--d2-label);
  --accent:var(--d2-amber);--on-accent:var(--d2-page);--live:var(--d2-glow);
  --bar-bg:var(--d2-page);--bar-fg:var(--d2-text);--bar-muted:var(--d2-label);--bar-accent:var(--d2-amber);
  --bar-line:var(--d2-card-edge);--bar-on-accent:var(--d2-page);--wm-accent:var(--d2-amber);
  --dial-ink:var(--d2-text);--dial-dim:var(--d2-quiet);--dial-accent:var(--d2-amber);
  --land:var(--d2-chassis);--land-line:var(--d2-page);--dot-music:var(--d2-glow);
  --logo-tile-dark:var(--d2-chassis);--body:var(--d2-body);
  --cell:14px}
body{background:var(--d2-page);color:var(--d2-text);font-family:var(--d2-body);font-weight:500}
b,strong{font-weight:700}
.d2-hidden,.dial{display:none}

/* ---- header: wordmark and nav; not sticky (the full chassis is too tall to pin on a phone) */
header.top{padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
header.top{position:sticky;top:0;z-index:40;background:var(--d2-page)} /* stays put; shrinks with the scroll (--shrink, player.js) */
/* --shrink runs 0 → 1 over the first 60px of scroll (player.js); the bar and wordmark follow it */
:root{--shrink:0}
header.top .bar{display:flex;align-items:center;gap:1rem;max-width:1100px;margin:0 auto;min-height:calc(3.25rem - 1rem * var(--shrink));padding:0 8px}
header.top .wordmark{font:900 calc(30px - 10px * var(--shrink))/1 "Big Shoulders Display",var(--d2-body);color:var(--d2-text);letter-spacing:.01em;text-decoration:none}
header.top .wordmark .n92{color:var(--d2-amber)}
header.top .bar nav{display:flex;gap:1.1rem;margin-left:auto}
header.top .bar nav a{font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d2-label);text-decoration:none;padding:4px 0 2px;border-bottom:2px solid transparent}
header.top .bar nav a:hover,header.top .bar nav a:focus-visible{color:var(--d2-text)}
header.top .bar nav a[aria-current="page"],header.top .bar nav a.on{color:var(--d2-text);border-bottom-color:currentColor}
main{max-width:1100px;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.foot{max-width:1100px;padding:0 20px;font:500 10px/1.6 var(--mono);letter-spacing:.06em;color:var(--d2-quiet)}
.foot a{color:inherit}

/* ---- the chassis: graphite body, lit window, hard-edged keys.
   Phone: window / keys row / search row. Desktop: window + 200px key column, search below. */
.chassis{--cell:14px;max-width:1100px;margin:4px auto 14px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"win" "keys" "find";gap:10px;
  background:var(--d2-chassis);border:1px solid var(--d2-chassis-edge);border-top-color:var(--d2-chassis-top);border-bottom-color:var(--d2-chassis-bot);
  border-radius:8px;padding:10px;box-shadow:0 1px 0 #000,inset 0 1px 0 #60656f;color:var(--d2-text)}
.chassis[hidden]{display:grid}
.chassis .key{display:grid;place-items:center;height:38px;margin:0;padding:0 12px;background:var(--d2-key);color:var(--d2-text);
  border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:4px;box-shadow:0 1px 0 var(--d2-key-edge);
  font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.chassis .key:active{box-shadow:none;transform:translateY(1px)}
.chassis .key:focus-visible{outline:2px solid var(--d2-text);outline-offset:2px}

/* window */
.chassis .win{grid-area:win;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;overflow:hidden;
  background:var(--d2-win);border:1px solid #000;border-radius:4px;padding:12px 12px 10px;box-shadow:inset 0 0 24px rgba(0,0,0,.7);color:var(--d2-glow)}
.chassis .r1{display:flex;align-items:baseline;gap:10px;min-width:0}
.chassis .freq{font:900 44px/1 var(--d2-dots);color:var(--d2-glow);text-shadow:0 0 10px var(--d2-glow);white-space:nowrap;flex:none}
.chassis .freq .dp{position:relative;top:-.1em}
.chassis .ident{display:inline-flex;align-items:baseline;gap:5px;min-width:0;overflow:hidden}
.chassis #np-call{font:700 18px/1 var(--d2-dots);letter-spacing:0;color:var(--d2-glow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chassis .saved{font:700 12px/1 var(--d2-body);color:var(--d2-glow);flex:none}
.chassis .saved[hidden]{display:none}
.chassis .r1r{margin-left:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;flex:none;padding-top:4px}
.chassis .bars{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.chassis .bars i{display:block;width:2px;background:var(--d2-glow);opacity:.2}
.chassis .bars i:nth-child(1){height:4px}.chassis .bars i:nth-child(2){height:6px}.chassis .bars i:nth-child(3){height:8px}.chassis .bars i:nth-child(4){height:10px}
.chassis .bars i.on{opacity:.7}
/* band indicator: AM over FM STEREO, the station's band lit, the other unlit like a dropped bar */
.chassis .band{display:inline-flex;flex-direction:column;gap:2px;font:500 9px/1 var(--mono);letter-spacing:.14em;white-space:nowrap}
.chassis .band>span{color:var(--d2-glow);opacity:.2}
.chassis .band>.on{opacity:.7}
.chassis .np-cast{display:grid;place-items:center;width:20px;height:20px;padding:0;background:none;border:0;border-radius:0;color:var(--d2-glow);opacity:.7}
.chassis .np-cast.on{opacity:1}
.chassis .np-cast[hidden]{display:none}

/* scale: 1px ticks at a whole-pixel pitch (15px phone, 8px desktop), end tick at 108 */
.chassis .scale{position:relative;width:301px;max-width:100%;height:28px}
.chassis .scale::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--d2-glow);opacity:.5}
.chassis .scale .ticks{position:absolute;left:0;top:7px;width:100%;height:7px;opacity:.7;
  background-image:linear-gradient(to right,var(--d2-glow) 1px,transparent 1px);background-size:15px 100%;border-right:1px solid var(--d2-glow)}
.chassis .scale .nums,.chassis .scale .track{position:absolute;left:0;top:0;bottom:0;width:calc(100% - 1px)}
.chassis .scale .nums span{position:absolute;bottom:0;white-space:nowrap;font:500 9px/1 var(--mono);letter-spacing:.04em;opacity:.7;transform:translateX(-50%)}
.chassis .scale .nums span:nth-child(1){left:0;transform:none}
.chassis .scale .nums span:nth-child(2){left:20%}.chassis .scale .nums span:nth-child(3){left:40%}
.chassis .scale .nums span:nth-child(4){left:60%}.chassis .scale .nums span:nth-child(5){left:80%}
.chassis .scale .nums span:nth-child(6){left:100%} /* centred on the end tick like the others; the window has room to its right */
.chassis #needle{position:absolute;top:2px;left:var(--needle);width:3px;height:17px;margin-left:-1px;background:var(--d2-glow);
  box-shadow:0 0 8px var(--d2-glow),0 0 2px #fff}

/* song (character cells) and show lines */
.chassis .np{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-width:0}
.chassis .song{display:block;max-width:100%;overflow:hidden;white-space:nowrap;font:700 18px/1.25 var(--d2-dots);color:var(--d2-glow);transition:none}
.chassis .song.mystery{opacity:.6}
.cells{display:inline-grid;grid-auto-flow:column;grid-auto-columns:var(--cell);white-space:nowrap}
.cells>i{display:block;width:var(--cell);text-align:center;overflow:hidden;font-style:normal}
.chassis .song.scan .cells{animation:d2-scan 12s infinite;animation-delay:1s}
@keyframes d2-scan{0%,30%{transform:translateX(0)}70%,100%{transform:translateX(var(--shift))}}
.chassis .show{font:500 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d2-glow);opacity:.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chassis .np-album,.chassis .np-album:empty,.chassis .meter,.chassis .br{display:none}
.chassis .np-casting{display:flex;gap:.5rem;align-items:center;min-width:0;font:500 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d2-glow)}
.chassis .np-casting[hidden]{display:none}
.chassis .np-casting span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chassis .np-casting button,.chassis .np-avoid button{flex:none;padding:2px 8px;border-radius:3px;background:none;border:1px solid currentColor;color:inherit;font:inherit}
.chassis .np-avoid{font:500 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d2-amber)}

/* states */
.chassis.idle .freq,.chassis.idle #np-call,.chassis.idle .band,.chassis.idle #needle{opacity:.35}
.chassis.idle #needle,.chassis.am #needle{left:0}
/* an AM station: the FM dial is not in use; the needle rests dim at the left end, the scale dims */
.chassis.am #needle{opacity:.35}
.chassis.am .scale::before,.chassis.am .scale .ticks{opacity:.25}.chassis.am .scale .nums{opacity:.35}
.chassis .cursor{opacity:.2}
.chassis.tuning .cursor{animation:d2-cursor 3s steps(1,end) infinite}
.chassis.tuning .cells>.cursor~.cursor{animation-delay:-2s}
.chassis.tuning .cells>.cursor~.cursor~.cursor{animation-delay:-1s}
@keyframes d2-cursor{0%{opacity:1}33.333%,100%{opacity:.2}}
.chassis.tuning .bars i{animation:d2-fill 1.2s ease-in-out infinite alternate}
.chassis.tuning .bars i:nth-child(2){animation-delay:.3s}.chassis.tuning .bars i:nth-child(3){animation-delay:.6s}.chassis.tuning .bars i:nth-child(4){animation-delay:.9s}
@keyframes d2-fill{from{opacity:.2}to{opacity:.7}}
.chassis.dropped .bars i{opacity:.2}

/* keys row */
.chassis .keys{grid-area:keys;display:grid;grid-template-columns:64px minmax(0,1fr) 44px auto;gap:8px;align-items:center;min-height:38px}
.chassis #np-toggle{padding:0;width:100%}
.chassis #np-toggle svg{width:16px;height:16px;display:block}
.chassis #np-toggle.off .ico-stop,.chassis #np-toggle:not(.off) .ico-play{display:none}
.chassis.flow #np-toggle{border-color:var(--d2-glow)}
.chassis #np-heart{padding:0;width:100%;font:500 18px/1 var(--d2-body);letter-spacing:0;text-transform:none}
.chassis #np-heart[hidden]{display:grid;visibility:hidden}
.chassis .fader{display:flex;align-items:center;min-width:0;height:38px}
.chassis .vol{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:0;background:none;accent-color:var(--d2-key)}
.chassis .vol[hidden]{display:none}
.chassis .vol::-webkit-slider-runnable-track{height:3px;background:var(--d2-key-edge);border-radius:2px;box-shadow:0 1px 0 #3f434b}
.chassis .vol::-moz-range-track{height:3px;background:var(--d2-key-edge);border-radius:2px;box-shadow:0 1px 0 #3f434b}
.chassis .vol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:22px;margin-top:-10px;background:var(--d2-key);border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:3px;box-shadow:0 1px 0 var(--d2-key-edge)}
.chassis .vol::-moz-range-thumb{width:12px;height:20px;background:var(--d2-key);border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:3px;box-shadow:0 1px 0 var(--d2-key-edge)}
.chassis .vol:focus-visible{outline:2px solid var(--d2-text);outline-offset:2px}
.chassis .donate{display:block;border:0;border-radius:0;padding:0;font:500 10px/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d2-amber);text-decoration:none;text-align:right;white-space:nowrap}
.chassis .donate[hidden]{display:none}
.chassis .donate:hover,.chassis .donate:focus-visible{text-decoration:underline}

/* search row */
.chassis .find{grid-area:find;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0;padding-top:10px;
  border-top:1px solid var(--d2-card);box-shadow:inset 0 1px 0 #3f434b}
.chassis .find .box{display:flex;align-items:center;gap:8px;height:38px;min-width:0;padding:0 10px;cursor:text;
  background:var(--d2-win);border:1px solid #000;border-radius:4px;color:var(--d2-label);transition:border-color .15s,box-shadow .15s}
.chassis .find .box svg{flex:none}
.chassis .find input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:none;color:var(--d2-text);outline:0;font:500 16px/1 var(--d2-body)}
.chassis .find input::placeholder{color:var(--d2-label);font:500 13px/1 var(--mono);letter-spacing:.04em}
.chassis .find .box:focus-within{border-color:var(--d2-rail)}
.chassis .find.nudge .box{border-color:var(--d2-glow);box-shadow:0 0 0 1px var(--d2-glow),0 0 10px rgba(125,240,194,.35)}
.chassis .find .key{padding:0 16px}

/* desktop: window + 200px key column (Stop on top, two rows tall; fader + heart; Donate
   right-aligned), search row across both with Find under the key column */
@media (min-width:36rem){
  .chassis{--cell:16px;grid-template-columns:minmax(0,1fr) 200px;grid-template-areas:"win keys" "find find"}
  .chassis .freq{font-size:68px}
  .chassis #np-call{font-size:22px}
  .chassis .song{font-size:22px}
  .chassis .show,.chassis .np-casting,.chassis .np-avoid{font-size:11px}
  .chassis .scale{width:401px}
  .chassis .scale .ticks{background-size:8px 100%}
  .chassis .scale .nums span{font-size:11px}
  .chassis .keys{grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:84px 38px auto;align-content:start;align-items:center}
  .chassis #np-toggle{grid-column:1/-1;height:84px}
  .chassis #np-toggle svg{width:22px;height:22px}
  .chassis .fader{grid-column:1;grid-row:2}
  .chassis #np-heart{grid-column:2;grid-row:2}
  .chassis .donate{grid-column:1/-1;grid-row:3;justify-self:end}
  .chassis .find{grid-template-columns:minmax(0,1fr) 200px;column-gap:10px}
  header.top .wordmark{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  .chassis .song.scan .cells,.chassis.tuning .cursor,.chassis.tuning .bars i{animation:none}
  .chassis.tuning .cells>i:not(.cursor)+.cursor{opacity:1}
  .chassis .find .box{transition:none}
}

/* ---- search suggestions: the listbox hangs under the chassis box (_chassis.html .combo) */
.chassis .combo{position:relative;min-width:0}
.chassis .suggest{top:calc(100% + 4px);left:0;right:0;z-index:20;max-height:60vh;overflow:auto;padding:4px 0;
  background:var(--d2-card);border:1px solid #000;border-top-color:var(--d2-chassis-edge);border-radius:4px;box-shadow:0 10px 28px rgba(0,0,0,.6)}
.chassis .suggest a{color:var(--d2-text);padding:8px 10px}
.chassis .sg-label{font:500 14px/1.3 var(--d2-body)}
.chassis .sg-detail{font:500 12px/1.3 var(--d2-body);color:var(--d2-label)}
.chassis .sg-kind,.chassis .sg-tag{font:500 9px/1.4 var(--mono);letter-spacing:.12em;color:var(--d2-label);border-color:var(--d2-card-edge)}
.chassis .sg[aria-selected=true] a,.chassis .sg a:hover{background:var(--d2-key)}

/* ---- settings: a gear key at the end of the nav opens a chassis-styled panel */
header.top .bar .settings{position:relative;flex:none}
header.top .settings summary.gear{display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:4px;color:var(--d2-text);
  background:var(--d2-key);border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);box-shadow:0 1px 0 var(--d2-key-edge)}
header.top .settings summary.gear:hover{background:var(--d2-key);color:#fff}
header.top .settings[open] summary.gear{background:#30343b;color:var(--d2-glow);border-top-color:#0d0e10;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)} /* pressed: the key sinks a little and the gear lights */
header.top .settings summary.gear:focus-visible{outline:2px solid var(--d2-text);outline-offset:2px}
header.top .settings .pop{right:0;top:38px;z-index:50;width:min(19rem,calc(100vw - 24px));display:grid;gap:12px;padding:12px;color:var(--d2-text);
  background:var(--d2-chassis);border:1px solid var(--d2-chassis-edge);border-top-color:var(--d2-chassis-top);border-bottom-color:var(--d2-chassis-bot);
  border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.6),inset 0 1px 0 #60656f}
header.top .settings .pop p{margin:8px 0 0;font:500 11px/1.4 var(--d2-body);color:var(--d2-label)}
header.top .settings .minbr{border:0;margin:0;padding:0;min-width:0}
header.top .settings .minbr legend,header.top .settings .avoid,header.top .settings .avoid label{padding:0;font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d2-label)}
header.top .settings .minbr legend{margin-bottom:8px}
header.top .settings .avoid label{color:var(--d2-text);display:inline-flex;gap:6px;align-items:center}
header.top .settings .avoid a{color:var(--d2-text)}
header.top .settings .avoid input{accent-color:var(--d2-glow)}
/* bitrate keys: kbps in a right-aligned 3ch column, then the window's bars lit to that level */
.bkeys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
header.top .settings .bk{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 4px;cursor:pointer;
  background:var(--d2-key);color:var(--d2-text);border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:4px;box-shadow:0 1px 0 var(--d2-key-edge);
  font:500 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.bk input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.bk .n{display:inline-block;width:3ch;text-align:right;white-space:nowrap}
.bk:first-child .n{width:auto}
.bk .bars{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.bk .bars i{display:block;width:2px;background:currentColor;opacity:.22}
.bk .bars i:nth-child(1){height:4px}.bk .bars i:nth-child(2){height:6px}.bk .bars i:nth-child(3){height:8px}.bk .bars i:nth-child(4){height:10px}
.bk .bars i.on{opacity:.85}
header.top .settings .bk:has(input:checked){background:var(--d2-win);color:var(--d2-glow);border-color:#000;box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
header.top .settings .bk:has(input:focus-visible){outline:2px solid var(--d2-text);outline-offset:2px}
header.top .settings .install,header.top .settings .avoid{margin:0;border-top:1px solid var(--d2-card);box-shadow:inset 0 1px 0 #3f434b;padding-top:10px}
header.top .settings .install[hidden]{display:none}
header.top .settings .key{height:30px;padding:0 12px;background:var(--d2-key);color:var(--d2-text);border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);
  border-radius:4px;box-shadow:0 1px 0 var(--d2-key-edge);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

/* ---- home: the list hangs off a grey rail. .home's left edge is the rail (23px from the
   viewport on phones: main's 20px + 3px); each .rseg / .state draws its own 1px segment down
   its left, with no gaps between them, so they join into one rail. Ticks: 9px at left:-12px. */
.home{margin:6px 0 0 3px}
.home .rseg,.home .now .state{position:relative;padding-left:12px}
.home .rseg::before,.home .now .state::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--d2-rail)}
.home>.rseg:first-child::before,.home>.onnow:first-child>.head::before{top:11px} /* the rail starts at the first node */
.home .node{position:relative;display:flex;align-items:center;gap:8px;height:22px;margin:0;min-width:0;
  font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d2-text)}
.home .node::before,.home .lbl::before{content:"";position:absolute;left:-12px;width:9px;height:1px;background:var(--d2-rail)}
.home .node::before{top:11px}
.home .node .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--d2-glow);box-shadow:0 0 6px var(--d2-glow)}
.home .node .q{color:var(--d2-amber);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.home .node .tag{flex:none;font-size:10px;color:var(--d2-label)}
.home .head{padding-bottom:10px}
.home .rq{padding-bottom:22px}
.home .rq .results{margin-top:12px}
/* genre chooser: hung from the ON NOW dot on a cornered tick (down from under the dot, then 9px across) */
/* ON NOW and the genre chooser share one row: node, a short grey joint, then the genres
   (a step smaller so they stay distinct). On a narrow screen the chooser wraps beneath. */
.home .head{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.home .head .node{margin:0;flex:none;width:auto}
.home .head .fmt{flex:1 1 auto;flex-wrap:nowrap;white-space:nowrap}
@media (max-width:420px){.home .head{gap:0 8px}.home .head .node{gap:6px}.home .head .fmt{gap:2px 8px;padding-left:14px}.home .head .fmt label{font-size:10px;letter-spacing:.06em}.home .head .fmt::before{width:9px}}
.home .fmt{position:relative;display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;padding:0 0 0 24px;border:0;min-width:0}
.home .fmt[hidden]{display:none}
.home .fmt::before{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--d2-rail)} /* the joint between NOW and ANY */
.home .fmt legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home .fmt label{display:inline-flex;align-items:center;height:22px;cursor:pointer;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d2-label)}
.home .fmt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.home .fmt label span{padding:3px 0 2px;border-bottom:2px solid transparent}
.home .fmt label:hover span{color:var(--d2-text)}
.home .fmt input:checked+span{color:#fff;border-bottom-color:currentColor}
.home .fmt input:focus-visible+span{outline:2px solid var(--d2-text);outline-offset:3px}
.home .empty,.home .bitrate-note{margin:8px 0 0;font:500 11px/1.5 var(--mono);letter-spacing:.04em;font-style:normal;color:var(--d2-label)}
.home .bitrate-note[hidden],.home .empty[hidden]{display:none}
.home .bitrate-note button{font:inherit;color:var(--d2-text)}
.home .rq .bitrate-note{margin:0 0 8px}
/* state blocks and labels */
.home .now .states{list-style:none;margin:0;padding:0}
.home .now .state{margin:0;padding-top:0;padding-bottom:18px;border:0;break-inside:avoid}
.home .now .state[hidden]{display:none}
.home .now .state:last-child::before{bottom:18px} /* the rail ends at the last row */
.home .now>.empty{margin:0 0 12px 12px}
.home .lbl{position:relative;margin:0 0 6px;padding-top:2px;font:500 10px/14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d2-label)}
.home .lbl::before{top:9px}
.home .results .lbl{margin-top:4px}
/* rows: raised cards, grid 1fr auto (call sign, place, song, show | Play key) */
.home .rows{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:minmax(0,1fr)}
.home .rows+.lbl{margin-top:14px}
.home .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-items:center;padding:10px 12px;
  background:var(--d2-card);border:1px solid var(--d2-card-edge);border-radius:6px;box-shadow:none}
.home .row.lowbr,.home .row.fmtout{display:none}
.home .row>.rid{grid-column:1;grid-row:1;min-width:0}
.home .row>.keys{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:4px;align-items:stretch;margin:0}
.home .row:has(.play.on){border-color:var(--d2-glow)}
.home .row .r1{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;min-width:0}
.home .row .calls{min-width:0;font:700 16px/1.25 var(--d2-body)}
.home .row .call{font:700 16px/1.25 var(--d2-body);letter-spacing:0;color:var(--d2-amber);text-decoration:none}
.home .row .call:hover,.home .row .call:focus-visible{text-decoration:underline}
.home .row .sep{color:var(--d2-label);font-weight:500}
.home .row .where,.home .row .score{font:500 11px/1.25 var(--mono);color:var(--d2-label);white-space:nowrap}
.home .row .score{font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.home .row .sl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;min-width:0;margin-top:3px}
.home .row .sl>.song{flex:1 1 100%;min-width:0} /* the "heard N min ago" note wraps under the song, never squeezes it */
.home .row .song{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 14px/1.35 var(--d2-body);color:#bdbbb3}
.home .row .song.aged{color:var(--d2-label)}
.home .row .song a{color:inherit;text-decoration:none}
.home .row .song a:hover{text-decoration:underline}
.home .row .song .mystery{color:var(--d2-label)}
.home .row .heard{flex:none;font:500 10px/1 var(--mono);letter-spacing:.04em;color:var(--d2-label);white-space:nowrap}
.home .row .meta{margin-top:3px;font:500 11px/1.35 var(--mono);color:var(--d2-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .row .meta a,.home .row .meta .dj{color:inherit;text-decoration:none}
.home .row .meta a:hover{text-decoration:underline}
.home .row .play{display:block;height:34px;margin:0;padding:0 12px;background:var(--d2-key);color:var(--d2-text);
  border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:4px;box-shadow:0 1px 0 var(--d2-key-edge);
  font:500 10px/32px var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.home .row .play.sm{height:26px;padding:0 8px;font-size:9px;line-height:24px}
.home .row .play:active{box-shadow:none;transform:translateY(1px)}
.home .row .play:focus-visible{outline:2px solid var(--d2-text);outline-offset:2px}
.home .row .play.on{background:var(--d2-glow);color:var(--d2-win);border-color:var(--d2-glow)}
.home .row .nostream{display:block;max-width:6.5rem;font:500 10px/1.3 var(--mono);letter-spacing:.04em;font-style:normal;color:var(--d2-quiet);text-align:right}
/* desktop: ON NOW once, then the state blocks in three columns, each block its own rail */
@media (min-width:36rem){
  .home .now{columns:17rem 3;column-gap:28px}
  .home .results .rows{grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
}

/* ==== Sticky stack (D2) ==== */
/* The chassis stays at the top while the page scrolls; the ON NOW (or ON THE MAP) node with
   its genre chooser sticks under it; each state label sticks under those until the next
   state's label pushes it off. player.js keeps --stick-chassis and --stick-head measured. */
:root{--stick-bar:0px;--stick-chassis:0px;--stick-head:0px}
.chassis{position:sticky;top:var(--stick-bar);z-index:30}
.home .rseg.head{position:sticky;top:calc(var(--stick-bar) + var(--stick-chassis));z-index:20;background:var(--d2-page);padding-bottom:8px}
.home .state>.lbl{position:sticky;top:calc(var(--stick-bar) + var(--stick-chassis) + var(--stick-head));z-index:10;background:var(--d2-page);padding-bottom:6px;margin-bottom:0;box-shadow:0 -2px 0 var(--d2-page)}
.home .state{position:relative}
/* ==== Map (D2) ==== */
.mapd2 .mappanel,.mapd2 .map{touch-action:none} /* the map owns every touch inside it: one finger pans, two pinch; the page scrolls from outside the panel */
/* compact chassis (_chassis.html .compact, on while the map is in #main): the full
   chassis without its search row, so the map starts higher; everything else as home. */
.chassis.compact{margin-bottom:10px}
.chassis.compact .find{display:none}

/* rail: ON THE MAP (the home node and genre chooser, .home .node/.fmt), the panel under it */
.mapd2 .head{padding-bottom:14px}
.mapd2 .head::before,.mapd2 .head .node::before{display:none} /* no rail on the map: nothing below the node to connect; the chooser hangs from the dot */
.mapd2 .mapbar{display:block;margin:0}
.mapd2 .fmt .nojs-only{height:22px;margin:0;padding:0 8px;background:var(--d2-key);color:var(--d2-text);border:1px solid var(--d2-key-edge);
  border-top-color:var(--d2-key-top);border-radius:4px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.mapd2 .fmt .nojs-only[hidden]{display:none}
.mapd2 .map-note{margin:8px 0 0;font:500 11px/1.5 var(--mono);letter-spacing:.04em;color:var(--d2-label)}
.mapd2 .map-note[hidden]{display:none}
.mapd2 .map-note button{background:none;border:0;padding:0;font:inherit;color:var(--d2-text);text-decoration:underline;cursor:pointer}

/* the panel: dark, full-bleed on phones (out through main's gutter and .home's 3px) */
.mapd2 .mapwrap{position:relative;margin:0;border:0;border-radius:0;background:none}
.mapd2 .mappanel{position:relative;background:#111216;border:solid #1d1f24;border-width:1px 0;
  margin:0 calc(-1 * max(20px,env(safe-area-inset-right))) 0 calc(-3px - max(20px,env(safe-area-inset-left)))}
.mapd2 .map{border-radius:0}
.mapd2 .map .states{fill:#22252b;stroke:#15161a;stroke-width:calc(.6px * var(--zk,1))} /* --zk (map.js): borders keep their weight when zoomed */
/* dots: squares (map.js sizes and snaps them); green music now, grey talk now, amber with
   a breathing square halo for the station playing; faded while quiet (no song in 15 min) */
.mapd2 .map .dot .sq{fill:var(--d2-rail)}
.mapd2 .map .dot.music-now .sq{fill:var(--d2-glow)}
.mapd2 .map .dot.quiet .sq{fill-opacity:.4}
.mapd2 .map .dot .halo{display:none;fill:none;stroke:var(--d2-amber);stroke-width:1.5px;vector-effect:non-scaling-stroke;pointer-events:none}
.mapd2 .map .dot.playing .sq{fill:var(--d2-amber);fill-opacity:1}
.mapd2 .map .dot.playing .halo{display:inline;animation:d2-breathe 3s ease-in-out infinite}
@keyframes d2-breathe{0%,100%{opacity:.9}50%{opacity:.2}}
.mapd2 .map .dot:hover .sq,.mapd2 .map .dot:focus-visible .sq,.mapd2 .map .dot.sel .sq{stroke:#fff;stroke-width:1.5px;vector-effect:non-scaling-stroke}
/* zoom keys: 30px chassis keys, top right of the panel */
.mapd2 .zoom{top:8px;right:8px;bottom:auto;flex-direction:row;gap:4px} /* a row on phones: clear of the crowded Northeast */
.mapd2 .zoom[hidden]{display:none}
.mapd2 .zoom .key{display:grid;place-items:center;width:30px;height:30px;padding:0;background:var(--d2-key);color:var(--d2-text);
  border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:4px;box-shadow:0 1px 0 var(--d2-key-edge);
  font:500 15px/1 var(--mono);cursor:pointer}
.mapd2 .zoom .key:active{box-shadow:none;transform:translateY(1px)}
.mapd2 .zoom .key:focus-visible{outline:2px solid var(--d2-text);outline-offset:2px}
/* legend: 8px squares; the playing key carries the halo ring too */
.mapd2 .legend{gap:4px 16px;margin:10px 0 0;font:500 10px/1.4 var(--mono);letter-spacing:.14em;color:var(--d2-label)}
.mapd2 .legend>span{gap:6px}
.mapd2 .legend .key{width:8px;height:8px;border-radius:0;background:var(--d2-glow)}
.mapd2 .legend .key.talk-now{background:var(--d2-rail)}
.mapd2 .legend .key.playing{background:var(--d2-amber);box-shadow:0 0 0 2px #111216,0 0 0 3px var(--d2-amber)}
/* the tap card: the list row with its Play key and a close key; under the map on phones */
.mapd2 .mapcard{position:static;z-index:5;width:auto;margin:10px 0 0;box-shadow:none}
.mapd2 .mapcard[hidden]{display:none}
.mapd2 .mapcard .row{grid-template-columns:minmax(0,1fr) auto auto}
.mapd2 .mapcard .x{grid-column:3;grid-row:1;align-self:start;position:static;margin:-6px -8px 0 0;padding:2px 6px;background:none;border:0;
  color:var(--d2-label);font:500 18px/1 var(--d2-body);cursor:pointer}
.mapd2 .mapcard .x:hover,.mapd2 .mapcard .x:focus-visible{color:var(--d2-text)}
.mapd2 .sub{margin:12px 0 0;font:500 11px/1.5 var(--mono);letter-spacing:.04em;color:var(--d2-label)}
/* not on the map yet: a rail label and quiet mono entries */
.mapd2 .offm{margin-top:18px}
.mapd2 .offm::before{top:9px}
.mapd2 .offmap{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font:500 11px/1.5 var(--mono);color:var(--d2-label)}
.mapd2 .offmap a{color:var(--d2-amber);font-weight:700;text-decoration:none}
.mapd2 .offmap .city{font:inherit;color:inherit}
.mapd2 .offmap a:hover,.mapd2 .offmap a:focus-visible{text-decoration:underline}
@media (min-width:36rem){
  .mapd2 .mappanel{margin:0;border-width:1px;border-radius:6px;overflow:hidden}
  .mapd2 .zoom{flex-direction:column}
  .mapd2 .legend{position:absolute;left:12px;bottom:10px;margin:0;pointer-events:none}
  .mapd2 .mapcard{position:absolute;right:12px;bottom:12px;width:360px;margin:0;box-shadow:0 10px 28px rgba(0,0,0,.6)}
}
@media (prefers-reduced-motion:reduce){
  .mapd2 .map .dot.playing .halo{animation:none;opacity:.9}
}
/* ==== Pages (D2) ==== */
/* Station, artist, show, saved and log-in boards (docs/d2-build-plan.md Phase 4). They wrap
   in .home.page, so the Phase 2 rail, node, label and row rules above apply; this adds the
   page node (name, subtitle, quiet line, on-air block, Save key), rail lines and columns. */
.page .pnode{padding-bottom:18px}
.page .nline{display:flex;align-items:flex-start;gap:10px;min-width:0}
.page .nline>.node{flex:1 1 auto}
.page .pnode .node{height:auto;min-height:22px;align-items:flex-start;flex-wrap:wrap;column-gap:8px;row-gap:0}
.page .pnode .node .dot{margin-top:7px}
.page .node .nm{font:700 13px/22px var(--d2-body);letter-spacing:.06em;color:var(--d2-amber);min-width:0}
.page .node .nsub,.page .pnode>.nsub{font:500 11px/22px var(--mono);letter-spacing:.04em;text-transform:none;color:var(--d2-label);white-space:nowrap}
.page .pnode>.nsub{margin:0;white-space:normal;line-height:1.5}
.page .pnode>.nsub a{color:inherit}
.page .pnode>.nsub .call{font:inherit;letter-spacing:inherit;color:var(--d2-amber);text-decoration:none}
.page .pnode>.nsub .call:hover{text-decoration:underline}
.page .quiet{margin:2px 0 0;font:500 10px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d2-quiet)}
.page .quiet a{color:var(--d2-label)}
.page .quiet a:hover,.page .quiet a:focus-visible{color:var(--d2-text)}
.page .quiet .br{font:inherit;letter-spacing:inherit;color:inherit;text-transform:inherit}
.page .quiet .lit{color:var(--d2-glow)}
.page .quiet a.key{color:var(--d2-text);margin-left:6px}
/* the Save key: a small chassis key at the right end of the node line; pressed when saved */
.page .nline>.bm{flex:none;display:block}
.page .bm .heart{display:inline-flex;align-items:center;gap:5px;height:26px;margin:0;padding:0 10px;cursor:pointer;
  background:var(--d2-key);color:var(--d2-text);border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:4px;
  box-shadow:0 1px 0 var(--d2-key-edge);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.page .bm .heart span{font:500 13px/1 var(--d2-body);letter-spacing:0}
.page .bm .heart.on{background:var(--d2-win);color:var(--d2-glow);border-color:#000;box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.page .bm .heart:active{transform:translateY(1px)}
.page .bm .heart:focus-visible{outline:2px solid var(--d2-text);outline-offset:2px}
/* on the air: song (or the talk show's name) and show lines, Play key at the right */
.page .onair{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-items:center;margin-top:10px}
.page .onair>.keys{display:flex;flex-direction:column;gap:4px}
.page .oa{min-width:0}
.page .oa .sl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;min-width:0}
.page .oa .sl>.song{flex:0 1 auto}
.page .oa .song{min-width:0;margin:0;font:500 14px/1.4 var(--d2-body);color:var(--d2-text);overflow-wrap:anywhere}
.page .oa .song.aged{color:var(--d2-label)}
.page .oa .song .mystery{color:var(--d2-label)}
.page .oa .song a,.page .oa .meta a{color:inherit;text-decoration:none}
.page .oa .song a:hover,.page .oa .meta a:hover{text-decoration:underline}
.page .oa .heard{flex:none;font:500 10px/1 var(--mono);letter-spacing:.04em;color:var(--d2-label);white-space:nowrap}
.page .oa .meta{margin-top:2px;font:500 11px/1.4 var(--mono);color:var(--d2-label)}
.page .oa .dj{color:inherit}
.page .oa .until{color:var(--d2-quiet)}
.page .oa .empty,.page .oa .note{margin:2px 0 0;font:500 11px/1.5 var(--mono);letter-spacing:.04em;font-style:normal;color:var(--d2-quiet)}
.page .oa .desc{margin:0;font:500 14px/1.5 var(--d2-body);color:#bdbbb3}
.page .play{display:block;height:34px;margin:0;padding:0 12px;background:var(--d2-key);color:var(--d2-text);
  border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:4px;box-shadow:0 1px 0 var(--d2-key-edge);
  font:500 10px/32px var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.page .play:active{box-shadow:none;transform:translateY(1px)}
.page .play:focus-visible{outline:2px solid var(--d2-text);outline-offset:2px}
.page .play.on{background:var(--d2-glow);color:var(--d2-win);border-color:var(--d2-glow)}
.page .onair .nostream{display:block;max-width:6.5rem;font:500 10px/1.3 var(--mono);letter-spacing:.04em;font-style:normal;color:var(--d2-quiet);text-align:right}
/* sections: one rail segment each; phone: stacked on one rail */
.page .cols>.col,.page>.rseg:not(.pnode){padding-bottom:18px}
.page .cols>.col:last-child::before,.page>.rseg:not(.pnode):last-child::before,.page>.pnode:last-child::before{bottom:18px}
.page .lbl .tag{color:var(--d2-quiet);margin-left:6px}
.page .col .empty,.page>.rseg>.empty{margin:0}
.page .bitrate-note{margin:0 0 6px}
.page .lbl+.bitrate-note[hidden]+.rows,.page .lbl+.rows{margin-top:0}
/* rail lines: mono time | words (Archivo 14) | live dot or "remove" at the right end */
.page .lines{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content minmax(0,1fr) auto;column-gap:10px;row-gap:5px}
.page .ln{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;min-width:0;margin:0;padding:0;border:0}
.page .ln>.t{grid-column:1;font:500 11px/1.4 var(--mono);color:var(--d2-label);white-space:nowrap}
.page .ln>.w{grid-column:2;min-width:0;font:500 14px/1.4 var(--d2-body);color:#bdbbb3}
.page .ln>.w:first-child{grid-column:1/3}
.page .ln>.ld,.page .ln>.bm{grid-column:3}
.page .ln a{color:inherit;text-decoration:none}
.page .ln a:hover,.page .ln a:focus-visible{text-decoration:underline}
.page .ln .dj{color:inherit}
.page .ln .at{font:500 11px/1.4 var(--mono);color:var(--d2-label);white-space:nowrap}
.page .ln .at .call{font:inherit;letter-spacing:inherit;color:var(--d2-amber)}
.page .ln .note{display:block;font:500 11px/1.4 var(--mono);color:var(--d2-label)}
.page .ln.live>.w{color:var(--d2-text)}
.page .ln>.ld{align-self:center;width:7px;height:7px;border-radius:50%;background:var(--d2-glow);box-shadow:0 0 6px var(--d2-glow)}
.page .spins .ln:nth-child(n+3)>.w{color:var(--d2-label)}
.page .blurb p{margin:0 0 6px;font:500 14px/1.5 var(--d2-body);color:#bdbbb3}
.page .blurb a{color:var(--d2-text);text-decoration:none}
.page .blurb a:hover{text-decoration:underline}
.page .lagnote{margin:4px 0 24px 12px;font:500 10px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d2-quiet)}
/* desktop: the node full width, then the sections as rail columns (each its own segment) */
@media (min-width:36rem){
  .page .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));column-gap:28px;align-items:start}
  .page .cols>.col::before{bottom:18px}
}
/* saved and log in: plain lines, a small mono "remove", chassis keys, a window-style input */
.page .lead{margin:8px 0 0;font:500 14px/1.5 var(--d2-body);color:#bdbbb3;max-width:40rem}
.page .lead b{color:var(--d2-text)}
.page .lead a,.page .error a{color:var(--d2-text)}
.page .error{margin:8px 0 0;font:500 12px/1.5 var(--mono);color:var(--d2-amber)}
.page .acts{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.page .key{display:inline-grid;place-items:center;height:30px;margin:0;padding:0 12px;background:var(--d2-key);color:var(--d2-text);
  border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:4px;box-shadow:0 1px 0 var(--d2-key-edge);
  font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer}
.page .key:active{box-shadow:none;transform:translateY(1px)}
.page .key:focus-visible{outline:2px solid var(--d2-text);outline-offset:2px}
.page .acts .key,.page .mail .key,.page .confirm .key{height:38px;padding:0 16px}
.page .rm{display:block;margin:0}
.page .rm button.link{padding:0;background:none;border:0;font:500 10px/1.4 var(--mono);letter-spacing:.08em;color:var(--d2-label);text-decoration:underline;cursor:pointer}
.page .rm button.link:hover,.page .rm button.link:focus-visible{color:var(--d2-text)}
/* saved and history rows: 30px chassis keys at the right end (x removes, the floppy opens
   the save menu, the heart saves a recent play); the menu is a small chassis panel */
.page .ln>.ks{grid-column:3;display:flex;gap:4px;align-self:center}
.page .ln>.bm{align-self:center}
.page .kk{display:grid;place-items:center;width:30px;height:30px;margin:0;padding:0;cursor:pointer;list-style:none;
  background:var(--d2-key);color:var(--d2-text);border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:4px;
  box-shadow:0 1px 0 var(--d2-key-edge);font:500 16px/1 var(--d2-body)}
summary.kk::-webkit-details-marker{display:none}
.page .kk:active{box-shadow:none;transform:translateY(1px)}
.page .kk:focus-visible{outline:2px solid var(--d2-text);outline-offset:2px}
.page .kk.on,.page .savemenu[open]>.kk{background:var(--d2-win);color:var(--d2-glow);border-color:#000;box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.page .savemenu{position:relative}
.page .smpop{position:absolute;right:0;top:36px;z-index:40;display:grid;gap:6px;width:max-content;max-width:min(18rem,calc(100vw - 32px));padding:8px;
  background:var(--d2-chassis);border:1px solid var(--d2-chassis-edge);border-top-color:var(--d2-chassis-top);border-bottom-color:var(--d2-chassis-bot);
  border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.6),inset 0 1px 0 #60656f}
.page .smpop form{margin:0}
.page .smpop .quiet{margin:0}
.page .mi{display:block;width:100%;height:30px;margin:0;padding:0 10px;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--d2-key);color:var(--d2-text);border:1px solid var(--d2-key-edge);border-top-color:var(--d2-key-top);border-radius:4px;
  box-shadow:0 1px 0 var(--d2-key-edge);font:500 10px/28px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.page .mi:active{box-shadow:none;transform:translateY(1px)}
.page .mi:focus-visible{outline:2px solid var(--d2-text);outline-offset:2px}
.page .mi:disabled{cursor:default;background:var(--d2-win);color:var(--d2-glow);border-color:#000;box-shadow:inset 0 1px 3px rgba(0,0,0,.8);transform:none}
.page .ln .call{font:500 11px/1.4 var(--mono);letter-spacing:.04em;color:var(--d2-amber);white-space:nowrap}
.page .more{margin-top:8px}
.page .more a,.page .dl a{font:inherit;letter-spacing:inherit}
.page .end{display:grid;gap:10px;justify-items:start}
.page .end form{margin:0}
.page .end .delete{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.page .end .delete p{flex-basis:100%;margin:0}
.page .end label.quiet{margin:0;display:inline-flex;align-items:center;gap:6px;color:var(--d2-label)}
.page .end input[type=checkbox]{accent-color:var(--d2-glow)}
.page .confirm{margin:12px 0 0}
.page .mail{margin:12px 0 0;display:grid;gap:6px;max-width:30rem}
.page .mail .quiet{margin:0}
.page .mail .row2{display:flex;flex-wrap:wrap;gap:8px}
.page .mail input[type=email]{flex:1 1 12rem;min-width:0;height:38px;margin:0;padding:0 10px;background:var(--d2-win);border:1px solid #000;border-radius:4px;
  box-shadow:inset 0 0 12px rgba(0,0,0,.7);color:var(--d2-text);font:500 16px/1 var(--d2-body)}
.page .mail input[type=email]:focus{outline:0;border-color:var(--d2-glow);box-shadow:0 0 0 1px var(--d2-glow)}
.page .or{margin-top:12px}
/* privacy, about, 404, offline: Archivo body on the page ground, mono labels for headings */
.prose{max-width:640px;margin:8px 0 32px}
.prose h1{margin:16px 0 12px;font:500 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d2-text)}
.prose h2{margin:26px 0 6px;font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d2-label)}
.prose p{margin:0 0 12px;font:500 15px/1.6 var(--d2-body);color:#bdbbb3}
.prose .lede{font-size:18px;line-height:1.45;color:var(--d2-text)}
.prose .sub{font:500 10px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d2-quiet)}
.prose b{color:var(--d2-text)}
.prose a{color:var(--d2-text)}
.prose code{font:500 13px/1 var(--mono);color:var(--d2-text)}