/* ═══════════════════════════════════════════════════════════════════════
   styles.css — single source of truth for the site's CSS.
   Linked by index.html and every page generated by tools/render-index.mjs.
   Edit CSS HERE (never in the HTML). Rebuild pages: npm run build:data
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=BioRhyme:wdth,wght@100..125,200..800&family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Brygada+1918:ital,wght@0,400..700;1,400..700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — 8px baseline grid
   ───────────────────────────────────────────────────────────────────────
   Every single-line element occupies a whole number of 8px grid cells:
   font-sizes are fixed, line-heights are snapped to 8px multiples, and all
   spacing is an 8px multiple. Borders are drawn with box-shadow (NOT border),
   so they add ZERO layout height — this is what prevents 1px-per-row drift.
   The .bo-* offset classes push each role's FIRST glyph baseline onto the
   grid line (font-metric constants, measured per typeface/size).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* palette */
  /* Ink ramp raised (Sept 2026) so every text role clears WCAG AA on paper;
     the 12px metadata roles (faint, dim) were the failures at 2.7:1 / 2.3:1.
     Contrast on #fafafa: ink 17.3 · lead 14.3 · body 11.7 · soft 8.0 ·
     mute 5.9 · faint 5.0 · dim 4.6. */
  --paper: #fafafa;
  --rule: #e6e7e6;
  --rule2: #dcdddc;
  --ink: #161618;
  --ink-lead: #27272b;
  --ink-body: #343539;
  --ink-soft: #4c4e52;
  --ink-mute: #5f6165;
  --ink-faint: #6a6c70;
  --ink-dim: #707376;
  --accent: #8e1b1b;
  --accent-dot: color-mix(in srgb, var(--accent) 50%, transparent);

  /* fonts — BioRhyme (identity + headings) · Brygada 1918 (reading) · Bricolage (functional) */
  --font-display: "BioRhyme", Georgia, serif;
  --font-body: "Brygada 1918", Georgia, serif;
  --font-mono: "Bricolage Grotesque", system-ui, sans-serif;

  /* type scale — fixed px */
  --fs-meta: 12px;
  --fs-label: 12px;
  --fs-body: 16px;
  --fs-item: 20px;
  --fs-lead: 20px;
  --fs-h2: 24px;
  --fs-display: 36px;

  /* line-heights — snapped to the 8px grid */
  --lh-meta: 16px;
  --lh-label: 16px;
  --lh-body: 24px;
  --lh-item: 24px;
  --lh-lead: 32px;
  --lh-h2: 32px;
  --lh-display: 48px;

  /* layout */
  --rail-width: 440px;
  --monogram-lift: -33px; /* out of flow; monogram baseline on grid (y=64, a bold line) */
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

body {
  position: relative;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── 8px grid overlay (design aid) ───
   Pale hairline every 8px, bold every 4th (32px), from document top y=0.
   Development only: toggle from the console with
   document.documentElement.classList.toggle("grid"). No shipped keyboard
   shortcut (an unmodified key would collide with assistive tech). */
#grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  display: none;
  background:
    repeating-linear-gradient(to bottom, rgba(20,20,30,0.32) 0, rgba(20,20,30,0.32) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(to bottom, rgba(20,20,30,0.11) 0, rgba(20,20,30,0.11) 1px, transparent 1px, transparent 8px);
}
html.grid #grid-overlay { display: block; }

h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--paper); }

/* Keyboard focus: one visible treatment everywhere, in the page accent. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Lists used for layout rows carry no bullets or indent; the row styling
   lives on the <a>/<li> inside. */
