/* === Topology — themes in depth ===
   Builds on styles.css: same paper, ink, cobalt and one signal-yellow element per view. */

/* --- Opener (ink) --- */
.topo-hero { margin-top: var(--nav-h); padding: clamp(40px, 6vw, 96px) 0 clamp(40px, 5vw, 72px); background: var(--ink); color: var(--paper); }
.topo-hero .hero-eyebrow { margin-bottom: clamp(22px, 3vw, 40px); }
.topo-hero-title {
  color: var(--paper); font: 900 var(--size-display-xl)/.84 var(--font-display); font-stretch: 112%;
  letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: anywhere;
}
.topo-hero-sub { max-width: 52ch; margin-top: clamp(22px, 3vw, 40px); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; color: var(--paper); }
.topo-hero-list { margin-top: clamp(32px, 4vw, 56px); border-top-color: var(--paper); }
.topo-hero-list li { border-bottom-color: var(--ink-rule); }
.topo-hero-list .theme-row { color: var(--paper); }
.topo-hero-list .theme-row:hover { color: var(--ink); }
.topo-hero-list .theme-kicker { color: var(--on-ink-muted); }
.topo-hero-list .theme-row:hover .theme-kicker { color: var(--cobalt); }
.topo-hero-list .theme-desc { color: var(--on-ink-muted); }
.topo-hero-list .theme-row:hover .theme-desc { color: var(--ink-2); }
.topo-hero-list .theme-arrow { border-color: currentColor; }
.nav-links a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* --- Theme opener --- */
.theme-open { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px clamp(32px, 5vw, 80px); margin: calc(-1 * clamp(16px, 3vw, 40px)) 0 clamp(40px, 5vw, 64px); align-items: start; }
.theme-open .lead { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.05; }
.theme-standfirst { max-width: 64ch; font-size: clamp(17px, 1.4vw, 20px); }

