/* self-hosted fonts (latin subsets, woff2) — no external requests */
@font-face { font-family: 'Cardo'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/cardo-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cardo'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/cardo-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cardo'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/cardo-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/newsreader-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/newsreader-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibmplexmono-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibmplexmono-500-normal.woff2') format('woff2'); }

/* Anti-Mythicism — ink on paper.

   Typography: Cardo for headings and quoted claims, Newsreader for reading
   text, IBM Plex Mono for every piece of apparatus (labels, indices, sources).
   Serif = argument, mono = machinery.

   Layout is unchanged: a single --shell width for every band, and on articles
   three tracks — claim index | claim + response | sources in the margin. */

:root {
  /* Outer container: menus, claim index and sources all align to this.
     It is exactly toc + body + refs + two gaps. */
  --shell: 84rem;
  --gut: clamp(1rem, 4vw, 2.25rem);
  --measure: 40rem;        /* reading measure — home page prose */
  --home-measure: 52rem;   /* broader editorial measure on the landing page */
  --body: 45rem;           /* centre column: title, lede and response text */
  --quote: 40rem;          /* their claim — inset from the body */
  --refs: 16rem;           /* apparatus rail */
  --toc: 15rem;            /* claim index */
  --colgap: 4rem;
  --entrygap: 3.5rem;
  --r: 0px;

  --sans: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --display: "Cardo", "Newsreader", Georgia, serif;
}

/* Dark is the site default: the page read by lamplight. Brass and prussian
   both lift, because at these luminances the light values fail contrast. */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d0f12;
  --paper-sunk: #14171b;
  --panel: #111417;
  --ink: #e4e7e3;
  --ink-soft: #949c97;
  --ink-faint: #6e766f;
  --rule: #2c3236;
  --rule-strong: #3c444a;
  --brass: #c9a648;
  --prussian: #8fb3da;
  --prussian-lift: #a8c6e6;
  --ref-lit: #24374b;
}

/* Light: ink on paper, via the toggle only. */
[data-theme="light"] {
  color-scheme: light;
  --paper: #f2f3f1;
  --paper-sunk: #e9ebe7;
  --panel: #f7f8f6;
  --ink: #14171a;
  --ink-soft: #5c635f;
  --ink-faint: #878e89;
  --rule: #d5d8d2;
  --rule-strong: #bfc4bc;
  --brass: #9a7d33;
  --prussian: #1f3a5f;
  --prussian-lift: #2d5384;
  --ref-lit: #dde4ec;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  transition: background-color 0.2s ease, color 0.2s ease;
}
a { color: var(--prussian); text-underline-offset: 2.5px; }
a:hover { color: var(--prussian-lift); }
:focus-visible { outline: 2px solid var(--prussian); outline-offset: 3px; }
::selection { background: var(--ref-lit); color: var(--ink); }

/* the one label style: every piece of apparatus on the site */
.claim > h2::before,
.claim .response::before,
.refs h3,
.claimnav__t,
.sources h2,
.plain--label > h2,
.sourceline {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* the two structural labels carry the page, so they are set louder */
.claim > h2::before,
.claim .response::before {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
}
.claim > h2::before { color: var(--brass); }
.claim .response::before { color: var(--prussian); }

/* URLs are never shouted */
.sourceline { text-transform: none; letter-spacing: 0.04em; font-size: 0.75rem; }

/* ---------- the width system ---------- */
.bar { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }
.layout { max-width: var(--shell); margin: 0 auto; padding: 3rem var(--gut) 4rem; }
main { min-width: 0; }

.skip { position: absolute; left: -999px; }
.skip:focus {
  left: 0; top: 0; z-index: 30;
  background: var(--prussian); color: var(--paper);
  padding: 0.6rem 1rem;
}

/* ---------- masthead ----------
   The wordmark and controls run out to the page edges; the topics list below
   stays bound to --shell, aligned with the claim index and sources rail. */
.topbar .bar { max-width: none; }
/* +2 gutters so that, after this bar's own padding, the pills land on exactly
   the same left and right edges as the claim index and sources rail */
.sitenav .bar { max-width: calc(var(--shell) + 2 * var(--gut)); }

.topbar {
  position: sticky; top: 0; z-index: 10;
  padding: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar .bar { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2.5rem); min-height: 7rem; }
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand strong { color: var(--brass); font-weight: 700; }
.mastnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  margin-left: auto;
}
.mastnav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.35rem 0;
}
.mastnav a:hover,
.mastnav a:focus-visible { color: var(--ink); border-bottom-color: var(--brass); }
.topbar-actions { display: flex; align-items: center; gap: 0.5rem; }

.themetoggle,
.navtoggle {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.themetoggle:hover,
.navtoggle:hover { color: var(--ink); border-color: var(--brass); }
.themetoggle { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; }
.navtoggle { padding: 0.4rem 0.9rem; }

/* site search */
.sitesearch {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  width: 9rem;
  padding: 0.42rem 0.7rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  transition: border-color 0.15s, width 0.2s ease;
}
.sitesearch::placeholder { color: var(--ink-faint); text-transform: uppercase; }
.sitesearch:focus { outline: none; border-color: var(--brass); width: 13rem; }
.searchresults {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.75rem 0 0.9rem;
}
.searchresults ol { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.searchresults li { margin: 0; }
.searchresults a {
  display: block;
  padding: 0.42rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-decoration: none;
}
.searchresults a:hover { color: var(--ink); background: var(--paper-sunk); }
.searchresults strong { color: var(--ink); font-weight: 500; }
.searchresults .none {
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--ink-faint); padding: 0.4rem 0.5rem;
}
@media (max-width: 68rem) {
  .topbar .bar { gap: 0.75rem; }
  .mastnav { gap: clamp(0.6rem, 1.6vw, 1rem); }
  .mastnav a { font-size: 0.64rem; letter-spacing: 0.08em; }
  .sitesearch { display: none; }
}
@media (max-width: 52rem) { .mastnav { display: none; } }
@media (max-width: 46rem) {
  .sitesearch { display: none; }
  .topbar .bar { min-height: 5rem; }
}
.navtoggle[aria-expanded="true"] { color: var(--ink); border-color: var(--brass); }

/* dark (default) shows the sun; light shows the moon */
.themetoggle svg { display: none; }
:root:not([data-theme="light"]) .themetoggle .ic-sun { display: block; }
[data-theme="light"] .themetoggle .ic-moon { display: block; }

/* ---------- topics bar ---------- */
.sitenav { display: none; }
.sitenav.open { display: block; }
@media (max-width: 62rem) {
  .sitenav.open:not(.open--user) { display: none; }
}
.sitenav {
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0 1.15rem;
  max-height: min(60vh, 30rem); overflow-y: auto;
}
.sitenav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.35rem;
}
.sitenav a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.sitenav a:hover { color: var(--ink); border-bottom-color: var(--brass); }
.sitenav a.current { color: var(--ink); border-bottom-color: var(--brass); }
.sitenav a.draft { color: var(--ink-faint); pointer-events: none; }

