/* ============================================================
   yegge.ai — THE LOGBOOK
   Editorial body in Cormorant Garamond + chrome in JetBrains Mono.
   Oxblood ink on warm paper. Time foregrounded as the spine.

   The landing (index.html) carries `body.page-logbook` and gets the
   full treatment: paper grain, masthead, ribbon, drop cap, ledgers.
   Inner pages (archive, languages, services, hop, bio, work) reuse
   the same typography and palette but stay quieter.
   ============================================================ */

:root {
  /* — Palette — */
  --paper:      #f5ead7;   /* warm cream — saturation bumped 2026-05-27, the old #f6f1e8 read cool/grey under oxblood */
  --paper-deep: #ebdec5;   /* subtle well */
  --paper-soft: #faf2dd;   /* near-paper, for cards */
  --ink:        #1a1814;   /* warm near-black */
  --ink-soft:   #4a4239;   /* secondary body */
  --ink-muted:  #6b6257;   /* labels, dates — darkened 2026-06-02 to clear WCAG AA 4.5:1 on paper/card/deep */
  --ink-faint:  #b3a995;   /* leader dots, ornaments */
  --rule:       #d6cfc1;   /* lines, borders */
  --rule-soft:  #e6dfd0;   /* lighter rule */
  --accent:     #6b1d1d;   /* OXBLOOD */
  --accent-deep:#4d0f10;
  --accent-bg:  #f0e3dc;
  /* Channels split out so nav/press-strip rgba() overlays can be re-tinted in
     dark mode without rewriting every alpha rule. */
  --paper-rgb:        245, 234, 215;
  --press-strip-rgba: rgba(232, 222, 200, 0.7);

  /* — Aliases for legacy class names (do not delete) — */
  --bg: var(--paper);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --text-light: var(--ink-faint);
  --border: var(--rule);
  --border-light: var(--rule-soft);
  --nav-bg: var(--paper);
  --card-bg: var(--paper-soft);
  --accent-dark: var(--accent-deep);

  /* — Type —
     Display: Cormorant Garamond (titles, hero, section headings, pull quotes).
     Body:    Crimson Pro (paragraph copy, list rows, prose). Cardo is the
              named fallback if Crimson Pro fails to load. Cormorant is too
              thin / small-x-height for long-form reading; it stays display-only.
     --font-serif is a legacy alias and now points at --font-display;
     body-text rules in this file are explicit about --font-body. */
  --font-display: 'Cormorant Garamond', 'Adobe Garamond Pro', Garamond, Palatino, 'Times New Roman', serif;
  --font-body:    'Crimson Pro', 'Cardo', 'Adobe Garamond Pro', Garamond, Palatino, 'Times New Roman', serif;
  --font-serif:   var(--font-display);
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;
  --font-sans:    var(--font-display); /* legacy alias */

  /* — Geometry — */
  --max-w: 1100px;
  --max-w-prose: 640px;
  --max-w-narrow: 880px;
  --radius: 2px;
}

/* — Dark theme — warm editorial dark, _desaturated_. Settled values;
   don't drift back to the oven-warm version (`--paper #1a1612 /
   --ink #e8dcc4` was tested and rejected as "baking in an oven").
   Book covers, syntax tokens, and the oxblood essay hero gradient are
   theme-locked and stay as hex literals — they're images / deliberate
   design moments, not palette consumers. Paper grain on the landing
   is dropped in dark mode (light-only flourish). */
[data-theme="dark"] {
  --paper:      #181715;
  --paper-deep: #100f0d;
  --paper-soft: #211f1c;
  --ink:        #e3ddd0;
  --ink-soft:   #b5ae9f;
  --ink-muted:  #928b7c;   /* lifted 2026-06-02 to clear WCAG AA 4.5:1 on dark paper/card */
  --ink-faint:  #58524a;
  --rule:       #36322c;
  --rule-soft:  #27241f;
  --accent:     #d97070;   /* lifted oxblood */
  --accent-deep:#e88787;
  --accent-bg:  #2a1c1c;
  --paper-rgb:        24, 23, 21;
  --press-strip-rgba: rgba(34, 32, 28, 0.7);
}

/* Drop the SVG paper-grain on the landing in dark mode — light-only flourish. */
[data-theme="dark"] body.page-logbook { background-image: none; }

/* ============================================================
   Accessibility utilities
   ============================================================ */
/* Visually hidden, still read by screen readers. Used for the landing-page h1
   the design deliberately keeps out of view, and any label that needs to exist
   for assistive tech without showing on screen. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — first focusable element on every page. Sits off the
   top edge until focused, then drops into the corner so keyboard / screen-reader
   users can jump past the nav. */
.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2000;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Keyboard focus ring — consistent, high-contrast, both themes. Scoped to
   :focus-visible so it only shows for keyboard nav, never on mouse click. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
[data-theme="dark"] :focus-visible {
  outline-color: var(--accent-deep);
}
/* The skip-link's <main> target is focused programmatically; don't ring it. */
main:focus { outline: none; }

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--paper); }

body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
  text-rendering: optimizeLegibility;
}

/* Paper grain — landing only; inner pages stay clean. */
body.page-logbook {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

::selection { background: var(--accent); color: var(--paper); }

img { max-width: 100%; display: block; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ============================================================
   Navigation — turn-of-century masthead chrome
   ============================================================ */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--paper-rgb), 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--rule);
  padding: 0 28px;
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.nav-logo {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--ink);
  text-decoration: none !important;
}
.nav-logo span { color: var(--accent); font-style: normal; }
.nav-logo:hover { color: var(--accent); }
.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); text-decoration: none; }
.nav-cta {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent);
  padding: 6px 14px !important;
  border-radius: 0 !important;
  letter-spacing: 1.5px !important;
}
.nav-cta:hover {
  background: var(--accent) !important;
  color: var(--paper) !important;
  text-decoration: none !important;
}

/* ============================================================
   Page wrappers (legacy)
   ============================================================ */
.page-wrap   { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }
.prose-wrap  { max-width: var(--max-w-prose); margin: 0 auto; padding: 0 28px; }

/* ============================================================
   Hero (legacy) — used by services.html etc.
   ============================================================ */
.hero {
  padding: 80px 28px 64px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6.5vw, 68px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -1.4px;
  color: var(--ink);
  max-width: 760px;
  margin-bottom: 24px;
}
.hero h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
.hero-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 32px;
  font-weight: 400;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--paper);
  padding: 12px 22px;
  border: 1px solid var(--accent);
  border-radius: 0;
  text-decoration: none !important;
  display: inline-block;
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.btn-secondary {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  padding: 12px 0;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ink-faint);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Section utilities (legacy)
   ============================================================ */
.section {
  padding: 64px 28px;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flow-root; /* contain floated .prose-figure children */
}
.section + .section { border-top: 1px solid var(--rule-soft); }
.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin-bottom: 14px;
}
.section-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 560px;
  margin-bottom: 40px;
}
.section-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
}
.section-link:hover { color: var(--accent-deep); text-decoration: none; }
.section-link::after { content: '→'; font-family: var(--font-mono); }

/* ============================================================
   Cards (legacy — used on hop, etc.)
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.card {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card-year {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.card-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 10px;
}
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--accent); }
.card-desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 0;
  margin-top: 14px;
}

/* ============================================================
   Service grid (legacy)
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
}
.service-item {
  padding: 28px;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background 0.15s;
}
.service-item:hover { background: var(--paper-deep); }
.service-icon { font-size: 22px; margin-bottom: 12px; line-height: 1; }
.service-item h3 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.25;
}
.service-item p {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ============================================================
   Customers strip (legacy fallback)
   ============================================================ */
.customers {
  padding: 48px 28px;
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid var(--rule-soft);
}
.customers-label,
.customer-list {
  font-family: var(--font-mono);
}
.customers-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.customer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: center;
  align-items: center;
}
.customer-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.2px;
}

/* ============================================================
   Page header (inner pages)
   ============================================================ */
.page-header {
  padding: 64px 28px 48px;
  max-width: var(--max-w);
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
.page-header .section-label { margin-bottom: 14px; }

/* History header: photo floated right of the intro copy. */
.history-header { overflow: hidden; }
.history-header-photo {
  float: right;
  width: clamp(180px, 32%, 300px);
  margin: 6px 0 18px 32px;
}
.history-header-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 28px rgba(26, 24, 20, 0.1);
}
.history-header-photo figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-align: center;
}
@media (max-width: 600px) {
  .history-header-photo { float: none; width: 100%; margin: 0 0 24px; }
}
/* Services header: Ghost Track mark floated right of the intro copy
   (brand emblem, not a photo — no border/shadow card). */
.history-header-mark {
  float: right;
  width: clamp(120px, 22%, 160px);
  margin: 4px 0 18px 36px;
  display: flex;
  justify-content: center;
}
.history-header-mark .ghosttrack-lp { width: 104px; height: 104px; }
@media (max-width: 600px) {
  /* Stay floated right on narrow screens too (don't stack on top); compact the
     record + wordmark so the intro copy keeps a usable column beside it. */
  .history-header-mark { width: 116px; margin: 2px 0 10px 18px; }
  .history-header-mark .ghosttrack-lp { width: 80px; height: 80px; }
  .history-header-mark .ghosttrack-wordmark-text { font-size: 11px; letter-spacing: 1.5px; white-space: nowrap; }
}
/* Services "Why it works": stage photo floated right of the prose. */
.why-figure {
  float: right;
  width: clamp(220px, 42%, 380px);
  margin: 4px 0 20px 32px;
}
.why-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 28px rgba(26, 24, 20, 0.1);
}
.why-figure figcaption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 8px;
  text-align: right;
}
@media (max-width: 600px) {
  .why-figure { float: none; width: 100%; margin: 0 0 24px; }
  .why-figure figcaption { text-align: left; }
}
.page-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 16px;
}
.page-title-sigil {
  display: inline-block;
  width: 80px;
  height: 80px;
  vertical-align: middle;
  margin-right: 18px;
  margin-bottom: 6px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
@media (max-width: 720px) {
  .page-title-sigil { width: 56px; height: 56px; margin-right: 12px; }
}
.page-header p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 580px;
}
.page-header p + p { margin-top: 14px; }

/* ============================================================
   Essay list (languages.html etc.)
   ============================================================ */
.essay-list { list-style: none; }
.essay-list.meta-lens .essay-item { grid-template-columns: 1fr; gap: 4px; }
.lens-subgroup-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  margin: 32px 0 0;
}
.lens-subgroup-title:first-child { margin-top: 0; }
.essay-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: baseline;
}
.essay-year {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 1.5px;
  padding-top: 6px;
}
.essay-content h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 8px;
}
.essay-content h3 a { color: var(--ink); text-decoration: none; }
.essay-content h3 a:hover { color: var(--accent); }
.essay-content p {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 4px;
}
.essay-content .outcome {
  color: var(--accent);
  font-style: italic;
  margin-top: 4px;
}
/* Predictions scorecard (predictions.html) — the verdict glyph (✓ landed /
   ◐ partial / ✗ missed) sits under the year in the left column and is the
   page's one structural flourish; kept monochrome oxblood for restraint, the
   shape alone carries the verdict. The call itself renders as an italic quote
   above the outcome line. */
.essay-year .scorecard-mark {
  display: block;
  font-size: 19px;
  letter-spacing: 0;
  margin-top: 7px;
}
.essay-content .scorecard-quote {
  font-style: italic;
}
.essay-content .meta-links {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 8px;
}
.essay-content .meta-links a { color: var(--ink-soft); border-bottom: 1px solid var(--ink-faint); }
.essay-content .meta-links a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.essay-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ============================================================
   Service detail (services page)
   ============================================================ */
.service-detail { padding: 48px 0; border-bottom: 1px solid var(--rule-soft); }
.service-detail:first-child { padding-top: 0; }
.service-detail h2 {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.service-detail h2 .service-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-bg);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.service-detail p {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 12px;
}
.service-detail p:last-child { margin-bottom: 0; }

/* Alternating image/text rows. Mobile: text first, then photo (heading
   visible up top). Desktop: 2-up grid, odd rows = text left / photo right,
   even rows = photo left / text right. */
.service-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.service-photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.service-photo-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-photo-item figcaption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.5;
  text-align: center;
}
/* Descriptive (full-sentence) captions read as serif prose, not mono labels. */
.service-photo-item figcaption.is-prose {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  font-style: italic;
  line-height: 1.45;
}
.service-photo-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-photo-img--placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      var(--paper-soft) 0 12px,
      var(--paper-deep) 12px 24px
    );
}
.service-photo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-photo-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper);
  padding: 5px 12px;
  border: 1px solid var(--rule);
  text-align: center;
}

@media (min-width: 760px) {
  .service-detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  /* On even-numbered service-detail rows, swap so the photo goes left. */
  .service-list .service-detail:nth-of-type(even) .service-photo {
    order: -1;
  }
}

/* ============================================================
   HOP doc cards
   ============================================================ */
.hop-doc {
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 16px;
  background: var(--paper);
}
.hop-doc:hover { border-color: var(--accent); }
.hop-doc-author {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 8px;
}
.hop-doc h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.25;
}
.hop-doc h3 a { color: inherit; text-decoration: none; }
.hop-doc h3 a:hover { color: var(--accent); }
.hop-doc p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* ============================================================
   Bio
   ============================================================ */
.bio-photo-placeholder {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--paper-deep);
  border: 2px dashed var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 32px;
  text-align: center;
  line-height: 1.4;
}
.bio-body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink);
  max-width: var(--max-w-prose);
}
.bio-body p { margin-bottom: 22px; }
.bio-body p:last-child { margin-bottom: 0; }

/* ============================================================
   Work index
   ============================================================ */
