/* corman.io writing-section preview stylesheet
   Mirrors the production chrome from src/components/Chrome.jsx and src/styles.css.
   Dark theme, IBM Plex Sans / Mono / Fraunces, mint signal. */

:root {
  --bg: #0a0c0d;
  --bg-2: #0f1213;
  --bg-3: #131818;
  --bg-4: #181d1d;
  --panel: #0d1011;
  --ink: #e8ece8;
  --ink-soft: #c2cbc2;
  --ink-mid: #9aa39a;
  --ink-dim: #5b635c;
  --ink-faint: #2a302c;
  --rule: #1c2120;
  --rule-soft: #14181a;
  --rule-mid: #2a312e;
  --signal: #7fb58a;
  --signal-dim: #3e5a45;
  --signal-cyan: #6aaab1;
  --signal-cyan-dim: #355859;
  --warn: #c9a96b;
  --warn-dim: #6f5d3a;
  --red: #b56a6a;
  --red-dim: #5e3838;
  --wash-sage: rgba(127, 181, 138, 0.06);
  --wash-amber: rgba(201, 169, 107, 0.06);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --serif-2: 'Fraunces', Georgia, serif;
  --lite: 300;
  /* Section-mode aliases (previously gated behind body.s-writing). */
  --wash: var(--wash-sage);
  --section: var(--signal-cyan);
  --section-dim: var(--signal-cyan-dim);
  --section-wash: var(--wash-amber);
  --heading-rule: var(--red);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
}
body {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* No padding for the fixed chrome bars: the React app's #root mount
     hosts the chrome at position:fixed, and the essay-shell's own
     padding-top reserves visual breathing room below the chrome. */
}

/* #root in the SPA carries min-height: 100vh so PageShell fills the
   viewport. On essay pages #root holds only position:fixed chrome and
   no flowed content, so 100vh creates a viewport-tall empty box that
   pushes the static article below the fold. Collapse it back to zero. */
body.s-writing #root { min-height: 0; }
::selection { background: var(--signal); color: var(--bg); }
a { color: inherit; text-decoration: none; }

article.body a {
  position: relative;
  color: var(--signal);
  text-decoration: none;

  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(127,181,138,0.28);

  transition:
    border-bottom-color 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

article.body a:hover {
  color: var(--ink);
  border-bottom-color: var(--red);
  text-shadow:
    0 0 2px #9aa39a,
    0 0 4px #3e5a45;
  transition:
    color 1.75s cubic-bezier(0.22, 1, 0.36, 1),
    border-bottom-color 3s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────────────────────────────────────────────────────────────
   Registration marks at the four corners.
   ───────────────────────────────────────────────────────────────── */
/* Reg-marks match corman-io's chrome exactly: 12px, ink-faint border, top:56 / bottom:32. */
.reg-mark {
  position: fixed;
  width: 12px;
  height: 12px;
  border-color: var(--ink-faint);
  pointer-events: none;
  z-index: 100;
}
.reg-tl { top: 56px;    left: 16px;  border-top: 1px solid; border-left: 1px solid; }
.reg-tr { top: 56px;    right: 16px; border-top: 1px solid; border-right: 1px solid; }
.reg-bl { bottom: 32px; left: 16px;  border-bottom: 1px solid; border-left: 1px solid; }
.reg-br { bottom: 32px; right: 16px; border-bottom: 1px solid; border-right: 1px solid; }

/* ─────────────────────────────────────────────────────────────────
   StatusTop — fixed 40px chrome strip matching production.
   Grid: 1fr | auto | 1fr.  Pip + brand + page label / command / location + time.
   ───────────────────────────────────────────────────────────────── */
.status-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  z-index: 60;
}
.status-top .pip {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 6px var(--signal);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.status-top .left  { color: var(--ink-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-top .left .brand { color: var(--ink); }
.status-top .left .slash { margin: 0 10px; color: var(--ink-faint); }
.status-top .left .page { color: var(--signal); }
.status-top .cmd {
  padding: 4px 14px;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.status-top .cmd:hover { border-color: var(--ink-dim); color: var(--ink); }
.status-top .cmd .kbd { color: var(--ink-faint); margin-left: 8px; }
.status-top .right {
  text-align: right;
  color: var(--ink-dim);
  white-space: nowrap;
}
.status-top .right .sep { margin: 0 10px; color: var(--ink-faint); }
.status-top .right .time { color: var(--ink-mid); }

/* ─────────────────────────────────────────────────────────────────
   StatusBottom — fixed 24px chrome strip matching production.
   ───────────────────────────────────────────────────────────────── */
.status-bottom {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 24px;
  background: var(--bg);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  z-index: 60;
}
.status-bottom .session .id   { color: var(--ink-mid); }
.status-bottom .session .tls  { color: var(--signal); }
.status-bottom .center {
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status-bottom .center .dash { color: var(--ink-faint); }
.status-bottom .right { text-align: right; }
.status-bottom .sep { margin: 0 10px; color: var(--ink-faint); }

/* ─────────────────────────────────────────────────────────────────
   Index page — mirrors PageShell + SectionOpener + Section patterns
   used by the React-rendered /work, /studio, and /home pages.
   PageShell: max-width 2640, top 64, bottom 56, lr max(40px, 4vw).
   SectionOpener: paddingTop 28, paddingBottom 64, border-bottom rule.
   Section: paddingTop 72, paddingBottom 16, with a 220/1fr head grid.
   Section-head grid collapses at 920 to match the React pages.
   ───────────────────────────────────────────────────────────────── */
.index-shell {
  max-width: 2640px;
  margin: 0 auto;
  padding: 64px max(40px, 4vw) 56px max(40px, 4vw);
}

/* Hero block — mirrors SectionOpener (Chrome.jsx) */
.page-opener {
  padding: 28px 0 64px 0;
  border-bottom: 1px solid var(--rule);
}
.opener-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 24px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-bottom: 36px;
}
.opener-eyebrow .label { color: var(--ink-mid); white-space: nowrap; }
.opener-eyebrow .rule  { flex: 1; height: 1px; background: var(--rule); align-self: center; }
.opener-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.opener-title em { font-style: italic; }
.opener-quote {
  margin: 36px 0 0 0;
  max-width: 720px;
}
.opener-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.45;
  color: var(--ink-mid);
  margin: 0;
}

/* Sub-section — mirrors the Section() wrapper in Work.jsx */
.section-block {
  padding: 72px 0 16px 0;
}
.section-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  margin-bottom: 24px;
  align-items: end;
}
.section-head .num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 48px;
  line-height: 1;
  margin: 8px 0 0 0;
  color: var(--ink);
}
.section-head p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0;
  padding-bottom: 6px;
  max-width: 680px;
}

.essay-list { display: grid; gap: 0; }
.essay-row {
  display: grid;
  grid-template-columns: 100px 1fr 110px;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.essay-row:hover { background: rgba(127, 181, 138, 0.04); }
.essay-row:hover h3 { color: var(--signal); }
.essay-row .date {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--ink-dim);
}
.essay-row h3 {
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  line-height: 1.25; margin: 0 0 8px 0; color: var(--ink);
  letter-spacing: -0.005em; transition: color 0.15s;
}
.essay-row p {
  font-family: var(--sans); font-weight: 300; font-size: 13px;
  line-height: 1.6; color: var(--ink-mid); margin: 0; max-width: 680px;
}
.essay-row .read {
  text-align: right; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--ink-dim); text-transform: uppercase;
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.note-card { border-top: 1px solid var(--rule); padding-top: 16px; }
.note-card .date {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--ink-dim); margin-bottom: 8px;
}
.note-card h4 {
  font-family: var(--mono); font-weight: 500; font-size: 13px;
  margin: 0 0 8px 0; color: var(--ink); line-height: 1.35;
}
.note-card p {
  font-family: var(--sans); font-weight: 300; font-size: 12px;
  line-height: 1.55; color: var(--ink-mid); margin: 0;
}