/* ---------- typography ---------- */
h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 1.15rem;
}
h2 { font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1.2; margin: 0 0 1.15rem; }
h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 1.6rem 0 0.5rem; }
p { margin: 0 0 1.15rem; }

.topic > h1,
.topic > .lede,
.topic > .sourceline { text-align: center; }

/* article titles are set in quotation marks — added in CSS so the page
   <title> and social metadata stay clean */
.topic > h1::before { content: "\201C"; }
.topic > h1::after { content: "\201D"; }
.notfound .topic > h1::before,
.notfound .topic > h1::after { content: none; }
.lede {
  max-width: none;
  color: var(--ink-soft);
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}
.sourceline {
  margin: 0;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.sourceline a { color: var(--prussian); }
.draftflag {
  font-family: var(--mono); font-size: 0.75rem;
  padding: 0.75rem 1rem; margin: 1.75rem 0 0;
  background: var(--paper-sunk); border-left: 3px solid var(--brass);
  color: var(--ink-soft);
}
.intro { max-width: var(--measure); margin: 2.5rem 0; }
.intro > p:first-child { font-size: 1.125rem; }

/* ---------- Orthodox flourishes ---------- */
/* Venerated names carry quiet emphasis; the cross is disclosed on intent. */
.sx-name {
  position: relative;
  display: inline-block;
  padding-right: 0.58em;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--brass) 65%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.sx {
  position: absolute;
  right: 0;
  top: 0.15em;
  color: var(--brass);
  font-size: 0.68em;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  opacity: 0;
  transform: translateY(0.15em) scale(0.82);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.sx-name:hover .sx,
.sx-name:focus .sx,
.sx-name:focus-within .sx { opacity: 1; transform: translateY(0) scale(1); }
.sx-name:focus { outline: none; }
.sx-name:focus-visible { outline: 1px dotted var(--brass); outline-offset: 2px; }
a .sx { text-decoration: none; }
.sx--t { top: 0.05em; font-size: 0.42em; }

/* manuscript drop cap on the opening paragraph of each article */
.topic .withtoc > .intro > p:first-child::first-letter,
.home .intro > p:nth-of-type(2)::first-letter {
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.1em;
  line-height: 0.82;
  float: left;
  color: var(--brass);
  padding: 0.06em 0.12em 0 0;
}

/* footer colophon */
.colophon {
  text-align: center;
  color: var(--brass);
  font-size: 0.9rem;
  margin: 0 0 1.5rem !important;
  max-width: none !important;
}
.colophon::before, .colophon::after {
  content: "";
  display: inline-block;
  width: 4.5rem;
  border-top: 1px solid var(--rule);
  vertical-align: 0.32em;
  margin: 0 1rem;
}

/* ---------- the article grid ----------
   Full page width: the body column keeps its reading measure and stays
   centred on the page, while the claim index and the sources are pushed out
   into the margins. Outer tracks are equal (1fr each) so the body sits on the
   page centre line regardless of the two rails being different widths. */
.topic-page .layout { max-width: none; }

/* the header sits over the body column and shares its width */
.topic > h1,
.topic > .lede,
.topic > .sourceline {
  max-width: var(--body);
  margin-left: auto;
  margin-right: auto;
}

.withtoc { display: block; max-width: var(--shell); margin: 0 auto; }
.claimnav { display: none; }

/* content inside the grid fills its column rather than keeping a narrower
   measure — the body column is the measure */
.withtoc > .intro,
.claim .response > p,
.claim .response > ul,
.claim .response > ol,
.claim .response blockquote { max-width: none; }

@media (min-width: 62rem) {
  .withtoc {
    display: grid;
    grid-template-columns: minmax(0, var(--body)) var(--refs);
    column-gap: var(--colgap);
    align-items: start;
    justify-content: center;
  }
  .withtoc > .claim,
  .withtoc > .pf,
  .withtoc > .intro,
  .withtoc > .sources,
  .withtoc > .footnotes { grid-column: 1; }
  .withtoc > .refs { grid-column: 2; }
}

@media (min-width: 78rem) {
  .withtoc {
    grid-template-columns: var(--toc) minmax(0, var(--body)) var(--refs);
  }
  .withtoc > .claimnav {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 100;
  }
  .withtoc > .claim,
  .withtoc > .pf,
  .withtoc > .intro,
  .withtoc > .sources,
  .withtoc > .footnotes { grid-column: 2; }
  .withtoc > .refs { grid-column: 3; }
}

.claimnav {
  position: sticky; top: 4.5rem;
  align-self: start;
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
  padding-top: 3.5rem;
  scrollbar-width: thin;
}
.claimnav__t { margin: 0 0 1rem; }
.claimnav ol { list-style: none; margin: 0; padding: 0; counter-reset: claim; }
.claimnav li { counter-increment: claim; margin: 0 0 0.85rem; }
.claimnav a {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-decoration: none;
  padding-left: 1.6rem;
  text-indent: -1.6rem;
  display: block;
  transition: color 0.15s;
}
.claimnav a::before {
  content: counter(claim) ".";
  color: var(--prussian);
  display: inline-block;
  width: 1.6rem;
  text-indent: 0;
}
.claimnav a:hover { color: var(--ink); }
.claimnav a.current { color: var(--ink); }
.claimnav a.current::before { color: var(--brass); }

/* ---------- claim + response ---------- */
.claim {
  min-width: 0;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 4.5rem;
}

/* the claim, as they state it. No character cap on the heading: these are
   full quoted claims, not short editorial lines, and a narrow cap leaves them
   wrapping to five ragged lines in the middle of a much wider column. */
.claim > h2 {
  margin-bottom: 1.35rem;
}
.claim > h2::before {
  content: "Mythicist Claim";
  display: block;
  margin-bottom: 0.7rem;
}
/* our own editorial sections sit on claim pages too: same geometry, but they
   are not their claims and must not carry the label */
.claim.essay > h2::before,
.claim.essay .response::before { content: none; }
/* their claim, framed as a small window onto the source site: a title bar
   carrying the page it came from, over a recessed panel */
.claim > blockquote {
  position: relative;
  max-width: var(--quote);
  margin: 0 auto 2.5rem;
  padding: 1.5rem 1.5rem 2.6rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--brass);
  box-shadow: inset 0 3px 10px -6px rgba(0, 0, 0, 0.45);
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
}
/* the source page, bottom right, as the window's provenance line */
.claim > blockquote::after {
  content: var(--src, "mythicism.web.app");
  position: absolute; right: 1.1rem; bottom: 0.85rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--ink-faint);
}
.claim > blockquote p { margin: 0 0 0.6rem; }
.claim > blockquote p:last-child { margin-bottom: 0; }
.claim > blockquote strong {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  display: block;
  margin-bottom: 0.6rem;
}