.work-group { margin-bottom: 48px; }
.work-group-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
.work-entry {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.work-year {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 1px;
}
.work-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.work-title a { color: inherit; text-decoration: none; }
.work-title a:hover { color: var(--accent); }
.work-venue {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.work-note {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  font-style: italic;
  grid-column: 2;
  padding-top: 2px;
}

/* ============================================================
   Coverage page — cover thumbnail beside each impact note,
   to break up the otherwise text-only work-groups.
   ============================================================ */
.coverage-flex {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  margin-top: 18px;
}
.coverage-thumbs {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coverage-thumb {
  display: block;
  width: 132px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.coverage-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
}
.coverage-thumb img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.coverage-text { flex: 1 1 auto; min-width: 0; }
.coverage-text .work-note:first-child { padding-top: 0; }

@media (max-width: 640px) {
  .coverage-flex { gap: 16px; }
  .coverage-thumbs { flex-direction: row; }
  .coverage-thumb { width: 88px; }
}

/* ============================================================
   Podcast entries — host-forward variant of work-entry.
   Used on podcasts.html where the episode title is generic but
   the host name is the actual draw. Screenshot slot on the left.
   ============================================================ */
.podcast-entry {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.podcast-thumb {
  aspect-ratio: 16 / 9;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.podcast-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.podcast-thumb-placeholder {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.podcast-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.podcast-meta-sep {
  margin: 0 8px;
  opacity: 0.5;
}
.podcast-host {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 14px;
}
.podcast-host--tbd {
  font-style: italic;
  color: var(--ink-muted);
  font-size: 24px;
}
.podcast-title {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 10px;
  line-height: 1.4;
}
.podcast-title a { color: var(--accent); text-decoration: none; }
.podcast-title a:hover { text-decoration: underline; }
.podcast-note {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}
.podcast-note a { color: var(--accent); }

@media (max-width: 720px) {
  .podcast-entry {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .podcast-thumb { max-width: 360px; }
  .podcast-host { font-size: 24px; }
}

/* ============================================================
   Talk entries — title-forward variant of work-entry.
   Used on talks.html where the title IS the draw. Same 2-col
   layout as .podcast-entry; title gets the big-serif slot
   instead of the host. Venue + date sit in a mono eyebrow.
   ============================================================ */
.talk-entry {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.talk-thumb {
  aspect-ratio: 16 / 9;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.talk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.talk-thumb-placeholder {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
  padding: 0 12px;
}
.talk-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.talk-eyebrow-sep {
  margin: 0 8px;
  opacity: 0.5;
}
.talk-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--ink);
}
.talk-title a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.talk-title a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.talk-byline {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-muted);
  margin: -8px 0 14px;
}
.talk-note {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}
.talk-note a { color: var(--accent); }

@media (max-width: 720px) {
  .talk-entry {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .talk-thumb { max-width: 360px; }
  .talk-title { font-size: 24px; }
}

/* ============================================================
   Video grid — YT-thumbnail tiles for music.html.
   3 columns desktop, 2 tablet, 1 mobile. 16:9 poster + caption.
   ============================================================ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 22px;
  margin: 16px 0 8px;
}
.video-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.video-tile:hover .video-thumb {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26, 24, 20, 0.18);
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin: 10px 0 2px;
  line-height: 1.25;
}
.video-tile:hover .video-title { color: var(--accent); }
.video-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
@media (max-width: 920px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Music arrangements catalog (music.html, below the video grid).
   Each .music-row is a piece. Title + meta line + optional note +
   a row of small pill links to artifacts (video / score / .ly /
   midi). Paganini's expanded caprice list reuses .music-pill in
   a denser .music-caprices row.
   ============================================================ */
.music-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.music-row-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.music-star {
  color: #c8941f;
  font-size: 0.85em;
  margin-left: 6px;
  vertical-align: 2px;
}
.music-row-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 4px 0 0;
}
.music-row-meta em { font-style: italic; text-transform: none; letter-spacing: 0.4px; }
.music-row-note {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink-soft);
  font-style: italic;
  margin: 6px 0 0;
}
.music-audio {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 10px 0 0;
  height: 36px;
}
.music-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 10px 0 0;
}
.music-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  padding: 4px 10px;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.music-pill:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.music-pill--video {
  color: var(--accent);
  border-color: var(--accent);
}
.music-pill--video:hover {
  background: var(--accent);
  color: var(--paper);
}
.music-caprices {
  margin: 10px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--rule);
}
.music-caprices-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 6px;
}
.music-caprices-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.music-caprice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--rule);
  padding: 4px 8px 5px;
  min-width: 34px;
}
.music-caprice:hover {
  border-color: var(--accent);
}
.music-caprice-n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  text-align: center;
}
.music-caprice-n:hover { color: var(--accent); }
.music-caprice-fmt {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  line-height: 1.3;
}
.music-caprice-fmt:hover { color: var(--accent); }
.music-movement {
  margin: 8px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--rule);
}
.music-movement-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0;
}
.music-movement .music-links { margin-top: 4px; }

/* ============================================================
   Transcripts — the curated Stevey's Tech Talk page (.tx-*, stt.html)
   and the standalone companion transcript pages (.transcript-*,
   transcript.njk under base.njk). Both inherit the palette + dark
   theme from this file. See CLAUDE.md / TRANSCRIPTS.md "The
   Transcript Program".
   ============================================================ */
/* --- curated picks list (stt.html) --- */
.tx-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.tx-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.tx-row-ep {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  padding-top: 4px;
}
.tx-row-title {
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
}
a.tx-row-title:hover { color: var(--accent); }
.tx-row-blurb {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 5px 0 0;
  max-width: 56ch;
}
.tx-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
  padding-top: 3px;
}
.tx-row-watch,
.tx-row-read {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  text-decoration: none;
  color: var(--ink-soft);
}
.tx-row-watch:hover,
.tx-row-read:hover { color: var(--accent); }
.tx-row-read { color: var(--accent); }
.tx-row-soon {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-soft);
  opacity: 0.7;
}
/* The two feature rows (the Atwood interview + the Emacs screencast) carry a
   filled chip and a thin accent rail in the left margin, to set them apart from
   the four solo monologues. The negative margin + matching padding keeps the row
   content aligned with the plain rows while the rail sits out in the margin. */
.tx-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--paper);
  background: var(--accent);
  border-radius: 2px;
  padding: 2px 7px;
  margin-bottom: 8px;
}
.tx-row--feature {
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  margin-left: -16px;
}
@media (max-width: 600px) {
  .tx-row { grid-template-columns: 40px 1fr; }
  .tx-row-meta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
  }
}

/* --- stt.html page chrome: hero card + neon sign-off ---
   The two STT show assets. Both are deliberate, theme-locked colour
   moments (a TV-show carve-out from the Logbook restraint, like
   gastown's illustration budget) — the dark sign-off band is a night
   "wall" the transparent neon sign glows against, so it keeps its dark
   backdrop in light mode too. */
.stt-head {
  display: flex;
  align-items: center;
  gap: 40px;
}
.stt-head-text { flex: 1 1 auto; min-width: 0; }
.stt-head-text p:last-child { margin-bottom: 0; }
.stt-hero {
  flex: 0 0 auto;
  width: 38%;
  max-width: 420px;
  margin: 0;
  padding: 0;
}
.stt-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 44px rgba(0, 0, 0, 0.34);
}
@media (max-width: 760px) {
  .stt-head { flex-direction: column; align-items: stretch; gap: 28px; }
  .stt-hero { width: 100%; max-width: none; }
}
.stt-signoff {
  background: #0a0c12; /* theme-locked night backdrop for the neon */
  text-align: center;
  padding: 76px 28px 80px;
  margin-top: 8px;
}
.stt-neon {
  width: min(360px, 72vw);
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 0 26px rgba(86, 184, 255, 0.4));
}
.stt-signoff-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin: 26px 0 0;
}

/* --- companion page (transcript.njk, rendered under base.njk) --- */
/* Match the essay-canonical reading column (--max-w-narrow) so the
   transcript's side margins line up with the essay pages. */
.page-header.transcript-head { max-width: var(--max-w-narrow); }
.section.transcript-section { max-width: var(--max-w-narrow); }
.transcript-head {
  display: flex;
  align-items: center;
  gap: 36px;
}
.transcript-head-text { flex: 1 1 auto; min-width: 0; }
.transcript-head-text .transcript-meta { margin-bottom: 0; }
.transcript-mark {
  flex: 0 0 auto;
  width: 210px;
  max-width: 32%;
  align-self: center;
  line-height: 0;
}
.transcript-mark img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
  .transcript-head { gap: 20px; }
  .transcript-mark { width: 120px; }
}
.transcript-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.transcript-video { margin: 0 0 24px; }
.transcript-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
}
.transcript-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.transcript-video-link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.transcript-video-link:hover { text-decoration: underline; }
.transcript-disclaimer {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  margin: 0 0 36px;
}
.transcript-body .transcript-p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.72;
  color: var(--ink);
  margin: 0 0 20px;
}
.transcript-speaker {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-right: 4px;
}
.transcript-foot {
  margin: 48px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
}
.transcript-foot a { color: var(--ink-soft); text-decoration: none; }
.transcript-foot a:hover { color: var(--accent); }

/* ============================================================
   Callout (HOP, etc.)
   ============================================================ */
.callout {
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  padding: 22px 28px;
  margin: 32px 0;
}
.callout p {
  font-family: var(--font-body);
  font-size: 19px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.65;
}
.callout cite {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 10px;
  font-style: normal;
}

/* ============================================================
   Tile grid (archive page) — kept structurally the same;
   restyled to fit The Logbook palette.
   ============================================================ */
.tile-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.tile { list-style: none; }
.tile > a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 26px 24px 28px;
  background: var(--paper);
  text-decoration: none !important;
  color: inherit;
  transition: background 0.15s;
}
.tile > a:hover { background: var(--paper-deep); }
.tile > a:hover .tile-title { color: var(--accent); }
.tile-icon { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.tile-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.3px;
  transition: color 0.15s;
}
.tile-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ============================================================
   Atlas page (atlas.html) — featured row + categorized index.
   Featured row reuses .featured-grid / .featured-entry from the
   landing; the --four variant flips to a 4-up at desktop.
   ============================================================ */
.archive-featured {
  /* Reuse landing .featured padding/margin defaults but tighten the
     top so it sits closer to the page header. */
  padding-top: 24px;
  border-top: none;
}
.archive-featured .featured-inner { max-width: var(--max-w); }
.featured-grid--four {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 920px) {
  .featured-grid--four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .featured-grid--four { grid-template-columns: 1fr; }
}

.archive-index {
  padding: 40px 28px 80px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.archive-index-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.archive-group { }
.archive-group-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archive-list li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px dotted var(--rule);
  align-items: baseline;
}
.archive-list li:last-child { border-bottom: none; }
.archive-list a {
  text-decoration: none;
  border-bottom: none;
}
.archive-list-name {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.2px;
  transition: color 0.15s;
}
.archive-list a:hover .archive-list-name {
  color: var(--accent);
}
.archive-list-dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .archive-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .archive-list-name { font-size: 19px; }
  .archive-index { padding: 32px 22px 60px; }
}

/* ============================================================
   ============================================================
                    LANDING — THE LOGBOOK
   ============================================================
   ============================================================ */

/* — Top-of-page press strip (links into press.html) — */
.press-strip {
  border-bottom: 1px solid var(--rule);
  background: var(--press-strip-rgba);
  padding: 22px 28px 10px;
  text-align: center;
  /* sits below the sticky nav */
  position: relative;
  z-index: 5;
}
.press-strip-inner {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
  align-items: baseline;
  max-width: var(--max-w);
}
.press-strip-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 6px;
}
.press-strip-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.press-strip-name:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}
.press-strip-divider {
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 12px;
}
.press-strip-divider--end { color: var(--ink-faint); }
.press-strip-all {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin-left: 4px;
}
.press-strip-all:hover { color: var(--accent-deep); }
.press-strip-all::after { content: " →"; }

/* — Masthead (replaces the legacy hero on index.html) — */
.masthead {
  padding: 64px 28px 48px;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.masthead-inner { max-width: 760px; margin: 0 auto; }

.masthead-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.masthead-eyebrow::before,
.masthead-eyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--ink-faint);
}

.masthead-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(58px, 10vw, 108px);
  line-height: 0.92;
  letter-spacing: -2.4px;
  color: var(--ink);
  margin-bottom: 32px;
  font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1;
}
.masthead-name-given {
  font-style: italic;
  font-weight: 400;
  display: block;
  font-size: 0.46em;
  color: var(--ink-soft);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.masthead-name-family {
  display: block;
  font-weight: 600;
}

/* — Thesis — */
.masthead-thesis {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.4;
  color: var(--ink);
  max-width: 600px;
  margin: 0 auto;
}
/* — Profile block (portrait + Beck pull-quote) — */
.profile-block {
  padding: 24px 28px 64px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.profile-block-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}
.profile-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* portrait-photo wrapper: oversized img translated within an
   overflow-hidden circle to keep the head where we want it. */
.portrait-photo {
  width: 156px;
  height: 156px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow:
    0 0 0 6px var(--paper),
    0 0 0 7px var(--rule),
    0 12px 28px rgba(26, 24, 20, 0.08);
  flex-shrink: 0;
  position: relative;
  background: var(--paper-deep);
}
.portrait-photo img {
  position: absolute;
  height: 200px;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  filter: sepia(0.06) contrast(1.02);
}

.profile-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  display: inline-flex;
  gap: 6px;
}
.profile-meta-key { color: var(--ink-faint); }
.profile-meta-val { color: var(--ink-soft); }

.profile-quote { font-family: var(--font-body); margin: 0; }
.profile-quote-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.profile-quote-rule::before,
.profile-quote-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.profile-quote-body {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 18px;
  text-indent: -0.42em;
}
.profile-quote-body::before { content: "\201C"; }
.profile-quote-body::after  { content: "\201D"; }
.profile-quote-attrib {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

/* — Wyvern marks — */
.wyvern-mark {
  display: inline-block;
  user-select: none;
}
.wyvern-mark--ornament {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.85;
  filter: sepia(0.2) saturate(0.9);
}
.wyvern-mark--footer {
  width: 36px;
  height: 36px;
  opacity: 0.75;
  filter: sepia(0.3) saturate(0.85);
  margin-bottom: 4px;
}

/* — Ghost Track LP mark (customer pull-quote ornament) — */
.lp-mark {
  display: inline-block;
  user-select: none;
}
.lp-mark--ornament {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* — Ghost Track wordmark (landing footer): LP mark + typeset name — */
.ghosttrack-mark {
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.ghosttrack-mark--footer {
  gap: 9px;
  margin-bottom: 4px;
}
.ghosttrack-mark--footer .ghosttrack-lp {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0.9;
}
.ghosttrack-wordmark-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Stacked variant for the history page — record floating above the wordmark,
   no card / white background. */
.ghosttrack-mark--resume {
  flex-direction: column;
  gap: 12px;
}
.ghosttrack-mark--resume .ghosttrack-lp {
  width: 88px;
  height: 88px;
  max-height: none;
  flex-shrink: 0;
}
.ghosttrack-mark--resume .ghosttrack-wordmark-text {
  font-size: 14px;
  letter-spacing: 3px;
}

/* — Narrative — */
.narrative {
  padding: 40px 28px 72px;
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--rule-soft);
}
.narrative-inner {
  max-width: var(--max-w-prose);
  margin: 0 auto;
}
.narrative-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin: 16px 0 36px;
}
.narrative-label::before,
.narrative-label::after {
  content: "❦";
  margin: 0 14px;
  color: var(--ink-faint);
  font-size: 13px;
  vertical-align: 1px;
}
.narrative-body p {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 22px;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}
.narrative-body p:last-child { margin-bottom: 0; }
.narrative-body em { font-style: italic; }

.drop-cap {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 5.4em;
  line-height: 0.85;
  float: left;
  margin: 0.04em 0.08em -0.04em -0.02em;
  color: var(--accent);
  text-shadow: 1px 1px 0 var(--paper-deep);
  font-feature-settings: 'liga' 1, 'dlig' 1;
}

/* — Featured (three receipts) — */
.featured {
  padding: 64px 28px 56px;
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.featured-inner { max-width: 920px; margin: 0 auto; }
.featured-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: 32px;
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
/* Six-tile variant: two rows of three (landing showcase). */
.featured-grid--six {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) {
  .featured-grid--six { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .featured-grid--six { grid-template-columns: 1fr; }
}
.featured-entry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px 32px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-decoration: none !important;
  color: inherit;
  background: transparent;
  transition: background 0.18s;
}
.featured-entry:last-child { border-right: 1px solid var(--rule); }
.featured-entry:hover {
  background: var(--paper-deep);
}
.featured-entry:hover .featured-entry-title { color: var(--accent); }
.featured-entry:hover .featured-entry-cont { color: var(--accent); }

.featured-entry-marker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
}
.featured-entry-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--ink);
  transition: color 0.15s;
}
.featured-entry-dek {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  flex: 1;
}
.featured-entry-dek em { font-style: italic; }
.featured-entry-cont {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 8px;
  transition: color 0.15s;
}

/* Tile thumbnail (showcase six-up grid). Image sits at the top of the
   tile, top-centered, with natural aspect ratio inside a fixed height
   slot. Text is centered beneath. */