.brief { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brief li { display: grid; gap: 10px; align-content: start; padding: 18px 24px 0 0; border-top: 3px solid var(--ink); min-width: 0; }
.brief li + li { border-left: 3px solid var(--ink); padding-left: 24px; }
.brief-num { font: 900 clamp(40px, 4.4vw, 68px)/.8 var(--font-display); font-stretch: 72%; letter-spacing: -.03em; color: var(--ink); }
.brief h3 { font: 900 clamp(20px, 1.8vw, 26px)/1 var(--font-display); font-stretch: 104%; text-transform: uppercase; }
.brief li:last-child h3 { display: inline; background: var(--signal); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.brief p { font-size: 16px; }

/* --- Body: sticky contents beside the article --- */
.theme-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(56px, 7vw, 104px); align-items: start; }
.theme-toc { position: sticky; top: calc(var(--nav-h) + 72px); border-top: 3px solid var(--ink); }
.theme-toc-head { padding: 12px 0; border-bottom: 2px solid var(--ink); font: 500 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.theme-toc ol { list-style: none; }
.theme-toc li { border-bottom: 1px solid var(--stone-2); }
.theme-toc a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; padding: 9px 0; color: var(--ink); text-decoration: none;
  font: 700 14px/1.2 var(--font-display); font-stretch: 90%;
}
.theme-toc a span { font: 500 12px/1.4 var(--font-mono); color: var(--graphite); }
.theme-toc a:hover { background: var(--paper-2); }
.theme-toc a.is-current { background: var(--signal); }
.theme-toc a.is-current span { color: var(--ink); }

.theme-article { min-width: 0; max-width: 880px; }
.theme-article p { max-width: 68ch; }
.theme-article p + p { margin-top: 14px; }
.part { padding-bottom: clamp(56px, 7vw, 96px); scroll-margin-top: calc(var(--nav-h) + 56px); }
.part + .part { padding-top: clamp(24px, 3vw, 40px); border-top: 3px solid var(--ink); }
.reason, .figure { scroll-margin-top: calc(var(--nav-h) + 56px); }
.part-num { margin-bottom: 10px; font: 500 13px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.part-title { margin-bottom: 24px; font: 900 clamp(30px, 3.6vw, 54px)/.95 var(--font-display); font-stretch: 112%; text-transform: uppercase; }
.part-sub { margin: clamp(40px, 5vw, 64px) 0 14px; font: 900 clamp(20px, 2vw, 28px)/1 var(--font-display); font-stretch: 104%; text-transform: uppercase; }
.cite-line { display: block; margin-top: 10px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .02em; color: var(--graphite); }
.theme-article p.cite-line { margin-top: 10px; }
.aside-line { margin-top: 20px !important; padding: 12px 16px; background: var(--paper-2); border-left: 6px solid var(--ink); font: 700 clamp(17px, 1.4vw, 20px)/1.3 var(--font-display); font-stretch: 92%; color: var(--ink); }
.verdict { margin-top: 28px !important; font: 900 clamp(26px, 3vw, 44px)/1 var(--font-display); font-stretch: 104%; text-transform: uppercase; color: var(--ink); }

.pull { margin: 0 0 28px; padding: 4px 0 4px clamp(16px, 2vw, 28px); border-left: 12px solid var(--ink); }
.pull p { font: 700 clamp(21px, 2.1vw, 30px)/1.2 var(--font-display); font-stretch: 92%; color: var(--ink); }
.pull cite { display: block; margin-top: 12px; font: 500 12px/1.3 var(--font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--cobalt); }
.pull-small p { font-size: clamp(18px, 1.6vw, 22px); }

.crosslink { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px !important; padding: 12px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font: 600 16px/1.3 var(--font-display); font-stretch: 92%; }
.crosslink span { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }

/* --- Figures --- */
.figure { margin-top: 32px; border: 2px solid var(--ink); background: var(--paper); }
.figure-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; border-bottom: 2px solid var(--ink); font: 700 15px/1.25 var(--font-display); font-stretch: 92%; color: var(--ink); }
.figure-tag { font: 500 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.figure-note { padding: 14px 18px; border-top: 2px solid var(--ink); font-size: 15px; }
.figure > .figure-note { max-width: none; }
.figure-bars .figure-note, .figure-eroom .figure-note, .figure-toolkit .figure-note { margin: 0; }

.ctl-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px;
  background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0; cursor: pointer;
  font: 800 13px/1 var(--font-display); font-stretch: 88%; letter-spacing: .04em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.ctl-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.ctl-btn:disabled { opacity: .35; cursor: default; }
.ctl-primary { background: var(--ink); color: var(--paper); }
.ctl-primary:hover:not(:disabled) { background: var(--signal); color: var(--ink); }

/* Figure 1: timeline */
.tl-track { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 2px solid var(--ink); }
.tl-item {
  position: relative; display: grid; gap: 6px; align-content: start; min-height: 92px; padding: 14px 10px 12px; min-width: 0;
  background: transparent; color: var(--ink); border: 0; border-right: 1px solid var(--stone-2); cursor: pointer; text-align: left;
}
.tl-item:last-child { border-right: 0; }
.tl-item.is-winter { background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, transparent 6px 12px); }
.tl-year { font: 900 clamp(20px, 2vw, 28px)/.9 var(--font-display); font-stretch: 72%; letter-spacing: -.02em; }
.tl-kind { font: 500 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.tl-item:hover { background: var(--cobalt-tint); }
.tl-item[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tl-item[aria-selected="true"] .tl-kind { color: var(--signal); }
.tl-panel { padding: 18px; min-height: 108px; }
.tl-panel h5 { margin-bottom: 8px; font: 900 clamp(19px, 1.8vw, 24px)/1 var(--font-display); font-stretch: 104%; text-transform: uppercase; }
.tl-panel p { font-size: 16px; }

/* Figure 2: RG7112 pipeline */
.pipe-stages { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 2px solid var(--ink); }
.pipe-stage { min-width: 0; border-right: 1px solid var(--stone-2); }
.pipe-stage:last-child { border-right: 0; }
.pipe-btn {
  width: 100%; height: 100%; display: grid; gap: 6px; align-content: start; padding: 12px 10px; min-height: 112px;
  background: transparent; color: var(--ink); border: 0; cursor: pointer; text-align: left;
  transition: background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.pipe-n { font: 900 28px/.85 var(--font-display); font-stretch: 72%; }
.pipe-name { font: 800 14px/1.1 var(--font-display); font-stretch: 88%; text-transform: uppercase; hyphens: manual; overflow-wrap: anywhere; }
.pipe-mark { align-self: end; justify-self: start; padding: 3px 6px; border: 2px solid currentColor; font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity var(--dur) var(--ease-snap); }
.pipe-stage.is-reached .pipe-mark { opacity: 1; }
.pipe-stage.is-reached .pipe-btn { background: var(--cobalt-tint); }
.pipe-stage.is-current .pipe-btn { background: var(--ink); color: var(--paper); }
.pipe-clinic.is-reached .pipe-mark { background: var(--vermilion); border-color: var(--vermilion); color: var(--paper); }
.pipe-clinic.is-current .pipe-btn { background: var(--vermilion); color: var(--paper); }
.pipe-clinic.is-current .pipe-mark { background: var(--paper); border-color: var(--paper); color: var(--vermilion); }
.pipe-btn:hover { background: var(--paper-2); }
.pipe-detail { padding: 18px; }
.js .pipe-detail { display: none; }
.pipe-detail-host { min-height: 150px; }
.js .pipe-detail-host .pipe-detail { display: block; }
.pipe-detail p { font-size: 16px; }
.pipe-outcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 14px; border-top: 2px solid var(--ink); }
.pipe-outcome > div { padding: 12px 16px 0 0; min-width: 0; }
.pipe-outcome > div + div { padding-left: 16px; border-left: 3px solid var(--ink); }
.pipe-outcome-tag { display: inline-block; margin-bottom: 6px; font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.pipe-outcome .is-harm .pipe-outcome-tag { color: var(--vermilion); }
.pipe-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-top: 2px solid var(--ink); }
.pipe-progress { margin-left: auto; font: 500 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
/* Without script every stage is listed with its evidence */
html:not(.js) .pipe-stages { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .pipe-stage { border-right: 0; border-bottom: 1px solid var(--stone-2); }
html:not(.js) .pipe-mark { opacity: 1; }
html:not(.js) .pipe-controls { display: none; }

/* Tools */
.tool-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.tool-group { display: grid; gap: 10px; align-content: start; min-width: 0; }
.tool-group-title { padding-bottom: 8px; border-bottom: 3px solid var(--ink); font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.tool-card { padding: 14px 16px; border: 2px solid var(--ink); background: var(--paper); }
.tool-card h5 { margin-bottom: 6px; font: 900 20px/1 var(--font-display); font-stretch: 104%; text-transform: uppercase; }
.tool-card p { font-size: 15px; }
.tool-card .cite-line { margin-top: 8px; }

/* Stats */
.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.stat-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { display: grid; gap: 8px; align-content: start; padding: 16px 20px 16px 0; border-top: 3px solid var(--ink); min-width: 0; container-type: inline-size; }
.stat + .stat { border-left: 3px solid var(--ink); padding-left: 20px; }
.stat-num { font: 900 clamp(44px, 5vw, 80px)/.82 var(--font-display); font-stretch: 72%; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-num { font-size: min(clamp(44px, 5vw, 80px), 30cqi); }
.stat-label { font: 700 15px/1.2 var(--font-display); font-stretch: 88%; color: var(--cobalt); }
.stat-point { background: var(--signal); padding-right: 16px; }
.stat-point .stat-label { color: var(--ink); }

/* Figure 3: toolkit see / miss */
.seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px 0; }
.seg-btn {
  min-height: 40px; padding: 0 14px; background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0; cursor: pointer;
  font: 800 13px/1 var(--font-display); font-stretch: 88%; letter-spacing: .04em; text-transform: uppercase;
}
.seg-btn:hover { background: var(--paper-2); }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg-btn[data-view="miss"][aria-pressed="true"] { background: var(--vermilion); border-color: var(--vermilion); }
.toolkit-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 18px; }
.toolkit-col { padding: 14px 16px; min-width: 0; border-top: 3px solid var(--ink); transition: opacity var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease); }
.toolkit-col + .toolkit-col { border-left: 3px solid var(--ink); }
.toolkit-col h4 { margin-bottom: 10px; font: 900 18px/1 var(--font-display); font-stretch: 104%; text-transform: uppercase; }
.toolkit-col ul { list-style: none; display: grid; gap: 10px; }
.toolkit-col li { padding-left: 18px; position: relative; font-size: 16px; }
.toolkit-col li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: currentColor; }
.toolkit-cols[data-view="see"] .toolkit-see { background: var(--cobalt-tint); }
.toolkit-cols[data-view="see"] .toolkit-miss { opacity: .3; }
.toolkit-cols[data-view="miss"] .toolkit-see { opacity: .3; }
.toolkit-cols[data-view="miss"] .toolkit-miss { background: var(--signal); }
.toolkit-cols[data-view="miss"] .toolkit-miss h4 { color: var(--vermilion); }

/* Figure 4: Eroom */
.eroom-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 16px 18px 0; }
.eroom-fold { font: 900 clamp(48px, 6vw, 88px)/.82 var(--font-display); font-stretch: 72%; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.eroom-text { font: 700 16px/1.25 var(--font-display); font-stretch: 92%; color: var(--cobalt); }
.eroom-chart { padding: 8px 18px 0; }
.eroom-svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font-mono); }
.eroom-grid { stroke: var(--stone-2); stroke-width: 1; }
.eroom-axis { stroke: var(--ink); stroke-width: 2; }
.eroom-tick { font-size: 12px; fill: var(--graphite); }
.eroom-line { fill: none; stroke: var(--ink); stroke-width: 3; }
.eroom-past { fill: none; stroke: var(--cobalt); stroke-width: 6; stroke-linecap: square; }
.eroom-dot { fill: var(--signal); stroke: var(--ink); stroke-width: 2.5; }
.eroom-guide { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; }
.eroom-note { font-size: 11px; fill: var(--graphite); }
.eroom-half { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.eroom-slider { display: block; padding: 6px 18px 16px; }
.eroom-slider input { width: 100%; accent-color: var(--ink); }

/* Figure 5: bars */
.hbars { display: grid; gap: 14px; padding: 18px; }
.hbar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 140px; gap: 12px; align-items: center; }
.hbar-label { font: 800 14px/1 var(--font-display); font-stretch: 88%; text-transform: uppercase; }
.hbar-track { height: 28px; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--stone-2) calc(20% - 1px) 20%); border-left: 2px solid var(--ink); }
.hbar-fill { display: block; width: calc(var(--v) * 1%); height: 100%; background: var(--ink); }
.hbar-fill.is-low { background: var(--cobalt); }
.hbar-val { font: 900 26px/.9 var(--font-display); font-stretch: 72%; color: var(--ink); font-variant-numeric: tabular-nums; }
.hbar-val small { font: 500 11px/1 var(--font-mono); letter-spacing: 0; color: var(--graphite); }

