/* fonts.css */
/* ── Self-hosted EB Garamond + Inter ─────────────────────────────
   Files live at /assets/fonts/*.woff2 (passthrough-copied at build).
   Self-hosted so we drop the cross-origin Bunny Fonts CSS request
   that was blocking initial render for ~810 ms — it now ships on the
   same HTTP/2 connection as the HTML and global.css.
   font-display: swap pairs with the size-adjusted "EB Garamond
   Fallback" / "Inter Fallback" @font-face in tokens.css so the
   FOUT swap doesn't shift layout (CLS-safe).
   The latin and latin-ext subsets are split via unicode-range so a
   browser only fetches the file actually needed for the rendered
   characters; ~50 kB per visit on an English page, instead of the
   full 800 kB across all weights. */

/* ── EB Garamond ───────────────────────────────────────────────── */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-600-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-ext-600-italic.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-700-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-ext-700-italic.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Inter ─────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* utilities.css */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mt-0  { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0  { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.stack   { display: flex; flex-direction: column; gap: var(--space-md); }

.bg-alt     { background: var(--bg-alt); }
.bg-inverse { background: var(--bg-inverse); color: var(--text-inverse); }

.no-wrap { white-space: nowrap; }

.reveal { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ── page-meta link cluster ──
   The "All Concepts · All Works · A–Z Index" / "Circuit map ·
   Timeline + map · Biography · All works" pill row that sits below
   page-header leads. Used on /concepts/<slug>/, /lecture-tour/, and
   anywhere a small set of related-page jumps lives under a hero.
   Lives in utilities so every page bundle gets it without per-page
   duplication. */
.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: var(--space-md);
  padding: 0;
}
.page-meta a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  color: var(--text-soft);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.page-meta a:hover,
.page-meta a:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  outline: none;
}

/* ── Page-sidebar card (used by Contact / About / Biography sidebars) ── */
.page-sidebar {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.page-sidebar h3,
.page-sidebar .page-sidebar-heading {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.page-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.5;
}
.page-sidebar dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
.page-sidebar dt {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-sidebar dd {
  margin: 0 0 var(--space-xs);
  color: var(--text);
}
.page-sidebar blockquote {
  margin: 0;
  padding: 0 0 0 var(--space-md);
  border-left: 2px solid var(--border);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-soft);
}
.page-sidebar .alert {
  padding: var(--space-md);
  background: var(--surface);
  border-left: 3px solid var(--focus);
  font-size: 0.85rem;
  color: var(--text-soft);
}
.page-sidebar-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
@media (min-width: 960px) {
  .page-sidebar--sticky {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
  }
}

/* ── Standalone alert callout (used outside .page-sidebar too) ── */
.alert {
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--bg-alt);
  border-left: 3px solid var(--focus);
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.55;
}
.alert code {
  background: var(--surface);
  padding: 0.05em 0.35em;
}

/* ── Section actions row (centered button group below a section) ── */
.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.section-actions--start { justify-content: flex-start; }
.section-actions--end   { justify-content: flex-end; }

/* ── Required-field marker ── */
.required-mark {
  color: var(--focus);
  font-weight: var(--fw-bold);
  margin-left: 0.2em;
}


/* layout.css */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  /* Respect iOS safe-area on the left/right (notched landscape etc.) */
  padding-inline: max(var(--container-gutter), env(safe-area-inset-left)) max(var(--container-gutter), env(safe-area-inset-right));
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 1280px; }

/* Section padding, mobile-first compact values, then larger on wider
   viewports. Keeps the hero / intro from eating a third of a 360px
   screen. */
.section {
  padding-block: var(--space-lg);
}
.section--sm { padding-block: var(--space-md); }
.section--lg { padding-block: var(--space-xl); }
@media (min-width: 640px) {
  .section    { padding-block: var(--space-xl); }
  .section--sm { padding-block: var(--space-lg); }
  .section--lg { padding-block: var(--space-2xl); }
}
@media (min-width: 960px) {
  .section    { padding-block: var(--space-2xl); }
  .section--sm { padding-block: var(--space-xl); }
  .section--lg { padding-block: var(--space-3xl); }
}
/* ════════════════════════════════════════════════════════════════
   SINGLE-COLOUR ENFORCEMENT
   ════════════════════════════════════════════════════════════════
   Every page-level wrapper / section / article element renders a
   transparent background so the entire page reads as one continuous
   paper colour. The page paper is painted by html + body in base.css;
   nothing between them and the actual content (article text, list
   items, etc.) is allowed to paint a different shade.

   Components that legitimately need their own surface (buttons,
   off-page drawers like .gs-panel and .nav-panel, the search popup,
   tippy tooltips, photo lightboxes) keep their own backgrounds because
   they're not page-level wrappers.

   !important is intentional: this rule has to win over any older
   per-component CSS that was painting --bg-alt or --surface as a
   full-width band. */
html, body { background-color: var(--paper) !important; }

/* Page-level wrappers go transparent so the page reads as one paper.
   `aside` is targeted broadly, but the slide-in drawers (.nav-panel,
   .gs-panel) and the page-side sidebars need real surfaces and are
   excluded with :not(). */
main,
header > .container, footer > .container,
section, article,
aside:not(.nav-panel):not(.gs-panel):not(.library-panel):not(.page-sidebar):not(.work-audio):not(.author-card):not(.today-in-life),
.section, .section--alt, .section--soft, .section--dark,
.page-header, .work-header, .post-header,
.work-article, .post-article, .article-body, .post-body, .prose,
.with-sidebar, .container,
.site-footer, .footer-hero, .footer-volumes, .footer-directory,
.footer-quote, .footer-bottom, .footer-hero-inner,
.cta-banner {
  background: transparent !important;
}

.page-header {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  text-align: center;
}
@media (min-width: 640px) {
  .page-header { padding-block: var(--space-xl); }
}
@media (min-width: 960px) {
  .page-header { padding-block: var(--space-2xl); }
}
.page-header h1 {
  max-width: 22ch;
  margin-inline: auto;
}
.page-header .lead {
  max-width: 52ch;
  margin-inline: auto;
  margin-top: var(--space-md);
}

.section-header {
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}
.section-header .section-label { margin-bottom: var(--space-sm); }
.section-header h2.section-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  font-weight: var(--fw-semibold);
}
.section-header .section-intro {
  color: var(--text-soft);
  font-size: var(--text-base);
  line-height: 1.55;
}

/* Grids */
.grid { display: grid; gap: var(--space-lg); }
.grid-2 { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.with-sidebar {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .with-sidebar { grid-template-columns: minmax(0, 1fr) 18rem; }
  .with-sidebar--left { grid-template-columns: 18rem minmax(0, 1fr); }
}

.breakout {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}


/* nav.css */
/* Nav, the masthead + slide-in panel. Clean and quiet. */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
  min-height: var(--header-h);
}
.site-header.is-scrolled { border-bottom-color: var(--border-soft); box-shadow: 0 1px 0 var(--border-soft); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--heading);
  white-space: nowrap;
}
.brand-ornament { display: none; }
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  line-height: 1;
}
.brand-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--heading);
}
.brand-subtitle {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

/* Desktop nav, Volume rail (12 mega menus, one per Conway volume) */
.primary-nav { display: none; }
.primary-nav-label { display: none; }
@media (min-width: 1024px) {
  .primary-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .primary-nav-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
  }
  .primary-nav-label:hover,
  .primary-nav-label:focus-visible {
    color: var(--ink);
    border-bottom-color: var(--ink);
  }
  .nav-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
  }
  .nav-list--volumes {
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-item { position: relative; }
  .nav-link,
  .nav-parent > .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.55rem 0.6rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    color: var(--text-soft);
    text-decoration: none;
    letter-spacing: 0;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .nav-link:hover { color: var(--text); background: var(--bg-alt); }
  .nav-link[aria-current="page"] {
    color: var(--accent);
    font-weight: var(--fw-semibold);
  }

  /* Volume rail: tight Roman-numeral chips */
  .nav-item--vol { display: inline-flex; align-items: stretch; }
  .nav-link--vol {
    padding: 0.5rem 0.65rem;
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    color: var(--ink-soft);
    min-width: 2.4rem;
    position: relative;
  }
  .nav-list--volumes .nav-item--vol + .nav-item--vol .nav-link--vol::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--border-soft);
  }
  .nav-link-num {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    font-size: 0.95rem;
    line-height: 1;
  }
  .nav-item--vol:hover .nav-link--vol,
  .nav-item--vol.is-open .nav-link--vol {
    color: var(--ink);
    background: var(--bg-alt);
  }
  /* Hide the chevron on volume tabs, the whole tab is the trigger */
  .nav-item--vol .nav-chevron {
    display: none;
  }

  .nav-parent { display: inline-flex; align-items: stretch; }
  .nav-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    color: var(--text-muted);
    background: transparent;
    border: 0;
  }
  .nav-chevron:hover { color: var(--text); background: var(--bg-alt); }
  .nav-chevron svg { width: 0.75em; height: 0.75em; transition: transform var(--dur-fast) var(--ease); }
  .nav-chevron[aria-expanded="true"] svg { transform: rotate(180deg); }

  .nav-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 20rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.5rem;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
    z-index: 10;
  }
  .nav-item.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .nav-dropdown a {
    display: block;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    color: var(--text);
    border-radius: var(--radius-sm);
  }
  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible { background: var(--bg-alt); }
  .nav-dropdown-title {
    display: block;
    font-family: var(--font-serif);
    font-weight: var(--fw-semibold);
    font-size: 0.95rem;
    color: var(--heading);
    margin-bottom: 0.1rem;
  }
  .nav-dropdown-desc {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
  }
}

/* Masthead icon buttons, search, settings, theme, hamburger share style */
.nav-icon-btn,
.nav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  color: var(--heading);
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.nav-icon-btn:hover,
.nav-toggle:hover {
  background: var(--bg-alt);
  color: var(--ink);
}
.nav-icon-btn svg { width: 1.1rem; height: 1.1rem; }
.nav-toggle-icon {
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-med) var(--ease);
}
.nav-toggle-icon--close { opacity: 0; transform: rotate(-90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--open  { opacity: 0; transform: rotate(90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--close { opacity: 1; transform: rotate(0); }
.nav-utility { display: inline-flex; align-items: center; gap: 0.25rem; }
/* Slim divider between the inline tool buttons and the hamburger.
   Groups masthead icons (Resources / Search / Settings / Theme) as
   one cluster, with the menu trigger sitting slightly apart. */
.nav-utility .nav-toggle {
  position: relative;
  margin-left: 0.4rem;
}
.nav-utility .nav-toggle::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--border-soft);
}
/* Resources opens a desktop mega-menu that's hidden below 1024px, so
   hide the button itself on smaller screens. Resources lives in the
   slide-in panel at that size. */
@media (max-width: 1023.99px) {
  .nav-resources { display: none; }
}
@media (max-width: 640px) {
  /* On narrow phones, keep only search + hamburger in the masthead.
     Settings + theme toggle move into the slide-in panel footer. */
  .nav-utility #settingsBtn,
  .nav-utility #themeToggle { display: none; }
}

/* Slide-in panel */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
  z-index: calc(var(--z-drawer) - 1);
}
.nav-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  /* Shared drawer width — both this panel and the reader settings
     drawer use --drawer-w so they read as the same component. 88%
     on narrow screens leaves a sliver of backdrop the reader can
     tap to close. */
  width: var(--drawer-w);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
body.nav-open { overflow: hidden; }
body.nav-open .nav-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
body.nav-open .nav-panel { transform: translateX(0); }

.nav-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.nav-panel-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
/* Close button uses full --ink (not the muted text-soft) so the X
   reads cleanly against the panel paper in both themes, and a 1 px
   border + stroke-width 2.5 on the SVG path so the affordance is
   clearly a button, not a decorative X. */
.nav-panel-close {
  width: var(--tap-target);
  height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.nav-panel-close svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2.5;
  pointer-events: none;
}
.nav-panel-close:hover,
.nav-panel-close:focus-visible {
  background: var(--bg-alt);
  border-color: var(--ink);
  color: var(--ink);
  outline: none;
}

/* ── Section label inside the slide-in panel ── */
.nav-panel-section-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}
/* As a top-level <p>, the label carries its own divider + vertical rhythm. */
p.nav-panel-section-label {
  margin: 1.1rem 1.25rem 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
}

