/* ==========================================================================
   RUCF — Real User Cost Framework
   One stylesheet, no framework. Tokens first, components after.
   ========================================================================== */

/* ==========================================================================
   Tokens. Swiss-print register: one warm off-white paper ground, near-black
   ink, and a single working blue. No dark mode, no shadows, no radii, no
   fills — hairline rules and dotted dividers do all the separation, exactly
   like a printed spec sheet. Quadrant states are told apart by pattern
   (solid / hatch / dots / cross-hatch), not by hue, so the palette stays
   black-white-blue throughout.
   ========================================================================== */
:root {
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-code: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
  /* canvas + ink */
  --bg-base: #ECECE7;
  --bg-raised: #E6E6E0;
  --bg-sunken: #E2E2DB;
  --text-1: #1A1A17;
  --text-2: #45453F;
  --text-3: #75756C;
  /* lines */
  --hairline: rgba(26, 26, 23, 0.22);
  --hairline-strong: #1A1A17;
  --card-border: #1A1A17;
  --card-fill: transparent;
  /* color system */
  --brand: #2B2FE3;          /* the one working blue */
  --brand-hover: #1A1EC9;
  --accent: #2B2FE3;
  --accent-quiet: rgba(43, 47, 227, 0.07);
  --arc: #2B2FE3;
  --on-accent: #ffffff;
  --seg-on: #2B2FE3;
  --hero-accent: #2B2FE3;
  /* quadrants: pattern carries the meaning, ink carries the palette */
  --q-flow: #2B2FE3;
  --q-silent: #1A1A17;
  --q-phantom: #75756C;
  --q-loud: #1A1A17;
  --header-bg: #ECECE7;
  --gutter: clamp(24px, 5vw, 64px);
  --r-tag: 0;
  --r-control: 0;
  --r-container: 0;
  --r-frame: 0;
  --btn-bg: var(--brand);
  --btn-fg: #ffffff;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-1);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.57;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* links inside running text are underlined, not color-only */
.prose a, .lede a, .body-copy a, .card-body a, .callout a, .small a,
.footer-meta a, .step-list a, .ali-desc a, .refs a {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--accent) 55%, transparent);
}
.prose a:hover, .lede a:hover, .body-copy a:hover, .card-body a:hover, .callout a:hover,
.small a:hover, .footer-meta a:hover, .step-list a:hover, .ali-desc a:hover, .refs a:hover {
  text-decoration-color: var(--accent);
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
::selection { background: var(--brand); color: #ffffff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; padding: 12px 20px;
  background: var(--bg-base); color: var(--text-1);
  border: 1px solid var(--hairline-strong); z-index: 60;
}
.skip-link:focus { left: 16px; top: 16px; }

/* Hero accent text: the one blue, used once per page */
.grad-text { color: var(--hero-accent); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container { max-width: 1280px; margin: 0 auto; }
.container-narrow { max-width: 960px; margin: 0 auto; }
.section { padding: clamp(72px, 9vw, 128px) var(--gutter); border-top: 1px solid var(--hairline); background: var(--bg-base); }
.section-compact { padding: clamp(56px, 8vw, 96px) var(--gutter); border-top: 1px solid var(--hairline); background: var(--bg-base); }
/* the alternating band keeps the same paper: a dotted rule marks the seam */
.section.bg-raised, .section-compact.bg-raised { background: var(--bg-base); border-top: 1px dashed var(--hairline-strong); }
.section-hero { padding: clamp(56px, 8vw, 112px) var(--gutter) clamp(64px, 8vw, 104px); border-top: 0; position: relative; overflow: hidden; background: var(--bg-base); }
.section-hero > * { position: relative; z-index: 1; }
section[id] { scroll-margin-top: 84px; }
/* Swiss register: heroes sit left, never centered */
.hero-center { text-align: left; }
.hero-center .h-hero, .hero-center .lede { margin-left: 0; margin-right: 0; }
.hero-center .btn-row { justify-content: flex-start; }
.hero-center .matrix-frame { text-align: left; }
.bg-base { background: var(--bg-base); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 56px); }
.grid-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 4vw, 56px); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* Editorial split: heading rail left, running content right */
.section-split {
  display: grid; grid-template-columns: minmax(min(280px, 100%), 5fr) 7fr;
  gap: clamp(32px, 5vw, 88px); align-items: start;
}
.section-split > .split-head { position: sticky; top: 96px; }
.split-body > .lede { margin-top: 0; }
.split-body > .lede + .body-copy, .split-body > .body-copy + .body-copy { margin-top: 20px; }
.col-2-text { columns: 2; column-gap: clamp(32px, 4vw, 56px); }
.col-2-text > p { break-inside: avoid; max-width: none; }
.col-2-text > p:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .section-split { grid-template-columns: 1fr; gap: 28px; }
  .section-split > .split-head { position: static; }
  .col-2-text { columns: 1; }
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.kicker {
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-code);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-1);
}
.kicker-muted { display: block; color: var(--text-3); }
.kicker-loud { color: var(--brand); }
/* eyebrow: plain small caps, no ornament */
.tag-lines { position: relative; }
.tag-lines::before, .tag-lines::after { content: none; }
.rule { height: 1px; margin: 16px 0 28px; background: var(--hairline-strong); transform-origin: left center; }
.rule-loud { background: var(--brand); }

