/* ============================================================
   CANDLEFISH DESIGN SYSTEM — SHARED TOKENS + BASE
   Geist + Berkeley Mono + Instrument Serif. Curated white. No warm paper.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

/* ---------- Berkeley Mono (licensed Berkeley Graphics font) —
   served from a private Cloudflare Worker (CORS-gated to Candlefish origins
   only). License covers our use, not redistribution. Source: candlefish-fonts
   Worker, KV-backed. local() probes pick up the font if installed system-wide. */
@font-face {
  font-family: 'Berkeley Mono';
  src: local('Berkeley Mono'), local('BerkeleyMono-Regular'),
       url('https://fonts.candlefish.ai/berkeley-mono/Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Berkeley Mono';
  src: local('Berkeley Mono Oblique'), local('BerkeleyMono-Oblique'),
       url('https://fonts.candlefish.ai/berkeley-mono/Oblique.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Berkeley Mono';
  src: local('Berkeley Mono Bold'), local('BerkeleyMono-Bold'),
       url('https://fonts.candlefish.ai/berkeley-mono/Bold.otf') format('opentype');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Berkeley Mono';
  src: local('Berkeley Mono Bold Oblique'), local('BerkeleyMono-Bold-Oblique'),
       url('https://fonts.candlefish.ai/berkeley-mono/Bold-Oblique.otf') format('opentype');
  font-weight: 600 700; font-style: italic; font-display: swap;
}
:root {
  /* Surface — curated 2026 white. Faintly cool, never warm.
     paper sits one notch off pure white so type doesn't burn. */
  --paper:#fbfbfd;
  --paper-2:#f3f4f7;
  --paper-3:#e7eaef;
  --ink:#0a0c10;
  --ink-2:#15181d;
  --ink-3:#23272e;
  --ink-soft:#4a4f59;
  --ink-mute: #5b606b;
  --rule:#dee1e7;
  --rule-strong:#c1c6d0;

  /* Spine */
  --candlefish-50:#e6fafe; --candlefish-100:#c9f3fb; --candlefish-200:#9eebf8;
  --candlefish-300:#5fdef4; --candlefish-400:#04daf6; --candlefish-500:#00c3e1;
  --candlefish-600:#009cb4; --candlefish-700:#047087; --candlefish-800:#0a4a5b;
  --candlefish-900:#07303d;

  --perch-50:#effaf6; --perch-100:#d2f0e4; --perch-200:#a3dfca;
  --perch-300:#6ec7ad; --perch-400:#3fa993; --perch-500:#1f8a7c;
  --perch-600:#136c66; --perch-700:#0f637b; --perch-800:#0c4d5e;
  --perch-900:#08303a;

  /* Instrument hues — equal L/C, hue dial */
  --inst-perch:   oklch(58% 0.09 200);
  --inst-salmon:   oklch(58% 0.09 145);
  --inst-pike:  oklch(56% 0.13  35);
  --inst-snook: oklch(58% 0.09 290);
  --inst-eel:    oklch(58% 0.09 350);
  --inst-sturgeon:   oklch(58% 0.09 250);
  --inst-sawfish: oklch(58% 0.09  70);

  /* Signals — cool, modern, no clay/ochre. */
  --signal-up:    #0e9384;
  --signal-down:  #d63057;
  --signal-watch: #c08a18;
  --signal-info:  #047087;

  /* Type stack — v2 locked
     Display + UI: Geist  (Google Fonts)
     Mono:         Berkeley Mono  (licensed, /fonts)
     Serif:        Instrument Serif  (Google Fonts) — editorial italics only */
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-ui:      'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Berkeley Mono', ui-monospace, SF Mono, Menlo, monospace;
  --font-serif:   'Instrument Serif', Georgia, serif;

  /* Type scale */
  --t-mono-xs:10px; --t-mono-sm:11px; --t-mono-md:12.5px;
  --t-xs:12px; --t-sm:14px; --t-base:16px; --t-lg:18px;
  --t-xl:21px; --t-2xl:25px; --t-3xl:30px; --t-4xl:36px;
  --t-5xl:44px; --t-6xl:54px; --t-7xl:66px; --t-8xl:82px;

  --leading-tight:1.08; --leading-snug:1.22; --leading-body:1.55; --leading-prose:1.65;
  --track-tight:-0.02em; --track-display:-0.025em;
  --track-mono:0.18em; --track-mono-loose:0.22em;

  /* Spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px;
  --s-11:96px; --s-12:128px;
  --s-section:96px; --s-bleed:max(24px, 4vw);

  /* Radius */
  --r-hair:2px; --r-pill:3px; --r-tag:4px; --r-card:5px;
  --r-shelf:8px; --r-frame:14px; --r-full:9999px;

  /* Borders */
  --b-hair:1px solid var(--rule);
  --b-card:2px solid var(--rule);
  --b-strong:2px solid var(--ink);

  /* Shadows */
  --sh-pop:0 1px 2px rgba(12,14,16,0.06), 0 8px 24px -12px rgba(12,14,16,0.18);
  --sh-lift:0 24px 60px -32px rgba(12,14,16,0.45);

  /* Motion */
  --ease-instrument:cubic-bezier(0.21, 0.47, 0.32, 0.98);
  --ease-glide:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-still:cubic-bezier(0.4, 0, 0.2, 1);
  --d-1:120ms; --d-2:200ms; --d-3:320ms; --d-4:480ms; --d-5:720ms;

  /* Grid */
  --col-text:62ch; --col-narrow:720px; --col-wide:1240px;
  --col-bleed:1480px; --col-canvas:1680px;
}

html.dark {
  /* Dark surfaces — cool slate, never warm. */
  --paper:#0a0c11;
  --paper-2:#13161c;
  --paper-3:#1c2028;
  --ink:#f4f6f9;
  --ink-2:#d8dbe1;
  --ink-3:#aeb3bd;
  --ink-soft:#838995;
  --ink-mute:#5b606b;
  --rule:#262a31;
  --rule-strong:#3a3f48;

  --inst-perch:   oklch(70% 0.13 200);
  --inst-salmon:   oklch(70% 0.13 145);
  --inst-pike:  oklch(72% 0.16  35);
  --inst-snook: oklch(72% 0.13 290);
  --inst-eel:    oklch(72% 0.13 350);
  --inst-sturgeon:   oklch(70% 0.13 250);
  --inst-sawfish: oklch(70% 0.13  70);

  --signal-up:    #34d399;
  --signal-down:  #f7748e;
  --signal-watch: #e6c46a;
  --signal-info:  #5fdef4;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--font-ui);
  font-feature-settings: "ss01" 1, "cv11" 1;
  font-weight:400; font-size:var(--t-base); line-height:var(--leading-body);
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition: background-color var(--d-3) var(--ease-instrument), color var(--d-3) var(--ease-instrument);
}
.mono  { font-family: var(--font-mono); font-feature-settings:"tnum" 1, "ss01" 1; }
.serif { font-family: var(--font-serif); font-style:italic; }

.label, .t-mono-l {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.kicker { color: var(--perch-700); }
html.dark .kicker { color: var(--candlefish-400); }
.rule { border:0; border-top: var(--b-hair); margin:0; }
img { max-width:100%; display:block; }

/* ============ ATMOSPHERIC GRAPHICS LAYER ============ */
/* Tokens for advanced visualizations: textures, glows, depth.
   Used by every chapter — chart frames, hero backdrops, instrument cards. */

:root {
  --grain-opacity: 0.035;
  --glow-inst: 0 0 0 1px color-mix(in oklab, var(--inst, var(--inst-perch)) 50%, transparent),
               0 0 24px -6px color-mix(in oklab, var(--inst, var(--inst-perch)) 60%, transparent);
  --glow-soft: 0 0 60px -20px color-mix(in oklab, var(--inst, var(--inst-perch)) 80%, transparent);
  --vignette: radial-gradient(ellipse at center,
                transparent 0%,
                transparent 55%,
                color-mix(in oklab, var(--ink) 6%, transparent) 100%);
  --grid-fine:
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--rule) 60%, transparent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--rule) 60%, transparent) 0 1px, transparent 1px 24px);
  --grid-coarse:
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--rule-strong) 50%, transparent) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--rule-strong) 50%, transparent) 0 1px, transparent 1px 96px);
}

