/* ════════════════════════════════════════════════════════════════
   The New American Century — site.css
   Generated from the editorial system spec (v.1).
   Sections:
     1. Reset + variables
     2. Utilities (compass mask)
     3. Header
     4. Footer
     5. Currently (front page hero)
     6. Open Questions (front page sections)
     7. Book cover system
     8. Notes rail (front page)
     9. Article cover + reading body
    10. Article components (quotes, embeds, footnotes)
    11. Note card (short + long)
    12. Note context blocks
    13. Index pages (essays, notes)
    14. About page
    15. Subscribe band
    16. Responsive
   ══════════════════════════════════════════════════════════════ */

/* 1. Reset + variables ─────────────────────────────────────────── */
:root {
  --brand:        #FFB400;
  /* Retired the darkened gold — never use a dimmed accent; always the true brand yellow. */
  --brand-dk:     var(--brand);
  --ink:          #1A1A1A;
  --ink-deep:     #0A0A0A;
  --paper:        #FBFAF6;
  --paper-warm:   #F5F1E8;
  --muted:        #6E6A60;
  --faint:        rgba(26,26,26,0.10);
  --hairline:     rgba(26,26,26,0.18);
  --faint-i:      rgba(255,255,255,0.10);

  /* Essay palette */
  --c-brick:      #B72E2E;
  --c-forest:     #1F4A36;
  --c-plum:       #4F1F5F;
  --c-ochre:      #C9912E;
  --c-charcoal:   #2B2B2B;
  --c-marigold:   #FFB400;
  --c-ink:        #0A0A0A;

  --display:      'Satoshi', system-ui, -apple-system, sans-serif;
  --body:         'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --serif:        'IBM Plex Serif', Georgia, serif;
  --mono:         'IBM Plex Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Text selection — brand yellow with ink text */
::selection { background: var(--brand); color: var(--ink); }
::-moz-selection { background: var(--brand); color: var(--ink); }
html {
  background: var(--paper); color: var(--ink); font-family: var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; cursor: pointer; transition: color .15s; }
a:hover { color: var(--brand-dk); }
img { max-width: 100%; height: auto; display: block; }

/* 2. Utilities — compass mask-image ────────────────────────────── */
/* logo-mark.svg has a tight viewBox so the compass fills its container.
   Use logo.svg (with padding) for decorative ghost backgrounds where
   breathing room is wanted. */
.compass {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: url('/img/logo-mark.svg');
          mask-image: url('/img/logo-mark.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.compass-loose {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: url('/img/logo.svg');
          mask-image: url('/img/logo.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* 3. Header ───────────────────────────────────────────────────── */
.site-header { background: var(--paper); }
.site-header-inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
  padding: 24px 64px; max-width: 1600px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .compass { width: 32px; height: 32px; color: var(--ink); transition: color .2s; flex-shrink: 0; }
.brand:hover .compass { color: var(--brand); }
.brand-text { display: flex; align-items: center; line-height: 1; }
/* eyebrow — preserved for future restore */
.brand-text .small {
  font-family: var(--mono); font-weight: 500; font-size: 10px;
  letter-spacing: .25em; text-transform: uppercase; color: var(--muted);
  margin-right: 8px;
}
.brand-text .word {
  /* All-caps Satoshi — cap-height matched to compass height.
     Satoshi cap-ratio ≈ 0.73 (measured empirically). For compass H:
       font-size = H / 0.73
     30px compass → 41px font-size. */
  font-family: 'Satoshi', system-ui, sans-serif; font-weight: 700;
  font-size: 41px; line-height: 1;
  letter-spacing: .015em; text-transform: uppercase;
  color: var(--ink);
  display: inline-block;
}
.site-nav {
  display: flex; gap: 36px; align-items: center; justify-self: end;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500;
}
.site-nav a { color: var(--muted); padding: 4px 0; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--ink); border-bottom: 2px solid var(--brand); padding-bottom: 2px; }
/* scoped to .site-nav a.subscribe-pill so these win over the generic
   `.site-nav a` color rules (which otherwise force gray text, and black-on-black on hover) */
.site-nav a.subscribe-pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; background: var(--brand); color: var(--ink);
  display: inline-flex; align-items: center;
  padding: 11px 20px; border: 1px solid var(--brand); border-radius: 2px;
  transition: background .15s, color .15s, border-color .15s;
}
.site-nav a.subscribe-pill:hover { background: var(--ink); color: var(--brand); border-color: var(--ink); }

/* 4. Footer ───────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink-deep); color: var(--paper);
  border-top: 4px solid var(--brand);
  padding: 88px 64px 36px;
  position: relative; overflow: hidden;
}
.site-footer .compass-bg {
  position: absolute; right: -160px; bottom: -220px;
  width: 560px; height: 560px; color: var(--brand); opacity: .08;
  pointer-events: none;
}
.site-footer-inner {
  max-width: 1600px; margin: 0 auto;
  display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr; gap: 64px; align-items: start;
  position: relative; z-index: 2;
}
.site-footer .statement {
  font-family: var(--display); font-weight: 600; font-size: 26px;
  letter-spacing: -.02em; line-height: 1.22; color: var(--paper); max-width: 22ch;
}
.site-footer .statement .accent { color: var(--brand); }
.site-footer .foot-col h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 18px; font-weight: 600;
}
.site-footer .foot-col ul { list-style: none; }
.site-footer .foot-col li { font-family: var(--body); font-size: 14px; line-height: 2; color: rgba(255,255,255,.65); }
.site-footer .foot-col li a:hover { color: var(--brand); }
.site-footer .base {
  max-width: 1600px; margin: 64px auto 0;
  padding-top: 24px; border-top: 1px solid var(--faint-i);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.4); position: relative; z-index: 2; font-weight: 500;
}
.site-footer .base .sig { color: var(--brand); }

/* 5. Currently — front page hero ──────────────────────────────── */
.currently { background: var(--paper); }
.currently-inner { max-width: 920px; margin: 0 auto; padding: 64px 64px 96px; }
.currently-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); display: flex; gap: 24px; align-items: center; font-weight: 500;
  margin-bottom: 40px; flex-wrap: wrap;
}
.currently-meta .label { color: var(--ink); font-weight: 600; }
.currently-meta .sep { opacity: .4; }
.currently-body {
  font-family: var(--body); font-size: 19px; line-height: 1.65; color: var(--ink); font-weight: 400;
  max-width: 64ch;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.currently-body p + p { margin-top: 22px; }
/* Ordered lists — yellow counters, no trailing period */
.currently-body ol { list-style: none; counter-reset: ol-item; margin: 1.4em 0; padding-left: 0; }
.currently-body ol > li { counter-increment: ol-item; position: relative; padding-left: 2em; line-height: 1.65; }
.currently-body ol > li + li { margin-top: 12px; }
.currently-body ol > li::before {
  content: counter(ol-item); position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 700;
}
.currently-body strong { font-weight: 600; }
.currently-body em { font-style: italic; }
.currently-body mark {
  font-style: normal; font-weight: 600;
  background: var(--brand); padding: 1px 5px; color: var(--ink);
}
.currently-body blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 17px; line-height: 1.55; color: var(--ink);
  padding: 16px 24px; margin: 1.6em 0;
  border-left: 4px solid var(--brand); background: var(--paper-warm);
}
.currently-body blockquote p { margin-bottom: .8em; }
.currently-body blockquote p:last-child { margin-bottom: 0; }
.currently-body .end-mark {
  margin: 40px 0 0; display: flex; justify-content: flex-start;
  color: var(--brand);
}
.currently-body .end-mark .compass { width: 28px; height: 28px; }
.currently-body a {
  border-bottom: 1px solid var(--brand); padding-bottom: 0;
}
.currently-body a:hover { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }
.currently-foot { margin-top: 48px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* Share row — icons only, no labels */
.share-row {
  display: flex; gap: 6px; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.share-row .share-label { margin-right: 8px; }
.share-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: var(--ink); border: 1px solid var(--ink);
  transition: background .15s, color .15s, border-color .15s;
}
.share-row a:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.share-row a svg { width: 18px; height: 18px; }
.share-row a.copy.copied { background: var(--ink); color: var(--brand); border-color: var(--ink); }

/* 6. Open Questions section ────────────────────────────────────── */
.questions-frame { background: var(--paper); }
.questions-masthead {
  max-width: 1600px; margin: 0 auto; padding: 96px 64px 56px; position: relative;
}
.questions-masthead .compass-bg {
  position: absolute; right: 64px; top: 40px;
  width: 320px; height: 320px; color: var(--ink); opacity: .045;
  pointer-events: none;
}
.questions-masthead h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(56px, 8vw, 128px); line-height: .9; letter-spacing: -.045em;
  color: var(--ink); text-transform: uppercase;
  position: relative; z-index: 2;
}
.questions-masthead h2 .lined {
  display: inline-block; border-bottom: 6px solid var(--brand); padding-bottom: 6px;
}