.h-hero, .h-page, .h-section, .h-sub, .h-card { text-wrap: balance; }
.h-hero {
  margin: 0; max-width: none;
  font-family: var(--font-display);
  font-size: clamp(52px, 9.5vw, 128px);
  line-height: 1.0; letter-spacing: -0.035em; font-weight: 400;
  color: var(--text-1);
}
/* the printed signature: a full rule directly under the display line */
.section-hero .h-hero {
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: clamp(16px, 3vw, 32px);
}
.h-page {
  margin: 0; max-width: 1040px;
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 1.04; letter-spacing: -0.03em; font-weight: 400;
  color: var(--text-1);
}
.h-section {
  margin: 0; max-width: 900px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.12; letter-spacing: -0.025em; font-weight: 400;
  color: var(--text-1);
}
.h-sub {
  margin: 0; max-width: 720px;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.25; letter-spacing: -0.018em; font-weight: 400;
  color: var(--text-1);
}
.h-card {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 400;
  color: var(--text-1);
}
.lede { margin: 26px 0 0; max-width: 640px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; font-weight: 400; color: var(--text-1); }
.body-copy { margin: 22px 0 0; max-width: 640px; font-size: 15.5px; line-height: 1.62; color: var(--text-2); }
.small { font-size: 13px; line-height: 1.55; letter-spacing: 0.01em; color: var(--text-2); }
.mono { font-family: var(--font-code); font-variant-numeric: tabular-nums; }

/* Long-form article prose */
.prose { max-width: 680px; }
.prose h2 {
  margin: clamp(44px, 6vw, 64px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2; letter-spacing: -0.02em; font-weight: 400;
  color: var(--text-1);
  border-top: 1px solid var(--hairline-strong);
  padding-top: 20px;
}
.prose h3 {
  margin: 32px 0 0;
  font-family: var(--font-display);
  font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 500;
  color: var(--text-1);
}
.prose p { margin: 20px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--text-2); }
.prose p strong, .prose li strong { color: var(--text-1); font-weight: 500; }
.prose ul, .prose ol { margin: 20px 0 0; padding-left: 22px; color: var(--text-2); display: grid; gap: 10px; }
.prose blockquote {
  margin: 28px 0 0; padding: 4px 0 4px 24px;
  border: 0;
  border-left: 2px solid var(--brand);
  background: transparent;
  color: var(--text-1);
}
.prose blockquote p { margin: 0; color: var(--text-1); }
.prose code { font-family: var(--font-code); font-size: 0.9em; background: var(--bg-raised); border: 1px solid var(--hairline); padding: 1px 6px; }
.prose pre {
  margin: 24px 0 0; padding: 20px 24px; overflow-x: auto;
  background: transparent; border: 1px solid var(--hairline-strong);
  font-family: var(--font-code); font-size: 14px; line-height: 1.6; color: var(--text-1);
}
.prose pre code { background: none; border: 0; padding: 0; }
.prose hr { border: 0; height: 1px; background: var(--hairline); margin: clamp(40px, 6vw, 56px) 0 0; }

/* Tables */
.table-wrap { margin: 32px 0 0; overflow-x: auto; }
.data-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.data-table th {
  text-align: left; padding: 12px 16px 12px 0;
  font-family: var(--font-code); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--hairline-strong);
}
.data-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hairline); color: var(--text-2); vertical-align: top; }
.data-table td:first-child { color: var(--text-1); }
.data-table .mono { color: var(--text-1); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: 64px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms linear, border-color 200ms linear;
}
.site-header.is-scrolled { background: var(--header-bg); border-bottom-color: var(--hairline); }
.site-header .header-inner {
  max-width: none;
  margin: 0 auto; padding: 0 clamp(20px, 2.5vw, 32px); height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* The wordmark carries the mark itself: the same four-segment confidence bar
   the model uses to report evidence, two filled and two empty. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--text-1); white-space: nowrap;
}
/* tracking adds a trailing space after the F, which would make the gap to
   the mark read wider than it is; pull it back so the spacing is optical */
.brand-word { display: block; margin-right: -0.38em; }
.brand-mark { display: flex; align-items: center; gap: 3px; flex: none; }
.brand-mark i {
  width: 7px; height: 12px; display: block;
  border: 1px solid var(--text-1); background: transparent;
  transition: background-color 160ms linear, border-color 160ms linear;
}
.brand-mark i.on { background: var(--brand); border-color: var(--brand); }
.brand:hover { text-decoration: none; }
.brand:hover .brand-mark i { border-color: var(--brand); }
.brand:hover .brand-mark i.on { background: var(--brand-hover); border-color: var(--brand-hover); }
.primary-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.primary-nav a {
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-1); white-space: nowrap;
  transition: color 160ms linear;
}
.primary-nav a:hover { color: var(--brand); text-decoration: none; }
.primary-nav a[aria-current="page"] { color: var(--brand); }
.header-actions { display: flex; align-items: center; gap: 16px; }

/* header CTA: a blue wordmark-weight link, not a filled control */
.site-header .header-cta {
  height: auto; padding: 0; border: 0; background: transparent;
  font-family: var(--font-text);
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand);
}
.site-header .header-cta:hover { background: transparent; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; place-items: center;
  border: 1px solid var(--hairline-strong);
  background: transparent; color: var(--text-1); cursor: pointer;
}
.mobile-nav { display: none; }