/* Collapsible "Conway Edition" / "Resources" section wrapper. */
.nav-panel-section {
  margin-top: 1.1rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border-soft);
}
.nav-panel-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.75rem 1.25rem 0.65rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--dur-fast) var(--ease);
}
.nav-panel-section-summary::-webkit-details-marker { display: none; }
.nav-panel-section-summary::marker { content: ""; }
.nav-panel-section-summary:hover { background: var(--bg-alt); }
.nav-panel-section-summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.nav-panel-section-summary .nav-panel-section-label { margin: 0; }
.nav-panel-section-heading {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.nav-panel-section-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--heading);
  letter-spacing: 0.005em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
  align-self: flex-start;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
a.nav-panel-section-title:hover,
a.nav-panel-section-title:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.nav-panel-section-sub {
  position: relative;
  padding-top: 0.35rem;
  margin-top: 0.05rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  font-weight: var(--fw-regular);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}
.nav-panel-section-sub::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.75rem;
  height: 1px;
  background: var(--border);
}
.nav-panel-section-chevron {
  width: 10px;
  height: 6px;
  flex: 0 0 auto;
  color: var(--ink-soft);
  transition: transform var(--dur-med) var(--ease);
}
.nav-panel-section[open] .nav-panel-section-chevron {
  transform: rotate(180deg);
}
.nav-panel-section-body {
  padding: 0.25rem 0 0.35rem;
}
.nav-panel-link-suffix {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--fw-regular);
  color: var(--text-soft);
  margin-left: 0.35rem;
}

