/* NOIR BOOK — Fira Sans, Black & White (v51) */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   DESIGN TOKENS (v51)
   ============================================================
   Clean black-on-white system. No warm tones, no copper accent.
   The four discipline pigments are the ONLY colors in the UI
   — everything else is neutral ink on neutral paper.

   Theme-invariant tokens (typography, spacing, radius, layout,
   z-index, easing) live in :root and are declared exactly once.
   Color tokens have a light default in :root and a dark override
   in @media(prefers-color-scheme:dark) + [data-theme="dark"].
   ============================================================ */

:root{
  /* ── Type families ── */
  --font-display:'Fira Sans',system-ui,-apple-system,sans-serif;
  --font-body:'Fira Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* Font weights */
  --fw-thin:200;
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* Letter-spacing scale */
  --ls-tight:-.03em;
  --ls-snug:-.02em;
  --ls-normal:0;
  --ls-wide:.02em;
  --ls-wider:.03em;
  --ls-widest:.06em;

  /* Line-heights */
  --lh-tight:1.12;
  --lh-heading:1.15;
  --lh-card:1.3;
  --lh-body:1.7;
  --lh-loose:1.8;

  /* Font-size scale.
     Accessibility rule: 15px floor for CONTENT. 13px allowed for
     NAV CHROME only (nav links, breadcrumbs, codes, counts, small meta). */
  --fs-nano:13px;
  --fs-micro:15px;
  --fs-body:16px;
  --fs-body-lg:17px;
  --fs-h4:18px;
  --fs-h3:22px;
  --fs-h2:28px;
  --fs-h1:clamp(32px,5vw,48px);
  --fs-hero:clamp(36px,6vw,56px);

  /* ── Layout widths ── */
  --max-width:1140px;
  --content-width:680px;
  --sidebar-width:200px;
  --nav-height:72px;

  /* ── Spacing scale (4px base) ── */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-24:96px;

  /* ── Radius scale ── */
  --radius-xs:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-xl:10px;
  --radius-pill:999px;

  /* ── Z-index scale ── */
  --z-back-to-top:90;
  --z-progress:99;
  --z-nav:100;
  --z-search:200;
  --z-toast:300;
  --z-burger-overlay:300;
  --z-burger-panel:301;

  /* ── Easing ── */
  --ease:0.2s ease;
  --ease-fast:0.15s ease;
  --ease-slow:0.3s ease;
  --ease-spring:0.42s cubic-bezier(.34,1.46,.64,1);

  /* ── Color tokens — Light mode (default) ──
     Neutral white surfaces, neutral near-black ink.
     Discipline colors are the sole chromatic accent. */

  /* Surfaces — pure white stack */
  --paper:#FFFFFF;          /* page bg */
  --paper-warm:#F5F5F5;     /* card bg, subtle surface */
  --paper-deep:#EBEBEB;     /* sunken surface / hover fill */
  --paper-white:#FFFFFF;    /* input bg (alias of --paper) */
  /* Parchment, used for the homepage filter-bar frame (Phase D.1, v58).
     Pale yellow that pops more than --paper-warm without competing with
     discipline colors. -deep is for nested surfaces inside the frame
     (e.g. secondary filter buttons). */
  --paper-parchment:#FAF3E0;
  --paper-parchment-deep:#ECE5CE;

  /* Ink — neutral near-black stack.
     --ink-soft is the body copy default (slightly lighter than headings).
     --ink-medium is for secondary copy: subtitles, captions.
     --ink-light is for deemphasised UI: hints, placeholders, checked items.
     --ink-faint is for decorative non-text only: icons, dashed borders.
     --ink-hairline is for borders — never used as text. */
  --ink:#0A0A0A;
  --ink-soft:#1A1A1A;
  --ink-medium:#595959;
  --ink-muted:#595959;      /* alias → ink-medium */
  --ink-light:#7A7A7A;
  --ink-faint:#A0A0A0;
  --ink-hairline:#E2E2E2;

  /* Ink alpha ramp — used for hover tints, focus rings, faint backgrounds.
     The library is monochrome (ink + paper); these alphas are the only
     way to express depth without introducing accent hues. */
  --ink-a06:rgba(10,10,10,0.06);
  --ink-a10:rgba(10,10,10,0.10);
  --ink-a12:rgba(10,10,10,0.12);
  --ink-a14:rgba(10,10,10,0.14);
  --ink-a22:rgba(10,10,10,0.22);
  --ink-a40:rgba(10,10,10,0.40);
  --ink-a55:rgba(10,10,10,0.55);

  /* Discipline pigments — four vivid categoricals, the only colors in the UI. */
  --disc-ux:#1A7A52;          /* green — UX Design */
  --disc-pm:#C03A1E;          /* red — Product */
  --disc-mk:#2A4FA8;          /* blue — Marketing */
  --disc-cs:#8C2B6A;          /* plum — Content */
  --disc-ux-bg:rgba(26,122,82,0.08);
  --disc-pm-bg:rgba(192,58,30,0.08);
  --disc-mk-bg:rgba(42,79,168,0.08);
  --disc-cs-bg:rgba(140,43,106,0.08);
  --disc-ux-tint:transparent;
  --disc-pm-tint:transparent;
  --disc-mk-tint:transparent;
  --disc-cs-tint:transparent;

  /* Discipline aliases — keep existing component selectors working. */
  --rust:var(--disc-pm);
  --rust-bg:var(--disc-pm-bg);
  --teal:var(--disc-ux);
  --teal-bg:var(--disc-ux-bg);
  --navy:var(--disc-mk);
  --navy-bg:var(--disc-mk-bg);
  --plum:var(--disc-cs);
  --plum-bg:var(--disc-cs-bg);

  /* Content-type bands — ink tonal scale (theory = primary, examples = tertiary). */
  --theory-color:var(--ink);
  --theory-bg:rgba(10,10,10,0.06);
  --practical-color:var(--ink-medium);
  --practical-bg:rgba(10,10,10,0.05);
  --examples-color:var(--ink-faint);
  --examples-bg:rgba(10,10,10,0.04);

  /* Tier bands — ink tonal scale (darker = more essential). */
  --tier1-color:var(--ink);
  --tier1-bg:rgba(10,10,10,0.08);
  --tier2-color:var(--ink-medium);
  --tier2-bg:rgba(10,10,10,0.06);
  --tier3-color:var(--ink-faint);
  --tier3-bg:rgba(10,10,10,0.04);
  --tier4-color:var(--ink-faint);
  --tier4-bg:rgba(10,10,10,0.03);

  /* NNG source marker. */
  --nng:var(--disc-pm);
  --nng-bg:var(--disc-pm-bg);

  /* Shadows — neutral. */
  --shadow-sm:0 1px 4px rgba(0,0,0,0.06),0 2px 6px rgba(0,0,0,0.08);
  --shadow-md:0 4px 14px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06);
  --shadow-lg:0 10px 28px rgba(0,0,0,0.10),0 2px 6px rgba(0,0,0,0.06);
  --shadow-focus:0 0 0 3px rgba(10,10,10,0.15),0 1px 4px rgba(0,0,0,0.08);
  --shadow-popover:0 14px 36px rgba(0,0,0,0.14),0 4px 12px rgba(0,0,0,0.08);
  --scrim:rgba(0,0,0,0.55);
}