@media (max-width: 1023px) {
  .primary-nav, .site-header .header-cta { display: none !important; }
  .nav-toggle { display: grid; }
  .mobile-nav.is-open {
    display: block; position: fixed; top: 64px; left: 0; right: 0; z-index: 49;
    background: var(--bg-base);
    border-bottom: 1px solid var(--hairline-strong);
    padding: 16px var(--gutter) 28px;
  }
  .mobile-nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
  .mobile-nav ul a { display: block; padding: 14px 0; font-size: 17px; color: var(--text-1); border-bottom: 1px solid var(--hairline); }
  .mobile-nav ul a:hover { text-decoration: none; color: var(--brand); }
  .mobile-nav .btn-primary {
    margin-top: 24px; width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 24px; border-bottom: 0;
    color: var(--btn-fg); font-size: 12px;
  }
  .mobile-nav .btn-primary:hover { color: var(--btn-fg); text-decoration: none; }
}

/* --------------------------------------------------------------------------
   Buttons — square-cut; one filled action in the whole system
   -------------------------------------------------------------------------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 30px; border: 1px solid var(--brand);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-text); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color 160ms linear, border-color 160ms linear;
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); text-decoration: none; color: var(--btn-fg); }
.btn-primary:active { background: #1518AE; }
.btn-primary.btn-sm { height: 42px; padding: 0 20px; font-size: 11px; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 30px;
  border: 1px solid var(--hairline-strong);
  background: transparent; color: var(--text-1);
  font-family: var(--font-text); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: color 160ms linear, border-color 160ms linear;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
/* arrow links: the ↘ prefix is the house glyph, and it never underlines */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; white-space: nowrap; color: var(--brand); }
/* nowrap keeps the arrow glued to short links, but the long "Next case ..." labels
   cannot fit on a narrow phone and push the page sideways, so let them wrap */
@media (max-width: 480px) { .link-arrow { white-space: normal; } }
.link-arrow::before { content: "↘"; font-size: 0.95em; transition: transform 160ms ease; }
.link-arrow:hover::before { transform: translate(2px, 2px); }
.link-arrow span { display: none; }
.link-arrow, .link-arrow:hover,
.prose .link-arrow, .prose .link-arrow:hover,
.lede .link-arrow, .body-copy .link-arrow, .small .link-arrow, .card-body .link-arrow,
.callout .link-arrow, .callout .link-arrow:hover {
  text-decoration: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Cards — no boxes: a strong top rule and open space below it
   -------------------------------------------------------------------------- */
.card {
  padding: clamp(20px, 2.6vw, 28px) 0 0;
  border: 0; border-top: 1px solid var(--card-border);
  background: var(--card-fill);
  transition: border-color 180ms linear;
}
.card:hover { border-top-color: var(--card-border); }
a.card-link:hover { border-top-color: var(--brand); }
a.card-link:hover .h-card { color: var(--brand); }
.card-title-row { display: flex; align-items: center; gap: 10px; }
.card .h-card { margin-top: 18px; transition: color 140ms linear; }
.card-body { margin: 14px 0 0; max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.card-treatment {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--hairline);
  font-size: 15px; line-height: 1.6; color: var(--text-1);
}
.card-treatment strong { font-weight: 500; }
a.card-link { display: block; color: inherit; }
a.card-link:hover { text-decoration: none; }

/* Quadrant pattern swatches */
.swatch {
  width: 24px; height: 24px; flex: none;
  border: 1px solid var(--hairline-strong);
}
.pat-silent { background-image: repeating-linear-gradient(45deg, var(--q-silent) 0 1.5px, transparent 1.5px 6px); }
.pat-phantom { color: var(--q-phantom); background-image: radial-gradient(currentColor 1.2px, transparent 1.4px); background-size: 8px 8px; }
.pat-loud { background-image: repeating-linear-gradient(45deg, var(--q-loud) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(-45deg, var(--q-loud) 0 1.5px, transparent 1.5px 5px); }
.pat-flow { background: color-mix(in oklab, var(--q-flow) 45%, transparent); }
.q-silent { color: var(--q-silent); }
.q-phantom { color: var(--q-phantom); }
.q-loud { color: var(--q-loud); }
.q-flow { color: var(--q-flow); }

/* Callout: a bare blue-edged margin note */
.callout {
  padding: 4px 0 4px 24px;
  border: 0;
  border-left: 2px solid var(--brand);
  background: transparent;
}
.callout .kicker { margin-bottom: 10px; }
.callout p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-1); }
.callout p + p { margin-top: 10px; }
.callout-flow { border-left-color: var(--brand); }
.callout-loud { border-left-color: var(--text-1); }
.callout-phantom { border-left-color: var(--text-3); }
.callout-silent { border-left-color: var(--text-1); }

/* Chips — machine-readable tags */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-1);
  white-space: nowrap;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------------------
   Score marks: number @ confidence, segment bar
   -------------------------------------------------------------------------- */
.score-mark {
  font-family: var(--font-code); font-weight: 500; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}