.positions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
/* .positions-grid collapse is handled in the consolidated 820 breakpoint
   at the bottom of this file. */
.position-card {
  background: var(--bg-2); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 200px;
}
.position-card h3 {
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  line-height: 1.2; margin: 0; color: var(--ink); letter-spacing: -0.005em;
}
.position-card p {
  font-family: var(--sans); font-weight: 300; font-size: 13px;
  line-height: 1.6; color: var(--ink-mid); margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Essay page — three-column layout matching the site's section grid.
   TOC column (180px) | Article body (680px max) | Drawing rail (260px).
   Mobile: stack to single column, drop drawing rail.
   ───────────────────────────────────────────────────────────────── */
.essay-shell {
  /* min-width: 0 on the shell and its grid items is mandatory so a long
     unbreakable token inside (a <pre>, a code identifier, a URL) cannot
     force the column to grow past the viewport. Without this, CSS Grid's
     default min-width: auto means the article column refuses to shrink
     below the intrinsic width of its widest content, which produces the
     "page stops adapting at 600px" bleed at phone viewports. */
  min-width: 0;
  max-width: 1280px;
  margin: 0 auto;
  /* padding-top 104 = chrome 48 + 56 visual gap, so article-eyebrow
     starts at the same y as TOC sticky top (104) — no jump on scroll. */
  padding: 104px 32px 80px 32px;
  display: grid;
  grid-template-columns: 200px minmax(0, 680px) 260px;
  gap: 48px;
  align-items: start;
}

/* Same min-width: 0 contract on every grid item and its descendants
   that can host long unbreakable content. Applied at all viewports. */
.article-column,
article.body {
  min-width: 0;
  max-width: 100%;
}
article.body pre {
  max-width: 100%;
  min-width: 0;
}
article.body code {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.toc-rail {
  position: sticky;
  /* top matches the rail's natural y at scrollY=0 (chrome 40px +
     essay-shell padding-top 56px = 96px) so sticky engages immediately
     -- the rail does not visibly scroll upward for the first 32px. */
  top: 104px;
  align-self: start;
  /* padding-right pulls TOC content in from the right edge of its column,
     compensating for the visual asymmetry where TOC text fills its column
     edge-to-edge while rail drawings float with internal slack inside a
     wider column. Restores the optical midline of the article. */
  padding-right: 10px;
}
.toc-rail .label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  margin-bottom: 16px;
}
.toc-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Left rail: a faint vertical track that the active-item bar rides on. */
  border-left: 1px solid var(--rule);
  position: relative;
}
.toc-rail li {
  margin-bottom: 14px;
  position: relative;
  padding-left: 16px;
}
/* Inactive marker: a short stub of the rail sitting at each item's baseline.
   Sits flush against the vertical rail, recedes into it. */