.main-frame {
  max-width: 1600px; margin: 0 auto;
  padding: 0 64px 96px;
  display: grid; grid-template-columns: 1fr 360px; gap: 96px;
}

.q-sections { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--ink); }
.q-section { padding: 80px 0 88px; border-bottom: 1px solid var(--ink); }

.q-head {
  display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start;
  margin-bottom: 64px;
}
.q-head .q-num {
  font-family: var(--display); font-weight: 700; font-size: 128px;
  line-height: .82; letter-spacing: -.05em; color: var(--ink);
}
.q-head .q-text { padding-top: 12px; }
.q-head .q-title {
  font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.05; letter-spacing: -.025em;
  color: var(--ink); margin-bottom: 18px; max-width: 28ch;
}
.q-head .q-title .accent { background: var(--brand); padding: 0 8px; color: var(--ink); }
.q-head .q-desc {
  font-family: var(--body); font-weight: 400; font-size: 17px; line-height: 1.6;
  color: var(--ink); max-width: 60ch; opacity: .8;
}

.q-foot {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  flex-wrap: wrap;
}
.q-foot .working {
  font-family: var(--body); font-style: normal; font-size: 14px; color: var(--ink); font-weight: 500;
}
.q-foot .working::before {
  content: 'Working: '; font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); font-weight: 500; margin-right: 4px;
}
.q-foot a.q-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px;
  display: inline-flex; align-items: center; gap: 10px;
}
.q-foot a.q-link::after { content: '→'; font-size: 14px; }
.q-foot a.q-link:hover { color: var(--brand-dk); border-color: var(--brand); }

.q-section.stub .bookshelf {
  display: flex; align-items: center; gap: 24px;
  padding: 32px; background: var(--paper-warm); border: 1px dashed var(--hairline);
}
.q-section.stub .stub-note {
  font-family: var(--body); font-size: 15px; color: var(--ink); line-height: 1.55; max-width: 56ch;
}
.q-section.stub .stub-note strong { background: var(--brand); padding: 1px 5px; font-weight: 600; }
.q-section.stub .stub-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  background: repeating-linear-gradient(135deg, var(--brand) 0 8px, transparent 8px 16px);
}

/* 7. Book cover system ─────────────────────────────────────────── */
.bookshelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 32px 28px; padding-top: 8px;
}
.book {
  --c: var(--brand); --t: var(--ink); --sp: rgba(0,0,0,0.18);
  background: var(--c); color: var(--t);
  aspect-ratio: 5/7;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.10),
    0 6px 10px rgba(0,0,0,0.10),
    0 14px 26px rgba(0,0,0,0.14);
  transition: transform .2s ease, box-shadow .2s ease;
  background-image: linear-gradient(90deg, var(--sp) 0, var(--sp) 4px, transparent 4px);
  overflow: hidden;
}
.book:hover {
  color: var(--t);
  transform: translateY(-4px);
  box-shadow:
    0 2px 3px rgba(0,0,0,0.10),
    0 10px 16px rgba(0,0,0,0.12),
    0 24px 42px rgba(0,0,0,0.18);
}
.book.c-brick    { --c: var(--c-brick);    --t: var(--paper); --sp: rgba(0,0,0,0.30); }
.book.c-forest   { --c: var(--c-forest);   --t: var(--paper); --sp: rgba(0,0,0,0.30); }
.book.c-plum     { --c: var(--c-plum);     --t: var(--paper); --sp: rgba(0,0,0,0.30); }
.book.c-ochre    { --c: var(--c-ochre);    --t: var(--ink);   --sp: rgba(0,0,0,0.20); }
.book.c-charcoal { --c: var(--c-charcoal); --t: var(--paper); --sp: rgba(255,255,255,0.10); }
.book.c-marigold { --c: var(--c-marigold); --t: var(--ink);   --sp: rgba(0,0,0,0.18); }
.book.c-ink      { --c: var(--ink-deep);   --t: var(--paper); --sp: rgba(255,255,255,0.10); }