.featured-entry--thumb {
  padding: 26px 22px 28px;
  gap: 14px;
  text-align: center;
  align-items: center;
}
.featured-entry-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  margin-bottom: 6px;
}
.featured-entry-thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.featured-entry--thumb:hover .featured-entry-thumb img {
  transform: scale(1.03);
}
.featured-entry--thumb .featured-entry-title {
  font-size: 24px;
  letter-spacing: -0.4px;
}
.featured-entry--thumb .featured-entry-dek {
  font-size: 15px;
  line-height: 1.5;
  flex: 0 0 auto;
}
.featured-entry--thumb .featured-entry-cont {
  margin-top: auto;
}

/* — Friend figures (friends.html, per-org logo) — */
.friend-figure {
  margin: 0 0 18px 0;
}
.friend-figure--right {
  float: right;
  margin: 4px 0 18px 28px;
  max-width: 200px;
}
.friend-figure img {
  display: block;
  max-height: 80px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 640px) {
  .friend-figure--right { float: none; margin: 0 0 18px 0; max-width: 100%; }
}

/* — Code overview figures (code.html, per-project) — */
.code-figure {
  margin: 0 0 18px 0;
  max-width: 260px;
}
.code-figure--right {
  float: right;
  margin: 4px 0 18px 28px;
}
.code-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  box-shadow: 0 8px 20px rgba(26, 24, 20, 0.07);
}
.code-figure figcaption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 10px;
  text-align: center;
}
@media (max-width: 640px) {
  .code-figure--right { float: none; margin: 0 0 18px 0; max-width: 100%; }
}

/* — Stage photo (landing, between featured and customers ledger) — */
.stage-photo {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 8px 28px 56px;
}
.stage-photo-frame {
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  box-shadow: 0 12px 28px rgba(26, 24, 20, 0.08);
  overflow: hidden;
}
.stage-photo--half .stage-photo-frame { max-width: 460px; }
.stage-photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.04) contrast(1.02);
}
.stage-photo-caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 14px;
}
.stage-photo-caption-key { color: var(--ink-muted); }
.stage-photo-caption-val { color: var(--ink-soft); margin-left: 8px; }

@media (max-width: 720px) {
  .stage-photo { padding: 4px 18px 40px; }
}

/* — Ledger (customers, press) — */
.ledger {
  padding: 56px 28px;
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--rule-soft);
}
.ledger-inner { max-width: 720px; margin: 0 auto; }
.ledger-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.ledger-label::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.ledger-list { list-style: none; }
.ledger-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
}
.ledger-list-name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.1px;
  order: 0;
  flex-shrink: 0;
}
a.ledger-list-name {
  border-bottom: 1px solid var(--ink-faint);
  transition: color 0.15s, border-color 0.15s;
}
a.ledger-list-name:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}
.ledger-list li::after {
  content: "";
  flex: 1;
  border-bottom: 1px dotted var(--ink-faint);
  align-self: end;
  margin-bottom: 8px;
  order: 1;
  min-width: 24px;
}
.ledger-list-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
  order: 2;
  flex-shrink: 0;
}

/* — Customer logo grid (landing only) — */
.customer-row {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 56px 64px;
  padding: 8px 0 4px;
  margin: 0;
}
.customer-row--secondary {
  gap: 48px 56px;
}
.ledger-label--second {
  margin-top: 40px;
}
.customer {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  /* override .ledger-list li styles */
}
.customer::after { display: none; }
.customer-mark {
  height: 36px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: grayscale(0.25) contrast(1.02);
  opacity: 0.86;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.customer:hover .customer-mark {
  opacity: 1;
  filter: grayscale(0) contrast(1);
}
.customer-mark--icon {
  height: 32px;
  width: 32px;
}
.customer-mark--inline {
  /* inline currentColor SVG (e.g. Tessl) — picks up the theme ink in both modes */
  color: var(--ink);
  width: auto;
}
.customer-mark--tall {
  height: 44px;
}
.customer-name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.1px;
}

/* — Closing — */
.closing {
  padding: 72px 28px 96px;
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.closing-inner { max-width: 560px; margin: 0 auto; }
.closing-mark {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--ink-faint);
  margin-bottom: 24px;
  font-weight: 400;
  line-height: 1;
}
.closing-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.5;
  color: var(--ink);
}
.closing-link {
  font-style: normal;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.closing-link:hover {
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  border-color: var(--accent);
}

/* ============================================================
   Footer (used by all pages; landing also gets the wyvern mark)
   ============================================================ */
footer {
  margin-top: 0;
  border-top: 1px solid var(--rule);
  padding: 52px 28px 56px;
  background: var(--paper);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}
/* Circle-back line — a quiet archive→consulting pointer above the footer nav.
   Set apart from the chrome below by a hairline rule; understated by design. */
.footer-circleback {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink-faint);
}
.footer-circleback a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.footer-circleback a:hover { color: var(--accent-deep); }
.footer-logo {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.3px;
}
.footer-logo span { color: var(--accent); font-style: normal; }
.footer-logo:hover { color: var(--accent); text-decoration: none; }
.footer-links {
  display: flex;
  gap: 22px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--accent); text-decoration: none; }
.footer-copy,
.footer-colophon {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.2px;
  color: var(--ink-faint);
}
.footer-colophon .colophon-face {
  color: var(--ink-soft);
  font-weight: 500;
}

/* Theme toggle — small monospace button in the footer. Light/dark are
   persisted in localStorage; `prefers-color-scheme` is the initial default.
   See base.njk for the pre-paint <script> that sets [data-theme] before
   first paint so the page doesn't flash. */
.theme-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
   Press strip (legacy — kept for backwards compat with any page
   that still uses .press / .press-name; landing now uses .ledger)
   ============================================================ */
.press {
  padding: 48px 28px;
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid var(--rule-soft);
}
.press-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.press-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: center;
  align-items: center;
}
.press-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.2px;
}
a.press-link { transition: color 0.15s; border-bottom: 1px solid var(--ink-faint); }
a.press-link:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* ============================================================
   Highlight cards (legacy — used previously on landing; now
   replaced by .featured-grid. Kept for backwards compat.)
   ============================================================ */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.highlight-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
a.highlight-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.highlight-card--placeholder { border-style: dashed; background: var(--paper-soft); }
.highlight-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--accent);
}
.highlight-card h3 {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--ink);
  line-height: 1.2;
}
.highlight-card p:last-child {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ============================================================
   Press page (press.html)
   Card-list of citations — outlet, date, paywall, summary,
   optional pull-quote, link out.
   ============================================================ */
.press-list {
  list-style: none;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
}
.press-card {
  padding: 36px 0 40px;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 80px;
}
.press-card:last-child { border-bottom: none; }
.press-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--rule);
}
.press-card-outlet {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.2px;
}
.press-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.press-card-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin: 6px 0 14px;
  letter-spacing: -0.3px;
}
.press-card-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.press-card-title a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.press-card-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 14px;
  max-width: 620px;
}
.press-card-body--note {
  font-style: italic;
  font-size: 15px;
  color: var(--ink-muted);
}
.press-card-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  margin: 14px 0 18px;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--accent);
  max-width: 620px;
}
.press-card-byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.press-card-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  margin-right: 22px;
  margin-top: 6px;
}
.press-card-link:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
  text-decoration: none;
}
.press-card-link--secondary {
  color: var(--ink-muted);
  border-bottom-color: var(--ink-faint);
}
.press-card-link--secondary:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* — Pending / forthcoming list at the bottom — */
.press-pending {
  max-width: var(--max-w-narrow);
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.press-pending-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.press-pending ul {
  list-style: none;
}
.press-pending li {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
  padding: 4px 0;
}


/* ============================================================
   Book page (vibe-coding.html)
   Hero with stylised cover + gold medal, then editorial sections
   for about / press / talks / workshops / companion.
   ============================================================ */
.book-hero {
  padding: 32px 28px 56px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.book-hero-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  align-items: start;
  max-width: 880px;
  margin: 0 auto;
}

/* — Book cover — real image in a 2:3 frame with subtle book shadow — */
.book-cover {
  display: block;
  width: 240px;
  aspect-ratio: 2 / 3;
  border-radius: 2px 4px 4px 2px;
  overflow: hidden;
  text-decoration: none !important;
  background: var(--paper-deep);
  box-shadow:
    -1px 0 0 rgba(0,0,0,0.18) inset,
    8px 18px 32px rgba(26, 24, 20, 0.22),
    1px 0 0 rgba(0,0,0,0.30);
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.book-cover:hover {
  transform: translateY(-2px) rotate(-0.4deg);
  box-shadow:
    -1px 0 0 rgba(0,0,0,0.18) inset,
    10px 22px 38px rgba(26, 24, 20, 0.28),
    1px 0 0 rgba(0,0,0,0.30);
  text-decoration: none;
}
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-meta {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 6px;
}

/* — Gold medal callout — */
.medal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 8px 16px 8px 8px;
  background: linear-gradient(140deg, #f5e4a8 0%, #e0bf60 50%, #b58a2c 100%);
  color: #4a3008;
  border-radius: 999px;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(120, 80, 0, 0.25) inset,
    0 2px 6px rgba(120, 80, 0, 0.22);
}
.medal-disc {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff0c0, #d6a93a 70%, #8a5d12 100%);
  color: #4a3008;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 rgba(80, 50, 0, 0.45) inset,
    0 1px 3px rgba(0,0,0,0.18);
}
.medal-text {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
}
.medal-line-1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.2px;
  font-style: italic;
}
.medal-line-2 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6b4d12;
}

.medal-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.medal--silver {
  background: linear-gradient(140deg, #f4f4f4 0%, #c6c6c6 50%, #8c8c8c 100%);
  color: #2a2a2a;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 rgba(60, 60, 60, 0.25) inset,
    0 2px 6px rgba(60, 60, 60, 0.22);
}
.medal--silver .medal-disc {
  background: radial-gradient(circle at 30% 28%, #ffffff, #c0c0c0 70%, #6e6e6e 100%);
  color: #2a2a2a;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -1px 0 rgba(40, 40, 40, 0.45) inset,
    0 1px 3px rgba(0,0,0,0.18);
}
.medal--silver .medal-line-2 {
  color: #4a4a4a;
}

.book-meta-blurb {
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  margin: 0;
}

/* Variant (`quoteInMeta`): pull quote sitting in the cover-side column where
   the blurb normally goes. Display italic, oxblood left rule like the epigraph. */
.book-meta-quote {
  margin: 0;
}
.book-meta-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 27px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 12px;
  padding-left: 22px;
  border-left: 3px solid var(--accent);
}
.book-meta-quote figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-left: 25px;
}
.book-meta-quote figcaption a { color: var(--accent); }
.book-meta-quote figcaption a:hover { color: var(--accent-deep); text-decoration: underline; }

.book-buy {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.book-meta-isbn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.listing-provenance {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 10px 0 0;
}
.listing-provenance a {
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule);
}
.listing-provenance a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* — "Where it was argued" — external discussion threads (HN / Reddit / …) — */
.discussion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.discussion-item {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}
.discussion-item:last-child {
  border-bottom: none;
}
.discussion-item a {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.discussion-item a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.discussion-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: 6px;
}
.discussion-note {
  color: var(--ink-muted);
}

/* — Book sections (about / press / talks / workshops / companion) — */
.book-section {
  padding: 64px 28px;
  border-top: 1px solid var(--rule);
}
.book-section--alt { background: var(--paper-deep); }
/* `quoteInMeta` variant: the metadata hero takes the alt box (alternation
   shifted up one — see listing.njk). */
.book-hero--alt {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
}
.book-section--companion { padding: 40px 28px; background: transparent; }
.book-section-inner {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
}
.section-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 22px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.section-heading::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.book-section-meta {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-muted);
  line-height: 1.55;
  margin-bottom: 26px;
  max-width: 640px;
}
.book-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.book-prose p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 18px;
  max-width: 620px;
}
.book-prose p:last-child { margin-bottom: 0; }
/* Inline code in book-prose (AI Notes, author notes). No rule existed, so it
   fell back to a full 1em monospace that towered over the 19px serif; 0.8em
   matches x-heights, same as the essay-body rule. */
.book-prose code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  background: var(--paper-deep);
  padding: 1px 2px; /* tight horizontal padding — see .essay-body code note */
  border-radius: 3px;
}

/* Floated figure inside .book-prose — drops a small image into the
   right margin alongside the 620px prose column. The :has() rule
   constrains .book-prose only when a figure is present, so the
   image sits close to the prose instead of out at the page edge. */
.book-prose:has(.prose-figure) { max-width: 900px; }

.prose-figure {
  margin: 0 0 18px 28px;
  max-width: 240px;
}
.prose-figure--right { float: right; clear: right; }
.prose-figure--left  { float: left;  clear: left;  margin: 0 28px 18px 0; }
.prose-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  box-shadow: 0 6px 14px rgba(26, 24, 20, 0.08);
  background: var(--paper-deep);
}
.prose-figure figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.5;
}
.prose-figure--portrait { max-width: 220px; }
.prose-figure--tall { max-width: 150px; }

/* — Press reproduction spread: scan on the left, transcription on the right — */
.press-spread {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 56px;
  align-items: start;
}
.press-spread-scan { margin: 0; }
.press-spread-scan img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  box-shadow: 0 8px 20px rgba(26, 24, 20, 0.1);
  cursor: zoom-in;
  transition: filter 0.2s ease;
}
.press-spread-scan img:hover { filter: brightness(1.04); }
.press-spread-scan figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.5;
}
.press-spread-text .section-label { margin-bottom: 22px; }
@media (max-width: 720px) {
  .press-spread { grid-template-columns: 1fr; gap: 32px; }
  .press-spread-scan { max-width: 280px; margin: 0 auto; }
  .press-spread-scan figcaption { text-align: center; }
}

/* Block-level wide figure: large thumbnail that breaks the prose
   column and stretches to ~880px. Clicks open the lightbox. */
.prose-figure--wide {
  float: none;
  max-width: 880px;
  margin: 28px auto 12px;
}
.prose-figure--wide img {
  cursor: zoom-in;
  transition: filter 0.2s ease;
}
.prose-figure--wide img:hover { filter: brightness(1.04); }
.prose-figure--wide figcaption { text-align: center; }

/* Two-column prose + image; stacks on mobile */
.prose-split { width: 100%; border-collapse: collapse; }
.prose-split td { width: 50%; vertical-align: middle; }
.prose-split td:first-child { padding-right: 1.5rem; }
.prose-split .prose-figure { margin: 0; max-width: 100%; }

@media (max-width: 720px) {
  .prose-figure,
  .prose-figure--right,
  .prose-figure--left {
    float: none;
    margin: 0 auto 24px;
    max-width: 260px;
  }
  .prose-figure figcaption { text-align: center; }

  .prose-split,
  .prose-split tbody,
  .prose-split tr,
  .prose-split td {
    display: block;
    width: 100%;
  }
  .prose-split td:first-child { padding-right: 0; }
  .prose-split .prose-figure {
    margin: 0 auto 24px;
    max-width: 360px;
  }
}
.book-prose .text-muted { color: var(--ink-muted); font-style: italic; }
.book-prose strong { font-weight: 600; }
.book-prose-meta {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 22px !important;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

.book-companion-line {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.book-companion-line a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-faint);
}
.book-companion-line a:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

