/* ============================================================
   VISUAL GUIDE

   Black ink on warm paper, one system typeface in two weights,
   tabular numerals, no color, no chrome. Emphasis is carried by
   weight, by a rule, and by fill against hollow, never by hue.

   MEASURES. Three, and only three, so that every rule on the page
   stops at one of three edges rather than wherever its component
   happened to be written.
     --measure-text  reading column, roughly 70 characters. Prose
                     and standfirsts. Carries no rules.
     --measure-list  any row with a right-hand column: roles,
                     expandable works, publication lists, entries.
                     All hairline rules stop here.
     full width      section heads and figures. The 2px rules and
                     anything inside a plate run the full canvas.

   RHYTHM. Three vertical steps, used in this order of nesting.
     --space-section  88px, between top-level sections
     --space-block    56px, between blocks inside a section
     --space-tight    26px, from a heading to the thing it heads

   RULES. Weight encodes level, so a reader can tell depth without
   reading: 2px solid for a section head or a figure top, 1px
   --ink for a figure's internal divisions, 1px --rule for rows
   inside a list.

   TYPE. Three sizes carry almost everything: 15px body, 13.5px
   secondary and expanded detail, 12px labels and metadata. Labels
   are uppercase with 0.12em tracking. Headings are 600 weight with
   negative tracking; nothing is bolder than 600.

   MARKS. Status is a glyph, never a color: filled is done, half
   is under way, hollow is not yet, and a diamond is a running tool.
   ============================================================ */