.book-cover-area { flex: 1; padding: 18px 18px 0 22px; display: flex; flex-direction: column; }
.book-top {
  display: flex; justify-content: space-between; align-items: start;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; opacity: .85;
}
.book-mark { width: 18px; height: 18px; opacity: .85; }
.book-mark .compass { width: 100%; height: 100%; color: currentColor; }
.book-label-area { padding: 0 18px 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.book-title {
  font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.02; letter-spacing: -.022em;
}
.book-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; opacity: .75; padding-top: 10px; border-top: 1px solid currentColor;
}
.book.latest::after {
  content: 'NEW';
  position: absolute; top: 16px; right: 0;
  background: var(--ink); color: var(--brand);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  padding: 4px 10px 5px; font-weight: 700;
  z-index: 2;
}
.book.c-charcoal.latest::after,
.book.c-ink.latest::after { background: var(--brand); color: var(--ink); }
.book.latest .book-top { margin-top: 30px; }

/* 8. Notes rail (front page) ───────────────────────────────────── */
.notes-rail { position: sticky; top: 24px; align-self: start; padding-top: 80px; }
.notes-rail-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 36px; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.notes-rail-head h2 {
  font-family: var(--display); font-weight: 700; font-size: 36px;
  color: var(--ink); letter-spacing: -.025em; line-height: 1; text-transform: uppercase;
}
.notes-rail-head a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.notes-rail-head a:hover { color: var(--ink); }
.notes-rail-list { display: flex; flex-direction: column; gap: 0; }
.rail-note { padding: 24px 0; border-bottom: 1px solid var(--faint); display: block; }
.rail-note:first-child { padding-top: 0; }
.rail-note.latest {
  background: var(--brand); padding: 24px 22px;
  margin: 0 -22px 8px;
  border-bottom: none;
}
.rail-note-meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; display: flex; gap: 12px; align-items: center; font-weight: 500;
}
.rail-note-meta .thread { color: var(--ink); font-weight: 700; }
.rail-note-meta .new-tag {
  background: var(--ink); color: var(--brand); padding: 3px 8px 4px; font-weight: 700;
}
.rail-note.latest .rail-note-meta { color: var(--ink); }
.rail-note-body { font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--ink); }
.rail-note.latest .rail-note-body { font-size: 17px; font-weight: 500; }
.rail-note-body em { font-style: italic; }
.rail-note-body mark { font-style: normal; font-weight: 600; background: transparent; color: inherit; }
.rail-note.latest .rail-note-body mark {
  background: var(--ink); color: var(--brand); padding: 1px 5px;
}

/* 9. Article cover + reading body ──────────────────────────────── */
.article-cover {
  background: var(--essay, var(--brand)); color: var(--essay-text, var(--ink));
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
.article-cover.c-brick    { --essay: var(--c-brick);    --essay-text: var(--paper); }
.article-cover.c-forest   { --essay: var(--c-forest);   --essay-text: var(--paper); }
.article-cover.c-plum     { --essay: var(--c-plum);     --essay-text: var(--paper); }
.article-cover.c-ochre    { --essay: var(--c-ochre);    --essay-text: var(--ink); }
.article-cover.c-charcoal { --essay: var(--c-charcoal); --essay-text: var(--paper); }
.article-cover.c-marigold { --essay: var(--c-marigold); --essay-text: var(--ink); }
.article-cover.c-ink      { --essay: var(--ink-deep);   --essay-text: var(--paper); }
.article-cover-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 96px 64px 88px;
  position: relative; z-index: 2;
  min-height: 78vh;
  display: flex; flex-direction: column;
}
.article-cover-top {
  display: flex; justify-content: space-between; align-items: start;
  margin-bottom: auto;
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600;
}
.article-cover-top .left { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.article-cover-top .crumb { opacity: .75; }
.article-cover-top .num { font-weight: 700; }
.article-cover-top .sep { opacity: .3; }
.article-cover-top .back {
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.article-cover-top .compass-mark { width: 36px; height: 36px; }
.article-cover-title-block { margin-top: 80px; }
.article-cover h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(64px, 8.4vw, 144px); line-height: .92; letter-spacing: -.038em;
  color: currentColor; margin-bottom: 32px;
  /* Cap line length in em (relative to the display size, not the inherited 16px),
     so titles wrap to a couple of balanced lines instead of one word per line. */
  max-width: 13em; text-wrap: balance;
}
.article-cover-deck {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.32; letter-spacing: -.018em;
  color: currentColor; max-width: 40ch; margin-bottom: 56px; opacity: .88;
}
.article-cover-bottom {
  margin-top: auto; padding-top: 32px;
  border-top: 1px solid rgba(0,0,0,0.18);
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
}
.article-cover.c-brick .article-cover-bottom,
.article-cover.c-forest .article-cover-bottom,
.article-cover.c-plum .article-cover-bottom,
.article-cover.c-charcoal .article-cover-bottom,
.article-cover.c-ink .article-cover-bottom { border-top-color: rgba(255,255,255,0.18); }
.article-cover-byline {
  font-family: var(--display); font-weight: 600; font-size: 18px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.article-cover-byline .by {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500; opacity: .65;
}
.article-cover-facts {
  display: flex; gap: 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600;
}
.article-cover-facts .fact { display: flex; flex-direction: column; gap: 4px; }
.article-cover-facts .fact .label { font-size: 9px; opacity: .55; letter-spacing: .25em; font-weight: 500; }

.reading { background: var(--paper); }
.reading-grid {
  max-width: 1280px; margin: 0 auto;
  padding: 96px 64px 96px;
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px;
  gap: 56px; position: relative;
}
/* Explicit placement so the article stays centered even when the TOC is absent
   (an empty toc_block must not let the article fall into the nav column). */
.reading-grid .toc { grid-column: 1; }
.reading-grid .article { grid-column: 2; }
.reading-grid .share-rail { grid-column: 3; }
.article-share-row { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); }

/* Share — right rail, sticky alongside the article */
.share-rail {
  position: sticky; top: 24px; align-self: start;
}
.share-rail .share-row {
  flex-direction: column; align-items: flex-start; gap: 14px;
  margin: 0; flex-wrap: nowrap;
}
.share-rail .share-row .share-label { margin: 0 0 4px; }

/* TOC — left rail */
.toc {
  position: sticky; top: 24px; align-self: start;
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 500;
}
.toc .toc-label {
  margin-bottom: 16px; color: var(--muted); font-size: 10px; letter-spacing: .25em;
  padding-bottom: 10px; border-bottom: 1px solid var(--hairline);
}
.toc .toc-list { list-style: none; counter-reset: toc; }
/* top-level section entries — numbered */
.toc li.toc-h1 {
  counter-increment: toc;
  padding: 10px 0; border-bottom: 1px solid var(--faint);
}
.toc li.toc-h1 > a {
  display: block; position: relative; padding-left: 30px;
  color: var(--ink); line-height: 1.35;
}
.toc li.toc-h1 > a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 0; color: var(--muted);
}
/* nested subsection entries — un-numbered, sentence case, brand tick */
.toc .toc-sub { list-style: none; margin: 8px 0 2px; padding-left: 30px; }
.toc li.toc-h2 { padding: 5px 0; }
.toc li.toc-h2 > a {
  display: block; position: relative; padding-left: 16px;
  text-transform: none; letter-spacing: .01em; font-size: 11px;
  color: var(--muted); line-height: 1.3;
}
.toc li.toc-h2 > a::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 2px; background: var(--brand);
}
.toc a { color: var(--ink); transition: color .15s; }
.toc a:hover { color: var(--brand-dk); }
.toc li.toc-h2 > a:hover { color: var(--ink); }
.aside-rail {
  position: sticky; top: 24px; align-self: start;
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 500;
}
.aside-rail .label { font-size: 10px; color: var(--muted); margin-bottom: 16px; letter-spacing: .25em; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.aside-rail .fact { padding: 12px 0; border-bottom: 1px solid var(--faint); display: flex; flex-direction: column; gap: 4px; }
.aside-rail .fact .k { color: var(--muted); font-size: 9px; letter-spacing: .25em; }
.aside-rail .fact .v { color: var(--ink); font-weight: 600; font-size: 12px; letter-spacing: .12em; }
.aside-rail .actions { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.aside-rail .actions a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--ink); padding: 9px 12px; text-align: center; font-weight: 600;
}
.aside-rail .actions a:hover { background: var(--brand); border-color: var(--brand); }
.aside-rail .actions a.primary { background: var(--ink); color: var(--paper); }
.aside-rail .actions a.primary:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); }