html{scroll-padding-top:calc(var(--nav-height) + 24px)}

/* Dark mode — system preference. */
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  --paper:#0A0A0A;
  --paper-warm:#2D2D2D;
  --paper-deep:#383838;
  --paper-white:#2D2D2D;
  --paper-parchment:#1A1611;
  --paper-parchment-deep:#221E15;
  --ink:#FAFAFA;
  --ink-soft:#E8E8E8;
  --ink-medium:#9A9A9A;
  --ink-muted:#9A9A9A;
  --ink-light:#6A6A6A;
  --ink-faint:#4A4A4A;
  --ink-hairline:#2A2A2A;
  --ink-a06:rgba(250,250,250,0.06);
  --ink-a10:rgba(250,250,250,0.10);
  --ink-a12:rgba(250,250,250,0.12);
  --ink-a14:rgba(250,250,250,0.14);
  --ink-a22:rgba(250,250,250,0.22);
  --ink-a40:rgba(250,250,250,0.40);
  --ink-a55:rgba(250,250,250,0.55);
  --disc-ux:#3DB87A;
  --disc-pm:#E8512A;
  --disc-mk:#5A7FCC;
  --disc-cs:#C44A90;
  --disc-ux-bg:rgba(61,184,122,0.12);
  --disc-pm-bg:rgba(232,81,42,0.12);
  --disc-mk-bg:rgba(90,127,204,0.12);
  --disc-cs-bg:rgba(196,74,144,0.12);
  --disc-ux-tint:rgba(61,184,122,0.25);
  --disc-pm-tint:rgba(232,81,42,0.25);
  --disc-mk-tint:rgba(90,127,204,0.25);
  --disc-cs-tint:rgba(196,74,144,0.25);
  --theory-color:var(--ink);
  --theory-bg:rgba(250,250,250,0.06);
  --practical-color:var(--ink-medium);
  --practical-bg:rgba(250,250,250,0.05);
  --examples-color:var(--ink-faint);
  --examples-bg:rgba(250,250,250,0.04);
  --tier1-color:var(--ink);
  --tier1-bg:rgba(250,250,250,0.08);
  --tier2-color:var(--ink-medium);
  --tier2-bg:rgba(250,250,250,0.06);
  --tier3-color:var(--ink-faint);
  --tier3-bg:rgba(250,250,250,0.04);
  --tier4-color:var(--ink-faint);
  --tier4-bg:rgba(250,250,250,0.03);
  --shadow-sm:0 1px 4px rgba(0,0,0,0.35),0 2px 6px rgba(0,0,0,0.25);
  --shadow-md:0 4px 14px rgba(0,0,0,0.40),0 1px 4px rgba(0,0,0,0.25);
  --shadow-lg:0 10px 28px rgba(0,0,0,0.45),0 2px 6px rgba(0,0,0,0.25);
  --shadow-focus:0 0 0 3px rgba(250,250,250,0.15),0 1px 4px rgba(0,0,0,0.30);
  --shadow-popover:0 14px 36px rgba(0,0,0,0.55),0 4px 12px rgba(0,0,0,0.30);
  --scrim:rgba(0,0,0,0.65);
}
}

/* Dark mode — manual override. */
[data-theme="dark"]{
  --paper:#0A0A0A;
  --paper-warm:#2D2D2D;
  --paper-deep:#383838;
  --paper-white:#2D2D2D;
  --paper-parchment:#1A1611;
  --paper-parchment-deep:#221E15;
  --ink:#FAFAFA;
  --ink-soft:#E8E8E8;
  --ink-medium:#9A9A9A;
  --ink-muted:#9A9A9A;
  --ink-light:#6A6A6A;
  --ink-faint:#4A4A4A;
  --ink-hairline:#2A2A2A;
  --ink-a06:rgba(250,250,250,0.06);
  --ink-a10:rgba(250,250,250,0.10);
  --ink-a12:rgba(250,250,250,0.12);
  --ink-a14:rgba(250,250,250,0.14);
  --ink-a22:rgba(250,250,250,0.22);
  --ink-a40:rgba(250,250,250,0.40);
  --ink-a55:rgba(250,250,250,0.55);
  --disc-ux:#3DB87A;
  --disc-pm:#E8512A;
  --disc-mk:#5A7FCC;
  --disc-cs:#C44A90;
  --disc-ux-bg:rgba(61,184,122,0.12);
  --disc-pm-bg:rgba(232,81,42,0.12);
  --disc-mk-bg:rgba(90,127,204,0.12);
  --disc-cs-bg:rgba(196,74,144,0.12);
  --disc-ux-tint:rgba(61,184,122,0.25);
  --disc-pm-tint:rgba(232,81,42,0.25);
  --disc-mk-tint:rgba(90,127,204,0.25);
  --disc-cs-tint:rgba(196,74,144,0.25);
  --theory-color:var(--ink);
  --theory-bg:rgba(250,250,250,0.06);
  --practical-color:var(--ink-medium);
  --practical-bg:rgba(250,250,250,0.05);
  --examples-color:var(--ink-faint);
  --examples-bg:rgba(250,250,250,0.04);
  --tier1-color:var(--ink);
  --tier1-bg:rgba(250,250,250,0.08);
  --tier2-color:var(--ink-medium);
  --tier2-bg:rgba(250,250,250,0.06);
  --tier3-color:var(--ink-faint);
  --tier3-bg:rgba(250,250,250,0.04);
  --tier4-color:var(--ink-faint);
  --tier4-bg:rgba(250,250,250,0.03);
  --shadow-sm:0 1px 4px rgba(0,0,0,0.35),0 2px 6px rgba(0,0,0,0.25);
  --shadow-md:0 4px 14px rgba(0,0,0,0.40),0 1px 4px rgba(0,0,0,0.25);
  --shadow-lg:0 10px 28px rgba(0,0,0,0.45),0 2px 6px rgba(0,0,0,0.25);
  --shadow-focus:0 0 0 3px rgba(250,250,250,0.15),0 1px 4px rgba(0,0,0,0.30);
  --shadow-popover:0 14px 36px rgba(0,0,0,0.55),0 4px 12px rgba(0,0,0,0.30);
  --scrim:rgba(0,0,0,0.65);
}