/* Back office */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.trio > div { padding: 14px 20px 0 0; border-top: 3px solid var(--ink); min-width: 0; }
.trio > div + div { border-left: 3px solid var(--ink); padding-left: 20px; }
.trio h5 { margin-bottom: 6px; font: 900 18px/1 var(--font-display); font-stretch: 104%; text-transform: uppercase; }
.trio p { font-size: 15px; }

/* Part VII: four reasons */
.reasons-index { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; border-top: 3px solid var(--ink); border-left: 2px solid var(--ink); }
.reasons-index a {
  display: grid; gap: 8px; height: 100%; padding: 14px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  color: var(--ink); text-decoration: none; font: 800 15px/1.1 var(--font-display); font-stretch: 92%; text-transform: uppercase;
}
.reasons-index a span { font: 900 36px/.8 var(--font-display); font-stretch: 72%; }
.reasons-index a:hover { background: var(--signal); }
.reason { margin-top: clamp(40px, 5vw, 64px); }
.reason-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 3px solid var(--ink); font: 900 clamp(22px, 2.4vw, 34px)/1 var(--font-display); font-stretch: 108%; text-transform: uppercase; }
.reason-title span { font: 900 clamp(40px, 4vw, 60px)/.8 var(--font-display); font-stretch: 72%; color: var(--cobalt); }