/* ── Search inside the panel ── */
.nav-panel-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.75rem 1rem 0.25rem;
}
.nav-panel-search svg {
  position: absolute;
  left: 0.85rem;
  width: 1rem; height: 1rem;
  color: var(--ink-muted);
  pointer-events: none;
}
.nav-panel-search input[type="search"] {
  width: 100%;
  min-height: var(--tap-target);
  padding: 0.6rem 0.85rem 0.6rem 2.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.nav-panel-search input[type="search"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}

/* ── Panel nav ── */
.nav-panel-nav {
  padding: 0.75rem 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.nav-panel-group { display: flex; flex-direction: column; }
.nav-panel-row {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}
.nav-panel-row:hover,
.nav-panel-row:focus-within { background: var(--bg-alt); }

.nav-panel-link,
.nav-panel-link--flat {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0.55rem 0.65rem 0.55rem 0.75rem;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.nav-panel-link-title {
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--heading);
  line-height: 1.2;
}
.nav-panel-link--flat {
  margin: 0;
}
.nav-panel-link--flat:hover,
.nav-panel-link--flat:focus-visible {
  background: var(--bg-alt);
}
.nav-panel-link[aria-current="page"],
.nav-panel-link--flat[aria-current="page"] {
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--ink);
}

/* Chevron expand/collapse */
.nav-panel-chevron {
  flex: 0 0 auto;
  width: var(--tap-target);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-panel-chevron svg {
  width: 0.85rem; height: 0.85rem;
  transition: transform var(--dur-med) var(--ease);
}
.nav-panel-chevron[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel-chevron:hover { color: var(--ink); }

.nav-panel-submenu {
  padding: 0.25rem 0 0.75rem 0.5rem;
  border-left: 1px solid var(--border-soft);
  margin: 0.25rem 0 0.5rem 1rem;
}
.nav-panel-submenu[hidden] { display: none; }
.nav-panel-subgroup + .nav-panel-subgroup { margin-top: 0.75rem; }
.nav-panel-subgroup-heading {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin: 0 0 0.35rem;
  padding: 0 0.75rem;
}
.nav-panel-subgroup ul { list-style: none; margin: 0; padding: 0; }

/* Mobile slide-in panel: same editorial callout as the desktop
   megamenu, but compacter — kicker, title, one-line blurb. */
.nav-panel-preface-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 0 0.6rem;
  padding: 0.65rem 0.75rem;
  background: var(--paper-alt);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--ink);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.nav-panel-preface-card:hover,
.nav-panel-preface-card:focus-visible {
  border-color: var(--ink);
  border-left-color: var(--ink);
  background: var(--surface);
}
.nav-panel-preface-kicker {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}
.nav-panel-preface-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--heading);
}
.nav-panel-preface-blurb {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-soft);
  margin-top: 0.15rem;
}
.nav-panel-loading {
  padding: 0.5rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.nav-panel-subgroup li + li { margin-top: 0.05rem; }
.nav-panel-subgroup a {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  min-height: 2.25rem;
  text-decoration: none;
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-panel-subgroup a:hover,
.nav-panel-subgroup a:focus-visible {
  background: var(--bg-alt);
  color: var(--ink);
}
.nav-panel-subgroup a[aria-current="page"] {
  color: var(--ink);
  font-weight: var(--fw-semibold);
  background: var(--bg-alt);
}
.nav-panel-sub-title {
  font-size: 0.92rem;
  font-weight: var(--fw-medium);
  color: inherit;
  line-height: 1.25;
}
.nav-panel-sub-desc {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-style: normal;
  color: var(--text-soft);
  line-height: 1.4;
  margin-top: 0.15rem;
  letter-spacing: 0.01em;
}

/* ── Panel footer ── */
.nav-panel-footer {
  margin-top: auto;
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.nav-panel-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.nav-panel-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.55rem 0.4rem;
  min-height: var(--tap-target);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.nav-panel-tool:hover,
.nav-panel-tool:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}
.nav-panel-tool svg { width: 1rem; height: 1rem; }

.nav-panel-cta {
  width: 100%;
  justify-content: center;
}

.nav-panel-quote {
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.nav-panel-quote blockquote { margin: 0; border: 0; padding: 0; color: inherit; font-style: italic; font-size: inherit; }
.nav-panel-quote blockquote p { margin: 0; }
.nav-panel-quote figcaption {
  margin-top: 0.45rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.nav-panel-meta {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--ink-muted);
  line-height: 1.4;
  text-align: center;
}

/* ----- Mega menu ------------------------------------------------------- */

/* Mega-menu scoping matches .primary-nav: both appear at the canonical
   tablet-landscape breakpoint (1024px) and not before. Off-scale stops
   like 960 / 1100 / 1300 / 1700+ are forbidden by the breakpoint
   contract in tokens.css; everything below snaps to 1024 / 1280 / 1500. */
@media (min-width: 1024px) {
  .nav-item--mega { position: static; }

  .mega-menu {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                visibility 0s linear var(--dur-fast);
    z-index: 10;
  }
  .nav-item.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mega-menu-inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-xl) var(--container-gutter);
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }

  .mega-intro {
    border-right: 1px solid var(--border);
    padding-right: var(--space-xl);
  }
  .mega-intro-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    margin: 0 0 0.5rem;
    color: var(--heading);
  }
  .mega-intro-text {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-soft);
    margin: 0 0 1rem;
  }
  .mega-intro-cta {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .mega-intro-cta:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

  /* Editorial callout for the Publisher's Preface inside the
     Volume I megamenu intro panel. Sits below the "Browse"
     CTA and visually flags the preface as a distinct, optional
     reading rather than another button-style link. */
  .mega-preface-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    margin-top: var(--space-md);
    padding: 0.85rem 0.95rem;
    background: var(--paper-alt);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--ink);
    text-decoration: none;
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
  }
  .mega-preface-card:hover,
  .mega-preface-card:focus-visible {
    border-color: var(--ink);
    border-left-color: var(--ink);
    background: var(--surface);
    transform: translateY(-1px);
  }
  .mega-preface-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--ink);
    flex-shrink: 0;
    margin-top: 0.1rem;
  }
  .mega-preface-icon svg { width: 100%; height: 100%; }
  .mega-preface-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }
  .mega-preface-kicker {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
  }
  .mega-preface-title {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--heading);
  }
  .mega-preface-blurb {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-soft);
    margin-top: 0.2rem;
  }

  /* Six columns × two rows at desktop. The site.js
     resourcesMenu.sections array holds twelve entries that split
     evenly into a 6-col / 2-row grid. The mega-menu inner sits
     inside min(1600px, 98vw) so each column lands ≈ 230–260 px
     wide — comfortable for the longest section heading and any
     two-line link description. Below 1024 px the whole resources
     mega-menu is hidden in favour of the slide-in mobile panel. */
  .mega-sections {
    display: grid;
    gap: var(--space-lg) var(--space-md);
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  /* Tablet-landscape (1024–1199 px): 6 columns can pinch slightly,
     so step down to 4-col / 3-row at the lower end of the desktop
     band; above 1200 px the layout reverts to the canonical 6×2. */
  @media (max-width: 1199.98px) {
    .mega-sections {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-md) var(--space-lg);
    }
  }
  .mega-section h4.mega-section-heading {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    margin: 0 0 0.85rem;
  }
  .mega-section ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .mega-section a {
    display: block;
    padding: 0.5rem 0.6rem;
    margin-inline: -0.6rem;
    text-decoration: none;
    color: var(--text);
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease);
  }
  .mega-section a:hover,
  .mega-section a:focus-visible {
    background: var(--bg-alt);
  }
  .mega-link-title {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    color: var(--heading);
    line-height: 1.3;
  }
  .mega-link-desc {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 0.1rem;
  }

  /* ── Volume mega menu (per-volume) ── */
  .mega-menu--volume .mega-intro-kicker {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    margin-bottom: 0.4rem;
  }
  .mega-menu--volume .mega-intro-meta {
    margin: var(--space-sm) 0 var(--space-md);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--ink-muted);
  }
  .mega-menu--volume .mega-intro-count {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--fw-semibold);
  }
  .mega-sections--single { grid-template-columns: 1fr; }
  /* Every volume mega menu shares the same row gap and column gap so
     work titles space identically regardless of how many works the
     volume holds. Only grid-template-columns varies per bracket — that
     has to scale with the count (a 110-item volume cannot lay out in
     three columns). */
  .mega-volume-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem 1.5rem;
  }
  .mega-volume-loading,
  .mega-volume-error {
    grid-column: 1 / -1;
    padding: var(--space-md);
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.85rem;
  }
  .mega-volume-error a { color: var(--ink); }
  /* Long volumes (Vol XI: 44 works, Vol XII: 53), drop to a denser
     2-line layout so everything fits without a scrollbar. */

  /* Medium volumes (Vol VII: 13 works, Vol IX: 20 works) — widen the
     mega panel up to 1500px so the work titles lay out across the
     canonical desktop scale: 4 cols at tablet-landscape, 5 at standard
     desktop, 6 at wide desktop. */
  .mega-menu-inner:has(.mega-volume-list[data-count-bracket="medium"]) {
    max-width: min(1500px, 96vw);
  }
  .mega-volume-list[data-count-bracket="medium"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (min-width: 1280px) { .mega-volume-list[data-count-bracket="medium"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  @media (min-width: 1500px) { .mega-volume-list[data-count-bracket="medium"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  .mega-volume-list[data-count-bracket="long"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Huge bracket — Vol VIII (110 interview chapters), Vol XI (43),
     Vol XII (53). Same canonical-stop progression as medium, one
     column denser at each band so the very long chapter lists don't
     stretch into a wall of vertical scroll. Capped at 1500px so the
     menu never escapes the canonical max width. */
  .mega-menu-inner:has(.mega-volume-list[data-count-bracket="huge"]) {
    max-width: min(1500px, 99vw);
  }
  .mega-volume-list[data-count-bracket="huge"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @media (min-width: 1280px) { .mega-volume-list[data-count-bracket="huge"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 1500px) { .mega-volume-list[data-count-bracket="huge"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  /* Every volume mega-menu uses the same title typography and the
     same per-link padding regardless of how many works the volume
     holds — same font (serif), same size (0.95rem), same weight
     (semibold), same line-height, same vertical breathing room.
     Titles wrap to as many lines as they need; nothing is truncated. */
  .mega-volume-list a {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.4rem 0.6rem;
    margin-inline: -0.6rem;
    text-decoration: none;
    color: var(--text);
    transition: background var(--dur-fast) var(--ease);
  }
  .mega-volume-list a:hover,
  .mega-volume-list a:focus-visible {
    background: var(--bg-alt);
  }
  .mega-volume-list .mega-link-title {
    display: block;
    overflow: visible;
    white-space: normal;
    line-height: 1.3;
  }

  /* ── Resources mega menu, same full-width treatment as the volume megas ── */
  .nav-resources { position: static; }
  .mega-menu--resources {
    /* Override the local-anchor defaults so this mega spans the full
       header width, matching the per-volume mega menus. */
    top: var(--header-h);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    border: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .nav-resources.is-open .mega-menu--resources {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
  /* The 8 resource sections always render on a single row at every
     viewport where this mega menu is visible (1024px+). At narrow
     widths the intro sidebar hides and link descriptions collapse so
     8 columns fit; at wider widths the intro returns and descriptions
     reappear. */
  .mega-menu--resources .mega-menu-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    max-width: min(1600px, 98vw);
  }
  .mega-menu--resources .mega-intro {
    display: none;
    border-right: 1px solid var(--border);
    padding-right: var(--space-xl);
  }
  .mega-menu--resources .mega-intro-text {
    font-size: 0.9rem;
    line-height: 1.55;
  }
  .mega-menu--resources .mega-sections {
    /* Twelve sections split exactly evenly into 6 cols × 2 rows so
       the bottom row never trails off into half-empty cells. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-md);
  }
  /* Resources mega is intentionally kept clean: titles only, no
     descriptive subtitle under any link, at every viewport. */
  .mega-menu--resources .mega-link-desc {
    display: none;
  }
  /* Section headings wrap to two lines at narrow widths so columns
     can stay tight without truncating the heading. */
  .mega-menu--resources .mega-section h4.mega-section-heading {
    line-height: 1.25;
  }
}
@media (min-width: 1500px) {
  /* Wide desktops: bring back the intro sidebar alongside the same
     8-column section row. Link descriptions stay hidden — the menu
     reads as a clean directory of titles at every width. */
  .mega-menu--resources .mega-menu-inner {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-lg);
  }
  .mega-menu--resources .mega-intro {
    display: block;
  }
  .mega-menu--resources .mega-sections {
    gap: var(--space-md) var(--space-md);
  }
}

/* On smaller widths, hide the desktop mega menu, the slide-in panel
   handles all the same links */
@media (max-width: 1023.99px) {
  .mega-menu { display: none; }
}


/* footer.css */
/* Footer, five distinct bands stacked vertically:
   1. Hero      , brand + tagline + primary CTAs
   2. Volumes   , the 4-volume Conway Edition strip
   3. Directory , five-column site map
   4. External  , outbound archives where Paine also lives
   5. Quote     , closing line in Paine's voice
   Plus a thin bottom bar with copyright, legal, and credit. */

.site-footer {
  margin-top: var(--space-3xl);
  /* No fill — the footer reads on the same paper as the rest of the
     page; section dividers below are hairlines, not background bands. */
  background: transparent;
  color: var(--text);
  border-top: 1px solid var(--border);
}

/* Old CTA banner, kept hidden in case anything still references it */
.footer-cta { display: none; }

/* Shared header for footer sections */
.footer-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-soft);
}
.footer-section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--heading);
  margin: 0;
  line-height: 1.1;
}
.footer-section-sub {
  flex: 1 1 24ch;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
  max-width: 56ch;
}
.footer-section-link {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  white-space: nowrap;
}
.footer-section-link:hover { color: var(--ink); }

/* ────────────────────────────────────────────────────────────────
   1. Hero band
   ──────────────────────────────────────────────────────────────── */
.footer-hero {
  padding: var(--space-2xl) 0;
  /* No fill — paper carries through. */
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.footer-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 860px) {
  .footer-hero-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}
.footer-hero-text { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-hero-kicker {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin: 0;
}
.footer-hero-heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: var(--heading);
  margin: 0;
  max-width: 32ch;
}
.footer-hero-sub {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
  max-width: 56ch;
}
.footer-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}
@media (min-width: 860px) {
  .footer-hero-actions { justify-content: flex-end; }
}
.footer-feed-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap-target);
  padding: 0.4rem 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  text-decoration: none;
}
.footer-feed-link:hover,
.footer-feed-link:focus-visible { color: var(--ink); }

/* ────────────────────────────────────────────────────────────────
   2. Volumes strip
   ──────────────────────────────────────────────────────────────── */
.footer-volumes { padding: var(--space-2xl) 0; border-bottom: 1px solid var(--border-soft); }
.footer-volumes-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .footer-volumes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .footer-volumes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .footer-volumes-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.footer-volumes-grid a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  min-height: var(--tap-target);
  /* Tiles read as bordered surfaces on the same paper as the page,
     no white fill that would otherwise contrast with the page. */
  background: transparent;
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink);
  text-decoration: none;
  color: var(--text);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  min-width: 0;
}
.footer-volumes-grid a:hover,
.footer-volumes-grid a:focus-visible {
  border-color: var(--ink);
}
.footer-volumes-roman {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 0.84rem;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.footer-volumes-title {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  color: var(--text-soft);
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ────────────────────────────────────────────────────────────────
   3. Site directory, eight-column site map
   ──────────────────────────────────────────────────────────────── */
.footer-directory { padding: var(--space-2xl) 0; border-bottom: 1px solid var(--border-soft); }
/* Footer column count is locked to the site.js footerGroups length
   (currently 12). The mega menu uses the same twelve sections, so
   the directory and the menu render identically. Don't add a
   thirteenth group — fold new pages into an existing heading
   instead. Mobile → tablet → tablet-landscape → wide-desktop bands
   step from 2 → 4 → 6 → 12 columns. */
.footer-cols {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* Tablet-landscape / small desktop: 6-column 2-row layout. */
  .footer-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
}
@media (min-width: 1500px) {
  /* Wide desktop: full twelve-column row. Each column is sized to
     its widest link (max-content) so labels never wrap mid-word.
     The container below stretches to fit, with a 95vw cap so it
     never spills past the viewport. */
  .footer-cols {
    grid-template-columns: repeat(12, minmax(min-content, max-content));
    gap: var(--space-md) var(--space-md);
    justify-content: space-between;
  }
}

/* Widen the footer-directory container so twelve columns have
   breathing room. Default --container-max of 1120 px crammed every
   long label ("Reading Calendar", "Editor's Introduction",
   "Manuscript Watch") onto two lines; max-content sizing + a 95vw
   container lets every link sit on a single row at desktop. Other
   footer bands keep the standard container width. */
@media (min-width: 1280px) {
  .footer-directory > .container {
    max-width: min(95vw, 1900px);
  }
}
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.footer-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-col a {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  display: inline-block;
  min-height: 1.5rem;
  white-space: nowrap;
}
.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ────────────────────────────────────────────────────────────────
   4. Closing quote
   ──────────────────────────────────────────────────────────────── */
.footer-quote {
  padding: var(--space-2xl) 0;
  text-align: center;
}
.footer-quote figure { margin: 0; }
.footer-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.45rem);
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  border: 0;
  padding: 0;
  max-width: 60ch;
  margin-inline: auto;
  text-wrap: balance;
}
.footer-quote-cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-quote-cite a {
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.footer-quote-cite a:hover,
.footer-quote-cite a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ────────────────────────────────────────────────────────────────
   6. Bottom bar, legal + credit
   ──────────────────────────────────────────────────────────────── */
.footer-bottom {
  padding: var(--space-md) 0 max(var(--space-lg), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  /* Paper continues; the hairline above is enough division. */
  background: transparent;
}
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.footer-copy { margin: 0; }
.footer-credit { margin: 0; font-size: 0.78rem; }
.footer-credit a {
  color: var(--text-soft);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text-soft) 35%, transparent);
}
.footer-credit a:hover { color: var(--ink); text-decoration-color: currentColor; }
.footer-legal-links {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
}
.footer-legal-links a {
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.footer-legal-links a:hover { color: var(--ink); text-decoration: underline; }

/* ────────────────────────────────────────────────────────────────
   Legacy aliases, kept so older markup or external CSS that still
   references the old class names doesn't blow up. New work should
   use the bands above.
   ──────────────────────────────────────────────────────────────── */
.footer-grid { display: contents; }
.footer-main { display: contents; }
.footer-legal { display: none; }
.footer-top { display: contents; }
.footer-top-inner { display: contents; }
.footer-works { display: contents; }


/* components/buttons.css */
/* Buttons, two styles: solid and outline. A small modifier for compact use. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.7em 1.4em;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }

/* Primary, solid accent */
/* Primary uses --ink (which flips with theme) on both bg and as the
   complementing border, with --paper (which also flips) as the label.
   Both tokens flip together so contrast is preserved in light AND
   dark mode. Earlier this used --accent (hardcoded #111) for bg, which
   left dark text on a dark background in dark mode. */
.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover {
  background: var(--accent-hover, #000);
  border-color: var(--accent-hover, #000);
  color: var(--paper);
}
a.btn--primary,
a.btn--primary:visited {
  color: var(--paper);
}

/* Size modifier, keep min-height at the 44px tap target even for
   compact buttons; font/padding just shrink. */
.btn--sm { padding: 0.45em 0.9em; font-size: 0.85rem; min-height: var(--tap-target); }

/* Icon-only modifier, square, label hidden in an .sr-only span,
   description lives in the data-tip attribute (tippy.js picks it up).
   Used for hero CTA rows where the row reads as a cluster of icon
   shortcuts rather than a row of labelled buttons. */
.btn--icon {
  width: 3rem;
  height: 3rem;
  padding: 0;
  gap: 0;
  justify-content: center;
}
.btn--icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.btn--icon .btn-label,
.btn--icon .btn-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn--full { width: 100%; }
.btn svg { width: 1em; height: 1em; flex-shrink: 0; }

/* Legacy aliases, map old button modifiers to the new system so existing
   markup keeps working without touching every template. */
.btn--navy,
.btn--crimson,
.btn--secondary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--navy:hover,
.btn--crimson:hover,
.btn--secondary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.btn--outline { /* same as base .btn */ }

/* Legacy "light/ghost" variants, used to be styled for dark inverse
   regions. Now that the hero/footer are paper-colored, fall through to
   the standard outline look. */
.btn--outline-light,
.btn--ghost {
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
  opacity: 1;
}
.btn--outline-light:hover,
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--lg { padding: 0.9em 1.8em; font-size: 1rem; }

/* If a future page uses .section--dark (inverse), buttons in that
   context flip to use the inverse text color. */
.section--dark .btn,
.section--dark .btn--ghost,
.section--dark .btn--outline-light {
  color: var(--text-inverse);
  border-color: var(--text-inverse);
}
.section--dark .btn:hover,
.section--dark .btn--ghost:hover,
.section--dark .btn--outline-light:hover {
  background: var(--text-inverse);
  color: var(--ink);
  border-color: var(--text-inverse);
}
.section--dark .btn--primary {
  background: var(--text-inverse);
  color: var(--bg-inverse);
  border-color: var(--text-inverse);
}
.section--dark .btn--primary:hover {
  background: var(--text-inverse);
  color: var(--bg-inverse);
  opacity: 0.85;
}


/* components/cards.css */
/* Cards, one style. Thin border, padding, quiet hover.
   .card, .work-card, .person-card all share the same look. */

.card,
.work-card,
.person-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  overflow: hidden;
  height: 100%;
}
.card:hover,
.work-card:hover,
.person-card:hover {
  border-color: var(--ink-muted);
  transform: translateY(-1px);
}

/* No ornamental top-border, no ::before gradient, removed. */
.work-card::before { content: none; }

.card-body,
.work-card,
.person-card {
  padding: var(--space-lg);
  gap: var(--space-sm);
}
.work-card > * + *,
.person-card > * + * { margin-top: 0.75rem; }

.card-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card-title,
.work-card-title,
.person-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.25;
  font-weight: var(--fw-semibold);
  color: var(--heading);
  margin: 0;
}
.card-title a,
.work-card-title a {
  color: inherit;
  text-decoration: none;
}
.card-title a:hover,
.work-card-title a:hover { color: var(--link); }

.card-excerpt,
.work-card-desc {
  color: var(--text-soft);
  font-size: var(--text-base);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.card-footer,
.work-card-footer {
  padding-top: var(--space-sm);
  margin-top: auto;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  background: transparent;
  padding-inline: 0;
}

/* Card variant with body padding split */
.card > .card-body {
  flex: 1;
  padding: var(--space-lg);
}
.card > .card-footer {
  padding: var(--space-sm) var(--space-lg);
  background: transparent;
  border-top: 1px solid var(--border-soft);
  margin-top: 0;
}

/* Post / blog grid */
.post-grid,
.blog-grid,
.works-grid,
.connections-grid,
.related-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* Person card, initials avatar */
.person-card { text-align: center; }
.person-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--ink);
  border: 1px solid var(--border);
  margin: 0 auto var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
}
.person-name { font-size: var(--text-md); }
.person-dates {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}
.person-role {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0;
}
.person-relationship {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.6;
  text-align: left;
  margin-top: 0.5rem;
}
.person-quote {
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--text-soft);
  padding: 0 0 0 1em;
  border-left: 1px solid var(--ink);
  margin-top: 0.5rem;
  text-align: left;
  font-size: 0.9rem;
}