html.dark {
  --grain-opacity: 0.06;
}

/* Grain — applied as an overlay element. SVG noise inline so no asset deps. */
.grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* Glow halo behind a focal element */
.halo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
                color-mix(in oklab, var(--inst, var(--inst-perch)) 22%, transparent) 0%,
                transparent 70%);
  filter: blur(8px);
}

/* Instrument depth card — replaces flat .specimen for hero visuals */
.depth {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--paper) 100%, transparent) 0%,
      color-mix(in oklab, var(--paper-2) 100%, transparent) 100%),
    var(--grid-fine);
  background-blend-mode: normal, soft-light;
  border: var(--b-hair);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--paper) 90%, white),
    0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent),
    0 24px 48px -32px color-mix(in oklab, var(--ink) 30%, transparent);
}
html.dark .depth {
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--paper-2) 100%, white 4%),
    0 1px 0 color-mix(in oklab, black 50%, transparent),
    0 24px 48px -28px black;
}

/* SVG defs — drop <svg class="defs-only"> on each page that needs them */
.defs-only { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- CHROME ---------- */
.chrome {
  position:sticky; top:0; z-index:50;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: var(--b-hair);
}
.chrome-inner {
  max-width: var(--col-canvas);
  margin: 0 auto;
  padding: 14px var(--s-bleed);
  display:flex; align-items:center; gap:24px;
}
.chrome-mark {
  display:flex; align-items:center; gap:14px;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.chrome-mark .dot {
  width:8px; height:8px; border-radius:2px;
  background: var(--candlefish-400);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--candlefish-400) 30%, transparent);
}
.chrome-mark .cf-wordmark {
  height: 22px; width: auto; display: block;
}
.chrome-mark .cf-wordmark.cf-dark { display: none; }
html.dark .chrome-mark .cf-wordmark.cf-light { display: none; }
html.dark .chrome-mark .cf-wordmark.cf-dark  { display: block; }
.chrome-mark .cf-mark-img {
  height: 26px; width: 26px; display: block;
  flex: 0 0 auto;
}
.chrome-mark .chrome-divider {
  width: 1px; height: 18px; background: var(--rule-strong);
  display: inline-block;
}
.chrome-mark .chrome-suffix {
  color: var(--ink-soft); font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.chrome-mark .chrome-suffix .dot { margin-right: 0; }
.chrome nav { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.chrome nav a {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: color var(--d-2) var(--ease-still), background var(--d-2) var(--ease-still);
}
.chrome nav a:hover, .chrome nav a.is-active { color: var(--ink); background: var(--paper-2); }
.chrome .toggle {
  margin-left:4px;
  display:inline-flex; align-items:center; gap:6px;
  border: var(--b-hair); border-color: var(--rule-strong);
  border-radius: var(--r-card);
  padding: 6px 10px;
  background: transparent; color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono);
  cursor:pointer;
  transition: all var(--d-2) var(--ease-still);
}
.chrome .toggle:hover { color: var(--ink); border-color: var(--ink); }

.page { max-width: var(--col-canvas); margin:0 auto; padding: 0 var(--s-bleed); }

/* ---------- SECTION HEAD ---------- */
.section { border-top: var(--b-hair); padding: var(--s-section) 0; position: relative; }
.section:first-of-type { border-top: 0; }
.section-head {
  display:grid; grid-template-columns: 200px 1fr;
  gap: var(--s-7); margin-bottom: var(--s-9);
  align-items: baseline;
}
.section-head .num {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-soft);
}
.section-head h2 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, var(--t-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--ink);
}
.section-head h2 em {
  font-family: var(--font-serif);
  font-style:italic; font-weight:400;
  color: var(--perch-700);
}
html.dark .section-head h2 em { color: var(--candlefish-400); }
.section-head p {
  margin: 0;
  font-size: var(--t-lg);
  line-height: var(--leading-prose);
  color: var(--ink-soft);
  max-width: 62ch;
}
@media (max-width:720px) { .section-head { grid-template-columns: 1fr; gap: var(--s-3); } }