/* the response */
.claim .response { min-width: 0; }
.claim .response::before {
  content: "Response";
  display: block;
  margin-bottom: 0.9rem;
}
.claim .response blockquote {
  margin: 0 0 1.15rem;
  padding: 0.4rem 0 0.4rem 1.25rem;
  border-left: 2px solid var(--rule-strong);
  color: var(--ink-soft);
}
.claim ul, .claim ol { padding-left: 1.35rem; margin: 0 0 1.15rem; }
.claim li { margin-bottom: 0.5rem; }

/* ---------- profile pages ----------
   A dossier, not a rebuttal: numbered sections, plain headings, and quotes
   attributed to whoever actually said them. No claim/response apparatus. */
.pf {
  min-width: 0;
  padding: 3.25rem 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 4.5rem;
  counter-increment: pf;
}
.pf > h2 {
  margin-bottom: 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.pf > h2::before {
  content: counter(pf, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.pf > blockquote {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.4rem;
  background: var(--paper-sunk);
  border-left: 3px solid var(--rule-strong);
  font-family: var(--display);
  font-size: 1.14rem;
  line-height: 1.5;
  color: var(--ink);
}
.pf > blockquote p { margin: 0 0 0.6rem; }
.pf > blockquote p:last-child { margin-bottom: 0; }
.pf > blockquote strong {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pf .response { min-width: 0; }
.pf ul, .pf ol { padding-left: 1.35rem; margin: 0 0 1.15rem; }
.pf li { margin-bottom: 0.5rem; }
.profile-page .withtoc { counter-reset: pf; }
.profile-page .layout { padding-top: 2.5rem; }

/* fact file — the book at a glance */
.factfile {
  margin: 2rem 0 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.55;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.55rem 1.25rem;
}
.factfile dt {
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.66rem;
  padding-top: 0.18rem;
}
.factfile dd { margin: 0; color: var(--ink); }
.factfile dd em { color: var(--ink-soft); font-style: italic; }

/* claim permalinks — a quiet § on each claim heading that copies a deep link */
.linkcopy {
  margin-left: 0.55rem;
  padding: 0 0.3rem;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 0.7em;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  vertical-align: super;
}
h2:hover .linkcopy, .linkcopy:focus-visible { opacity: 1; }
.linkcopy:hover { color: var(--brass); }
.linkcopy--done { opacity: 1; color: var(--brass); letter-spacing: 0.08em; }
@media (hover: none) { .linkcopy { opacity: 0.55; } }

/* previous / next topic, foot of every article */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--body);
  margin: 3.5rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.pager__a { text-decoration: none; max-width: 46%; }
.pager__a span {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}
.pager__a b {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.15s;
}
.pager__a:hover b { color: var(--brass); }
.pager__a--next { text-align: right; margin-left: auto; }

/* book card — cover and factfile side by side (christ-before-jesus) */
.bookcard {
  display: grid;
  grid-template-columns: minmax(9rem, 12.5rem) minmax(0, 1fr);
  gap: 1.4rem 1.8rem;
  align-items: start;
  margin: 2.2rem 0;
}
.bookcard .fig { margin: 0; max-width: none; }
.bookcard .factfile {
  margin: 0;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.45rem 1rem;
  font-size: 0.76rem;
}
@media (max-width: 46rem) {
  .bookcard { grid-template-columns: 1fr; }
  .bookcard .fig { max-width: 15rem; margin: 0 auto; }
}

/* reception ledger */
.pf table { font-family: var(--mono); font-size: 0.78rem; }
.pf th { color: var(--brass); }
.pf td:first-child { white-space: nowrap; color: var(--ink); }

@media (max-width: 46rem) {
  .factfile { grid-template-columns: 1fr; gap: 0.15rem; }
  .factfile dd { margin-bottom: 0.6rem; }
}

/* apparatus rail — static, top-aligned with the claim it supports. Sticky
   notes collide with the next claim's notes at the row boundary. */
.refs {
  align-self: start;
  margin-top: 3.5rem;
  border-left: 1px solid var(--rule);
  padding-left: 1.5rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.refs h3 { margin: 0 0 1rem; }
/* numbered continuously down the page by the build, so a note's number is a
   stable page-wide reference */
.refs ol { list-style: none; margin: 0; padding: 0; }
.refs ul { list-style: none; margin: 0; padding: 0; counter-reset: ref; }
.refs li {
  counter-increment: ref;
  margin: 0 0 1rem;
  padding-left: 1.8rem;
  text-indent: -1.8rem;
}
.refs li::before {
  content: attr(value) ".";
  color: var(--prussian);
  display: inline-block;
  width: 1.8rem;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
}
.refs a { color: var(--prussian); }
.refs em, .refs i { font-style: italic; }

/* ---------- figures ----------
   Centred in the column, set below full column width, caption right-aligned
   under the image's bottom-right corner with a prominent Fig. label. */
.fig {
  margin: 2.5rem auto;
  max-width: min(30rem, 85%);
}
.withtoc > .fig { grid-column: 2; }
@media (max-width: 78rem) { .withtoc > .fig { grid-column: 1; } }
.fig img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--rule-strong);
  background: var(--paper-sunk);
  cursor: zoom-in;
}
.fig a { display: block; }

/* ---------- lightbox ----------
   Figures enlarge in place; the external credit is the caption's source
   link, never the image itself. Injected by the shell script. */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgb(8 9 11 / 0.88);
  cursor: zoom-out;
}
.lightbox figure { margin: 0; max-width: 92vw; }
.lightbox img {
  display: block;
  margin: 0 auto;
  max-width: 92vw;
  max-height: 84vh;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}
.lightbox figcaption {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: #cfd3ce;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.fig figcaption {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: right;
}
.fig__n {
  display: block;
  color: var(--brass);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.fig__src { color: var(--prussian); white-space: nowrap; }
.figlist {
  padding: 2rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.figlist h2 {
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.figlist ol { list-style: none; margin: 0; padding: 0; max-width: 48rem; }
.figlist li { margin-bottom: 0.55rem; }
.figlist a { color: var(--prussian); }
.withtoc > .figlist { grid-column: 2; }
@media (max-width: 78rem) { .withtoc > .figlist { grid-column: 1; } }

/* ---------- bibliography ---------- */
.sources {
  padding: 3rem 0 0;
  font-size: 1.075rem;
  color: var(--ink-soft);
}
.sources li:target { color: var(--ink); }
.sources h2 { margin: 0 0 1.25rem; }
.sources ol { padding-left: 1.5rem; max-width: 48rem; }
.sources li { margin-bottom: 0.7rem; }
.sources a { color: var(--prussian); }

.fnref a { font-family: var(--mono); font-size: 0.7em; color: var(--prussian); text-decoration: none; padding: 0 0.1em; }
.footnotes {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 48rem;
}
.footnotes ol { padding-left: 1.4rem; margin: 0; }
.footnotes li { margin-bottom: 0.5rem; }
.fnback { text-decoration: none; }

/* ---------- home ---------- */
.home h1 { margin-bottom: 0.75rem; }
.home .intro,
.home .plain:not(.plain--label) {
  max-width: var(--home-measure);
  margin-left: auto;
  margin-right: auto;
}
.home .intro { max-width: none; }
.home .intro > h1 { text-align: center; }
.home .intro > p { max-width: var(--home-measure); margin-left: auto; margin-right: auto; }
.home .intro > p:first-of-type {
  max-width: none; text-align: center;
  font-family: var(--display); font-size: 1.3rem; line-height: 1.4;
  color: var(--ink-soft);
}
.home .intro > p:first-of-type strong { font-weight: 400; }
.home .cta-row { justify-content: center; }
.home .plain > h2 { text-align: center; }

.plain { margin: 0 0 2.5rem; max-width: var(--measure); }
.plain > h2 { margin: 3rem 0 1.25rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.plain ul, .plain ol { padding-left: 1.35rem; }
.plain li { margin-bottom: 0.6rem; }

.plain--label { max-width: none; }
.plain--label > h2 {
  text-align: center;
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.plain--label > p {
  max-width: var(--measure);
  margin: 0.9rem auto 0;
  text-align: center;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* stats strip */
.stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 2.25rem;
  margin: 2.25rem auto 0 !important;
  max-width: none !important;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.stats b { color: var(--brass); font-weight: 500; margin-right: 0.3rem; }
.stats a { color: var(--prussian); }

/* start-here pathways */
.pathways { list-style: none; margin: 1.5rem auto 0; padding: 0; max-width: var(--measure); }
.pathways li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.25rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  counter-increment: path;
}
.pathways li:last-child { border-bottom: 1px solid var(--rule); }
.pathways li::before {
  content: counter(path, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--brass);
}
.pathways a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
}
.pathways a:hover { color: var(--prussian); }
.pathways span {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-left: auto;
  text-align: right;
}
@media (max-width: 46rem) {
  .pathways span { margin-left: 0; width: 100%; text-align: left; }
}

/* anatomy of a page: the three-part structure, shown not told */
.anatomy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 56rem;
  margin: 1.75rem auto 1.5rem;
}
.anatomy__c { background: var(--paper); padding: 1.15rem 1.25rem 0.9rem; }
.anatomy__c span {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.anatomy__c--claim { background: var(--paper-sunk); border-top: 2px solid var(--brass); }
.anatomy__c--claim span { color: var(--brass); }
.anatomy__c--resp span { color: var(--prussian); }
.anatomy__c--src span { color: var(--ink-faint); }
.anatomy__c p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 46rem) { .anatomy { grid-template-columns: 1fr; } }
/* the section holding the anatomy strip runs wide; its prose stays at measure */
.home .plain:has(.anatomy) { max-width: none; }
.home .plain:has(.anatomy) > p {
  max-width: var(--home-measure);
  margin-left: auto;
  margin-right: auto;
}

/* topic index */
.cloud {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.55rem 1.5rem;
  margin: 1.75rem 0 2.75rem;
}
.cloudcollection {
  margin: 2rem 0 2.75rem;
  padding: 1.65rem clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--rule-strong);
  background: var(--panel);
}
.cloudcollection--response { border-top: 3px solid var(--prussian); }
.cloudcollection--article { border-top: 3px solid var(--brass); }
.cloudcollection + .cloudcollection { margin-top: 3rem; }
.cloudcollection > header { text-align: center; }
.cloudcollection > header h3 {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cloudcollection--response > header h3 { color: var(--prussian); }
.cloudcollection--article > header h3 { color: var(--brass); }
.cloudcollection > header p { margin: 0.45rem auto 0; max-width: 42rem; font-size: 0.92rem; color: var(--ink-soft); }
.cloudcollection .cloud { margin-bottom: 0; }
.cloud a {
  font-family: var(--mono);
  font-size: 0.905rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.cloud a:hover { color: var(--ink); border-bottom-color: var(--brass); }
.cloud a.soon { color: var(--ink-faint); pointer-events: none; }

/* conventional publication archives */
.archivecloud {
  margin: 2.25rem 0 4rem;
  padding: 1.75rem clamp(1rem, 3vw, 2.25rem);
  border-top: 3px solid var(--prussian);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--panel);
}
.archivecloud .cloud { margin: 1.25rem 0 0; }
.archivefeed { margin: 3.5rem 0 1rem; }
.archivefeed > header { text-align: center; margin-bottom: 2rem; }
.archivefeed > header h2 { margin: 0.4rem 0 0; }
.eyebrow,
.postcard__type {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--brass);
}
.postcard__type time::before { content: "·"; margin: 0 0.55rem; color: var(--ink-faint); }
.postcard__type time { color: var(--ink-faint); }
.postmeta {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin: -0.35rem auto 1.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.postmeta span { color: var(--brass); }
.postmeta span::after { content: "·"; margin-left: 0.7rem; color: var(--ink-faint); }
.filtertabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 2rem 0 2.5rem;
  border-bottom: 1px solid var(--rule-strong);
}
.filtertabs button,
.filtertabs a {
  appearance: none;
  padding: 0.72rem 1.15rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.filtertabs button:hover,
.filtertabs button:focus-visible,
.filtertabs button[aria-pressed="true"],
.filtertabs a:hover,
.filtertabs a:focus-visible,
.filtertabs a.is-active { color: var(--ink); border-bottom-color: var(--brass); }
.postfeed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.25rem);
  margin: 0 0 4rem;
}
.postcard { min-width: 0; border-bottom: 1px solid var(--rule-strong); }
.postcard[hidden] { display: none; }
.postcard > a { display: block; height: 100%; color: inherit; text-decoration: none; padding-bottom: 1.5rem; }
.postcard__media {
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.15rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: linear-gradient(135deg, var(--paper-sunk), var(--panel));
}
.postcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, opacity 0.3s ease; }
.postcard > a:hover .postcard__media img { transform: scale(1.025); opacity: 0.9; }
.postcard h2 { margin: 0.35rem 0 0.6rem; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.15; }
.postcard p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; }
.postfeed-empty { padding: 2rem; text-align: center; border: 1px solid var(--rule); color: var(--ink-soft); }
.archive-page .withtoc {
  display: block;
  width: min(var(--shell), calc(100vw - (2 * var(--gut))));
  max-width: none;
}
.archive-page .withtoc > .intro {
  max-width: var(--home-measure);
  margin: 2.5rem auto 3rem;
  text-align: center;
}
.archive-page .archivecloud,
.archive-page .archivefeed { width: 100%; }
.resourcefilters { position: sticky; top: 7rem; z-index: 3; background: color-mix(in srgb, var(--paper) 94%, transparent); }
@media (max-width: 64rem) { .postfeed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 42rem) {
  .postfeed { grid-template-columns: 1fr; }
  .filtertabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .filtertabs button, .filtertabs a { white-space: nowrap; }
  .resourcefilters { top: 5rem; }
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }
.btn {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  transition: color 0.15s, border-color 0.15s;
}
.btn:hover { color: var(--ink); border-color: var(--brass); }
.btn.primary { border-color: var(--brass); color: var(--ink); }

