/* SALX blog-post reskin -> V3 tokens (flag-gated; loaded only on single posts
   when the V3 chrome is active — see bootstrap.php).
   The ~170 production posts each embed their own inline #salx <style> using
   the OLD brand (Poppins/Lora, #47698f/#2f86a6). Inline body styles print
   AFTER head stylesheets, so every override here uses `body #salx` (1,0,2)
   to outrank the inline `#salx` (1,0,0) rules without touching content.
   Colors ride the CSS variables SALX was built on; fonts must be re-declared
   per selector because SALX hardcodes family names per rule.
   KNOWN GAP: the "Related Podcast Episode" boxes use hardcoded inline hex
   (not vars) and keep the old teal until a scripted retint pass. */

/* ---- token remap (colors flow through everything var-driven) ---- */
body #salx{
	--navy:#102a3a;
	--navy-deep:#0c2230;
	--accent:#2c6e8e;
	--accent-dark:#245a75;
	--ink:#16232e;
	--muted:#586773;
	--line:#e3e0da;
	--tint:#e9eef3;
	font-family:Figtree,system-ui,sans-serif;
}

/* ---- headings: Poppins -> Newsreader (V3 display serif) ---- */
body #salx h1.title{font-family:Newsreader,Georgia,serif;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
body #salx h2.sec,body #salx h3.subsec{font-family:Newsreader,Georgia,serif;font-weight:600;color:var(--ink);}
body #salx .callout h3{font-family:Newsreader,Georgia,serif;font-weight:600;}
body #salx .endcta h2{font-family:Newsreader,Georgia,serif;font-weight:600;}

/* ---- UI microcopy: Poppins -> Figtree ---- */
body #salx .crumbs,body #salx .breadcrumb,body #salx .meta,body #salx .hero-cap,
body #salx .btn,body #salx .author .role,body #salx .author .name,
body #salx .numlist>li::before{font-family:Figtree,system-ui,sans-serif;}

/* ---- body copy: Lora -> Figtree (matches V3 prose sections) ---- */
body #salx .body p,body #salx .body li,body #salx .lead,body #salx .intro-note{font-family:Figtree,system-ui,sans-serif;}
body #salx .lead{color:var(--navy);}

/* ---- quotes stay serif, in the V3 voice ---- */
body #salx .pull,body #salx blockquote p{font-family:Newsreader,Georgia,serif;}

/* ---- buttons match chrome buttons ---- */
body #salx .btn{border-radius:8px;font-weight:600;text-decoration:none;}
body #salx .btn:hover,body #salx .btn:focus{text-decoration:none;color:#fff;}
body #salx .endcta .btn:hover,body #salx .endcta .btn:focus{color:var(--navy);}/* the endcta button is WHITE-bg/navy-text — the generic #fff hover above made its label vanish (user report 2026-08-24) */