/* ---------- COMMON CARD ---------- */
.specimen {
  border: var(--b-card); border-radius: var(--r-card);
  background: var(--paper);
  padding: var(--s-7);
  display: grid; gap: var(--s-5);
}
.specimen-cap {
  display:flex; gap:8px; align-items:baseline;
  padding-bottom: var(--s-3);
  border-bottom: var(--b-hair);
}
.specimen-cap .num {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  font-weight:600; color: var(--perch-700);
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
html.dark .specimen-cap .num { color: var(--candlefish-400); }
.specimen-cap h4 {
  margin:0; font-family: var(--font-display);
  font-weight:500; font-size: var(--t-base); color: var(--ink);
}
.specimen-cap .meta {
  margin-left:auto;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--ink-mute);
  letter-spacing: var(--track-mono); text-transform: uppercase;
}

/* ---------- BUTTONS ---------- */
.btn-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding: 11px 18px;
  border-radius: var(--r-card);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight:500;
  letter-spacing: 0.005em;
  border: 2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition: transform var(--d-2) var(--ease-still),
              background-color var(--d-2) var(--ease-still),
              border-color var(--d-2) var(--ease-still),
              color var(--d-2) var(--ease-still);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--perch-700); color:#fff; border-color: var(--perch-700); }