/* — From the peanut gallery (curated reader comments on listings) — */
.comment-picks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.comment-pick {
  padding-left: 18px;
  border-left: 2px solid var(--rule);
}
.comment-pick-body {
  font-size: 17px;
  color: var(--ink-muted);
}
.comment-pick-body p { margin: 0 0 8px; }
.comment-pick-body p:last-child { margin-bottom: 0; }
.comment-pick-byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-faint);
  margin: 8px 0 0;
}
.comment-pick-byline span { opacity: 0.7; }
.comment-pick-all {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}
.comment-pick-all a {
  color: var(--ink-muted);
  border-bottom: 1px solid var(--ink-faint);
}
.comment-pick-all a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
/* "Read the rest of the thread" fold */
.comment-rest {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}
.comment-rest-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border: 1px solid var(--ink-faint);
  border-radius: 3px;
  user-select: none;
  transition: color 0.15s, border-color 0.15s;
}
.comment-rest-toggle::-webkit-details-marker { display: none; }
.comment-rest-toggle::before {
  content: "▸";
  font-size: 9px;
  transition: transform 0.15s;
}
.comment-rest[open] > .comment-rest-toggle::before { transform: rotate(90deg); }
.comment-rest-toggle:hover { color: var(--accent); border-color: var(--accent); }
.comment-rest-count { opacity: 0.6; }
.comment-rest-list { margin-top: 26px; }
.comment-rest .comment-pick-all { margin-top: 26px; }

/* — Press pull-quote — */
.press-pull {
  margin: 0;
  padding: 8px 0 8px 26px;
  border-left: 3px solid var(--accent);
  max-width: 660px;
}
.press-pull blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 14px;
}
.press-pull figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.press-pull figcaption a {
  color: var(--accent);
}
.press-pull figcaption a:hover { color: var(--accent-deep); text-decoration: underline; }
.press-pull + .press-pull { margin-top: 32px; }

/* Centered testimonial variant — drops the left rule, picks up
   top + bottom oxblood rules; used on services.html before the CTA. */
.press-pull--testimonial {
  border-left: none;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  padding: 28px 28px 22px;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}
.press-pull--testimonial blockquote {
  font-size: 23px;
  margin-bottom: 14px;
}
.press-pull--testimonial blockquote::before { content: "\201C"; }
.press-pull--testimonial blockquote::after  { content: "\201D"; }
.press-pull--testimonial figcaption {
  letter-spacing: 1.8px;
}

/* — Workshops photo grid — */
.workshops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.workshop-photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.workshop-photo-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(
      135deg,
      var(--paper-soft) 0 12px,
      var(--paper-deep) 12px 24px
    );
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.workshop-photo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.workshop-photo-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper);
  padding: 4px 10px;
  border: 1px solid var(--rule);
}
.workshop-photo figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Section-level photo (Music, etc.) — portrait-friendly, no forced crop. */
.section-photo {
  margin: 18px 0 0;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
}
.section-photo figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Float a section photo to the right so adjacent prose wraps around it. */
.section-photo--float-right {
  float: right;
  max-width: 240px;
  margin: 4px 0 1.25rem 1.75rem;
}
@media (max-width: 600px) {
  .section-photo--float-right {
    float: none;
    max-width: 320px;
    margin: 0 auto 1.5rem;
  }
}

/* Photo collage grid (Personal · Photos). */
.photo-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.photo-collage figure { margin: 0; }
.photo-tile {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      135deg,
      var(--paper-soft) 0 12px,
      var(--paper-deep) 12px 24px
    );
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-tile a {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-tile-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 600px) {
  .photo-collage { grid-template-columns: repeat(2, 1fr); }
}

/* Elephant page: lead photo floats beside the prose, stacks on mobile. */
.elephant-lead {
  float: right;
  max-width: 240px;
  margin: 4px 0 1.25rem 1.75rem;
}
@media (max-width: 600px) {
  .elephant-lead {
    float: none;
    max-width: 320px;
    margin: 0 auto 1.5rem;
  }
}

.workshop-cta {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.workshop-cta p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.6;
  max-width: 620px;
}
.workshop-cta a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}
.workshop-cta a:hover {
  text-decoration: none;
  color: var(--accent-deep);
}

/* — Responsive — */
@media (max-width: 720px) {
  .book-hero-inner { grid-template-columns: 1fr; gap: 36px; justify-items: start; }
  .book-cover { width: 200px; }
  .book-cover-title { font-size: 38px; }
  .book-section { padding: 48px 22px; }
  .workshops-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .medal-line-1 { font-size: 14px; }
}
@media (max-width: 460px) {
  .workshops-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Bibliography (bibliography.html)
   TOC at the top + work-group sections below.
   Reuses .work-group / .work-entry from above.
   ============================================================ */
.bib-toc {
  margin: 0 auto 56px;
  padding: 24px 28px;
  max-width: var(--max-w-narrow);
  background: var(--paper-soft);
  border: 1px solid var(--rule);
}
.bib-toc ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 28px;
  counter-reset: bib-toc-counter;
}
.bib-toc li {
  counter-increment: bib-toc-counter;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.bib-toc li::before {
  content: "§ " counter(bib-toc-counter);
  color: var(--ink-faint);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 28px;
}
.bib-toc a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  flex: 1;
}
.bib-toc a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}
.bib-toc li > span {
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 11px;
  flex-shrink: 0;
}

/* Per-group meta line below the section heading */
.work-group-meta {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 8px 0 12px;
  max-width: 640px;
}
.work-group-meta a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-faint);
}
.work-group-meta a:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

/* Anchored sections — give them a little top padding so the
   sticky nav doesn't crash into the heading. */
.work-group[id] { scroll-margin-top: 80px; display: flow-root; }
.work-group + .work-group { margin-top: 56px; }
/* Space the first dossier group off its intro paragraph. */
.book-section--dossier .book-prose + .work-group { margin-top: 44px; }

/* Bibliography work-entry tweaks: optional .work-note nested
   inside a row should sit aligned to col 2 for clarity. */
.work-entry .work-note {
  grid-column: 2;
  margin-top: 4px;
  font-size: 14px;
}

/* Bibliography lower sections (Books, Papers, Talks, Podcasts, Code,
   Tweets, Elsewhere) — small thumbnail in a leading column with the
   year/title/venue/note grid to its right. Mixed rows (with or without
   a .work-thumb) stay aligned because every cell has an explicit
   grid-column assignment. */
.bib-rows .work-entry {
  grid-template-columns: 80px 64px 1fr;
  align-items: start;
}
.bib-rows .work-thumb {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 72px;
  height: 72px;
  border-radius: 3px;
  overflow: hidden;
  display: block;
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  align-self: start;
}
.bib-rows .work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bib-rows a.work-thumb { transition: opacity .15s ease; }
.bib-rows a.work-thumb:hover { opacity: 0.85; }
.bib-rows .work-year   { grid-column: 2; padding-top: 4px; }
.bib-rows .work-title  { grid-column: 3; padding-top: 2px; }
.bib-rows .work-venue  {
  grid-column: 3;
  white-space: normal;
  padding-top: 4px;
  line-height: 1.5;
}
.bib-rows .work-entry .work-note {
  grid-column: 3;
}

/* Threaded tweet — a follow-up shown beneath the tweet it replies to.
   The head row drops its bottom rule so the pair reads as one unit; the
   reply drops the X thumb (the empty thumb column indents it) and a ↳
   in that column marks the thread. */
.bib-rows .work-entry--thread-head {
  border-bottom: none;
  padding-bottom: 4px;
}
.bib-rows .work-entry--reply {
  padding-top: 4px;
}
.bib-rows .work-entry--reply::before {
  content: "\21B3"; /* ↳ */
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: start;
  padding-right: 10px;
  padding-top: 1px;
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--ink-muted);
}

/* Books variant — actual book covers want a portrait 2:3 thumbnail,
   not the square thumb used everywhere else. */
.bib-rows--books .work-thumb {
  width: 64px;
  height: 96px;
}

/* ============================================================
   Bibliography card grid — compact thumbnail tiles for the
   thumbnail-heavy lower sections (Podcasts, Talks). Replaces the
   full-width .bib-rows list to reclaim vertical space: 3–4 cards
   per row, thumbnail + year + title + venue. Notes are dropped —
   curated detail lives on the dedicated section pages.
   ============================================================ */
.bib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 22px;
  margin-top: 20px;
  /* Don't stretch cards to the row's tallest item — otherwise the two
     normal cards sharing the series card's row become empty bordered
     boxes ~100px taller than their content. Each card keeps its natural
     height, top-aligned. */
  align-items: start;
}
.bib-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
a.bib-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.bib-card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--paper-deep);
  overflow: hidden;
  border-bottom: 1px solid var(--rule-soft);
}
.bib-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Small square logos (e.g. the Wyvern mark) get contained, not cropped,
   so the whole emblem stays visible inside the 16:9 thumb. */
.bib-card-thumb--contain img { object-fit: contain; padding: 12px; }
/* Placeholder thumb for entries with no recording image — a centred,
   muted source label so the card stays the same shape as its neighbours. */
.bib-card-thumb--ph { display: flex; align-items: center; justify-content: center; }
.bib-card-thumb--ph span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.bib-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
}
.bib-card-year {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 1px;
}
.bib-card-title {
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
a.bib-card:hover .bib-card-title { color: var(--accent); }
.bib-card-venue {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Multi-episode series — one card standing in for a whole run (Vibe
   Coding with Steve and Gene), mirroring the Paganini-caprices collapse
   on music.html. The episode list makes it a different shape from the
   single-episode cards, so it lives in its own full-width row at the end
   of the section rather than sitting awkwardly mid-grid. */
.bib-series {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-soft);
}
.bib-series-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 14px;
}
.bib-card--series {
  flex-direction: row;
  align-items: stretch;
}
.bib-card--series .bib-card-thumb {
  width: 300px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  align-self: flex-start;
  border-bottom: none;
  border-right: 1px solid var(--rule-soft);
}
.bib-card--series .bib-card-body { flex: 1; }
.bib-eplist {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 3px 22px;
}
.bib-eplist li {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.4;
}
.bib-eplist a { color: var(--ink-soft); text-decoration: none; }
.bib-eplist a:hover { color: var(--accent); }
.bib-ep-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  margin-right: 5px;
}
@media (max-width: 600px) {
  .bib-card--series { flex-direction: column; }
  .bib-card--series .bib-card-thumb {
    width: 100%;
    align-self: stretch;
    border-right: none;
    border-bottom: 1px solid var(--rule-soft);
  }
}

/* Themed sub-grouping (used inside §8 Drunken Blog Rants).
   Each theme is a small heading + a balanced 2-column list. */
.bib-themes {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 4px;
}
.bib-theme-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bib-theme-count {
  color: var(--ink-faint);
  font-weight: 400;
}
.bib-theme-list {
  list-style: none;
  columns: 2;
  column-gap: 36px;
}
.bib-theme-list li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  padding: 3px 0;
  break-inside: avoid;
}
.bib-theme-list li a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.bib-theme-list li a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}
.bib-theme-list .meta {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  margin-left: 6px;
  text-transform: uppercase;
}
.bib-theme-list .star {
  color: var(--accent);
  font-size: 13px;
  margin-left: 6px;
}
@media (max-width: 720px) {
  .bib-theme-list { columns: 1; }
}

/* ============================================================
   Resume / CV (resume.html)
   Two-column ledger: meta in margin, body to the right.
   Time foregrounded; structure carries the persona.
   ============================================================ */
.resume-list {
  list-style: none;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
}
.resume-entry {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}
.resume-entry:last-child { border-bottom: none; }
.resume-entry-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}
.resume-entry-date {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
}
.resume-entry-duration {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.resume-entry-loc {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.resume-entry-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin-bottom: 6px;
}
.resume-entry-org {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.resume-entry-desc {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.resume-entry-desc:last-child { margin-bottom: 0; }
.resume-entry-desc--note {
  font-size: 16px;
  font-style: italic;
  color: var(--ink-muted);
}
.resume-entry-desc a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-faint);
}
.resume-entry-desc a:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

/* Multi-role companies (Sourcegraph, Grab) */
.resume-entry--multi .resume-entry-org {
  margin-bottom: 4px;
}
.resume-role {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dotted var(--rule);
}
.resume-role:first-of-type {
  border-top: 1px solid var(--rule-soft);
  margin-top: 16px;
  padding-top: 22px;
}
.resume-role-date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.resume-role-title {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}
.resume-role-desc {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* A pipeline row that carries its own emblem (logo or small photo) at right */
.resume-role--media { display: flex; gap: 24px; align-items: flex-start; clear: right; }
.resume-role-main { flex: 1 1 auto; min-width: 0; }
.resume-role-emblem { flex: 0 0 128px; width: 128px; margin: 2px 0 0; }
.resume-role-emblem > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  border: 1px solid var(--rule);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.13);
}
.resume-role-emblem img.lightbox { cursor: zoom-in; }
.resume-role-emblem figcaption {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 9px;
  line-height: 1.45;
}

/* Pull-quote style for Grok */
.resume-pull {
  margin: 18px 0 16px;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--ink-faint);
}
.resume-pull p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.resume-pull p:last-child { margin-bottom: 0; }
.resume-pull strong {
  font-weight: 600;
  color: var(--ink);
}
.resume-pull-meta {
  font-family: var(--font-mono);
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-muted) !important;
}
.resume-pull-meta a {
  color: var(--accent);
}
.resume-pull-meta a:hover { color: var(--accent-deep); }

/* Aside (Culture Club annotation) */
.resume-aside {
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--accent-bg);
  border-left: 2px solid var(--accent);
}
.resume-aside-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.resume-aside p:not(.resume-aside-label) {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.resume-aside em { font-style: italic; font-weight: 500; }

/* Education entries — same layout, slightly quieter */
.resume-entry--education .resume-entry-title { font-size: 26px; }
.resume-entry--education .resume-entry-org { color: var(--ink); font-style: normal; }

/* Legacy "earlier" modifier kept for any future use */
.resume-entry--earlier .resume-entry-title { color: var(--ink-soft); font-size: 26px; }
.resume-entry--earlier .resume-entry-desc { font-style: italic; color: var(--ink-muted); }

/* Grok → Kythe (and any other inline link inside the pull-quote) */
.resume-pull a { color: var(--accent); border-bottom: 1px solid var(--ink-faint); }
.resume-pull a:hover { color: var(--accent-deep); border-color: var(--accent); text-decoration: none; }

/* ── Photos & document scans attached to a row ──────────────────
   Float right inside the body; mono caption underneath. Add
   class="lightbox" to the <img> for click-to-enlarge. The body
   clears its float so a tall scan can't bleed into the next row. */
.resume-entry-body { min-width: 0; }
.resume-entry-body::after { content: ""; display: block; clear: both; }
.resume-figure {
  float: right;
  width: 200px;
  margin: 2px 0 14px 30px;
}
.resume-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  border: 1px solid var(--rule);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.13);
}
.resume-figure img.lightbox { cursor: zoom-in; }
.section-photo img.lightbox { cursor: zoom-in; }
.resume-figure figcaption {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 9px;
  line-height: 1.45;
}
.resume-figure--wide { width: 300px; }
/* Mirror of .resume-figure that floats to the opposite margin */
.resume-figure--left { float: left; margin: 2px 30px 14px 0; }
/* Dashed placeholder for a scan that hasn't landed yet */
.resume-figure-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 3 / 4;
  padding: 12px;
  border: 1px dashed var(--rule);
  border-radius: 2px;
  background: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.6;
}
.resume-figure--wide .resume-figure-slot { aspect-ratio: 3 / 2; }

/* Company wordmark logos — set on a light card (logos are drawn for a
   light field, so the card stays white in both themes; theme-locked). */