:root {
  --ink:    #131313;
  --muted:  #5F5F5A;
  --faint: #70706B;
  --rule:   #E7E7E3;
  --paper:  #FAFAF7;
  --trough: #EFEEEA;
  --trough2:#F4F3EF;
  --light:  #E0DFDA;
  --hair:   #CFCEC9;
  --hatch: repeating-linear-gradient(45deg, #131313 0 2px, transparent 2px 5px);
  --measure-text: 660px;
  --measure-list: 820px;
  --space-section: 88px;
  --space-block: 56px;
  --space-tight: 26px;
  --font: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { opacity: 0.6; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; margin: 0; }
strong { font-weight: 600; }
button { font-family: inherit; }
::selection { background: var(--rule); }

/* ---------- canvas ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 56px 120px; }

/* ---------- navigation ---------- */
.nav { max-width: 1080px; margin: 0 auto; padding: 28px 56px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.nav__home { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; display: flex; align-items: center; }
.nav__home img { height: 32px; width: auto; display: block; }
.nav__links { display: flex; gap: 24px; flex-wrap: wrap; }
.nav__links a { font-size: 13px; color: var(--faint); text-decoration: none; }
.nav__links a:hover { color: var(--ink); opacity: 1; }
.nav__links a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

/* ---------- footer ---------- */
.foot { max-width: 1080px; margin: 0 auto; padding: 24px 56px 64px; border-top: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-size: 12px; color: var(--faint); flex-wrap: wrap; }
.foot a { color: var(--faint); text-decoration: none; }
.foot a:hover { color: var(--ink); opacity: 1; }
.foot__links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- masthead (2px rule, eyebrow row on both sides) ---------- */
.masthead { padding: 40px 0 20px; margin-bottom: 8px; }
.masthead__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.eyebrow a { color: inherit; text-decoration: none; }
.display { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 16px; max-width: 760px; text-wrap: balance; }
.lede { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: var(--measure-text); }
.standfirst { font-size: 12px; color: var(--faint); margin: 8px 0 56px; }

/* ---------- numbered section header ---------- */
.secnum { display: flex; align-items: baseline; gap: 14px; margin: 72px 0 28px; }
.secnum__n { font-size: 13px; color: var(--faint); }
.secnum__h { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- two-column grid of ruled items (per the reference) ---------- */
.grid2__item { padding: 18px 0; border-top: 1px solid var(--ink); }
.grid2__item h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 5px; letter-spacing: -0.005em; }
.grid2__item p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; }

/* ---------- prose ---------- */
.prose { max-width: var(--measure-text); }
.prose p { font-size: 15px; line-height: 1.65; margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose--lg p { font-size: 16px; }

/* ---------- ruled entry lists (research, work, about, writing) ---------- */
.subgroup__h { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: var(--space-tight) 0 8px; }
.inline-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; margin-top: 4px; }

/* ---------- home hero ---------- */
.hero { padding: 44px 0 0; }
.hero::after { content: ''; display: block; clear: both; }
.hero__photo { float: right; margin: 4px 0 20px 44px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero__headshot { width: 210px; height: 210px; object-fit: cover; display: block; border-radius: 50%; }
.hero__logos { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: nowrap; }
.hero__logos a { display: inline-flex; }
.hero__logos img { height: 24px; width: auto; filter: grayscale(1); opacity: 0.58; transition: opacity 0.15s; }
/* a solid filled mark reads far heavier than line art at the same opacity */
.hero__logos img.logo--solid { height: 21px; opacity: 0.38; }
.hero__logos a:hover img { opacity: 0.9; }
.hero__logos a:hover img.logo--solid { opacity: 0.72; }

/* inspirations carousel */
.inspo { position: relative; margin-top: 18px; }
.inspo__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
.inspo__track::-webkit-scrollbar { display: none; }
.inspo__track img { height: 300px; width: auto; flex: 0 0 auto; object-fit: cover; scroll-snap-align: center; border: 1px solid var(--rule); display: block; }
.inspo__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.inspo__nav:hover { background: var(--ink); color: var(--paper); }
.inspo__nav--prev { left: -10px; }
.inspo__nav--next { right: -10px; }
.hero__name { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.03; }
.hero__tagline { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 18px 0 0; max-width: var(--measure-text); }
.hero__social { margin-top: 22px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; }

/* ============================================================
   PORTFOLIO INDEX - the ruled table, per the reference
   ============================================================ */

/* ============================================================
   PROJECT ENTRY - centered text column, breakout figures
   ============================================================ */
.col { max-width: 660px; margin-left: auto; margin-right: auto; }
.col .prose, .col .lede { max-width: none; }

/* the build: two-column ruled grid, full canvas width */
.stages { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; max-width: 940px; margin: 0 auto; }
.stages .grid2__item h3 .n { color: var(--faint); font-weight: 400; font-size: 13px; margin-right: 10px; }
.stages .grid2__item .disc { font-size: 11.5px; color: var(--faint); margin-top: 10px; letter-spacing: 0.02em; }

/* ============================================================
   THE PLATE - 2px rule, title + hint, purpose, figure, caption.
   On entry pages plates break out wider than the text column
   and stand apart with generous margins.
   ============================================================ */
.plate { border-top: 2px solid var(--ink); padding-top: 16px; margin: 88px auto; }
.plate__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.plate__title { font-size: 16px; font-weight: 600; }
.plate__hint { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.plate__purpose { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; max-width: var(--measure-text); }
.plate__caption { border-top: 1px solid var(--ink); margin-top: 14px; padding-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.plate__note { border-top: 1px solid var(--ink); margin-top: 12px; padding-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.55; min-height: 40px; }
.is-dim { opacity: 0.3; }
.struck { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--faint); }

/* resolution stages (cumulative fill) */
.res-row { display: grid; grid-template-columns: 30px 150px 1fr 60px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); transition: opacity 0.15s; cursor: default; }
.res-row__num { font-size: 11.5px; color: var(--faint); }
.res-row__name { font-size: 13px; }
.res-row__track { position: relative; height: 11px; background: var(--trough); }
.res-row__fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink); }
.res-row__add { position: absolute; top: 0; bottom: 0; background: var(--hatch); }
.res-row__pct { font-size: 11.5px; text-align: right; color: var(--faint); }

/* model layers */

/* resolve a title */
.resolve-row { display: flex; gap: 8px; margin-bottom: 16px; }
.ink-input { flex: 1; background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 10px 13px; font-size: 13.5px; font-family: inherit; color: var(--ink); outline: none; }
.ink-btn { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 10px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.ink-btn:hover { background: var(--paper); color: var(--ink); }
.run-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.run-cta__hint { font-size: 12.5px; color: var(--muted); font-style: italic; }
.ink-chip { background: var(--paper); border: 1px solid var(--rule); padding: 5px 10px; font-size: 12px; color: var(--muted); cursor: pointer; }
.ink-chip:hover { border-color: var(--ink); color: var(--ink); }
.resolve-out { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.resolve-out__l { padding: 16px 18px 16px 0; border-right: 1px solid var(--rule); }
.resolve-out__r { padding: 16px 0 16px 20px; }
.resolve-out__lbl { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.resolve-out__val { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.resolve-out__sub { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.45; }
.rlbl { color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 8px; }
.rmuted { color: var(--faint); }

/* the librarian: ask in plain language, get routed to datasets */
.lib-log { border: 1px solid var(--ink); max-height: 360px; overflow-y: auto; padding: 15px; margin-bottom: 12px; }
.lib-turn { margin-bottom: 18px; }
.lib-turn:last-child { margin-bottom: 0; }
.lib-you { display: flex; justify-content: flex-end; }
.lib-you__b { background: var(--ink); color: var(--paper); font-size: 12.5px; padding: 8px 12px; max-width: 86%; line-height: 1.4; }
.lib-lib { margin-top: 11px; }
.lib-lib__who { font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.lib-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 9px; }
.lib-row__k { font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); flex: 0 0 68px; }
.lib-chip { font-size: 10.5px; color: var(--ink); border: 1px solid var(--ink); padding: 2px 8px; }
.lib-chip--geo { border-style: dashed; }
.lib-ds { border-top: 1px solid var(--rule); padding: 8px 0; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lib-ds__n { font-size: 12px; color: var(--ink); font-weight: 600; }
.lib-ds__m { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.lib-ds__r { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--rule); padding: 1px 5px; margin-left: 7px; }
.lib-fu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.lib-fu__c { font-size: 10.5px; color: var(--muted); border: 1px dashed var(--rule); padding: 3px 8px; }
.lib-hand { font-size: 10.5px; color: var(--faint); margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--rule); }
.lib-none { font-size: 12px; color: var(--muted); line-height: 1.55; }
.lib-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lib-sugg__c { font-size: 11px; color: var(--muted); border: 1px solid var(--rule); background: var(--paper); padding: 5px 9px; cursor: pointer; text-align: left; line-height: 1.3; }
.lib-sugg__c:hover { border-color: var(--ink); color: var(--ink); }
.lib-ask { display: flex; gap: 8px; }
.lib-ask .ink-input { flex: 1; }

/* resolved-at-scale scroll table */
.rtab2-wrap { max-height: 366px; overflow: auto; border: 1px solid var(--ink); margin-top: 4px; }
.rtab2 { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.rtab2 thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); text-align: left; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 8px 11px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.rtab2 tbody td { padding: 8px 11px; border-top: 1px solid var(--rule); color: var(--muted); vertical-align: middle; line-height: 1.4; white-space: nowrap; }
.rtab2 tbody tr:first-child td { border-top: none; }
.rtab2 td.rtab2__orig { color: var(--ink); font-weight: 600; }
.rtab2 td.rtab2__code { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.rtab2 .rtab2__empty { color: var(--light); }

/* sample table + tabs */
.sample-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.sample-tab { padding: 7px 12px; font-size: 12.5px; cursor: pointer; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.sample-tab.is-active { background: var(--ink); color: var(--paper); }

/* console, end to end */
.con-phases { display: flex; gap: 6px; margin-bottom: 14px; }
.con-phase { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 0; border-top: 2px solid var(--rule); color: var(--faint); flex: 1; transition: all 0.4s; }
.con-phase.is-on { border-top-color: var(--ink); color: var(--ink); }
.con-out { border: 1px solid var(--ink); padding: 16px 18px; min-height: 300px; }
.con-line { opacity: 0.1; transition: opacity 0.45s; margin-bottom: 12px; }
.con-line.is-on { opacity: 1; }
.con-line__cmd { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.con-line__out { font-size: 12px; color: var(--muted); line-height: 1.55; padding-left: 14px; }

/* JOI */
.joi { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; }
.joi__cols { display: grid; grid-template-columns: 1fr 54px; gap: 12px; padding-bottom: 6px; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.joi-row { display: grid; grid-template-columns: 1fr 54px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); cursor: pointer; transition: opacity 0.15s; opacity: 0.55; }
.joi-row.is-sel { opacity: 1; }
.joi-row__name { font-size: 13px; }
.joi-row.is-sel .joi-row__name { font-weight: 600; }
.joi-row__idx { font-size: 17px; font-weight: 600; text-align: right; color: var(--faint); }
.joi-row.is-sel .joi-row__idx { color: var(--ink); }
.joi__selhead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: 8px; margin-bottom: 10px; }
.joi__selname { font-size: 14px; font-weight: 600; }
.joi__selidx { font-size: 20px; font-weight: 600; }
.joi-pillar { padding: 7px 0; }
.joi-pillar__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.joi-pillar__name { font-size: 12px; }
.joi-pillar__v { font-size: 11.5px; color: var(--faint); }
.joi-pillar__track { background: var(--trough); height: 10px; }
.joi-pillar__bar { height: 10px; background: var(--ink); transition: width 0.3s; }
.joi-pillar__bar.is-low { background: var(--faint); }
.joi-pillar__desc { font-size: 10.5px; color: var(--faint); line-height: 1.4; margin-top: 3px; }

/* policy levers */
.lev-tab { padding: 8px 0; font-size: 13px; cursor: pointer; border: none; background: none; text-align: left; border-top: 1px solid var(--rule); display: block; width: 100%; color: var(--muted); }
.lev-tab.is-sel { font-weight: 600; color: var(--ink); }
.lev-band-area { position: relative; height: 44px; background: var(--trough2); }
.lev-band-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink); z-index: 2; }
.lev-band { position: absolute; top: 10px; bottom: 10px; background: var(--hatch); opacity: 0.5; transition: all 0.3s; }
.lev-mid { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ink); transition: all 0.3s; }
.lev-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--faint); }
.lev-evidence { border: 1px solid var(--ink); margin-top: 14px; padding: 12px 14px; }
.lev-evidence__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.lev-evidence__bar { display: flex; height: 10px; margin-bottom: 10px; }
.lev-evidence__row { display: flex; justify-content: space-between; font-size: 11.5px; }

/* observatories */
.obs-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.obs-tab { padding: 6px 12px; font-size: 12px; cursor: pointer; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.obs-tab.is-sel { background: var(--ink); color: var(--paper); }
.obs-panel { border: 1px solid var(--ink); padding: 16px 18px; }
.obs-panel__name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.obs-panel__desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }

/* flow model */
.flow-scroll { overflow-x: auto; }
.flow-canvas { position: relative; width: 820px; height: 390px; }
.flow-node { position: absolute; display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; background: var(--paper); border: 1px solid var(--ink); transition: opacity 0.15s; z-index: 1; cursor: default; }
.flow-node--stock { background: var(--ink); color: var(--paper); }
.flow-node--demand { border-width: 1.5px; }
.flow-node--layer { border-color: var(--faint); }
.flow-node--output { box-shadow: 3px 3px 0 var(--ink); }
.flow-node__label { font-size: 12.5px; font-weight: 600; line-height: 1.15; }
.flow-node__kind { font-size: 9.5px; opacity: 0.55; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.07em; }
.flow-note { border-top: 1px solid var(--ink); margin-top: 16px; padding-top: 10px; max-width: 640px; }
.flow-note__name { font-size: 13px; font-weight: 600; margin-right: 10px; }
.flow-note__blurb { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* divergence lines */
.div-legend-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); transition: opacity 0.15s; cursor: default; }
.div-legend-row__swatch { width: 30px; height: 2px; flex: 0 0 auto; }
.div-legend-row__name { font-size: 13px; }