/* [data-theme="light"] no longer needs to redeclare tokens —
   the @media block uses :root:not([data-theme="light"]) so the
   light defaults from :root remain in effect. */

/* Theme toggle button — sits inside the theme-aware nav */
.theme-toggle{background:none;border:1px solid var(--ink);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);font-size:var(--fs-h4);transition:background var(--ease),border-color var(--ease),color var(--ease);flex-shrink:0;border-radius:var(--radius-xs);position:relative;z-index:5;pointer-events:auto;isolation:isolate;transform:translateZ(0)}
.theme-toggle:hover{border-color:var(--ink);color:var(--paper-white);background:var(--ink)}
.theme-toggle > *{pointer-events:none}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs-body);scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;transition:background 0.3s ease,color 0.3s ease}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--ink)}
::selection{background:var(--ink);color:var(--paper-white)}

/* Site nav — theme-matching surface.
   Light mode: paper bg with hairline border, ink text.
   Dark mode: paper (which flipped to dark) bg, ink (which flipped to light) text.
   Nav matches the page surface in each theme. */
.site-nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--paper);border-bottom:1px solid var(--ink-hairline);height:var(--nav-height);backdrop-filter:blur(14px)}
.nav-inner{max-width:var(--max-width);margin:0 auto;padding:0 40px;height:100%;display:flex;align-items:center;gap:24px}
.site-logo{font-family:var(--font-body);font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--ink);display:flex;align-items:center;gap:14px;letter-spacing:var(--ls-snug);margin-right:auto}
.logo-mark{width:40px;height:40px;background:var(--ink);color:var(--paper-white);display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-micro);letter-spacing:var(--ls-widest);border-radius:var(--radius-xs)}

/* Discipline theming on subpages — logo mark color only.
   The header strip is fully inverted (see "INVERTED HEADER STRIP" block
   at the bottom of this file), so the discipline tint background is
   dropped — it would barely register on the now-dark surface.
   Discipline signal lives entirely on the .logo-mark color. */
.subpage-nav[data-discipline="ux"] .logo-mark{background:var(--disc-ux)}
.subpage-nav[data-discipline="pm"] .logo-mark{background:var(--disc-pm)}
.subpage-nav[data-discipline="mk"] .logo-mark{background:var(--disc-mk)}
.subpage-nav[data-discipline="cs"] .logo-mark{background:var(--disc-cs)}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{font-size:var(--fs-nano);font-weight:var(--fw-regular);color:var(--ink);text-transform:uppercase;letter-spacing:var(--ls-wider);transition:color var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
/* Nav filters — pills + search in nav bar. Theme-aware: uses ink-hairline
   for resting borders, copper for hover, discipline tint when active. */
.nav-filters{display:flex;align-items:center;gap:8px;flex:1}
.nav-filters .disc-toggle{padding:5px 12px;font-size:var(--fs-micro);background:var(--paper-warm);border:none;color:var(--ink-medium);display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-weight:var(--fw-semibold);cursor:pointer;transition:all var(--ease);user-select:none;border-radius:var(--radius-pill)}
.nav-filters .disc-toggle:hover{background:var(--paper-deep);color:var(--ink)}
.nav-filters .disc-toggle:not(.active){opacity:0.55}
.nav-filters .disc-toggle .disc-dot{width:6px;height:6px;border-radius:50%}
.nav-filters .disc-toggle .disc-code{font-weight:var(--fw-regular);color:inherit;font-size:var(--fs-micro);letter-spacing:var(--ls-wide);margin-left:1px;opacity:0.7}
.nav-filters .disc-dot-ux{background:var(--disc-ux)}
.nav-filters .disc-dot-pm{background:var(--disc-pm)}
.nav-filters .disc-dot-mk{background:var(--disc-mk)}
.nav-filters .disc-dot-cs{background:var(--disc-cs)}
/* Active disc pill — earth-tone border + tinted background */
.nav-filters .disc-toggle.active.ux-toggle{background:var(--disc-ux);color:#FFFFFF;opacity:1}
.nav-filters .disc-toggle.active.pm-toggle{background:var(--disc-pm);color:#FFFFFF;opacity:1}
.nav-filters .disc-toggle.active.mk-toggle{background:var(--disc-mk);color:#FFFFFF;opacity:1}
.nav-filters .disc-toggle.active.cs-toggle{background:var(--disc-cs);color:#FFFFFF;opacity:1}
.nav-filters .nav-search-box{flex:1;min-width:100px;position:relative}
.nav-filters .nav-search-box input{width:100%;padding:var(--space-2) var(--space-4);font-family:var(--font-body);font-size:var(--fs-micro);background:var(--paper-white);border:1px solid var(--ink-hairline);color:var(--ink);outline:none;border-radius:var(--radius-xs)}
.nav-filters .nav-search-box input::placeholder{color:var(--ink-light)}
.nav-filters .nav-search-box input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--ink-a10)}
/* Subpage nav — smaller logo, back link visible */
.site-nav.subpage-nav .site-logo{font-size:var(--fs-body-lg);gap:10px;margin-right:0;flex-shrink:0}
.site-nav.subpage-nav .logo-mark{width:32px;height:32px;font-size:var(--fs-micro)}
.site-nav.subpage-nav .nav-title{display:inline}
.site-nav.subpage-nav .nav-back-link{font-size:var(--fs-nano);font-weight:var(--fw-regular);color:var(--ink);text-transform:uppercase;letter-spacing:var(--ls-wider);white-space:nowrap;flex-shrink:0;transition:color var(--ease)}
.site-nav.subpage-nav .nav-back-link:hover{color:var(--ink)}
.container{max-width:var(--max-width);margin:0 auto;padding:0 40px}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);line-height:var(--lh-heading);letter-spacing:var(--ls-snug);font-weight:var(--fw-bold)}
h1 strong,h2 strong,h3 strong{font-weight:var(--fw-bold)}
h4{font-family:var(--font-body);font-weight:var(--fw-semibold);color:var(--ink);line-height:var(--lh-card)}

/* Tier badge — tonal copper progression (1 darkest, 4 neutral) */
.tier-badge{display:inline-block;padding:4px 14px;font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:var(--ls-widest);border:none;border-radius:var(--radius-xs)}
.tier-badge.tier1{color:var(--tier1-color);background:var(--tier1-bg)}
.tier-badge.tier2{color:var(--tier2-color);background:var(--tier2-bg)}
.tier-badge.tier3{color:var(--tier3-color);background:var(--tier3-bg)}
.tier-badge.tier4{color:var(--tier4-color);background:var(--tier4-bg)}

/* Split badge (theory / practical / examples) — three intensities of copper */
.split-badge{display:inline-block;padding:4px 14px;font-size:var(--fs-micro);font-weight:var(--fw-semibold);border:none;cursor:pointer;transition:all var(--ease);letter-spacing:var(--ls-wide);border-radius:var(--radius-xs)}
.split-badge:hover{opacity:0.75}
.split-badge.theory{color:var(--ink);background:var(--ink-a06)}
.split-badge.practical{color:var(--ink);background:var(--ink-a06)}
.split-badge.examples{color:var(--ink);background:var(--ink-a06)}

.section-label{font-family:var(--font-body);font-size:var(--fs-micro);font-weight:400;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink)}