.resume-figure--logo { width: 150px; }
.resume-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}
.resume-figure--logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62px;
  object-fit: contain;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
/* App-icon art (Wyvern) — square, rounded, keeps the photo frame */
.resume-figure--icon { width: 112px; }
.resume-figure--icon img { border-radius: 16px; }

/* Linked org name (e.g. Geoworks → Wikipedia) keeps the muted italic */
.resume-entry-org a { color: inherit; border-bottom: 1px solid var(--ink-faint); }
.resume-entry-org a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* An aside paired with a scan, side by side (Culture Club + recruiting ad) */
.resume-aside-row { display: flex; gap: 26px; align-items: flex-start; margin-top: 18px; }
.resume-aside-row .resume-aside { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.resume-aside-row .resume-figure { float: none; margin: 0; flex: 0 0 196px; }

/* Photo attribution line at the foot of the history page */
.resume-credits {
  max-width: var(--max-w-narrow);
  margin: 36px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
}
.resume-credits a { color: var(--ink-muted); border-bottom: 1px solid var(--rule); }
.resume-credits a:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   Page-load animations (landing only)
   ============================================================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.page-logbook .masthead-eyebrow { animation: fade-in 0.6s 0.05s ease-out backwards; }
body.page-logbook .masthead-name    { animation: fade-up 0.7s 0.15s ease-out backwards; }
body.page-logbook .masthead-thesis  { animation: fade-up 0.6s 0.30s ease-out backwards; }
body.page-logbook .profile-block-inner { animation: fade-up 0.7s 0.55s ease-out backwards; }

@media (prefers-reduced-motion: reduce) {
  body.page-logbook .masthead-eyebrow,
  body.page-logbook .masthead-name,
  body.page-logbook .masthead-thesis,
  body.page-logbook .profile-block-inner { animation: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px) {
  .nav-links {
    gap: 14px;
  }
  .nav-links li:nth-child(n+4) { display: none; } /* keep nav slim */

  .masthead { padding: 44px 22px 32px; }
  .masthead-name { letter-spacing: -1.4px; margin-bottom: 26px; }
  .masthead-thesis { margin-top: 0; }

  .press-strip { padding: 16px 22px 9px; }
  .press-strip-name { font-size: 16px; }
  .press-strip-label { letter-spacing: 2.2px; }

  .profile-block-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .profile-quote { text-align: left; }
  .profile-block { padding: 16px 22px 48px; }

  .narrative { padding: 28px 22px 56px; }
  .narrative-body p { font-size: 18px; text-align: left; hyphens: none; }
  .drop-cap { font-size: 4.6em; }

  .featured-entry { border-right: none; }

  .ledger { padding: 40px 22px; }
  .ledger-list li { flex-wrap: wrap; gap: 4px 10px; }
  .ledger-list-name { font-size: 17px; }
  .ledger-list li::after { min-width: 16px; }

  .customer-row { gap: 28px 36px; padding: 4px 0 0; }
  .customer-row--secondary { gap: 24px 32px; }
  .ledger-label--second { margin-top: 28px; }
  .customer-mark { height: 30px; }
  .customer-mark--icon { height: 28px; width: 28px; }
  .customer-mark--tall { height: 38px; }
  .customer-name { font-size: 17px; }
  .customer { gap: 10px; }

  .closing { padding: 56px 22px 72px; }

  .resume-entry { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .resume-entry-meta { flex-direction: row; flex-wrap: wrap; gap: 10px 16px; padding-top: 0; }
  .resume-entry-title { font-size: 26px; }
  .resume-entry-org { font-size: 17px; margin-bottom: 14px; }
  .resume-entry-desc { font-size: 17px; }
  .resume-pull { padding-left: 16px; }
  .resume-figure,
  .resume-figure--wide { float: none; width: 100%; max-width: 300px; margin: 4px 0 18px; }
  .resume-figure--logo { max-width: 170px; }
  .resume-figure--icon { max-width: 112px; }
  .resume-role--media { flex-direction: column; gap: 14px; }
  .resume-role-emblem { width: 100%; max-width: 200px; }
  .resume-aside-row { flex-direction: column; }
  .resume-aside-row .resume-figure { flex-basis: auto; max-width: 280px; margin: 0; }

  .card-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .essay-item { grid-template-columns: 1fr; gap: 4px; }
  .essay-year { font-size: 11px; padding-top: 0; }
  .work-entry { grid-template-columns: 56px 1fr; }
  .work-venue { display: none; }
  .work-note { grid-column: 2; }

  /* Mobile bibliography rows — thumb + (year+title stacked). */
  .bib-rows .work-entry { grid-template-columns: 64px 1fr; }
  .bib-rows .work-thumb { width: 56px; height: 56px; grid-row: 1 / span 2; }
  .bib-rows--books .work-thumb { width: 48px; height: 72px; }
  .bib-rows .work-year  { grid-column: 2; }
  .bib-rows .work-title { grid-column: 2; }
  .bib-rows .work-entry .work-note { grid-column: 2; }
  .page-header { padding: 44px 22px 32px; }
  .tile-grid { grid-template-columns: 1fr 1fr; gap: 1px; }
  .tile > a { padding: 18px 16px; }
  .highlight-grid { grid-template-columns: 1fr; }
  .press-list { gap: 10px 22px; }
}

@media (max-width: 460px) {
  .tile-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Lexicon — definition list for short glossaries (Gas Town etc.)
   ============================================================ */
.lexicon {
  margin: 28px 0 0;
  padding: 0;
  max-width: 760px;
}
.lex-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--rule-soft);
}
.lex-row:first-child { border-top: none; padding-top: 6px; }
.lexicon dt {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
}
.lexicon dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 720px) {
  .lex-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}

/* ============================================================
   Long-form rant page — used by platforms-rant-text.html
   ============================================================ */
.rant-list {
  list-style: disc;
  padding-left: 22px;
  max-width: 620px;
  margin: 0 0 18px;
}
.rant-list li {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 14px;
}
.rant-list li:last-child { margin-bottom: 0; }
.rant-list code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
  word-break: break-all;
}
.rant-emphasis {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: 22px !important;
  letter-spacing: 0.5px;
  color: var(--accent) !important;
  text-align: center;
  margin: 28px 0 !important;
  max-width: 620px;
}
.rant-bibliographic { margin-top: 40px; }
.rant-bibliographic .rant-list { margin-top: 12px; }

/* ============================================================
   Amazon-Google comparison spreadsheet — platforms-rant-spreadsheet.html
   ============================================================ */
.spreadsheet-meta {
  font-family: var(--font-mono);
  font-size: 12px !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted) !important;
  margin-top: 24px !important;
}
.spreadsheet-meta a {
  color: var(--accent);
  border-bottom: 1px solid var(--ink-faint);
}
.spreadsheet-meta a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); text-decoration: none; }

.comparison-section { padding-top: 32px; }

.comparison-toc {
  margin: 0 0 56px;
  padding: 22px 26px 18px;
  background: var(--panel-bg, rgba(107, 29, 29, 0.04));
  border-left: 3px solid var(--accent);
}
.comparison-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 28px;
  counter-reset: cmptoc;
}
.comparison-toc li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
  counter-increment: cmptoc;
}
.comparison-toc li::before {
  content: counter(cmptoc, decimal-leading-zero) ".";
  color: var(--ink-faint);
  margin-right: 6px;
  font-weight: 600;
}
.comparison-toc a {
  color: var(--ink-soft);
  text-decoration: none;
  flex: 1;
}
.comparison-toc a:hover { color: var(--accent); }
.comparison-toc li span {
  color: var(--ink-faint);
  font-size: 11px;
}

.comparison-category { margin-bottom: 64px; }
.comparison-category-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}

.comparison-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.comparison-item:last-child { border-bottom: none; }

.comparison-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}
.comparison-item-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.comparison-winner {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--ink-faint);
  color: var(--ink-muted);
  white-space: normal;
  flex-shrink: 0;
  max-width: 60%;
  text-align: center;
  line-height: 1.3;
}
.comparison-winner.win-google { border-color: var(--accent); color: var(--accent); }
.comparison-winner.win-amazon { border-color: var(--accent); color: var(--accent); background: var(--accent-bg, rgba(107, 29, 29, 0.06)); }
.comparison-winner.win-neither { border-style: dashed; }

.comparison-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 14px;
  border-top: 1px dotted var(--rule-soft);
  border-bottom: 1px dotted var(--rule-soft);
}
.comparison-side {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comparison-side--google { border-right: 1px dotted var(--rule-soft); }
.comparison-side-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.comparison-side-value {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}

.comparison-notes {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 760px;
}

@media (max-width: 720px) {
  .comparison-toc ol { grid-template-columns: 1fr; gap: 4px; }
  .comparison-pair { grid-template-columns: 1fr; }
  .comparison-side--google { border-right: none; border-bottom: 1px dotted var(--rule-soft); }
  .comparison-item-name { font-size: 20px; }
  .comparison-item-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .comparison-winner { max-width: none; }
}

/* ============================================================
   Grok download CTA on code.html
   ============================================================ */
.grok-cta {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 28px 0 !important;
  padding: 18px 22px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 660px;
}
.grok-cta a {
  color: var(--accent);
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 2px;
  text-decoration: none;
}
.grok-cta a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.grok-cta-sep {
  color: var(--ink-faint);
  margin: 0 16px;
}

/* ============================================================
   Canonical essay pages — /essays/<slug>/
   Rendered from posts/<source>/<slug>.html via _includes/essay.njk.
   Scoped to .essay-canonical so this stylesheet's existing
   .essay-list / .essay-item / .essay-item etc. on lens pages
   are not affected.
   ============================================================ */
.essay-canonical {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 56px 28px 96px;
}
.essay-canonical .essay-header {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule-soft);
}
.essay-canonical .essay-header--cover {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.essay-canonical .essay-header-text {
  min-width: 0;
  flex: 1;
}
/* Wrapper exists only to give the cover badges (.listing-badge, reused) a
   positioned ancestor sized exactly to the image. The cover keeps its own
   flex sizing below, so the wrapper shrinks to fit. */
.essay-canonical .essay-cover-wrap {
  position: relative;
  flex: 0 0 220px;
  align-self: flex-start;
  line-height: 0;
}
.essay-canonical .essay-cover {
  flex: 0 0 220px;
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--paper-deep);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04) inset,
    6px 14px 28px rgba(26, 24, 20, 0.18);
}
@media (max-width: 640px) {
  .essay-canonical .essay-header--cover {
    flex-direction: column;
    gap: 24px;
  }
  .essay-canonical .essay-cover-wrap {
    flex: 0 0 auto;
  }
  .essay-canonical .essay-cover {
    flex: 0 0 auto;
    width: 200px;
    height: 200px;
  }
}
.essay-canonical .essay-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 18px;
}
.essay-canonical .essay-eyebrow time { font-variant-numeric: tabular-nums; }
.essay-canonical .essay-source { color: var(--ink-faint); }
.essay-canonical .essay-listing-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.essay-canonical .essay-listing-link:hover { border-bottom-color: var(--accent); }
.essay-canonical .essay-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.8px;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 14px;
}
.essay-canonical .essay-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 22px);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: var(--max-w-prose);
  margin: 0;
}

/* Prose. The body comes in as Medium / Sourcegraph / etc. markup —
   semantic but loaded with platform-specific class attributes we
   ignore. We restyle the tags directly. */
.essay-canonical .essay-body {
  max-width: var(--max-w-prose);
}
.essay-canonical .essay-body p,
.essay-canonical .essay-body li {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
}
.essay-canonical .essay-body p { margin: 0 0 22px; }
/* Provenance datelines at the head of some drunken essays — a tight run of
   publish / takedown / repub notes. Collapse the inter-line gap so they read
   as one compact block instead of three full-margin paragraphs. */
.essay-canonical .essay-body .essay-dateline { margin: 0 0 22px; }
.essay-canonical .essay-body .essay-dateline p { margin: 0 0 2px; }
.essay-canonical .essay-body .essay-dateline p:last-child { margin-bottom: 0; }
/* Editor's note — a dated annotation added to the local essay copy after
   publication (a correction, a name the author left blank, or "here's what
   happened since"). The local-rendered copies exist partly to allow these.
   Oxblood rule + mono label, set apart from the surrounding prose. Mirror the
   .resume-aside treatment; reusable across any canonical essay body. */
.essay-canonical .essay-body .essay-ednote {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--accent-bg);
  border-left: 2px solid var(--accent);
}
.essay-canonical .essay-body .essay-ednote-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.essay-canonical .essay-body .essay-ednote p:not(.essay-ednote-label) {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.essay-canonical .essay-body .essay-ednote a { font-style: normal; }

/* Forward link — a featherweight, voiceless pointer added after publication,
   noting that an in-text promise (a "vapor-blog" the author said was coming) was
   later kept. Deliberately lighter than .essay-ednote: the leading → plus the
   later date are self-dating (an earlier essay can't have linked a later one), so
   it needs no "added later" label and no narrator. Phrase it voiceless and verb-
   first ("Shipped that vapor-blog…") — not "He…"/"I…" — so the convention travels
   to essays whose follow-up wasn't the author's own. Inline, dimmed, no rule, no
   mono label. Reusable wherever a concrete in-text promise gets fulfilled by a
   later piece. Canonical example: Portrait of a N00b (Feb 2008) → The Universal
   Design Pattern (Oct 2008). */
.essay-canonical .essay-body .essay-forward {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92em;
  color: var(--ink-muted);
}
.essay-canonical .essay-body .essay-forward::before {
  content: "\2192\00a0";   /* → + non-breaking space */
  font-style: normal;
  color: var(--accent);
}
.essay-canonical .essay-body .essay-forward a {
  font-style: normal;
  color: var(--ink-muted);
}
.essay-canonical .essay-body h2,
.essay-canonical .essay-body h3,
.essay-canonical .essay-body h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin: 44px 0 16px;
}
.essay-canonical .essay-body h2 { font-size: 30px; letter-spacing: -0.4px; }
.essay-canonical .essay-body h3 { font-size: 24px; }
.essay-canonical .essay-body h4 { font-size: 20px; }
.essay-canonical .essay-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}
.essay-canonical .essay-body a:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}
.essay-canonical .essay-body strong { font-weight: 600; }
.essay-canonical .essay-body em { font-style: italic; }
.essay-canonical .essay-body ul,
.essay-canonical .essay-body ol {
  margin: 0 0 22px 24px;
  padding: 0;
}
.essay-canonical .essay-body li { margin-bottom: 8px; }
/* Table of contents — a dense navigational list, so override the airy prose-list
   spacing (1.65 line-height + 8px item margins reads as double-spaced for a TOC).
   Tighten line-height and item gaps; collapse nested-list margins so sub-sections
   sit snug under their parent. */
.essay-canonical .essay-body ul.essay-toc { margin-bottom: 28px; }
.essay-canonical .essay-body ul.essay-toc li { margin-bottom: 1px; line-height: 1.35; }
.essay-canonical .essay-body ul.essay-toc ul { margin: 1px 0 4px 24px; }
/* Compact multi-column list for long glossary-style enumerations
   (e.g. the OO terminology list in the phone-screen essay). */
.essay-canonical .essay-body ol.essay-cols {
  columns: 2;
  column-gap: 40px;
}
.essay-canonical .essay-body ol.essay-cols li {
  margin-bottom: 3px;
  break-inside: avoid;
}
@media (max-width: 600px) {
  .essay-canonical .essay-body ol.essay-cols { columns: 1; }
}
.essay-canonical .essay-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}
.essay-canonical .essay-body blockquote p { margin-bottom: 12px; }
.essay-canonical .essay-body blockquote p:last-child { margin-bottom: 0; }
.essay-canonical .essay-body blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
/* Documentation / spec quote: a long verbatim man-page excerpt reads badly in
   italic (and italicizes the inline code), so keep the left accent rule but set
   the prose upright. Reusable for any future spec/manual block quote. */