/* dot matrix (the lake) */
.matrix-row { display: grid; grid-template-columns: 190px 1fr 34px; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); transition: opacity 0.15s; cursor: default; }
.matrix-row__name { font-size: 13px; }
.matrix-row__dots { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--ink); }
.mdot--hollow { background: transparent; border: 1px solid var(--ink); }
.matrix-row__count { font-size: 12px; text-align: right; color: var(--faint); }
.matrix-stats { font-size: 12px; color: var(--faint); margin-top: 10px; }

/* blueprint rows */
.bp-row { display: grid; grid-template-columns: 150px 1fr 34px; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); transition: opacity 0.15s; cursor: default; }
.bp-row__name { font-size: 13px; }
.bp-row__bar { height: 10px; background: var(--ink); }
.bp-row__bar--hatch { background: var(--hatch); }
.bp-row__per { font-size: 12px; text-align: right; color: var(--faint); }

/* derivation table */
.deriv-head, .deriv-row { display: grid; grid-template-columns: 1.7fr 68px 68px 74px 68px 82px; gap: 12px; align-items: baseline; }
.deriv-head { padding: 8px 0; border-bottom: 1px solid var(--ink); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.deriv-row { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.deriv-row .r { text-align: right; }
.deriv-head .r { text-align: right; }

/* signals */
.sig-row { display: grid; grid-template-columns: 30px 190px 1fr; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--rule); transition: opacity 0.15s; cursor: default; }
.sig-row__num { font-size: 11.5px; color: var(--faint); }
.sig-row__name { font-size: 13px; font-weight: 600; }
.sig-row__src { font-size: 12.5px; color: var(--muted); }

/* identity / equation plates */
.identity { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.6; text-align: center; padding: 10px 0 26px; }
.identity sub { font-size: 12px; font-weight: 400; }
.identity .soft { font-size: 15px; font-weight: 400; color: var(--muted); }
.correction-row { border-top: 1px solid var(--rule); padding: 12px 0; display: flex; justify-content: space-between; align-items: baseline; }
.eq-block { border-top: 1px solid var(--rule); padding: 16px 0; }
.eq-block__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.eq-block__eq { font-size: 17px; font-weight: 600; letter-spacing: 0.01em; }
.eq-block__read { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 6px; max-width: 56ch; }
.spine { border-left: 1px solid var(--ink); padding-left: 18px; display: flex; flex-direction: column; gap: 14px; }
.spine__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.spine__body { font-size: 13.5px; line-height: 1.5; }

/* employer facility dashboard (illustrative outputs) */
.plate.is-reveal { opacity: 0.35; transition: opacity 0.5s; }
.plate.is-reveal.is-shown { opacity: 1; }
.fac-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.fac-map { position: relative; width: 100%; height: 250px; border: 1px solid var(--rule); }
.fac-map__outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.fac-map__key { position: absolute; left: 8px; bottom: 6px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.fac-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); transform: translate(-50%, -50%); cursor: pointer; transition: all 0.15s; z-index: 2; }
.fac-dot.is-on { background: var(--ink); width: 13px; height: 13px; }
.fac-supdot { position: absolute; width: 7px; height: 7px; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.2s; z-index: 1; }
.fac-map.show-supply .fac-supdot { opacity: 1; }
.fac-panel { border-left: 1px solid var(--ink); padding-left: 20px; min-height: 250px; }
.fac-panel__hint { font-size: 13px; color: var(--faint); line-height: 1.5; }
.fac-panel__name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.fac-panel__type { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; margin-bottom: 14px; }
.fac-panel__grid { display: grid; grid-template-columns: 1fr auto; gap: 9px 16px; font-size: 13px; }
.fac-panel__grid span { color: var(--muted); }
.fac-panel__grid strong { font-weight: 600; text-align: right; }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; padding-top: 8px; }
.inv-head { font-size: 13px; font-weight: 600; border-top: 1px solid var(--ink); padding-top: 10px; margin-bottom: 4px; }
.inv-head span { display: block; font-size: 11.5px; font-weight: 400; color: var(--faint); margin-top: 2px; line-height: 1.4; }
.inv-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--rule); }
.inv-row__name { font-size: 12.5px; font-weight: 600; }
.inv-row__meta { grid-column: 1; font-size: 11.5px; color: var(--muted); }
.inv-row__n { grid-row: 1 / span 2; align-self: center; font-size: 11.5px; color: var(--faint); text-align: right; }
.metrics-block { margin-top: 28px; }
.metrics-head { font-size: 13px; font-weight: 600; border-top: 1px solid var(--ink); padding-top: 10px; margin-bottom: 4px; }
.metrics-row { display: grid; grid-template-columns: 1.6fr 0.8fr 0.9fr 1fr 0.8fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 13px; align-items: baseline; }
.metrics-row .r { text-align: right; }
.metrics-row--head { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); border-top: none; }