.score-mark .at { color: var(--text-3); padding: 0 0.18em; }
.segs { display: flex; gap: 4px; }
.segs i { width: 18px; height: 9px; background: transparent; border: 1px solid var(--hairline-strong); }
.segs i.on { background: var(--seg-on); border-color: var(--seg-on); }
.segs-lg { gap: 6px; }
.segs-lg i { width: 34px; height: 14px; }

.stat-number {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 72px); font-weight: 400; line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}

/* --------------------------------------------------------------------------
   The matrix
   -------------------------------------------------------------------------- */
.matrix-frame {
  display: grid; grid-template-columns: 36px 1fr; grid-template-rows: 32px 1fr;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-base);
  overflow: hidden;
}
.matrix-corner { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.matrix-x-axis {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 2.4vw, 28px);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-code); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
.matrix-x-axis .axis-name { color: var(--text-1); }
.matrix-y-axis {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.4vw, 28px) 0;
  border-right: 1px solid var(--hairline);
  font-family: var(--font-code); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
.matrix-y-axis span { writing-mode: vertical-rl; }
.matrix-y-axis .axis-name { color: var(--text-1); }
.matrix-pad { position: relative; }
.matrix-quads { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.matrix-quads > div { position: relative; overflow: hidden; }
.matrix-quads > div:nth-child(1) { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.matrix-quads > div:nth-child(2) { border-bottom: 1px solid var(--hairline); }
.matrix-quads > div:nth-child(3) { border-right: 1px solid var(--hairline); }
.mq-fill { position: absolute; inset: 0; }
.mq-fill.fill-flow { background: color-mix(in oklab, var(--q-flow) 10%, transparent); }
.mq-fill.fill-phantom { color: var(--q-phantom); background-image: radial-gradient(currentColor 1.2px, transparent 1.4px); background-size: 11px 11px; opacity: 0.45; }
.mq-fill.fill-silent { background-image: repeating-linear-gradient(45deg, var(--q-silent) 0 1px, transparent 1px 9px); opacity: 0.35; }
.mq-fill.fill-loud { background-image: repeating-linear-gradient(45deg, var(--q-loud) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, var(--q-loud) 0 1px, transparent 1px 6px); opacity: 0.3; }
.mq-active { position: absolute; inset: 0; opacity: 0; transition: opacity 220ms linear; }
.mq-label { position: relative; padding: clamp(16px, 2.4vw, 28px); }
.mq-label .kicker { margin: 0; }
.mq-label h3 {
  margin: 8px 0 0; font-family: var(--font-display);
  font-size: clamp(15px, 2vw, 24px); line-height: 1.2;
  letter-spacing: -0.015em; font-weight: 400; color: var(--text-1);
}

/* interactive hero matrix */
.matrix-hero .matrix-pad { touch-action: none; cursor: crosshair; }
.matrix-hero { height: clamp(380px, 52vw, 552px); }
.matrix-guide-v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--brand); opacity: 0.4; }
.matrix-guide-h { position: absolute; left: 0; right: 0; height: 1px; background: var(--brand); opacity: 0.4; }
.matrix-dot {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center; border-radius: 50%; cursor: grab;
}
.matrix-dot span {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--bg-base);
  box-shadow: 0 0 0 1px var(--brand);
}

/* result plot */
.matrix-plot { height: clamp(360px, 46vw, 480px); }
.plot-point {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.plot-point i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--bg-base);
}
.plot-point span {
  font-family: var(--font-code); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-1);
}

/* --------------------------------------------------------------------------
   Diagram plates. Every drawing on the site is one system: paper ground,
   ink hairlines, one blue for whatever is being explained, and the same
   four state patterns used everywhere else. Text inside each SVG is styled
   from these classes rather than presentation attributes, so the labels can
   be enlarged on narrow screens where the whole drawing scales down.
   -------------------------------------------------------------------------- */