.essay-canonical .essay-body blockquote.essay-doc-quote { font-style: normal; }
.essay-canonical .essay-body blockquote.essay-doc-quote pre { margin: 16px 0; }

/* Footnotes — inline superscript markers (id="refN", class fn-ref) link down to
   the Notes list at the foot of the essay (id="noteN", class fn-note); each
   note's [N] links back up to its marker. scroll-margin keeps the jump target
   clear of the top edge. First used on execution-kingdom-of-nouns; reuse for any
   essay scraped with #noteN anchors. */
.essay-canonical .essay-body sup.fn-ref {
  font-size: 0.72em;
  line-height: 0;
  scroll-margin-top: 80px;
}
.essay-canonical .essay-body sup.fn-ref a { text-decoration: none; }
.essay-canonical .essay-body .fn-note {
  scroll-margin-top: 80px;
  font-size: 0.92em;
  color: var(--ink-soft);
}
.essay-canonical .essay-body a.fn-back {
  text-decoration: none;
  font-style: normal;
}

.essay-canonical .essay-body figure {
  margin: 32px 0;
  max-width: 100%;
}
.essay-canonical .essay-body figure.essay-hero {
  margin: 0 0 36px;
}
.essay-canonical .essay-body figure.essay-hero img {
  width: 100%;
  border-radius: 2px;
}
.essay-canonical .essay-body figure img,
.essay-canonical .essay-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.essay-canonical .essay-body figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.3px;
}

.essay-canonical .essay-body pre {
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 22px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
}
.essay-canonical .essay-body code {
  font-family: var(--font-mono);
  /* JetBrains Mono's x-height (~0.55em) is much taller than Crimson Pro's
     (~0.45em), so matching the px size makes inline code read physically
     bigger than the serif around it. 0.8em lands the mono x-height on the
     body x-height — optically equal, not nominally equal. */
  font-size: 0.8em;
  background: var(--paper-deep);
  /* Horizontal padding stays tight: at 6px the chip floated a chunky gap
     before/after every token, which got unreadable in code-dense prose where
     adjacent tokens (FieldTiller till()) each carry their own chip. 2px keeps
     a hair of breathing room inside the chip without the detached look. */
  padding: 1px 2px;
  border-radius: 3px;
}
.essay-canonical .essay-body pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* Prism / code blocks. The @11ty/eleventy-plugin-syntaxhighlight transform
   walks every <pre><code class="language-*"> in essay output and rewrites
   token text into <span class="token <kind>">…</span>. The container <pre>
   gets the same language-* class. Untagged code blocks (plain <pre> with
   no language-*) are left alone — they keep the default mono styling above.
   Palette: warm-paper-leaning Solarized Light, with the keyword color shifted
   to the site's oxblood. Scoped under .essay-canonical so it can't leak. */
.essay-canonical .essay-body pre[class*="language-"] {
  /* Container styling already set by .essay-body pre above; just inherit. */
  color: var(--ink);
}
.essay-canonical .essay-body code[class*="language-"] {
  color: var(--ink);
  font-family: var(--font-mono);
}
.essay-canonical .essay-body .token.comment,
.essay-canonical .essay-body .token.prolog,
.essay-canonical .essay-body .token.doctype,
.essay-canonical .essay-body .token.cdata        { color: #6c6450; font-style: italic; }
.essay-canonical .essay-body .token.punctuation  { color: #5a5040; }
.essay-canonical .essay-body .token.namespace    { opacity: 0.7; }
.essay-canonical .essay-body .token.property,
.essay-canonical .essay-body .token.tag,
.essay-canonical .essay-body .token.constant,
.essay-canonical .essay-body .token.symbol,
.essay-canonical .essay-body .token.deleted      { color: #6b1d1d; }
.essay-canonical .essay-body .token.boolean,
.essay-canonical .essay-body .token.number       { color: #9d4d12; }
.essay-canonical .essay-body .token.selector,
.essay-canonical .essay-body .token.attr-name,
.essay-canonical .essay-body .token.string,
.essay-canonical .essay-body .token.char,
.essay-canonical .essay-body .token.builtin,
.essay-canonical .essay-body .token.inserted     { color: #4f6b1a; }
.essay-canonical .essay-body .token.operator,
.essay-canonical .essay-body .token.entity,
.essay-canonical .essay-body .token.url,
.essay-canonical .essay-body .language-css .token.string,
.essay-canonical .essay-body .style .token.string,
.essay-canonical .essay-body .token.variable     { color: #5a5040; }
.essay-canonical .essay-body .token.atrule,
.essay-canonical .essay-body .token.attr-value,
.essay-canonical .essay-body .token.function,
.essay-canonical .essay-body .token.class-name,
.essay-canonical .essay-body .token.car,
.essay-canonical .essay-body .token.defun        { color: #1f5a8a; }
.essay-canonical .essay-body .token.quoted-symbol,
.essay-canonical .essay-body .token.lisp-property,
.essay-canonical .essay-body .token.argument     { color: #9d4d12; }
.essay-canonical .essay-body .token.keyword      { color: #6b1d1d; font-weight: 600; }
.essay-canonical .essay-body .token.regex,
.essay-canonical .essay-body .token.important    { color: #9d4d12; }
.essay-canonical .essay-body .token.important,
.essay-canonical .essay-body .token.bold         { font-weight: 600; }
.essay-canonical .essay-body .token.italic       { font-style: italic; }
.essay-canonical .essay-body .token.entity       { cursor: help; }

/* Dark-theme syntax palette — same Solarized-ish hue family, lifted off the
   warm-dark paper. Keyword/property hue tracks the dark-mode oxblood. */
[data-theme="dark"] .essay-canonical .essay-body .token.comment,
[data-theme="dark"] .essay-canonical .essay-body .token.prolog,
[data-theme="dark"] .essay-canonical .essay-body .token.doctype,
[data-theme="dark"] .essay-canonical .essay-body .token.cdata        { color: #8a8270; }
[data-theme="dark"] .essay-canonical .essay-body .token.punctuation  { color: #a8a090; }
[data-theme="dark"] .essay-canonical .essay-body .token.property,
[data-theme="dark"] .essay-canonical .essay-body .token.tag,
[data-theme="dark"] .essay-canonical .essay-body .token.constant,
[data-theme="dark"] .essay-canonical .essay-body .token.symbol,
[data-theme="dark"] .essay-canonical .essay-body .token.deleted      { color: #e09090; }
[data-theme="dark"] .essay-canonical .essay-body .token.boolean,
[data-theme="dark"] .essay-canonical .essay-body .token.number       { color: #e0a868; }
[data-theme="dark"] .essay-canonical .essay-body .token.selector,
[data-theme="dark"] .essay-canonical .essay-body .token.attr-name,
[data-theme="dark"] .essay-canonical .essay-body .token.string,
[data-theme="dark"] .essay-canonical .essay-body .token.char,
[data-theme="dark"] .essay-canonical .essay-body .token.builtin,
[data-theme="dark"] .essay-canonical .essay-body .token.inserted     { color: #a8c870; }
[data-theme="dark"] .essay-canonical .essay-body .token.operator,
[data-theme="dark"] .essay-canonical .essay-body .token.entity,
[data-theme="dark"] .essay-canonical .essay-body .token.url,
[data-theme="dark"] .essay-canonical .essay-body .language-css .token.string,
[data-theme="dark"] .essay-canonical .essay-body .style .token.string,
[data-theme="dark"] .essay-canonical .essay-body .token.variable     { color: #b5ae9f; }
[data-theme="dark"] .essay-canonical .essay-body .token.atrule,
[data-theme="dark"] .essay-canonical .essay-body .token.attr-value,
[data-theme="dark"] .essay-canonical .essay-body .token.function,
[data-theme="dark"] .essay-canonical .essay-body .token.class-name,
[data-theme="dark"] .essay-canonical .essay-body .token.car,
[data-theme="dark"] .essay-canonical .essay-body .token.defun        { color: #80b8d8; }
[data-theme="dark"] .essay-canonical .essay-body .token.quoted-symbol,
[data-theme="dark"] .essay-canonical .essay-body .token.lisp-property,
[data-theme="dark"] .essay-canonical .essay-body .token.argument     { color: #e0a868; }
[data-theme="dark"] .essay-canonical .essay-body .token.keyword      { color: #e09090; font-weight: 600; }
[data-theme="dark"] .essay-canonical .essay-body .token.regex,
[data-theme="dark"] .essay-canonical .essay-body .token.important    { color: #e0a868; }

.essay-canonical .essay-body hr {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 36px 0;
}

/* Stiff Asks (2006 round-robin interview) — per-question heading with a
   grouped list of named answers. Tightens the spacing inside each block so
   short replies don't drift apart. */
.essay-canonical .essay-body .essay-lede {
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.essay-canonical .essay-body .stiff-cast {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.essay-canonical .essay-body .stiff-cast li {
  font-size: 16px;
  line-height: 1.5;
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px solid var(--rule-soft);
}
.essay-canonical .essay-body .stiff-cast li:last-child { border-bottom: 0; }
.essay-canonical .essay-body .stiff-cast li strong { color: var(--ink); }
.essay-canonical .essay-body .stiff-q {
  font-size: 26px;
  letter-spacing: -0.2px;
  margin: 56px 0 24px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
}
.essay-canonical .essay-body .stiff-answers { margin-bottom: 16px; }
.essay-canonical .essay-body .stiff-answer {
  margin-bottom: 24px;
}
.essay-canonical .essay-body .stiff-answer-name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.essay-canonical .essay-body .stiff-answer-text p {
  margin: 0 0 10px;
}
.essay-canonical .essay-body .stiff-answer-text p:last-child { margin-bottom: 0; }
.essay-canonical .essay-body .stiff-footer {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* Divider between the essay and its archived reader thread. The comments are
   appended inline to the drunken-era body by _data/canonical_essays.js
   (markDrunkenComments); this is the only separation between the two. Quiet
   mono label so it reads as chrome, not an essay section heading. */
.essay-canonical .essay-body .essay-comments-rule {
  margin: 64px 0 0;
  border: 0;
  border-top: 1px solid var(--rule-soft);
}
.essay-canonical .essay-body .essay-comments-heading {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.2;
  color: var(--ink-muted);
  margin: 18px 0 36px;
}

/* Curated reader comments shown on the essay page itself (essay.njk, when the
   listing sets curateEssayComments). Reuses the listing's .comment-pick* markup;
   .essay-body's own ul/li/p rules are more specific, so re-assert the handful of
   declarations they'd otherwise clobber (bullets, indent, the mono byline). The
   whole thread lives in a <details> fold below the curated couple. */
.essay-canonical .essay-body .comment-picks {
  list-style: none;
  padding: 0;
  margin: 0;
}
.essay-canonical .essay-body .comment-picks li {
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid var(--rule);
}
.essay-canonical .essay-body .comment-pick-body p { margin: 0 0 10px; }
.essay-canonical .essay-body .comment-pick-body p:last-child { margin-bottom: 0; }
.essay-canonical .essay-body .comment-pick-byline {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 1px;
  color: var(--ink-faint);
  margin: 10px 0 0;
}
.essay-canonical .essay-body .comment-pick-byline span { opacity: 0.7; }
.essay-canonical .essay-body .essay-comments-fold { margin-top: 40px; }
.essay-canonical .essay-body .essay-comments-thread { margin-top: 24px; }

.essay-canonical .essay-comments-link {
  margin-top: 56px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
}
.essay-canonical .essay-comments-link a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-faint);
  text-decoration: none;
}
.essay-canonical .essay-comments-link a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* When the comments link is directly followed by the provenance footer, the
   footer's own top margin would double the gap — collapse it to the divider. */
.essay-canonical .essay-comments-link + .essay-footer {
  margin-top: 22px;
}

.essay-canonical .essay-footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
}
.essay-canonical .essay-footer a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-faint);
  text-decoration: none;
  word-break: break-all;
}
.essay-canonical .essay-footer a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Lightbox ────────────────────────────────────────────── */
/* Click-to-expand for thumb images on talks/podcasts/engagements.
   Vanilla JS hook lives in /lightbox.js. */
html.lightbox-locked { overflow: hidden; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 18, 14, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.lightbox-caption {
  position: absolute;
  bottom: 18px;
  left: 32px;
  right: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: rgba(245, 234, 215, 0.78);
  margin: 0;
  pointer-events: none;
}
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  color: rgba(245, 234, 215, 0.72);
  font-size: 32px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--font-mono);
}
.lightbox-close:hover { color: var(--paper); }
@media (max-width: 600px) {
  .lightbox-overlay { padding: 16px; }
  .lightbox-img { max-height: calc(100vh - 80px); }
  .lightbox-caption { left: 16px; right: 16px; font-size: 11px; }
}

/* ── Engagements page ────────────────────────────────────── */
.engagement {
  padding: 48px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.engagement:first-child { padding-top: 0; }
.engagement:last-child { border-bottom: none; }
.engagement-head { margin-bottom: 28px; }
.engagement-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.engagement-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  align-items: baseline;
}
.engagement-meta-sep { color: var(--rule); }
.engagement-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  align-items: start;
}
.engagement-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.engagement-text { min-width: 0; }
.engagement-thumb {
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.engagement-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.engagement-body {
  max-width: 680px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft, var(--ink));
}
.engagement-body p { margin: 0 0 16px; }
.engagement-body p:last-child { margin-bottom: 0; }
.engagement-quote {
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule-soft);
  max-width: 680px;
}
.engagement-quote blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 10px;
}
.engagement-quote blockquote::before { content: "\201C"; }
.engagement-quote blockquote::after  { content: "\201D"; }
.engagement-quote figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 720px) {
  .engagement-row { grid-template-columns: 1fr; gap: 24px; }
  .engagement-gallery { max-width: 360px; }
}
@media (max-width: 600px) {
  .engagement { padding: 36px 0; }
  .engagement-title { font-size: 24px; }
}
.workshops-more {
  text-align: center;
  margin: 28px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.4px;
}
.workshops-more a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-faint);
  text-decoration: none;
}
.workshops-more a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.service-more {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.4px;
}
.service-more a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-faint);
  text-decoration: none;
}
.service-more a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.engagement-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.engagement-thumb-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ─────────────────────────────────────────────────────────────
   LISTINGS — per-essay detail pages (rare-bookseller treatment)
   ───────────────────────────────────────────────────────────── */

/* Square cover frame. Sized to roughly match the visual weight of the
   2:3 .book-cover next to it on book pages. Works as a wrapper for either
   an <img> (the common case, fed from images/covers/<id>.png — Nano Banana
   generates square by default) or a .listing-cover-placeholder block. */
.listing-cover {
  display: block;
  width: 280px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  text-decoration: none !important;
  background: var(--paper-deep);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    8px 18px 32px rgba(26, 24, 20, 0.22);
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.listing-cover:hover {
  transform: translateY(-2px) rotate(-0.4deg);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    10px 22px 38px rgba(26, 24, 20, 0.28);
  text-decoration: none;
}
.listing-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Lens badges on the listing hero cover — the same emoji-tagging system as
   the bibliography book covers (.bib-badge), scaled up for the larger hero
   and placed in the same corners: essentials ★ / turds 💩 top-right, humor
   😄 top-left, stories 📚 bottom-left. (Essentials and turds share the
   top-right corner — they can never appear together.) The canonical essay
   page (.essay-cover-wrap in essay.njk) reuses this family too — keep these
   selectors surface-agnostic. */
.listing-badge {
  position: absolute;
  z-index: 2;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 30px;
  line-height: 1;
  pointer-events: none;
  text-shadow:
    0 1px 4px rgba(0,0,0,0.55),
    0 0 2px rgba(0,0,0,0.45);
}
.listing-badge--humor      { top: 8px;    left: 8px; }
.listing-badge--thumbsdown   { top: 8px;    right: 10px; }
.listing-badge--thumbsup     { top: 8px;    right: 10px; }
.listing-badge--languagenerd { top: 8px;    right: 10px; }
.listing-badge--stories      { bottom: 8px; left: 8px; }
/* Lower-right corner is shared by the gaming mark 🕹️ and the prediction
   marks 🔮/🤡 — like the top-right quality set, they're mutually exclusive on
   any one cover (no gaming essay carries a prediction flag), so they share the
   corner. Gaming is lens-derived (essay.lenses); predictions come from the
   listing frontmatter. */
.listing-badge--gaming         { bottom: 8px; right: 10px; }
.listing-badge--prediction,
.listing-badge--predictionmiss { bottom: 8px; right: 10px; }
/* Essentials is a text-glyph star, not a color emoji, so it carries its own
   gold fill + black outline like the star on the cover grid. */
.listing-badge--essentials {
  top: 8px;
  right: 10px;
  color: #f0c14b;
  font-size: 28px;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85),
     1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85),
     1px  1px 0 rgba(0,0,0,0.85),
       0  1px 3px rgba(0,0,0,0.55);
}

/* Small square cover thumbnail used inline on lens pages (e.g. essentials.html).
   Floats left inside .essay-content so the blurb wraps around it. */
.essay-thumb {
  float: left;
  display: block;
  position: relative;
  width: 96px;
  aspect-ratio: 1 / 1;
  margin: 4px 18px 8px 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    4px 8px 16px rgba(26, 24, 20, 0.18);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none !important;
}
.essay-thumb:hover {
  transform: translateY(-1px) rotate(-0.4deg);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    5px 10px 20px rgba(26, 24, 20, 0.24);
}
.essay-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Lens badges on the small lens-page thumbnail — same emoji-tagging system
   as the cover grid (.bib-badge) and the listing hero (.listing-badge),
   scaled to the 96px thumb. Same corners: essentials ★ / turds 💩 top-right
   (mutually exclusive), humor 😄 top-left, stories 📚 bottom-left. */
.essay-thumb-badge {
  position: absolute;
  z-index: 2;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.essay-thumb-badge--humor      { top: 3px;    left: 3px; }
.essay-thumb-badge--stories    { bottom: 3px; left: 3px; }
.essay-thumb-badge--gaming         { bottom: 3px; right: 4px; }
.essay-thumb-badge--prediction,
.essay-thumb-badge--predictionmiss { bottom: 3px; right: 4px; }
.essay-thumb-badge--thumbsdown   { top: 3px;    right: 4px; }
.essay-thumb-badge--thumbsup     { top: 3px;    right: 4px; }
.essay-thumb-badge--languagenerd { top: 3px;    right: 4px; }
/* Essentials is a text-glyph star (not a color emoji): gold fill + outline. */
.essay-thumb-badge--essentials {
  top: 3px;
  right: 4px;
  color: #f0c14b;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85),
     1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85),
     1px  1px 0 rgba(0,0,0,0.85),
       0  1px 2px rgba(0,0,0,0.55);
}

@media (max-width: 600px) {
  .essay-thumb { width: 72px; margin: 2px 12px 6px 0; }
}

/* ============================================================
   Atlas lens grid (atlas.html)
   Card per entry point: square cover + title + one-line blurb,
   in a responsive 4-up gallery under each group header. Replaces
   the older thumbnail-left list now that the lens count has grown.
   Distinct from bibliography's pure-cover .bib-shelf — atlas keeps
   the editorial blurb because it's the curated front door.
   ============================================================ */
.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px 26px;
  margin-top: 22px;
  list-style: none;
}
.atlas-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
}
.atlas-card-cover {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    4px 8px 16px rgba(26, 24, 20, 0.18);
  transition: transform 0.2s, box-shadow 0.2s;
}
.atlas-card:hover .atlas-card-cover {
  transform: translateY(-2px) rotate(-0.4deg);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    5px 10px 22px rgba(26, 24, 20, 0.24);
}
.atlas-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.atlas-card-title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 14px 0 5px;
}
.atlas-card:hover .atlas-card-title { color: var(--accent); }
.atlas-card-note {
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
}

/* Lens-reminder badges on the atlas cover — same emoji + corners as the
   shared tagging system (.essay-thumb-badge / .bib-badge), scaled up for the
   larger atlas cover. Only the atlas categories that ARE badge-system lenses
   carry one (essentials, languages→nerd, humor, gaming, stories, predictions);
   the rest stay bare. Decorative reminder, so aria-hidden. */
.atlas-badge {
  position: absolute;
  z-index: 2;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.atlas-badge--humor        { top: 8px;    left: 9px; }
.atlas-badge--stories      { bottom: 8px; left: 9px; }
.atlas-badge--gaming       { bottom: 8px; right: 10px; }
.atlas-badge--prediction   { bottom: 8px; right: 10px; }
.atlas-badge--languagenerd { top: 8px;    right: 10px; }
/* Essentials is a text-glyph star (not a color emoji): gold fill + outline,
   same theme-locked treatment as the other badge surfaces. */
.atlas-badge--essentials {
  top: 8px;
  right: 10px;
  color: #f0c14b;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85),
     1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85),
     1px  1px 0 rgba(0,0,0,0.85),
       0  1px 2px rgba(0,0,0,0.55);
}

@media (max-width: 600px) {
  .atlas-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .atlas-card-title { font-size: 19px; }
  .atlas-card-note { font-size: 13px; }
  .atlas-badge { font-size: 18px; }
}

/* Typographic placeholder shown when an essay doesn't yet have a real
   cover image. Sits inside .listing-cover; renders text-only. */
.listing-cover-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(160deg, #2a1414 0%, #4a1818 45%, #6b1d1d 100%);
  color: #f4e9d4;
}
.listing-cover-placeholder::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(244, 233, 212, 0.22);
  border-radius: 2px;
  pointer-events: none;
}
.listing-cover-placeholder::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(244, 233, 212, 0.10);
  border-radius: 2px;
  pointer-events: none;
}
.listing-cover-plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 32px 22px 24px;
  text-align: center;
}
.listing-cover-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(244, 233, 212, 0.65);
}
.listing-cover-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -0.5px;
  color: #f4e9d4;
  margin: auto 0;
}
.listing-cover-byline {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(244, 233, 212, 0.78);
  margin-bottom: 4px;
}
.listing-cover-year {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  color: rgba(244, 233, 212, 0.55);
}