.topic-content h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);margin-top:64px;margin-bottom:24px;padding-bottom:8px;border-bottom:1px solid var(--ink-hairline);letter-spacing:var(--ls-snug)}
.topic-content h2 strong{font-weight:var(--fw-bold)}
.topic-content h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);margin-top:48px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--ink-hairline);letter-spacing:var(--ls-snug)}
.topic-content h4{font-size:var(--fs-h4);margin-top:32px;margin-bottom:8px;font-weight:var(--fw-semibold)}
.topic-content p{margin-bottom:16px;color:var(--ink-soft);font-size:var(--fs-body);line-height:var(--lh-loose);max-width:var(--content-width);font-weight:var(--fw-regular)}
.topic-content ul,.topic-content ol{margin-bottom:16px;padding-left:32px;color:var(--ink-soft);font-weight:var(--fw-regular)}
.topic-content li{margin-bottom:8px;line-height:var(--lh-body)}
.topic-content strong{color:var(--ink);font-weight:var(--fw-bold)}

/* Method card — static display surface (NOT interactive).
   Copper left-strip always visible; no hover lift, no shadow, no outline.
   Animation is reserved for clickable elements only. */
.method-card{background:var(--paper-warm);border:1px solid var(--ink);padding:28px;margin:24px 0;position:relative}
.method-card h4{margin-top:0;margin-bottom:4px;display:flex;align-items:center;gap:10px;font-weight:var(--fw-semibold);letter-spacing:var(--ls-snug)}
.method-tag{font-size:var(--fs-micro);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:var(--ls-widest);padding:3px 8px;background:var(--ink);color:var(--paper-white);border-radius:var(--radius-xs)}
.method-card .method-when{font-size:var(--fs-micro);font-style:italic;color:var(--ink-medium);margin-bottom:16px;font-weight:var(--fw-regular)}
.method-card p{font-size:var(--fs-micro);color:var(--ink-soft);font-weight:var(--fw-regular);line-height:var(--lh-body)}

/* Source provenance markers */
[data-source]{position:relative}
.method-card[data-source]::after,.callout[data-source]::after,.case-study[data-source]::after,.template-box[data-source]::after{content:attr(data-source);position:absolute;top:10px;right:12px;font-family:var(--font-body);font-size:var(--fs-micro);font-weight:700;letter-spacing:0.1em;color:var(--nng);pointer-events:none}
.callout[data-source]::after{top:6px;right:10px}
.pitfall[data-source]{position:relative}
.pitfall[data-source]::after{content:attr(data-source);position:absolute;top:4px;right:8px;font-family:var(--font-body);font-size:var(--fs-micro);font-weight:700;letter-spacing:0.1em;color:var(--nng);pointer-events:none}
/* Section-level markers: visible inline span (added in HTML) */
.topic-content section[data-source]>h2{display:flex;align-items:baseline;gap:10px}
.source-label{font-family:var(--font-body);font-size:var(--fs-micro);font-weight:700;letter-spacing:0.1em;color:var(--rust);flex-shrink:0;white-space:nowrap}
/* Deep-dive expandable markers */
details.expandable[data-source]{position:relative}
details.expandable[data-source]::after{content:attr(data-source);position:absolute;top:16px;right:40px;font-family:var(--font-body);font-size:var(--fs-micro);font-weight:700;letter-spacing:0.1em;color:var(--nng);pointer-events:none}

/* Callout — paper-warm surface, 2px left-strip in copper-family, label
   colored to match the strip. Tip / warning / info differ only by strip
   intensity, not by background (career one-accent discipline). */
.callout{padding:20px 24px;margin:24px 0;background:var(--paper-warm);border:1px solid var(--ink);position:relative;border-radius:var(--radius-xs)}
.callout-title{font-weight:var(--fw-bold);font-size:var(--fs-micro);margin-bottom:6px;letter-spacing:var(--ls-snug);color:var(--ink)}
.callout p{font-size:var(--fs-micro);margin-bottom:8px;line-height:var(--lh-body);color:var(--ink-soft);font-weight:var(--fw-regular)}
.callout p:last-child{margin-bottom:0}
/* tip = copper (affirmation), warning = copper-deep (stronger signal),
   info = ink-medium (neutral aside) */
.callout.tip .callout-title{color:var(--ink)}
.callout.warning .callout-title{color:var(--ink)}
.callout.info .callout-title{color:var(--ink)}

/* Template box — cream-on-cream, copper label, copper left-strip */
.template-box{background:var(--paper-white);border:1px solid var(--ink);padding:28px;margin:24px 0;position:relative;border-radius:var(--radius-xs)}
.template-header{display:flex;align-items:center;gap:8px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--ink-hairline)}
.template-label{font-size:var(--fs-micro);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:var(--ls-widest);padding:3px 10px;background:var(--ink);color:var(--paper-white);border-radius:var(--radius-xs)}
.template-title{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-h4);letter-spacing:var(--ls-snug)}
.template-grid{display:grid;gap:16px}
.template-field{border:1px dashed var(--ink);padding:16px;background:var(--paper);border-radius:var(--radius-xs)}
.template-field-label{font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--ink);margin-bottom:4px}
.template-field-hint{font-size:var(--fs-micro);color:var(--ink-medium);font-style:italic;line-height:1.5;font-weight:var(--fw-regular)}