.fig { margin: clamp(32px, 5vw, 44px) 0 0; max-width: 660px; }
.fig-frame { border: 1px solid var(--hairline-strong); padding: clamp(16px, 3vw, 26px); }
.fig-head {
  display: flex; gap: 16px; align-items: baseline; justify-content: space-between;
  margin: 0 0 clamp(14px, 2.4vw, 22px); padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.fig-num, .fig-title { margin: 0; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.fig-num { color: var(--brand); white-space: nowrap; }
/* flex items cannot shrink below min-content by default, so a long figure title
   spills past the frame on a very narrow phone; min-width:0 lets it wrap instead */
.fig-title { color: var(--text-3); text-align: right; min-width: 0; }
.fig svg { display: block; width: 100%; height: auto; }
.fig-cap { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.prose .fig-cap { margin-top: 14px; }
/* a plate that sits in a wide section rather than inside prose */
.fig-wide { max-width: none; }

/* drawing primitives */
.f-rule { stroke: var(--hairline-strong); stroke-width: 1; fill: none; }
.f-hair { stroke: var(--hairline); stroke-width: 1; fill: none; }
.f-dash { stroke: var(--hairline-strong); stroke-width: 1; fill: none; stroke-dasharray: 3 4; }
.f-blue { stroke: var(--brand); stroke-width: 1.5; fill: none; }
.f-blue-t { stroke: var(--brand); stroke-width: 3; fill: none; }
.f-blue-f { fill: var(--brand); stroke: none; }
.f-blue-q { fill: var(--brand); opacity: 0.12; stroke: none; }
.f-ink { stroke: var(--text-1); stroke-width: 1.5; fill: none; }
.f-ink-f { fill: var(--text-1); stroke: none; }
.f-ghost { fill: var(--text-1); opacity: 0.07; stroke: none; }
.f-ghost-s { stroke: var(--text-1); opacity: 0.3; stroke-width: 1; fill: none; }

/* drawing type */
.f-l  { font-family: var(--font-text); font-size: 13px; letter-spacing: 0.12em; fill: var(--text-3); }
.f-lb { font-family: var(--font-text); font-size: 13px; letter-spacing: 0.12em; fill: var(--text-1); }
.f-lu { font-family: var(--font-text); font-size: 13px; letter-spacing: 0.12em; fill: var(--brand); }
.f-b  { font-family: var(--font-text); font-size: 15px; letter-spacing: -0.01em; fill: var(--text-1); }
.f-s  { font-family: var(--font-text); font-size: 12px; letter-spacing: 0.01em; fill: var(--text-3); }
.f-n  { font-family: var(--font-text); font-size: 30px; letter-spacing: -0.03em; fill: var(--text-1); font-variant-numeric: tabular-nums; }
.f-nb { font-family: var(--font-text); font-size: 30px; letter-spacing: -0.03em; fill: var(--brand); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .f-l, .f-lb, .f-lu { font-size: 17px; letter-spacing: 0.08em; }
  .f-b { font-size: 19px; }
  .f-s { font-size: 15px; }
  .f-n, .f-nb { font-size: 36px; }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 8px; margin-top: 24px; }
.field label { font-size: 14.5px; color: var(--text-1); font-weight: 500; }
.field .hint { font-size: 13px; color: var(--text-3); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field textarea, .field select {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--hairline-strong);
  background: transparent; color: var(--text-1);
  font-family: var(--font-text); font-size: 16px;
}
.bg-raised .field input, .bg-raised .field textarea, .bg-raised .field select { background: transparent; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.checkbox-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: 14.5px; color: var(--text-2); }
.checkbox-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.form-status { margin: 16px 0 0; font-size: 14.5px; }
.form-status.err { color: var(--text-1); font-weight: 500; }
.form-status.ok { color: var(--brand); }
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Radio option rows (scorecard answers) */
.option-group { display: grid; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 16px;
  min-height: 56px; padding: 10px 18px;
  border: 1px solid var(--hairline);
  background: transparent; cursor: pointer;
  transition: border-color 140ms linear, background-color 140ms linear;
  font-size: 16px; color: var(--text-1); text-align: left;
  font-family: var(--font-text); width: 100%;
}
.option:hover { border-color: var(--hairline-strong); }
.option[aria-checked="true"] { border-color: var(--brand); background: var(--accent-quiet); }
.option .dot {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1px solid var(--hairline-strong); background: transparent;
}
.option[aria-checked="true"] .dot {
  border-color: var(--brand); background: var(--brand);
  box-shadow: inset 0 0 0 3px var(--bg-base);
}

/* Evidence toggle */
.evidence-group {
  display: flex; gap: 0; padding: 0;
  border: 1px solid var(--hairline-strong);
  width: max-content; max-width: 100%; flex-wrap: wrap;
}
.evidence-group button {
  min-height: 44px; padding: 0 18px; border: 0;
  background: transparent; color: var(--text-2);
  font-family: var(--font-text); font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer; transition: background-color 140ms linear, color 140ms linear;
}
.evidence-group button[aria-pressed="true"] { background: var(--brand); color: #ffffff; }

/* Progress bar */
.progress-track { flex: 1; height: 2px; background: var(--hairline); overflow: hidden; }
.progress-fill { width: 0%; height: 100%; background: var(--brand); transition: width 320ms ease; }
.progress-fill.pass-2 { background: var(--text-1); }

/* --------------------------------------------------------------------------
   Scroll stories. Two on the home page: a pinned matrix that a marker walks
   around while the score stays fixed, and a vertical timeline whose spine
   fills as each layer draws itself. Both work without JavaScript, at their
   finished state, because the from-states are set by GSAP at init.
   -------------------------------------------------------------------------- */
/* text on the left, the drawing on the right and pinned while you read past it */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.story-steps { order: 1; }
.story-stage { order: 2; position: sticky; top: 88px; }
/* the morph scene reuses one cast of shapes for all six layers: the rects
   and paths keep their identity and only their geometry is tweened, so the
   fill and stroke are declared once here */
.sc-r { fill: var(--brand); stroke: var(--brand); stroke-width: 1.5; }
.sc-p { fill: none; stroke: var(--hairline-strong); stroke-width: 1.5; }
.sc-p[data-p="3"] { stroke: var(--brand); stroke-width: 3; }
.sc-p[data-p="2"], .sc-p[data-p="3"] { opacity: 0; }
.sc-arrow { fill: var(--brand); stroke: none; opacity: 0; }
.sc-lab { opacity: 0; }
.sc-lab[data-lab="1"] { opacity: 1; }
.sc-pat { opacity: 0; }
.story-step {
  min-height: 74vh; padding: clamp(32px, 5vw, 48px) 0;
  display: flex; flex-direction: column; justify-content: center;
  border-top: 1px dashed var(--hairline-strong);
  transition: opacity 300ms linear;
}
.story-step:first-child { border-top: 0; }
.story-q rect { fill: var(--brand); opacity: 0; }
.story-q.is-on rect { opacity: 0.16; }
.story-q rect { transition: opacity 380ms linear; }
.story-dot { transition: transform 620ms cubic-bezier(0.65, 0, 0.35, 1); }
.story-dot-ring { fill: none; stroke: var(--brand); stroke-width: 1; opacity: 0.55; }
.story-readout {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(20px, 3vw, 28px); padding-top: 20px;
  border-top: 1px solid var(--hairline-strong);
}
.story-readout .small { margin: 8px 0 0; color: var(--text-3); }
.score-mark.story-score { margin: 10px 0 0; font-size: clamp(26px, 3vw, 34px); }
.story-treatment {
  margin: 10px 0 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.25;
  letter-spacing: -0.015em; color: var(--brand); text-wrap: balance;
}
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 0; }
  /* the drawing goes to the top on narrow screens and stays there while the
     steps scroll underneath it */
  .story-stage {
    order: 0; top: 64px; z-index: 3;
    background: var(--bg-base); padding-bottom: 16px;
    margin-bottom: 8px;
  }
  .story-steps { order: 1; }
  .story-step { min-height: 0; padding: 32px 0; }
  /* the readout goes to one column so neither half has to wrap mid-phrase */
  .story-readout { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-dot, .story-q rect, .story-step { transition: none; }
}

/* The assembly finale. A tall track gives the scroll distance; the stage
   inside it is pinned for the duration and starts on empty paper. The six
   blocks arrive at the centre and travel out to their places in the chain,
   then the sentence, the note and the link arrive in turn. */
.section-assembly { background: var(--bg-base); border-top: 1px solid var(--hairline); }
.assembly-track { position: relative; height: 420vh; }
.assembly-stage {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center;
  padding: 0 var(--gutter);
}
.assembly-inner { width: min(920px, 100%); text-align: center; }
.assembly-inner .kicker { display: block; margin-bottom: clamp(24px, 4vw, 40px); }
.assembly-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the chain is drawn at 560 units and displayed much larger, so its labels
   are set down to stop the longest ones colliding between blocks */
.assembly-svg .f-s { font-size: 11px; letter-spacing: 0.03em; }
@media (max-width: 760px) { .assembly-svg .f-s { font-size: 12px; } }
.ab-blk { transform-box: view-box; }
.assembly-sentence {
  margin: clamp(32px, 5vw, 52px) auto 0; max-width: 760px;
  font-size: clamp(20px, 2.8vw, 32px); line-height: 1.25; letter-spacing: -0.02em;
  color: var(--brand); text-wrap: balance;
}
.assembly-note {
  margin: clamp(20px, 3vw, 28px) auto 0; max-width: 640px;
  font-size: clamp(14px, 1.5vw, 16px); line-height: 1.55; color: var(--text-2);
  text-wrap: pretty;
}
.assembly-cta { margin: clamp(28px, 4vw, 40px) 0 0; }
.assembly-cta .link-arrow { justify-content: center; }
@media (max-width: 760px) {
  .assembly-track { height: 360vh; }
  .assembly-svg { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .assembly-track { height: auto; }
  .assembly-stage { position: static; height: auto; padding: clamp(72px, 9vw, 128px) var(--gutter); }
}

/* Timeline */
.tl { position: relative; padding-left: clamp(48px, 7vw, 76px); }
.tl-spine { position: absolute; left: 17px; top: 8px; bottom: 8px; width: 1px; background: var(--hairline); }
.tl-spine i {
  position: absolute; inset: 0; display: block; background: var(--brand);
  transform: scaleY(0); transform-origin: top center;
}
.tl-item { position: relative; padding: clamp(30px, 4.5vw, 52px) 0; }
.tl-item + .tl-item { border-top: 1px dashed var(--hairline); }
.tl-node {
  position: absolute; left: calc(-1 * clamp(48px, 7vw, 76px)); top: clamp(30px, 4.5vw, 52px);
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--hairline-strong); background: var(--bg-base);
  font-size: 11px; letter-spacing: 0.06em; color: var(--text-3);
  transition: color 260ms linear, border-color 260ms linear, background-color 260ms linear;
}
.tl-item.is-on .tl-node { border-color: var(--brand); background: var(--brand); color: #ffffff; }
.tl-node-end { font-size: 15px; letter-spacing: 0; }
.tl-body .card-body { max-width: 560px; }
.tl-viz { display: block; width: 100%; max-width: 420px; height: auto; margin: clamp(20px, 3vw, 28px) 0 0; overflow: visible; }
/* the mini plates are drawn at 260 units wide and displayed larger, so their
   labels need setting down to land at the same optical size as the page */
.tl-viz .f-s { font-size: 9.5px; letter-spacing: 0.06em; }
@media (max-width: 760px) { .tl-viz .f-s { font-size: 11.5px; } }
.tl-out {
  margin: clamp(18px, 2.5vw, 24px) 0 0; padding-top: 12px;
  border-top: 1px solid var(--hairline);
  max-width: 420px;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.tl-out span { color: var(--brand); margin-left: 8px; }
.tl-final .tl-viz, .tl-final .fig { max-width: none; }
.tl-sentence {
  margin: clamp(18px, 2.5vw, 24px) 0 0; padding-top: 16px;
  border-top: 1px solid var(--hairline-strong);
  font-size: clamp(16px, 1.9vw, 21px); line-height: 1.35; letter-spacing: -0.012em;
  color: var(--brand); text-wrap: balance;
}
@media (max-width: 760px) {
  .tl-viz { max-width: none; }
  .tl-out { max-width: none; }
}
/* SVG transform origins for the draw-in animations */
.f-grow-x { transform-box: fill-box; transform-origin: left center; }
.f-grow-y { transform-box: fill-box; transform-origin: bottom center; }
.f-pop { transform-box: fill-box; transform-origin: center center; }

/* --------------------------------------------------------------------------
   Fit check. Same square register as the scorecard: one framed panel, one
   question at a time, and a result that is allowed to be a refusal.
   -------------------------------------------------------------------------- */
.fit-panel { border: 1px solid var(--hairline-strong); padding: clamp(24px, 4vw, 48px) clamp(20px, 3.5vw, 40px); }
.fit-progress { display: flex; align-items: center; gap: 20px; }
.fit-progress .kicker { white-space: nowrap; }
.fit-verdict {
  margin: 0; display: inline-block; padding: 8px 14px;
  background: var(--brand); color: #ffffff;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.fit-meter { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hairline); max-width: 460px; }
.fit-meter .small { color: var(--text-3); }
.fit-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(24px, 4vw, 48px);
  margin: 32px 0 0; padding-top: 26px; border-top: 1px solid var(--hairline-strong);
}
.fit-notes { margin: 32px 0 0; padding-top: 22px; border-top: 1px dashed var(--hairline-strong); }
.fit-note-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 640px; }
.fit-note-list li {
  font-size: 13.5px; line-height: 1.55; color: var(--text-2);
  padding-left: 20px; position: relative;
}
.fit-note-list li::before { content: "↘"; position: absolute; left: 0; color: var(--brand); }

/* --------------------------------------------------------------------------
   Surface rows on the result page
   -------------------------------------------------------------------------- */
.surface-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: clamp(16px, 3vw, 32px); align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--hairline);
}
@media (max-width: 760px) {
  .surface-row { grid-template-columns: 1fr 1fr; }
  .surface-row > div:first-child, .surface-row > div:last-child { grid-column: 1 / -1; }
  .surface-row > div:last-child { justify-self: start !important; }
}
.bar-track { height: 4px; background: var(--hairline); overflow: hidden; }
.bar-fill { height: 100%; width: 0%; transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.bar-label { margin: 0 0 8px; font-family: var(--font-code); font-variant-numeric: tabular-nums; font-size: 12.5px; letter-spacing: 0.04em; color: var(--text-2); }
.bar-label strong { color: var(--text-1); font-weight: 500; }

/* Case studies + About: aside next to article */
.case-split { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 4vw, 80px); align-items: start; }
/* grid items default to min-width:auto, so a wide child (a .fig, a table) can force
   the track past the viewport and scroll the whole page sideways on phones */
.case-split > * { min-width: 0; }
@media (max-width: 900px) { .case-split { grid-template-columns: 1fr; } }
.about-split { display: grid; grid-template-columns: 1fr 320px; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; } }
.aside-sticky { position: sticky; top: 96px; }
@media (max-width: 900px) { .aside-sticky { position: static; } }

.chip-quad {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-1); white-space: nowrap;
}
.chip-quad .swatch { width: 12px; height: 12px; }