/* math block (applied) */

/* back link */
.backlink { display: inline-block; margin-top: 20px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; }

/* reach row (contact action at the end of a page) */

/* coverage matrix */
.cov-head, .cov-row { display: grid; grid-template-columns: 170px repeat(5, 1fr); gap: 10px; align-items: center; }
.cov-head { padding: 6px 0; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.cov-head span { text-align: center; }
.cov-head span:first-child { text-align: left; }
.cov-row { padding: 8px 0; border-top: 1px solid var(--rule); transition: opacity 0.15s; cursor: default; }
.cov-row__name { font-size: 13px; }
.cov-cell { width: 13px; height: 13px; justify-self: center; display: inline-block; }
.cov-cell--full { background: var(--ink); }
.cov-cell--part { background: var(--hatch); border: 1px solid var(--ink); }
.cov-cell--blind { border: 1px solid var(--hair); }
.cov-legend { display: flex; gap: 18px; align-items: center; margin-top: 12px; font-size: 10.5px; color: var(--faint); }

/* facility type weights */
.fw-row { display: grid; grid-template-columns: 150px 1fr 44px; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); }
.fw-row__name { font-size: 13px; }
.fw-track { position: relative; height: 12px; }
.fw-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--trough); }
.fw-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.fw-val { font-size: 12px; color: var(--faint); text-align: right; }