/* Process steps — copper step-number badges */
.process-steps{counter-reset:step;margin:24px 0}
.process-step{display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--ink-hairline)}
.process-step:last-child{border-bottom:none}
.process-step::before{counter-increment:step;content:counter(step);flex-shrink:0;width:32px;height:32px;background:var(--ink);color:var(--paper-white);font-weight:var(--fw-bold);font-size:var(--fs-body);font-family:var(--font-body);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);letter-spacing:0}
.process-step-content h4{margin-top:0;margin-bottom:4px;font-weight:var(--fw-semibold)}
.process-step-content p{font-size:var(--fs-micro);margin-bottom:4px;color:var(--ink-soft);font-weight:var(--fw-regular)}

.case-study{background:var(--paper-warm);border:1px solid var(--ink);padding:28px;margin:24px 0;position:relative}
.case-study .case-label{font-size:var(--fs-micro);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:0.1em;color:var(--ink);margin-bottom:8px}
.case-study h4{margin-top:0;margin-bottom:16px;font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
.case-study p{color:var(--ink-soft);font-size:var(--fs-micro);line-height:1.75;font-weight:var(--fw-regular)}

/* Pitfall — deeper copper icon signals "careful" without red-alert */
.pitfall{display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--ink-hairline)}
.pitfall:last-child{border-bottom:none}
.pitfall-icon{flex-shrink:0;width:32px;height:32px;background:var(--ink);color:var(--paper-white);font-weight:var(--fw-bold);font-size:var(--fs-micro);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs)}
.pitfall h4{margin-top:0;margin-bottom:4px;font-weight:var(--fw-semibold)}
.pitfall p{font-size:var(--fs-micro);color:var(--ink-soft);font-weight:var(--fw-regular)}

/* Checklist — copper check mark (one accent, no green) */
.checklist{list-style:none;padding:0}
.checklist li{padding:8px 0 8px 36px;position:relative;font-size:var(--fs-micro);color:var(--ink-soft);border-bottom:1px solid var(--ink-hairline);cursor:pointer;user-select:none;transition:color var(--ease);font-weight:var(--fw-regular)}
.checklist li:last-child{border-bottom:none}
.checklist li::before{content:'';position:absolute;left:0;top:12px;width:18px;height:18px;border:1px solid var(--ink-faint);border-radius:var(--radius-xs);transition:all var(--ease)}
.checklist li:hover::before{border-color:var(--ink)}
.checklist li.checked{color:var(--ink-light);text-decoration:line-through;text-decoration-color:var(--ink-faint)}
.checklist li.checked::before{background:var(--ink);border-color:var(--ink)}
.checklist li.checked::after{content:'';position:absolute;left:7px;top:15px;width:5px;height:9px;border-right:2.5px solid var(--paper-white);border-bottom:2.5px solid var(--paper-white);border-radius:0 0 1.5px 0;transform:rotate(40deg)}

/* Expandable — hairline frame, copper chevron, cream body */
.expandable{border:1px solid var(--ink);margin:24px 0;overflow:hidden;border-radius:var(--radius-xs)}
.expandable summary{padding:24px;cursor:pointer;font-weight:var(--fw-semibold);font-size:var(--fs-body);color:var(--ink);background:var(--paper-warm);display:flex;align-items:center;gap:8px;list-style:none;user-select:none;transition:background var(--ease);letter-spacing:var(--ls-snug)}
.expandable summary:hover{background:var(--paper-deep)}
.expandable summary::-webkit-details-marker{display:none}
.expandable summary .chevron{transition:transform var(--ease);display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0}
.expandable summary .chevron svg{width:14px;height:14px}
.expandable summary .chevron svg polyline{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.expandable[open] summary .chevron{transform:rotate(90deg)}
.expandable .expand-content{padding:28px;border-top:1px solid var(--ink-hairline);background:var(--paper-white)}

/* Cross-ref grid — cards are links.
   At rest: hairline border, no accent strip.
   On hover: paper-deep background, subtle translateY, warm shadow. */
.cross-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px}
.cross-ref-card{padding:16px;border:1px solid var(--ink-hairline);border-radius:var(--radius-xs);background:var(--paper-warm);transition:transform var(--ease),box-shadow var(--ease-slow),background var(--ease);position:relative;cursor:pointer;text-decoration:none;color:inherit}
.cross-ref-card:hover{background:var(--paper-deep);transform:translateY(-5px);box-shadow:var(--shadow-popover)}
.cross-ref-card .ref-number{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink);font-weight:var(--fw-medium)}
.cross-ref-card .ref-title{font-weight:var(--fw-semibold);font-size:var(--fs-micro);color:var(--ink);margin-top:2px;letter-spacing:var(--ls-snug)}
.cross-ref-card .ref-reason{font-size:var(--fs-micro);color:var(--ink-medium);margin-top:4px;font-weight:var(--fw-regular);line-height:1.5}
.cross-ref-card.cross-discipline{border-left:2px solid var(--ink)}

.section-marker{display:flex;align-items:center;gap:16px;margin-top:64px;margin-bottom:24px}
.section-marker .marker-line{flex:1;height:1px;background:var(--ink-hairline)}

/* Table of contents — copper active bar, hairline rail */
.toc-title{font-size:var(--fs-micro);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:var(--ls-widest);color:var(--ink);margin-bottom:16px}
.sidebar-topic-title{font-family:var(--font-display);font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--ink);line-height:var(--lh-card);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--ink-hairline);letter-spacing:var(--ls-snug)}
.toc-list{list-style:none;border-left:1px solid var(--ink-hairline)}
.toc-list li{margin-bottom:1px}
.toc-list a{display:flex;align-items:flex-start;gap:10px;padding:6px 0 6px 16px;font-size:var(--fs-micro);font-weight:var(--fw-regular);color:var(--ink);line-height:1.3;border-left:1px solid transparent;margin-left:-2px;transition:all var(--ease)}
.toc-list a::before{margin-top:5px}
.toc-list a::before{content:'';flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--ink-hairline)}
.toc-list a[data-section="theory"]::before{background:var(--theory-color)}
.toc-list a[data-section="practical"]::before{background:var(--practical-color)}
.toc-list a[data-section="examples"]::before{background:var(--examples-color)}
.toc-list a:hover{color:var(--ink)}
.toc-list a.active{color:var(--ink);border-left-color:var(--ink);font-weight:var(--fw-semibold)}