.btn-primary:hover { background: var(--perch-800); border-color: var(--perch-800); }
html.dark .btn-primary { background: var(--candlefish-400); color:#0a0c0e; border-color: var(--candlefish-400); }
html.dark .btn-primary:hover { background: var(--candlefish-300); border-color: var(--candlefish-300); }
.btn-secondary { background:transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost { background:transparent; color: var(--ink-soft); border-color:transparent; }
.btn-ghost:hover { color: var(--ink); background: var(--paper-2); }
.btn-quiet {
  background:transparent; color: var(--perch-700); border:0;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  border-radius:0;
  border-bottom: 1px solid transparent;
}
html.dark .btn-quiet { color: var(--candlefish-400); }
.btn-quiet:hover { border-bottom-color: currentColor; }
.btn-sm { padding: 7px 12px; font-size: var(--t-xs); }
.btn-lg { padding: 14px 22px; font-size: var(--t-base); }

/* ---------- PILLS ---------- */
.stat-pill {
  border: var(--b-hair); border-radius: var(--r-card);
  padding: 12px 14px;
  background: var(--paper);
  display:grid; gap:4px; min-width:0;
}
.stat-pill .l {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight:600;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-mute);
}
.stat-pill .v {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: var(--t-xl); font-weight:500;
  color: var(--ink);
}
.stat-pill .v small { font-family: var(--font-ui); font-size: var(--t-xs); font-weight:400; color: var(--ink-soft); margin-left:4px; }
.stat-pill .d { font-size: var(--t-xs); color: var(--ink-soft); }

/* ---------- TAGS ---------- */
.tag {
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 9px;
  border-radius: var(--r-tag);
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight:600;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  border: 1px solid currentColor;
  background:transparent; white-space:nowrap;
}
.tag.confidential { color:#b14a3c; }
.tag.signal { color: var(--perch-700); }
html.dark .tag.signal { color: var(--candlefish-400); }
.tag.up { color: var(--signal-up); }
.tag.down { color: var(--signal-down); }
.tag.watch { color: var(--signal-watch); }
.tag.solid { border:0; color: var(--paper); background: var(--ink); }

/* ---------- BRIEFING CARD ---------- */
.briefing {
  display:grid; grid-template-columns: 6px 1fr;
  border: var(--b-hair); border-radius: var(--r-card);
  background: var(--paper); overflow:hidden;
}
.briefing .rail { background: var(--inst-perch); }
.briefing .body { padding: var(--s-6) var(--s-7); display:grid; gap: var(--s-5); }
.briefing-cap {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  font-weight:700;
  letter-spacing: var(--track-mono-loose);
  text-transform: uppercase;
  color: var(--perch-700);
}
html.dark .briefing-cap { color: var(--candlefish-400); }
.briefing h4 {
  margin:0;
  font-family: var(--font-display);
  font-weight:400;
  font-size: var(--t-2xl);
  line-height:1.18;
  letter-spacing:-0.018em;
  color: var(--ink);
}
.briefing h4 em { font-family: var(--font-serif); font-style:italic; font-weight:400; }
.briefing-sub { color: var(--ink-soft); font-size: var(--t-sm); line-height:1.5; }
.briefing-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.briefing-action {
  border: var(--b-hair); border-radius: var(--r-card);
  padding: 12px 14px;
  background: color-mix(in oklab, var(--paper-2) 70%, transparent);
}
.briefing-action .l {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--perch-700);
  font-weight:700; margin-bottom:4px;
}
html.dark .briefing-action .l { color: var(--candlefish-400); }
.briefing-action .t { font-size: var(--t-base); color: var(--ink); }
.briefing-slug {
  font-family: var(--font-mono);
  font-size:10px; font-weight:600;
  letter-spacing: var(--track-mono);
  color: var(--ink-mute); text-transform: uppercase;
}

/* ---------- CHART PRIMITIVES ---------- */
.chart-frame {
  border: var(--b-hair); border-radius: var(--r-card);
  background: var(--paper);
  padding: var(--s-5);
  display:grid; gap:12px;
}
.chart-cap { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.chart-cap h5 {
  margin:0; font-family: var(--font-display); font-weight:500;
  font-size: var(--t-base); color: var(--ink);
}
.chart-cap .meta {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--ink-mute);
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.chart-axis line { stroke: var(--rule); stroke-width:1; }
.chart-axis text {
  font-family: var(--font-mono);
  font-size:10px; fill: var(--ink-mute);
  letter-spacing:0.04em;
}
.chart-line { stroke: var(--perch-700); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
html.dark .chart-line { stroke: var(--candlefish-400); }
.chart-area { fill: var(--perch-700); fill-opacity:0.08; }
html.dark .chart-area { fill: var(--candlefish-400); fill-opacity:0.14; }
.chart-point { fill: var(--perch-700); }
html.dark .chart-point { fill: var(--candlefish-400); }
.chart-bar { fill: var(--perch-700); }
html.dark .chart-bar { fill: var(--candlefish-400); }
.chart-bar.dim { fill-opacity:0.3; }
.chart-grid line { stroke: var(--rule); stroke-width:1; stroke-dasharray:2 4; }

/* ---------- FOOT ---------- */
.foot {
  border-top: var(--b-hair);
  padding: var(--s-9) 0 var(--s-7);
  display:grid; grid-template-columns:1fr 1fr; gap: var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-soft);
}
.foot b { color: var(--ink); font-weight:600; }
.foot .right { text-align:right; }
@media (max-width:700px) { .foot { grid-template-columns:1fr; } .foot .right { text-align:left; } }

/* ---------- SHARED LINK CARD GRIDS ---------- */
.specimen-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--s-6); }
.specimen-grid.three { grid-template-columns: repeat(3,1fr); }
@media (max-width:900px) { .specimen-grid, .specimen-grid.three { grid-template-columns:1fr; } }