/* ---------- misc ---------- */
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin-bottom: 1.15rem; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom-color: var(--rule-strong);
}
code { font-family: var(--mono); font-size: 0.85em; background: var(--paper-sunk); padding: 0.1em 0.35em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
img { max-width: 100%; height: auto; }

.foot {
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0 4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.foot p { margin: 0; max-width: var(--measure); }
/* footer menu: the standalone essays and the site's paperwork */
.footmenu { margin: 0 0 1.2rem; }
.footmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
}
.footmenu a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
  transition: color 0.15s, border-color 0.15s;
}
.footmenu a:hover { color: var(--brass); border-bottom-color: var(--brass); }

.foot .smallprint { margin-top: 1rem; font-size: 0.66rem; }
.foot .smallprint a { color: var(--ink-faint); text-decoration-style: dotted; }
.foot .smallprint a:hover { color: var(--ink-soft); }

/* ---------- editorial refinement, August 2026 ---------- */
/* Controls keep their quiet appearance but meet the 44px touch target. */
.themetoggle { width: 2.75rem; height: 2.75rem; }
.navtoggle { min-height: 2.75rem; padding: 0.55rem 1rem; }
.sitesearch { min-height: 2.75rem; }

/* A fine brass rule records progress without adding another piece of chrome. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 40;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
}

/* The article topic index is a compact grouped drawer, not a second masthead. */
.sitenav { padding: 1.35rem 0 1.55rem; }
.topiccollection {
  padding: 1.1rem 1.25rem 1.35rem;
  border: 1px solid var(--rule);
  background: var(--panel);
}
.topiccollection--response { border-left: 3px solid var(--prussian); }
.topiccollection--article { border-left: 3px solid var(--brass); }
.topiccollection + .topiccollection { margin-top: 1.25rem; }
.topiccollection > header { margin-bottom: 1rem; }
.topiccollection > header h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.topiccollection--response > header h1 { color: var(--prussian); }
.topiccollection--article > header h1 { color: var(--brass); }
.topiccollection > header p { margin: 0.3rem 0 0; max-width: 45rem; font-family: var(--mono); font-size: 0.66rem; line-height: 1.5; color: var(--ink-soft); }
.navgroups {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}
.navgroup h2 {
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.sitenav .navgroup ul { display: block; }
.sitenav .navgroup li { margin: 0 0 0.38rem; }
.sitenav .navgroup a {
  display: inline-block;
  white-space: normal;
  line-height: 1.35;
  padding: 0.18rem 0;
}

/* Research apparatus directly beneath the article provenance line. */
.evidence-strip {
  max-width: var(--body);
  margin: -1px auto 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.67rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.evidence-strip b { color: var(--brass); font-weight: 500; }

/* Scroll-spy now distinguishes read, current and unread sections. */
.claimnav a.complete { color: var(--ink-faint); }
.claimnav a.complete::before { color: var(--rule-strong); }
.claimnav a.current {
  color: var(--ink);
  background: var(--paper-sunk);
  margin-left: -0.5rem;
  padding-left: 2.1rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.citepreview {
  position: fixed;
  z-index: 60;
  width: min(20rem, calc(100vw - 1.5rem));
  padding: 0.85rem 1rem;
  border: 1px solid var(--brass);
  background: var(--paper);
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.24);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.citepreview > span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--brass);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

/* Home-page evidence map: typographic rather than decorative imagery. */
.evidence-map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 2rem 0 3.5rem;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.evidence-map a {
  position: relative;
  min-height: 8.5rem;
  padding: 1.25rem;
  border-right: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.evidence-map a:last-child { border-right: 0; }
.evidence-map a::before {
  content: attr(data-step);
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--brass);
}
.evidence-map b { display: block; font-family: var(--display); font-size: 1.08rem; }
.evidence-map span { display: block; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.67rem; line-height: 1.5; color: var(--ink-soft); }
.evidence-map a:hover { background: var(--paper-sunk); }

/* Restrained Byzantine punctuation between major sections. */
.home .plain--ornament::before {
  content: "☦";
  display: block;
  grid-column: 1 / -1;
  width: 7rem;
  margin: 1.8rem auto -0.25rem;
  padding: 0 1rem;
  color: var(--brass);
  text-align: center;
  font-size: 0.72rem;
  background: linear-gradient(var(--rule), var(--rule)) center / 100% 1px no-repeat;
}

.freshness { margin: 0.8rem auto 0 !important; text-align: center; }
.freshness a { color: var(--ink-faint); text-decoration: none; }
.freshness a:hover { color: var(--brass); }

@media (max-width: 78rem) {
  .navgroups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- narrow ---------- */
@media (max-width: 62rem) {
  .layout { padding-top: 2rem; }
  .claim { padding: 2.5rem 0 1.5rem; border-bottom: 0; }
  .claim > blockquote { padding: 1.15rem 1.2rem; }
  .refs {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 1.5rem;
    margin-top: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .navgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence-map { grid-template-columns: repeat(2, 1fr); }
  .evidence-map a:nth-child(2) { border-right: 0; }
  .evidence-map a:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 38rem) {
  :root { --gut: 1rem; }
  body { font-size: 1.125rem; line-height: 1.58; }
  .topbar { padding: 0; }
  .topbar .bar { min-height: 4.5rem; gap: 0.45rem; }
  .brand { font-size: 1.25rem; white-space: nowrap; }
  .topbar-actions { gap: 0.35rem; }
  .themetoggle { width: 2.75rem; height: 2.75rem; }
  .navtoggle { min-height: 2.75rem; padding: 0.5rem 0.8rem; }
  .layout,
  .profile-page .layout { padding-top: 1.75rem; padding-bottom: 3rem; }
  .topic > h1,
  .home h1 { font-size: 2.15rem; line-height: 1.04; margin-bottom: 1rem; }
  .topic > .lede { font-size: 1.02rem; line-height: 1.55; margin-bottom: 1.2rem; }
  .postmeta { flex-wrap: wrap; gap: 0.35rem 0.55rem; margin-bottom: 1.25rem; font-size: 0.63rem; }
  .evidence-strip { margin-bottom: 1.6rem; padding: 0.75rem 0; font-size: 0.62rem; }
  .topic .withtoc > .intro > p:first-child::first-letter,
  .home .intro > p:nth-of-type(2)::first-letter { font-size: 2.65em; }
  h2 { font-size: 1.5rem; line-height: 1.18; }
  .pf { padding: 2rem 0 1.25rem; }
  .pf > h2 { overflow-wrap: anywhere; }
  .pf ul, .pf ol { padding-left: 1.15rem; }
  .pager { gap: 1rem; margin-top: 2.5rem; }
  .pager__a { max-width: 48%; }
  .pager__a b { font-size: 1rem; line-height: 1.25; display: block; }
  .archive-page .withtoc > .intro { margin: 1.5rem auto 2rem; text-align: left; }
  .archive-page .topic > h1,
  .archive-page .topic > .lede { text-align: center; }
  .filtertabs { margin: 1.4rem 0 2rem; scrollbar-width: thin; }
  .filtertabs button, .filtertabs a { min-height: 2.75rem; padding: 0.72rem 0.9rem; }
  .postfeed { gap: 2rem; }
  .postcard > a { padding-bottom: 1.25rem; }
  .postcard__media { margin-bottom: 0.9rem; }
  .postcard h2 { font-size: 1.4rem; }
  .postcard p { font-size: 0.94rem; line-height: 1.5; }
  .archivecloud { margin: 1.75rem 0 2.75rem; padding: 1.3rem 1rem; }
  .navgroups { grid-template-columns: 1fr; }
  .sitenav .navgroup a { min-height: 2.75rem; padding: 0.62rem 0; }
  .evidence-strip { justify-content: flex-start; gap: 0.35rem 1rem; }
  .evidence-map { grid-template-columns: 1fr; }
  .evidence-map a { min-height: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .evidence-map a:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- library and independent-reading patterns, September 2026 ---------- */
.article-page .withtoc { display: block; width: 100%; max-width: var(--body); margin-inline: auto; }
.article-page .withtoc > .intro { margin-bottom: 1rem; }
.article-page .pf { padding: 1.85rem 0 1.25rem; }
.article-page .pf > h2 { padding-bottom: 0; border: 0; margin-bottom: 1rem; }
.article-page .fig { margin-block: 1.6rem; }
.article-page .sources { padding-top: 2rem; }
.article-contents { max-width: var(--body); margin: 0 auto 1.75rem; border-block: 1px solid var(--rule-strong); padding: 0.8rem 0; }
.article-contents summary { cursor: pointer; font-family: var(--mono); font-size: 0.8rem; padding: 0.5rem; color: var(--ink); }
.article-contents__nav .claimnav__t { display: none; }
.article-contents__nav ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.5rem; padding-left: 1.75rem; margin: 1rem 0; }
.article-contents__nav li { padding-left: 0.15rem; font-size: 0.95rem; }
.article-contents__nav a { display: block; padding-block: 0.45rem; line-height: 1.35; }
.contents-sources { display: inline-block; font: 0.78rem var(--mono); margin-left: 0.5rem; padding: 0.7rem 0; }
.cite-ref { font: 0.62em var(--mono); vertical-align: super; line-height: 0; white-space: nowrap; }
.cite-ref a { color: var(--prussian); padding: 0.25em; text-decoration: none; }
.cite-ref:target, .sources li:target { background: var(--ref-lit); outline: 2px solid var(--prussian); outline-offset: 4px; }
.cite-ref[id], .sources li[id], .library-section[id], .resource-card[id] { scroll-margin-top: 10rem; }
.cite-backs { display: inline; margin-left: 0.5rem; }
.cite-back { display: inline-block; font: 0.72rem var(--mono); padding: 0.5rem 0.3rem; text-decoration: none; }
.citepreview { max-width: calc(100vw - 24px); max-height: min(24rem, 60vh); overflow: auto; }
.citepreview .cite-backs { display: none; }

.archive-controls, .library-controls { display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.archive-controls .filtertabs, .library-controls .filtertabs { margin: 0; flex: 1 1 24rem; }
.filtertabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--brass); }
.topic-select, .library-search { display: grid; gap: 0.4rem; font: 0.72rem/1.4 var(--mono); color: var(--ink-soft); flex: 0 1 17rem; }
.topic-select select, .library-search input { width: 100%; font: 0.8rem/1.4 var(--mono); padding: 0.75rem; min-height: 2.75rem; color: var(--ink); background: var(--panel); border: 1px solid var(--ink-soft); border-radius: 0; }
.library-search input::placeholder { color: var(--ink-soft); opacity: 1; }
.archive-count, .library-count { font: 0.72rem/1.5 var(--mono); color: var(--ink-soft); margin: 1rem 0 1.8rem; }
.postcard__topic { display: inline-block; margin-top: 1rem; padding: 0.35rem 0.55rem; border: 1px solid var(--rule-strong); font: 0.65rem/1.4 var(--mono); color: var(--ink-soft); }
.postcard__type time { color: var(--ink-soft); }
[data-theme="light"] :is(.home-path .eyebrow, .home-featured .eyebrow, .library-start .eyebrow, .postcard__type) { color: #79601c; }
.postcard__media { background: var(--paper-sunk); }
.postcard__media img { object-fit: contain; }

.library-page .withtoc { display: block; width: 100%; max-width: var(--shell); margin-inline: auto; }
.library-page .withtoc > .intro { max-width: none; margin: 0; }
.library-page .withtoc > .intro > p { max-width: var(--body); margin: 0 auto 1.5rem; }
.resource-library { text-align: left; }
.library-page .withtoc > .intro > p:first-child::first-letter { float: none; font: inherit; color: inherit; padding: 0; margin: 0; }
.library-page .topic > h1 { max-width: 62rem; }
.library-page .topic > .lede { max-width: 50rem; }
.library-start { padding: 1.5rem; margin: 1rem 0 3rem; background: var(--paper-sunk); border-top: 2px solid var(--brass); }
.library-start > h2 { font-size: 1.6rem; margin: 0.5rem 0 1.25rem; }
.start-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.start-books a { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem 1rem 0.4rem 0; border-right: 1px solid var(--rule-strong); text-decoration: none; }
.start-books a:last-child { border-right: 0; }
.start-books span, .start-books small { font: 0.72rem/1.5 var(--mono); color: var(--ink-soft); }
.start-books strong { font-family: var(--display); font-size: 1.15rem; }
.library-section { margin: 2.5rem 0; }
.library-section > header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.75rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule-strong); }
.library-section > header h2 { margin: 0; font-size: 1.8rem; }
.library-section > header > span { font: 0.7rem var(--mono); color: var(--ink-soft); }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.resource-card { min-width: 0; padding: 1.3rem; border: 1px solid var(--rule); background: var(--panel); }
.resource-card--books { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.resource-card h3 { font: 600 1.25rem/1.25 var(--display); margin: 0.45rem 0 0.6rem; }
.resource-card p { font-size: 1rem; line-height: 1.5; margin: 0.6rem 0; }
.resource-card .resource-author { font: 0.72rem/1.5 var(--mono); color: var(--ink-soft); margin: 0; }
.resource-card .resource-subtitle { color: var(--ink-soft); font-style: italic; margin-top: -0.2rem; }
.resource-card .resource-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; font: 0.66rem/1.5 var(--mono); color: var(--ink-soft); }
.resource-meta span + span { border-left: 1px solid var(--rule-strong); padding-left: 0.75rem; }
.resource-card .resource-publication { color: var(--ink-soft); font-size: 0.85rem; }
.resource-access { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font: 0.72rem/1.5 var(--mono); }
.library-cover.fig { width: 100%; max-width: 100%; margin: 0; border: 0; padding: 0; }
.library-cover.fig img { display: block; width: 100%; max-height: 11.5rem; object-fit: contain; object-position: top center; margin: 0; }
.library-cover.fig figcaption { text-align: left; padding: 0.4rem 0 0; margin: 0; border: 0; font: 0.6rem/1.5 var(--mono); }
.library-cover.fig figcaption a { display: inline-block; padding: 0.3rem 0; }
.book-titlecard { min-height: 10rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 0.75rem; color: var(--ink); background: var(--paper-sunk); border: 1px solid var(--rule-strong); }
.book-titlecard span, .book-titlecard small { font: 0.6rem/1.45 var(--mono); color: var(--ink-soft); }
.book-titlecard b { font: 600 1rem/1.25 var(--display); }
.library-note { max-width: var(--body); margin: 3rem auto 0; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.library-note h2 { font-size: 1.5rem; }
.library-note p { font-size: 1rem; color: var(--ink-soft); }
.resource-library [hidden] { display: none !important; }

.home-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 2.5rem 0 1.25rem; }
.home-path { display: flex; flex-direction: column; gap: 0.75rem; padding: 2rem; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--rule-strong); border-top: 2px solid var(--brass); }
.home-path:last-child { border-top-color: var(--prussian); }
.home-path h2 { margin: 0; font: 600 2rem/1.15 var(--display); }
.home-path p { color: var(--ink-soft); font-size: 1.15rem; margin: 0; max-width: 32rem; }
.home-path__link { color: var(--prussian); margin-top: auto; padding-top: 1rem; font: 0.8rem/1.5 var(--mono); }
.home-path:hover { background: var(--paper-sunk); color: var(--ink); }
.home-path:hover .home-path__link { text-decoration: underline; }
.home .home-start { margin: 1.75rem auto; max-width: 58rem; border: 1px solid var(--rule-strong); border-top: 3px solid var(--brass); background: var(--panel); text-align: center; }
.home-start > a { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: clamp(1.25rem, 3vw, 2rem); color: var(--ink); text-decoration: none; }
.home-start .eyebrow { color: var(--brass); font-size: 0.8rem; }
.home-start__title { font: 600 clamp(1.8rem, 3vw, 2.65rem)/1.15 var(--display); }
.home-start__summary { max-width: 42rem; color: var(--ink-soft); font: 1.15rem/1.5 var(--serif); }
.home-start__action { margin-top: 0.25rem; padding: 0.7rem 1.15rem; min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.65rem; border: 1px solid var(--prussian); color: var(--prussian); font: 500 0.8rem/1.4 var(--mono); }
.home-start > a:hover { background: var(--paper-sunk); }
.home-start > a:hover .home-start__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.home-start > a:focus-visible { outline: 2px solid var(--prussian); outline-offset: 4px; }
[data-theme="light"] .home-start .eyebrow { color: #79601c; }
.home-featured { margin: 3rem 0; }
.home-featured > header { margin-bottom: 1.75rem; text-align: center; }
.home-featured > header > h2 { margin: 0.4rem 0 0.7rem; }
.home-featured > header > p:not(.eyebrow) { color: var(--ink-soft); }
.home-featured__more { text-align: center; margin-top: 1.75rem; }
.home-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.home-formats h3 { font-size: 1.3rem; }
.home-formats p { color: var(--ink-soft); }
.home .plain:has(.home-featured), .home .plain:has(.cloudcollection) { max-width: none; }
.home .intro > p:nth-of-type(2)::first-letter { float: none; font: inherit; color: inherit; padding: 0; margin: 0; }
.home .intro > p:nth-of-type(2), .home .intro > p:nth-of-type(3) { text-align: center; }
.lightbox__close { position: fixed; right: 1rem; top: 1rem; min-height: 2.75rem; min-width: 2.75rem; color: #fff; border: 1px solid #fff; background: #14171b; padding: 0.5rem 0.9rem; font: 0.8rem var(--mono); cursor: pointer; }
:is(.resource-library, .article-contents, .archive-controls, .home-paths) :is(a, button, select, input, summary):focus-visible, .cite-ref a:focus-visible, .cite-back:focus-visible, figure.fig img[role="button"]:focus-visible { outline: 2px solid var(--prussian); outline-offset: 4px; }
@media (max-width: 62rem) {
  .resource-card--books { grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .home-path { padding: 1.5rem; }
}
@media (max-width: 48rem) {
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card--books { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .start-books { grid-template-columns: 1fr; }
  .start-books a { border-right: 0; border-bottom: 1px solid var(--rule); padding: 0.75rem 0; }
  .start-books a:last-child { border: 0; }
  .home-paths, .home-formats { grid-template-columns: 1fr; gap: 1rem; }
  .home-path h2 { font-size: 1.65rem; }
  .home-path p { font-size: 1.05rem; }
  .home-formats { gap: 0.5rem; }
}
@media (max-width: 38rem) {
  .article-contents__nav ol { grid-template-columns: 1fr; }
  .article-page .pf { padding: 1.6rem 0 0.85rem; }
  .archive-controls, .library-controls { display: block; }
  .archive-controls .filtertabs, .library-controls .filtertabs { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; margin-bottom: 1rem; }
  .topic-select, .library-search { max-width: none; }
  .library-start { padding: 1rem; margin-bottom: 2rem; }
  .resource-card h3 { font-size: 1.15rem; }
  .resource-card p { font-size: 0.95rem; }
  .library-section > header { align-items: center; }
  .library-section > header h2 { font-size: 1.5rem; }
  .home-featured { margin-top: 2rem; }
}

/* ---------- print ---------- */
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .topbar, .sitenav, .searchresults, .claimnav, .foot, .cta-row, .reading-progress { display: none !important; }
  .withtoc, .cgrid { display: block !important; max-width: none; }
  .entry { display: block; padding: 1.5rem 0; break-inside: avoid-page; }
  .refs {
    position: static; border-left: 0; border-top: 1px solid #999;
    padding: 0.75rem 0 0; margin: 1rem 0 0;
  }
  .claim > blockquote { box-shadow: none; background: #f2f2f2; }
  .fig { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .response a[href^="http"]::after,
  .refs a[href^="http"]::after,
  .sources a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    word-break: break-all;
    color: #444;
  }
  .topic > h1, .topic > .lede { text-align: left; }
}