/* components/badges.css */
/* Badges + tags, one look. Outline pill, small caps. */

.badge,
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.7em;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  /* Pills should never break their label across two lines. "VOL. 12"
     was wrapping mid-chip in narrow columns. flex-shrink:0 keeps the
     pill at its natural width inside flex parents that want to wrap. */
  white-space: nowrap;
  flex-shrink: 0;
}
.tag:hover,
a.badge:hover,
a.badge:focus-visible {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
  outline: none;
}
a.badge {
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

/* Modifiers all look the same, just keep aliases working */
.badge--volume,
.badge--year,
.badge--category,
.badge--gold {
  color: var(--text-soft);
  background: transparent;
  border-color: var(--border);
}
.badge--volume { color: var(--accent); }

.tag-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}


/* components/breadcrumbs.css */
.breadcrumbs {
  padding: var(--space-sm) 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  /* Long trails (e.g. /works/interviews/<title>/) used to wrap to two
     lines on phones. Switch to a single-line horizontal scroll
     instead — no scrollbar shown, just the row of crumbs sliding
     under the user's finger / trackpad swipe. */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Soft fade on the right edge hints at more content when the trail
     overflows; pure CSS, no JS. */
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs ol {
  list-style: none;
  padding: 0; margin: 0;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  align-items: center;
  /* Allow li children to keep their `display: inline-flex` while the
     row stays a single horizontal line. */
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.breadcrumbs li + li::before {
  content: "/";
  color: var(--text-muted);
  opacity: 0.5;
  margin-right: 0.1rem;
}
.breadcrumbs a {
  color: var(--text-soft);
  text-decoration: none;
  white-space: nowrap;
}
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current="page"] {
  color: var(--text);
  white-space: nowrap;
}

/* Apply the same single-line behaviour to the work-breadcrumbs
   variant used by interview-chapter.njk and work.njk. */
.work-breadcrumbs {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}
.work-breadcrumbs::-webkit-scrollbar { display: none; }


/* components/forms.css */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-md);
  min-width: 0; /* lets grid cells shrink equally regardless of intrinsic input width */
}

label {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: var(--fw-semibold);
  color: var(--heading);
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
  width: 100%;
  min-height: var(--tap-target);
  padding: 0.7rem 1rem;
  /* All font properties set explicitly with !important because reset.css
     uses `font: inherit` on form controls, which otherwise lets
     font-style/weight leak through from ancestors (italic page-headers,
     italic lead paragraphs, etc.). */
  font-family: var(--font-sans) !important;
  font-size: 1rem !important; /* >=16px prevents iOS zoom-on-focus */
  font-style: normal !important;
  font-weight: var(--fw-regular) !important;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}
input::placeholder, textarea::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: var(--fw-regular) !important;
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* Chrome/Safari autofill tints inputs with a pale yellow/blue background and
   styles preview text in its own italic face. Override all of it so autofilled
   fields and autofill-previewed fields match the rest of the form. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: var(--fw-regular) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.form-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input-wrap svg {
  position: absolute;
  left: 1rem;
  width: 1rem; height: 1rem;
  color: var(--text-muted);
  pointer-events: none;
}
.search-input-wrap input {
  padding-left: 2.5rem;
}

.form-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}

.form-status {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  border-left: 3px solid transparent;
  min-height: 1.5em;
}
.form-status:empty { display: none; }
.form-status.is-success {
  background: var(--bg-alt);
  border-left-color: var(--accent);
  color: var(--text);
}
.form-status.is-error {
  background: var(--bg-alt);
  border-left-color: var(--accent-hover);
  color: var(--accent-hover);
}
.form-status.is-info {
  background: var(--bg-alt);
  border-left-color: var(--border-strong);
  color: var(--text-soft);
}

.btn.is-loading .submit-label { opacity: 0.5; }
.btn.is-loading .submit-spinner { display: inline-block !important; margin-left: 0.5rem; }

.btn[disabled],
.btn.is-loading {
  cursor: progress;
  opacity: 0.85;
}
.btn[disabled]:hover,
.btn.is-loading:hover {
  transform: none;
}


/* components/accordion.css */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap-target);
  padding: 1.1rem 0;
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--heading);
  text-align: left;
  line-height: 1.35;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.accordion-trigger:hover { color: var(--accent); }
.accordion-trigger > span:first-child { flex: 1 1 auto; display: block; min-width: 0; }
.accordion-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  position: relative;
  display: inline-block;
}
.accordion-icon .plus,
.accordion-icon .minus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-fast) var(--ease);
}
.accordion-icon .minus { opacity: 0; }
.accordion-trigger[aria-expanded="true"] { color: var(--accent); }
.accordion-trigger[aria-expanded="true"] .accordion-icon { color: var(--accent); }
.accordion-trigger[aria-expanded="true"] .accordion-icon .plus { opacity: 0; }
.accordion-trigger[aria-expanded="true"] .accordion-icon .minus { opacity: 1; }

.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-med) var(--ease);
}
.accordion-panel[data-open="true"] { max-height: 60rem; }
.accordion-panel-inner {
  color: var(--text-soft);
  font-size: var(--text-base);
  line-height: 1.7;
}
.accordion-panel-inner > div { padding: 0 0 1.25rem; }


/* components/toc.css */
/* Reading progress bar, thin, accent-colored, on every page.
   The bar is 100 % wide and uses transform: scaleX() to fill from
   left to right as the reader scrolls. transform animations are
   GPU-composited (zero layout, zero paint) so the bar updates 60 fps
   without contributing to long main-thread tasks. */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  /* Sit above the reader-panel toolbar (1000) and back-to-top (1100). */
  z-index: 1200;
  transition: transform 80ms linear;
}

/* Numeric % readout. Stays out of the way in a corner but grows legible
   when the reader is actively scrolling. Hidden at the very top so the
   UI is quiet on first load. */
.reading-progress-readout {
  position: fixed;
  /* Respect iOS safe-area inset (home indicator + left notch) */
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  /* Above the reader-panel toolbar so it isn't hidden when the
     panel is open. */
  z-index: 1200;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
}
.reading-progress-readout.is-visible { opacity: 1; }
@media print { .reading-progress,
                .reading-progress-readout { display: none; } }

/* Post TOC, only appears when the post has 2+ h2 headings */
.post-toc {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  align-self: start;
  /* min-width: 0 so the parent grid can size this column without
     letting long heading labels burst out into the article column.
     Combined with word-break on the link, long titles like "Does
     the Bible Sanction Polygamy and Concubinage" wrap inside the
     sidebar instead of overflowing into the body. */
  min-width: 0;
  max-width: 100%;
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
  padding: var(--space-md);
  border-left: 1px solid var(--border);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
}
.post-toc h2 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.post-toc ol {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  counter-reset: toc;
}
.post-toc li { counter-increment: toc; }
.post-toc a {
  display: block;
  color: var(--text-soft);
  text-decoration: none;
  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  /* Long heading titles wrap inside the sidebar instead of
     overflowing horizontally into the article column. */
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.post-toc a:hover { color: var(--text); }
.post-toc a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: var(--fw-semibold);
}
.post-toc .toc-h3 { padding-left: 1rem; font-size: 0.8rem; }

@media (max-width: 999.99px) {
  .post-toc { position: static; max-height: none; margin-bottom: var(--space-lg); }
}


/* components/theme-toggle.css */
.theme-toggle {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.theme-toggle:hover { background: var(--bg-alt); color: var(--text); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun  { display: inline-block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}


/* components/back-to-top.css */
.back-to-top {
  position: fixed;
  /* Respect iOS safe-area inset (home indicator) on notched devices */
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  right: max(1.25rem, env(safe-area-inset-right));
  width: var(--tap-target);
  height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), border-color var(--dur-fast) var(--ease);
  transform: translateY(0.5rem);
  /* Above the reader-panel toolbar (z 1000) so it stays clickable. */
  z-index: 1100;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.back-to-top svg { width: 1rem; height: 1rem; }


/* components/cta-banner.css */
/* CTA banner, kept as a quiet, non-contrasting block for pages that opt in. */
.cta-banner {
  background: var(--bg-alt);
  color: var(--text);
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-banner-inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .cta-banner-inner { grid-template-columns: 1.4fr auto; }
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--heading);
  margin-bottom: var(--space-sm);
  max-width: 22ch;
  font-weight: var(--fw-semibold);
}
.cta-banner p {
  color: var(--text-soft);
  font-size: var(--text-base);
  max-width: 52ch;
}
.cta-banner .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}


/* components/search.css */
.site-search {
  margin-bottom: var(--space-xl);
}
.search-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.search-result {
  padding: var(--space-md);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.search-result:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.search-result a { text-decoration: none; color: var(--heading); }
.search-result-type {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.search-result h3 {
  font-size: var(--text-md);
  margin-bottom: 0.3rem;
}
.search-result-desc {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}
.search-result mark {
  background: color-mix(in srgb, var(--focus) 22%, transparent);
  color: inherit;
  padding: 0 2px;
  border-radius: 0;
}
.search-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-md) 0;
}