/* ============================================================
   DEPTH & ATMOSPHERE LAYER
   Shared hero / KPI / chart depth treatments. Instrument pages
   set --inst and --inst-deep locally; these classes consume both.
   ============================================================ */

/* Brighter shoulder for gradient rails / sweeps */
:root { --inst-bright: oklch(72% 0.16 var(--inst-hue, 200)); }
html.dark { --inst-bright: oklch(82% 0.18 var(--inst-hue, 200)); }

/* ----- LAYERED INSTRUMENT HERO ----- */
.inst-hero {
  position: relative;
  padding: var(--s-section) 0 var(--s-9);
  border-bottom: var(--b-hair);
  overflow: hidden;
}
.inst-hero::before {
  content: ""; position: absolute; inset: -10% -5% auto auto;
  width: 60%; height: 80%;
  background:
    radial-gradient(ellipse 50% 40% at 70% 30%, color-mix(in oklab, var(--inst, var(--inst-perch)) 28%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 30% 70%, color-mix(in oklab, var(--inst, var(--inst-perch)) 18%, transparent) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.inst-hero::after {
  content: ""; position: absolute; inset: 0;
  background: var(--grid-coarse);
  opacity: 0.4;
  pointer-events: none;
  mask-image: linear-gradient(180deg, black 0%, black 50%, transparent 100%);
}
.inst-hero .grain { z-index: 1; }
.inst-hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 360px; gap: var(--s-9); align-items: end;
}
@media (max-width: 900px) { .inst-hero-grid { grid-template-columns: 1fr; } }
.inst-hero h1 {
  margin: 12px 0 var(--s-5);
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(48px, 7.6vw, 116px); line-height: 0.94; letter-spacing: -0.035em; color: var(--ink);
}
.inst-hero h1 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--inst, var(--inst-perch)) 100%, white 30%) 0%,
    var(--inst, var(--inst-perch)) 50%,
    color-mix(in oklab, var(--inst, var(--inst-perch)) 60%, var(--ink) 40%) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.inst-hero .lede { max-width: 56ch; margin: 0; font-size: var(--t-xl); line-height: 1.5; color: var(--ink-soft); font-weight: 300; }