.score-card {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); align-items: flex-end;
  padding: 24px 0 0; border: 0; border-top: 1px solid var(--hairline-strong);
  background: transparent;
}
.score-card .arrow { font-family: var(--font-code); font-size: 22px; color: var(--text-3); padding-bottom: 6px; }
.score-card .delta { margin-left: auto; }
.score-card .delta p { margin: 0; font-family: var(--font-code); font-variant-numeric: tabular-nums; font-size: clamp(26px, 3vw, 34px); font-weight: 500; line-height: 1.1; color: var(--brand); }
.score-pair { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.score-pair .score-mark { font-size: clamp(26px, 3vw, 34px); }
.score-pair .segs i { width: 16px; height: 8px; }

.stat-dl { margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 24px; }
.stat-dl dt { margin: 0; font-family: var(--font-code); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 500; color: var(--text-1); }
.stat-dl dd { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }

.filter-chip {
  height: 34px; padding: 0 14px;
  border: 1px solid var(--hairline); background: transparent; color: var(--text-2);
  font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms linear, color 140ms linear, background-color 140ms linear;
}
.filter-chip[aria-pressed="true"] { border-color: var(--brand); background: var(--accent-quiet); color: var(--brand); }

.pull-quote {
  margin: 32px 0 0; padding: 20px 0 0;
  border: 0; border-top: 1px solid var(--hairline-strong);
  background: transparent;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; letter-spacing: -0.01em; font-weight: 400; color: var(--text-1);
}

/* About profile card */
.profile-card {
  padding: 24px 0 0; border: 0; border-top: 1px solid var(--hairline-strong);
  background: transparent;
}
.profile-head { display: flex; gap: 16px; align-items: center; }
.portrait {
  position: relative;
  width: 96px; height: 96px; flex: none; overflow: hidden;
  border: 1px solid var(--hairline-strong); background: var(--accent-quiet);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 30px; font-weight: 400; color: var(--brand);
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.social-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.social-grid a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--hairline); color: var(--text-2);
  transition: border-color 140ms linear, color 140ms linear;
}
.social-grid a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