.toc-rail li::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.55em;
  width: 1px;
  height: 0.7em;
  background: transparent;
  transition: background 0.22s ease, width 0.22s ease;
}
.toc-rail a {
  color: var(--ink-mid);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  display: inline-block;
  transition: color 0.18s;
}
.toc-rail a:hover { color: var(--ink); }
.toc-rail li.is-active a {
  /* No font-size change -- the size jump was causing the layout to shift
     downstream items every time the active state moved. Color + weight +
     the vertical bar marker carry the active indication. */
  color: var(--signal);
  font-weight: 700;
}
/* Active marker: a 2px signal-colored bar that rides the left rail at the
   active item. Visual effect is a small vertical indicator that "moves"
   with the section as the IntersectionObserver promotes new items. */
.toc-rail li.is-active::before {
  content: '';
  left: -2px;
  top: 0.25em;
  width: 2px;
  height: 1.3em;
  background: var(--signal);
}
.toc-rail .quiet {
  display: block;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.toc-rail .quiet a {
  color: var(--ink-mid);
  font-size: 9px;
  letter-spacing: 0.16em;
  display: block;
  margin-bottom: 6px;
}
.toc-rail .quiet a:hover { color: var(--signal); }

/* Drawing rail — fixed-width column on the right.
   Each .drawing-slot is absolutely positioned within a sticky container so they
   stack and fade in/out as their target sections enter the viewport. */
.drawing-rail {
  position: sticky;
  /* Same alignment contract as .toc-rail -- sticky engages at scrollY=0. */
  top: 104px;
  /* Capped height so the rail stays sticky throughout long articles instead
     of exhausting partway down. The drawings are designed at 220x290
     viewBox and fit inside a 460px slot; a viewport-tall rail wasted
     vertical real estate and made the rail "lift off" sticky early on
     shorter essays. */
  height: min(calc(100vh - 160px), 460px);
  pointer-events: none;
  /* Fade transition for inline-visual suppression. essay-scroll.js
     toggles .is-suppressed when a .figure-zone or .table-zone is in
     (or near) the viewport, so the rail drawing gradates to invisible
     before it visually competes with the inline visualization. */
  transition: opacity 0.45s ease-out;
}
.drawing-rail.is-suppressed {
  opacity: 0;
}
.drawing-stack {
  position: relative;
  width: 100%;
  height: 100%;
}
.drawing-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: auto;
}
.drawing-slot.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.drawing-slot svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
}
.drawing-slot .caption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  text-transform: uppercase;
  text-align: center;
  margin-top: 14px;
  max-width: 240px;
  line-height: 1.5;
}

/* Article header */
.article-header {
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.article-meta {
  padding-top: 15px;
  padding-bottom: 18px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.article-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  margin-bottom: 10px;
}
.article-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px 0;
}
.article-title em { font-style: italic; }
.article-subtitle {
  font-family: var(--sans);
  font-weight: 300;
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-mid);
  margin: 0 0 24px 0;
}
.article-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.article-meta .dot { margin: 0 2px; }

.framing-note {
  background: var(--bg-2);
  border-left: 2px solid var(--signal-dim);
  padding: 20px 24px;
  margin: 0 0 40px 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mid);
}
.framing-note strong { color: var(--ink); font-weight: 500; }