.thought { margin-top: 24px; padding: clamp(18px, 2.4vw, 28px); background: var(--ink); color: var(--paper); }
.theme-article .thought p { color: var(--on-ink-muted); }
.theme-article .thought .thought-q { font: 800 clamp(20px, 2vw, 28px)/1.15 var(--font-display); font-stretch: 96%; color: var(--paper); }
.theme-article .thought .thought-a { margin: 12px 0 18px; font-style: italic; }
.thought .ctl-btn { color: var(--paper); border-color: var(--paper); }
.thought .ctl-btn:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.thought-reveal { margin-top: 18px; animation: convergenceFade var(--dur-slow) var(--ease) both; }
.theme-article .thought .thought-answer { font: 900 clamp(26px, 3vw, 44px)/1 var(--font-display); font-stretch: 104%; text-transform: uppercase; color: var(--signal); }
.mini-timeline { list-style: none; margin: 18px 0; border-top: 2px solid var(--ink-rule); }
.mini-timeline li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ink-rule); font-size: 15px; color: var(--on-ink-muted); }
.mini-timeline span { font: 900 24px/.9 var(--font-display); font-stretch: 72%; color: var(--paper); }
.thought .cite-line { color: var(--on-ink-muted); }

.label-stack { display: grid; margin: 18px 0; border: 2px solid var(--ink); }
.label-layer { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 16px; border-bottom: 2px solid var(--ink); }
.label-layer:last-child { border-bottom: 0; }
.label-eye { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.label-layer p { font-size: 16px; }
.label-truth { background: var(--signal); }
.label-truth .label-eye { color: var(--ink); }

.playbooks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 18px; border: 2px solid var(--ink); }
.playbooks > div { padding: 16px; min-width: 0; }
.playbooks > div + div { border-left: 3px solid var(--ink); }
.playbooks .is-point { background: var(--signal); }
.playbook-tag { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.playbooks .is-point .playbook-tag { color: var(--ink); }
.theme-article .playbook-motto { margin: 8px 0 10px; font: 900 clamp(30px, 3.4vw, 52px)/.9 var(--font-display); font-stretch: 108%; text-transform: uppercase; color: var(--ink); }
.playbooks p:not(.playbook-motto) { font-size: 15px; }

.door { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 20px; border-top: 3px solid var(--ink); }
.door li { display: grid; gap: 8px; align-content: start; padding: 12px 12px 0 0; min-width: 0; }
.door li + li { border-left: 2px solid var(--ink); padding-left: 12px; }
.door-date { font: 900 22px/.9 var(--font-display); font-stretch: 72%; color: var(--ink); }
.door p { font-size: 14px; line-height: 1.35; }
.door-next { background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, transparent 6px 12px); }
.door-next .door-date { color: var(--cobalt); }

