/* ============================================================
   lukehart.uk — design tokens & primitives  · v2
   Geometric sans-serif. Black-heavy. Neon category palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Tokens: light ---------- */
:root {
  /* Type families */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Type scale (base 17px, ratio ~1.25) */
  --t-xs: 0.765rem;
  --t-sm: 0.882rem;
  --t-base: 1rem;
  --t-lg: 1.118rem;
  --t-xl: 1.412rem;
  --t-2xl: 1.765rem;
  --t-3xl: 2.235rem;
  --t-4xl: 2.824rem;
  --t-5xl: 3.529rem;
  --t-6xl: 4.471rem;
  --t-display: 5.647rem;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Neutral palette — light */
  --bg: #FFFFFF;
  --surface: #F4F4F4;
  --surface-2: #EAEAEA;
  --rule: #E5E5E5;
  --rule-strong: #BFBFBF;
  --mute: #8A8A8A;
  --ink-3: #4A4A4A;
  --ink-2: #1A1A1A;
  --ink: #000000;

  /* Category / neon palette — shared across light & dark */
  --c-lime:    #C8FF00;   /* AI & tech policy · Method M.01 · primary brand accent */
  --c-cyan:    #00E0FF;   /* Asset management · Method M.02 · "industry" */
  --c-magenta: #FF2E88;   /* Geopolitics & trade · Method M.03 · "alert" */
  --c-orange:  #FF5A1F;   /* Brand, marketing & data · Method M.04 · "creative" */
  --c-violet:  #8B5CF6;   /* Luxury / venture · "premium" */
  --c-amber:   #FFB800;   /* Finance / fintech · "money" */

  /* What sits on top of each accent (for AA contrast) */
  --on-lime: #000000;
  --on-cyan: #000000;
  --on-magenta: #FFFFFF;
  --on-orange: #FFFFFF;
  --on-violet: #FFFFFF;
  --on-amber: #000000;

  /* Primary brand accent — lime carries the system */
  --accent: var(--c-lime);
  --accent-on: var(--on-lime);
  --accent-soft: rgba(200, 255, 0, 0.18);

  /* Semantic */
  --positive: #00C853;
  --caution: var(--c-amber);
  --danger: var(--c-magenta);

  /* Geometry */
  --max-w: 1280px;
  --col-gutter: 24px;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 120ms;
  --t-base-dur: 180ms;
  --t-slow: 280ms;
}

/* ---------- Tokens: dark ---------- */
[data-theme="dark"] {
  --bg: #000000;
  --surface: #0A0A0A;
  --surface-2: #141414;
  --rule: #1F1F1F;
  --rule-strong: #2E2E2E;
  --mute: #6A6A6A;
  --ink-3: #A8A8A8;
  --ink-2: #E5E5E5;
  --ink: #FFFFFF;
  --accent-soft: rgba(200, 255, 0, 0.10);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Type ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 6.5vw, var(--t-6xl)); font-weight: 600; }
h2 { font-size: clamp(2rem, 4vw, var(--t-4xl)); font-weight: 600; }
h3 { font-size: clamp(1.4rem, 2.4vw, var(--t-2xl)); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
h4 { font-size: var(--t-xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
p  { margin: 0 0 1em; }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
}
.eyebrow .dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
  vertical-align: middle; margin-right: 8px; transform: translateY(-1px);
}

.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.35;
  color: var(--ink-2);
  letter-spacing: -0.015em;
}

.num {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
}

a.link {
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
a.link:hover { color: var(--ink); border-bottom-color: var(--accent); border-bottom-width: 2px; }

/* Highlight word (replaces serif italic accent from v1) */
.hl {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-on);
  padding: 0 0.18em;
  margin: 0 -0.04em;
  line-height: 1;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.wrap-wide { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.wrap-read { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 24px; }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gutter); }
.section { padding: var(--s-24) 0; border-top: 1px solid var(--rule); }
.section:first-of-type { border-top: 0; }

/* ---------- Top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
  max-width: 1440px; margin: 0 auto; padding: 0 32px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: -0.04em;
  position: relative;
}
.brand-mark::before { content: "LH"; }
.brand-mark::after {
  content: ""; position: absolute; top: -2px; right: -2px;
  width: 6px; height: 6px; background: var(--accent);
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-family: var(--font-display);
  font-size: var(--t-sm); color: var(--ink-2);
  font-weight: 500; letter-spacing: -0.01em;
  transition: color var(--t-fast) var(--ease);
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-links a.active::after {
  content: ""; position: absolute; bottom: -24px; left: 0; right: 0;
  height: 2px; background: var(--accent);
}
.nav-cta {
  font-family: var(--font-display);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.01em;
  padding: 10px 16px; background: var(--ink); color: var(--bg);
  transition: background var(--t-fast) var(--ease);
  border: 1px solid var(--ink);
}
.nav-cta:hover { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.theme-toggle {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px;
  font-family: var(--font-display);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--bg); }
.btn-accent { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.btn-accent:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-tertiary { background: transparent; color: var(--ink); padding: 4px 0; border: 0; }
.btn-tertiary .arrow { transition: transform var(--t-fast) var(--ease); }
.btn-tertiary:hover { color: var(--ink); }
.btn-tertiary:hover .arrow { transform: translateX(4px); }

/* ---------- Category pills ---------- */
.pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  line-height: 1;
  background: var(--ink); color: var(--bg);
}
.pill-lg { padding: 7px 14px; font-size: var(--t-xs); }
.pill-lime    { background: var(--c-lime);    color: var(--on-lime); }
.pill-cyan    { background: var(--c-cyan);    color: var(--on-cyan); }
.pill-magenta { background: var(--c-magenta); color: var(--on-magenta); }
.pill-orange  { background: var(--c-orange);  color: var(--on-orange); }
.pill-violet  { background: var(--c-violet);  color: var(--on-violet); }
.pill-amber   { background: var(--c-amber);   color: var(--on-amber); }
.pill-ghost   { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }

/* ---------- Tags (older API, kept for back-compat) ---------- */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  padding: 4px 8px;
  border: 1px solid var(--rule-strong);
}

/* ---------- Cards ---------- */
.card {
  display: block;
  padding: var(--s-6);
  border: 1px solid var(--rule);
  background: var(--bg);
  transition: border-color var(--t-base-dur) var(--ease), transform var(--t-base-dur) var(--ease);
}
.card:hover { border-color: var(--ink); transform: translateY(-2px); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--rule);
  padding: var(--s-16) 0 var(--s-10);
  background: var(--ink); color: var(--bg);
  margin-top: var(--s-24);
}
.footer h5 {
  font-family: var(--font-mono); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--mute); margin-bottom: 16px; font-weight: 500;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-10);
  max-width: 1440px; margin: 0 auto; padding: 0 32px;
}
.footer .brand { color: var(--bg); }
.footer .brand-mark { background: var(--bg); color: var(--ink); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer ul a {
  font-family: var(--font-display);
  font-size: var(--t-sm); color: rgba(255,255,255,0.65);
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}
.footer ul a:hover { color: var(--accent); }
.footer-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s-12); padding: var(--s-6) 32px 0;
  max-width: 1440px; margin-left: auto; margin-right: auto;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--mute);
  letter-spacing: 0.06em;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .wrap, .wrap-wide { padding: 0 20px; }
  .nav-inner { padding: 0 20px; height: 58px; }
  .nav-links { display: none; }
  .grid-12 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 20px; }
  .footer-meta { padding: 24px 20px 0; flex-direction: column; gap: 12px; align-items: flex-start; }
  .section { padding: var(--s-16) 0; }
}