article.body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
article.body p { margin: 0 0 24px 0; }
article.body p strong, article.body strong { color: var(--ink); font-weight: 500; }
article.body em { font-style: italic; }
article.body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 56px 0 20px 0;
  scroll-margin-top: 80px;
  border-left: 18px solid var(--red);
  padding-left: 18px;
}
article.body h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 36px 0 12px 0;
}
article.body h5,
article.body h3.sublabel {
  font-family: var(--sans);
  font-size: 16px;
  margin: 36px 0 12px 0;
  padding-left: 18px;
  border-left: 10px solid var(--warn);
  /* Reset properties that would otherwise inherit from article.body h3
     (mono / 13px / uppercase / sage). h3.sublabel must visually match
     h5 exactly because subsection labels were rewritten h5 -> h3 for
     heading-hierarchy correctness without changing the rendering. */
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
article.body blockquote {
  border-left: 2px solid var(--signal-dim);
  margin: 0 0 28px 0;
  padding: 4px 0 4px 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-mid); 
}
article.body blockquote.design-properties {
  font-family: var(--serif-2);
  font-style: normal;
  font-size: 17px;
  color: var(--ink); 
  line-height: 1.8;
  letter-spacing: 0.02em; 
}
article.body blockquote.design-properties ol {
  margin: 0;
  padding-left: 22px;
}
article.body blockquote.design-properties li {
  margin-bottom: 6px;
}
article.body ul, article.body ol { margin: 0 0 28px 0; padding-left: 24px; }
article.body li { margin-bottom: 10px; }
article.body code {
  font-family: var(--mono);
  background: var(--bg-2);
  padding: 1px 5px;
  font-size: 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--signal);
}
article.body pre {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 0 0 28px 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
}
article.body pre code { background: transparent; border: 0; padding: 0; color: var(--ink); font-size: 13px; }
article.body hr { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; }
article.body table {
  width: 100%; border-collapse: collapse; margin: 0 0 32px 0;
  font-family: var(--sans); font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────
   Table zone -- always laid out at the wider width (article column
   plus the drawing-rail column) so its width does NOT change with
   scroll position. Otherwise the layout reflow on activation causes
   document content below the table to jump up/down as the row
   wrapping changes, producing a strobe at the activation boundary.
   .is-table-active only drives opacity transitions on TOC, rail
   drawing, and the zone's own .table-drawing -- no layout effect.
   ───────────────────────────────────────────────────────────────── */
.table-zone {
  position: relative;
  /* Reclaim the drawing-rail column (260px) plus the gap (48px). */
  margin: 0 -308px 40px 0;
  z-index: 5;
}

/* .table-zone--contained — opt-out of the rail-breakout treatment for
   tables that should stay within the article column (essays where the
   drawing rail is bound to dedicated section drawings and a -308px
   right-margin would visually collide). Inherits the responsive
   mobile stack rules from .table-zone, just without the desktop
   breakout. */
.table-zone--contained {
  margin: 24px 0 32px 0;
}

/* ─────────────────────────────────────────────────────────────────
   .figure-zone — data-figure wrapper. Stays within the article column
   so the right-side drawing rail remains visible and uncovered. The
   figures used inside (e.g., the-jury's Figma exports) already carry
   their own internal layout including right-side annotations, so a
   negative-right-margin breakout (previously -308px to reclaim the
   rail) would visually collide with the rail drawing. Keep contained.
   ───────────────────────────────────────────────────────────────── */
.figure-zone {
  /* Frame removed: with transparent-bg figure images we don't want a
     visible container — the image flows in the article column and the
     caption sits below a hairline pill separator. */
  margin: 32px 0 36px 0;
}
.figure-zone__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.figure-zone__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--signal);
  text-transform: uppercase;
}
.figure-zone__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.figure-zone svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Note: scoped under article.body to beat the more specific
   article.body p { margin: 0 0 24px } rule, which would otherwise
   zero out the caption's top margin and collapse the image flush
   against the divider. */
article.body .figure-zone__caption {
  /* Pill separator above the caption: solid 2px line with rounded caps.
     Asymmetric padding — more breathing room above the line (image
     should not crowd the separator), less below (caption text reads
     close to the pill so it visually belongs to it). */
  position: relative;
  padding-top: 14px;     /* divider to caption text */
  margin: 36px 0 0;      /* image bottom to divider */
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 920px;
}
article.body .figure-zone__caption::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rule-mid);
  border-radius: 999px;
}
.figure-zone__caption strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 8px;
}
.table-zone .table-drawing {
  position: relative;
  /* StatusTop is 40px high; abut it directly so no article text bleeds through. */
  top: 24px;
  z-index: 10;
  background: #0a0b0c;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0 48px 0;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: center;
}
.table-zone .table-drawing svg {
  width: 180px;
  height: auto;
  display: block;
}
.table-zone .table-drawing .table-drawing-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
  line-height: 1.55;
}
.table-zone .table-drawing .table-drawing-caption .line-1 {
  color: var(--signal);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  margin-bottom: 8px;
}
.table-zone .table-drawing .table-drawing-caption .line-2 {
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.55;
  font-style: italic;
}

/* Table-zone activation state retired -- the sticky drawing above the
   table is pure CSS, no JS toggle needed, and the TOC stays at full
   opacity throughout. */

article.body table th, article.body table td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rule);
}
article.body table th {
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--signal); border-bottom: 1px solid var(--signal-dim);
}
article.body table td { color: var(--ink-mid); }
article.body a {
  color: var(--signal);
  border-bottom: 1px solid var(--signal-dim);
  transition: border-color 0.15s;
}
article.body a:hover { border-color: var(--signal); }

.article-footer {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-style: italic;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mid);
}

.references {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.references h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0 0 20px 0;
}
.references p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0 0 12px 0;
  padding-left: 16px;
  text-indent: -16px;
}
.references p em { font-style: italic; color: var(--ink); }

/* References section is a sibling of article.body, so the article.body a
   rule doesn't reach into it. Mirror the in-prose link treatment here. */
.references a {
  color: var(--signal);
  border-bottom: 1px solid var(--signal-dim);
  text-shadow: none;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}
.references a:hover {
  background: var(--wash);
  border-bottom-color: var(--signal);
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────
   Command palette -- matches production CommandPalette in Chrome.jsx.
   Opens on ':' keypress, Cmd/Ctrl+K, or click on the ':  command' button.
   ───────────────────────────────────────────────────────────────── */
.cmd-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 13, 0.82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}
.cmd-overlay.is-open { display: flex; }

.cmd-panel {
  width: 580px;
  max-width: calc(100vw - 32px);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  font-family: var(--mono);
}