/* ── On-screen search popup (Pagefind, lazy-loaded) ── */
.search-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 2rem;
  overflow: hidden;
}
.search-popup[hidden] { display: none; }
.search-popup-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.search-popup-card {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 6rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (max-width: 640px) {
  .search-popup { padding: 0; }
  .search-popup-card {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    border: 0;
    border-top: 0;
  }
}
.search-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.search-popup-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  margin: 0;
  color: var(--heading);
  line-height: 1.1;
}
.search-popup-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.search-popup-mic,
.search-popup-close {
  position: relative;
  width: var(--tap-target);
  height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.search-popup-mic svg,
.search-popup-close svg { width: 1.1rem; height: 1.1rem; }
.search-popup-mic:hover,
.search-popup-close:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.search-popup-mic.is-listening {
  background: var(--focus);
  color: #ffffff;
  border-color: var(--focus);
}
.search-mic-pulse {
  position: absolute;
  inset: -2px;
  border: 2px solid var(--focus);
  pointer-events: none;
  opacity: 0;
}
.search-popup-mic.is-listening .search-mic-pulse {
  animation: searchMicPulse 1.4s var(--ease) infinite;
}
@keyframes searchMicPulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.45); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .search-popup-mic.is-listening .search-mic-pulse { animation: none; }
}
.search-popup-status {
  margin: 0;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.search-popup-status[data-kind="listening"] {
  color: var(--text);
  background: color-mix(in srgb, var(--focus) 14%, var(--bg-alt));
  border-bottom-color: var(--focus);
}
.search-popup-status[data-kind="error"] {
  color: #ffffff;
  background: #b91c1c;
  border-bottom-color: #b91c1c;
}

.search-popup-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-md) var(--space-lg);
}

.search-popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  flex-wrap: wrap;
}
.search-popup-tip {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
.search-popup-tip kbd {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.1rem 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  margin: 0 0.1rem;
}
body.search-open { overflow: hidden; }

/* Filter explanation banner — sits above the Pagefind search box on
   /search/ and inside the search popup, so readers know what the
   "Type / Volume / Year / Decade / Category" facets do. The popup
   variant is tighter to fit the modal. */
.search-filters-hint {
  margin: 0 0 var(--space-md);
  padding: 0.75rem var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-soft);
  background: var(--bg-alt);
  border-left: 2px solid var(--ink);
}
.search-filters-hint--popup {
  margin: 0 var(--space-md) var(--space-sm);
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
}
.search-filters-hint strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}


/* components/pagefind.css */
/* Pagefind UI, restyled. We set Pagefind's own CSS variables so its
   internal styles inherit our theme, AND we use !important on critical
   text colors because Pagefind UI is lazy-loaded after our CSS and its
   own selectors otherwise win the cascade with equal specificity. */
:root {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--ink);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--surface);
  --pagefind-ui-border: var(--ink-muted);
  --pagefind-ui-tag: var(--bg-alt);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: var(--radius-sm);
  --pagefind-ui-image-border-radius: 0;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: var(--font-serif);
}
:root[data-theme="dark"],
:root[data-theme="dark"] .pagefind-ui {
  --pagefind-ui-primary: var(--ink);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--surface);
  --pagefind-ui-border: var(--ink-muted);
  --pagefind-ui-tag: var(--bg-alt);
}

.pagefind-ui__drawer { font-family: var(--font-body); }

.pagefind-ui form { display: flex; flex-direction: column; gap: var(--space-sm); }

.pagefind-ui .pagefind-ui__search-input {
  width: 100%;
  /* Left padding leaves room for Pagefind's own magnifying-glass icon
     (positioned absolute at left ~1rem). Without the larger left
     padding our shorthand overrides Pagefind's default and the icon
     overlaps the placeholder text. */
  padding: 0.9rem 1rem 0.9rem 2.75rem !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  border: 1px solid var(--ink-muted) !important;
  border-radius: var(--radius-sm) !important;
}
.pagefind-ui .pagefind-ui__search-input::placeholder {
  color: var(--text-soft) !important;
  opacity: 1 !important;
}
.pagefind-ui__search-input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}
.pagefind-ui__search-clear {
  min-height: var(--tap-target);
  color: var(--text-soft);
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0.6rem 0.85rem;
}
.pagefind-ui__search-clear:hover,
.pagefind-ui__search-clear:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.pagefind-ui__message {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-md);
}

.pagefind-ui__results { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }

.pagefind-ui .pagefind-ui__result {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  padding: var(--space-md) var(--space-lg) !important;
  background: var(--surface) !important;
  border: 1px solid var(--ink-muted) !important;
  border-left: 3px solid var(--ink) !important;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.pagefind-ui .pagefind-ui__result:hover {
  background: var(--bg-alt) !important;
  transform: translateY(-1px);
}

.pagefind-ui .pagefind-ui__result-title {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: var(--ink) !important;
}
.pagefind-ui .pagefind-ui__result-link {
  color: var(--ink) !important;
  text-decoration: none !important;
}
.pagefind-ui .pagefind-ui__result-link:hover,
.pagefind-ui .pagefind-ui__result-link:focus-visible {
  text-decoration: underline !important;
}

.pagefind-ui .pagefind-ui__result-excerpt {
  color: var(--text) !important;
  font-family: var(--font-serif) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.pagefind-ui__result-excerpt mark {
  background: color-mix(in srgb, var(--focus) 35%, transparent);
  color: var(--text);
  padding: 0 0.25em;
  font-weight: var(--fw-semibold);
}
:root[data-theme="dark"] .pagefind-ui__result-excerpt mark {
  background: color-mix(in srgb, var(--focus) 50%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pagefind-ui__result-excerpt mark {
    background: color-mix(in srgb, var(--focus) 50%, transparent);
  }
}
.search-result mark {
  background: color-mix(in srgb, var(--focus) 35%, transparent);
  color: var(--text);
  font-weight: var(--fw-semibold);
}
:root[data-theme="dark"] .search-result mark {
  background: color-mix(in srgb, var(--focus) 50%, transparent);
}

/* Sub-results (jump-to-heading inside the same page) */
.pagefind-ui__result-nested {
  margin: 0.3rem 0 0;
  padding-left: var(--space-md);
  border-left: 1px solid var(--border-soft);
}
.pagefind-ui__result-nested .pagefind-ui__result-title {
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
}

.pagefind-ui__result-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.pagefind-ui__result-tag {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-alt);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.pagefind-ui__button {
  padding: 0.6rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--heading);
  background: transparent;
  border: 2px solid var(--heading);
  cursor: pointer;
}
.pagefind-ui__button:hover { background: var(--heading); color: var(--parchment); }

/* Heading anchor (markdown-it-anchor) */
.heading-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35em;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  vertical-align: middle;
}
.heading-anchor svg { width: 0.85em; height: 0.85em; }
h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor,
.heading-anchor:focus-visible { opacity: 1; color: var(--crimson); }

/* Per-paragraph permalink (¶) on work pages, appears on hover, gives
   each paragraph a stable deep-link target like /works/the-gods/#p42. */
.para { scroll-margin-top: 6rem; }
.para-anchor {
  display: inline-block;
  margin-left: 0.25em;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0;
  font-family: var(--font-sans);
  font-size: 0.85em;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  vertical-align: baseline;
}
.para:hover > .para-anchor,
.para-anchor:focus-visible {
  opacity: 1;
  color: var(--ink);
}
.para:target {
  background: color-mix(in srgb, var(--focus) 14%, transparent);
  outline: 2px solid color-mix(in srgb, var(--focus) 40%, transparent);
  outline-offset: 2px;
}


/* components/settings-panel.css */
/* Global display-settings panel (reader tools).
   Opens from the cog in the masthead; includes font, size, spacing,
   theme, and (on article pages) reading-ruler / paragraph-numbers /
   auto-scroll tools. All prefs persisted to localStorage. */

/* Slide-in drawer from the right, mirrors .nav-panel exactly so the
   two panels read as the same component. Width, transform, transition,
   border, shadow, scrim, and body-scroll-lock all match nav.css. */
.gs-scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
  z-index: calc(var(--z-drawer) - 1);
}
.gs-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--drawer-w);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  font-family: var(--font-sans);
  color: var(--text);
  scrollbar-width: thin;
}
body.gs-open { overflow: hidden; }
body.gs-open .gs-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
body.gs-open .gs-panel { transform: translateX(0); }

.gs-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--border);
}
.gs-panel__kicker {
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0 0 0.25rem;
}
.gs-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--heading);
  margin: 0;
  line-height: 1.1;
}
.gs-panel__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.gs-panel__close:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.gs-preview {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.gs-preview__label {
  font-size: 0.66rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-xs);
}
.gs-preview__sample {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  font-style: italic;
}
.gs-preview__attrib {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: var(--space-xs) 0 0;
  letter-spacing: 0.04em;
}

.gs-section {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.gs-section:last-of-type { border-bottom: none; }
.gs-section__title {
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-sm);
}

.gs-profiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.gs-profile-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.gs-profile-btn:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.gs-profile-btn.is-active {
  border-color: var(--ink);
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--ink);
}
.gs-profile-btn__title {
  font-size: 0.9rem;
  font-weight: var(--fw-bold);
  color: var(--heading);
}
.gs-profile-btn__desc {
  font-size: 0.72rem;
  color: var(--ink-muted);
  line-height: 1.3;
}

.gs-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.gs-row:last-child { margin-bottom: 0; }
.gs-row__label {
  font-size: 0.85rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-soft);
  margin: 0;
}
.gs-row__control {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}

.gs-size { flex-wrap: wrap; }
.gs-size__min, .gs-size__max {
  font-family: var(--font-serif);
  color: var(--ink-muted);
  user-select: none;
}
.gs-size__min { font-size: 0.85rem; }
.gs-size__max { font-size: 1.2rem; }
.gs-size__slider {
  flex: 1;
  min-width: 100px;
  height: 4px;
  background: var(--border);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
}
.gs-size__slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.gs-size__slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.gs-size__value {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  color: var(--text);
  min-width: 42px;
  text-align: right;
}

.gs-select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 0.55rem var(--space-sm);
  min-height: var(--tap-target);
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
}
.gs-select:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}