.deep-dive-section{margin-top:96px;padding-top:48px;border-top:1px solid var(--ink-hairline)}
.deep-dive-header{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.deep-dive-badge{font-size:var(--fs-micro);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:var(--ls-widest);padding:4px 12px;background:var(--ink);color:var(--paper-white);border-radius:var(--radius-xs)}

/* Topic prev/next nav — interactive (link).
   Hairline border at rest, paper-deep + translateY + shadow on hover. */
.topic-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px;padding-top:32px;border-top:1px solid var(--ink-hairline)}
.topic-nav-link{padding:24px;border:1px solid var(--ink-hairline);transition:transform var(--ease),box-shadow var(--ease-slow),background var(--ease);color:var(--ink);background:var(--paper-warm);border-radius:var(--radius-xs);position:relative;cursor:pointer;text-decoration:none}
.topic-nav-link:hover{background:var(--paper-deep);transform:translateY(-5px);box-shadow:var(--shadow-popover)}
.topic-nav-link .nav-direction{font-size:var(--fs-micro);color:var(--ink);text-transform:uppercase;letter-spacing:var(--ls-widest);font-weight:var(--fw-regular);margin-bottom:4px}
.topic-nav-link .nav-title{font-weight:var(--fw-semibold);font-size:var(--fs-micro);letter-spacing:var(--ls-snug)}
.topic-nav-link.next{text-align:right}

/* ========= SEARCH DROPDOWN — hairline border, copper-tinted hover ========= */
.search-box{position:relative}
.search-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--paper-white);border:1px solid var(--ink-hairline);margin-top:var(--space-1);max-height:400px;overflow-y:auto;z-index:var(--z-search);display:none;border-radius:var(--radius-xs);box-shadow:var(--shadow-popover)}
.search-dropdown.visible{display:block}
.search-group{padding:0}
.search-group+.search-group{border-top:1px solid var(--ink-hairline)}
.search-group-title{padding:6px 20px 3px;font-size:var(--fs-micro);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:var(--ls-widest);color:var(--ink);border-bottom:none;margin-top:2px}
.search-result{display:flex;align-items:center;justify-content:space-between;padding:7px 20px;color:var(--ink);transition:background var(--ease);border-bottom:1px solid var(--ink-hairline)}
.search-result:hover{background:var(--ink-a06);color:var(--ink)}
.search-result-title{font-size:var(--fs-micro);font-weight:var(--fw-medium)}
.search-result-type{font-size:var(--fs-micro);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:var(--ls-wider);padding:2px 8px;border:1px solid;border-radius:var(--radius-xs)}
.search-result-type.theory{border-color:var(--theory-color);color:var(--theory-color)}
.search-result-type.practical{border-color:var(--practical-color);color:var(--practical-color)}
.search-result-type.examples{border-color:var(--examples-color);color:var(--examples-color)}
.search-empty{padding:20px;color:var(--ink-muted);font-size:var(--fs-micro);text-align:center;font-weight:var(--fw-regular)}

/* Nav search on topic pages — theme-aware, copper focus */
.nav-search{margin-left:auto}
.nav-search .search-box input{width:220px;padding:8px 14px;font-size:var(--fs-micro);border:1px solid var(--ink-hairline);background:var(--paper-white);border-radius:var(--radius-xs);color:var(--ink)}
.nav-search .search-box input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--ink-a10)}
.nav-search .search-box input::placeholder{color:var(--ink-light)}
.nav-search .search-dropdown{width:360px;right:0;left:auto}

.site-footer{margin-top:96px;padding:48px 0;border-top:1px solid var(--ink-hairline);color:var(--ink-muted);font-size:var(--fs-micro);text-align:center;font-weight:var(--fw-regular)}

/* Mobile-only back link — hidden on desktop, shown when nav-links are hidden */
.nav-back{display:none}

/* Tablet: 769px–960px */
@media(max-width:960px){
.nav-links{gap:20px}
/* Tablet: hide "Noir Book" text on subpages */
.site-nav.subpage-nav .nav-title{display:none}
}

/* Mobile: up to 768px */
@media(max-width:768px){
.container,.nav-inner{padding:0 16px}
.nav-links{display:none}
.site-logo{font-size:var(--fs-body-lg);gap:10px}
.site-logo .nav-title{display:none}
.logo-mark{width:32px;height:32px;font-size:var(--fs-micro)}
.nav-back{display:none}
.theme-toggle{width:40px;height:40px;font-size:var(--fs-body);border-radius:8px}
/* Subpage nav mobile: show title, hide pills + back link, keep search */
.site-nav.subpage-nav .nav-title{display:inline}
.site-nav.subpage-nav .nav-back-link{display:none}
.site-nav.subpage-nav .nav-filters .disc-toggle{display:none}
.site-nav.subpage-nav .nav-filters{gap:6px}
/* A) Equalize heights for search, theme toggle, burger */
.site-nav.subpage-nav .nav-filters .nav-search-box input{height:40px;padding:0 16px;border-radius:10px}
.site-nav.subpage-nav .theme-toggle{width:40px;height:40px;order:2}
.site-nav.subpage-nav .burger-btn{width:40px;height:40px;order:3;border-width:1px;border-radius:8px}
.site-nav.subpage-nav .burger-btn svg{stroke-width:1.5}
/* D) Reorder: search takes space, then theme toggle, then burger far right */
.site-nav.subpage-nav .nav-filters{order:1;flex:1;min-width:0}
.site-nav.subpage-nav .nav-inner{gap:8px}
/* E) Expandable search */
.site-nav.subpage-nav .nav-search-box{transition:flex 0.3s ease,opacity 0.3s ease}
.site-nav.subpage-nav .nav-search-box input{transition:width 0.3s ease}
.site-nav.subpage-nav.search-expanded .nav-title{opacity:0;max-width:0;overflow:hidden;margin:0;padding:0;transition:opacity 0.2s ease,max-width 0.2s ease}
.site-nav.subpage-nav .nav-title{transition:opacity 0.2s ease,max-width 0.2s ease;max-width:200px}
.site-nav.subpage-nav .site-logo{flex-shrink:1;min-width:0;overflow:hidden}
.site-nav.subpage-nav.search-expanded .site-logo{flex-shrink:0;min-width:auto;gap:0}
.site-nav.subpage-nav.search-expanded .nav-filters{flex:1}
.split-badge{font-size:var(--fs-micro);padding:2px 8px}
.content-splits{flex-wrap:wrap;gap:4px}
/* Topic content — tighten line heights and spacing */
.topic-content p{line-height:1.65;font-size:var(--fs-micro)}
.topic-content li{line-height:1.55;margin-bottom:6px}
.topic-content h2{font-size:var(--fs-h3);margin-top:40px;margin-bottom:16px}
.topic-content h3{font-size:var(--fs-h3);margin-top:32px;margin-bottom:12px}
.topic-content h4{font-size:var(--fs-body);margin-top:24px}
/* Cards, callouts, templates — tighter padding */
.method-card{padding:18px;margin:16px 0}
.callout{padding:14px 16px;margin:16px 0}
.callout p{line-height:1.55;font-size:var(--fs-micro)}
.template-box{padding:18px;margin:16px 0}
.template-field{padding:12px}
.case-study{padding:18px;margin:16px 0}
[data-source]::after{font-size:var(--fs-micro);top:6px;right:6px}
.topic-content section[data-source]>h2 .source-label{font-size:var(--fs-micro)}
.expandable summary{padding:16px}
.expandable .expand-content{padding:18px}
/* Process steps tighter */
.process-step{gap:16px;padding:16px 0}
/* Sections — less vertical breathing room */
.section-marker{margin-top:40px;margin-bottom:16px}
.deep-dive-section{margin-top:56px;padding-top:32px}
/* Nav and footer */
.topic-nav{grid-template-columns:1fr;margin-top:40px;padding-top:20px}
.topic-nav-link{padding:16px}
.topic-nav-link.next{text-align:left}
.cross-ref-grid{grid-template-columns:1fr}
.nav-search .search-dropdown{width:100%;left:0;right:0}
.site-footer{margin-top:48px;padding:32px 0}
}