/* extra problems page: compact problem / figure / solve / stack blocks */
.xp { border-top: 2px solid var(--ink); padding-top: 20px; margin-top: 52px; max-width: 720px; }
.xp:first-of-type { margin-top: 20px; }
.xp__title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 3px; }
.xp__disc { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 14px; }
.xp__p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.xp__p strong { color: var(--ink); font-weight: 600; }
.xp__fig { margin: 18px 0; }
.xp__cap { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 8px; }
.xp__stack { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 16px; }
.xp__stack strong { color: var(--ink); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px; }
.pb-row { display: grid; grid-template-columns: 150px 1fr 48px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); }
.pb-row__name { font-size: 12.5px; }
.pb-track { position: relative; height: 20px; }
.pb-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.pb-range { position: absolute; top: 50%; transform: translateY(-50%); height: 8px; background: var(--light); }
.pb-med { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 15px; background: var(--faint); }
.pb-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.pb-val { font-size: 12px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.pb-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; align-items: center; }
.pb-legend b { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); vertical-align: middle; margin-right: 5px; }
.pb-legend i { display: inline-block; width: 16px; height: 8px; background: var(--light); vertical-align: middle; margin-right: 5px; }
.hf-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 10px 0; border-top: 1px solid var(--rule); }
.hf-row:last-child { border-bottom: 1px solid var(--rule); }
.hf-row__name { grid-column: 1; grid-row: 1; font-size: 12.5px; font-weight: 600; }
.hf-row__meta { grid-column: 1; grid-row: 2; font-size: 11.5px; color: var(--muted); }
.hf-row__n { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.comp-row { display: grid; grid-template-columns: 240px 1fr 40px; gap: 14px; align-items: center; padding: 7px 0; }
.comp-row__name { font-size: 12.5px; }
.comp-bar { height: 10px; }
.comp-fill { background: var(--ink); }
.comp-soft { background: var(--light); }
.comp-val { font-size: 11.5px; color: var(--faint); text-align: right; }
.tr-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); }
.tr-mark { width: 11px; height: 11px; margin-top: 3px; }
.tr-mark--yes { background: var(--ink); }
.tr-mark--no { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.tr-name { font-size: 13px; font-weight: 600; }
.tr-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tr-delta { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* example label above a plate figure */
.plate__eg { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }

/* tools used */
.tools { margin-top: 4px; }
.tool-row { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 9px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.tool-row:last-child { border-bottom: 1px solid var(--rule); }
.tool-row__name { font-size: 13.5px; font-weight: 600; }
.tool-row__use { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* research agenda: expandable cards */
.agenda { margin-top: 4px; }

/* working-paper findings and results table */

/* metrics scope label (facility map) */
.metrics-scope { float: right; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); font-weight: 400; }

/* richer observatory views */
.obs-view { border-top: 1px solid var(--rule); padding: 10px 0; }
.obs-view__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.obs-view__name { font-size: 13px; font-weight: 600; }
.obs-view__stat { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.obs-view__desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 3px; }

/* lever provenance */
.lev-prov { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 12px; }
.lev-prov__head { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.lev-prov__row { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--rule); font-size: 12px; }
.lev-prov__design { font-weight: 600; }
.lev-prov__setting { color: var(--muted); }
.lev-prov__effect { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lev-prov__foot { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 10px; }

/* ramp streamgraph */
.ramp-chips__label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.ramp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ramp-chip { padding: 5px 10px; font-size: 11.5px; cursor: pointer; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.ramp-chip.is-sel { background: var(--ink); color: var(--paper); }
.ramp-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; font-size: 12.5px; }
.ramp-leg__item { display: flex; align-items: center; gap: 7px; transition: opacity 0.12s; cursor: pointer; color: var(--muted); }
.ramp-leg__item.is-sel { color: var(--ink); font-weight: 600; }
.ramp-leg__sw { width: 11px; height: 11px; flex: 0 0 auto; display: inline-block; }

/* qualitative to quantitative */
.xtract-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 4px; }
.xtract-src { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.xtract-quote { font-size: 14px; line-height: 1.6; border-left: 2px solid var(--ink); padding-left: 16px; color: var(--ink); }
.xtract-sig { border: 1px solid var(--ink); padding: 10px 12px; margin-bottom: 10px; }
.xtract-sig__occ { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.xtract-sig__grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; }
.xtract-sig__grid span { color: var(--faint); }
.xtract-sig__grid strong { font-weight: 600; text-align: right; }
.xtract-sig__basis { font-size: 11.5px; color: var(--muted); margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 7px; }

/* job clusters (adjacent population) */
.clu-scroll { overflow-x: auto; }
.clu-canvas { position: relative; width: 640px; height: 320px; margin: 0 auto; }
.clu-node { position: absolute; transform: translate(-50%, -50%); width: 148px; padding: 7px 12px; background: var(--paper); border: 1px solid var(--ink); transition: opacity 0.15s; z-index: 1; cursor: default; text-align: center; }
.clu-node--center { width: 168px; border-width: 2px; background: var(--ink); color: var(--paper); }
.clu-node.is-dim { opacity: 0.28; }
.clu-node__label { font-size: 12.5px; font-weight: 600; line-height: 1.15; }
.clu-node__meta { font-size: 10px; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.clu-node--center .clu-node__meta { opacity: 0.7; }

/* employment hierarchy */
.hier-scroll { overflow-x: auto; }
.hier-canvas { position: relative; width: 620px; height: 372px; margin: 0 auto; }
.hier-node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: baseline; gap: 10px; padding: 7px 14px; background: var(--paper); border: 1px solid var(--ink); transition: opacity 0.15s; z-index: 1; cursor: default; white-space: nowrap; }
.hier-node.is-dim { opacity: 0.28; }
.hier-node__role { font-size: 12.5px; font-weight: 600; }
.hier-node__n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hier-node--exec { background: var(--ink); }
.hier-node--exec .hier-node__role { color: var(--paper); }
.hier-node--exec .hier-node__n { color: var(--light); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .stages { grid-template-columns: 1fr; }
  .joi { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding: 16px 22px 80px; }
  .nav, .foot { padding-left: 22px; padding-right: 22px; }
  .display { font-size: 30px; }
  .hero__name { font-size: 34px; }
  .resolve-out { grid-template-columns: 1fr; }
  .resolve-out__l { border-right: none; border-bottom: 1px solid var(--rule); padding: 14px 0; }
  .resolve-out__r { padding: 14px 0 0; }
  .deriv-head, .deriv-row { grid-template-columns: 1.4fr 58px 58px 66px; }
  .deriv-head span:nth-child(4), .deriv-row span:nth-child(4),
  .deriv-head span:nth-child(5), .deriv-row span:nth-child(5) { display: none; }
  .cov-head, .cov-row { grid-template-columns: 110px repeat(5, 1fr); }
  .sig-row { grid-template-columns: 24px 1fr; }
  .sig-row__src { grid-column: 2; }
  .plate { margin: 64px auto; }
  .inspo__track img { height: 220px; }
  .hero__photo { float: none; margin: 0 0 20px 0; align-items: flex-start; }
  .hero__headshot { width: 150px; height: 150px; }
  .hero__logos { justify-content: flex-start; }
  .fac-layout { grid-template-columns: 1fr; gap: 20px; }
  .fac-panel { border-left: none; border-top: 1px solid var(--ink); padding-left: 0; padding-top: 14px; min-height: 0; }
  .inv-grid { grid-template-columns: 1fr; gap: 20px; }
  .metrics-row { grid-template-columns: 1.4fr 0.8fr 0.9fr 0.9fr; }
  .metrics-row span:nth-child(4) { display: none; }
  .clu-canvas, .hier-canvas { width: 600px; }
  .xtract-grid { grid-template-columns: 1fr; gap: 16px; }
  .lev-prov__row { grid-template-columns: 1fr auto; }
  .lev-prov__setting { grid-column: 1 / -1; grid-row: 2; }
}

/* status glyphs: published / working paper / in progress */
.glyph { font-size: 12px; line-height: 1; }

/* homepage: where to start */

/* research: program map */

/* research: open questions */
@media (max-width: 560px) { .claim-row__src { display: none; } }

/* applied: pipeline */

/* ============================================================
   Research graph. Four marks: a haloed disc for published work,
   a filled disc for a working paper, a hollow diamond for a live
   tool, a hairline ring for work still in development.
   ============================================================ */
.rgraph { position: relative; height: 580px; transition: height 0.42s cubic-bezier(0.4, 0.1, 0.2, 1); }
.rgraph.is-focused { height: 280px; }
.rgraph svg { width: 100%; height: 100%; display: block; overflow: visible; }

.rg-node { cursor: pointer; }
.rg-node:focus { outline: none; }
.rg-hit { fill: transparent; }
.rg-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; transition: opacity 0.2s; }
.rg-dot--tool { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.rg-dot--wip { fill: var(--paper); stroke: var(--hair); stroke-width: 1.5; }
.rg-halo { fill: none; stroke: var(--ink); stroke-width: 1.1; transition: opacity 0.2s; }
.rg-sel { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: 0; transition: opacity 0.25s; }
.rg-node.is-selected .rg-sel { opacity: 1; }
.rg-label { font-size: 12px; fill: var(--ink); font-weight: 600; letter-spacing: -0.005em; pointer-events: none; transition: opacity 0.2s; }
.rg-label--wip { fill: var(--faint); font-weight: 400; }
.rg-edge { stroke: var(--ink); fill: none; opacity: 0.45; transition: opacity 0.2s, stroke-width 0.2s; }
.rg-edge--wip { stroke: var(--hair); stroke-dasharray: 3 3.5; opacity: 0.9; }
.rg-cluster { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--faint); pointer-events: none; }

.rgraph.is-dimmed .rg-node:not(.is-lit) .rg-dot,
.rgraph.is-dimmed .rg-node:not(.is-lit) .rg-halo { opacity: 0.15; }
.rgraph.is-dimmed .rg-node:not(.is-lit) .rg-label { opacity: 0.13; }
.rgraph.is-dimmed .rg-edge:not(.is-lit) { opacity: 0.06; }
.rgraph.is-dimmed .rg-edge.is-lit { opacity: 1; stroke-width: 1.8; stroke: var(--ink); }
.rg-node:focus-visible .rg-dot { stroke: var(--ink); stroke-width: 3; }

/* detail panel */
.rg-detail { display: none; border-top: 1px solid var(--ink); margin-top: 18px; padding-top: 20px; }
.rg-detail.is-open { display: block; animation: rg-rise 0.4s cubic-bezier(0.4, 0.1, 0.2, 1); }
@keyframes rg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rg-d__top { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.rg-d__title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; max-width: var(--measure-text); text-wrap: balance; }
.rg-d__date { font-size: 12px; color: var(--faint); margin-top: 5px; }
.rg-d__close { background: none; border: none; padding: 4px 0; font-size: 11px; color: var(--faint); cursor: pointer; letter-spacing: 0.09em; text-transform: uppercase; }
.rg-d__close:hover { color: var(--ink); }
.rg-math { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 14px; padding: 13px 0; font-size: 13.5px; line-height: 2; color: var(--ink); overflow-x: auto; }
.rg-tabs { display: flex; margin: 16px 0 14px; }
.rg-tab { background: var(--paper); border: 1px solid var(--rule); border-right: none; padding: 5px 13px; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.rg-tab:last-child { border-right: 1px solid var(--rule); }
.rg-tab:hover { color: var(--ink); }
.rg-tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rg-pane { font-size: 14.5px; line-height: 1.68; color: var(--ink); margin: 0; max-width: var(--measure-text); }
.rg-pane p { margin: 0; font-size: 14.5px; line-height: 1.68; }
.rg-pane.is-hidden { display: none; }
.rg-d__links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; margin-top: 18px; }

/* narrow screens get the list instead of the graph */
.rg-list { display: none; }
.rg-lgrp { margin-top: 22px; }
.rg-lgrp__h { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.rg-lrow { display: flex; gap: 11px; align-items: baseline; width: 100%; padding: 11px 0; border: none; border-top: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; color: var(--ink); }
.rg-lrow .t { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.rg-lrow.is-wip .t { font-weight: 400; color: var(--faint); }
@media (max-width: 640px) {
  .rgraph { display: none; }
  .rg-list { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .rgraph { transition: none; }
  .rg-detail.is-open { animation: none; }
}

/* ============================================================
   Front page: one page, two sections.
   ============================================================ */
.anchor { scroll-margin-top: 24px; }
.sechead { border-top: 2px solid var(--ink); padding-top: 14px; margin: var(--space-section) 0 var(--space-tight); display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.sechead__h { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }

.roles { border-top: 1px solid var(--rule); max-width: var(--measure-list); }
.role-row { display: grid; grid-template-columns: 1fr 150px; gap: 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.role-row__t { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.role-row__o { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.role-row__d { font-size: 12.5px; color: var(--faint); text-align: right; white-space: nowrap; }
@media (max-width: 620px) {
  .role-row { grid-template-columns: 1fr; gap: 3px; }
  .role-row__d { text-align: left; }
}

.works { max-width: var(--measure-list); }
.work { border-top: 1px solid var(--rule); }
.work:last-of-type { border-bottom: 1px solid var(--rule); }
.work > summary { list-style: none; cursor: pointer; padding: 17px 34px 17px 0; display: block; position: relative; }
.work > summary::-webkit-details-marker { display: none; }
.work > summary::after { content: '+'; position: absolute; right: 4px; top: 15px; font-size: 19px; color: var(--faint); transition: color 0.15s; }
.work[open] > summary::after { content: '\2212'; }
.work > summary:hover::after { color: var(--ink); }
.work__head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.work__t { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.work__tag { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.work__s { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 7px 0 0; max-width: var(--measure-text); }
.work__body { padding: 2px 0 22px; max-width: var(--measure-text); }
.work__body p { font-size: 13.5px; line-height: 1.7; color: var(--ink); margin: 0 0 12px; }
.work__links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; margin-top: 12px; }

.pubs { border-top: 1px solid var(--rule); max-width: var(--measure-list); }
.pub-row { display: grid; grid-template-columns: 1fr 140px 78px; gap: 18px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.pub-row__t { font-size: 14px; line-height: 1.45; }
/* series identifier and version, under the title of a numbered working paper */
.pub-row__id { display: block; margin-top: 3px; font-size: 11.5px; letter-spacing: 0.02em; color: var(--faint); }
.pub-row__w { font-size: 12.5px; color: var(--faint); }
.pub-row__l { font-size: 12.5px; text-align: right; }
@media (max-width: 620px) {
  .pub-row { grid-template-columns: 1fr auto; }
  .pub-row__w { grid-column: 1 / 2; }
  .pub-row__l { text-align: right; }
}

.hero__affil { font-size: 14.5px; color: var(--muted); margin: 16px 0 0; max-width: var(--measure-text); line-height: 1.6; }
.hero__affil strong { color: var(--ink); font-weight: 600; }

/* block heading inside a section, replaces per-element inline margins */
.blockhead { border-top: 1px solid var(--ink); padding-top: 13px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: var(--space-block) 0 var(--space-tight); max-width: var(--measure-list); }
.groupnote { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; max-width: var(--measure-text); }

/* a level-3 group inside a block: indented against a hairline so the
   nesting is visible without another heading weight */
.nest { padding-left: 22px; border-left: 1px solid var(--rule); margin-top: 4px; }
.nest > .subgroup__h:first-child { margin-top: 0; }
/* Inside a nest the subgroup heading hangs to the left of everything that
   belongs under it, so where one group ends and the next begins is legible
   without adding another rule. */
.nest > .groupnote, .nest > .works, .nest > .pubs { margin-left: 20px; }
.nest .works, .nest .pubs { max-width: calc(var(--measure-list) - 42px); }
@media (max-width: 620px) {
  .nest { padding-left: 13px; }
  .nest > .groupnote, .nest > .works, .nest > .pubs { margin-left: 10px; }
  .nest .works, .nest .pubs { max-width: calc(var(--measure-list) - 23px); }
}

/* the research figure sits inside a block, so the block heading carries
   the rule and the plate does not repeat it */
.plate--page { border-top: none; padding-top: 0; margin: 0; }

.inspo-intro { font-size: 13.5px; color: var(--muted); margin: var(--space-section) 0 12px; max-width: var(--measure-text); }

/* four papers are the current focus: the status mark is unchanged, the
   label is promoted to full ink and ruled underneath */

/* ---------- section fold: Systems and tools, Publications ----------
   Closed by default, since together they are most of the page's
   length. The marker and hover match .work exactly, one level up. */
.secfold > summary.blockhead { list-style: none; cursor: pointer; display: block; position: relative; padding-right: 30px; }
.secfold > summary.blockhead::-webkit-details-marker { display: none; }
.secfold > summary.blockhead::after { content: '+'; position: absolute; right: 4px; top: 12px; font-size: 20px; font-weight: 400; color: var(--faint); transition: color 0.15s; }
.secfold[open] > summary.blockhead::after { content: '\2212'; }
.secfold > summary.blockhead:hover::after { color: var(--ink); }
.secfold > summary.blockhead:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* ---------- section rail ----------
   Hairlines in the right gutter, one per section. The width of each
   line is set from JS as the pointer nears it, so the transition here
   only governs the settle back to rest, never the tracking itself. */
.toc { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; }
.toc__i { position: relative; display: block; width: 38px; height: 21px; text-decoration: none; }
.toc__line { position: absolute; right: 0; top: 50%; height: 1px; width: 18px; background: var(--faint); transform: translateY(-50%); }
.toc.is-settling .toc__line { transition: width 0.24s cubic-bezier(0.4, 0.1, 0.2, 1); }
.toc__i.is-here .toc__line { background: var(--ink); }
.toc__i:hover .toc__line, .toc__i:focus-visible .toc__line { background: var(--ink); }
.toc__lab { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 13px; white-space: nowrap; font-size: 11.5px; color: var(--ink); background: var(--paper); padding: 2px 0 2px 6px; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.toc__i.is-near .toc__lab, .toc__i:focus-visible .toc__lab { opacity: 1; }
.toc__i:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .toc.is-settling .toc__line, .toc__lab { transition: none; } }