.work-rows, .list-rows, .role-lines, .role-details, .press-outlet-line {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Skip link: off-screen until focused, then a small accent tab at the top. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 80, "wght" 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.skip-link:focus { top: 16px; }

/* ─── page grid ─── */

.page-width-constraint { max-width: 1200px; margin: 0 auto; }

.sidebar-scroll-layout {
  display: grid;
  grid-template-columns: var(--rail-width) 1fr;
  align-items: start;
  min-height: 100vh;
}

/* ─── identity rail (sticky) ───
   Padding 72/56/64/72. Right padding (56) matches the content column's left
   padding (56) so the border-right hairline is centred in the gutter. */
.sticky-identity-rail {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 80px 56px 64px 72px;
  border-right: 1px solid var(--rule2);
}

/* Monogram floats 5U above the name, out of flow, so it never pushes the
   name down — this keeps the name's baseline on the same grid line as the
   content column's lead statement (cross-column alignment). */
.rail-monogram-wrap { position: relative; }

.rail-monogram {
  position: absolute;
  top: var(--monogram-lift);
  left: 0;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
  transition: color .15s ease;
}

/* The monogram is the home link; the whole wordmark takes the accent on rollover. */
.rail-monogram:hover,
.collapse-monogram:hover { color: var(--accent); }

/* The monogram's dot is drawn, not typed: BioRhyme's middle-dot glyph is a
   wide oval (166x134 units, ratio 1.24, at every width setting). A circle in
   the accent, centred on the cap height, replaces it.
   WHOLE PIXELS, not em: at 0.22em the box came out 4.39px and the rasteriser
   rounded width and height differently, so the painted dot looked squashed
   even though the box measured square. The monogram is 20px everywhere
   (.rail-monogram and .collapse-monogram) — if that ever changes, re-measure
   these three values. top:-5px seats the centre on the cap middle (y=28.1
   against a baseline of 35, measured).
   The glyph stays in the markup for copy/paste and is made invisible. */
.brand-sep {
  display: inline-block;
  position: relative;
  width: 4px;
  height: 4px;
  margin: 0 0.30em 0 0.26em;
  vertical-align: baseline;
  top: -5px;
  border-radius: 50%;
  background: var(--accent);
  color: transparent;
  font-size: inherit;
  line-height: 0;
  overflow: hidden;
}

.rail-name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 720;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink);
}

.rail-bio {
  margin: -1px 0 0; /* lifts the bio's first baseline to y=160 — level with the lede's "infrastructure" line */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.rail-bio p + p { margin-top: 8px; }

/* Structural rule occupies one 8px cell with the hairline centred — no drift. */
.rail-rule {
  height: 8px;
  margin: 36px 0 16px; /* rule 40px up from its pre-tune position (y≈251) */
  background: linear-gradient(var(--rule2), var(--rule2)) left center / 100% 1px no-repeat;
}

/* ─── site navigation (rail) ───
   Writing / Commentary / About. 16px line + 8px gap = 24px step; +12 top /
   +12 bottom keeps the block ×8 and lands the first baseline 20px below the
   rule (matching SELECTED under the Writing rule on the right). Ink, not
   accent: the accent marks the current page and the hover state only. */
.site-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 24px;
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 80, "wght" 400;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--ink);
  transition: color .15s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--accent); }

.site-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── social links (rail) ───
   Utilities, not navigation: one quiet horizontal row in the metadata size
   (12/16, muted ink, lighter tracking) beneath the nav. Row = 8 + 16 + 8 = 32. */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 8px 0 0;
  padding: 8px 0;
  list-style: none;
  line-height: 16px;
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 88, "wght" 400;
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.social-links a {
  color: var(--ink-mute);
  transition: color .15s ease;
}