/* ========= BURGER MENU ========= */
.burger-btn{display:none;background:none;border:1px solid var(--ink);width:40px;height:40px;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;padding:0;color:var(--ink);transition:background var(--ease),border-color var(--ease),color var(--ease);border-radius:var(--radius-xs);position:relative;isolation:isolate;pointer-events:auto;transform:translateZ(0)}
.burger-btn:hover{border-color:var(--ink);color:var(--paper-white);background:var(--ink)}
.burger-btn > *{pointer-events:none}
.burger-btn svg{width:18px;height:18px;display:block}
.burger-overlay{display:none;position:fixed;inset:0;background:var(--scrim);z-index:var(--z-burger-overlay)}
.burger-overlay.open{display:block}
.burger-panel{position:fixed;top:0;right:0;width:min(320px,85vw);height:100%;background:var(--paper);border-left:2px solid var(--ink);z-index:var(--z-burger-panel);overflow-y:auto;transform:translateX(100%);transition:transform 0.3s ease;padding:0}
.burger-overlay.open .burger-panel{transform:translateX(0)}
.burger-panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ink-hairline)}
.burger-panel-header h3{font-family:var(--font-display);font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);letter-spacing:var(--ls-snug)}
.burger-close{background:none;border:1px solid var(--ink-hairline);width:36px;height:36px;cursor:pointer;font-size:var(--fs-h4);display:flex;align-items:center;justify-content:center;color:var(--ink-medium);border-radius:var(--radius-xs);transition:all var(--ease)}
.burger-close:hover{background:var(--ink);color:var(--paper-white);border-color:var(--ink)}
.burger-search{padding:16px 20px;border-bottom:1px solid var(--ink-hairline)}
.burger-search input{width:100%;padding:10px 14px;font-family:var(--font-body);font-size:var(--fs-micro);background:var(--paper-white);border:1px solid var(--ink-hairline);color:var(--ink);outline:none;border-radius:var(--radius-xs)}
.burger-search input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--ink-a10)}
.burger-search input::placeholder{color:var(--ink-light)}
.burger-search-results{margin-top:8px;max-height:200px;overflow-y:auto}
.burger-search-results a{display:block;padding:8px 0;font-size:var(--fs-micro);font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink-hairline)}
.burger-search-results a:hover{color:var(--ink)}
.burger-search-results .bsr-disc{font-size:var(--fs-micro);font-weight:400;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink);margin-left:6px}
.burger-links{padding:12px 20px;border-bottom:1px solid var(--ink-hairline)}
.burger-links a{display:block;padding:10px 0;font-size:var(--fs-micro);font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink-hairline)}
.burger-links a:last-child{border-bottom:none}
.burger-links a:hover{color:var(--ink)}
.burger-toc-section{padding:12px 20px}
.burger-toc-title{font-size:var(--fs-micro);font-weight:400;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink);margin-bottom:12px}
.burger-toc-list{list-style:none}
.burger-toc-list li{margin-bottom:1px}
.burger-toc-list a{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:var(--fs-micro);font-weight:500;color:var(--ink-light);transition:color var(--ease)}
.burger-toc-list a:hover{color:var(--ink)}
.burger-toc-list a::before{content:'';flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--ink-hairline)}
.burger-toc-list a[data-section="theory"]::before{background:var(--theory-color)}
.burger-toc-list a[data-section="practical"]::before{background:var(--practical-color)}
.burger-toc-list a[data-section="examples"]::before{background:var(--examples-color)}

@media(max-width:960px){
.burger-btn{display:flex}
}
@media(min-width:961px){
.burger-overlay{display:none!important}
}

/* ── Nav search, phrase pills + clear. Theme-aware: hairline border at
   rest, copper border on focus, copper-tinted pills. ── */
.nav-filters .nav-search-box{flex:1;min-width:120px;position:relative}
.nav-filters .nav-search-box .nav-search-wrap{display:flex;align-items:center;gap:6px;padding:0 6px 0 12px;background:var(--paper-white);border:1px solid var(--ink-hairline);border-radius:var(--radius-xs);height:40px;transition:border-color .2s ease,box-shadow .2s ease;overflow:hidden}
.nav-filters .nav-search-box .nav-search-wrap:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--ink-a10)}
.nav-filters .nav-search-box .nav-search-wrap input{flex:1;min-width:60px;width:auto;padding:0;border:0;background:transparent;color:var(--ink);font-family:var(--font-body);font-size:var(--fs-micro);outline:none;height:100%;box-shadow:none;border-radius:0}
.nav-filters .nav-search-box .nav-search-wrap input::placeholder{color:var(--ink-light)}
.nav-search-pills{display:flex;align-items:center;gap:4px;max-width:58%;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.nav-search-pills:empty{display:none}
.nav-search-pills::-webkit-scrollbar{display:none}
.nav-search-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 4px 2px 9px;font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-medium);color:var(--ink);background:var(--ink-a06);border:none;border-radius:var(--radius-pill);white-space:nowrap;line-height:1.3;max-width:160px}
.nav-search-pill .pill-text{overflow:hidden;text-overflow:ellipsis;max-width:130px}
.nav-search-pill .pill-remove{cursor:pointer;font-size:var(--fs-micro);color:inherit;opacity:.6;line-height:1;padding:0 3px}
.nav-search-pill .pill-remove:hover{opacity:1}
.nav-search-clear{display:none;background:transparent;border:0;color:var(--ink-light);cursor:pointer;font-size:var(--fs-h4);line-height:1;padding:0 4px;align-items:center;flex-shrink:0}
.nav-search-clear:hover{color:var(--ink)}
.nav-search-box.has-query .nav-search-clear{display:inline-flex}
/* Neutralise the older subpage-nav input override, the wrap now owns height and padding */
.site-nav.subpage-nav .nav-filters .nav-search-box input{height:auto;padding:0;border-radius:0;background:transparent}
/* Dropdown width adjusts for the wider box */
.nav-filters .nav-search-box .search-dropdown{width:100%;max-width:460px;left:0;right:auto;top:calc(100% + 6px)}
@media(max-width:960px){
  .nav-search-pills{max-width:45%}
  .nav-search-pill{max-width:120px}
  .nav-search-pill .pill-text{max-width:92px}
}