.sliver { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 48px); align-items: start; }
.sliver-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; aspect-ratio: 1; }
.sliver-grid i { display: block; border: 1px solid var(--stone-2); }
.sliver-grid i.is-known { background: var(--ink); border-color: var(--ink); }
.sliver-grid i.is-maybe { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px); border-color: var(--ink); }
.theme-article .sliver-num { font: 900 clamp(64px, 8vw, 120px)/.82 var(--font-display); font-stretch: 72%; letter-spacing: -.03em; color: var(--ink); margin-bottom: 14px; }
.sliver-num span { color: var(--cobalt); }

/* Way forward */
.part .compare-table { margin-top: 20px; }
.moves { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.moves li { display: grid; gap: 10px; align-content: start; padding: 16px 20px 0 0; border-top: 3px solid var(--ink); min-width: 0; }
.moves li + li { border-left: 3px solid var(--ink); padding-left: 20px; }
.move-num { font: 900 clamp(40px, 4vw, 60px)/.8 var(--font-display); font-stretch: 72%; letter-spacing: -.03em; color: var(--cobalt); }
.moves h5 { font: 900 clamp(19px, 1.7vw, 24px)/1 var(--font-display); font-stretch: 104%; text-transform: uppercase; }
.moves p { font-size: 16px; }
.closing { margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3vw, 40px); background: var(--signal); }
.theme-article .closing-line { margin-bottom: 16px; font: 900 clamp(30px, 4vw, 60px)/.92 var(--font-display); font-stretch: 108%; text-transform: uppercase; color: var(--ink); }
.closing p { color: var(--ink); }
.closing .pull { margin: 28px 0 0; }
.closing .pull cite { color: var(--ink); }