.social-links a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Bricolage arrow glyph (→) ───
   U+2192 is absent from the Google Fonts Bricolage subset, so we mask in the
   real glyph outline. Extracted from the variable font at the SAME axes the
   links use — wght 400, wdth 80, opsz 16 — via fonttools instancer (not the
   font's default 800/100, which rendered chunky). UPM 1000, glyph bbox 451×438.
   Scaled to CAP HEIGHT (0.66em) and seated on the baseline, so it spans
   baseline→cap-height and optically centres on the ALL-CAPS labels beside it. */
.arr {
  display: inline-block;
  width: 0.680em;   /* 0.66 x 451/438 — cap height, glyph aspect preserved */
  height: 0.660em;  /* cap height */
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 451 438'%3E%3Cpath fill='%23fff' d='M269 438Q268 406 279 371Q289 336 311 305Q333 274 366 258V252L0 261V177L366 185V179Q331 158 309 128Q287 98 277 65Q267 31 266 0H359Q359 39 369 74Q379 110 399 140Q420 170 451 191V246Q407 279 383 326Q359 373 359 438Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 451 438'%3E%3Cpath fill='%23fff' d='M269 438Q268 406 279 371Q289 336 311 305Q333 274 366 258V252L0 261V177L366 185V179Q331 158 309 128Q287 98 277 65Q267 31 266 0H359Q359 39 369 74Q379 110 399 140Q420 170 451 191V246Q407 279 383 326Q359 373 359 438Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Left arrow (←): the same glyph mirrored — an authentic Bricolage back arrow. */
/* The gap between label and arrow is a margin, not a space, so a hover
   underline stops at the last letter. 0.45em ≈ a Bricolage space plus the
   0.2em tracking the labels carry. */
.arr { margin-left: 0.45em; }
.arr-left { margin-left: 0; margin-right: 0.45em; transform: scaleX(-1); }

/* ─── mobile collapse bar (hidden ≥768px) ─── */

.rail-collapse-bar { display: none; }

/* ─── content column ───
   padding-top 104 places the lead's first baseline on the same grid line as
   the name (both at y=128 — a bold 32px line). Rail and column tops both
   moved +8 from the original 72/96 so the name starts on a bold line. */
.scrolling-content-column { padding: 104px 80px 120px 56px; }

/* BioRhyme 20/32 sits 1px high; +1 top / +7 bottom drops the first baseline onto
   the name's grid line (y=128) and keeps the block a whole ×8 (the first section's
   margin below absorbs the 8px). */
.lead-statement {
  max-width: 52ch;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 320;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: 0;
  color: var(--ink-lead);
  padding-top: 1px;
  padding-bottom: 7px;
}

/* ─── section heading: Fraunces h2 + rule extending off it ───
   6U top / 2U bottom. The first heading after the hero is trimmed to 5U (40)
   so its baseline lands on grid below the 3-line lead. */
.section-heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 48px 0 16px;
}

.scrolling-content-column > section:first-of-type .section-heading { margin-top: 24px; } /* Writing +8px up to y=256 (a bold line); content below follows */

.section-heading > h2 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112, "wght" 560;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0;
  color: var(--ink);
}

.section-heading .rule {
  flex: 1;
  height: 1px;
  position: relative;
  top: 1px;
  background: var(--rule2);
}

.index-legend {
  flex: none;
  font-family: var(--font-mono);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 12, "wdth" 88, "wght" 400;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-dim);
  white-space: nowrap;
}

/* ─── sub-labels ─── */
.sub-label {
  margin: 0 0 8px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 100, "wght" 640;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.work-rows + .sub-label,
.list-rows + .sub-label,
.press-outlet-line + .sub-label { margin-top: 24px; }

/* ─── work rows: writing + speaking, with 128×72 thumbnail ───
   Row = 12 pad + 72 art + 12 pad = 96px (12 cells) regardless of title length. */
.work-rows { box-shadow: inset 0 -1px 0 var(--rule); }

/* Top-align (not center) so single-line titles keep their baseline on the
   8px grid — centering a short text block against the 72px thumb would push
   its baseline off-grid. Multi-line titles fill the row, so they're unaffected. */
.work-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 12px 0;
  box-shadow: inset 0 1px 0 var(--rule);
}

.work-copy { flex: 1; min-width: 0; }

.work-title {
  display: block;
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 80, "wght" 560;
  font-size: var(--fs-item);
  line-height: var(--lh-item);
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: pretty;
  transition: color .15s ease;
}

.work-row:hover .work-title,
.work-row:focus-visible .work-title { color: var(--accent); }

.work-meta {
  display: block;
  margin-top: 7px; /* 8 − 1: drops the meta baseline onto grid (row height is thumb-driven) */
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 88, "wght" 400;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-faint);
}