.cmd-input-row {
  display: flex; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.cmd-prompt {
  color: var(--signal);
  margin-right: 10px;
  font-family: var(--mono);
}
.cmd-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
}
.cmd-input::placeholder { color: var(--ink-dim); }
.cmd-esc {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}

.cmd-list {
  padding: 6px 0;
  max-height: 360px;
  overflow-y: auto;
}
.cmd-empty {
  padding: 20px 18px;
  color: var(--ink-dim);
  font-size: 12px;
}
.cmd-row {
  padding: 10px 18px;
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  background: transparent;
  border-left: 2px solid transparent;
  color: var(--ink);
  font-size: 13px;
}
.cmd-row.is-selected {
  background: rgba(127, 181, 138, 0.06);
  border-left-color: var(--signal);
}
.cmd-row-label { font-family: var(--mono); }
.cmd-row-hint  { font-family: var(--mono); color: var(--ink-mid); font-size: 11px; }

.cmd-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--rule);
  color: var(--ink-dim);
  font-size: 10px;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
}

/* Legacy 760, 960, and 680 breakpoints retired. The consolidated
   1240 / 820 / 680 system at the bottom of this file handles index,
   essay, and chrome with a single set of stops. */

/* ─────────────────────────────────────────────────────────────────
   Article design language (ported from 2026-05-routing-across-enso-v4
   inline <style>). The essay's typography and chromatic character are
   now the default for the writing surface; no body-class scope.
   Breakpoints are intentionally single-pass: desktop, <=1240, <=820,
   <=680. The .reg-mark override is intentionally omitted -- the live
   site uses corman-io's existing white reg-marks.
   ───────────────────────────────────────────────────────────────── */

/* 1. Shell and persistent chrome ----------------------------------- */
/* Status bars + pip + cmd intentionally inherit the base preview rules
   above (letter-spacing 0.05em top / 0.08em bottom, no text-transform,
   6px pulsing pip, 0.1em cmd letter-spacing) so the writing chrome
   matches the React-rendered chrome on the rest of corman.io. */

.essay-shell {
  max-width: 1260px;
  grid-template-columns: 190px minmax(0, 690px) 250px;
  gap: 46px;
}

.toc-rail .label,
.references h3,
.article-eyebrow {
  color: var(--ink-mid);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.toc-rail a {
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.drawing-slot svg,
.table-drawing svg {
  color: var(--signal);
}

/* 2. Header and badges -------------------------------------------- */
.article-eyebrow {
  border-left: 0;
  margin-bottom: 28px;
  padding-left: 0;
}

.article-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.11;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  text-wrap: balance;
}

.article-subtitle {
  border-left: 2px solid var(--signal-dim);
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 17px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  padding-left: 16px;
}

.article-meta {
  border-color: var(--rule-mid);
  color: var(--ink-dim);
  letter-spacing: 0.14em;
}

.article-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.badge {
  background: var(--section-wash);
  border: 1px solid var(--signal);
  color: var(--signal);
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  line-height: 1.35;
  padding: 5px 11px;
  text-transform: uppercase;
}

/* 3. Article body ------------------------------------------------- */
article.body {
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.72;
  text-wrap: pretty;
}

article.body p { margin-bottom: 24px; }
article.body strong { font-weight: 500; }

article.body h2 {
  border-left: 18px solid var(--heading-rule);
  border-top: 0;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.22;
  margin: 58px 0 20px 0;
  padding: 2px 0 2px 18px;
  text-wrap: balance;
}

article.body h5,
article.body h3.sublabel {
  border-left: 4px solid var(--heading-rule);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  margin: 34px 0 12px 0;
  padding-left: 12px;
  /* Reset h3 defaults (mono / 13px / uppercase / sage) — see base rule. */
  letter-spacing: normal;
  text-transform: none;
}

article.body blockquote {
  border-left: 2px solid var(--signal);
  color: var(--ink-soft);
  font-size: 19px;
}

article.body a {
  border-bottom: 1px solid var(--signal-dim);
  color: var(--signal);
  text-shadow: none;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

article.body a:hover {
  background: var(--wash);
  border-bottom-color: var(--signal);
  color: var(--ink);
  text-shadow: none;
}

article.body code,
article.body pre {
  border-radius: 2px;
}

article.body pre {
  background: var(--bg-3);
  border-left: 2px solid var(--signal);
  font-size: 12.5px;
  padding: 16px 18px;
}

article.body pre code { font-size: 12.5px; }

.framing-note {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--section);
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 13.5px;
  font-style: normal;
  line-height: 1.62;
  padding: 18px 20px;
}

.framing-note[style*="--warn"],
.framing-note[style*="var(--warn)"] {
  background: var(--wash-amber);
  border-left-color: var(--warn);
}

.framing-note strong {
  color: var(--ink);
  font-weight: 500;
}

.article-footer {
  border-top-color: var(--rule-mid);
  color: var(--ink-mid);
}

.references { border-top-color: var(--rule-mid); }

/* 4. Vendor table and table drawing ------------------------------- */
.table-zone .table-drawing {
  background: transparent;
  border-bottom: 1px solid var(--rule-mid);
  gap: 42px;
  grid-template-columns: 260px 1fr;
  margin-bottom: 40px;
  padding: 28px 0 42px 0;
  top: 0;
}

.table-zone .table-drawing svg {
  width: 250px;
}

.table-zone .table-drawing .table-drawing-caption .line-1,
article.body table th {
  color: var(--section);
  letter-spacing: 0.14em;
}

.table-zone .table-drawing .table-drawing-caption .line-1 {
  font-size: 12px;
}

.table-zone .table-drawing .table-drawing-caption .line-2 {
  font-size: 16px;
  line-height: 1.6;
  max-width: 460px;
}

article.body table {
  background: transparent;
  border: 1px solid var(--rule);
}

article.body table th {
  background: transparent;
  border-bottom-color: var(--section-dim);
}

article.body table thead th {
  background: #0a0b0c;
  position: sticky;
  top: 39px;
  z-index: 8;
}

article.body table thead th::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
  background: #0a0b0c;
}