/* Meta card with gradient swatch + edge highlight */
.inst-meta {
  position: relative;
  padding: var(--s-6); display: grid; gap: 14px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--paper) 100%, transparent) 0%,
      color-mix(in oklab, var(--paper-2) 100%, transparent) 100%);
  border: var(--b-hair); border-radius: var(--r-card);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--paper) 60%, white),
    0 24px 48px -32px color-mix(in oklab, var(--ink) 35%, transparent);
}
html.dark .inst-meta {
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 8%, transparent),
    0 24px 48px -28px black;
}
.inst-meta::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--inst, var(--inst-perch)) 100%, white 30%),
    var(--inst, var(--inst-perch)),
    color-mix(in oklab, var(--inst, var(--inst-perch)) 60%, var(--ink) 40%));
  border-radius: var(--r-card) 0 0 var(--r-card);
}
.inst-meta dt { font-family: var(--font-mono); font-size: var(--t-mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute); }
.inst-meta dd { margin: 0; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink); }
.inst-meta-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: baseline; }
.inst-meta-swatch {
  height: 32px; border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--inst, var(--inst-perch)) 60%, var(--ink) 40%) 0%,
    var(--inst, var(--inst-perch)) 50%,
    color-mix(in oklab, var(--inst, var(--inst-perch)) 100%, white 30%) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--inst, var(--inst-perch)) 40%, transparent),
              0 4px 12px -4px color-mix(in oklab, var(--inst, var(--inst-perch)) 60%, transparent);
}

/* ----- TOOLBAR (segmented controls share visual language) ----- */
.toolbar.is-depth { display: flex; gap: 10px; flex-wrap: wrap; padding: var(--s-5) 0; border-bottom: var(--b-hair); align-items: center; }
.toolbar.is-depth .seg { display: inline-flex; border: var(--b-hair); border-radius: var(--r-card); overflow: hidden; background: var(--paper); }
.toolbar.is-depth .seg button {
  background: transparent; border: 0; cursor: pointer; padding: 8px 14px;
  font-family: var(--font-mono); font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-soft); border-right: var(--b-hair);
  transition: color var(--d-2) var(--ease-instrument), background var(--d-2) var(--ease-instrument);
}
.toolbar.is-depth .seg button:last-child { border-right: 0; }
.toolbar.is-depth .seg button.is-active { color: var(--paper); background: var(--ink); }
.toolbar.is-depth .spacer { flex: 1; }
.toolbar.is-depth .stamp { font-family: var(--font-mono); font-size: var(--t-mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute); }

