/* ============================================================
   Bill's Archive — legacy bridge (UI audit, 13 Oct 2026)
   Brings the ~300 older pages (Space Mono/Syne purple dialect and the
   Instrument Serif/DM Mono/Outfit dialect) into the brand language of home
   and calendar without rewriting them. Every legacy page links, last in <head>:
       <link rel="stylesheet" href="/ba-brand.css">
       <link rel="stylesheet" href="/ba-legacy.css">
   Font families are swapped in the pages themselves (scripts/fontswap.py in
   .claude/ui-audit-2026-10-13/); this file only does what a cascade can:

   1. Legacy tokens mapped onto brand tokens
   2. Headlines: Montserrat, one h1 scale, gold rule under h2
   3. Prose: DM Sans 17px/1.7, measure capped at 68ch
   4. Chrome accents: purple/orange -> gold (data colours untouched)

   Selector strategy: `html body` + element selectors outrank a page's bare
   element rules (`main p`, `h2`) but still lose to its component classes.
   Where every page must agree (heading family and scale) the selector adds
   :not(#\#), which counts as one id and matches everything, so it beats the
   pages' class rules without !important. Page id rules still win.
   ============================================================ */

/* ---- 1. tokens ---- */
:root{
    --bg-primary:var(--brand-bg,#09090E);--bg-secondary:var(--brand-bg-2,#12121C);--bg-tertiary:var(--brand-bg-3,#1A1A26);
    --text-primary:var(--brand-ink,#F4F4F2);--text-secondary:var(--brand-ink-2,#D2D2DA);--text-muted:var(--brand-ink-3,#A2A2AE);
    --border-color:var(--brand-rule,#272733);
    --accent-synergy:var(--gold,#E8C547);
}
html body{font-family:var(--brand-text,'DM Sans',system-ui,sans-serif)}

/* ---- 2. headlines ---- */
html body :is(h1,h2):not(#\#){font-family:var(--brand-display,'Montserrat','DM Sans',sans-serif);font-weight:800;letter-spacing:-.02em}
/* one h1 scale (30px phone -> 44px desktop, the home H1); set-page heroes keep their own size */
html body h1:not(.set-title,.set-hero h1,#\#){font-size:clamp(1.9rem,1.25rem + 1.6vw,2.75rem);line-height:1.12}
/* h2 rule: short gold segment on a hairline, replacing the purple/orange gradients */
html body :where(main,article,section) h2{border-image:linear-gradient(90deg,var(--gold,#E8C547) 0 56px,var(--brand-rule,#272733) 56px) 1;color:var(--brand-ink,#F4F4F2)}

/* ---- 3. prose (unclassed paragraphs and plain lists only) ---- */
html body main p:where(:not([class])),
html body main :is(ul,ol):where(:not([class]))>li:where(:not([class])){font-size:17px;line-height:1.7;max-width:68ch}
html body main p:where(:not([class])){color:var(--text-secondary)}

/* ---- 4. chrome accents ---- */
html body .toc-bar-label{color:var(--gold,#E8C547)}
html body .toc-bar-links a.active{background:rgba(232,197,71,.12);border-color:rgba(232,197,71,.45)}
html body .article-category{background:none;border:1px solid rgba(232,197,71,.45);color:var(--gold,#E8C547)}
/* author box (128 pages): the purple avatar becomes the logo's sparkle gold */
html body .author-box-avatar{background:linear-gradient(135deg,var(--gold,#E8C547),var(--gold-2,#F0A030))}
html body .author-box-kicker{color:var(--brand-ink-3,#A2A2AE)}
/* default callout: flat surface, gold edge. The .gold/.green/.water variants keep their colours (0,2,0 beats this) */
html body .highlight-box{background:var(--bg-secondary);border-left-color:var(--gold,#E8C547)}

/* ---- 5. surfaces ----
   Every legacy body::before/::after is decoration: a fixed full-screen noise
   texture (z-index 1000, lifts the whole page to a grey #0F0F14 and repaints on
   scroll) or a faint radial glow. Brand pages sit on flat --brand-bg. */
html body::before,html body::after{content:none;display:none}

/* hub/article standfirst: was mono, orange, uppercase */
html body .page-subtitle{font:400 1.1rem/1.6 var(--brand-text,'DM Sans',sans-serif);letter-spacing:0;text-transform:none;color:var(--brand-ink-2,#D2D2DA);max-width:68ch;margin-top:.6rem}
html body .toc-bar-label{font-size:12px;letter-spacing:.12em}

/* ---- 6. pages without the shared rail ----
   44 games/Pocket pages (site-build/build.py + pocket builders) link ba-shared.css but never load
   ba-sidebar.js: they keep their own top nav. ba-shared.css still reserved the rail's 230px column
   on desktop and the 58px/60px top/bottom bars on phones, leaving blank bands. Every page that does
   load the rail has the script tag right after <body>, so :has() settles before first paint. */
@media (min-width:920px){body:where(:not(:has(script[src="/ba-sidebar.js"]))){padding-left:0}}
@media (max-width:919px){body:where(:not(:has(script[src="/ba-sidebar.js"]))){padding-top:0;padding-bottom:0}}
/* their breadcrumb <nav class="crumb"> inherited the page's bare `nav{position:sticky;background…}` rule and stuck over the real nav */
body:where(:not(:has(script[src="/ba-sidebar.js"]))) nav.crumb{position:static;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;box-shadow:none}