article.body table .vendor-platform th {
  background: transparent;
  border-top: 1px solid var(--rule-mid);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 15px 14px 10px 14px;
  text-transform: none;
}

article.body table tbody .vendor-platform:first-child th {
  border-top: 0;
}

.vendor-attributes td {
  border-top: 1px solid var(--rule);
}

article.body table tr:hover td {
  background: transparent;
}


/* The Jury visual-aid layer --------------------------------------- */
.article-findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 34px 0;
}

.finding-card {
  background: var(--panel);
  border: 1px solid var(--rule-mid);
  padding: 16px 17px 15px;
  min-height: 138px;
}

.finding-card--good {
  border-color: var(--signal-dim);
  background: rgba(127, 181, 138, 0.045);
}

.finding-card--bad {
  border-color: var(--red-dim);
  background: rgba(181, 106, 106, 0.055);
}

.finding-kicker,
.method-stack-head,
.validation-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.finding-card--good .finding-kicker,
.finding-card--good .finding-value { color: var(--signal); }
.finding-card--bad .finding-kicker,
.finding-card--bad .finding-value { color: var(--red); }

.finding-value {
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
  margin: 16px 0 10px;
  font-variant-numeric: tabular-nums;
}

.finding-card p {
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.48;
  margin: 0;
}

.method-stack-card {
  border: 1px solid var(--rule-mid);
  background: var(--panel);
  margin: 34px 0 44px;
  padding: 20px 22px;
}

.method-stack-head {
  color: var(--signal);
  margin-bottom: 16px;
}

.method-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.method-stack span {
  border: 1px solid var(--signal-dim);
  color: var(--signal);
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.2;
  padding: 9px 11px;
  text-align: center;
  text-transform: uppercase;
}

.method-stack span:not(:last-child) { position: relative; }
.method-stack span:not(:last-child)::after {
  color: var(--ink-faint);
  content: '↓';
  display: block;
  font-size: 13px;
  font-weight: 300;
  left: 50%;
  letter-spacing: 0;
  line-height: 1;
  position: absolute;
  top: calc(100% + 1px);
  transform: translateX(-50%);
}

.method-stack .method-stack-primitive {
  border-color: var(--warn);
  color: var(--warn);
}