/* ════════════════════════════════════════════════════════════════════════════
   INVERTED HEADER STRIP (v53)
   ────────────────────────────────────────────────────────────────────────────
   The .site-nav is the PHOTO-NEGATIVE of the page in both themes:
     - Light theme: BLACK nav with white-tone children
     - Dark theme:  WHITE nav with black-tone children (mirror)

   The .filter-bar is ADAPTIVE — it follows the page theme at rest, and
   only inverts (joining the nav strip) when scrolled and JS-docked into
   the nav via the .docked class. This means:
     - At top of page: filter bar matches page (white in light, dark in dark)
     - After scroll: filter bar gets .docked class, then inverts to join nav

   Implementation: scope-rebind every neutral color token inside .site-nav
   and .filter-bar.docked. Children keep using var(--ink) / var(--paper)
   etc. — they automatically resolve to the inverted values without any
   per-element overrides. No "hybrid" failure mode possible because every
   neutral token is flipped at the source.

   Discipline pigments (--disc-ux/pm/mk/cs) are NOT flipped, and active
   disc-pill text is hardcoded to white so it reads on the colored bg in
   BOTH the docked and undocked filter-bar states.
   ════════════════════════════════════════════════════════════════════════════ */

/* Light theme → inverted strip uses dark-mode neutral values */
.site-nav,
.filter-bar.docked{
  --paper:#0A0A0A;
  --paper-warm:#141414;
  --paper-deep:#1E1E1E;
  --paper-white:#0A0A0A;
  --ink:#FAFAFA;
  --ink-soft:#E8E8E8;
  --ink-medium:#9A9A9A;
  --ink-muted:#9A9A9A;
  --ink-light:#7A7A7A;
  --ink-faint:#4A4A4A;
  --ink-hairline:#2A2A2A;
  --ink-a06:rgba(250,250,250,0.06);
  --ink-a10:rgba(250,250,250,0.10);
  --ink-a12:rgba(250,250,250,0.12);
  --ink-a14:rgba(250,250,250,0.14);
  --ink-a22:rgba(250,250,250,0.22);
  --ink-a40:rgba(250,250,250,0.40);
  --ink-a55:rgba(250,250,250,0.55);
  background:var(--paper);
  border-bottom:none;
}

/* Dark theme → inverted strip uses light-mode neutral values (mirror) */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site-nav,
  :root:not([data-theme="light"]) .filter-bar.docked{
    --paper:#FFFFFF;
    --paper-warm:#F5F5F5;
    --paper-deep:#EBEBEB;
    --paper-white:#FFFFFF;
    --ink:#0A0A0A;
    --ink-soft:#1A1A1A;
    --ink-medium:#595959;
    --ink-muted:#595959;
    --ink-light:#7A7A7A;
    --ink-faint:#A0A0A0;
    --ink-hairline:#E2E2E2;
    --ink-a06:rgba(10,10,10,0.06);
    --ink-a10:rgba(10,10,10,0.10);
    --ink-a12:rgba(10,10,10,0.12);
    --ink-a14:rgba(10,10,10,0.14);
    --ink-a22:rgba(10,10,10,0.22);
    --ink-a40:rgba(10,10,10,0.40);
    --ink-a55:rgba(10,10,10,0.55);
  }
}
[data-theme="dark"] .site-nav,
[data-theme="dark"] .filter-bar.docked{
  --paper:#FFFFFF;
  --paper-warm:#F5F5F5;
  --paper-deep:#EBEBEB;
  --paper-white:#FFFFFF;
  --ink:#0A0A0A;
  --ink-soft:#1A1A1A;
  --ink-medium:#595959;
  --ink-muted:#595959;
  --ink-light:#7A7A7A;
  --ink-faint:#A0A0A0;
  --ink-hairline:#E2E2E2;
  --ink-a06:rgba(10,10,10,0.06);
  --ink-a10:rgba(10,10,10,0.10);
  --ink-a12:rgba(10,10,10,0.12);
  --ink-a14:rgba(10,10,10,0.14);
  --ink-a22:rgba(10,10,10,0.22);
  --ink-a40:rgba(10,10,10,0.40);
  --ink-a55:rgba(10,10,10,0.55);
}

/* When the filter-bar docks inside the nav (on scroll), keep its bg
   transparent so it falls through to the nav's already-inverted bg.
   Not docked: the filter-bar paints its own (now-inverted) bg via var(--paper). */
.filter-bar.docked{background:transparent}

/* Search bar contrast bump on the inverted strip.
   Default border (--ink-faint) and placeholder (--ink-light) read as muted
   greys on the dark surface. Pump both to var(--ink) (which inside the
   inverted scope is near-white #FAFAFA) so the search input stands out
   as the focal element of the strip. Only applies inside .site-nav and
   the docked filter-bar — the at-rest filter bar keeps its softer treatment. */
.site-nav .search-input-wrap,
.filter-bar.docked .search-input-wrap,
.site-nav .nav-filters .nav-search-box .nav-search-wrap{
  border-color:var(--ink);
}
.site-nav .search-input-wrap input::placeholder,
.filter-bar.docked .search-input-wrap input::placeholder,
.site-nav .nav-filters .nav-search-box input::placeholder,
.site-nav .nav-filters .nav-search-box .nav-search-wrap input::placeholder{
  color:var(--ink);
}