/* Static base CSS for Niche of One — extracted from os.njk (per-room :root vars stay inline). */
  /* ── Niche of One: Cream's editorial design (soft radius, hairline borders, soft shadows),
     rendered in pure black / white / greytone. Color images are kept. Network default. ── */
  /* ── UNDERGROUND LIGHT (Zine): newsprint, ink, one stamped red. Network default. ── */
  html[data-theme="niche"]{
    --paper:#F2EEE2; --ink:#14130F; --panel:#E9E3D3; --panel2:#FBF8EF;
    --rule:rgba(20,19,15,.5); --soft:#46423A; --shadow:rgba(20,19,15,.5);
    --accent:#C3301C; --on-accent:#ffffff; --kick:#46423A; --go:#1f7a34; --risk:#C3301C;
    --buy:#C3301C; --on-buy:#ffffff;   /* the one stamped red — money CTAs + accents */
    --on-go:#ffffff; --on-risk:#ffffff;
    --radius:9px; --card-border:1.5px solid var(--ink);
    --card-shadow:3px 3px 0 var(--ink);
    --card-hover-shadow:5px 5px 0 var(--ink);
    --card-hover-transform:translate(-2px,-2px);
    --btn-border:1.5px solid var(--ink); --btn-shadow:2px 2px 0 var(--ink);
    --btn-hover-shadow:4px 4px 0 var(--ink); --btn-hover-transform:translate(-2px,-2px);
  }
  /* ── UNDERGROUND DARK (CRT): near-black, bone, hot red, scanlines; per-room neon killed. ── */
  html[data-theme="dark"]{
    --paper:#0E0D0B; --ink:#E9E4D5; --panel:#15140F; --panel2:#1C1A13;
    --rule:rgba(233,228,213,.22); --soft:#A7A08C; --shadow:rgba(0,0,0,.9);
    --accent:#FF3A2A; --on-accent:#0E0D0B; --kick:#A7A08C; --go:#3FBF6A; --risk:#FF3A2A;
    --buy:#FF3A2A; --on-buy:#0E0D0B; --on-go:#0E0D0B; --on-risk:#0E0D0B;
    --halftone-hero:radial-gradient(rgba(233,228,213,.5) 1px, transparent 1.4px);   /* cream dots on near-black */
    --radius:9px; --card-border:1.5px solid var(--rule);
    --card-shadow:3px 3px 0 rgba(0,0,0,.5); --card-hover-shadow:5px 5px 0 rgba(0,0,0,.6);
    --card-hover-transform:translate(-2px,-2px);
    --btn-border:1.5px solid var(--ink); --btn-shadow:2px 2px 0 rgba(0,0,0,.6);
    --btn-hover-shadow:4px 4px 0 rgba(0,0,0,.6); --btn-hover-transform:translate(-2px,-2px);
  }
  html[data-theme="dark"] img{filter:grayscale(.12) contrast(1.02)}
  /* READER FONTS (menu: Reading font). Body copy only; headings + mono stay the brand faces. */
  html[data-font="legible"]{--bodyfont:'Atkinson Hyperlegible'}
  html[data-font="serif"]{--bodyfont:'Lora'}
  /* GRAIN OFF (menu: Grain switch): flatten the halftone dot textures to clean fills. */
  html[data-tex="off"]{--halftone:none;--halftone-hero:none}
  :root{--hh:62px}   /* fixed header height: main clears it by construction */
  html{scroll-padding-top:calc(var(--hh) + 12px)}   /* anchor jumps land clear of the fixed header */
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:var(--bodyfont,'Figtree'),'Figtree','Helvetica Neue',Arial,sans-serif;
       line-height:1.55;overflow-x:hidden;transition:background .35s var(--ease),color .35s var(--ease)}
  .wrap{max-width:1140px;margin:0 auto;padding:0 26px}
  a{color:inherit;text-decoration:none}
  .disp{font-family:'Bricolage Grotesque',sans-serif}
  .mono{font-family:'Space Mono',monospace}
  .stamp{font-family:'Special Elite',monospace}
  ::selection{background:var(--accent);color:var(--on-accent)}

  /* kicker / metadata */
  .kick{font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
        font-size:.74rem;color:var(--kick)}
  /* bare mode: standalone landing pages (e.g. /veterans/) drop the network chrome */
  html[data-bare] header.os,html[data-bare] .sidenav,html[data-bare] .npbar{display:none!important}
  html[data-bare] body{padding-left:0!important}
  html[data-bare] #main{padding-top:24px!important}

  /* buttons */
  .btn{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;padding:14px 24px;
       border:var(--btn-border);background:var(--panel);color:var(--ink);border-radius:var(--radius);
       box-shadow:var(--btn-shadow);transition:transform .15s var(--pop),box-shadow .15s var(--pop)}
  .btn:hover{transform:var(--btn-hover-transform);box-shadow:var(--btn-hover-shadow)}
  .btn.fill{background:var(--accent);color:var(--on-accent);border-color:var(--rule)}
  /* Conditioned "buy" color on money CTAs only (the .buybtn class + an opt-in .buy modifier).
     Scoped to the niche default so the other 15 themes keep their own accent on buy buttons.
     Specificity (0,2,1) intentionally beats .btn.fill / .keyband .btn / .mget.btn (all 0,2,0). */
  html[data-theme="niche"] .btn.buy, html[data-theme="dark"] .btn.buy,
  html[data-theme="niche"] .buybtn, html[data-theme="dark"] .buybtn{background:var(--buy);color:var(--on-buy);border-color:transparent}
  html[data-theme="niche"] .sub-tier.buy .st-go, html[data-theme="dark"] .sub-tier.buy .st-go,
  html[data-theme="niche"] .sub-tier.buy .st-name, html[data-theme="dark"] .sub-tier.buy .st-name{color:var(--buy)}

  /* card */
  .card{background:var(--panel);border:var(--card-border);box-shadow:var(--card-shadow);
        border-radius:var(--radius);transition:transform .25s var(--pop),box-shadow .25s var(--pop);will-change:transform}
  .card:hover{transform:var(--card-hover-transform);box-shadow:var(--card-hover-shadow)}

  /* underground film grain + CRT scanlines (static texture, pointer-events none) */
  html::after{content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:200px 200px;opacity:.06;mix-blend-mode:multiply}
  html[data-theme="dark"]::after{mix-blend-mode:screen;opacity:.07}
  html[data-theme="dark"]::before{content:"";position:fixed;inset:0;z-index:8999;pointer-events:none;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 3px);mix-blend-mode:multiply}

  /* halftone + stamp */
  .halftone{background-image:var(--halftone);background-size:7px 7px;opacity:.14}
  /* hero halftone fields read on cream: stronger dots + layer opacity (the .14 × 50%-alpha-rule combo was ~.07 effective = invisible). Honors the Grain-off kill switch. */
  .ht.halftone{background-image:var(--halftone-hero);opacity:.24}
  /* drop-in halftone backdrop: add .htbg to a container + a <div class="ht halftone"> first child; the dots sit behind content, no per-child z-index needed */
  .htbg{position:relative;isolation:isolate}
  .htbg > .ht.halftone{position:absolute;inset:0;z-index:-1;pointer-events:none}
  .badge{display:inline-block;font-family:'Special Elite',monospace;border:2px solid var(--rule);
         padding:6px 14px;transform:rotate(-1.5deg);background:var(--accent);color:var(--on-accent);
         box-shadow:4px 4px 0 var(--rule)}

  /* section rhythm */
  .sec{padding:3vh 0}
  .seclbl{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:2rem;margin-bottom:6px}
  .secsub{color:var(--ink);margin-bottom:36px;font-size:1.05rem}
  a:focus-visible,button:focus-visible,.btn:focus-visible,.card:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

  /* cursor (toggleable) */
  .cur,.cur-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;display:none}
  .cur{width:9px;height:9px;background:var(--accent);transform:translate(-50%,-50%)}
  .cur-ring{width:38px;height:38px;border:2px solid var(--rule);transform:translate(-50%,-50%);
            transition:width .3s var(--pop),height .3s var(--pop)}
  .cur-ring.grow{width:74px;height:74px}
  body[data-cursor="dot"] .cur,body[data-cursor="duo"] .cur,body[data-cursor="retro"] .cur{display:block}
  body[data-cursor="ring"] .cur-ring,body[data-cursor="duo"] .cur-ring{display:block}
  body[data-cursor="dot"],body[data-cursor="ring"],body[data-cursor="duo"],body[data-cursor="retro"]{cursor:none}
  body[data-cursor="cross"]{cursor:crosshair}
  body[data-cursor="retro"] .cur{width:14px;height:14px;border-radius:0;border:2px solid var(--rule)}
  @media (hover:none),(pointer:coarse){.cur,.cur-ring{display:none!important}body{cursor:auto!important}}

  /* retro OS boot */
  #boot{position:fixed;inset:0;z-index:9000;background:var(--ink);display:flex;align-items:center;
        justify-content:center;transition:transform .7s var(--ease)}
  #boot .bw{font-family:'Space Mono',monospace;color:var(--paper);font-size:.95rem;letter-spacing:.25em;
            opacity:0;transition:opacity .4s}
  #boot .bw.on{opacity:1}
  #boot.lift{transform:translateY(-100%)}

  /* ===== chrome: header ===== */
  header.os{position:fixed;top:0;left:0;right:0;z-index:60;background:color-mix(in srgb,var(--paper) 86%,transparent);
            backdrop-filter:blur(9px);border-bottom:1px solid transparent;transition:border-color .3s}
  header.os.stuck{border-color:color-mix(in srgb,var(--rule) 30%,transparent)}
  .hbar{display:flex;align-items:center;gap:14px;padding:10px 0}
  .brand{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.06rem;flex:none}
  .brand .dot{width:22px;height:22px;background:url("/icons/jf.png") center/contain no-repeat;flex:none}
  .roomname{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.16em;color:var(--soft);
            border-left:2px solid var(--rule);padding-left:12px;white-space:nowrap}
  .hspring{flex:1}
  nav.inpage{white-space:nowrap}
  /* 44px hit area without fattening the 62px bar: padding carries the target, negative margin
     gives the height back to layout; the underline lives on the label span so it hugs the text */
  nav.inpage a{font-weight:700;font-size:.9rem;margin-left:18px;display:inline-flex;align-items:center;min-height:44px;padding:10px 2px;margin-top:-10px;margin-bottom:-10px}
  nav.inpage a u{text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
  nav.inpage a:hover u{border-color:var(--accent)}
  @media(max-width:1080px){.roomname{display:none}}
  @media(max-width:720px){nav.inpage,.roomname{display:none}}

  /* ── side menu ──────────────────────────────────────────────────────────
     The chrome rule: navigation recedes, content pops. No boxes, no shadows,
     no swatches in here — hairlines, air, one accent bar. The zine stays loud
     on the pages; the menu is the quiet hallway between rooms. */
  :root{--snw:280px;--snr:58px;--hair:color-mix(in srgb,var(--rule) 22%,transparent)}
  .sn-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;flex:none;
    background:none;border:0;color:var(--ink);cursor:pointer;opacity:.85}
  .sn-btn:hover{opacity:1;background:var(--panel)}
  .sn-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .sn-scrim{position:fixed;inset:0;z-index:100020;background:rgba(20,20,20,.45);opacity:0;transition:opacity .22s}
  .sn-scrim.in{opacity:1}
  .sidenav{position:fixed;top:0;bottom:0;left:0;z-index:100030;width:min(86vw,var(--snw));overflow-y:auto;overflow-x:hidden;
    background:var(--paper);color:var(--ink);border-right:1px solid var(--hair);
    padding:22px 18px 30px;transform:translateX(-102%);visibility:hidden;
    transition:transform .25s var(--ease,ease),visibility .25s,width .25s var(--ease,ease),padding .25s var(--ease,ease);scrollbar-width:thin}
  .sidenav.in{transform:translateX(0);visibility:visible;box-shadow:0 0 40px rgba(20,20,20,.18)}
  @media(min-width:1100px){
    .sn-btn{display:none}   /* desktop always has the sidebar or its rail; ☰ is a small-screen thing */
    html[data-snav="open"] .sidenav{transform:none;visibility:visible}
    html[data-snav="open"] body{padding-left:var(--snw)}
    html[data-snav="open"] header.os{left:var(--snw)}
    html[data-snav="open"] .npbar{left:var(--snw)}
    html[data-snav="open"] .cookie-bar{left:var(--snw)}
    /* collapsed = an icon rail, never gone: the logo + glyphs keep the menu discoverable */
    html[data-snav="closed"] .sidenav{transform:none;visibility:visible;width:var(--snr);padding:18px 8px 24px}
    html[data-snav="closed"] body{padding-left:var(--snr)}
    html[data-snav="closed"] header.os{left:var(--snr)}
    html[data-snav="closed"] .npbar{left:var(--snr)}
    html[data-snav="closed"] .cookie-bar{left:var(--snr)}
    html[data-snav="closed"] .sn-tx,html[data-snav="closed"] .sn-lbl,html[data-snav="closed"] .sn-bt,html[data-snav="closed"] .sn-x,html[data-snav="closed"] .sn-vc{display:none}
    html[data-snav="closed"] .sn-head{justify-content:center;padding:0 0 12px}
    html[data-snav="closed"] .sn-item{justify-content:center;padding:9px 0}
    html[data-snav="closed"] .sn-grid{grid-template-columns:1fr}
    html[data-snav="closed"] .sni{margin:0}
    .sn-scrim{display:none}
    @media(prefers-reduced-motion:no-preference){
      body,header.os,.npbar{transition:padding-left .25s var(--ease,ease),left .25s var(--ease,ease)}
    }
    /* floating corner widgets clear the sidebar instead of sitting on it */
  }
  .sn-head{display:flex;justify-content:space-between;align-items:flex-start;padding:0 6px 16px}
  .sn-head .sn-brand{display:inline-flex;align-items:flex-start;gap:10px;color:var(--ink);text-decoration:none}
  .sn-head .sn-brand .dot{width:22px;height:22px;background:url("/icons/jf.png") center/contain no-repeat;flex:none;margin-top:1px}
  .sn-bt{display:flex;flex-direction:column;gap:3px}
  .sn-bt .sn-nm{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:.95rem;letter-spacing:.02em;display:inline-flex;align-items:center;gap:7px}
  .sn-headL{display:flex;align-items:flex-start;gap:10px}
  .sn-vc{font-family:'Space Mono',monospace;font-weight:700;font-size:.72rem;color:var(--kick);border:1px solid var(--accent);padding:2px 6px;text-decoration:none;white-space:nowrap;align-self:flex-start;margin-top:2px}
  .sn-vc:hover{background:var(--accent);color:var(--on-accent)}
  .sn-vc:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  @keyframes snverbump{0%,100%{transform:none}30%{transform:scale(1.18)}}
  .sn-vc.bump{animation:snverbump .5s ease 2}
  /* motion suppression is handled globally by body[data-motion] rules (system pref + Settings override) */
  .sn-bt .sn-net{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.18em;color:var(--soft)}
  .sn-x{background:none;border:0;color:var(--ink);font-size:1.05rem;cursor:pointer;min-width:40px;min-height:40px}
  .sn-x:hover{opacity:1}
  .sni{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;opacity:.7;margin-right:11px}
  .sn-item:hover .sni,.sn-item.here .sni{opacity:1;color:var(--kick)}
  .sn-sec{padding:14px 0 8px;margin-top:6px;border-top:1px solid var(--hair)}
  .sn-sec:first-of-type{border-top:0;margin-top:0;padding-top:0}
  .sn-lbl{font-family:'Space Mono',monospace;font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--soft);margin:0 10px 7px}
  .sn-item{display:flex;align-items:center;min-height:40px;padding:8px 10px;text-decoration:none;color:var(--ink);width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer;
    box-shadow:inset 0 0 0 transparent;transition:background .14s,box-shadow .14s}
  .sn-item:hover{background:var(--panel);box-shadow:inset 3px 0 0 var(--accent)}
  .sn-item.here{box-shadow:inset 3px 0 0 var(--accent);background:var(--panel)}
  .sn-item.here .snt{font-weight:800}
  /* All-Access: the one paid CTA in the rail, drawn in the stamped red to pull the eye */
  .sn-item.sn-key{box-shadow:inset 3px 0 0 var(--accent)}
  .sn-item.sn-key .sni{color:var(--accent);opacity:1}
  .sn-item.sn-key .snt{color:var(--accent);font-weight:700}
  .sn-item.sn-key:hover .sni,.sn-item.sn-key.here .sni{color:var(--accent)}
  .sn-tx{display:flex;flex-direction:column;min-width:0}
  .snt{font-family:'Hanken Grotesque',sans-serif;font-weight:500;font-size:.95rem;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sn-item:hover .snt{font-weight:700}
  .snk{display:none}   /* sublines retired from the menu: labels breathe, details live on the pages */
  /* one column: with icons, two columns at this width forces overflow or ellipsis — both look broken */
  .sn-grid{display:grid;grid-template-columns:minmax(0,1fr)}
  .sn-grid .sn-item{min-width:0}
  .sn-member{display:none}   /* JS reveals for signed-in members; guests see Sign in + Get All-Access */

  /* control buttons (launcher / theme / cursor) */
  .ctl{display:flex;align-items:center;gap:8px;flex:none}
  .ctl .launch svg,.ctl .ico svg{display:block;flex:none}
  /* Substack grammar: ONE loud button per surface. .keybtn is the loud one (the money door);
     Sign in demotes to a quiet ghost link beside it, same as Substack's [Subscribe][Sign in] pair. */
  .keybtn{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;font-family:'Space Mono',monospace;font-weight:700;font-size:.8rem;
    padding:10px 15px;border:2px solid var(--rule);background:var(--accent);color:var(--on-accent);text-decoration:none;
    box-shadow:2px 2px 0 var(--rule);white-space:nowrap;transition:transform .12s,box-shadow .12s}
  .keybtn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--rule)}
  /* promo/ad slot — ghost variant so it reads as a different kind of button */
  .keybtn.promobtn{background:var(--panel);color:var(--ink);border-color:var(--rule);box-shadow:none}
  .keybtn.promobtn:hover{background:var(--panel2);transform:none;box-shadow:none}
  @media(max-width:860px){.keybtn.promobtn{display:none}}
  @media(max-width:640px){.keybtn{display:none}}  /* small screens get the hub band CTA instead */
  /* Subscribe rides next to All-Access: ink-filled so the two doors read as different doors.
     (.ctl button.subbtn outguns the quiet .ctl button chrome rule on purpose) */
  .ctl button.subbtn{font-family:'Space Mono',monospace;font-weight:700;font-size:.8rem;min-height:44px;box-sizing:border-box;
    padding:10px 15px;border:2px solid var(--rule);background:var(--ink);color:var(--paper);opacity:1;
    box-shadow:2px 2px 0 var(--rule);white-space:nowrap;transition:transform .12s,box-shadow .12s}
  .ctl button.subbtn:hover{background:var(--ink);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--rule)}
  @media(max-width:640px){.ctl button.subbtn{display:inline-flex}}   /* subscribe stays even when All-Access yields */
  /* phones keep ONE money door in the bar: compact Subscribe; Sign-in drops to icon-only to make room */
  @media(max-width:440px){.ctl button.subbtn{display:inline-flex;padding:8px 10px;font-size:.74rem}.authbtn .authlbl{display:none}.authbtn{padding:10px 6px}}
  .authbtn{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;gap:7px;font-family:'Space Mono',monospace;font-weight:700;font-size:.8rem;
    padding:10px 9px;border:2px solid transparent;background:none;color:var(--ink);text-decoration:none;white-space:nowrap}
  .authbtn:hover{border-bottom-color:var(--kick);color:var(--kick)}
  .authbtn svg{display:block;flex:none}
  .signin-jump{display:none}   /* ⌘K sign-in entry — JS shows it only when signed OUT */
  /* header icons run quiet: no boxes in the chrome, the page's one loud button stays loud */
  .ctl button{font-family:'Space Mono',monospace;font-size:.8rem;width:auto;min-height:44px;padding:0 12px;
        background:none;color:var(--ink);border:0;cursor:pointer;opacity:.85;
        display:inline-flex;align-items:center;gap:7px;transition:background .15s,opacity .15s}
  .ctl button:hover{background:var(--panel);opacity:1}
  .ctl button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .ctl .ico{width:44px;height:44px;justify-content:center;padding:0}
  .ctl a.ico{opacity:.85}
  .ctl a.ico:hover{background:var(--panel);opacity:1}

  /* PWA standalone: clear the status bar + home indicator with comfortable vertical breathing room
     so content never hugs the screen edge, notch or no notch (real min top + bottom, plus the safe-area inset). */
  @media (display-mode:standalone),(display-mode:fullscreen){
    /* the installed app: the header grows for the status bar, so the clearance grows WITH it,
       and every edge keeps a real gutter even on notchless screens */
    :root{--hh:calc(52px + max(env(safe-area-inset-top),22px))}
    header.os{padding-top:max(env(safe-area-inset-top),22px)}
    body{padding-left:max(env(safe-area-inset-left),12px);padding-right:max(env(safe-area-inset-right),12px);
         padding-bottom:max(env(safe-area-inset-bottom),28px)}
    header.os,.npbar,.cookie-bar{padding-left:max(env(safe-area-inset-left),12px);padding-right:max(env(safe-area-inset-right),12px)}
    .npbar,.aff-pop,.cookie-bar{padding-bottom:max(env(safe-area-inset-bottom),16px)}
        .totop{right:max(env(safe-area-inset-right),16px)}
    .sidenav{padding-left:max(env(safe-area-inset-left),18px)}
  }
  /* Reduced motion: system pref OR the Motion=Reduced setting (body[data-motion="reduced"]) */
  body[data-motion="reduced"] *,body[data-motion="reduced"] *::before,body[data-motion="reduced"] *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ctl .klbl{opacity:.7}
  @media(max-width:560px){.ctl .klbl,.launch .klbl{display:none}}

  /* ===== room launcher / ⌘K palette ===== */
  .scrim{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);display:none;
         align-items:flex-start;justify-content:center;padding:5vh 20px}
  .scrim.open{display:flex}
  .palette{width:100%;max-width:620px;background:var(--paper);border:3px solid var(--rule);
           box-shadow:12px 12px 0 var(--rule);max-height:74vh;display:flex;flex-direction:column;overflow:hidden}
  .palette .phead{display:flex;align-items:center;gap:10px;border-bottom:3px solid var(--rule);padding:14px 16px}
  .palette .phead .kick{flex:none}
  .palette input{flex:1;border:none;background:transparent;color:var(--ink);font-family:'Hanken Grotesque',sans-serif;
                 font-size:1.05rem;outline:none}
  .plist{overflow-y:auto;padding:8px}
  .pitem{display:flex;align-items:center;gap:14px;padding:12px 14px;cursor:pointer;border:2px solid transparent}
  .pitem .sw{width:18px;height:18px;border:2px solid var(--rule);flex:none}
  .pitem .pt{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem}
  .pitem .pk{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.12em;color:var(--soft)}
  .pitem .pb{color:var(--soft);font-size:.85rem;margin-left:auto;text-align:right;max-width:46%}
  .pitem.here{opacity:.8}
  .pitem.sel,.pitem:hover{border-color:var(--rule);background:var(--panel2)}
  .pitem .pnew{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-left:6px}
  .pitem.seen .pnew,.pitem.here .pnew{visibility:hidden}
  .mjump{display:none}   /* member shortcuts — JS reveals these only for signed-in members */
  .pdiv{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.16em;color:var(--soft);
    padding:12px 14px 6px;margin-top:4px;border-top:2px solid var(--rule)}
  @media(max-width:560px){.pitem .pb{display:none}}
  .pfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:3px solid var(--rule);padding:11px 14px}
  .wbtn{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.85rem;background:var(--panel);
    color:var(--ink);border:2px solid var(--rule);padding:8px 14px;cursor:pointer;min-height:40px}
  .wbtn:hover{background:var(--accent);color:var(--on-accent)}
  .creed{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.1em;color:var(--soft);text-transform:uppercase}
  .skip{position:fixed;left:10px;top:-60px;z-index:100003;background:var(--ink);color:var(--paper);
    font-weight:700;padding:11px 16px;border:2px solid var(--accent);transition:top .15s ease}
  .skip:focus{top:10px;outline:3px solid var(--accent);outline-offset:2px}

  /* ===== find bar: the header 🔍 searches in place, browser-find-bar style ===== */
  .hq{flex:1;min-width:0;max-width:430px;margin:0 auto;display:flex;align-items:center;gap:9px;
    border:1px solid var(--hair,color-mix(in srgb,var(--rule) 30%,transparent));background:var(--panel);
    padding:7px 13px;color:var(--soft)}
  .hq:focus-within{border-color:var(--rule);color:var(--ink);outline:2px solid var(--accent);outline-offset:1px}
  .hq input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);outline:none;
    font-family:'Space Mono',monospace;font-size:.84rem}
  .hq input::placeholder{color:var(--soft);opacity:.85}
  @media(max-width:720px){.hq{display:none}}
  @media(min-width:721px){ #open-search{display:none}}
  .nfind{position:fixed;top:var(--hh);left:0;right:0;margin:0 auto;z-index:205;width:min(560px,calc(100vw - 24px));
    display:none;flex-direction:column;background:var(--paper);border:3px solid var(--rule);
    box-shadow:8px 8px 0 var(--rule)}
  .nfind.open{display:flex;animation:nfdrop .14s var(--pop)}
  @keyframes nfdrop{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
  .nf-row{display:flex;align-items:center;gap:10px;padding:11px 14px}
  .nfind input{flex:1;min-width:0;border:none;background:transparent;color:var(--ink);
    font-family:'Space Mono',monospace;font-size:.98rem;outline:none}
  .nf-count{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--soft);white-space:nowrap}
  .nf-x{background:none;border:none;color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;padding:2px 4px}
  .nf-x:hover{color:var(--kick)}
  .nf-list{display:none;overflow-y:auto;max-height:52vh;border-top:3px solid var(--rule);padding:6px}
  .nfind.has .nf-list{display:block}
  .nf-hit{display:block;padding:9px 10px;border:2px solid transparent;color:var(--ink);text-decoration:none}
  .nf-hit.sel,.nf-hit:hover{border-color:var(--rule);background:var(--panel2)}
  .nf-hit .ss{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--kick);border:1px solid var(--accent);padding:1px 6px;margin-right:8px;vertical-align:1px}
  .nf-hit .st{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.98rem}
  .nf-hit .sx{display:block;font-size:.8rem;color:var(--soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nf-foot{display:none;border-top:2px solid var(--rule);padding:8px 14px;font-family:'Space Mono',monospace;font-size:.72rem}
  .nfind.has .nf-foot{display:flex;justify-content:space-between;gap:10px}
  .nf-foot a{color:var(--ink)}
  .nf-foot a:hover{color:var(--kick)}
  .nf-empty{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--soft);padding:10px 12px;margin:0}
  @media(max-width:560px){.nfind{right:12px;left:12px;width:auto}}

  .ver{display:inline-block;font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.04em;
    border:2px solid var(--rule);padding:2px 5px;margin-left:9px;color:var(--kick);text-decoration:none;vertical-align:middle}
  .ver:hover{background:var(--accent);color:var(--on-accent)}
  .ver:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  /* ===== footer ===== */
  footer.os{border-top:3px solid var(--rule);margin-top:4vh;padding:3vh 0 3vh;background:var(--panel2)}
  .fcta-sub{display:inline-block;margin-top:14px;font-family:'Space Mono',monospace;font-size:.8rem;
    color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:2px}
  .fcta-sub:hover{color:var(--kick);border-color:var(--accent)}
  /* CTA band, newsletter capture */
  .fcta{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:var(--panel);
    border:3px solid var(--rule);box-shadow:7px 7px 0 var(--rule);padding:22px 26px;margin-bottom:24px}
  @media(max-width:680px){.fcta{grid-template-columns:1fr;gap:18px}}
  .fcta .fcta-h{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.4rem,3vw,1.95rem);
    line-height:1.04;margin:8px 0}
  .fcta p{color:var(--ink);font-size:.96rem;max-width:44ch}
  /* Fused capture: input + button as ONE control (the Substack subscribe unit). The pair shares
     a single 3px frame + hard shadow; the button never detaches on hover (a joined unit shouldn't). */
  .fcta-form{display:flex;flex-wrap:wrap;gap:0;align-items:stretch;border:3px solid var(--rule);
    box-shadow:5px 5px 0 var(--rule);background:var(--paper)}
  .fcta-form input{flex:1;min-width:0;font-family:'Space Mono',monospace;font-size:.95rem;
    padding:13px 14px;border:0;background:var(--paper);color:var(--ink)}
  .fcta-form input:focus{outline:3px solid var(--accent);outline-offset:-3px}
  .fcta-form button{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;padding:13px 22px;
    border:0;border-left:3px solid var(--rule);background:var(--accent);color:var(--on-accent);cursor:pointer;
    box-shadow:none;transition:filter .12s}
  .fcta-form button:hover{filter:brightness(1.08);transform:none;box-shadow:none}
  @media(max-width:480px){
    .fcta-form input{flex-basis:100%}
    .fcta-form button{width:100%;border-left:0;border-top:3px solid var(--rule)}
  }
  .fcta-note{flex-basis:100%;font-family:'Space Mono',monospace;font-size:.82rem;margin-top:8px;color:var(--ink);min-height:1.1em}
  /* columns */
  .fcols{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-bottom:20px}
  @media(max-width:680px){.fcols{grid-template-columns:1fr;gap:30px}}
  .fbrand{display:inline-flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.1rem}
  .fbrand .dot{width:20px;height:20px;background:url("/icons/jf.png") center/contain no-repeat;flex:none}
  .ftag{color:var(--ink);font-size:.95rem;margin:12px 0 16px;max-width:34ch}
  .fradio{display:inline-flex;align-items:center;gap:9px;min-height:40px;font-family:'Space Mono',monospace;font-weight:700;
    font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--rule);padding:7px 12px}
  .fradio:hover{background:var(--accent);color:var(--on-accent)}
  .fradio .onair{width:9px;height:9px;border-radius:50%;background:#e0202a;border:1px solid var(--rule);animation:onair 1.6s var(--ease) infinite}
  @keyframes onair{0%,100%{opacity:1}50%{opacity:.3}}
  .froom{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
  .froom a{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.88rem;padding:8px 0}
  .froom a .sw{width:12px;height:12px;border:2px solid var(--rule);flex:none}
  .froom a:hover{color:var(--kick)}
  .froom a.here{opacity:.8}
  .flink{display:block;font-size:.92rem;padding:8px 0;color:var(--ink)}
  .flink:hover{color:var(--kick)}
  /* bottom bar */
  .fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--rule);padding-top:20px}
  .colophon{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--soft);letter-spacing:.04em}
  .colophon a,.colophon button{display:inline-block;padding:8px 3px;min-height:30px}
  .fbar kbd{font-family:'Space Mono',monospace;border:1px solid var(--rule);padding:1px 5px;font-size:.9em}

  .js [data-reveal]{opacity:0;transform:translateY(34px)}
  .js [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--pop)}

  /* ===== preferences shelf (inline in the sidebar, no floating panel) ===== */
  .prefs{display:none;position:fixed;bottom:70px;left:calc(var(--snw) + 8px);z-index:100040;
    width:min(348px,calc(100vw - var(--snw) - 16px));max-height:calc(100vh - 100px);overflow-y:auto;
    background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
    box-shadow:0 4px 24px rgba(0,0,0,.13);padding:14px}
  .prefs.open{display:block}
  html[data-snav="closed"] .prefs{left:calc(var(--snr) + 8px);width:min(348px,calc(100vw - var(--snr) - 16px))}
  @media(max-width:860px){.prefs{left:0;right:0;bottom:0;width:100%;max-height:80vh;border-radius:var(--radius) var(--radius) 0 0;border-bottom:none}}
  .prow{margin-bottom:10px}
  .prow:last-child{margin-bottom:0}
  .plabel{display:block;font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--soft);margin-bottom:5px}
  .segs{display:flex;flex-wrap:wrap;gap:4px}
  .segs button{font-family:'Space Mono',monospace;font-size:.72rem;padding:5px 9px;min-height:34px;min-width:38px;
    background:var(--panel);color:var(--ink);border:2px solid var(--rule);cursor:pointer}
  .segs button:hover{background:var(--panel2)}
  .segs button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
  .segs button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  /* theme chips: the palette IS the label */
  .segs.themes button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 5px 4px;min-width:40px;flex:1 1 auto}
  .segs.themes .sw2{display:block;width:24px;height:14px;border:1px solid var(--rule)}
  .segs.themes u{text-decoration:none;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
  .segs.themes button[aria-pressed="true"]{background:var(--panel2);color:var(--ink);outline:2px solid var(--accent);outline-offset:-2px}
  /* font chips render in the face they pick, so the choice is legible at a glance */
  .fontsegs [data-font="legible"]{font-family:'Atkinson Hyperlegible',sans-serif}
  .fontsegs [data-font="serif"]{font-family:'Lora',serif}
  /* accent swatches: color squares + Room/Mono words + a custom-color well */
  .segs.accent{align-items:center}
  .segs.accent button{min-width:30px;min-height:34px;padding:0 6px}
  .segs.accent button[style*="--ac"]{padding:0;width:32px;background:var(--ac)}
  .segs.accent button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
  .segs.accent .ac-word u{text-decoration:none;font-size:.72rem;letter-spacing:.06em}
  .ac-pick{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:34px;min-height:34px;border:2px dashed var(--rule);background:var(--panel);cursor:pointer;
    font-family:'Space Mono',monospace;font-weight:700;color:var(--ink)}
  .ac-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
  /* switches: state at a glance, one tap, half the space */
  .pswrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .pswrow .plabel{margin:0}
  .psw{position:relative;width:44px;height:24px;flex:none;border:2px solid var(--rule);background:var(--panel);cursor:pointer;padding:0}
  .psw::after{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}   /* 44px tap area, invisible */
  .psw i{position:absolute;top:1px;left:1px;width:16px;height:16px;background:var(--ink);transition:transform .15s var(--ease)}
  .psw[aria-checked="true"]{background:var(--accent)}
  .psw[aria-checked="true"] i{transform:translateX(20px);background:var(--on-accent)}
  .psw:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

  @media (prefers-reduced-motion:reduce){
    /* OS reduce-motion is the default, but an explicit Motion=On choice overrides it */
    body:not([data-motion="full"]) *{animation:none!important;transition:none!important}
    body:not([data-motion="full"]) [data-reveal]{opacity:1!important;transform:none!important}
    body:not([data-motion="full"]) #boot{display:none}
    body:not([data-motion="full"]) .cur,body:not([data-motion="full"]) .cur-ring{display:none!important}
  }
  /* ===== Subscribe modal ===== */
  .sub-modal{position:fixed;inset:0;z-index:500;background:rgba(10,10,10,.55);display:none;
    align-items:center;justify-content:center;padding:24px 16px}
  .sub-modal.open{display:flex}
  .sub-card{width:100%;max-width:480px;background:var(--paper);border:var(--card-border);
    box-shadow:var(--card-shadow);border-radius:var(--radius);overflow:hidden}
  .sub-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
    background:var(--ink);color:var(--paper);padding:18px 20px 15px}
  .sub-brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.55rem;
    letter-spacing:.02em}
  .sub-tag{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.18em;
    text-transform:uppercase;opacity:.75;margin-top:3px}
  .sub-x{background:none;border:0;color:var(--paper);font-size:1.5rem;line-height:1;
    cursor:pointer;padding:2px 4px;opacity:.7;flex:none;align-self:flex-start}
  .sub-x:hover{opacity:1}
  .sub-editions{border-bottom:var(--card-border);padding:0 20px}
  .sub-ed{display:flex;gap:14px;padding:14px 0;border-top:var(--card-border)}
  .sub-ed:first-child{border-top:0}
  .sub-freq{font-family:'Space Mono',monospace;font-weight:700;font-size:.72rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--kick);min-width:42px;
    padding-top:2px;flex:none}
  .sub-ed strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
    font-size:1rem;margin-bottom:3px}
  .sub-ed p{font-size:.9rem;color:var(--ink);line-height:1.45;margin:0}
  .sub-form-wrap{padding:16px 20px 20px}
  .sub-form{display:flex;border:var(--card-border);background:var(--paper)}
  .sub-form input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
    font-family:'Space Mono',monospace;font-size:.9rem;padding:11px 12px;outline:none}
  .sub-form input:focus{outline:2px solid var(--accent);outline-offset:-2px}
  .sub-form button{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
    padding:11px 18px;border:0;border-left:var(--card-border);background:var(--accent);
    color:var(--on-accent);cursor:pointer;white-space:nowrap}
  .sub-form button:hover{filter:brightness(1.08)}
  .sub-note{font-family:'Space Mono',monospace;font-size:.74rem;color:var(--soft);
    margin-top:8px;min-height:1.1em}
  .sub-fine{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--soft);
    margin-top:10px;letter-spacing:.04em}
  /* paid tiers shown right under the free signup so the ladder reads at a glance */
  .sub-tiers{border-top:var(--card-border);margin-top:15px;padding-top:14px}
  .sub-tiers-lbl{font-family:'Space Mono',monospace;font-weight:700;font-size:.72rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--kick);margin-bottom:10px}
  .sub-tier{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;text-decoration:none;
    color:var(--ink);border:var(--card-border);background:var(--panel);padding:11px 13px;
    margin-bottom:8px;min-height:44px;transition:background .12s,transform .1s var(--pop)}
  .sub-tier:last-child{margin-bottom:0}
  .sub-tier:hover{background:var(--panel2);transform:translateY(-1px)}
  .sub-tier .st-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1rem}
  .sub-tier .st-price{font-family:'Space Mono',monospace;font-weight:700;font-size:.84rem;color:var(--kick)}
  .sub-tier .st-price i{font-style:normal;font-size:.72rem;color:var(--soft)}
  .sub-tier .st-go{margin-left:auto;font-family:'Space Mono',monospace;font-weight:700;font-size:.84rem;color:var(--kick)}
  .sub-tier .st-desc{flex-basis:100%;font-size:.82rem;color:var(--ink);line-height:1.4;margin-top:2px}

  /* ===== The Mall: storefront wayfinding + affiliate shelves (shared by /store/ and /recommended/) ===== */
  /* the `hidden` attribute must beat display:grid/flex utilities (search panels rely on it) */
  [hidden]{display:none !important}
  .mallnav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px;
    font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
  .mallnav a,.mallnav .here{padding:5px 11px;border:2px solid var(--rule);background:var(--panel);
    color:var(--ink);text-decoration:none;transition:background .12s,transform .1s var(--pop)}
  .mallnav a:hover{background:var(--panel2);transform:translateY(-1px)}
  .mallnav .here{background:var(--accent);color:var(--on-accent)}
  .mallnav .arr{border:0;background:none;padding:0 1px;color:var(--ink)}
  /* shop search */
  .shopsearch{margin:20px 0 6px}
  .shopsearch input{width:100%;max-width:480px;font-family:'Space Mono',monospace;font-size:.95rem;
    padding:12px 16px;border:3px solid var(--rule);background:var(--panel);color:var(--ink)}
  .shopsearch input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .searchcount{font-family:'Space Mono',monospace;font-size:.76rem;color:var(--ink);margin:8px 0 18px;min-height:1em}
  .noresults{font-family:'Space Mono',monospace;color:var(--ink);padding:18px 0}
  /* affiliate disclosure note */
  .affnote{border-left:4px solid var(--accent);background:var(--panel2);
    padding:11px 15px;margin:16px 0 0;font-size:.95rem;color:var(--ink);max-width:72ch}
  /* shop tiles (the "tabs", big & loud storefront signs) */
  .catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:24px;margin-top:10px}
  .catcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:186px;
    padding:26px 24px 22px;border:4px solid var(--rule);background:var(--panel);box-shadow:9px 9px 0 var(--rule);
    text-decoration:none;color:var(--ink);transition:transform .14s var(--pop),box-shadow .14s var(--pop)}
  .catcard::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--accent)}
  .catcard:hover{transform:translate(-4px,-4px);box-shadow:14px 14px 0 var(--accent)}
  .catcard h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.7rem;
    line-height:1.0;letter-spacing:-.01em;margin-top:4px}
  .catcard p{font-size:.92rem;color:var(--ink);margin-top:10px;flex:1}
  .catcard .catn{display:inline-block;align-self:flex-start;font-family:'Space Mono',monospace;font-weight:700;
    font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--on-accent);
    background:var(--accent);padding:4px 11px;margin-top:18px}
  .catcard.shop-discover::before{background:var(--ink)}
  .catcard.shop-discover .catn{background:var(--ink);color:var(--paper)}
  /* compact affiliate product cards */
  .affgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:22px}
  .card.aff .bd{padding:16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
  .afftag{font-family:'Space Mono',monospace;font-weight:700;font-size:.72rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--kick)}
  .card.aff h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.18;flex:1}
  .card.aff .prow{display:flex;align-items:center;justify-content:flex-end;margin-top:6px}
  /* compact action button (shared; store re-styles its own .prod .get locally) */
  .get{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.88rem;padding:9px 15px;
    border:3px solid var(--rule);background:var(--panel);color:var(--ink);text-decoration:none;display:inline-block;
    box-shadow:4px 4px 0 var(--rule);transition:transform .12s var(--pop),box-shadow .12s var(--pop),background .15s}
  .get:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rule)}
  .get:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .card.aff:hover .get{background:var(--accent);color:var(--on-accent)}

  /* ===== site-wide now-playing mini-bar, one-tap GZS 197.7 on every room ===== */
  .npbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;gap:12px;
    padding:8px 16px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(9px);
    border-top:3px solid var(--rule);font-family:'Space Mono',monospace}
  .npbar[hidden]{display:none}
  body.has-player{padding-bottom:calc(58px + env(safe-area-inset-bottom))}   /* reserve the bar's space up front (no layout shift) */
  .np-play{width:44px;height:44px;flex:none;border:2px solid var(--rule);background:var(--accent);
    color:var(--on-accent);border-radius:50%;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .np-play:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .np-on{display:inline-flex;align-items:center;gap:7px;flex:none;font-weight:700;font-size:.72rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--kick)}
  .np-blip{width:8px;height:8px;border-radius:50%;background:var(--accent);border:1px solid var(--rule);
    animation:onair 1.6s var(--ease) infinite}
  .np-track{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem;color:var(--ink)}
  .np-open{flex:none;font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    border:2px solid var(--rule);padding:6px 10px;color:var(--ink)}
  .np-open:hover{background:var(--accent);color:var(--on-accent)}
  .np-x{flex:none;width:44px;height:44px;border:2px solid var(--rule);background:transparent;color:var(--ink);
    cursor:pointer;font-size:1rem;line-height:1}
  .np-x:hover{background:var(--risk);color:var(--on-risk)}
  @media(max-width:560px){.np-open{display:none}.np-on span:last-child{display:none}}
  @media (prefers-reduced-motion:reduce){.np-blip{animation:none}}
  /* back to top — clears the radio bar; opposite corner from the help dot */
  .totop{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 72px);z-index:56;
    width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:3px solid var(--rule);
    background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--rule);cursor:pointer;
    font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.4rem;line-height:1;
    opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s var(--pop),background .15s}
  .totop.show{opacity:1;transform:none;pointer-events:auto}
  .totop:hover{background:var(--accent);color:var(--on-accent)}
  .totop:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){.totop{transition:opacity .2s}}

  /* ===== The Mall Map: directory board ===== */
  .mallmap{border:4px solid var(--rule);background:var(--panel);box-shadow:10px 10px 0 var(--rule)}
  .mm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding:15px 20px;border-bottom:4px solid var(--rule);background:var(--ink)}
  .mm-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.3rem;color:var(--paper)}
  .mm-legend{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--paper);display:flex;align-items:center;gap:6px}
  .mm-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent)}
  .mm-rows{list-style:none}
  .mm-row{display:grid;grid-template-columns:auto 1fr auto;column-gap:16px;row-gap:3px;align-items:center;
    padding:15px 20px;border-bottom:2px solid var(--rule);text-decoration:none;color:var(--ink);
    transition:background .12s,transform .1s var(--pop)}
  .mm-rows li:last-child .mm-row{border-bottom:0}
  .mm-row:hover{background:var(--panel2);transform:translateX(4px)}
  .mm-row.here{background:var(--accent);color:var(--on-accent)}
  .mm-no{grid-column:1;grid-row:1/3;align-self:center;font-family:'Space Mono',monospace;font-weight:700;font-size:.95rem}
  .mm-main{grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .mm-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.26rem;line-height:1}
  .mm-kick{font-family:'Space Mono',monospace;font-weight:700;font-size:.72rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--kick)}
  .mm-row.here .mm-kick{color:var(--on-accent)}
  .mm-blurb{grid-column:2;grid-row:2;font-size:.9rem;color:var(--ink)}
  .mm-row.here .mm-blurb{color:var(--on-accent)}
  .mm-go{grid-column:3;grid-row:1/3;align-self:center;font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800;font-size:1.05rem;white-space:nowrap;display:flex;align-items:center;gap:5px}