/* Meta strip above the blurb: 2025 · Medium · Essay */
.listing-meta-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.listing-meta-sep { color: var(--ink-faint); }

/* Lens chips — small, restrained, no boxes. */
.listing-lenses {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: -8px 0 0;
}
.listing-lenses li a {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-soft);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.listing-lenses li a:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-deep);
}
/* Contextual link from a prediction-tagged listing hero to the Predictions
   scorecard (the 🔮/🤡 badge's destination). Small mono line under the lenses. */
.listing-scorecard-link {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.listing-scorecard-link a { color: var(--accent); }

@media (max-width: 720px) {
  .listing-cover { width: 100%; max-width: 320px; }
  .listing-cover-title { font-size: 32px; }
  .listing-cover-plate { padding: 28px 16px 22px; }
}

/* ─── Bibliography book-cover grid ──────────────────────────────────
   Used on bibliography.html. Each essay is a portrait "book cover":
   either a real cover image (cropped 2:3 from the square original)
   or a typographic placeholder until art is generated. Title + date
   sit on the cover, darkened-band over imagery.                       */
.bib-shelf {
  margin: 32px 0 48px;
}
.bib-shelf-year {
  font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim, #6c5d4a);
  margin: 36px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.10));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.bib-shelf-year:first-child { margin-top: 4px; }
.bib-shelf-year .bib-shelf-count {
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.6;
}
/* Era dividers between the four life-chapters in the essay shelf:
   Gas Town · Sourcegraph · Stevey's Blog Rants · Drunken Blog Rants.
   Logbook treatment — left rule, mono label, faint blurb. */
.bib-era {
  margin: 44px 0 18px;
  padding: 10px 0 8px 14px;
  border-left: 3px solid var(--ink-oxblood, #6b1d1d);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 18px;
}
.bib-era:first-child { margin-top: 4px; }
.bib-era-name {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink, #1f1a14);
  grid-column: 1;
}
.bib-era-blurb {
  margin: 2px 0 0;
  font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim, #6c5d4a);
  grid-column: 1;
}
.bib-era-count {
  font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim, #6c5d4a);
  opacity: 0.7;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.book-grid {
  display: grid;
  /* Fixed thumbnail-sized tracks. Tiles don't stretch with viewport;
     wider window = more columns. eBay max-grid density. */
  grid-template-columns: repeat(auto-fill, 90px);
  column-gap: 18px;
  row-gap: 28px;
  justify-content: center;
  padding: 8px 0;
}
.book-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}
.bib-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(160deg, #2a1414 0%, #4a1818 45%, #6b1d1d 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    3px 6px 12px rgba(26, 24, 20, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.book-tile:hover .bib-cover {
  transform: translateY(-2px) rotate(-0.6deg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    5px 10px 18px rgba(26, 24, 20, 0.35);
}
/* Featured tile (the marquee essay). A gilded gold frame with a thin oxblood
   keyline, drawn as an overlay so it hugs the cover's rounded corners and
   shows on all four sides regardless of the 2:3 crop — unlike a frame baked
   into the square source image, whose left/right edges get cropped away.
   Gold/oxblood are theme-locked design accents (like the medals), so the hex
   literals are intentional here. */
.bib-cover--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 3px solid #f0c14b;
  box-shadow: inset 0 0 0 1px #6b1d1d;
  pointer-events: none;
  z-index: 4;
}
/* O'Reilly Ruby Blog series (Dec 2005 + Transformation). These four posts
   first ran on oreillynet.com/ruby, not the Amazon-era Drunken Blog Rants
   collection they're mirrored into — so they get a ruby keyline frame to read
   as one set in the grid. Same overlay technique as --featured (hugs the
   rounded corners, immune to the 2:3 crop), drawn under it so a featured tile
   would still win. Ruby is a theme-locked accent (like the gold frame), hence
   the hex literal. */
.bib-cover--series-oreilly-ruby::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 2.5px solid #e11d3f;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 3;
}
/* "Death/Revenge of the X Developer" trilogy (Revenge of the Junior Developer,
   The Death of the Stubborn Developer, The Death of the Junior Developer) —
   Steve's signature AI-and-jobs set, scattered through the Sourcegraph era. A
   Sourcegraph Violet (#a112ff, their primary brand purple) keyline marks them
   as one trilogy in the grid — these are the Sourcegraph-era flagships, so the
   house color is the tell. Same overlay technique as the ruby frame (hugs the
   rounded corners, immune to the 2:3 crop); the vivid violet reads clearly
   over both the warm and the cool covers. Theme-locked brand accent (like the
   gold --featured / ruby frames), hence the hex literal. */
.bib-cover--series-developer-trilogy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 3px solid #a112ff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 3;
}
/* "Blogger's Block" series — the four lighthearted Sept 2006 posts (Joelprah,
   Anime for the Nonplussed, Dreaming in Browser Swamp, Ruby and Java and
   Stuff) Steve wrote to psych himself up for the controversial Good Agile,
   Bad Agile that followed ten days later. An azure keyline marks them as one
   set and reads as a cool counterpoint to the warm storybook covers. Same
   overlay technique as the ruby / violet frames. Theme-locked accent, hence
   the hex literal. */
.bib-cover--series-blogger-s-block::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 3px solid #2f7ed8;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 3;
}
/* "Good Agile, Bad Agile" trilogy (Good Agile Bad Agile → Egomania Itself →
   I Take It All Back! Send Me Your Money) — Steve's three-post 2006 assault on
   capital-A Agile, the set the azure Blogger's Block run was warming up for. A
   darkish-peach keyline marks them as one trilogy in the grid, a warm
   counterpoint to the cool azure of the lead-in posts right beside them. Same
   overlay technique as the ruby / violet / azure frames (hugs the rounded
   corners, immune to the 2:3 crop). Theme-locked accent, hence the hex literal. */
.bib-cover--series-good-agile-trilogy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 3px solid #d98c5e;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 3;
}
/* Borderlands pair (The Borderlands Gun Collector's Club → The Borderlands 2
   Gun Discarders Club) — Steve's two posts on what the game's loot economy says
   about hoarders vs. minimalists. A Borderlands legendary-loot orange keyline
   marks them as one set: in the game, orange is the rarity glow on legendary
   guns, so it's the on-the-nose color for two essays about collecting guns.
   Same overlay technique as the ruby / violet / azure / peach frames (hugs the
   rounded corners, immune to the 2:3 crop). Theme-locked accent, hence the hex
   literal. */
.bib-cover--series-borderlands::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 3px solid #ff7a00;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 3;
}
/* Mystery Machine Bus pair (Notes from the Mystery Machine Bus → Return of the
   Mystery Machine Bus) — the original liberal/conservative-axis essay and its
   sequel. A lime green keyline marks them as one set: the Mystery Machine (the
   Scooby-Doo van the title rides on) is famously green. Same overlay technique
   as the other series frames. Theme-locked accent, hence the hex literal. */
.bib-cover--series-mystery-machine-bus::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 3px solid #84cc16;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 3;
}
/* Amazon War Story #1 — paired with the Platforms Rant beside it (same Oct 2011
   month, the war story is the Amazon-side companion to the Google rant). The
   rant carries the gold --featured frame; the war story gets a matching gold
   keyline (same #f0c14b border + oxblood inset as --featured) so the two read
   as a deliberate pair in the grid. Single-cover "series" — the gold is the tell
   that links it to the featured rant, not a multi-post set. Theme-locked accent
   (twin of the gold --featured / medals), hence the hex literal. */
.bib-cover--series-amazon-platforms::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 3px solid #f0c14b;
  box-shadow: inset 0 0 0 1px #6b1d1d;
  pointer-events: none;
  z-index: 3;
}
/* Mock-news satire quartet (Hacker News Fires Steve Yegge, eBay Patents
   10-Click Checkout, Haskell Researchers Announce Discovery…, WikiLeaks to
   Leak 5000 Open Source Java Projects…) — Steve's Onion-style fake-tech-news
   headlines, which happen to sit in one unbroken run in the grid. A newsprint
   slate keyline marks them as one set; the joke is the deadpan sobriety —
   newspaper-ink grey wrapped around absurd headlines. Same overlay technique
   as the other series frames. Theme-locked accent, hence the hex literal. */
.bib-cover--series-mock-news::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 3px solid #5b6c7d;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 3;
}
/* Titles use the standard cover off-white (#f4e9d4, inherited from
   .bib-cover-text) — only the ruby keyline frame above marks the set; pink
   title text read as an eyesore in the grid. */