.method-stack-card p {
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

article.body figure {
  position: relative;
  z-index: 4;
}

@media (min-width: 1241px) {
  article.body figure {
    width: min(940px, calc(100% + 250px));
    max-width: calc(100vw - 96px);
  }
}

article.body figure svg {
  display: block;
  height: auto;
  width: 100%;
}

.validation-summary {
  background: var(--panel) !important;
  border: 1px solid var(--rule-mid) !important;
  margin: 36px 0 !important;
  padding: 24px 28px 22px !important;
}

.validation-summary figcaption {
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
}

.validation-summary figcaption span:first-child {
  color: var(--signal);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.validation-summary figcaption span:last-child {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.validation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.validation-card {
  border: 1px solid var(--rule-mid);
  background: var(--bg);
  padding: 16px 15px 15px;
  min-height: 184px;
}

.validation-card--pass { border-color: var(--signal-dim); }
.validation-card--fail { border-color: var(--red-dim); }
.validation-card--pass .validation-label,
.validation-card--pass .validation-value { color: var(--signal); }
.validation-card--fail .validation-label,
.validation-card--fail .validation-value { color: var(--red); }

.validation-value {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  margin: 18px 0 16px;
  font-variant-numeric: tabular-nums;
}

.validation-bar {
  background: var(--rule);
  height: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}

.validation-bar span {
  background: currentColor;
  display: block;
  height: 100%;
}

.validation-card p,
.figure-note {
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.figure-note {
  border-top: 1px dashed var(--rule-mid);
  margin-top: 18px;
  padding-top: 14px;
}

.figure-note strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  margin-right: 8px;
  text-transform: uppercase;
}

@media (max-width: 1240px) {
  article.body figure {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .article-findings,
  .validation-grid {
    grid-template-columns: 1fr;
  }

  .finding-card { min-height: 0; }

  article.body figure {
    contain: inline-size;
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  article.body figure svg {
    max-width: none;
    min-width: 0;
    width: 760px;
  }

  .validation-summary figcaption {
    display: block;
  }

  .validation-summary figcaption span {
    display: block;
  }

  .validation-summary figcaption span:last-child {
    margin-top: 8px;
  }
}

@media (max-width: 680px) {
  .article-findings { margin-top: 18px; }
  .finding-value { font-size: 24px; }
  .validation-value { font-size: 30px; }
  .method-stack span { font-size: 9px; }
}

/* 5. Breakpoints -------------------------------------------------- */
/* Section-head collapse at 920 matches corman-io main styles.css; the
   eyebrow column drops to full width and the h2 + intro stack. */
@media (max-width: 920px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }
  .section-head h2 { font-size: 40px; }
  .section-head p  { padding-bottom: 0; }
}

@media (max-width: 1240px) {
  .index-shell {
    padding: 56px max(28px, 4vw) 56px max(28px, 4vw);
  }
  .page-opener {
    padding: 24px 0 48px 0;
  }
  .section-block {
    padding: 64px 0 16px 0;
  }

  .essay-shell {
    display: block;
    max-width: 680px;
    padding: 34px 32px 80px 32px;
  }

  .toc-rail,
  .drawing-rail {
    display: none;
  }

  .status-top {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 12px;
  }

  .status-top .right {
    display: none;
  }

  .status-bottom {
    grid-template-columns: 1fr;
    padding: 0 12px;
  }

  .status-bottom .session,
  .status-bottom .right {
    display: none;
  }

  .table-zone {
    margin: 0 0 36px 0;
    max-width: 100%;
    overflow: visible;
  }

  /* Figure-zone collapses the negative right margin once the drawing rail
     is hidden (single-column shell at <= 1240px). */
  .figure-zone {
    margin: 28px 0 32px 0;
    padding: 20px 22px 18px;
  }

  .table-zone .table-drawing {
    gap: 28px;
    grid-template-columns: 190px 1fr;
    padding: 22px 0 30px 0;
  }

  .table-zone .table-drawing svg { width: 185px; }

  .table-zone table {
    background: transparent;
    border: 0;
    display: block;
    min-width: 0;
    width: 100% !important;
  }

  .table-zone thead { display: none; }
  .table-zone tbody { display: block; }

  .table-zone tbody tr {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--section-dim);
    display: block;
    margin: 0 0 16px 0;
    padding: 14px 14px 2px 14px;
  }

  .table-zone tbody .vendor-platform {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .table-zone tbody .vendor-platform th {
    background: transparent;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    display: block;
    font-family: var(--sans);
    font-size: 16px;
    letter-spacing: 0;
    padding: 0 0 12px 0;
    text-transform: none;
    width: auto !important;
  }

  .table-zone tbody .vendor-attributes {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  .table-zone tbody tr:hover td { background: transparent; }

  .table-zone tbody td {
    border-bottom: 1px dashed var(--rule);
    display: block;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    padding: 0 0 14px 0 !important;
    width: auto !important;
  }

  .table-zone tbody td:last-child {
    border-bottom: 0;
    padding-bottom: 8px !important;
  }

  .table-zone tbody td[data-label]::before {
    color: var(--section);
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    margin: 10px 0 7px 0;
    text-transform: uppercase;
  }
}

@media (max-width: 820px) {
  /* Index page */
  .index-shell {
    padding: 48px 28px 80px 28px;
  }

  .opener-title { font-size: clamp(40px, 9vw, 72px); }
  .opener-quote p { font-size: 18px; }
  .section-head h2 { font-size: 36px; }
  .section-head p  { font-size: 14px; }

  .positions-grid {
    grid-template-columns: 1fr;
  }

  .essay-row {
    grid-template-columns: 80px 1fr 90px;
    gap: 20px;
    padding: 20px 0;
  }

  .essay-row h3 { font-size: 19px; }
  .essay-row p  { font-size: 12.5px; }

  .notes-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
  }

  /* Essay page */
  .essay-shell {
    max-width: 700px;
    padding: 34px 28px 80px 28px;
  }

  .article-title {
    font-size: clamp(30px, 7vw, 42px);
    line-height: 1.08;
  }

  .article-subtitle {
    font-size: 17px;
    line-height: 1.48;
  }

  article.body {
    font-size: 16px;
    line-height: 1.74;
  }

  article.body h2 {
    border-left-width: 14px;
    font-size: 25px;
    margin-top: 52px;
    padding-left: 14px;
  }
}

@media (max-width: 680px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
  }

  body { padding-top: 40px; }

  /* Index page */
  .index-shell {
    padding: 36px 22px 72px 22px;
  }

  .opener-title { font-size: clamp(36px, 11vw, 56px); }
  .opener-quote p { font-size: 16px; }
  .section-head h2 { font-size: 30px; }
  .section-head p  { font-size: 13.5px; }

  .positions-grid { grid-template-columns: 1fr; }

  .position-card {
    padding: 22px 20px;
    min-height: 0;
  }
  .position-card h3 { font-size: 19px; }
  .position-card p  { font-size: 12.5px; }

  .essay-row {
    grid-template-columns: 60px 1fr;
    gap: 14px;
    padding: 18px 0;
  }
  .essay-row .read { display: none; }
  .essay-row h3 { font-size: 17px; }
  .essay-row p  { font-size: 12.5px; }

  .notes-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .essay-shell {
    box-sizing: border-box;
    inline-size: auto;
    max-width: none;
    max-inline-size: 100%;
    margin: 0;
    overflow: visible;
    padding: 26px 24px 72px 24px;
    width: auto;
  }

  .article-column,
  .article-header,
  article.body {
    box-sizing: border-box;
    inline-size: calc(100vw - 48px);
    max-inline-size: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
    min-width: 0;
    width: calc(100vw - 48px);
  }

  .article-header { margin-bottom: 30px; }

  .article-eyebrow {
    font-size: 10px;
    letter-spacing: 0.22em;
  }

  .article-title {
    font-size: 26px;
    line-height: 1.16;
    overflow-wrap: break-word;
  }

  .article-subtitle {
    font-size: 15.5px;
    line-height: 1.5;
    max-width: 100%;
    overflow-wrap: break-word;
    padding-left: 12px;
  }

  .article-meta {
    font-size: 9px;
    letter-spacing: 0.12em;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .article-badges {
    display: none;
  }

  article.body {
    font-size: 15.5px;
    line-height: 1.75;
  }

  article.body p { margin-bottom: 21px; }

  .article-findings,
  .finding-card,
  article.body p,
  article.body h2,
  article.body li {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  article.body h2 {
    border-left-width: 10px;
    font-size: 22px;
    line-height: 1.18;
    margin: 46px 0 20px 0;
    padding-left: 12px;
  }

  article.body h5,
  article.body h3.sublabel {
    font-size: 14px;
    padding-left: 10px;
  }

  article.body blockquote {
    font-size: 17px;
    padding-left: 16px;
  }

  article.body pre {
    font-size: 11.5px;
    overflow-x: auto;
    padding: 14px 14px;
  }

  article.body pre code { font-size: 11.5px; }
  .framing-note { font-size: 13px; padding: 15px 16px; }

  .status-top,
  .status-bottom {
    font-size: 9px;
    grid-template-columns: 1fr;
    padding: 0 12px;
  }

  .status-top .left,
  .status-bottom .center {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-top .cmd,
  .status-top .right,
  .status-bottom .session,
  .status-bottom .right,
  .reg-mark {
    display: none;
  }

  .table-zone {
    margin-bottom: 28px;
  }

  .table-zone .table-drawing {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    padding: 20px 0 28px 0;
  }

  .table-zone .table-drawing svg {
    margin: 0 auto;
    width: 176px;
  }

  .table-zone .table-drawing .table-drawing-caption { font-size: 11px; }
  .table-zone .table-drawing .table-drawing-caption .line-2 { font-size: 14px; }
}

/* ─────────────────────────────────────────────────────────────────
   DESKTOP-UP scaling. The rail drawings are designed at 220x290
   viewBox; at default breakpoints they render at ~240px wide,
   which on a 1600+ display reads tiny against the long article
   column. These two min-width breakpoints widen the shell, expand
   the drawing-rail column, and let each SVG breathe.

   Mobile/tablet rules above are unchanged; rails stay hidden
   below 1240. These rules only fire on viewports that have room.
   ───────────────────────────────────────────────────────────────── */
/* TOC text gets a small bump at the base tier too — 11px reads thin
   against the larger article body. The active-bar still tracks fine. */
@media (min-width: 1240px) {
  .toc-rail a { font-size: 12px; }
  .toc-rail .quiet a { font-size: 10.5px; }
  .toc-rail .label { font-size: 11px; }
}

/* DESKTOP scaling rule: keep the article column anchored at its current
   max-width (~690px) for reading-comfort. Only the rails widen, the
   shell grows by exactly the rail delta, and the drawings get the
   breathing room. Article body width is unchanged across all three
   tiers, so prose measure stays comfortable. */
@media (min-width: 1600px) {
  .essay-shell {
    max-width: 1380px;
    /* Article column unchanged (minmax(0, 690px)); rails grow. */
    grid-template-columns: 210px minmax(0, 690px) 320px;
    gap: 56px;
  }
  .drawing-rail {
    height: min(calc(100vh - 160px), 540px);
  }
  .drawing-slot svg {
    max-width: 310px;
  }
  .drawing-slot .caption {
    font-size: 10.5px;
    max-width: 310px;
    margin-top: 16px;
  }
  .toc-rail a { font-size: 12.5px; }
  .toc-rail .quiet a { font-size: 11px; }
  .toc-rail .label { font-size: 11.5px; }
}

@media (min-width: 1920px) {
  .essay-shell {
    max-width: 1520px;
    /* Article column STILL unchanged. Rails get bigger again. */
    grid-template-columns: 230px minmax(0, 690px) 380px;
    gap: 64px;
  }
  .drawing-rail {
    height: min(calc(100vh - 160px), 620px);
  }
  .drawing-slot svg {
    max-width: 370px;
  }
  .drawing-slot .caption {
    font-size: 11.5px;
    max-width: 370px;
    margin-top: 18px;
  }
  .toc-rail a { font-size: 13px; }
  .toc-rail .quiet a { font-size: 11.5px; }
  .toc-rail .label { font-size: 12px; }
}