.gs-seg {
  display: flex;
  width: 100%;
  border: 1px solid var(--border);
  overflow: hidden;
}
.gs-seg__btn {
  flex: 1;
  min-height: var(--tap-target);
  padding: 0.5rem var(--space-sm);
  background: var(--surface);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.gs-seg__btn:last-child { border-right: none; }
.gs-seg__btn:hover { background: var(--bg-alt); color: var(--text); }
.gs-seg__btn.is-active {
  background: var(--ink);
  color: var(--paper);
}

.gs-themes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}
.gs-theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.gs-theme-btn:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.gs-theme-btn.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.gs-theme-btn__swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
}
.gs-theme-btn__swatch--auto {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 49%, #1a1a1a 51%, #1a1a1a 100%);
}
.gs-theme-btn__swatch--light { background: #ffffff; }
.gs-theme-btn__swatch--sepia { background: #f4ecd8; }
.gs-theme-btn__swatch--cream { background: #fefcf0; }
.gs-theme-btn__swatch--dark  { background: #1a1a1a; border-color: #333; }
.gs-theme-btn__label {
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gs-theme-btn.is-active .gs-theme-btn__label { color: var(--text); }

/* Article-only section. Shown on pages where body has .article-body. */
.gs-article-only { display: none; }
body:has(.article-body) .gs-article-only { display: block; }

/* Hide desktop-only controls on touch devices (auto-scroll etc.) */
@media (hover: none) and (pointer: coarse) {
  .gs-desktop-only { display: none !important; }
}

.gs-panel__footer {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.gs-reset {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.5rem var(--space-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.gs-reset:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.gs-panel__save-note {
  margin: var(--space-sm) 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* ── Font overrides via [data-gs-font] ── */
[data-gs-font="sans"]        { --font-body: var(--font-sans); --font-display: var(--font-sans); --font-serif: var(--font-sans); }
[data-gs-font="lora"]        { --font-serif: 'Lora', Georgia, serif; --font-display: 'Lora', Georgia, serif; }
[data-gs-font="playfair"]    { --font-display: 'Playfair Display', Georgia, serif; }
[data-gs-font="georgia"]     { --font-serif: Georgia, 'Times New Roman', serif; --font-display: Georgia, serif; }
[data-gs-font="palatino"]    { --font-serif: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; --font-display: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; }
[data-gs-font="times"]       { --font-serif: 'Times New Roman', Times, serif; --font-display: 'Times New Roman', Times, serif; }
[data-gs-font="garamond"]    { --font-serif: 'EB Garamond', Garamond, Georgia, serif; --font-display: 'EB Garamond', Garamond, Georgia, serif; }
[data-gs-font="bookman"]     { --font-serif: 'Bookman Old Style', Georgia, serif; --font-display: 'Bookman Old Style', Georgia, serif; }
[data-gs-font="system"]      { --font-serif: system-ui, -apple-system, sans-serif; --font-display: system-ui, -apple-system, sans-serif; }
[data-gs-font="arial"]       { --font-serif: Arial, Helvetica, sans-serif; --font-display: Arial, Helvetica, sans-serif; }
[data-gs-font="verdana"]     { --font-serif: Verdana, Geneva, sans-serif; --font-display: Verdana, Geneva, sans-serif; }
[data-gs-font="trebuchet"]   { --font-serif: 'Trebuchet MS', Helvetica, sans-serif; --font-display: 'Trebuchet MS', Helvetica, sans-serif; }
[data-gs-font="tahoma"]      { --font-serif: Tahoma, Geneva, sans-serif; --font-display: Tahoma, Geneva, sans-serif; }
[data-gs-font="century"]     { --font-serif: 'Century Gothic', 'Apple Gothic', sans-serif; --font-display: 'Century Gothic', 'Apple Gothic', sans-serif; }
[data-gs-font="mono"]        { --font-serif: 'SF Mono', 'Fira Code', Consolas, monospace; --font-display: 'SF Mono', 'Fira Code', Consolas, monospace; }
[data-gs-font="courier"]     { --font-serif: 'Courier New', Courier, monospace; --font-display: 'Courier New', Courier, monospace; }
[data-gs-font="lucida"]      { --font-serif: 'Lucida Console', Monaco, monospace; --font-display: 'Lucida Console', Monaco, monospace; }
[data-gs-font="inter"]       { --font-serif: 'Inter', system-ui, sans-serif; --font-display: 'Inter', system-ui, sans-serif; }
[data-gs-font="merriweather"]{ --font-serif: 'Merriweather', Georgia, serif; --font-display: 'Merriweather', Georgia, serif; }
[data-gs-font="roboto"]      { --font-serif: 'Roboto', system-ui, sans-serif; --font-display: 'Roboto', system-ui, sans-serif; }
[data-gs-font="opensans"]    { --font-serif: 'Open Sans', system-ui, sans-serif; --font-display: 'Open Sans', system-ui, sans-serif; }
[data-gs-font="baskerville"] { --font-serif: 'Libre Baskerville', Georgia, serif; --font-display: 'Libre Baskerville', Georgia, serif; }
[data-gs-font="crimson"]     { --font-serif: 'Crimson Pro', Georgia, serif; --font-display: 'Crimson Pro', Georgia, serif; }
[data-gs-font="ibmplex"]     { --font-serif: 'IBM Plex Serif', Georgia, serif; --font-display: 'IBM Plex Serif', Georgia, serif; }
[data-gs-font="literata"]    { --font-serif: 'Literata', Georgia, serif; --font-display: 'Literata', Georgia, serif; }
[data-gs-font="atkinson"]    { --font-serif: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-display: 'Atkinson Hyperlegible', system-ui, sans-serif; }

/* ── Global background presets ── */
/* Sepia / cream theme overrides — paper-alt + surface aliased back to
   --paper so the page reads as one continuous colour, no inset gray. */
[data-gs-bg="sepia"] { --paper: #F4ECD8; --paper-alt: #F4ECD8; --surface: #F4ECD8; }
[data-gs-bg="cream"] { --paper: #FEFCF0; --paper-alt: #FEFCF0; --surface: #FEFCF0; }

/* ── Word spacing via :root custom prop ── */
body { word-spacing: var(--gs-word-spacing, 0); }

/* ── Reading ruler (injected by JS on article pages) ── */
.rs-ruler-line {
  position: fixed;
  left: 0; right: 0;
  top: 40vh;
  height: 2px;
  background: var(--ink);
  pointer-events: none;
  z-index: calc(var(--z-overlay) + 5);
  transition: opacity var(--dur-fast) var(--ease);
}

/* ── Paragraph numbers on article pages ──────────────────────────
   Earlier this rendered the number at `left: -2.5rem` so it lived
   in the article's negative margin. That worked on wide desktops
   where the reading column had plenty of empty gutter, but on phones
   and tablets the article body sits flush against the viewport
   padding, so the negative-offset number was clipped off the left
   edge entirely. Now: when the toggle is on, each paragraph reserves
   its OWN left gutter via padding-left, and the number sits at
   `left: 0` inside that gutter. Content shifts right by ~2.75 rem
   (1.85 rem on phones) — the natural trade-off when toggling
   numbered-paragraph mode. */
.article-body.rs-para-numbers { counter-reset: rs-para; }
.article-body.rs-para-numbers > p,
.article-body.rs-para-numbers > div > p,
.article-body.rs-para-numbers > section > p {
  position: relative;
  counter-increment: rs-para;
  padding-left: 2.75rem;
}
.article-body.rs-para-numbers > p::before,
.article-body.rs-para-numbers > div > p::before,
.article-body.rs-para-numbers > section > p::before {
  content: counter(rs-para);
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 2rem;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  /* Keep the number from joining selection / copy when readers
     drag-select a paragraph to quote. */
  user-select: none;
}
@media (max-width: 720px) {
  .article-body.rs-para-numbers > p,
  .article-body.rs-para-numbers > div > p,
  .article-body.rs-para-numbers > section > p {
    padding-left: 1.85rem;
  }
  .article-body.rs-para-numbers > p::before,
  .article-body.rs-para-numbers > div > p::before,
  .article-body.rs-para-numbers > section > p::before {
    width: 1.4rem;
    font-size: 0.65rem;
  }
}

/* ── GTranslate dropdown, restyled to match the settings panel ────
   GTranslate's CDN script injects a <select> (and its <option>s)
   into .gtranslate_wrapper with inline styles; !important is
   needed to override its own size/padding hardcoded by the widget. */
.gs-panel .gtranslate_wrapper {
  width: 100%;
}
.gs-panel .gtranslate_wrapper select {
  width: 100% !important;
  max-width: none !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9rem !important;
  padding: 0.55rem var(--space-sm) !important;
  min-height: var(--tap-target) !important;
  height: auto !important;
  background: var(--bg-alt) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer !important;
}
.gs-panel .gtranslate_wrapper select:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
  border-color: var(--focus) !important;
}
.gs-panel .gtranslate_wrapper select option {
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}
.gs-row__hint {
  margin: 0.4rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Hide GTranslate's own floating language switcher / branding link
   that some widget variants leave on the page; we only want the
   in-panel dropdown. */
.gtranslate_wrapper a[href*="gtranslate"],
.gt_float_switcher,
.gt-float-switcher,
.glink.gt-current-lang { display: none !important; }


/* components/photo-credit.css */
/* ── Photo with click-to-reveal credit lightbox ── */

.photo-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.photo-trigger {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.photo-trigger:hover,
.photo-trigger:focus-visible {
  border-color: var(--ink);
  outline: none;
}
.photo-trigger img,
.photo-trigger picture,
.photo-trigger picture img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--dur-med) var(--ease);
}
.photo-trigger:hover img,
.photo-trigger:focus-visible img { transform: scale(1.02); }

.photo-trigger-hint {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: rgba(20, 18, 15, 0.7);
  color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.photo-trigger:hover .photo-trigger-hint,
.photo-trigger:focus-visible .photo-trigger-hint {
  opacity: 1;
}
.photo-trigger-hint svg { width: 1rem; height: 1rem; }

.photo-caption {
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Lightbox dialog, shows the full photo plus credits on click. */
.photo-lightbox {
  padding: 0;
  margin: auto;
  width: min(96vw, 1100px);
  max-width: 96vw;
  max-height: 96vh;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  overflow: hidden;
}
.photo-lightbox::backdrop {
  background: rgba(8, 7, 5, 0.9);
  backdrop-filter: blur(4px);
}
.photo-lb-body {
  display: grid;
  grid-template-columns: 1fr;
  max-height: 96vh;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .photo-lb-body { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.photo-lb-imgwrap {
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 96vh;
}
.photo-lb-img,
.photo-lb-imgwrap img,
.photo-lb-imgwrap picture,
.photo-lb-imgwrap picture img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 96vh;
  object-fit: contain;
}
.photo-credit {
  padding: var(--space-lg);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-soft);
  border-top: 1px solid var(--border-soft);
}
@media (min-width: 768px) {
  .photo-credit {
    border-top: 0;
    border-left: 1px solid var(--border-soft);
  }
}
.photo-credit h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--heading);
  margin: 0 0 0.5rem;
}
.photo-credit .photo-credit-meta {
  margin: 0 0 0.55rem;
}
.photo-credit a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.photo-credit a:hover { color: var(--accent-hover, #000); }
.photo-credit code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
}

.photo-lb-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--paper);
  background: rgba(20, 18, 15, 0.75);
  border: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
  cursor: pointer;
  z-index: 2;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.photo-lb-close:hover,
.photo-lb-close:focus-visible {
  background: var(--paper);
  color: var(--ink);
  outline: none;
}
.photo-lb-close svg { width: 1.1rem; height: 1.1rem; }


/* components/glossary-tip.css */
/* ── Inline glossary trigger (.gloss) + tippy theme ── */

.gloss {
  border-bottom: 1px dotted var(--ink-muted);
  cursor: help;
  text-decoration: none;
  color: inherit;
}
.gloss:hover,
.gloss:focus-visible {
  border-bottom-style: solid;
  border-bottom-color: var(--ink);
  outline: none;
}

/* Tippy theme that matches the site palette */
.tippy-box[data-theme~="fla"] {
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.tippy-box[data-theme~="fla"][data-placement^="top"] > .tippy-arrow::before {
  border-top-color: var(--ink);
}
.tippy-box[data-theme~="fla"][data-placement^="bottom"] > .tippy-arrow::before {
  border-bottom-color: var(--ink);
}
.tippy-box[data-theme~="fla"][data-placement^="left"] > .tippy-arrow::before {
  border-left-color: var(--ink);
}
.tippy-box[data-theme~="fla"][data-placement^="right"] > .tippy-arrow::before {
  border-right-color: var(--ink);
}
.tippy-box[data-theme~="fla"] .tippy-content {
  padding: 0.6rem 0.75rem;
}
.tip-body { display: block; }
.tip-more {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.tip-more a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  font-weight: var(--fw-semibold);
}


/* components/share.css */
.share-block {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: var(--space-lg) 0;
}
.share-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-right: 0.25rem;
}
.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  text-decoration: none;
}
.share-button:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.share-button svg { width: 1rem; height: 1rem; }

.share-toast {
  position: fixed;
  bottom: 5rem; left: 50%;
  transform: translateX(-50%) translateY(0.75rem);
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  z-index: var(--z-toast);
}
.share-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Share & export modal ────────────────────────────────────────
   Implemented as a native HTML <dialog>. The browser handles top-
   layer rendering, the ::backdrop scrim, focus management, and
   escape-to-close. This CSS only needs to size the dialog itself
   and style its internal layout — no fixed positioning, no
   transforms, no z-index battles.

   Mobile-first (default): the dialog fills the viewport edge-to-
   edge using 100vw + 100dvh. The dialog itself becomes the
   scrolling container; overflow-y on the dialog so internal
   content always scrolls cleanly.

   Tablet+ (≥768px): becomes a centered card via margin:auto +
   capped width and height; the browser centers natively. */
.reader-share-modal {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--text);
  width: 100vw;
  max-width: 100vw;
  height: 100vh; /* fallback */
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.reader-share-modal::backdrop {
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.reader-share-modal *,
.reader-share-modal *::before,
.reader-share-modal *::after { box-sizing: border-box; }
.reader-share-modal img,
.reader-share-modal svg { max-width: 100%; height: auto; }

@media (min-width: 768px) {
  .reader-share-modal {
    margin: auto;
    width: min(720px, calc(100vw - 4rem));
    max-width: min(720px, calc(100vw - 4rem));
    height: auto;
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
}

/* Lock html scroll while the dialog is open. The browser also
   blocks page-scroll on showModal() but iOS sometimes lets it
   through; this is belt-and-braces. */
html.reader-share-modal-open { overflow: hidden; }

.reader-share-modal__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  /* Mobile-first padding: tighter than the body so the title clears
     a 360px-wide phone with a 44px close button on the right. */
  padding: 0.85rem 0.85rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) {
  .reader-share-modal__header {
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
  }
}
.reader-share-modal__heading {
  min-width: 0;
  flex: 1 1 auto;
}
.reader-share-modal__kicker {
  margin: 0 0 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
@media (min-width: 768px) {
  .reader-share-modal__kicker { font-size: 0.72rem; letter-spacing: 0.16em; }
}
.reader-share-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
@media (min-width: 768px) {
  .reader-share-modal__title { font-size: 1.4rem; }
}
.reader-share-modal__close-form {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  display: flex;
}
.reader-share-modal__close {
  flex: 0 0 auto;
  width: var(--tap-target);
  height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--ink-soft);
  cursor: pointer;
  /* Sit above sticky-header siblings so the click always hits the
     button itself, never an overlapping pseudo-element or scrollbar. */
  position: relative;
  z-index: 2;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
/* SVG is decorative — pass clicks straight through to the button so
   e.target.closest() always resolves to the [data-share-modal-close]
   button regardless of where on the icon the user clicked. */
.reader-share-modal__close svg { pointer-events: none; }
.reader-share-modal__close:hover,
.reader-share-modal__close:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-alt);
  outline: none;
}

.reader-share-modal__body {
  /* Tighter padding on mobile so the action grid uses every bit of
     the 360–414px width band. Tablet+ gets the full breathing room. */
  padding: var(--space-md) 0.85rem var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}
@media (min-width: 768px) {
  .reader-share-modal__body {
    padding: var(--space-md) var(--space-md) var(--space-xl);
    gap: var(--space-lg);
  }
}
.reader-share-modal__section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.reader-share-modal__section-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
.reader-share-modal__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  /* Force every card in a row to share the row's height so cards with
     longer descriptions don't make their neighbours look stunted. */
  grid-auto-rows: 1fr;
}
/* Each <li> stretches to the row height; the inner action then fills
   the <li> end-to-end so all cards in a row are visually identical. */
.reader-share-modal__grid > li {
  display: flex;
}
.reader-share-modal__grid > li > .reader-share-modal__action {
  width: 100%;
  height: 100%;
}
@media (min-width: 540px) {
  .reader-share-modal__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Compact variant — used by the "Share this work" section so the
   ten brand-share targets fit a phone in a 3-column icon grid
   instead of stretching to ten tall rows. Each compact action
   stacks icon-above-label, hides the em description, and reads
   like a tap chip. The other sections (cite/print, downloads,
   notes) keep the detailed list layout. */
.reader-share-modal__grid--compact {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
@media (min-width: 480px) {
  .reader-share-modal__grid--compact { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) {
  .reader-share-modal__grid--compact { grid-template-columns: repeat(5, 1fr); }
}
.reader-share-modal__grid--compact .reader-share-modal__action {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.6rem 0.35rem;
  min-height: 4.5rem;
}
.reader-share-modal__grid--compact .reader-share-modal__action svg {
  width: 22px;
  height: 22px;
  margin-top: 0;
}
.reader-share-modal__grid--compact .reader-share-modal__action span {
  align-items: center;
  width: 100%;
}
.reader-share-modal__grid--compact .reader-share-modal__action strong {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.reader-share-modal__grid--compact .reader-share-modal__action em {
  /* The brand-share grid is a tap chip — the title says it all,
     no need for the longer description on the small chip. */
  display: none;
}
.reader-share-modal__action {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  /* Tighter on mobile so the icon + two-line label fit a 360px-wide
     phone in a single column without horizontal overflow. */
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--bg);
  text-align: left;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
@media (min-width: 768px) {
  .reader-share-modal__action {
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
  }
}
.reader-share-modal__action:hover,
.reader-share-modal__action:focus-visible {
  border-color: var(--ink);
  background: var(--paper-alt);
  outline: none;
}
.reader-share-modal__action svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  color: var(--ink);
}
.reader-share-modal__action span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.reader-share-modal__action strong {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--heading);
  word-break: break-word;
  overflow-wrap: break-word;
}
.reader-share-modal__action em {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-soft);
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  .reader-share-modal__action strong { font-size: 1rem; }
  .reader-share-modal__action em { font-size: 0.78rem; line-height: 1.4; }
}
.reader-share-modal__footnote {
  margin: 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.reader-share-modal__footnote code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.74rem;
}


/* components/leaflet-map.css */
/* ── Leaflet map renderer apparatus ──
   Shared styles for the Leaflet renderer used on /, /timeline/,
   /lecture-tour/ — pins, cluster badges, popups, custom controls,
   and the "Map unavailable" fallback. Lives in components/ rather
   than pages/timeline.css because the homepage and lecture-tour
   surfaces also need them, and PAGE_CSS_MAP only loads the
   timeline bundle on a subset of routes. */

/* Custom pin */
.timeline-pin {
  position: relative;
}
.timeline-pin-dot {
  display: block;
  width: 18px;
  height: 18px;
  margin: 5px auto;
  background: var(--ink);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
  border-radius: 50%;
}
/* Touch-sized pin on mobile, larger dot, larger badge, full
   44px tap target satisfied by the 44x44 div container in the JS. */
.timeline-pin--touch .timeline-pin-dot {
  width: 28px;
  height: 28px;
  margin: 8px auto;
  border-width: 4px;
}
.timeline-pin--touch .timeline-pin-count {
  min-width: 22px;
  height: 22px;
  font-size: 12px;
  line-height: 22px;
  top: -4px;
  right: -4px;
}
.timeline-pin-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--paper);
  background: var(--focus);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--paper);
}

/* Leaflet popup overrides */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-lg) !important;
}
.leaflet-popup-content {
  margin: 0.85rem 1rem !important;
  font-family: var(--font-serif);
  color: var(--text);
  min-width: 200px;
}
.leaflet-popup-scrolled {
  border-top: 1px solid var(--border-soft) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.leaflet-popup-scrolled::-webkit-scrollbar { width: 8px; }
.leaflet-popup-scrolled::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 0;
}
.tm-popup-count {
  position: sticky;
  top: 0;
  margin: -0.2rem -0.2rem 0.5rem;
  padding: 0.4rem 0.2rem 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  z-index: 1;
}
.tm-popup hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: 0.55rem 0;
}
.tm-popup-entry { padding: 0.1rem 0; }
.tm-popup-date {
  margin: 0 0 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tm-popup-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--heading);
}
.tm-popup-title a { color: inherit; text-decoration: none; }
.tm-popup-title a:hover,
.tm-popup-title a:focus-visible { text-decoration: underline; }
.tm-popup-loc {
  margin: 0 0 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-soft);
}
.tm-popup-work {
  display: inline-block;
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.tm-popup-work:hover,
.tm-popup-work:focus-visible {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}
.leaflet-container a.leaflet-popup-close-button {
  color: var(--ink-soft);
  font-weight: 400;
  padding: 0.35rem 0.5rem !important;
}

/* Custom map controls (reset view / fit visible) */
.tm-controls {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.tm-ctl {
  width: var(--tap-target);
  height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tm-ctl:last-child { border-bottom: 0; }
.tm-ctl:hover,
.tm-ctl:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: none;
}
.tm-ctl svg { width: 1.1rem; height: 1.1rem; }

/* Hard-fail fallback message rendered by timeline-map.js when the
   Leaflet bundle never loads (CSP block, 404, network failure). */
.tm-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-md);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-muted);
  background: var(--bg-alt);
}
.tm-fallback p { margin: 0; max-width: 36ch; }
.tm-fallback strong { color: var(--ink); }
.tm-fallback a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
}