/* Result page: recommendations + side cards */
.result-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .result-cols { grid-template-columns: 1fr; } }

/* Numbered steps (loop / actions) */
.step-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.step-list > li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; }
.step-list > li > * { min-width: 0; overflow-wrap: break-word; }
.step-num {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  font-family: var(--font-code); font-variant-numeric: tabular-nums;
  font-size: 12px; letter-spacing: 0.04em; color: var(--brand);
}
.step-list p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-1); }
.step-list .step-note { margin-top: 8px; font-size: 13px; color: var(--text-3); }

/* --------------------------------------------------------------------------
   Footer — the printed colophon: dashed seam, oversized contact block
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-base);
  border-top: 1px dashed var(--hairline-strong);
  padding: clamp(56px, 7vw, 96px) var(--gutter) 40px;
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 40px; }
.footer-grid .kicker { margin-bottom: 16px; }
.footer-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.footer-grid a { font-size: 14px; color: var(--text-1); }
.footer-grid a:hover { color: var(--brand); text-decoration: none; }
.footer-meta {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
}
.footer-meta p { margin: 0; font-family: var(--font-code); font-variant-numeric: tabular-nums; font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-3); }
.footer-tagline {
  margin: 0 0 clamp(40px, 6vw, 72px); max-width: 820px;
  font-size: clamp(22px, 2.8vw, 36px); line-height: 1.25; letter-spacing: -0.02em;
  color: var(--text-1);
}

/* --------------------------------------------------------------------------
   Scroll reveal — driven by GSAP + ScrollTrigger in site.js. Content is
   visible by default so pages work with no JavaScript.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
}

/* --------------------------------------------------------------------------
   Article meta / insights index
   -------------------------------------------------------------------------- */
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-variant-numeric: tabular-nums; }
.summary-box { margin: 32px 0 0; }
.article-list { margin: 40px 0 0; border-top: 1px solid var(--hairline-strong); }
.article-list-item { display: block; padding: 28px 0; border-bottom: 1px dashed var(--hairline-strong); color: inherit; }
.article-list-item:hover { text-decoration: none; }
.article-list-item:hover .ali-title { color: var(--brand); }
.ali-title { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 400; color: var(--text-1); transition: color 140ms linear; }
.ali-desc { margin: 10px 0 0; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Manifesto
   -------------------------------------------------------------------------- */
.manifesto-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.manifesto-toc { position: sticky; top: 96px; }
.manifesto-toc ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.manifesto-toc a { font-size: 13px; color: var(--text-2); line-height: 1.4; display: block; padding-left: 12px; border-left: 1px solid transparent; margin-left: -13px; transition: color 140ms linear, border-color 140ms linear; }
.manifesto-toc a:hover { color: var(--text-1); text-decoration: none; }
.manifesto-toc a.is-active { color: var(--text-1); border-left-color: var(--brand); }
.manifesto-toc a.is-active .toc-num { color: var(--brand); }
.manifesto-toc .toc-num { font-family: var(--font-code); font-variant-numeric: tabular-nums; color: var(--text-3); margin-right: 8px; }

/* Chapter snap: scrolling settles each section heading just below the header,
   and TOC jumps glide instead of teleporting. Proximity (not mandatory) so
   reading inside a long chapter is never hijacked. The .snap-chapters class
   is added by site.js AFTER load settles — snap applied at load makes Chrome
   discard the hash scroll position and jump back to the first snap point. */
html.snap-chapters { scroll-snap-type: y proximity; scroll-behavior: smooth; }
.manifesto-layout .prose h2[id] { scroll-snap-align: start; scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html.snap-chapters { scroll-snap-type: none; scroll-behavior: auto; }
}
@media (max-width: 1023px) { .manifesto-layout { grid-template-columns: minmax(0, 1fr); } .manifesto-toc { display: none; } }
.eq {
  margin: 24px 0 0; padding: 20px 24px; overflow-x: auto;
  background: transparent; border: 1px solid var(--hairline-strong);
  font-family: var(--font-code); font-size: 14px; line-height: 1.7; color: var(--text-1);
  font-variant-numeric: tabular-nums; white-space: pre;
}
.bg-raised .eq { background: transparent; }
.refs { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.refs li { font-size: 14.5px; line-height: 1.6; color: var(--text-2); padding-left: 20px; text-indent: -20px; }
.refs li em { color: var(--text-1); font-style: italic; }
@media print {
  .site-header, .site-footer, .mobile-nav, .manifesto-toc, .no-print { display: none !important; }
  body { background: #fff; color: #111; }
  .manifesto-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Utility */
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.center .lede, .center .body-copy { margin-left: auto; margin-right: auto; }
.center .btn-row { justify-content: center; }