/* Connections and references */
.part-refs { padding-bottom: 0; }
.connections { list-style: none; margin-top: 20px; border-top: 3px solid var(--ink); }
.connections li { border-bottom: 2px solid var(--ink); }
.connections a { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; color: var(--ink); text-decoration: none; }
.connections a:hover { background: var(--signal); }
.conn-where { font: 500 12px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.conn-what { font: 700 clamp(16px, 1.3vw, 19px)/1.25 var(--font-display); font-stretch: 92%; }
.part-title-refs { margin-top: clamp(48px, 6vw, 72px); }
.references .research-pub-authors { display: block; margin-top: 4px; font-size: 14px; color: var(--graphite); }
.references span.research-pub:hover { background: none; }

/* --- Responsive --- */
@media (max-width: 1100px) {
  .theme-body { grid-template-columns: minmax(0, 1fr); }
  .theme-toc { position: static; }
  .theme-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .theme-open { grid-template-columns: minmax(0, 1fr); }
  .stat-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row-4 .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat-row-4 .stat-point:nth-child(4), .stat-row-4 .stat-point:nth-child(3) { padding-left: 16px; }
}
@media (max-width: 820px) {
  .brief, .moves, .trio { grid-template-columns: minmax(0, 1fr); }
  .brief li + li, .moves li + li, .trio > div + div { border-left: 0; padding-left: 0; margin-top: 16px; }
  .tool-groups { grid-template-columns: minmax(0, 1fr); }
  .tl-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tl-item { border-bottom: 1px solid var(--stone-2); }
  .pipe-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pipe-stage { border-bottom: 1px solid var(--stone-2); }
  .pipe-btn { min-height: 96px; }
  .reasons-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door { grid-template-columns: minmax(0, 1fr); }
  .door li { grid-template-columns: 80px minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--stone-2); }
  .door li + li { border-left: 0; padding-left: 0; }
  .door-next { padding-left: 8px !important; }
  .sliver { grid-template-columns: minmax(0, 1fr); }
  .sliver-grid { max-width: 220px; }
}
@media (max-width: 560px) {
  .theme-toc ol { grid-template-columns: minmax(0, 1fr); }
  .toolkit-cols, .playbooks, .pipe-outcome { grid-template-columns: minmax(0, 1fr); }
  .toolkit-col + .toolkit-col, .playbooks > div + div { border-left: 0; border-top: 3px solid var(--ink); }
  .pipe-outcome > div + div { border-left: 0; padding-left: 0; margin-top: 12px; border-top: 1px solid var(--stone-2); }
  .stat-row, .stat-row-4 { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { border-left: 0; padding-left: 0; }
  .stat-point { padding-left: 16px !important; }
  .label-layer, .connections a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hbar { grid-template-columns: 84px minmax(0, 1fr); }
  .hbar-val { grid-column: 2; }
  .tl-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe-clinic { grid-column: 1 / -1; }
  .topo-hero-title { font-size: clamp(48px, 17vw, 96px); }
}
@media (prefers-reduced-motion: reduce) {
  .pipe-btn, .pipe-mark, .toolkit-col, .ctl-btn { transition: none; }
  .thought-reveal { animation: none; }
}