/* ----- KPI CARDS WITH SPARKLINES ----- */
.kpi-spark {
  position: relative; overflow: hidden;
  border: var(--b-hair); border-radius: var(--r-card); padding: var(--s-5); background: var(--paper);
  display: grid; gap: 8px;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 50%, transparent);
}
html.dark .kpi-spark { box-shadow: inset 0 1px 0 color-mix(in oklab, white 4%, transparent); }
.kpi-spark .l { font-family: var(--font-mono); font-size: var(--t-mono-xs); font-weight: 700; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute); position: relative; z-index: 2; }
.kpi-spark .v { font-family: var(--font-display); font-weight: 200; font-size: clamp(38px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.035em; color: var(--ink); position: relative; z-index: 2; }
.kpi-spark .d { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-size: var(--t-sm); color: var(--ink-soft); position: relative; z-index: 2; }
.kpi-spark .d.up { color: var(--signal-up); } .kpi-spark .d.down { color: var(--signal-down); }
.kpi-spark .spark { position: absolute; right: 16px; top: 16px; width: 90px; height: 36px; opacity: 0.85; z-index: 1; }
.kpi-spark.accent::before {
  content: ""; position: absolute; right: -40%; top: -40%; width: 80%; height: 140%;
  background: radial-gradient(ellipse, color-mix(in oklab, var(--inst, var(--inst-perch)) 22%, transparent) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

/* ----- DEPTH CARD (used for headline charts in instrument pages) ----- */
.depth-card {
  position: relative; overflow: hidden;
  border: var(--b-hair); border-radius: var(--r-card);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  padding: var(--s-7);
  display: grid; gap: var(--s-5);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 50%, transparent),
    0 24px 48px -32px color-mix(in oklab, var(--ink) 30%, transparent);
}
html.dark .depth-card { box-shadow: inset 0 1px 0 color-mix(in oklab, white 5%, transparent), 0 24px 48px -28px black; }
.depth-card-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; position: relative; z-index: 2; }
.depth-card-cap h3 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--t-3xl); letter-spacing: -0.022em; color: var(--ink); }
.depth-card-cap h3 em { font-family: var(--font-serif); font-style: italic; color: var(--inst, var(--inst-perch)); }
.depth-card-cap .meta { font-family: var(--font-mono); font-size: var(--t-mono-xs); color: var(--ink-mute); letter-spacing: var(--track-mono); text-transform: uppercase; }
.depth-card-svg { position: relative; z-index: 2; }
.depth-card-svg svg { display: block; width: 100%; height: auto; }
.depth-card-legend {
  display: flex; gap: 20px; padding-bottom: 4px; border-bottom: var(--b-hair); position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: var(--t-mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-soft);
  flex-wrap: wrap;
}
.depth-card-legend span { display: inline-flex; align-items: center; gap: 8px; }
.depth-card-legend i { width: 16px; height: 8px; border-radius: 2px; }

/* ----- BRIEFING DEPTH MODE ----- */
.briefing.is-depth { position: relative; overflow: hidden; }
.briefing.is-depth::before {
  content: ""; position: absolute; right: -30%; top: -30%; width: 60%; height: 160%;
  background: radial-gradient(ellipse, color-mix(in oklab, var(--inst, var(--inst-perch)) 12%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.briefing.is-depth .rail {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--inst, var(--inst-perch)) 100%, white 30%),
    var(--inst, var(--inst-perch)),
    color-mix(in oklab, var(--inst, var(--inst-perch)) 60%, var(--ink) 40%));
}