.article {
  font-family: var(--body);
  font-size: 19px; line-height: 1.65; color: var(--ink);
  max-width: 64ch;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.article > * { margin-bottom: 1em; }
.article > *:last-child { margin-bottom: 0; }
.article p { margin-bottom: 1.2em; font-weight: 400; }
.article p strong { font-weight: 600; }
.article p em { font-style: italic; }
.article a { border-bottom: 1px solid var(--brand); padding-bottom: 0; }
.article a:hover { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }
/* h1 — major section head: large, with a short brand rule above it */
.article h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(36px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -.03em;
  color: var(--ink); margin: 2.4em 0 1em; scroll-margin-top: 32px;
}
.article h1::before {
  content: ''; display: block; width: 56px; height: 4px;
  background: var(--brand); margin-bottom: 28px;
}
/* h2 — subsection: distinguished from h1 by size + weight alone (no rule/bar) */
.article h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 2.9vw, 34px); line-height: 1.14; letter-spacing: -.02em;
  color: var(--ink); margin: 2em 0 .7em; scroll-margin-top: 32px;
}
.article h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 1.9vw, 22px); line-height: 1.25; letter-spacing: -.01em;
  color: var(--ink); margin: 1.8em 0 .6em;
}
.article ul { margin: 1.2em 0 1.6em 1.4em; }
.article li { margin-bottom: .8em; line-height: 1.6; }
.article ul li::marker { color: var(--brand); }
/* Ordered lists — yellow counters, no trailing period */
.article ol { list-style: none; counter-reset: ol-item; margin: 1.2em 0 1.6em 0; padding-left: 0; }
.article ol > li { counter-increment: ol-item; position: relative; padding-left: 2em; }
.article ol > li::before {
  content: counter(ol-item); position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 700;
}
.article img { max-width: 100%; }
.article figure { margin: 1.6em 0; }

/* Embedded media (YouTube etc.) — imported iframes hard-code width="728" height="409".
   Make them fluid and hold a 16:9 box so they never force horizontal page scroll on
   narrow screens. */
.article iframe {
  display: block;
  width: 100%; max-width: 100%;
  aspect-ratio: 16 / 9; height: auto;
  margin: 1.6em 0; border: 0;
}

/* Image frame — brand crop-mark corner brackets */
.article .img-frame {
  position: relative; display: block;
  width: fit-content; max-width: 100%;
  margin: 1.6em auto; padding: 7px;
}
.article figure .img-frame { margin: 0 auto; }
.article .img-frame > img,
.article .img-frame > picture,
.article .img-frame > picture > img {
  display: block; max-width: 100%; height: auto; margin: 0;
}
.article .img-frame::before,
.article .img-frame::after {
  content: ''; position: absolute; width: 24px; height: 24px; pointer-events: none;
}
.article .img-frame::before { top: 0; left: 0; border-top: 3px solid var(--brand); border-left: 3px solid var(--brand); }
.article .img-frame::after { bottom: 0; right: 0; border-bottom: 3px solid var(--brand); border-right: 3px solid var(--brand); }
.article figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-top: 8px; font-weight: 500;
}

/* 10. Article components ───────────────────────────────────────── */
.article blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 17px; line-height: 1.55; color: var(--ink);
  padding: 18px 28px;
  border-left: 4px solid var(--brand); background: var(--paper-warm);
  margin: 1.6em 0;
}
.article blockquote p { margin-bottom: .8em; }
.article blockquote p:last-child { margin-bottom: 0; }

.video-embed {
  margin: 2em 0; background: var(--ink); color: var(--paper); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden;
}
.video-embed::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand);
}
.video-embed .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  font-weight: 600; color: var(--brand);
}
.video-embed .title {
  font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--paper);
}

/* In-text endnote marker — superscript number linking down to the endnote */
.fn-link {
  font-family: var(--mono); font-size: 0.7em; color: var(--brand-dk);
  vertical-align: super; line-height: 0; border-bottom: none; padding: 0 1px 0 2px;
  font-weight: 700; scroll-margin-top: 32px;
}
.fn-link:hover { color: var(--brand); }

.end-mark {
  max-width: 64ch; margin: 64px auto 0;
  display: flex; justify-content: center;
  color: var(--brand);
}
.end-mark .compass { width: 36px; height: 36px; }