/* components/auto-toc.css */
/* ── Auto-TOC ──
   Sticky-left table of contents inserted at runtime by
   /assets/js/auto-toc.js on pages that opt in via the
   `page-with-toc` body class. Mirrors the /guide/ TOC pattern so
   long editorial pages (about, biography, colophon, ethics,
   preservation, governance, license, research, classroom, privacy,
   tech-stack, legacy, conway-introduction) read the same way.

   Layout: stacks on phones, becomes a 16rem sticky aside + 1fr body
   from 1000 px up. The TOC scrolls independently when it's taller
   than the viewport. */

.has-auto-toc .container,
.has-auto-toc .container--narrow {
  /* Widen the host container so the two columns have breathing room.
     Default container--narrow is too tight for a sidebar+body grid. */
  max-width: min(1280px, calc(100vw - 2rem));
}

.auto-toc-layout {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  /* Body adopts the same vertical rhythm the original section used. */
  align-items: start;
}
@media (min-width: 1000px) {
  .auto-toc-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

/* The aside that holds the TOC. Sticky from tablet up. */
.auto-toc-aside {
  /* Stays at the source order (left) and out of the way on mobile. */
  margin: 0;
}
@media (min-width: 1000px) {
  .auto-toc-aside {
    position: sticky;
    top: calc(var(--header-h, 4.25rem) + var(--space-md));
    align-self: start;
    max-height: calc(100dvh - var(--header-h, 4.25rem) - var(--space-xl));
    overflow-y: auto;
    padding-right: var(--space-sm);
  }
}

.auto-toc {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.45;
  /* Faint left rule echoes a printed book's running header. */
  border-left: 1px solid var(--border-soft);
  padding: 0.25rem 0 0.25rem var(--space-md);
}
.auto-toc__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.auto-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: auto-toc-section;
}
.auto-toc__list > li {
  counter-increment: auto-toc-section;
  margin-bottom: 0.15rem;
}
.auto-toc__list > li > a {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  text-decoration: none;
  color: var(--text);
  padding: 0.3rem 0.4rem 0.3rem 0;
  border-left: 2px solid transparent;
  margin-left: -0.5rem;
  padding-left: 0.5rem;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.auto-toc__list > li > a::before {
  content: counter(auto-toc-section, decimal-leading-zero);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  flex: 0 0 auto;
  padding-top: 0.1rem;
}
.auto-toc__list > li > a:hover,
.auto-toc__list > li > a:focus-visible {
  color: var(--ink);
  border-left-color: var(--border);
  background: var(--bg-alt);
  outline: none;
}
.auto-toc__list > li > a.is-active {
  color: var(--ink);
  font-weight: var(--fw-semibold);
  border-left-color: var(--ink);
}
.auto-toc__list > li > a.is-active::before {
  color: var(--ink);
}

/* Body inherits the original layout intent; min-width: 0 lets it
   shrink inside the grid column without overflowing. */
.auto-toc-body {
  min-width: 0;
}
.auto-toc-body > .prose,
.auto-toc-body > article.prose {
  max-width: var(--reading-max);
}


/* components/book-layout.css */
/* ─────────────────────────────────────────────────────────────────
   Book layout — shared chapter-book skeleton.

   Used by /style-guide/ and /data/ (and any future page that wants a
   sticky-left chapter TOC + numbered sections). The structure is:

     .book-cover                — page-wide hero band, can be edge-to-edge
     .book-layout               — 14rem sticky aside + body grid
       .book-toc-aside
         .book-toc              — chapter list with Roman numerals
       .book-body
         .book-chapter          — chapter divider
         .book-block            — numbered § block
   ───────────────────────────────────────────────────────────────── */

/* ── Cover ── */
.book-cover {
  margin: 0;
  padding: var(--space-3xl) 0 var(--space-2xl);
  background: var(--paper);
  border-bottom: 4px solid var(--ink);
  text-align: center;
}
.book-cover-kicker {
  margin: 0 0 var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.book-cover-mark {
  margin: 0 auto var(--space-lg);
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.6rem + 6vw, 6.5rem);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: inline-block;
}
.book-cover-lead {
  margin: 0 auto var(--space-2xl);
  max-width: 40rem;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-soft);
  text-align: center;
}
.book-cover-meta {
  margin: 0 auto;
  max-width: 60rem;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  text-align: left;
}
@media (min-width: 720px) { .book-cover-meta { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .book-cover-meta { grid-template-columns: repeat(6, 1fr); } }
.book-cover-meta li {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--ink);
}
.book-cover-meta li span {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.book-cover-meta li strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

/* ── Page-level layout ── */
.book-section-wrap {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}
.book-section-wrap .container {
  max-width: min(1320px, calc(100vw - 2rem));
}
.book-layout {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .book-layout {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* ── Sticky chapter TOC ── */
.book-toc-aside { position: relative; }
@media (min-width: 1000px) {
  .book-toc-aside {
    position: sticky;
    top: calc(var(--header-h, 4.25rem) + var(--space-md));
    align-self: start;
    max-height: calc(100dvh - var(--header-h, 4.25rem) - var(--space-xl));
    overflow-y: auto;
    padding-right: var(--space-sm);
  }
}
.book-toc {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
}
.book-toc-label {
  margin: 0 0 var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.book-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.book-toc-chapter {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-soft);
}
.book-toc-chapter:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.book-toc-chapter-num {
  display: inline-block;
  margin-right: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.book-toc-chapter-name {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.book-toc-chapter ul {
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.book-toc-chapter li a {
  display: block;
  padding: 0.3rem 0.5rem;
  margin-left: -0.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.5rem;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.book-toc-chapter li a:hover,
.book-toc-chapter li a:focus-visible {
  color: var(--ink);
  background: var(--bg-alt);
  border-left-color: var(--ink);
  outline: none;
}
.book-toc-foot {
  margin: var(--space-lg) 0 0;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Body ── */
.book-body {
  min-width: 0;
  max-width: 64rem;
}

/* ── Chapter divider ── */
.book-chapter {
  margin: var(--space-3xl) 0 var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 4px solid var(--ink);
}
.book-chapter:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.book-chapter-eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.book-chapter-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--heading);
}
.book-chapter-lede {
  margin: 0;
  max-width: 56ch;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ── Block (one §) ── */
.book-block {
  margin: var(--space-2xl) 0;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-soft);
  scroll-margin-top: 5rem;
}
.book-block:first-of-type {
  margin-top: var(--space-md);
  padding-top: 0;
  border-top: 0;
}
.book-num {
  margin: 0 0 0.3rem;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.book-h2 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.8rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--heading);
}
.book-h3 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  color: var(--heading);
}
.book-lead {
  margin: 0 0 var(--space-lg);
  max-width: 60ch;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.book-aside {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-alt);
  border-left: 3px solid var(--border);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-soft);
}
.book-block p {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text);
}
.book-block ul,
.book-block ol {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text);
}
.book-block ul li + li,
.book-block ol li + li { margin-top: 0.4rem; }
.book-block code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.85em;
  background: var(--bg-alt);
  padding: 0.05em 0.35em;
  border: 1px solid var(--border-soft);
}
.book-block pre {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink);
  overflow-x: auto;
}
.book-block pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}