.work-thumb {
  flex: none;
  width: 128px;
  height: 72px;
  overflow: hidden;
  background: var(--rule2);
}

/* Crop policy: every thumbnail fills the 3:2 frame edge to edge, so the
   strip reads as one column of equal cards. Photographs and stills crop
   from the centre; portrait covers crop from the top so the title survives;
   square images (logos, podcast art, label cards) are the one exception:
   scaled to the frame's full height, centred on paper, never cropped. */
.work-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--paper);
  filter: saturate(0.9) contrast(0.96);
}

.work-thumb--portrait img { object-position: center top; }

.work-thumb--square img { object-fit: contain; }

/* ─── plain list rows: full index preview + catalogue pages ───
   Row = 8 pad + 24 line + 8 pad = 40px (5 cells). */
.list-rows { box-shadow: inset 0 -1px 0 var(--rule); }

.list-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0 9px; /* 7+24+9=40 (unchanged); shifts the shared title/meta baseline up 1 onto grid */
  box-shadow: inset 0 1px 0 var(--rule);
  line-height: var(--lh-body);
  transition: color .12s ease;
}

a.list-row:hover,
a.list-row:focus-visible { color: var(--accent); }

.list-title {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
  text-wrap: pretty;
}

a.list-row:hover .list-title,
a.list-row:focus-visible .list-title { color: var(--accent); }

.list-meta {
  flex: none;
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 88, "wght" 400;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-dim);
  white-space: nowrap;
}

.more-link {
  display: inline-block;
  margin-top: 16px;    /* ×8 so the section ends on grid (12 drifted every section +4) */
  line-height: 24px;
  padding-top: 7px;    /* 7+24+1=32; baseline on grid */
  padding-bottom: 1px;
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 80, "wght" 400;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.more-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── past lives, compact (homepage): org · role + date, one line ───
   Row = 12 pad + 24 line + 12 pad = 48px (6 cells). */
.role-lines { box-shadow: inset 0 -1px 0 var(--rule); }

.role-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  box-shadow: inset 0 1px 0 var(--rule);
  line-height: var(--lh-body);
}

.role-line-title { font-size: var(--fs-body); color: var(--ink); }

.role-line-date {
  flex: none;
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 88, "wght" 400;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-dim);
  white-space: nowrap;
}

/* ─── past lives, detailed (about page): line + description note ───
   Group = 12 pad + 24 line + 24 note + 12 pad = 72px (9 cells, 1-line note). */
/* Hairlines only between groups: none above the first or below the last. */
.role-detail + .role-detail { box-shadow: inset 0 1px 0 var(--rule); }

.role-detail .role-line { box-shadow: none; padding-bottom: 0; }

.role-note {
  max-width: 60ch;
  padding: 0 0 12px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-mute);
}

.role-note p + p { margin-top: 8px; } /* ×8: a second paragraph keeps the group on grid */

/* ─── in-the-media outlet line ───
   +4 top / +4 bottom lands the first outlet baseline on grid (lh 32). */
.press-outlet-line {
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 2;
  font-size: var(--fs-body);
  color: var(--ink-soft);
  max-width: 60ch;
}

.press-outlet-line li { display: inline; }

/* Separators are typographic, not accented: they inherit the line's ink,
   like the metadata bullets elsewhere. The accent is reserved for marks
   that mean something (monogram dot, ¶, †, links, current nav). */
.press-outlet-line li + li::before {
  content: " • ";
  color: var(--ink-faint);
}

/* ─── contact ─── */
.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
}

.contact-row p { color: var(--ink-soft); }

/* Inline links inside reading copy: accent colour, upright, a dashed hairline
   underline that turns solid on hover. Offset 3px keeps the dashes clear of
   descenders without adding layout height. */
.page-intro a,
.role-note a,
.bio-copy a,
.text-link {
  color: var(--accent);
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-dot);
  transition: text-decoration-color .15s ease;
}

.page-intro a:hover,
.role-note a:hover,
.bio-copy a:hover,
.text-link:hover { text-decoration-style: solid; text-decoration-color: var(--accent); }