/* ----- TABLE WITH HOVER + GRADIENT MINI BARS ----- */
.tbl-depth {
  border: var(--b-hair); border-radius: var(--r-card);
  background: var(--paper);
  overflow: hidden;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 40%, transparent);
}
.tbl-depth-cap { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-5) var(--s-6); border-bottom: var(--b-hair); }
.tbl-depth-cap h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); color: var(--ink); }
.tbl-depth-cap .meta { font-family: var(--font-mono); font-size: var(--t-mono-xs); color: var(--ink-mute); letter-spacing: var(--track-mono); text-transform: uppercase; }
.tbl-depth table { width: 100%; border-collapse: collapse; }
.tbl-depth th, .tbl-depth td { padding: 14px 18px; border-bottom: var(--b-hair); text-align: left; vertical-align: middle; }
.tbl-depth tr:last-child td { border-bottom: 0; }
.tbl-depth tr { transition: background var(--d-2) var(--ease-instrument); }
.tbl-depth tbody tr:hover { background: var(--paper-2); }
.tbl-depth th { font-family: var(--font-mono); font-size: var(--t-mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
/* ===========================================================
 * PROGRESS — editorial track + fill primitive
 *
 *   <div class="progress">
 *     <i style="--p: 64%"></i>
 *   </div>
 *
 * - Squared corners (1px) — schedule plot, not a candy bar
 * - Track is 14% alpha of the tone; fill is 100% alpha solid
 * - Hairline tick caps at start & end of the FILL (terminal-style)
 * - Tones: default (uses --inst), .progress.on, .progress.watch, .progress.late
 * - Optional: .progress.is-sm (4px), .progress.is-lg (10px)
 * - Optional: .progress.has-cap shows a tabular % label after the bar
 * =========================================================== */
.progress {
  --p: 0%;
  --tone: var(--inst, var(--ink));
  position: relative;
  height: 6px;
  border-radius: 1px;
  background: color-mix(in oklab, var(--tone) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 22%, transparent);
  overflow: visible;
  flex: 1;
}
.progress.is-sm { height: 4px; }
.progress.is-lg { height: 10px; }
.progress > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--p);
  background: var(--tone);
  border-radius: 1px;
  transition: width var(--d-3) var(--ease-instrument);
}
/* Hairline tick at the leading edge of the FILL — sits flush against the bar top/bottom */
.progress > i::before {
  content: ""; position: absolute; left: 0; top: -3px; bottom: -3px; width: 1px;
  background: var(--tone);
}
.progress > i::after {
  content: ""; position: absolute; right: 0; top: -3px; bottom: -3px; width: 1px;
  background: var(--tone);
}
/* States */
.progress.on   { --tone: var(--inst, var(--signal-up)); }
.progress.watch { --tone: var(--signal-watch); }
.progress.late { --tone: var(--signal-down); }
/* When 'late' the track gets a soft red wash so the planned end reads as a deadline */
.progress.late { background: color-mix(in oklab, var(--signal-down) 14%, transparent); }
.progress.watch { background: color-mix(in oklab, var(--signal-watch) 14%, transparent); }

/* Row composition: label + bar + figure */
.progress-row {
  display: grid;
  grid-template-columns: minmax(160px, 28%) 1fr auto auto;
  align-items: center; gap: 16px;
  padding: 10px 0;
  border-bottom: var(--b-hair);
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}
.progress-row:last-child { border-bottom: 0; }
.progress-row .label { font-size: var(--t-sm); color: var(--ink); font-weight: 600; }
.progress-row .label small { display: block; font-size: 10px; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; font-weight: 600; }
.progress-row .pct { font-size: var(--t-sm); color: var(--ink); width: 48px; text-align: right; }
.progress-row .slip { font-size: var(--t-mono-xs); letter-spacing: var(--track-mono); text-transform: uppercase; width: 56px; text-align: right; color: var(--ink-mute); font-weight: 700; }
.progress-row .slip.late { color: var(--signal-down); }
.progress-row .slip.watch { color: var(--signal-watch); }
.progress-row .slip.on { color: var(--signal-up); }

/* Legacy alias for older mark-up */
.mini-bar { position: relative; height: 6px; border-radius: 1px; background: color-mix(in oklab, var(--ink-mute) 12%, transparent); overflow: visible; }
.mini-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1px; background: var(--inst, var(--ink)); }
.mini-bar i.on    { background: var(--inst, var(--signal-up)); }
.mini-bar i.watch { background: var(--signal-watch); }
.mini-bar i.late  { background: var(--signal-down); }
.mini-bar i::before, .mini-bar i::after {
  content: ""; position: absolute; top: -3px; bottom: -3px; width: 1px; background: inherit;
}
.mini-bar i::before { left: 0; }
.mini-bar i::after  { right: 0; }

/* ----- Focus rings (a11y) — single canonical rule. Applies to all interactive
   primitives. Outline uses the active instrument hue when available, falls
   back to perch on the cover and system pages. */
:where(a, button, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--inst, var(--inst-perch));
  outline-offset: 2px;
  border-radius: 2px;
}