/* print.css */
/* ============================================================
   Print stylesheet, tuned for /works/ and /works/interviews/.
   Strips all site chrome and renders a clean, typographically
   pleasant document suited for "Save as PDF" or paper printing.
   Loaded LAST in CSS_ORDER so it can override earlier rules
   without `!important` battles.
   ============================================================ */

@media print {

  /* ── Page geometry ────────────────────────────────────────── */
  @page {
    size: Letter;
    margin: 0.75in 0.85in 0.85in 0.85in;
  }
  @page :first {
    margin-top: 1.1in;
  }

  /* ── Reset to clean black-on-white serif ──────────────────── */
  :root, html, body {
    background: #fff !important;
    color: #000 !important;
    font-family: "EB Garamond", Garamond, "Times New Roman", Georgia, serif !important;
    font-size: 11.5pt !important;
    line-height: 1.45 !important;
  }
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── Hide every piece of site chrome and interactive UI ─── */
  .site-header,
  .site-footer,
  .nav-panel,
  .nav-panel-overlay,
  .nav-toggle,
  .breadcrumbs,
  .page-header .section-label,
  .work-meta-badges,
  .work-topics,
  .work-tools,
  .work-tool-btn,
  .article-notes-toggle,
  .article-notes-panel,
  .library-panel,
  .library-panel-overlay,
  .article-notes-overlay,
  .annotation-toolbar,
  .reader-panel-open-display,
  .reader-export-list,
  .reader-tools-block,
  .share-block,
  .share-button,
  .work-audio,
  .post-toc,
  .reading-progress,
  .reading-progress-readout,
  .reading-progress-bar,
  .back-to-top,
  .theme-toggle,
  .skip-link,
  .nav-search,
  .pagefind-ui,
  .global-settings-panel,
  #global-settings-panel,
  .gs-panel,
  .heading-anchor,
  .para-anchor,
  .post-prev-next,
  .work-nav,
  .quote-rotator-link,
  .today-in-life,
  .timeline-map-wrap,
  .home-map-wrap,
  .photo-trigger-hint,
  .photo-lb-close,
  .photo-lightbox,
  .gallery-lightbox,
  .cite-dialog,
  .video-embed,
  .video-iframe,
  dialog,
  [hidden],
  [aria-hidden="true"]:not(.gloss):not(.til-sep):not(.separator) {
    display: none !important;
  }

  /* ── Article container takes the full printable width ───── */
  .container,
  .container--narrow,
  .post-layout,
  .work-article,
  .post-body,
  .article-body,
  .prose,
  main,
  #main {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* ── Page header, print citation block at the top ──────── */
  .page-header,
  .work-header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 0.4in !important;
    margin: 0 0 0.3in !important;
    border-bottom: 1pt solid #000 !important;
    text-align: left !important;
  }
  .work-header .container { padding: 0 !important; }

  .work-title,
  .page-header h1 {
    font-family: "EB Garamond", Garamond, "Times New Roman", Georgia, serif !important;
    font-size: 24pt !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #000 !important;
    margin: 0 0 0.1in !important;
    max-width: none !important;
    text-align: left !important;
    page-break-after: avoid;
    break-after: avoid;
  }
  .work-subtitle {
    font-family: "EB Garamond", Garamond, "Times New Roman", Georgia, serif !important;
    font-size: 13pt !important;
    font-style: italic !important;
    color: #333 !important;
    margin: 0 0 0.12in !important;
    text-align: left !important;
  }
  .work-description,
  .page-header .lead {
    font-family: "EB Garamond", Garamond, "Times New Roman", Georgia, serif !important;
    font-size: 11pt !important;
    font-style: italic !important;
    color: #333 !important;
    margin: 0 0 0.15in !important;
    max-width: none !important;
    text-align: left !important;
  }
  .post-byline {
    font-family: Georgia, serif !important;
    font-size: 9pt !important;
    color: #666 !important;
    margin: 0 !important;
  }
  .post-byline .separator { color: #999 !important; }
  .back-link, .work-breadcrumbs { display: none !important; }

  /* Synthesized "By Thomas Paine · The Conway Edition"
     line. Inserted via ::before on the body so we don't have to
     touch templates. */
  .work-article > header.work-header::after {
    content: "By Thomas Paine · The Works of Thomas Paine, Conway Edition · Public domain";
    display: block;
    margin: 0.1in 0 0;
    font-family: Georgia, serif;
    font-size: 9pt;
    font-style: italic;
    color: #555;
  }

  /* ── Body typography ────────────────────────────────────── */
  .post-body p,
  .article-body p,
  .prose p,
  p.para {
    font-family: "EB Garamond", Garamond, "Times New Roman", Georgia, serif !important;
    font-size: 11.5pt !important;
    line-height: 1.5 !important;
    color: #000 !important;
    margin: 0 0 0.16in !important;
    text-align: justify !important;
    text-indent: 1.5em;
    orphans: 3;
    widows: 3;
  }
  .post-body p:first-of-type,
  .article-body p:first-of-type,
  .prose p:first-of-type {
    text-indent: 0;
  }

  .post-body h2, .article-body h2, .prose h2 {
    font-family: "EB Garamond", Garamond, "Times New Roman", Georgia, serif !important;
    font-size: 16pt !important;
    font-weight: 700 !important;
    margin: 0.4in 0 0.12in !important;
    color: #000 !important;
    page-break-before: auto;
    break-before: auto;
    page-break-after: avoid;
    break-after: avoid;
  }
  .post-body h3, .article-body h3, .prose h3 {
    font-family: "EB Garamond", Garamond, "Times New Roman", Georgia, serif !important;
    font-size: 13pt !important;
    font-weight: 700 !important;
    font-style: italic !important;
    margin: 0.25in 0 0.1in !important;
    color: #000 !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  .post-body blockquote,
  .article-body blockquote,
  .prose blockquote {
    margin: 0.18in 0.4in !important;
    padding: 0 !important;
    font-style: italic !important;
    color: #222 !important;
    border: 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .post-body blockquote p,
  .prose blockquote p { text-indent: 0 !important; }

  .post-body ul,
  .post-body ol,
  .prose ul,
  .prose ol {
    margin: 0.1in 0 0.16in 0.35in !important;
    padding: 0 !important;
  }
  .post-body li, .prose li {
    margin: 0 0 0.05in !important;
    line-height: 1.45 !important;
  }

  /* ── Links ───────────────────────────────────────────────── */
  /* In-content links: keep ink black, no URL trail (it clutters
     prose), but underline so they're discoverable. */
  .post-body a,
  .article-body a,
  .prose a {
    color: #000 !important;
    text-decoration: underline !important;
  }
  .post-body a::after,
  .article-body a::after,
  .prose a::after { content: "" !important; }

  /* External links in metadata blocks DO show their URL. */
  .work-footer-note a,
  .photo-credit a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* Glossary triggers, drop the dotted underline and show inline. */
  .gloss {
    border: 0 !important;
    color: inherit !important;
  }

  /* ── Per-paragraph anchors hidden ────────────────────────── */
  .para-anchor { display: none !important; }
  .heading-anchor { display: none !important; }

  /* ── Paragraph numbers never appear in print ─────────────── */
  /* The reader-settings panel can render visible paragraph
     numerals via .rs-para-numbers + a ::before counter. They
     belong to the on-screen reading aid only — print output is
     a clean document with no marginal numerals, no left gutter,
     no padding shift. */
  .article-body.rs-para-numbers > p,
  .article-body.rs-para-numbers > div > p,
  .article-body.rs-para-numbers > section > p {
    padding-left: 0 !important;
  }
  .article-body.rs-para-numbers > p::before,
  .article-body.rs-para-numbers > div > p::before,
  .article-body.rs-para-numbers > section > p::before {
    content: none !important;
    display: none !important;
  }

  /* ── Footer: source/license note kept, site-nav stripped ── */
  .work-footer {
    margin-top: 0.4in !important;
    padding-top: 0.18in !important;
    border-top: 1pt solid #000 !important;
  }
  .work-footer hr { display: none !important; }
  .work-footer-note p {
    font-family: Georgia, serif !important;
    font-size: 9pt !important;
    color: #444 !important;
    text-indent: 0 !important;
    text-align: left !important;
    margin: 0 !important;
  }

  /* ── Images, keep them but never split across pages ────── */
  img, picture, figure {
    page-break-inside: avoid;
    break-inside: avoid;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── Avoid awkward breaks ────────────────────────────────── */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }
  table { page-break-inside: avoid; break-inside: avoid; }

  /* ── Hide site notification overlays / share toast etc. ── */
  .share-toast,
  .gs-panel,
  .ann-note-overlay,
  .ann-note-modal { display: none !important; }
}