.footnotes {
  max-width: 64ch; margin: 64px auto 0;
  padding-top: 32px; border-top: 2px solid var(--ink);
  font-family: var(--body); font-size: 15px; line-height: 1.6;
}
.footnotes h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 24px;
}
.footnotes ol { list-style: none; counter-reset: fn; }
.footnotes li {
  counter-increment: fn; padding-left: 36px; position: relative; margin-bottom: 20px;
}
.footnotes li::before {
  content: counter(fn); position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--brand-dk); letter-spacing: .15em;
}

/* Endnotes — Substack-style footnote blocks (.footnote / .footnote-number /
   .footnote-content), grouped under an "Endnotes" head. Each number links back to
   its in-text marker; the in-text marker links down here. */
.article .endnotes {
  max-width: 64ch; margin: 72px auto 0;
  padding-top: 28px; border-top: 2px solid var(--ink);
}
.article .endnotes-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 8px;
}
.article .footnote {
  display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--faint);
  font-family: var(--body); font-size: 15px; line-height: 1.62; color: var(--ink);
  scroll-margin-top: 32px; margin: 0;
}
.article .footnote:last-child { border-bottom: none; }
/* the number is a link back up to the referencing marker */
.article .footnote-number {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--brand-dk);
  border-bottom: none; text-align: right; padding-top: 1px; transition: color .15s;
}
.article .footnote-number:hover { color: var(--brand); }
.article .footnote-number::after { content: '↩'; display: block; font-size: 11px; opacity: .55; }
.article .footnote-content p { margin-bottom: .55em; }
.article .footnote-content p:last-child { margin-bottom: 0; }
.article .footnote-content a { border-bottom: 1px solid var(--brand); }

/* 11. Note card ────────────────────────────────────────────────── */
.note-page { max-width: 920px; margin: 0 auto; padding: 64px 64px 96px; }
.note-crumbs {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 36px;
}
.note-crumbs a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.note-crumbs a:hover { color: var(--brand-dk); border-bottom-color: var(--brand); }
.note-crumbs .sep { opacity: .35; }
.note-crumbs .current { color: var(--muted); }

.note-card {
  background: var(--paper); border: 2px solid var(--ink);
  padding: 48px 56px 40px; position: relative;
}
.note-card.is-latest::before {
  content: 'LATEST';
  position: absolute; top: 0; right: 0;
  background: var(--brand); color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .25em;
  font-weight: 700; padding: 8px 14px 9px;
}
.note-meta {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  margin-bottom: 36px;
}
.note-meta .date { color: var(--ink); font-weight: 700; }
.note-meta .sep { opacity: .35; }
.note-meta .thread { color: var(--ink); font-weight: 700; }
.note-meta .num { color: var(--brand-dk); font-weight: 700; }
.note-meta .format {
  margin-left: auto; background: var(--ink); color: var(--brand);
  padding: 4px 9px 5px; font-weight: 700; font-size: 10px;
}

.note-body--display {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.22; letter-spacing: -.02em;
  color: var(--ink);
}
.note-body--display em { font-style: italic; }
.note-body--display mark {
  font-style: normal; font-weight: 600;
  background: var(--brand); color: var(--ink); padding: 0 .12em;
}
.note-body--display a {
  border-bottom: 2px solid var(--brand); padding-bottom: 0;
}
.note-body--display a:hover { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }

.note-body--reading {
  font-family: var(--body); font-size: 19px; line-height: 1.65; color: var(--ink); font-weight: 400;
  max-width: 60ch;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.note-body--reading p { margin-bottom: 1.15em; }
.note-body--reading p:last-child { margin-bottom: 0; }
.note-body--reading p strong { font-weight: 600; }
.note-body--reading p em { font-style: italic; }
.note-body--reading p mark {
  font-style: normal; font-weight: 600;
  background: var(--brand); color: var(--ink); padding: 1px 5px;
}
.note-body--reading blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 17px; line-height: 1.55; color: var(--ink);
  padding: 16px 24px; margin: 1.6em 0;
  border-left: 4px solid var(--brand); background: var(--paper-warm);
}
.note-body--reading blockquote p { margin-bottom: .8em; }
.note-body--reading blockquote p:last-child { margin-bottom: 0; }
.note-body--display blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.32; color: var(--ink);
  padding: 16px 24px; margin: 1em 0;
  border-left: 4px solid var(--brand); background: var(--paper-warm);
}
.note-body--reading a { border-bottom: 1px solid var(--brand); padding-bottom: 0; }
.note-body--reading a:hover { color: var(--brand-dk); border-bottom-color: var(--brand-dk); }
.note-body--reading ul { list-style: none; margin: 1.2em 0; padding: 0; }
.note-body--reading ul li {
  padding: 10px 0 10px 28px; position: relative;
  border-top: 1px solid var(--faint);
}
.note-body--reading ul li:last-child { border-bottom: 1px solid var(--faint); }
.note-body--reading ul li::before {
  content: ''; position: absolute; left: 0; top: 18px;
  width: 14px; height: 2px; background: var(--brand);
}
.note-body--reading ol {
  margin: 2em 0 2em 0;
  padding-left: 0;
  list-style: none;
  counter-reset: ol-item;
}
.note-body--reading ol li {
  counter-increment: ol-item;
  position: relative;
  padding: 6px 0 6px 2em;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}
.note-body--reading ol li::before {
  content: counter(ol-item); position: absolute; left: 0; top: 6px;
  color: var(--brand); font-weight: 700;
}