/* ─── bio page ───
   Reading copy in the body face; the headshot sits in a 3:2 frame
   (dimensions from the file) so its height is fixed and the grid holds
   below it. */
.bio-copy {
  max-width: 60ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
}

.bio-copy p + p { margin-top: 16px; }

.headshot {
  margin: 0;
  max-width: 480px;
}

.headshot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--rule2);
}

/* Secondary option: smaller, and spaced 24px below the primary's download link. */
.headshot--secondary { max-width: 288px; }

.more-link + .sub-label { margin-top: 24px; }

/* ─── footer ─── */
footer.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 80px 32px 56px;
  border-top: 1px solid var(--rule2);
}

/* Colophon kept as fine print (not scaled up with the other links). */
.footer-colophon {
  display: flex;
  justify-content: space-between;
  gap: 8px 32px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 88, "wght" 400;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.colophon-left, .colophon-right { flex: 1 1 0; }
.colophon-right { text-align: right; }

@media (max-width: 767px) {
  .footer-colophon { flex-direction: column; }
  .colophon-right { text-align: left; }
}

/* ─── sub-page helpers (writing / about / media / bio / 404) ───
   The Back link floats above the intro, out of flow, with its baseline on
   the monogram's grid line (y=64) so the two read as one row across the
   gutter. The intro's first baseline stays level with the rail name. */
.intro-block { position: relative; }

.back-link {
  position: absolute;
  top: -57px; /* measured: puts the 16/24 Bricolage baseline on y=64, the monogram's line */
  left: 0;
  font-family: var(--font-mono);
  font-variation-settings: "wdth" 80, "wght" 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .15s ease;
}

.back-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.page-intro {
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 320;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: 0;
  color: var(--ink-lead);
  padding-top: 1px;
  padding-bottom: 7px;
}

/* Emphasis inside the standfirst: the variable-font wght axis overrides
   font-weight, so bold has to be set on the axis (same width, heavier). */
.page-intro strong,
.lead-statement strong {
  font-weight: inherit;
  font-variation-settings: "wdth" 100, "wght" 640;
}

/* The intro's first paragraph is the BioRhyme "standfirst" (inherited above);
   any following paragraphs drop to the standard Brygada reading style. */
.page-intro p + p {
  margin-top: 16px;
  font-family: var(--font-body);
  font-variation-settings: normal;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
}

.featured-mark,
.external-mark {
  color: var(--accent);
}

.index-legend .featured-mark,
.index-legend .external-mark {
  font-family: inherit;
  font-optical-sizing: inherit;
  font-variation-settings: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ─── BASELINE-ON-GRID offsets ───
   padding-top lands the FIRST baseline on grid; padding-bottom completes the
   cell so box height stays ×8 and everything below stays aligned. Roles whose
   baseline already lands on grid (lead 24/32, body 16/24) get nothing.
   Lists use a CONTAINER offset: shift the list so its first row baseline lands
   on grid; since every row is ×8, the rest inherit alignment. */
.bo-display { padding-top: 11px; padding-bottom: 5px; }   /* BioRhyme 36/48 · one line, baseline →120 */
.bo-h2 { padding-top: 0; padding-bottom: 8px; }           /* BioRhyme 24/32 · baseline →grid (y=264) */
.bo-label { padding-top: 4px; padding-bottom: 4px; }      /* Bricolage 12/16 */
.bo-list-item { padding-top: 1px; padding-bottom: 7px; }  /* Bricolage 20/24 */
.bo-list-body { padding-top: 3px; padding-bottom: 5px; }  /* Brygada 16/24 · shifts role rows up 1 onto grid */

/* ─── breakpoint: tablet 768–959px ─── */
@media (min-width: 768px) and (max-width: 959px) {
  .sidebar-scroll-layout { grid-template-columns: 288px 1fr; }
  /* Scoped var override shrinks the one-line name so it fits the 208px rail column. */
  .sticky-identity-rail { padding: 56px 32px 48px 48px; --fs-display: 24px; --lh-display: 32px; }
  .scrolling-content-column { padding: 72px 48px 80px 40px; }
  .section-heading { margin: 40px 0 16px; }
  .bo-display { padding-top: 8px; padding-bottom: 0; } /* BioRhyme 24/32 · measured: baseline y=88, box 40 (×8) */
}

/* ─── breakpoint: mobile ≤767px ─── */
@media (max-width: 767px) {
  .sidebar-scroll-layout { grid-template-columns: 1fr; }

  .sticky-identity-rail {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: 32px 24px 0;
    border-right: none;
  }

  /* On mobile the monogram + nav move into the sticky collapse bar below.
     The social row stays in the (now static) rail under the bio, with 8px
     link padding so each target is 32px tall. Row = 16 + 32 = 48. */
  .rail-monogram,
  .site-nav,
  .rail-rule { display: none; }

  /* One column: no monogram row to align with, so Back flows above the
     intro instead of floating up into the bio. 24 line + 16 margin = ×8. */
  .back-link { position: static; display: inline-block; margin-bottom: 16px; }

  .social-links { margin-top: 16px; padding: 0; }
  .social-links a { display: inline-block; padding: 8px 0; }

  .scrolling-content-column { padding: 32px 24px 80px; }

  .section-heading,
  .scrolling-content-column > section:first-of-type .section-heading { margin: 32px 0 16px; }
  .press-outlet-line { line-height: 1.9; }

  footer.page { padding: 24px 24px 32px; }

  /* Collapse bar: monogram (home) + site nav on mobile. A direct grid child
     of the layout (order:-1) so its sticky range spans the full page.
     Bar = 8 pad + 40 link (24 line + 8/8 tap padding) + 8 pad = 56px. */
  .rail-collapse-bar {
    display: flex;
    order: -1;
    position: sticky;
    top: 0;
    z-index: 100;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--paper);
    padding: 8px 24px;
    box-shadow: inset 0 -1px 0 var(--rule2);
  }

  .collapse-monogram {
    padding: 8px 0;
    font-family: var(--font-display);
    font-variation-settings: "wdth" 100, "wght" 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
    color: var(--ink);
    transition: color .15s ease;
  }

  .collapse-links {
    display: flex;
    gap: 16px;
    font-family: var(--font-mono);
    font-variation-settings: "wdth" 80, "wght" 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .collapse-links a {
    padding: 8px 0;
    color: var(--ink);
    transition: color .15s ease;
  }

  .collapse-links a:hover,
  .collapse-links a[aria-current="page"] { color: var(--accent); }
}

/* Narrow phones (≤479px): three 16px nav words plus the monogram overrun a
   320–390px bar, so the bar nav drops to the 12px metadata size on the same
   24px line (bar height unchanged). */
@media (max-width: 479px) {
  .collapse-links { font-size: 12px; letter-spacing: 0.12em; }
}

@media (max-width: 520px) {
  .work-row { gap: 16px; }
  .work-thumb { width: 96px; height: 54px; } /* 3:2 kept, still ×… rows stay ≥ text */
  /* Wrapped rows: the row-gap is zeroed so the metadata's own margin sets the
     rhythm. Metadata always takes a full line, whether or not the title
     wrapped, so a long title and a short one read the same. 8 + 16 = 24 (×8). */
  .list-row,
  .role-line {
    flex-wrap: wrap;
    gap: 0 14px;
  }

  .list-meta,
  .role-line-date {
    width: 100%;
    margin-top: 8px;
  }

  /* Air between the date and the description it belongs to. */
  .role-detail .role-line { padding-bottom: 8px; }
}

/* Small phones (≤359px): the 36px one-line name overruns the column, so scale
   it down to fit. Offset measured (not eyeballed): see DESIGN-SYSTEM.md §4/§8. */
@media (max-width: 359px) {
  .sticky-identity-rail { --fs-display: 30px; --lh-display: 40px; }
  .bo-display { padding-top: 2px; padding-bottom: 6px; } /* BioRhyme 30/40 · measured: baseline y=120, box 48 (×8) */
}