/* Image is the full cover background. */
.bib-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Title sits on top of the cover, vertically centered, filling the
   cover like a movie poster. Meme-poster typography: Anton (condensed
   display sans, Impact-style), all caps, big, with a hard black outline
   via stacked text-shadows. The art is background; the title is the
   navigation handle and should read from across the room. */
.bib-cover-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 6px 5px;
  text-align: center;
  color: #f4e9d4;
}
.bib-cover-text--top    { justify-content: flex-start; padding-top: 10px; }
.bib-cover-text--bottom { justify-content: flex-end;   padding-bottom: 10px; }
/* Band positions: title sits inside a translucent dark gradient strip
   along the top or bottom edge. The other ~70% of the cover is left
   unobstructed so the art reads. Best when the illustration has a
   strong central subject that the centered text was burying. */
.bib-cover-text--band-bottom {
  justify-content: flex-end;
  padding: 0;
}
.bib-cover-text--band-bottom .book-title {
  width: 100%;
  padding: 10px 6px 8px;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.82) 100%);
}
.bib-cover-text--band-top {
  justify-content: flex-start;
  padding: 0;
}
.bib-cover-text--band-top .book-title {
  width: 100%;
  padding: 8px 6px 10px;
  background: linear-gradient(0deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.82) 100%);
}
/* Corner positions: a small tag in one corner of the cover, like a
   library spine label or movie-credit slug. Leaves the image fully
   exposed. Pairs naturally with coverFont: "mono" or "serif". */
.bib-cover-text--corner-tl {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 7px 7px;
  text-align: left;
}
.bib-cover-text--corner-tr {
  justify-content: flex-start;
  align-items: flex-end;
  padding: 7px 7px;
  text-align: right;
}
.bib-cover-text--corner-bl {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 7px 7px;
  text-align: left;
}
.bib-cover-text--corner-br {
  justify-content: flex-end;
  align-items: flex-end;
  padding: 7px 7px;
  text-align: right;
}
.bib-cover-text--corner-tl .book-title,
.bib-cover-text--corner-tr .book-title,
.bib-cover-text--corner-bl .book-title,
.bib-cover-text--corner-br .book-title {
  display: inline-block;
  max-width: 78%;
}
.book-title {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-title--bebas,
.book-title--bebas-sm,
.book-title--bebas-16,
.book-title--bebas-xs {
  font-family: 'Bebas Neue', 'Helvetica Neue', 'Arial Narrow', sans-serif;
  font-weight: 400;     /* Bebas Neue ships single weight, condensed */
  font-size: 21px;
  line-height: 0.95;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  /* 1.5px hard black outline (stacked offsets, 4 corners + 4 cardinals)
     + soft drop shadow. Reads over any image — light, dark, or busy. */
  text-shadow:
    -1.5px -1.5px 0 rgba(0,0,0,0.95),
     1.5px -1.5px 0 rgba(0,0,0,0.95),
    -1.5px  1.5px 0 rgba(0,0,0,0.95),
     1.5px  1.5px 0 rgba(0,0,0,0.95),
       0 -1.5px 0 rgba(0,0,0,0.95),
       0  1.5px 0 rgba(0,0,0,0.95),
    -1.5px   0   0 rgba(0,0,0,0.95),
     1.5px   0   0 rgba(0,0,0,0.95),
       0    3px 6px rgba(0,0,0,0.55);
}
/* Size variants for Bebas covers whose longest word ("TRANSFORMATION",
   "POLYMORPHISM", "MARSHMALLOW", "PROGRAMMER", "MANAGEMENT") overflows
   the thumbnail width at the default 21px and gets clipped to a typo
   ("TRANSFORM", "POLYMORPH", "PROGRAMME"). Same Bebas treatment, just
   smaller — set coverFont: "bebas-sm" or "bebas-xs". */
.book-title--bebas-sm { font-size: 17px; }
/* One-pt notch below bebas-sm, keeping sm's letter-spacing — for a word
   that clips at 17px but where bebas-xs (15px, letter-spacing 0) reads too
   cramped. First use: "When Polymorphism Fails" (POLYMORPHISM, 12 chars). */
.book-title--bebas-16 { font-size: 16px; }
.book-title--bebas-xs { font-size: 15px; letter-spacing: 0; }
/* Serif variant — DM Serif Display, title case, lighter outline. Reads as
   "literary book cover" instead of "movie poster." Best for titles that
   crowd Bebas at thumbnail size, or just for visual variety. */
.book-title--serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.9),
     1px -1px 0 rgba(0,0,0,0.9),
    -1px  1px 0 rgba(0,0,0,0.9),
     1px  1px 0 rgba(0,0,0,0.9),
       0 -1px 0 rgba(0,0,0,0.9),
       0  1px 0 rgba(0,0,0,0.9),
    -1px   0   0 rgba(0,0,0,0.9),
     1px   0   0 rgba(0,0,0,0.9),
       0    3px 6px rgba(0,0,0,0.55);
}
/* Serif large — Cormorant Garamond, bigger and bolder, paperback-novel
   feel. Hard outline kept so it reads over busy art. */
.book-title--serif-lg {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.95),
     1px -1px 0 rgba(0,0,0,0.95),
    -1px  1px 0 rgba(0,0,0,0.95),
     1px  1px 0 rgba(0,0,0,0.95),
       0 -1px 0 rgba(0,0,0,0.95),
       0  1px 0 rgba(0,0,0,0.95),
    -1px   0   0 rgba(0,0,0,0.95),
     1px   0   0 rgba(0,0,0,0.95),
       0    3px 6px rgba(0,0,0,0.55);
}
/* Italic serif — Cormorant Garamond italic. Reads as literary epigraph
   or handwritten dedication. Mixed case. */
.book-title--italic {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.9),
     1px -1px 0 rgba(0,0,0,0.9),
    -1px  1px 0 rgba(0,0,0,0.9),
     1px  1px 0 rgba(0,0,0,0.9),
       0 -1px 0 rgba(0,0,0,0.9),
       0  1px 0 rgba(0,0,0,0.9),
    -1px   0   0 rgba(0,0,0,0.9),
     1px   0   0 rgba(0,0,0,0.9),
       0    3px 6px rgba(0,0,0,0.55);
}
/* Mono — JetBrains Mono, uppercase, tracked-out. Reads as "code journal"
   or technical-paper title. Small by design; pairs well with corner
   positions or with a band overlay. */
.book-title--mono {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.95),
     1px -1px 0 rgba(0,0,0,0.95),
    -1px  1px 0 rgba(0,0,0,0.95),
     1px  1px 0 rgba(0,0,0,0.95),
       0  2px 4px rgba(0,0,0,0.55);
}
/* Mono-tag — even smaller, for corner labels. JetBrains Mono. */
.book-title--mono-tag {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-weight: 600;
  font-size: 8.5px;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.95),
     1px -1px 0 rgba(0,0,0,0.95),
    -1px  1px 0 rgba(0,0,0,0.95),
     1px  1px 0 rgba(0,0,0,0.95);
}
/* Per-cover color overrides. Default ink is the warm paper #f4e9d4.
   Set coverColor on a bibliography entry to swap. */
.book-title--gold { color: #f0c14b; }
.book-title--cyan { color: #00e0ff; }
.book-title--cream { color: #f4e9d4; }
/* "White-clean" — pure white, no hard outline; soft drop-shadow only.
   For sepia/warm illustrations where the hard black stroke fights the
   image. Reads as an elegant book-jacket title, not a movie poster. */
.book-title--white-clean {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 0 12px rgba(0, 0, 0, 0.35);
}
/* "Ink" — dark, near-black title with a subtle warm-paper halo. For
   sepia covers with light/mid-tone backgrounds where dark ink reads
   like print on parchment. */
.book-title--ink {
  color: #1a120c;
  text-shadow:
    0 0 3px rgba(244, 233, 212, 0.85),
    0 0 8px rgba(244, 233, 212, 0.65),
    0 1px 2px rgba(244, 233, 212, 0.55);
}
/* Essentials star badge (and future tag badges). Sits top-right of the
   cover. Gold glyph on a dark stroke so it reads over any background.
   Unicode star — no icon font dependency. */
.bib-badge {
  position: absolute;
  top: 3px;
  right: 4px;
  z-index: 2;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1;
  color: #f0c14b;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85),
     1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85),
     1px  1px 0 rgba(0,0,0,0.85),
       0  1px 2px rgba(0,0,0,0.55);
  pointer-events: none;
}
.bib-badge--humor {
  left: 3px;
  right: auto;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
/* Turd: Steve's "not worth a read" mark. Top-right corner, sharing with the
   essentials star — the two can never appear on the same essay. Color emoji,
   so no glyph color of its own — just a drop shadow for contrast. */
.bib-badge--thumbsdown {
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
/* Thumbs-up: Steve's "good read" mark — pieces that stand the test of time
   but didn't earn an essentials star. Top-right corner, sharing with the
   star and the turd; all three are mutually exclusive on a given essay.
   Color emoji, so drop shadow only. */
.bib-badge--thumbsup {
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
/* Language nerd: deep programming-language-theory mark 🤓 (glasses + buck
   teeth). Top-right corner, sharing with the star, the turd, and the
   thumbs-up; all four are mutually exclusive on a given essay. Color emoji,
   so drop shadow only. */
.bib-badge--languagenerd {
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
/* Stories lens: storybook mark in the lower-left corner (clear of the
   top-left humor/thumbs-down and top-right essentials star). Stack of books
   📚 (swapped from the earlier 📖 — read better at thumbnail size). Color
   emoji — drop shadow only. */
.bib-badge--stories {
  top: auto;
  bottom: 3px;
  left: 3px;
  right: auto;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
/* Lower-right corner — shared by the gaming mark 🕹️ and the prediction marks
   🔮/🤡 (stories owns lower-left). Like the top-right quality set, they're
   mutually exclusive on a cover (no gaming essay is flagged a prediction), so
   they share the corner. Retro joystick reads cleaner than 🎮 at thumbnail
   size. Color emoji — drop shadow only. */
.bib-badge--gaming {
  top: auto;
  bottom: 3px;
  left: auto;
  right: 4px;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.bib-badge--prediction,
.bib-badge--predictionmiss {
  top: auto;
  bottom: 3px;
  left: auto;
  right: 4px;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

/* Badge legend — decodes the cover-corner marks (.bib-badge family) for the
   reader. Same glyphs as the covers; the star carries its gold fill so it
   reads as the same mark. Understated mono caption, wraps on narrow screens. */
.badge-legend {
  list-style: none;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px 28px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.badge-legend li {
  display: flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}
.badge-legend-glyph {
  font-size: 1rem;
  line-height: 1;
}
/* Gold star matches the .bib-badge--essentials glyph (theme-locked gold). */
.badge-legend-glyph--star {
  color: #f0c14b;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.55),
     1px -1px 0 rgba(0,0,0,0.55),
    -1px  1px 0 rgba(0,0,0,0.55),
     1px  1px 0 rgba(0,0,0,0.55);
}

/* Placeholder treatment: solid oxblood cover, no outline needed. */
.book-tile--no-cover .book-title {
  text-shadow: none;
}
.book-tile--no-cover .bib-cover::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(244, 233, 212, 0.22);
  border-radius: 1px;
  pointer-events: none;
}
@media (max-width: 720px) {
  .book-grid {
    grid-template-columns: repeat(auto-fill, 78px);
    column-gap: 12px;
    row-gap: 20px;
  }
  .book-title--bebas    { font-size: 18px; }
  .book-title--bebas-sm { font-size: 15px; }
  .book-title--bebas-16 { font-size: 14px; }
  .book-title--bebas-xs { font-size: 13px; }
  .book-title--serif    { font-size: 19px; }
  .book-title--serif-lg { font-size: 22px; }
  .book-title--italic   { font-size: 21px; }
  .book-title--mono     { font-size: 12px; }
  .book-title--mono-tag { font-size: 10px; }
}

/* TOC ribbon for the lower (non-essay) sections of bibliography.html. */
.bib-secondary-toc {
  margin: 0 0 52px;
  padding: 14px 18px;
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 4px;
  background: var(--paper-soft, rgba(0,0,0,0.02));
}
.bib-secondary-toc h2 {
  margin: 0 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim, #6c5d4a);
  font-weight: 500;
}
.bib-secondary-toc ol {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.bib-secondary-toc li { font-size: 14px; }
.bib-secondary-toc li span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: 0.55;
  margin-left: 4px;
}

/* — Press page hero figure — */
.press-hero {
  max-width: var(--max-w);
  margin: 0 auto 48px;
  padding: 0 28px;
}
.press-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.press-hero figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 12px;
}

/* — Gas Town page hero figure (shrunk; narrower than press hero) — */
.gastown-hero {
  max-width: var(--max-w-narrow);
  margin: 0 auto 40px;
  padding: 0 28px;
}
.gastown-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* ── By the numbers (Atlas archive coda) ─────────────────── */
.archive-stats {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
}
.archive-stats li {
  padding: 6px 0;
}
.archive-stats li + li {
  border-top: 1px dotted var(--border-light);
}
/* Left-justified bordered stat table (e.g. wyvern.html "Wyvern is huge").
   A tidy figure→meaning reference table, outlined so it reads as a panel. */
.stat-table {
  clear: right;
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  border: 1px solid var(--rule);
  background: var(--accent-bg);
  font-family: var(--font-body);
}
.stat-table th,
.stat-table td {
  text-align: left;
  vertical-align: baseline;
  padding: 7px 18px;
  border-bottom: 1px solid var(--border-light);
}
.stat-table tr:last-child th,
.stat-table tr:last-child td {
  border-bottom: none;
}
.stat-table th {
  width: 1%;
  white-space: nowrap;
  border-right: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.stat-table td {
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
}
.archive-stats .ratio {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  display: inline-block;
  min-width: 64px;
  text-align: right;
  margin-right: 14px;
  color: var(--accent);
}
.archive-stats-footnote {
  max-width: 560px;
  margin: 28px auto 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}
.archive-stats-footnote a {
  color: inherit;
  border-bottom: 1px dotted var(--border);
  text-decoration: none;
}

/* ============================================================
   Pagefind search UI (/search.html)
   The widget ships its own stylesheet (pagefind-ui.css); we only
   remap its CSS custom properties onto the site palette + fonts so
   it inherits oxblood-on-paper and flips with the dark theme for
   free. Scoped to .pf-search so nothing leaks. A few structural
   nudges below align the result list with the site's typography.
   ============================================================ */
.pf-search {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--paper-soft);
  --pagefind-ui-border: var(--rule);
  --pagefind-ui-tag: var(--paper-deep);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 2px;
  --pagefind-ui-image-border-radius: 2px;
  --pagefind-ui-font: var(--font-body);
  max-width: 720px;
}
/* Search box: mono chrome to match the site's input/affordance feel. */
.pf-search .pagefind-ui__search-input {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.2px;
  background: var(--paper);
}
.pf-search .pagefind-ui__search-clear { font-family: var(--font-mono); }
/* Result titles read as small headings; meta/excerpt as body copy. */
.pf-search .pagefind-ui__result-title {
  font-family: var(--font-display);
  font-weight: 600;
}
.pf-search .pagefind-ui__result-title a { color: var(--ink); }
.pf-search .pagefind-ui__result-title a:hover { color: var(--accent); }
.pf-search .pagefind-ui__result-excerpt {
  font-family: var(--font-body);
  color: var(--ink-soft);
  line-height: 1.55;
}
.pf-search mark {
  background: var(--accent-bg);
  color: var(--accent);
}
.pf-search .pagefind-ui__result-link { color: var(--ink); }
.pf-search .pagefind-ui__message,
.pf-search .pagefind-ui__button {
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}