.note-foot {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.note-foot .byline {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.note-foot .note-share .share-row { margin: 0; }

/* End mark — brand-yellow compass flush with the last line of the note body */
.note-end-mark {
  width: .82em; height: .82em; margin-left: .32em;
  color: var(--brand); vertical-align: -.06em;
}

/* 12. Note context blocks ──────────────────────────────────────── */
.context { max-width: 920px; margin: 0 auto; padding: 0 64px 80px; }
.context-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.context-head h2 {
  font-family: var(--display); font-weight: 700; font-size: 28px;
  letter-spacing: -.02em; text-transform: uppercase; line-height: 1; color: var(--ink);
}
.context-head .link { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.context-question {
  background: var(--paper-warm); padding: 28px 32px;
  display: grid; grid-template-columns: 80px 1fr auto; gap: 32px; align-items: center;
  border-left: 4px solid var(--brand);
}
.context-question:hover { background: var(--paper); }
.context-question .num {
  font-family: var(--display); font-weight: 700; font-size: 64px;
  line-height: .82; letter-spacing: -.04em; color: var(--ink);
}
.context-question .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px; font-weight: 600;
}
.context-question .title {
  font-family: var(--display); font-weight: 600; font-size: 22px;
  line-height: 1.15; letter-spacing: -.018em; color: var(--ink); max-width: 36ch;
}
.context-question .title .accent { background: var(--brand); padding: 0 6px; }
.context-question .arrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
}

.adjacent { max-width: 920px; margin: 0 auto; padding: 0 64px 80px; }
.adjacent-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.adjacent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adjacent-card {
  padding: 24px 28px; background: var(--paper); border: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
  transition: background .15s, border-color .15s;
}
.adjacent-card:hover { background: var(--paper-warm); border-color: var(--ink); }
.adjacent-card.next { text-align: right; }
.adjacent-card .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.adjacent-card .meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); display: flex; gap: 10px; font-weight: 500;
}
.adjacent-card.next .meta { justify-content: flex-end; }
.adjacent-card .meta .thread { color: var(--brand-dk); font-weight: 700; }
.adjacent-card .preview {
  font-family: var(--body); font-size: 15px; line-height: 1.5; color: var(--ink); font-weight: 400;
}
.adjacent-card .preview em { font-style: italic; }
.adjacent-card .preview mark { font-style: normal; font-weight: 600; background: var(--brand); color: var(--ink); padding: 0 4px; }

.related {
  background: var(--paper-warm); border-top: 1px solid var(--ink);
  padding: 96px 64px;
}
.related-inner { max-width: 1400px; margin: 0 auto; }
.related-head {
  display: flex; justify-content: space-between; align-items: end;
  border-bottom: 1px solid var(--ink); padding-bottom: 16px; margin-bottom: 32px;
}
.related-head h3 {
  font-family: var(--display); font-weight: 700; font-size: 44px;
  letter-spacing: -.025em; line-height: 1; text-transform: uppercase; color: var(--ink);
}
.related-head .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* 13. Index pages (essays / notes) ─────────────────────────────── */
.index-page { max-width: 1600px; margin: 0 auto; padding: 64px 64px 96px; }
.index-head {
  margin-bottom: 56px; padding-bottom: 24px; border-bottom: 2px solid var(--ink);
}
.index-head .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px; font-weight: 500;
}
.index-head h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(56px, 8vw, 128px); line-height: .9; letter-spacing: -.045em;
  color: var(--ink); text-transform: uppercase;
}
.index-head h1 .accent { background: var(--brand); padding: 0 .15em; color: var(--ink); }
.index-head .deck {
  font-family: var(--display); font-weight: 500; font-size: 22px;
  letter-spacing: -.015em; line-height: 1.4; color: var(--muted); max-width: 56ch; margin-top: 24px;
}
.index-shelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 32px 28px;
}
.index-group-head {
  font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -.022em;
  text-transform: uppercase; color: var(--ink); margin: 56px 0 20px;
  padding-bottom: 10px; border-bottom: 1px solid var(--ink);
}
.index-group-head:first-child { margin-top: 0; }

.notes-feed { display: flex; flex-direction: column; gap: 0; max-width: 920px; }
.feed-note {
  padding: 32px 0; border-bottom: 1px solid var(--hairline); display: block;
}
.feed-note:first-child { padding-top: 0; }
.feed-note:hover { background: var(--paper-warm); padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; }
.feed-note-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; display: flex; gap: 16px; align-items: center; font-weight: 500;
}
.feed-note-meta .thread {
  color: var(--ink); font-weight: 700;
}
.feed-note-meta .format-tag {
  background: var(--ink); color: var(--brand); padding: 3px 7px 4px; font-weight: 700; font-size: 10px;
}
.feed-note-body { font-family: var(--body); font-size: 16px; line-height: 1.55; color: var(--ink); }
.feed-note-body em { font-style: italic; }
.feed-note-body mark { font-style: normal; font-weight: 600; background: var(--brand); color: var(--ink); padding: 0 4px; }

/* 14. About page ───────────────────────────────────────────────── */
.about { max-width: 920px; margin: 0 auto; padding: 64px 64px 96px; }
.about-head { margin-bottom: 48px; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.about-head h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(48px, 6vw, 88px); line-height: .92; letter-spacing: -.038em;
  color: var(--ink); text-transform: uppercase;
}
.about-body {
  font-family: var(--body); font-size: 19px; line-height: 1.65; color: var(--ink); font-weight: 400;
  max-width: 64ch;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.about-body p { margin-bottom: 1.2em; }
.about-body p strong { font-weight: 600; }
.about-body p em { font-style: italic; }
.about-body p mark {
  font-style: normal; font-weight: 600;
  background: var(--brand); padding: 1px 5px; color: var(--ink);
}
.about-body h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05; letter-spacing: -.022em; color: var(--ink); margin: 2em 0 .8em;
}
.about-body a { border-bottom: 1px solid var(--brand); }
.about-body ul, .about-body ol { margin: 1.2em 0 1.6em 1.4em; }
.about-body li { margin-bottom: .6em; line-height: 1.6; }

/* Subscribe form — used on /subscribe/, inside .about-body */
.subscribe-form { margin: 2em 0 2.4em; max-width: 520px; }
.subscribe-form-label {
  display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink); opacity: .7;
  margin-bottom: 8px;
}
.subscribe-form-row { display: flex; gap: 8px; }
.subscribe-form-input {
  flex: 1; padding: 12px 14px; font-family: var(--body); font-size: 17px;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 0;
  outline: none;
}
.subscribe-form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft, rgba(255,180,0,.3)); }
.subscribe-form-button {
  padding: 12px 20px; font-family: var(--display); font-weight: 700;
  font-size: 15px; letter-spacing: .015em;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 0;
  cursor: pointer; transition: background .12s, color .12s;
}
.subscribe-form-button:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.subscribe-form-button:disabled { opacity: .5; cursor: not-allowed; }
.subscribe-form-status {
  min-height: 1.4em; margin: 12px 0 0;
  font-family: var(--body); font-size: 15px; color: var(--ink);
}
.subscribe-form-status[data-kind="error"] { color: #b03a2e; }
.subscribe-form-status[data-kind="ok"] { color: var(--ink); font-weight: 600; }
.subscribe-form-status[data-kind="pending"] { opacity: .7; }

/* Question detail page */
.question-page { max-width: 1100px; margin: 0 auto; padding: 64px 64px 96px; }
.question-head {
  display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start;
  margin-bottom: 56px; padding-bottom: 32px; border-bottom: 2px solid var(--ink);
}
.question-head .num {
  font-family: var(--display); font-weight: 700; font-size: 168px;
  line-height: .82; letter-spacing: -.05em; color: var(--ink);
}
.question-head .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; font-weight: 500;
}
.question-head h1 {
  font-family: var(--display); font-weight: 700; font-size: clamp(36px, 4vw, 56px);
  line-height: 1.04; letter-spacing: -.028em; color: var(--ink); max-width: 28ch;
}
.question-head h1 .accent { background: var(--brand); padding: 0 8px; color: var(--ink); }
.question-head .desc {
  font-family: var(--body); font-size: 19px; line-height: 1.55;
  color: var(--ink); margin-top: 22px; max-width: 60ch; opacity: .85;
}