.nav-burger {
  display: none;
  width: 34px; height: 34px;
  border: 1px solid var(--rule-strong); background: transparent;
  position: relative;
}
.nav-burger span {
  position: absolute; left: 8px; right: 8px; height: 1.5px; background: var(--ink);
}
.nav-burger span:nth-child(1) { top: 12px; }
.nav-burger span:nth-child(2) { top: 18px; }
@media (max-width: 768px) {
  .nav-burger { display: block; }
}

/* =================================================================
   HOME page-specific styles (lifted from /mockups)
   ================================================================= */

/* =================================================================
     HOME — v2
     Geometric sans · neon category palette · black-heavy
     ================================================================= */

  /* ---------- HERO ---------- */
  .hero {
    background: var(--ink); color: var(--bg);
    padding: 96px 0 64px;
    position: relative; overflow: hidden;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
  }
  .hero .wrap-wide { position: relative; }
  .hero .pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 56px; }
  .hero .pill-ghost { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }

  .hero h1 {
    font-size: clamp(2.8rem, 8.5vw, 7.2rem);
    line-height: 0.95; letter-spacing: -0.045em; font-weight: 600;
    color: var(--bg); margin-bottom: 40px;
    max-width: 1280px;
  }
  .hero h1 .hl { background: var(--c-lime); color: #000; padding: 0 0.12em; }
  .hero h1 .hl-cyan { background: var(--c-cyan); color: #000; padding: 0 0.12em; }

  .hero-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 64px; align-items: end; margin-top: 24px; }
  .hero .deck {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    color: rgba(255,255,255,0.78); line-height: 1.35;
    max-width: 620px; letter-spacing: -0.015em;
  }
  .hero .actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
  .hero .actions .btn-primary { background: var(--c-lime); color: #000; border-color: var(--c-lime); }
  .hero .actions .btn-primary:hover { background: #fff; color: #000; border-color: #fff; }
  .hero .actions .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.3); }
  .hero .actions .btn-secondary:hover { background: #fff; color: #000; border-color: #fff; }

  .hero-side {
    border-left: 1px solid rgba(255,255,255,0.12);
    padding-left: 32px;
  }
  .hero-side h3 {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.5); font-weight: 500;
    margin-bottom: 20px;
  }
  .stat {
    display: grid; gap: 4px; padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .stat:last-child { border-bottom: 0; }
  .stat .figure {
    font-family: var(--font-display); font-weight: 600;
    font-size: 2.4rem; letter-spacing: -0.045em; line-height: 1; color: #fff;
  }
  .stat .figure small { font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.4); letter-spacing: 0.05em; font-weight: 400; }
  .stat .label { font-size: var(--t-sm); color: rgba(255,255,255,0.55); line-height: 1.35; }

  /* ---------- STATS RAIL (running tape) ---------- */
  .tape {
    background: var(--c-lime); color: #000;
    padding: 18px 0;
    border-top: 1px solid #000; border-bottom: 1px solid #000;
    overflow: hidden;
  }
  .tape-inner {
    display: flex; gap: 56px; align-items: center;
    font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.15em;
    white-space: nowrap;
    padding: 0 32px;
  }
  .tape-inner .sep { width: 8px; height: 8px; background: #000; transform: rotate(45deg); }

  /* ---------- SECTION HEADER ---------- */
  .sec-header {
    display: flex; justify-content: space-between; align-items: end;
    margin-bottom: 40px; gap: 32px; flex-wrap: wrap;
    padding-bottom: 24px; border-bottom: 1px solid var(--ink);
  }
  .sec-header .left { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .sec-header h2 {
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    line-height: 1; letter-spacing: -0.045em;
    max-width: 720px;
  }
  .sec-header .sub {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--mute);
  }
  .sec-header .sub .pulse {
    display: inline-block; width: 8px; height: 8px;
    background: var(--c-lime); border-radius: 50%;
    margin-right: 8px; transform: translateY(-1px);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
  .sec-header .right .btn { white-space: nowrap; }

  /* ---------- RESEARCH MOSAIC ---------- */
  .research { padding: 88px 0; }
  .mosaic {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    border-top: 2px solid var(--ink);
    border-left: 1px solid var(--ink);
  }
  .mosaic > * {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 28px;
    background: var(--bg);
    transition: transform var(--t-base-dur) var(--ease);
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    position: relative; overflow: hidden;
  }
  .mosaic > a:hover { transform: translateY(-2px); }
  .mosaic > a:hover .read-cta .arrow { transform: translateX(6px); }

  /* Cell variants */
  .cell-featured { grid-column: span 8; grid-row: span 2; padding: 40px; }
  .cell-half { grid-column: span 6; }
  .cell-third { grid-column: span 4; }
  .cell-quarter { grid-column: span 3; }
  .cell-eighth { grid-column: span 8; }

  /* Card content */
  .card-pill-row { display: flex; gap: 6px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
  .card-meta {
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--mute);
  }
  .card-title {
    font-family: var(--font-display); font-weight: 600;
    line-height: 1.05; letter-spacing: -0.03em;
    color: var(--ink); margin-top: auto;
  }
  .cell-featured .card-title { font-size: clamp(1.8rem, 3.2vw, 3rem); margin-top: 0; }
  .cell-half .card-title { font-size: clamp(1.4rem, 2vw, 1.8rem); }
  .cell-third .card-title { font-size: 1.35rem; }
  .cell-quarter .card-title { font-size: 1.1rem; }
  .card-deck {
    font-family: var(--font-display); font-weight: 400;
    color: var(--ink-3); margin-top: 14px;
    font-size: var(--t-base); line-height: 1.45; letter-spacing: -0.01em;
  }
  .cell-featured .card-deck { font-size: var(--t-lg); margin-top: 18px; max-width: 580px; }

  .card-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule);
    flex-wrap: wrap; gap: 12px;
  }
  .read-cta {
    font-family: var(--font-display); font-weight: 600;
    font-size: var(--t-sm); letter-spacing: -0.01em;
    color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
  }
  .read-cta .arrow { transition: transform var(--t-fast) var(--ease); }

  /* Chart-feature card (dark variant) */
  .cell-chart-dark { background: var(--ink); color: var(--bg); }
  .cell-chart-dark .card-title { color: #fff; }
  .cell-chart-dark .card-deck { color: rgba(255,255,255,0.65); }
  .cell-chart-dark .card-foot { border-top-color: rgba(255,255,255,0.12); }
  .cell-chart-dark .read-cta { color: var(--c-lime); }
  .cell-chart-dark .card-meta { color: rgba(255,255,255,0.45); }

  /* Chart-feature card (lime variant) */
  .cell-chart-lime { background: var(--c-lime); color: #000; }
  .cell-chart-lime .card-title { color: #000; }
  .cell-chart-lime .card-deck { color: rgba(0,0,0,0.72); }
  .cell-chart-lime .card-foot { border-top-color: rgba(0,0,0,0.18); }
  .cell-chart-lime .read-cta { color: #000; }
  .cell-chart-lime .card-meta { color: rgba(0,0,0,0.55); }

  /* Chart slot */
  .chart-slot {
    margin: 20px 0;
    flex-grow: 1;
    min-height: 140px;
    display: flex; align-items: center; justify-content: center;
  }
  .chart-slot svg { width: 100%; height: auto; max-height: 220px; }

  /* Big number callout inside chart card */
  .big-num {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -0.05em;
    line-height: 0.9;
    margin: 16px 0 12px;
  }
  .big-num small {
    font-family: var(--font-mono); font-size: 14px;
    letter-spacing: 0.05em; font-weight: 400; margin-left: 8px;
    color: rgba(0,0,0,0.5);
  }
  .cell-chart-dark .big-num small { color: rgba(255,255,255,0.5); }

  /* ---------- METHODS RAIL ---------- */
  .methods {
    padding: 96px 0; background: var(--surface);
    border-top: 2px solid var(--ink);
  }
  .methods-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
  .methods .intro h2 {
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    line-height: 1; letter-spacing: -0.045em;
    margin-bottom: 20px;
  }
  .methods .intro .lede { max-width: 480px; }
  .method-list {
    list-style: none; padding: 0; margin: 0;
    border-top: 2px solid var(--ink);
  }
  .method-row {
    display: grid; grid-template-columns: 60px 200px 1fr 100px;
    gap: 24px; padding: 28px 0; align-items: center;
    border-bottom: 1px solid var(--ink);
    transition: background var(--t-base-dur) var(--ease);
    text-decoration: none; color: inherit;
  }
  .method-row:hover { background: var(--bg); }
  .method-row .idx {
    font-family: var(--font-mono); font-size: var(--t-xs);
    color: var(--mute); letter-spacing: 0.06em;
  }
  .method-row .name {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.025em;
  }
  .method-row .desc {
    font-size: var(--t-sm); color: var(--ink-3); line-height: 1.45;
  }
  .method-row .go {
    text-align: right; font-family: var(--font-display); font-weight: 600;
    font-size: var(--t-sm); color: var(--ink); letter-spacing: -0.01em;
  }
  .method-row:hover .go { color: var(--ink); }
  .method-row:hover .go .arrow { transform: translateX(4px); }
  .method-row .arrow { display: inline-block; transition: transform var(--t-fast) var(--ease); }

  /* ---------- WORK STRIP ---------- */
  .work {
    padding: 96px 0;
    border-top: 2px solid var(--ink);
  }
  .work-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 2px solid var(--ink);
    border-left: 1px solid var(--ink);
  }
  .work-card {
    padding: 32px 28px;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    display: flex; flex-direction: column; min-height: 360px;
    background: var(--bg);
    transition: background var(--t-base-dur) var(--ease);
    text-decoration: none; color: inherit;
  }
  .work-card:hover { background: var(--ink); color: var(--bg); }
  .work-card:hover h3, .work-card:hover .sub, .work-card:hover .outcomes li { color: inherit; }
  .work-card:hover .outcomes { border-top-color: rgba(255,255,255,0.2); }
  .work-card:hover .more { color: var(--c-lime); }
  .work-card .num {
    font-family: var(--font-mono); font-size: 11px; color: var(--mute);
    text-transform: uppercase; letter-spacing: 0.14em;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
  }
  .work-card:hover .num { color: rgba(255,255,255,0.5); }
  .work-card h3 {
    font-size: 1.5rem; font-weight: 600; line-height: 1.1;
    margin-bottom: 12px; letter-spacing: -0.025em;
  }
  .work-card .sub { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: auto; line-height: 1.5; }
  .work-card .outcomes {
    margin-top: 24px; padding-top: 16px;
    border-top: 1px solid var(--rule);
    display: grid; gap: 8px;
  }
  .work-card .outcomes li {
    list-style: none; display: flex; gap: 12px; font-size: var(--t-sm);
    color: var(--ink-2);
  }
  .work-card:hover .outcomes li { color: rgba(255,255,255,0.8); }
  .work-card .outcomes li::before {
    content: "→"; color: var(--ink); font-family: var(--font-mono); flex-shrink: 0;
  }
  .work-card:hover .outcomes li::before { color: var(--c-lime); }
  .work-card .more {
    margin-top: 20px; font-family: var(--font-display); font-weight: 600;
    font-size: var(--t-sm); letter-spacing: -0.01em; color: var(--ink);
    display: inline-flex; align-items: center; gap: 8px;
  }

  /* ---------- VENTURES ---------- */
  .ventures {
    padding: 96px 0; background: var(--ink); color: var(--bg);
    border-top: 2px solid var(--ink);
  }
  .ventures h2 { color: #fff; }
  .ventures .sub { color: rgba(255,255,255,0.45); }
  .ventures .sec-header { border-bottom-color: rgba(255,255,255,0.2); }
  .venture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .venture {
    padding: 40px;
    background: var(--surface-2); color: var(--ink);
    display: flex; flex-direction: column; min-height: 400px;
    position: relative; overflow: hidden;
  }
  [data-theme="dark"] .venture { background: #141414; color: #fff; }
  .venture-fb { background: var(--c-lime); color: #000; }
  .venture-bv { background: var(--c-violet); color: #fff; }
  .venture .corner {
    position: absolute; top: 0; right: 0;
    font-family: var(--font-mono); font-size: 10px; padding: 8px 12px;
    text-transform: uppercase; letter-spacing: 0.14em;
    background: rgba(0,0,0,0.85); color: #fff;
  }
  .venture-bv .corner { background: rgba(255,255,255,0.95); color: #000; }
  .venture .logo-pad {
    width: 96px; height: 96px;
    display: grid; place-items: center;
    background: #000; color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 36px;
    letter-spacing: -0.05em; margin-bottom: 32px;
  }
  .venture-bv .logo-pad { background: #fff; color: #000; font-family: var(--font-display); font-style: italic; }
  .venture h3 { font-size: 2.4rem; margin-bottom: 8px; color: inherit; letter-spacing: -0.04em; }
  .venture .role {
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
    margin-bottom: 20px; opacity: 0.7;
  }
  .venture p { font-size: 1.05rem; line-height: 1.5; margin-bottom: 28px; flex: 1; max-width: 480px; }
  .venture-fb p { color: rgba(0,0,0,0.78); }
  .venture-bv p { color: rgba(255,255,255,0.78); }
  .venture .visit {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 600;
    font-size: var(--t-sm); letter-spacing: -0.01em;
    color: inherit;
  }
  .venture:hover .visit .arrow { transform: translate(3px, -3px); }
  .venture .visit .arrow { transition: transform var(--t-fast) var(--ease); }

  /* ---------- FULL-WIDTH CHART FEATURE ---------- */
  .chart-band {
    padding: 96px 0;
    background: var(--ink); color: var(--bg);
    border-top: 2px solid var(--ink);
  }
  .chart-band-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: center; }
  .chart-band .pill { margin-bottom: 24px; }
  .chart-band h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -0.04em; margin-bottom: 16px; }
  .chart-band p { color: rgba(255,255,255,0.65); font-size: var(--t-lg); max-width: 460px; line-height: 1.45; }
  .chart-band .actions { margin-top: 28px; }
  .chart-band .actions .btn { background: var(--c-cyan); color: #000; border-color: var(--c-cyan); }
  .chart-band .actions .btn:hover { background: #fff; color: #000; border-color: #fff; }
  .chart-band .chart-frame {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 32px;
  }

  /* ---------- CURRENTLY ---------- */
  .currently {
    padding: 96px 0; border-top: 2px solid var(--ink);
  }
  .currently-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; }
  .currently h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.045em; margin-bottom: 16px; }
  .currently .stamp {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute);
    margin-bottom: 24px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .currently-list { display: grid; gap: 24px; }
  .currently-item {
    display: grid; grid-template-columns: 100px 1fr;
    gap: 24px; padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
    align-items: start;
  }
  .currently-item:last-child { border-bottom: 0; }
  .currently-item .when {
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 4px 8px; align-self: start;
  }
  .currently-item .what { font-size: 1.1rem; line-height: 1.5; color: var(--ink-2); }

  /* ---------- CTA ---------- */
  .cta-band {
    padding: 96px 0; border-top: 2px solid var(--ink);
    background: var(--c-lime); color: #000;
  }
  .cta-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
  .cta-band h2 { color: #000; font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -0.045em; }
  .cta-band p { color: rgba(0,0,0,0.7); font-size: var(--t-lg); max-width: 480px; margin-top: 16px; }
  .cta-actions { display: flex; flex-direction: column; gap: 0; border: 2px solid #000; }
  .cta-actions .btn {
    justify-content: space-between; padding: 22px 24px;
    background: transparent; color: #000; border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    transition: all var(--t-base-dur) var(--ease);
    font-size: var(--t-base);
  }
  .cta-actions .btn:last-child { border-bottom: 0; }
  .cta-actions .btn:hover { background: #000; color: var(--c-lime); }
  .cta-actions .btn .arrow { font-size: 1.2em; transition: transform var(--t-fast) var(--ease); }
  .cta-actions .btn:hover .arrow { transform: translateX(4px); }

  /* ---------- MOBILE ---------- */
  @media (max-width: 1100px) {
    .mosaic > * { padding: 24px; }
    .cell-featured { padding: 28px; }
  }
  @media (max-width: 900px) {
    .hero { padding: 56px 0 40px; }
    .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .hero-side { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding-left: 0; padding-top: 24px; }
    .research, .methods, .work, .ventures, .chart-band, .currently, .cta-band { padding: 56px 0; }
    .mosaic { grid-template-columns: 1fr; }
    .mosaic > * { grid-column: 1 !important; grid-row: auto !important; padding: 24px; }
    .sec-header { flex-direction: column; align-items: flex-start; }
    .methods-grid { grid-template-columns: 1fr; gap: 32px; }
    .method-row { grid-template-columns: 50px 1fr 32px; gap: 12px; padding: 20px 0; }
    .method-row .desc { grid-column: 2 / 4; font-size: var(--t-xs); }
    .work-grid { grid-template-columns: 1fr; }
    .work-card { min-height: auto; }
    .venture-grid { grid-template-columns: 1fr; }
    .venture { padding: 28px; min-height: auto; }
    .chart-band-grid { grid-template-columns: 1fr; gap: 32px; }
    .currently-grid { grid-template-columns: 1fr; gap: 24px; }
    .currently-item { grid-template-columns: 1fr; gap: 8px; }
    .cta-grid { grid-template-columns: 1fr; gap: 32px; }
  }

/* =================================================================
   WRITING_INDEX page-specific styles (lifted from /mockups)
   ================================================================= */

/* ---------- INDEX HEADER ---------- */
  .index-head { padding: 88px 0 56px; border-bottom: 1px solid var(--ink); }
  .index-head h1 { font-size: clamp(3.2rem, 8vw, 6.4rem); line-height: 0.95; margin-bottom: 32px; letter-spacing: -0.035em; }
  .index-head h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
  .index-head-grid {
    display: grid; grid-template-columns: 8fr 4fr; gap: 64px; align-items: end;
  }
  .index-head .lede { max-width: 640px; }
  .index-head-meta {
    border-left: 1px solid var(--rule); padding-left: 32px;
    display: grid; gap: 14px;
  }
  .index-head-meta .row {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .index-head-meta .row .k { color: var(--mute); }
  .index-head-meta .row .v { color: var(--ink); }

  /* ---------- FEATURED + START HERE ---------- */
  .top {
    padding: 64px 0; border-bottom: 1px solid var(--rule);
  }
  .top-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 48px; }

  .top-feature {
    display: grid; grid-template-columns: 5fr 7fr; gap: 32px;
    padding: 32px; border: 1px solid var(--ink); background: var(--surface);
  }
  .top-feature-art {
    background: var(--bg); border: 1px solid var(--rule);
    display: grid; place-items: center; padding: 24px; min-height: 280px;
  }
  .top-feature-body { display: flex; flex-direction: column; justify-content: space-between; }
  .top-feature h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1; margin-bottom: 12px; }
  .top-feature p { color: var(--ink-2); margin-bottom: 16px; }
  .top-feature .byline {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute);
    display: flex; gap: 16px; flex-wrap: wrap;
  }

  .start-here {
    background: var(--ink); color: var(--bg); padding: 32px;
    display: flex; flex-direction: column;
  }
  [data-theme="dark"] .start-here { background: var(--accent-soft); color: var(--ink); border: 1px solid var(--accent); }
  .start-here .label {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
    margin-bottom: 16px;
  }
  .start-here h3 {
    color: inherit; font-size: 1.8rem; line-height: 1.15; margin-bottom: 20px;
  }
  .start-here ol {
    list-style: none; counter-reset: starthere;
    padding: 0; margin: 0; display: grid; gap: 16px; flex: 1;
  }
  .start-here li {
    counter-increment: starthere;
    display: grid; grid-template-columns: 36px 1fr; gap: 12px;
    padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  [data-theme="dark"] .start-here li { border-bottom-color: var(--rule); }
  .start-here li:last-child { border-bottom: 0; }
  .start-here li::before {
    content: counter(starthere, decimal-leading-zero);
    font-family: var(--font-mono); font-size: var(--t-xs);
    color: var(--accent); padding-top: 4px;
  }
  .start-here li .title { font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.2; display: block; }
  .start-here li .meta {
    font-family: var(--font-mono); font-size: var(--t-xs); color: rgba(255,255,255,0.55);
    text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px;
  }
  [data-theme="dark"] .start-here li .meta { color: var(--mute); }

  /* ---------- TOPIC FILTER ---------- */
  .filters {
    border-bottom: 1px solid var(--rule);
    padding: 24px 0;
    position: sticky; top: 64px; z-index: 50;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
  }
  .filters-inner { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .filters .label {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute);
    margin-right: 12px;
  }
  .chip {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 8px 14px; border: 1px solid var(--rule-strong);
    color: var(--ink-2); background: transparent;
    transition: all var(--t-fast) var(--ease);
    cursor: pointer;
  }
  .chip:hover { border-color: var(--ink); color: var(--ink); }
  .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  /* ---------- CLUSTERS ---------- */
  .clusters { padding: 64px 0; }
  .cluster {
    display: grid; grid-template-columns: 4fr 8fr; gap: 64px;
    padding: 48px 0; border-bottom: 1px solid var(--rule);
  }
  .cluster:last-child { border-bottom: 0; }
  .cluster-head { position: sticky; top: 140px; align-self: start; }
  .cluster-head .num {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
    margin-bottom: 12px;
  }
  .cluster-head h2 { font-size: 2.6rem; line-height: 1.05; margin-bottom: 16px; }
  .cluster-head p { color: var(--ink-3); font-size: var(--t-sm); }
  .cluster-head .count {
    font-family: var(--font-mono); font-size: var(--t-xs); color: var(--mute);
    margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule);
    display: block;
  }
  .essays { display: grid; gap: 0; border-top: 1px solid var(--ink); }
  .essay-row {
    display: grid; grid-template-columns: 80px 6fr 2fr 1fr;
    gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule);
    align-items: baseline;
    transition: all var(--t-fast) var(--ease);
  }
  .essay-row:hover { background: var(--surface); padding-left: 12px; }
  .essay-row .date {
    font-family: var(--font-mono); font-size: var(--t-xs); color: var(--mute);
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .essay-row .title {
    font-family: var(--font-display); font-size: 1.5rem;
    font-weight: 500; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em;
  }
  .essay-row:hover .title { color: var(--accent); }
  .essay-row .sub {
    font-size: var(--t-sm); color: var(--ink-3); margin-top: 4px;
  }
  .essay-row .tag-cell { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
  .essay-row .read { text-align: right; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--mute); }
  .essay-row .read .min { color: var(--ink); }

  /* ---------- MOST-READ + SUBSCRIBE ---------- */
  .tail {
    padding: 88px 0; border-top: 1px solid var(--ink);
    background: var(--surface);
  }
  .tail-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; }

  .most-read h3 {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute);
    margin-bottom: 24px; font-weight: 500;
  }
  .most-read ol { list-style: none; padding: 0; margin: 0; counter-reset: mr; }
  .most-read li {
    counter-increment: mr;
    display: grid; grid-template-columns: 48px 1fr auto; gap: 16px;
    align-items: baseline;
    padding: 18px 0; border-bottom: 1px solid var(--rule);
  }
  .most-read li::before {
    content: counter(mr, decimal-leading-zero);
    font-family: var(--font-display); font-size: 1.6rem; font-weight: 500;
    color: var(--accent); letter-spacing: -0.02em;
  }
  .most-read li .t { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.2; }
  .most-read li .min { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--mute); text-transform: uppercase; letter-spacing: 0.1em; }

  .subscribe {
    background: var(--ink); color: var(--bg); padding: 40px;
    display: flex; flex-direction: column; gap: 16px;
    align-self: start;
  }
  [data-theme="dark"] .subscribe { background: var(--surface-2); color: var(--ink); border: 1px solid var(--rule); }
  .subscribe .label {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
  }
  .subscribe h3 { color: inherit; font-size: 1.8rem; line-height: 1.15; }
  .subscribe p { color: rgba(255,255,255,0.7); font-size: var(--t-sm); margin: 0; }
  [data-theme="dark"] .subscribe p { color: var(--ink-3); }
  .subscribe form { display: grid; grid-template-columns: 1fr auto; gap: 0; margin-top: 8px; }
  .subscribe input {
    padding: 14px 16px; font: inherit; font-size: var(--t-sm);
    background: transparent; border: 1px solid rgba(255,255,255,0.25);
    color: var(--bg);
  }
  [data-theme="dark"] .subscribe input { color: var(--ink); border-color: var(--rule-strong); }
  .subscribe input::placeholder { color: rgba(255,255,255,0.4); }
  .subscribe button {
    padding: 14px 18px; font: inherit; font-size: var(--t-sm); font-weight: 500;
    background: var(--accent); color: var(--bg); border: 1px solid var(--accent);
  }
  .subscribe button:hover { background: var(--accent-deep); }
  .subscribe .terms {
    font-family: var(--font-mono); font-size: var(--t-xs);
    color: rgba(255,255,255,0.5); margin-top: 8px;
  }
  [data-theme="dark"] .subscribe .terms { color: var(--mute); }
  .subscribe .alt {
    display: flex; gap: 16px; margin-top: 12px;
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .subscribe .alt a { color: var(--accent); border-bottom: 1px solid transparent; }
  .subscribe .alt a:hover { border-bottom-color: var(--accent); }

  @media (max-width: 900px) {
    .index-head { padding: 48px 0 32px; }
    .index-head-grid { grid-template-columns: 1fr; gap: 32px; }
    .index-head-meta { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 20px; }
    .top { padding: 32px 0; }
    .top-grid { grid-template-columns: 1fr; gap: 24px; }
    .top-feature { grid-template-columns: 1fr; padding: 20px; }
    .top-feature-art { min-height: 200px; padding: 16px; }
    .start-here { padding: 24px; }
    .filters { position: static; padding: 16px 0; }
    .filters .label { display: none; }
    .filters-inner { overflow-x: auto; flex-wrap: nowrap; }
    .clusters { padding: 32px 0; }
    .cluster { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
    .cluster-head { position: static; }
    .cluster-head h2 { font-size: 2rem; }
    .essay-row { grid-template-columns: 1fr; gap: 4px; padding: 20px 0; }
    .essay-row .date, .essay-row .tag-cell, .essay-row .read { font-size: 11px; }
    .essay-row .read { text-align: left; }
    .essay-row .title { font-size: 1.3rem; }
    .essay-row:hover { padding-left: 0; }
    .tail { padding: 48px 0; }
    .tail-grid { grid-template-columns: 1fr; gap: 40px; }
    .most-read li { grid-template-columns: 36px 1fr; }
    .most-read li .min { grid-column: 2; padding-top: 4px; }
    .subscribe { padding: 28px; }
    .subscribe form { grid-template-columns: 1fr; }
  }

  /* ===== v2 palette adjustments ===== */
  .essay-row:hover .title { color: var(--ink); }
  .most-read li::before { color: var(--ink); background: var(--c-lime); padding: 2px 6px; }
  .cluster-head .num { color: var(--ink); background: var(--accent); padding: 4px 10px; align-self: flex-start; display: inline-block; font-weight: 600; }
  .cluster:nth-child(1) .cluster-head .num { background: var(--c-cyan); }
  .cluster:nth-child(2) .cluster-head .num { background: var(--c-magenta); color: #fff; }
  .cluster:nth-child(3) .cluster-head .num { background: var(--c-lime); }
  .cluster:nth-child(4) .cluster-head .num { background: var(--c-orange); color: #fff; }
  .cluster:nth-child(1) .tag-cell { background: var(--c-cyan); color: #000; border-color: var(--c-cyan); padding: 4px 10px; }
  .cluster:nth-child(2) .tag-cell { background: var(--c-magenta); color: #fff; border-color: var(--c-magenta); padding: 4px 10px; }
  .cluster:nth-child(3) .tag-cell { background: var(--c-lime); color: #000; border-color: var(--c-lime); padding: 4px 10px; }
  .cluster:nth-child(4) .tag-cell { background: var(--c-orange); color: #fff; border-color: var(--c-orange); padding: 4px 10px; }
  .filters { background: #fff; }
  .chip.active { background: var(--ink); color: var(--c-lime); border-color: var(--ink); }
  .top-feature { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .top-feature h2 { color: var(--bg); }
  .top-feature p { color: rgba(255,255,255,0.72); }
  .top-feature .byline { color: rgba(255,255,255,0.55); }
  .top-feature-art { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.15); }
  .top-feature .btn-primary { background: var(--c-lime); color: #000; border-color: var(--c-lime); }
  .top-feature .btn-primary:hover { background: #fff; color: #000; border-color: #fff; }
  .start-here .label { color: var(--c-lime); }
  .start-here li::before { color: var(--c-lime); }
  .index-head { border-bottom-color: var(--ink); }
  .essay-row { border-bottom-color: var(--rule); }
  .top-feature-art svg circle:nth-of-type(3) { fill: var(--c-lime); stroke: var(--c-lime); }
  .subscribe button { background: var(--c-lime); color: #000; border-color: var(--c-lime); }
  .subscribe button:hover { background: #fff; color: #000; border-color: #fff; }

/* =================================================================
   ESSAY_DETAIL page-specific styles (lifted from /mockups)
   ================================================================= */

/* ---------- READING TUNING ---------- */
  .essay-body {
    font-family: var(--font-display);
    font-size: 1.25rem; /* 20px */
    line-height: 1.65;
    color: var(--ink-2);
    font-weight: 400;
  }
  .essay-body p { margin: 0 0 1.4em; }
  .essay-body p:first-of-type::first-line {
    font-weight: 600; color: var(--ink);
  }
  .essay-body h2 {
    font-family: var(--font-display); font-size: 2.1rem;
    line-height: 1.1; letter-spacing: -0.02em; font-weight: 500;
    margin: 2em 0 0.6em; color: var(--ink);
  }
  .essay-body h3 {
    font-family: var(--font-display); font-size: 1.5rem;
    line-height: 1.2; font-weight: 500; margin: 1.6em 0 0.4em; color: var(--ink);
  }
  .essay-body a { color: var(--ink); border-bottom: 1px solid var(--accent); transition: all var(--t-fast) var(--ease); }
  .essay-body a:hover { color: var(--accent); }
  .essay-body strong { font-weight: 600; color: var(--ink); }
  .essay-body em { font-style: italic; }

  .essay-body sup {
    font-family: var(--font-mono); font-size: 0.55em;
    color: var(--accent); padding: 0 2px;
    vertical-align: super; line-height: 0;
  }

  /* ---------- HEADER ---------- */
  .essay-head { padding: 64px 0 48px; border-bottom: 1px solid var(--rule); }
  .crumbs { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute); margin-bottom: 40px; }
  .crumbs a { color: var(--mute); border-bottom: 1px solid transparent; }
  .crumbs a:hover { color: var(--ink); }
  .crumbs .sep { color: var(--rule-strong); padding: 0 12px; }
  .essay-head h1 {
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    line-height: 1.02; letter-spacing: -0.03em;
    max-width: 980px; margin-bottom: 32px;
  }
  .essay-head .deck {
    font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    color: var(--ink-2); line-height: 1.45; max-width: 720px; margin-bottom: 40px;
    font-weight: 400;
  }
  .essay-meta {
    display: flex; gap: 40px; flex-wrap: wrap; align-items: baseline;
    padding-top: 24px; border-top: 1px solid var(--rule);
  }
  .essay-meta .item {
    display: flex; flex-direction: column; gap: 4px;
  }
  .essay-meta .k {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute);
  }
  .essay-meta .v { font-size: var(--t-sm); color: var(--ink); font-weight: 500; }

  /* ---------- PROGRESS ---------- */
  .progress {
    position: fixed; top: 64px; left: 0; right: 0; height: 2px; z-index: 90;
    background: var(--rule);
  }
  .progress-bar { height: 100%; width: 32%; background: var(--accent); }

  /* ---------- BODY LAYOUT ---------- */
  .essay-shell { padding: 80px 0 64px; }
  .essay-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 720px) 240px;
    gap: 56px;
    max-width: 1280px; margin: 0 auto; padding: 0 32px;
  }

  /* Left rail — section nav */
  .toc {
    position: sticky; top: 96px; align-self: start;
    font-size: var(--t-sm);
  }
  .toc .label {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute);
    margin-bottom: 16px;
  }
  .toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
  .toc li {
    counter-increment: toc;
    padding: 10px 0 10px 36px; border-left: 1px solid var(--rule);
    position: relative;
    color: var(--ink-3); font-size: var(--t-sm);
  }
  .toc li::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute; left: 12px; top: 12px;
    font-family: var(--font-mono); font-size: 11px; color: var(--mute);
  }
  .toc li.active { border-left-color: var(--accent); color: var(--ink); }
  .toc li.active::before { color: var(--accent); }
  .toc li:hover { color: var(--ink); }

  /* Right rail — meta */
  .side {
    position: sticky; top: 96px; align-self: start;
    display: flex; flex-direction: column; gap: 28px;
  }
  .side .block {
    padding-bottom: 24px; border-bottom: 1px solid var(--rule);
  }
  .side .block:last-child { border-bottom: 0; }
  .side .label {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute);
    margin-bottom: 12px;
  }
  .side .share { display: flex; gap: 8px; }
  .side .share a {
    width: 36px; height: 36px; display: grid; place-items: center;
    border: 1px solid var(--rule); color: var(--ink-2);
    transition: all var(--t-fast) var(--ease);
  }
  .side .share a:hover { border-color: var(--ink); color: var(--ink); }
  .side .related a {
    display: block; padding: 12px 0; border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm); color: var(--ink-2);
  }
  .side .related a:last-child { border-bottom: 0; }
  .side .related a:hover { color: var(--accent); }
  .side .related .min { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }

  /* ---------- FIGURES ---------- */
  .fig {
    margin: 48px -24px;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--rule);
  }
  .fig figcaption {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--mute); margin-top: 16px;
    display: flex; gap: 12px; align-items: baseline;
  }
  .fig figcaption .num { color: var(--accent); }

  /* ---------- PULL QUOTE ---------- */
  .pull {
    margin: 48px -32px;
    padding: 40px 32px;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.15; letter-spacing: -0.02em;
    color: var(--ink); font-weight: 500;
  }
  .pull .mark { display: block; font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 16px; font-weight: 500; }

  /* ---------- CALLOUT ---------- */
  .callout {
    margin: 32px 0; padding: 20px 24px;
    background: var(--accent-soft); border-left: 3px solid var(--accent);
    font-size: 1.05rem; line-height: 1.55; color: var(--ink);
    font-family: var(--font-body);
  }
  .callout p { margin: 0; }
  .callout p + p { margin-top: 10px; }
  .callout strong { color: var(--ink); }

  /* ---------- DATA TABLE ---------- */
  .essay-body table {
    width: 100%; border-collapse: collapse; margin: 32px 0;
    font-family: var(--font-mono); font-size: var(--t-sm);
  }
  .essay-body thead { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
  .essay-body th { text-align: left; padding: 12px 8px; font-weight: 500; color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-xs); }
  .essay-body td { padding: 10px 8px; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .essay-body tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
  .essay-body td.num-cell { text-align: right; }

  /* ---------- FOOTNOTES ---------- */
  .endnotes {
    margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--ink);
    font-family: var(--font-body); font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55;
  }
  .endnotes h3 { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute); margin-bottom: 16px; font-weight: 500; }
  .endnotes ol { padding-left: 24px; display: grid; gap: 10px; }
  .endnotes a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); }

  /* ---------- READ NEXT ---------- */
  .next {
    padding: 80px 0; border-top: 1px solid var(--ink);
    background: var(--surface);
  }
  .next-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
  .next-head h2 { font-size: 2.4rem; }
  .next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .next-card {
    padding: 24px; border: 1px solid var(--rule); background: var(--bg);
    display: flex; flex-direction: column; min-height: 240px;
    transition: all var(--t-base-dur) var(--ease);
  }
  .next-card:hover { border-color: var(--ink); transform: translateY(-2px); }
  .next-card .num { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--mute); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
  .next-card h3 { font-size: 1.4rem; line-height: 1.2; margin-bottom: auto; }
  .next-card .min { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 16px; }

  /* ---------- MOBILE ---------- */
  @media (max-width: 1100px) {
    .essay-grid { grid-template-columns: minmax(0, 720px); padding: 0 24px; }
    .toc, .side { display: none; }
  }
  @media (max-width: 900px) {
    .essay-head { padding: 32px 0 28px; }
    .essay-head h1 { font-size: 2rem; }
    .essay-head .deck { font-size: 1.15rem; }
    .essay-meta { gap: 24px; }
    .essay-shell { padding: 48px 0 32px; }
    .essay-body { font-size: 1.08rem; }
    .fig { margin: 32px -16px; padding: 20px; }
    .pull { margin: 32px -20px; padding: 28px 20px; font-size: 1.5rem; }
    .next { padding: 48px 0; }
    .next-grid { grid-template-columns: 1fr; gap: 16px; }
  }

  /* ===== v2 palette adjustments ===== */
  .essay-body { font-family: var(--font-body); }
  .essay-body h2, .essay-body h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; }
  .essay-body a { border-bottom: 1px solid var(--ink); }
  .essay-body a:hover { color: var(--ink); border-bottom-color: var(--c-lime); border-bottom-width: 2px; }
  .essay-body sup {
    font-family: var(--font-mono); font-size: 11px;
    background: var(--c-lime); color: #000;
    padding: 1px 4px; margin: 0 1px;
    vertical-align: super; line-height: 0;
  }
  .progress-bar { background: var(--c-lime); }
  .essay-head { background: var(--surface); border-bottom: 2px solid var(--ink); }
  .essay-head h1 { letter-spacing: -0.045em; font-weight: 600; }
  .crumbs a:hover { color: var(--ink); border-bottom-color: var(--ink); }
  .toc li.active { border-left-color: var(--c-lime); border-left-width: 3px; }
  .pull { border-top-color: var(--ink); border-bottom-color: var(--ink); border-top-width: 2px; border-bottom-width: 2px; }
  .pull .mark { color: var(--ink); background: var(--c-lime); padding: 3px 8px; }
  .callout { background: var(--c-lime); color: #000; border-left-color: #000; }
  .callout strong { color: #000; }
  .fig figcaption .num { color: var(--ink); background: var(--c-lime); padding: 2px 8px; }
  .essay-meta .v { font-weight: 600; }
  .side .related a:hover { color: var(--ink); }
  .side .related a:hover .min { color: var(--ink); }
  .side .block { background: var(--bg); }
  .side .block:last-child { background: var(--ink); color: var(--bg); padding: 24px; }
  .side .block:last-child .label { color: var(--c-lime); }
  .side .block:last-child p { color: rgba(255,255,255,0.75); }
  .side .block:last-child .btn-primary { background: var(--c-lime); color: #000; border-color: var(--c-lime); }
  .side .block:last-child .btn-primary:hover { background: #fff; color: #000; border-color: #fff; }
  .next { background: var(--ink); color: var(--bg); border-top-color: var(--ink); }
  .next h2 { color: #fff; }
  .next-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.15); color: var(--bg); }
  .next-card h3 { color: #fff; }
  .next-card:hover { border-color: var(--c-lime); transform: translateY(-2px); }
  .next-card .num { color: rgba(255,255,255,0.5); }
  .next-card .min { color: var(--c-lime); }
  .endnotes { border-top: 2px solid var(--ink); }
  .endnotes a:hover { border-bottom-color: var(--c-lime); }

/* =================================================================
   METHODS_DETAIL page-specific styles (lifted from /mockups)
   ================================================================= */

/* ---------- METHOD HEAD ---------- */
  .method-head {
    padding: 88px 0 64px;
    border-bottom: 1px solid var(--ink);
    background: var(--surface);
    position: relative; overflow: hidden;
  }
  .method-head-bg {
    position: absolute; inset: 0; opacity: 0.4; pointer-events: none;
  }
  .method-head .wrap-wide { position: relative; }
  .crumbs { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute); margin-bottom: 40px; }
  .crumbs a { color: var(--mute); }
  .crumbs .sep { color: var(--rule-strong); padding: 0 12px; }

  .head-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 64px; align-items: end; }
  .method-id {
    font-family: var(--font-mono); font-size: var(--t-sm);
    text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
    margin-bottom: 24px;
    display: flex; gap: 16px; align-items: center;
  }
  .method-id .num {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px; background: var(--accent); color: var(--bg);
    font-family: var(--font-display); font-size: 16px; font-weight: 600;
  }
  .method-head h1 {
    font-size: clamp(3rem, 7vw, 5.6rem);
    line-height: 0.98; letter-spacing: -0.035em;
    margin-bottom: 28px;
  }
  .method-head h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
  .method-head .deck {
    font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    color: var(--ink-2); line-height: 1.4; max-width: 640px; font-weight: 400;
  }
  .head-facts {
    border-left: 1px solid var(--rule-strong); padding-left: 32px;
    display: grid; gap: 16px;
  }
  .fact {
    display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  }
  .fact:last-child { border-bottom: 0; padding-bottom: 0; }
  .fact .k { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute); }
  .fact .v { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.01em; }
  .fact .v small { font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: 0.05em; }

  /* ---------- SECTION SHELL ---------- */
  .section { padding: 88px 0; border-top: 1px solid var(--rule); }
  .section-label-row {
    display: grid; grid-template-columns: 220px 1fr; gap: 56px;
    margin-bottom: 40px; align-items: baseline;
  }
  .section-label-row .step {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
  }
  .section-label-row h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.05; }

  .body-grid { display: grid; grid-template-columns: 220px 1fr; gap: 56px; }
  .body-grid .meta-col {
    font-family: var(--font-mono); font-size: var(--t-xs);
    color: var(--mute); text-transform: uppercase; letter-spacing: 0.12em;
    padding-top: 8px;
  }
  .body-grid .copy {
    font-size: 1.13rem; line-height: 1.65; color: var(--ink-2);
    max-width: 740px;
  }
  .body-grid .copy p { margin: 0 0 1.2em; }
  .body-grid .copy p:last-child { margin: 0; }
  .body-grid .copy strong { color: var(--ink); font-weight: 600; }

  /* ---------- DIAGRAM BLOCK ---------- */
  .diagram-block {
    margin-top: 48px;
    border: 1px solid var(--ink);
    background: var(--bg);
  }
  .diagram-header {
    padding: 24px 32px; border-bottom: 1px solid var(--ink);
    display: flex; justify-content: space-between; align-items: baseline;
    background: var(--ink); color: var(--bg);
  }
  [data-theme="dark"] .diagram-header { background: var(--surface-2); color: var(--ink); }
  .diagram-header .l {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em;
  }
  .diagram-header .l .accent { color: var(--accent); }
  .diagram-header .r { font-family: var(--font-mono); font-size: var(--t-xs); opacity: 0.6; }
  .diagram-canvas {
    padding: 48px 32px;
    background:
      radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 0) 0 0 / 24px 24px,
      var(--bg);
  }
  .diagram-canvas svg { width: 100%; height: auto; max-width: 1080px; margin: 0 auto; display: block; }
  .diagram-footer {
    padding: 18px 32px; border-top: 1px solid var(--rule);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px;
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--mute);
    background: var(--surface);
  }
  .legend { display: flex; gap: 20px; flex-wrap: wrap; }
  .legend .item { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
  .legend .sw { width: 12px; height: 12px; border: 1px solid var(--ink); }
  .legend .sw.input { background: var(--surface); }
  .legend .sw.process { background: var(--ink); border-color: var(--ink); }
  .legend .sw.output { background: var(--accent); border-color: var(--accent); }

  /* ---------- STEPS ---------- */
  .steps { display: grid; gap: 0; margin-top: 16px; }
  .step-row {
    display: grid; grid-template-columns: 100px 1fr 1fr; gap: 32px;
    padding: 28px 0; border-bottom: 1px solid var(--rule);
    align-items: start;
  }
  .step-row:last-child { border-bottom: 0; }
  .step-num {
    font-family: var(--font-display); font-size: 2.4rem; font-weight: 500;
    color: var(--accent); letter-spacing: -0.03em; line-height: 1;
  }
  .step-row h3 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 8px; }
  .step-row .what { color: var(--ink-2); font-size: var(--t-base); line-height: 1.55; }
  .step-row .input-list {
    list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;
    font-family: var(--font-mono); font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .step-row .input-list li { padding-left: 20px; position: relative; }
  .step-row .input-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

  /* ---------- OUTCOMES ---------- */
  .outcomes-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border: 1px solid var(--ink); margin-top: 16px;
  }
  .outcome {
    padding: 36px 28px; border-right: 1px solid var(--rule);
  }
  .outcome:last-child { border-right: 0; }
  .outcome .figure {
    font-family: var(--font-display); font-size: 3.4rem; font-weight: 500;
    color: var(--accent); letter-spacing: -0.035em; line-height: 1;
    margin-bottom: 12px;
  }
  .outcome .figure small { font-family: var(--font-mono); font-size: 14px; color: var(--mute); letter-spacing: 0.05em; }
  .outcome .caption { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; color: var(--ink); margin-bottom: 12px; }
  .outcome .note { font-size: var(--t-sm); color: var(--ink-3); }

  /* ---------- TESTIMONY / QUOTE ---------- */
  .quote-band {
    padding: 88px 0; border-top: 1px solid var(--rule);
    background: var(--ink); color: var(--bg);
  }
  [data-theme="dark"] .quote-band { background: var(--surface-2); color: var(--ink); }
  .quote-band blockquote {
    font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 3rem);
    line-height: 1.18; letter-spacing: -0.02em; font-weight: 500;
    max-width: 1040px; margin: 0;
  }
  .quote-band .attribution {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--accent); margin-top: 32px;
  }

  /* ---------- WORKED EXAMPLE ---------- */
  .worked {
    margin-top: 16px;
    border: 1px solid var(--rule);
  }
  .worked-h {
    padding: 18px 24px; background: var(--surface);
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute);
    border-bottom: 1px solid var(--rule);
    display: flex; justify-content: space-between;
  }
  .worked-h .accent { color: var(--accent); }
  .worked-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--t-sm); }
  .worked-table th { text-align: left; padding: 14px 24px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--ink); text-transform: uppercase; font-size: var(--t-xs); letter-spacing: 0.08em; }
  .worked-table td { padding: 14px 24px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; color: var(--ink-2); }
  .worked-table tr:last-child td { border-bottom: 0; }
  .worked-table td.bar { padding: 14px 24px; }
  .worked-table .num-cell { text-align: right; }
  .worked-table .badge {
    display: inline-block; padding: 2px 8px;
    background: var(--accent); color: var(--bg);
    font-size: 10px; letter-spacing: 0.1em;
  }
  .worked-table .rule-bar {
    height: 6px; background: var(--accent); display: inline-block; vertical-align: middle;
  }

  /* ---------- RELATED METHODS ---------- */
  .related-methods {
    padding: 88px 0; border-top: 1px solid var(--ink);
    background: var(--surface);
  }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
  .related-card {
    padding: 32px; background: var(--bg); border: 1px solid var(--rule);
    display: flex; flex-direction: column; min-height: 240px;
    transition: all var(--t-base-dur) var(--ease);
  }
  .related-card:hover { border-color: var(--ink); transform: translateY(-2px); }
  .related-card .num { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 12px; }
  .related-card h3 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 12px; }
  .related-card p { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: auto; }
  .related-card .more { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 16px; color: var(--ink); }
  .related-card:hover .more { color: var(--accent); }

  /* ---------- CTA ---------- */
  .cta { padding: 96px 0; border-top: 1px solid var(--rule); }
  .cta-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
  .cta h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.05; }
  .cta p { font-size: var(--t-lg); color: var(--ink-3); max-width: 480px; margin: 16px 0 0; }
  .cta .actions { display: flex; flex-direction: column; gap: 12px; }
  .cta .actions .btn { justify-content: space-between; padding: 18px 24px; }

  /* ---------- MOBILE ---------- */
  @media (max-width: 1000px) {
    .method-head { padding: 48px 0 40px; }
    .head-grid { grid-template-columns: 1fr; gap: 40px; }
    .head-facts { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 24px; }
    .section { padding: 56px 0; }
    .section-label-row, .body-grid { grid-template-columns: 1fr; gap: 16px; }
    .body-grid .meta-col { border-top: 1px solid var(--rule); padding-top: 12px; }
    .diagram-canvas { padding: 20px 12px; }
    .diagram-header, .diagram-footer { padding-left: 16px; padding-right: 16px; }
    .step-row { grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; }
    .step-row .input-list { grid-column: 2; padding-top: 8px; }
    .step-num { font-size: 1.6rem; }
    .outcomes-grid { grid-template-columns: 1fr; }
    .outcome { border-right: 0; border-bottom: 1px solid var(--rule); }
    .outcome:last-child { border-bottom: 0; }
    .outcome .figure { font-size: 2.4rem; }
    .quote-band { padding: 56px 0; }
    .quote-band blockquote { font-size: 1.6rem; }
    .related-methods { padding: 48px 0; }
    .related-grid { grid-template-columns: 1fr; gap: 16px; }
    .related-card { min-height: auto; padding: 24px; }
    .cta { padding: 56px 0; }
    .cta-grid { grid-template-columns: 1fr; gap: 32px; }
    .worked-table th, .worked-table td { padding: 10px 16px; }
  }

  /* ===== v2 palette adjustments ===== */
  .method-head { background: var(--ink); color: var(--bg); border-bottom-color: var(--ink); }
  .method-head h1 { color: #fff; font-weight: 600; letter-spacing: -0.045em; }
  .method-head .hl { background: var(--c-lime); color: #000; padding: 0 0.12em; }
  .method-head .deck { color: rgba(255,255,255,0.78); }
  .crumbs a, .crumbs span { color: rgba(255,255,255,0.5); }
  .crumbs .sep { color: rgba(255,255,255,0.25); }
  .head-facts { border-left-color: rgba(255,255,255,0.15); }
  .fact { border-bottom-color: rgba(255,255,255,0.1); }
  .fact .k { color: rgba(255,255,255,0.5); }
  .fact .v { color: #fff; }
  .fact .v small { color: rgba(255,255,255,0.5); }
  .section-label-row .step { color: var(--ink); background: var(--c-lime); padding: 3px 10px; align-self: flex-start; display: inline-block; }
  .step-num { color: var(--ink); background: var(--c-lime); padding: 4px 14px; display: inline-block; font-weight: 700; line-height: 1; }
  .step-row { padding: 28px 0; }
  .step-row .input-list li::before { color: var(--ink); }
  .outcome .figure { color: var(--ink); }
  .outcome .figure small { color: var(--mute); }
  .outcomes-grid { background: var(--c-lime); }
  .outcome { background: var(--c-lime); color: #000; border-right-color: rgba(0,0,0,0.15); }
  .outcome .caption { color: #000; }
  .outcome .note { color: rgba(0,0,0,0.6); }
  .diagram-header { background: var(--ink); color: var(--bg); }
  .diagram-header .l .accent { color: var(--c-lime); }
  .diagram-footer { background: var(--surface); }
  .quote-band { background: var(--ink); }
  .quote-band .attribution { color: var(--c-lime); }
  .worked-table .badge { background: var(--c-lime); color: #000; font-weight: 600; padding: 3px 10px; }
  .worked-h .accent { color: var(--ink); background: var(--c-lime); padding: 2px 8px; }
  .related-methods { background: var(--surface); }
  .related-card { background: var(--bg); }
  .related-card .num { color: var(--ink); background: var(--c-lime); padding: 3px 8px; display: inline-block; align-self: flex-start; }
  .related-card:nth-child(1) .num { background: var(--c-cyan); }
  .related-card:nth-child(2) .num { background: var(--c-magenta); color: #fff; }
  .related-card:nth-child(3) .num { background: var(--c-orange); color: #fff; }
  .related-card:hover { border-color: var(--ink); }
  .cta { background: var(--c-lime); }
  .cta h2 { color: #000; }
  .cta p { color: rgba(0,0,0,0.72); }
  .cta .actions .btn-primary { background: #000; color: var(--c-lime); border-color: #000; }
  .cta .actions .btn-primary:hover { background: #fff; color: #000; border-color: #fff; }
  .cta .actions .btn-secondary { background: transparent; color: #000; border-color: #000; }
  .cta .actions .btn-secondary:hover { background: #000; color: var(--c-lime); }