/* 15. Subscribe band ───────────────────────────────────────────── */
.subscribe-band {
  background: var(--ink); color: var(--paper);
  padding: 64px 64px;
  text-align: center;
}
.subscribe-band-inner { max-width: 720px; margin: 0 auto; }
.subscribe-band h3 {
  font-family: var(--display); font-weight: 600; font-size: 32px;
  letter-spacing: -.02em; line-height: 1.18; margin-bottom: 16px;
}
.subscribe-band p {
  font-family: var(--body); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.7);
  max-width: 56ch; margin: 0 auto 28px;
}
.subscribe-band form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.subscribe-band input {
  flex: 1; background: transparent; border: 1px solid rgba(255,255,255,.3);
  color: var(--paper); padding: 12px 14px; font-family: var(--body); font-size: 14px;
}
.subscribe-band input:focus { outline: none; border-color: var(--brand); }
.subscribe-band button {
  background: var(--brand); color: var(--ink); border: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  padding: 12px 18px; cursor: pointer;
}
.subscribe-band button:hover { background: var(--paper); }

/* 16. Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .site-header-inner { padding: 22px 32px; gap: 20px; }
  .brand .compass { width: 30px; height: 30px; }
  .brand-text .word { font-size: 38px; }
  .site-nav { gap: 22px; }

  .currently-inner { padding: 48px 32px 72px; }
  .currently-body { font-size: 17px; }

  .questions-masthead { padding: 64px 32px 48px; }
  .questions-masthead h2 { font-size: clamp(48px, 11vw, 96px); }
  .questions-masthead .compass-bg { width: 220px; height: 220px; right: 32px; top: 32px; }

  .main-frame { padding: 0 32px 80px; grid-template-columns: 1fr; gap: 48px; }
  .q-head { grid-template-columns: 120px 1fr; gap: 32px; margin-bottom: 48px; }
  .q-head .q-num { font-size: 96px; }
  .q-head .q-title { font-size: 30px; }
  .q-section { padding: 64px 0 72px; }

  .bookshelf { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 22px; }

  .notes-rail { position: static; padding-top: 32px; border-top: 1px solid var(--ink); margin-top: 32px; }

  .site-footer { padding: 64px 32px 32px; }
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-footer .statement { grid-column: 1 / -1; font-size: 22px; }

  .article-cover-inner { padding: 64px 32px 56px; min-height: auto; }
  /* minmax(0,1fr) (not 1fr) so a wide child — an iframe, a long URL — can't blow the
     single column past the viewport and trigger horizontal scroll. */
  .reading-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 64px 32px; }
  .reading-grid .toc, .reading-grid .article, .reading-grid .share-rail { grid-column: 1; min-width: 0; }
  .article { max-width: 64ch; margin: 0 auto; }

  /* TOC — drop out of the sticky rail and become a static "Contents" panel above the
     article. Sticky positioning here (inherited from the desktop rail) froze the list
     at the top of the viewport, overlapping the body text as it scrolled underneath. */
  .toc {
    position: static; top: auto;
    max-width: 64ch; margin: 0 auto; align-self: stretch;
    padding: 22px 26px; background: var(--paper-warm); border: 1px solid var(--hairline);
  }
  .toc .toc-label { margin-bottom: 14px; }
  .share-rail { position: static; align-self: stretch; max-width: 64ch; margin: 8px auto 0;
    padding-top: 24px; border-top: 1px solid var(--hairline); }
  .share-rail .share-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .share-rail .share-row .share-label { margin: 0 8px 0 0; }
  .related { padding: 64px 32px; }
  .note-page { padding: 48px 32px 64px; }
  .context, .adjacent { padding: 0 32px 56px; }
  .note-card { padding: 36px 36px 32px; }
  .context-question { grid-template-columns: 60px 1fr auto; gap: 24px; padding: 22px 24px; }
  .context-question .num { font-size: 48px; }
  .context-question .title { font-size: 18px; }
  .index-page { padding: 48px 32px 80px; }
  .index-shelf { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 22px; }
  .about { padding: 48px 32px 80px; }
  .question-page { padding: 48px 32px 80px; }
  .question-head { grid-template-columns: 120px 1fr; gap: 32px; }
  .question-head .num { font-size: 128px; }
  .subscribe-band { padding: 56px 32px; }
}

@media (max-width: 640px) {
  /* Brand takes the flexible column (was a greedy empty 1fr spacer, which starved the
     wordmark down to its min-content width and forced a 3-line wrap). Drop the spacer so
     the wordmark gets the room to sit on two lines next to the compact nav. */
  .site-header-inner { grid-template-columns: 1fr auto; gap: 10px; padding: 16px 20px; }
  .site-header-inner > span { display: none; }
  .brand .compass { width: 23px; height: 23px; }
  .brand-text .word { font-size: 26px; }
  .brand-text .small { font-size: 9px; }
  /* Keep the essentials reachable on phones. Previously the whole nav was
     display:none, which stranded mobile users with no search and no subscribe.
     Show a compact search icon + subscribe pill; About stays reachable in the footer. */
  .site-nav { display: flex; gap: 12px; align-items: center; }
  .site-nav > a[href="/about/"] { display: none; }
  .nav-search { padding: 4px 2px; }
  .site-nav a.subscribe-pill { padding: 8px 11px; font-size: 10px; letter-spacing: .12em; }

  .currently-inner { padding: 32px 20px 56px; }
  .currently-meta { flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
  .currently-body { font-size: 16px; line-height: 1.6; }
  .currently-body p + p { margin-top: 16px; }
  .currently-foot { margin-top: 36px; }

  /* Ragged-right on phones. Justifying a ~38-character column stretches word spaces
     into distracting "rivers"; left-aligned reads cleaner at this width. */
  .currently-body, .article, .note-body--reading, .about-body { text-align: left; }

  .questions-masthead { padding: 48px 20px 36px; }
  .questions-masthead h2 { font-size: clamp(40px, 13vw, 64px); }
  .questions-masthead .compass-bg { display: none; }

  .main-frame { padding: 0 20px 64px; gap: 36px; }
  /* Stack the number above the title so the title gets the full column width
     instead of being squeezed into ~270px beside the big numeral. */
  .q-head { grid-template-columns: 1fr; gap: 6px; margin-bottom: 36px; }
  .q-head .q-num { font-size: 64px; line-height: .85; }
  .q-head .q-text { padding-top: 0; }
  .q-head .q-title { font-size: 24px; margin-bottom: 12px; }
  .q-head .q-desc { font-size: 15px; }
  .q-section { padding: 48px 0 56px; }

  .bookshelf { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .book-cover-area { padding: 14px 14px 0 18px; }
  .book-label-area { padding: 0 14px 14px 18px; }
  .book-title { font-size: 17px; }

  .q-foot { margin-top: 32px; }

  .notes-rail { padding-top: 28px; }
  .notes-rail-head h2 { font-size: 30px; }

  .site-footer { padding: 56px 20px 28px; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer .statement { font-size: 20px; }
  .site-footer .base { font-size: 9px; }

  .article-cover-inner { padding: 40px 20px 32px; }
  .article-cover-top { flex-wrap: wrap; gap: 14px; }
  .article-cover-title-block { margin-top: 48px; }
  .article-cover h1 { font-size: clamp(40px, 12vw, 64px); }
  .article-cover-deck { font-size: 18px; margin-bottom: 36px; }
  .article-cover-bottom { grid-template-columns: 1fr; gap: 20px; }
  .article-cover-facts { flex-wrap: wrap; gap: 20px; }
  .reading-grid { padding: 48px 20px; gap: 28px; }
  .article { font-size: 17px; }
  .article blockquote { padding: 14px 18px; font-size: 16px; }
  .related { padding: 56px 20px; }
  .related-head h3 { font-size: 28px; }
  .note-page { padding: 32px 20px 56px; }
  .context, .adjacent { padding: 0 20px 48px; }
  .note-card { padding: 28px 24px; }
  .note-meta { gap: 10px; font-size: 10px; margin-bottom: 24px; }
  .note-body--display { font-size: clamp(22px, 6.4vw, 30px); }
  .note-body--reading { font-size: 17px; }
  .note-foot { flex-direction: column; align-items: start; gap: 18px; }
  .context-question { grid-template-columns: 48px 1fr; gap: 16px; padding: 20px; }
  .context-question .num { font-size: 36px; }
  .context-question .title { font-size: 16px; }
  .context-question .arrow { display: none; }
  .adjacent-grid { grid-template-columns: 1fr; gap: 12px; }
  .adjacent-card.next { text-align: left; }
  .adjacent-card.next .meta { justify-content: flex-start; }
  .index-page { padding: 32px 20px 64px; }
  .index-head h1 { font-size: clamp(40px, 13vw, 64px); }
  .index-shelf { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .about { padding: 32px 20px 64px; }
  .about-body { font-size: 17px; }
  .question-page { padding: 32px 20px 64px; }
  .question-head { grid-template-columns: 1fr; gap: 6px; }
  .question-head .num { font-size: 80px; line-height: .85; }
  .subscribe-band { padding: 48px 20px; }
  .subscribe-band h3 { font-size: 24px; }
  .subscribe-band form { flex-direction: column; }
}

/* ── Search ──────────────────────────────────────────────────────── */
/* Nav search button — styled to sit between the gray nav links and the gold pill */
.nav-search {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500; padding: 4px 0; transition: color .15s;
}
.nav-search:hover { color: var(--ink); }
.nav-search svg { width: 15px; height: 15px; }

.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; justify-content: center;
  padding: 10vh 20px 20px;
  animation: search-fade .12s ease-out;
}
.search-overlay[hidden] { display: none; }
@keyframes search-fade { from { opacity: 0; } to { opacity: 1; } }

.search-panel {
  width: 100%; max-width: 720px; align-self: flex-start;
  background: var(--paper); border: 1px solid var(--ink);
  border-radius: 4px; box-shadow: 0 24px 60px rgba(10,10,10,0.35);
  display: flex; flex-direction: column; max-height: 80vh; overflow: hidden;
}

.search-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--hairline);
}
.search-input-icon { width: 20px; height: 20px; color: var(--muted); flex: none; }
.search-input {
  flex: 1; border: 0; background: none; outline: none;
  /* Display (Satoshi) — the site's heading/deck voice; serif is reserved for article reading. */
  font-family: var(--display); font-weight: 500; font-size: 24px;
  letter-spacing: -.015em; color: var(--ink);
}
.search-input::placeholder { color: var(--muted); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-esc {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--hairline); border-radius: 3px;
  padding: 3px 6px; flex: none;
}

.search-status {
  padding: 12px 20px; border-bottom: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500; color: var(--muted);
}
.search-status:empty { display: none; }

.search-results { overflow-y: auto; }
.search-result {
  display: block; padding: 16px 20px; border-bottom: 1px solid var(--hairline);
  color: var(--ink); transition: background .1s;
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result.is-active { background: var(--paper-warm); }

.search-result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
/* Type badge — echoes the feed format-tag (mono, 700, ink/brand) */
.search-result-type {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 7px 4px; border-radius: 2px; flex: none;
}
.search-result-type.type-essay { background: var(--brand); color: var(--ink); }
.search-result-type.type-note  { background: var(--ink); color: var(--brand); }
.search-result-title {
  font-family: var(--display); font-weight: 600; font-size: 18px;
  letter-spacing: -.015em; color: var(--ink);
}
.search-result:hover .search-result-title, .search-result.is-active .search-result-title { color: var(--brand-dk); }
.search-result-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500; color: var(--muted); margin-left: auto;
}
.search-result-snippets { display: flex; flex-direction: column; gap: 4px; }
/* Snippet body — IBM Plex Sans, matching the notes-feed / rail preview text */
.search-snippet {
  font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--muted);
}
.search-snippet mark {
  background: rgba(255,180,0,0.32); color: var(--ink);
  border-radius: 2px; padding: 0 1px; font-weight: 600;
}

@media (max-width: 720px) {
  .nav-search-label { display: none; }
  .search-overlay { padding: 6vh 12px 12px; }
  .search-input { font-size: 20px; }
}