/* ============================================================
   BROADSHEET — Design Tokens
   All visual variables live here. Edit this file to retheme.
   ============================================================ */

:root {
  /* ── Color: Light Mode ─────────────────────────────────── */
  --color-bg:           #F4F1EB;   /* Warm newsprint */
  --color-bg-alt:       #EAE6DE;   /* Slightly darker panels */
  --color-bg-inset:     #E0DBCF;   /* Card backgrounds */
  --color-ink:          #1A1A1A;   /* Primary text */
  --color-ink-muted:    #4A4845;   /* Secondary text, datelines */
  --color-ink-faint:    #888380;   /* Captions, metadata */
  --color-rule:         #C8C2B6;   /* Horizontal rules, borders */
  --color-rule-heavy:   #8A847A;   /* Strong dividers */

  /* ── Color: Accent ─────────────────────────────────────── */
  --color-accent:       #C0392B;   /* Vermillion — breaking, labels */
  --color-accent-hover: #A93226;
  --color-link:         #2C5F8A;   /* Slate blue — links */
  --color-link-hover:   #1A3F5C;

  /* ── Color: Selection ──────────────────────────────────── */
  --color-selection:     #6A1B9A;  /* Pansy purple */
  --color-selection-ink: #ffffff;

  /* ── Color: Section Accents ────────────────────────────── */
  --color-news:                #C0392B;
  --color-opinion:             #2C5F8A;
  --color-analysis:            #5D4037;
  --color-arts-culture:        #6A1B9A;
  --color-science:             #1B5E20;
  --color-history:             #BF8C00;
  --color-letters:             #37474F;
  --color-thought-experiments: #1D5C6E;
  --color-trials:              #6B2A2A;
  --color-glossary:            #3D5A47;
  --color-bookshelf:           #7A5232;
  --color-reviews:             #8B6914;

  /* ── Typography: Families ──────────────────────────────── */
  --font-masthead:   'Playfair Display', Georgia, serif;
  --font-headline:   'Lora', Georgia, serif;
  --font-body:       'Source Serif 4', Georgia, serif;
  --font-ui:         'DM Sans', system-ui, sans-serif;

  /* ── Typography: Scale (Major Third — 1.25) ────────────── */
  --text-xs:    0.75rem;    /*  ~12px */
  --text-sm:    0.875rem;   /*  ~14px */
  --text-base:  1rem;       /*  ~16px */
  --text-md:    1.25rem;    /*  ~20px */
  --text-lg:    1.563rem;   /*  ~25px */
  --text-xl:    1.953rem;   /*  ~31px */
  --text-2xl:   2.441rem;   /*  ~39px */
  --text-3xl:   3.052rem;   /*  ~49px */
  --text-4xl:   3.815rem;   /*  ~61px */
  --text-masthead: clamp(2.5rem, 6vw, 5rem);

  /* ── Typography: Line Heights ──────────────────────────── */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.9;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width:        1280px;
  --max-width-prose:  720px;
  --gutter:           clamp(1rem, 4vw, 2rem);
  --column-gap:       var(--space-8);

  /* ── Borders & Radius ───────────────────────────────────── */
  --radius-sm:    2px;
  --radius-md:    4px;
  --border-width: 1px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;

  /* ── Z-Index ────────────────────────────────────────────── */
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}

/* ── Dark Mode Tokens ──────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:           #141414;
  --color-bg-alt:       #1E1E1E;
  --color-bg-inset:     #252525;
  --color-ink:          #E8E4DC;
  --color-ink-muted:    #A8A49C;
  --color-ink-faint:    #8A8580;
  --color-rule:         #303030;
  --color-rule-heavy:   #484440;
  --color-accent:       #E05545;
  --color-accent-hover: #C0392B;
  --color-link:         #6B9EC7;
  --color-link-hover:   #8FB8D8;

  /* Selection — lighter purple for dark backgrounds */
  --color-selection:     #B87ACC;
  --color-selection-ink: #141414;

  /* Section colors lightened for dark backgrounds */
  --color-news:                #E05545;
  --color-opinion:             #6B9EC7;
  --color-analysis:            #A07868;
  --color-arts-culture:        #B87ACC;
  --color-science:             #5EAD64;
  --color-history:             #D4A830;
  --color-letters:             #7A9BA8;
  --color-thought-experiments: #4B9AAE;
  --color-trials:              #C07070;
  --color-glossary:            #7AAE88;
  --color-bookshelf:           #C4965E;
}

/* Also respect OS preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:           #141414;
    --color-bg-alt:       #1E1E1E;
    --color-bg-inset:     #252525;
    --color-ink:          #E8E4DC;
    --color-ink-muted:    #A8A49C;
    --color-ink-faint:    #8A8580;
    --color-rule:         #303030;
    --color-rule-heavy:   #484440;
    --color-accent:       #E05545;
    --color-accent-hover: #C0392B;
    --color-link:         #6B9EC7;
    --color-link-hover:   #8FB8D8;

    /* Selection */
    --color-selection:     #B87ACC;
    --color-selection-ink: #141414;

    /* Section colors lightened for dark backgrounds */
    --color-news:                #E05545;
    --color-opinion:             #6B9EC7;
    --color-analysis:            #A07868;
    --color-arts-culture:        #B87ACC;
    --color-science:             #5EAD64;
    --color-history:             #D4A830;
    --color-letters:             #7A9BA8;
    --color-thought-experiments: #4B9AAE;
    --color-trials:              #C07070;
    --color-glossary:            #7AAE88;
    --color-bookshelf:           #C4965E;
  }
}

/* ============================================================
   THE FREETHINKING TIMES — Base Styles
   ============================================================ */

/* ── Skip Link ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  background-color: var(--color-bg);
  transition: background-color var(--transition-normal), color var(--transition-normal);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Selection ──────────────────────────────────────────────── */
::selection {
  background-color: var(--color-selection);
  color: var(--color-selection-ink);
}

/* ── Images ─────────────────────────────────────────────────── */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Links ──────────────────────────────────────────────────── */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Headings ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-ink);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); font-weight: 600; }

/* ── Prose Elements ─────────────────────────────────────────── */
p {
  margin-bottom: var(--space-4);
  max-width: 75ch;
}

p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

em, i { font-style: italic; }

small {
  font-size: var(--text-sm);
  font-family: var(--font-ui);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* ── Lists ──────────────────────────────────────────────────── */
ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

li { margin-bottom: var(--space-2); }

/* ── Horizontal Rule ────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-8) 0;
}

hr.heavy {
  border-top: 3px solid var(--color-ink);
}

hr.double {
  border-top: 3px double var(--color-rule-heavy);
}

/* ── Blockquote ─────────────────────────────────────────────── */
blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-style: italic;
  color: var(--color-ink-muted);
}

blockquote p { max-width: 65ch; }

blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Code ───────────────────────────────────────────────────── */
code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background: var(--color-bg-inset);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-accent);
}

pre {
  background: var(--color-bg-inset);
  padding: var(--space-6);
  overflow-x: auto;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-rule);
}

pre code {
  background: none;
  padding: 0;
  color: var(--color-ink);
}

/* ── Tables ─────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

/* Tables inside prose/article content gain horizontal scroll on narrow
   viewports so wide tables don't break the page layout. */
@media (max-width: 640px) {
  .article-body table,
  .library-body table,
  .container--prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

th {
  text-align: left;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-rule-heavy);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
}

td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-rule);
}

/* ── Utility Classes ────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.u-muted  { color: var(--color-ink-muted); }
.u-faint  { color: var(--color-ink-faint); }
.u-accent { color: var(--color-accent); }
.u-ui     { font-family: var(--font-ui); }
.u-upper  { text-transform: uppercase; letter-spacing: 0.06em; }
.u-center { text-align: center; }

/* ── No-JS fallback ─────────────────────────────────────────── */
.js-only { display: none; }
.js-enabled .js-only { display: revert; }

/* ============================================================
   BROADSHEET — Layout
   ============================================================ */

/* ── Page Shell ─────────────────────────────────────────────── */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
  padding-bottom: var(--space-20);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--prose {
  max-width: calc(var(--max-width-prose) + (var(--gutter) * 2));
  margin-inline: auto;
}

/* Section index pages: cap at max-width so sidebar grid stays proportional */
.section-index {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-top: var(--space-8);
}

.container--wide {
  max-width: 1440px;
}

/* ── 12-Column Grid ─────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .col-3, .col-4 { grid-column: span 6; }
  .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
}

@media (max-width: 600px) {
  .grid { gap: var(--space-4); }
  [class^="col-"] { grid-column: span 12; }
}

/* ── Front Page Layout ──────────────────────────────────────── */
.front-page {
  padding-top: var(--space-8);
}

/* Dominant lead story + sidebar */
.front-hero {
  display: grid;
  grid-template-columns: 1fr 340px;
  align-items: start;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 3px double var(--color-rule-heavy);
  margin-bottom: var(--space-8);
}

@media (max-width: 1024px) {
  .front-hero { grid-template-columns: 1fr; }
}

/* Secondary stories row */
.front-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-8);
}

@media (max-width: 800px) {
  .front-secondary { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
  .front-secondary { grid-template-columns: 1fr; }
}

/* Section strips on front page */
.front-section-strip {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-rule);
}

.front-section-strip:first-child { border-top: none; }

.front-section-strip__articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

@media (max-width: 700px) {
  .front-section-strip { grid-template-columns: 1fr; }
}

/* Quick sections row */
.front-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-rule);
}

@media (max-width: 700px) {
  .front-quick { grid-template-columns: 1fr; }
}

.front-quick__badge {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.front-quick__item {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
}

.front-quick__item--border {
  border-bottom: 1px solid var(--color-rule);
}

.front-quick__link {
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-snug);
  display: block;
}

.front-quick__link:hover { color: var(--color-accent); }

.front-quick__date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

/* Explore section */
.front-explore {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-rule);
}

.front-explore__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-4);
}

.front-explore__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.front-explore__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  border: 1px solid var(--color-rule);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.front-explore__card:hover {
  border-color: var(--color-ink);
  background: var(--color-bg-alt);
}

.front-explore__card strong {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}

.front-explore__card span {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

/* ── Section Index Layout ───────────────────────────────────── */
.section-index {
  padding-top: var(--space-8);
}

.section-header {
  padding-bottom: var(--space-6);
  border-bottom: 3px solid var(--color-ink);
  margin-bottom: var(--space-8);
}

.section-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-10);
  align-items: start;
}

.section-grid__main { }

.section-grid__sidebar {
  position: sticky;
  top: var(--space-6);
}

@media (max-width: 900px) {
  .section-grid { grid-template-columns: 1fr; }
  .section-grid__sidebar { position: static; }
}

/* Article list within a section */
.article-list {
  list-style: none;
  padding: 0;
}

.article-list__item {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-rule);
}

.article-list__item:first-child {
  padding-top: 0;
}

/* ── Article Layout ─────────────────────────────────────────── */
.article-layout {
  padding-top: var(--space-10);
}

.article-layout__inner {
  max-width: var(--max-width-prose);
  margin-inline: auto;
}

.article-layout__body { }

/* ── Sidebar Widgets ────────────────────────────────────────── */
.sidebar-widget {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.sidebar-widget__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-3);
}

/* ============================================================
   THE FREETHINKING TIMES — Components
   ============================================================ */

/* ── Full-width header & footer ─────────────────────────────── */
/* Content containers are bounded at --max-width; masthead and footer
   override that to span the full viewport. */
.masthead .container,
.site-footer .container {
  max-width: none;
}

/* ── Masthead ───────────────────────────────────────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
}

.masthead__nameplate {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  min-height: 3rem;
}

.masthead__title {
  font-family: var(--font-masthead);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--color-ink);
  text-decoration: none;
}

.masthead__title:hover {
  color: var(--color-ink);
  text-decoration: none;
}

.masthead__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

/* ── Masthead Icon Buttons ──────────────────────────────────── */
.masthead__icon-btn {
  background: none;
  border: none;
  color: var(--color-ink-faint);
  cursor: pointer;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  line-height: 1;
}

.masthead__icon-btn:hover {
  color: var(--color-ink);
}

/* Mobile search button — visible only when masthead actions are hidden */
.masthead__search-mobile {
  display: none;
  background: transparent;
  border: none;
  color: var(--color-ink-muted);
  cursor: pointer;
  padding: var(--space-2);
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
}

.masthead__search-mobile:hover { color: var(--color-ink); }

@media (max-width: 640px) {
  .masthead__search-mobile {
    display: flex;
    align-items: center;
  }
}

/* ── Masthead responsive: hide action buttons on mobile + tablet (moved to drawer) ── */
@media (max-width: 1180px) {
  .masthead__actions {
    display: none;
  }
}

/* Theme icon swap via data-theme on <html> */
.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ── Global display settings panel ──────────────────────────── */
.global-settings-panel {
  position: fixed;
  top: var(--space-16, 4rem);
  right: var(--space-4);
  width: min(300px, 90vw);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-ink);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  z-index: var(--z-overlay);
}

@media (max-width: 640px) {
  .global-settings-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 80vh;
    border-radius: 12px 12px 0 0;
    border-top: 3px solid var(--color-ink);
  }
}

.global-settings-panel .rs-group {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}

.global-settings-panel .rs-group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.global-settings-panel .rs-label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.global-settings-panel .gtranslate_wrapper select {
  width: 100% !important;
  max-width: none !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-2) var(--space-3) !important;
  background: var(--color-bg-alt) !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-rule) !important;
  border-radius: var(--radius-sm) !important;
  height: auto !important;
  cursor: pointer !important;
}

.global-settings-panel .gtranslate_wrapper select option {
  font-family: var(--font-ui) !important;
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
}

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

/* Global background presets */
[data-gs-bg="sepia"] { --color-bg: #f4ecd8; --color-bg-alt: #ede4cc; --color-bg-inset: #e5dcc4; }
[data-gs-bg="cream"] { --color-bg: #fefcf0; --color-bg-alt: #f8f5e8; --color-bg-inset: #f0edde; }

/* Smooth theme transitions (prevent flash) */
body, .masthead, .site-footer, .nav-dropdown, .global-settings-panel {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ── Masthead language dropdown ─────────────────────────────── */
.masthead__lang-wrap {
  position: relative;
}

.masthead__lang-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  z-index: var(--z-overlay);
  min-width: 180px;
}

.masthead__lang-dropdown .gtranslate_wrapper select {
  font-size: var(--text-sm) !important;
  padding: var(--space-2) var(--space-3) !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  background: var(--color-bg-alt) !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-rule) !important;
}

.masthead__lang-dropdown .gtranslate_wrapper select option {
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
}

/* ── Navigation ─────────────────────────────────────────────── */
.site-nav {
  position: relative;
  border-top: 1px solid var(--color-rule);
  overflow: visible;
}

@media (max-width: 1180px) {
  .site-nav { display: none; }
}

.site-nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site-nav__list::-webkit-scrollbar { display: none; }

.site-nav__item { flex-shrink: 0; }

.site-nav__link {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

/* ── Projects dropdown ───────────────────────────────────────── */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;        /* overridden by JS to centre under the trigger */
  width: min(560px, 90vw);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-ink);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: calc(var(--z-nav) + 1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--space-2);
  gap: var(--space-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease 0.15s, visibility 0.15s ease 0.15s, transform 0.15s ease 0.15s;
}

/* Show each dropdown only on its own trigger — one rule per nav item */
.site-nav:has(#nav-news:hover)        #dropdown-news,
.site-nav:has(#nav-news:focus)        #dropdown-news,
.site-nav:has(#nav-opinion:hover)     #dropdown-opinion,
.site-nav:has(#nav-opinion:focus)     #dropdown-opinion,
.site-nav:has(#nav-analysis:hover)    #dropdown-analysis,
.site-nav:has(#nav-analysis:focus)    #dropdown-analysis,
.site-nav:has(#nav-arts-culture:hover)  #dropdown-arts-culture,
.site-nav:has(#nav-arts-culture:focus)  #dropdown-arts-culture,
.site-nav:has(#nav-science-tech:hover)  #dropdown-science-tech,
.site-nav:has(#nav-science-tech:focus)  #dropdown-science-tech,
.site-nav:has(#nav-history:hover)     #dropdown-history,
.site-nav:has(#nav-history:focus)     #dropdown-history,
.site-nav:has(#nav-letters:hover)     #dropdown-letters,
.site-nav:has(#nav-letters:focus)     #dropdown-letters,
.site-nav:has(#nav-library:hover)     #dropdown-library,
.site-nav:has(#nav-library:focus)     #dropdown-library,
.site-nav:has(#nav-projects:hover)    #dropdown-projects,
.site-nav:has(#nav-projects:focus)    #dropdown-projects,
.site-nav:has(#nav-games:hover)       #dropdown-games,
.site-nav:has(#nav-games:focus)       #dropdown-games,
.site-nav:has(#nav-quotes:hover)     #dropdown-quotes,
.site-nav:has(#nav-quotes:focus)     #dropdown-quotes,
.site-nav:has(#nav-more:hover)       #dropdown-more,
.site-nav:has(#nav-more:focus)       #dropdown-more,
.nav-dropdown:hover,
.nav-dropdown:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.nav-dropdown__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}

.nav-dropdown__item:hover {
  background: var(--color-surface);
  border-color: var(--color-rule);
}

.nav-dropdown__title {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  line-height: var(--leading-snug);
}

.nav-dropdown__desc {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
}

.nav-dropdown__footer {
  grid-column: 1 / -1;
  display: block;
  text-align: right;
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  text-decoration: none;
  transition: color 0.1s;
}

.nav-dropdown__footer:hover { color: var(--color-ink); }

/* Quotes dropdown: single column, centered on page */
#dropdown-quotes {
  width: min(480px, 90vw);
  grid-template-columns: 1fr;
  position: fixed;
  top: auto;
  left: 58% !important;
  transform: translateX(-50%) translateY(-6px);
}

/* Override the show state transform for quotes specifically */
.site-nav:has(#nav-quotes:hover) #dropdown-quotes,
.site-nav:has(#nav-quotes:focus) #dropdown-quotes,
#dropdown-quotes:hover,
#dropdown-quotes:focus-within {
  transform: translateX(-50%) translateY(0);
}

/* ── More mega-dropdown ─────────────────────────────────────── */
#dropdown-more {
  display: block;
  width: min(900px, 90vw);
  padding: 0;
}

.nav-mega {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.nav-mega__col {
  padding: var(--space-6);
  border-right: 1px solid var(--color-rule);
}

.nav-mega__col:last-child { border-right: none; }

.nav-mega__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
}

.nav-mega__link {
  display: block;
  padding: var(--space-2) 0;
  text-decoration: none;
  transition: background 0.1s;
}

.nav-mega__link:hover {
  background: var(--color-bg-alt);
  margin: 0 calc(-1 * var(--space-2));
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.nav-mega__title {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  line-height: var(--leading-snug);
}

.nav-mega__desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .nav-mega { grid-template-columns: repeat(2, 1fr); }
  .nav-mega__col { padding: var(--space-4) var(--space-5); }
}

/* Hide on mobile — drawer handles navigation there */
@media (max-width: 768px) {
  .nav-dropdown { display: none; }
}

.masthead__submit {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.masthead__submit:hover {
  color: var(--color-accent-hover);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
  padding: var(--space-2);
}

@media (max-width: 640px) {
  .masthead__title { font-size: 1.1rem; }
  .masthead__submit { display: none; } /* hamburger + drawer covers Submit */
}

/* ── Section Badge ──────────────────────────────────────────── */
.section-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  text-decoration: none;
}

.section-badge--news                { color: var(--color-news); }
.section-badge--opinion             { color: var(--color-opinion); }
.section-badge--analysis            { color: var(--color-analysis); }
.section-badge--arts-culture        { color: var(--color-arts-culture); }
.section-badge--science-technology  { color: var(--color-science); }
.section-badge--history             { color: var(--color-history); }
.section-badge--letters             { color: var(--color-letters); }
.section-badge--thought-experiments { color: var(--color-thought-experiments); }
.section-badge--trials-of-thought   { color: var(--color-trials); }
.section-badge--glossary            { color: var(--color-glossary); }
.section-badge--bookshelf           { color: var(--color-bookshelf); }

/* ── Article Card ───────────────────────────────────────────── */
.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.article-card--horizontal {
  flex-direction: row;
  gap: var(--space-4);
}

.article-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.article-card__headline {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-ink);
  text-decoration: none;
}

.article-card__headline:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.article-card__headline--lg { font-size: var(--text-2xl); }
.article-card__headline--md { font-size: var(--text-xl); }
.article-card__headline--sm { font-size: var(--text-lg); }
.article-card__headline--xs { font-size: var(--text-md); }

.article-card__dek {
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin: 0;
}

.article-card__byline {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.article-card__byline a {
  color: inherit;
  text-decoration: none;
}

.article-card__byline a:hover { color: var(--color-ink-muted); }

.article-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-bg-inset);
}

.article-card--horizontal .article-card__image {
  width: 140px;
  height: 100px;
  aspect-ratio: auto;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .article-card--horizontal { flex-direction: column; }
  .article-card--horizontal .article-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ── Dateline ───────────────────────────────────────────────── */
.dateline {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
}
a.dateline:hover { color: var(--color-accent); }

/* ── Pullquote ──────────────────────────────────────────────── */
.pullquote {
  border-left: none;
  border-top: 3px solid var(--color-accent);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-6) 0;
  margin: var(--space-10) 0;
  font-style: normal;
  color: var(--color-ink);
}

.pullquote p {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  max-width: none;
  margin: 0;
}

.pullquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
}

/* ── Tag Cloud ──────────────────────────────────────────────── */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.tag-list__item a {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-rule);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.tag-list__item a:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

/* ── Breaking Banner ────────────────────────────────────────── */
.breaking-banner {
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-2) 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.03em;
}

.breaking-banner a {
  color: #fff;
  text-decoration: underline;
}

/* ── Quote Bar ──────────────────────────────────────────────── */
.quote-bar {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-2) var(--gutter);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  transition: opacity 0.4s ease;
}

.quote-bar__link {
  color: var(--color-ink-muted);
  text-decoration: none;
  display: inline;
}

.quote-bar__link:hover {
  color: var(--color-ink);
}

.quote-bar__text {
  font-style: italic;
}

.quote-bar__author {
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Footer Subscribe Strip ─────────────────────────────────── */
.footer-subscribe-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-8);
  align-items: start;
}

@media (max-width: 700px) {
  .footer-subscribe-strip {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  border-top: 3px double var(--color-rule-heavy);
  padding: var(--space-10) 0 var(--space-24);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.site-footer__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
}

.site-footer__brand {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
}

@media (max-width: 700px) {
  .site-footer__brand { grid-template-columns: 1fr; gap: var(--space-4); }
}

.site-footer__brand .subscribe-block--footer .subscribe-form {
  max-width: 320px;
}

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.site-footer__title {
  font-family: var(--font-masthead);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.site-footer__nav {
  list-style: none;
  padding: 0;
}

.site-footer__nav li { margin-bottom: var(--space-2); }

.site-footer__nav a {
  color: var(--color-ink-muted);
  text-decoration: none;
  font-size: var(--text-xs);
}

.site-footer__nav a:hover { color: var(--color-ink); }

.site-footer__bottom {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-12);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.pagination a, .pagination span {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-rule);
  text-decoration: none;
  color: var(--color-ink-muted);
  transition: all var(--transition-fast);
}

.pagination a:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.pagination .current {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

/* ── Search Bar ─────────────────────────────────────────────── */
.search-form {
  display: flex;
  gap: 0;
}

.search-form input {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-rule-heavy);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.search-form input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.search-form button {
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink);
  color: var(--color-bg);
  border: 1px solid var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: all var(--transition-fast);
}

.search-form button:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* ── Submit Card Grid ──────────────────────────────────────── */
.submit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.submit-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-rule);
  border-top: 3px solid transparent;
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.submit-card:hover {
  border-top-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.submit-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}

.submit-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: 1.5;
  margin: 0;
}

/* ── Submit CTA ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--color-ink);
  color: var(--color-ink);
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  text-decoration: none;
}

.btn--accent {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--accent:hover {
  background: var(--color-accent);
  color: #fff;
}

/* ── Nav Drawer Toggle ──────────────────────────────────────── */
.nav-drawer-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-ink-faint);
  cursor: pointer;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  line-height: 1;
}

.nav-drawer-toggle:hover {
  color: var(--color-ink);
}

/* ── Nav Drawer ─────────────────────────────────────────────── */
.nav-drawer-overlay:not(.is-open) {
  display: none;
}

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-modal) - 1);
}

.nav-drawer-overlay.is-open {
  display: block;
}

.nav-drawer {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: min(320px, 88vw);
  background: var(--color-bg);
  border-right: 1px solid var(--color-rule);
  z-index: var(--z-modal);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
  visibility: hidden;
  display: flex;
  flex-direction: column;
}

.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--color-rule);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 1;
}

.nav-drawer__label {
  font-family: var(--font-masthead);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
  flex: 1;
  text-align: center;
}

.nav-drawer__lang {
  padding: var(--space-3) var(--space-6);
  text-align: center;
}

.nav-drawer__lang select {
  width: 100%;
  font-size: var(--text-md) !important;
  padding: var(--space-3) var(--space-4) !important;
  max-width: none !important;
  height: 48px;
}

.nav-drawer__lang a,
.nav-drawer__lang option {
  font-size: var(--text-md) !important;
}

.nav-drawer__close {
  background: none;
  border: none;
  color: var(--color-ink-faint);
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.nav-drawer__close:hover {
  color: var(--color-ink);
}

.nav-drawer__section-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  padding: var(--space-3) var(--space-6) var(--space-1);
  margin: 0;
}

.nav-drawer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-drawer__link {
  display: block;
  padding: 6px var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-drawer__link:hover {
  color: var(--color-ink);
}

.nav-drawer__link[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
  border-left-color: var(--color-accent);
}

.nav-drawer__link--primary {
  font-family: var(--font-headline);
  font-weight: 600;
  color: var(--color-ink);
}

.nav-drawer__link--small {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.nav-drawer__link--small:hover {
  color: var(--color-ink-muted);
}

.nav-drawer__divider {
  height: 1px;
  background: var(--color-rule);
  margin: var(--space-2) var(--space-6);
}

/* ── Drawer bottom toolbar ── */
.nav-drawer__toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  margin-top: auto;
  border-top: 1px solid var(--color-rule);
}

.nav-drawer__toolbar a,
.nav-drawer__toolbar button {
  color: var(--color-ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.nav-drawer__toolbar a:hover,
.nav-drawer__toolbar button:hover {
  color: var(--color-ink);
}

.nav-drawer__action-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--color-ink-muted);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-drawer__action-btn svg {
  width: 16px;
  height: 16px;
}

.nav-drawer__action-btn:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

/* ── Music Player Bar ──────────────────────────────────────── */
.music-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-6);
  background: #111;
  color: #eee;
  z-index: var(--z-overlay);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
  font-family: var(--font-ui);
}

.music-bar[hidden] { display: none !important; }

.music-bar__info { flex: 1; min-width: 0; overflow: hidden; }

.music-bar__name {
  font-size: var(--text-xs);
  opacity: 0.5;
  display: block;
  line-height: 1.2;
}

.music-bar__title {
  font-size: var(--text-sm);
  font-weight: 600;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-bar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.music-bar__btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: var(--space-1);
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.music-bar__btn:hover { opacity: 1; }
.music-bar__btn--play { opacity: 1; }

.music-bar__vol {
  width: 70px;
  accent-color: var(--color-accent);
}

/* When the music bar renders INSIDE the annotation-toolbar (reading
   pages), flatten it to an inline row that shares the bar's dark
   background. On pages without an annotation-toolbar it keeps its
   original position:fixed layout so it remains visible. */
.annotation-toolbar .music-bar {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 0;
  gap: var(--space-2);
  background: transparent;
  box-shadow: none;
  border: none;
  width: auto;
  max-width: 100%;
  font-size: var(--text-xs);
  z-index: auto;
}
.annotation-toolbar .music-bar__info {
  min-width: 0;
  max-width: min(240px, 30vw);
}
.annotation-toolbar .music-bar__title { font-size: var(--text-xs); }
.annotation-toolbar .music-bar__vol { width: 60px; }

/* Push the reading-floats (percentage + back-to-top) up above the
   annotation-toolbar so they don't sit behind it. */
body:has(.annotation-toolbar) .reading-floats {
  bottom: 4.25rem;
}
@media (max-width: 600px) {
  body:has(.annotation-toolbar) .reading-floats {
    bottom: 4rem;
  }
}

/* When the music bar is NOT inside the annotation-toolbar (non-reading
   pages), keep the legacy "push reading-floats up above music-bar" rule. */
body:has(.music-bar:not([hidden])):not(:has(.annotation-toolbar .music-bar)) .reading-floats {
  bottom: 3.5rem;
}

@media (max-width: 480px) {
  .music-bar { padding: var(--space-1) var(--space-3); gap: var(--space-1); }
  .music-bar__vol { display: none; }
  .music-bar__name { display: none; }
  .music-bar__title { font-size: var(--text-xs); }
}

/* ── Glossary Tooltips (Tippy.js) ──────────────────────────── */
.glossary-tip {
  border-bottom: 1px dotted var(--color-ink-faint);
  cursor: help;
  transition: border-color 0.15s;
}

.glossary-tip:hover {
  border-bottom-color: var(--color-accent);
}

.tippy-box[data-theme~='glossary'] {
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.5;
  padding: var(--space-2) var(--space-3);
  border-radius: 4px;
  max-width: min(300px, 85vw);
}

.tippy-box[data-theme~='glossary'] .tippy-arrow {
  color: var(--color-ink);
}

[data-theme="dark"] .tippy-box[data-theme~='glossary'] {
  background: var(--color-bg-alt);
  color: var(--color-ink);
}

[data-theme="dark"] .tippy-box[data-theme~='glossary'] .tippy-arrow {
  color: var(--color-bg-alt);
}

/* ── Per-article reading progress on cards ─────────────────── */
.article-card { position: relative; }
.article-card__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-rule);
  overflow: hidden;
  pointer-events: none;
}
.article-card__progress-fill {
  height: 100%;
  background: var(--color-accent);
  transition: width var(--transition-normal);
}
.article-card__read-pill {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-bg);
  background: var(--color-ink-muted);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.article-card--read .article-card__headline { opacity: 0.75; }

/* ── Keyboard shortcuts overlay ─────────────────────────────── */
#kb-shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
#kb-shortcuts-overlay[hidden] { display: none; }
.kb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.kb-panel {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-rule-heavy);
  box-shadow: var(--shadow-md);
  max-width: 420px;
  width: 100%;
  padding: var(--space-6);
  font-family: var(--font-ui);
}
.kb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-ink);
}
.kb-title {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  margin: 0;
}
.kb-close {
  background: none;
  border: none;
  font-size: var(--text-xl);
  cursor: pointer;
  color: var(--color-ink-muted);
  padding: 0;
  line-height: 1;
}
.kb-close:hover { color: var(--color-ink); }
.kb-list {
  width: 100%;
  border-collapse: collapse;
}
.kb-list td {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-sm);
}
.kb-list tr:last-child td { border-bottom: none; }
.kb-key {
  width: 100px;
}
.kb-key kbd {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  border-bottom-width: 2px;
  padding: 2px var(--space-2);
  font-family: monospace;
  font-size: var(--text-xs);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  display: inline-flex;
  gap: var(--space-1);
}
.kb-key kbd span + span::before {
  content: "+";
  color: var(--color-ink-faint);
  margin-right: var(--space-1);
}
.kb-desc { color: var(--color-ink-muted); }

/* ── Revision history panel ────────────────────────────────── */
.rh-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-bg);
  border-left: 1px solid var(--color-rule);
  box-shadow: var(--shadow-md);
  z-index: var(--z-modal);
  overflow-y: auto;
  padding: var(--space-6);
  font-family: var(--font-ui);
}
.rh-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-ink);
  margin-bottom: var(--space-4);
}
.rh-title {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  margin: 0;
}
.rh-close {
  background: none;
  border: none;
  font-size: var(--text-xl);
  cursor: pointer;
  color: var(--color-ink-muted);
  padding: 0;
  line-height: 1;
}
.rh-close:hover { color: var(--color-ink); }
.rh-empty {
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  font-style: italic;
}
.rh-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rh-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}
.rh-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-1);
}
.rh-avatar {
  border-radius: 50%;
  flex-shrink: 0;
}
.rh-author { font-weight: 600; color: var(--color-ink-muted); }
.rh-date { margin-left: auto; }
.rh-message {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}
.rh-sha {
  font-family: monospace;
  font-size: var(--text-xs);
  color: var(--color-link);
  text-decoration: none;
}
.rh-sha:hover { text-decoration: underline; }

/* ── GTranslate in nav drawer ──────────────────────────────── */
/* Old drawer classes no longer used */
.nav-drawer__translate,
.nav-drawer__newsletter {
  display: none;
}

/* Reduce sizes for drawer bottom sections */
.nav-drawer .sidebar-widget {
  padding: var(--space-3);
}

.nav-drawer .sidebar-widget__title {
  font-size: var(--text-xs);
  padding-bottom: var(--space-2);
}

.nav-drawer .sidebar-widget .subscribe-block__body {
  font-size: var(--text-xs);
}

.nav-drawer .sidebar-widget .nav-drawer__action-btn {
  width: 30px;
  height: 30px;
}

.nav-drawer .sidebar-widget .nav-drawer__action-btn svg {
  width: 14px;
  height: 14px;
}

/* Match subscribe input + button height to GTranslate select */
.nav-drawer .subscribe-form__input {
  height: 1.75rem !important;
  font-size: var(--text-xs) !important;
  padding: var(--space-1) var(--space-2) !important;
}

.nav-drawer .subscribe-form__btn {
  height: 1.75rem !important;
  font-size: var(--text-xs) !important;
  padding: var(--space-1) var(--space-3) !important;
}

/* Match main icon grid buttons to import/export size */
.nav-drawer .nav-drawer__actions .nav-drawer__action-btn {
  width: 30px;
  height: 30px;
}

.nav-drawer .nav-drawer__actions .nav-drawer__action-btn svg {
  width: 14px;
  height: 14px;
}

/* ── Search Overlay ─────────────────────────────────────────── */
.search-overlay:not(.is-open) {
  display: none;
}

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-modal) - 1);
  backdrop-filter: blur(2px);
}

.search-overlay.is-open {
  display: block;
}

/* ── Search Modal ───────────────────────────────────────────── */
.search-modal:not(.is-open) {
  display: none;
}

.search-modal {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 96vw);
  max-height: 80vh;
  max-height: 80dvh;
  background: var(--color-bg);
  border: 1px solid var(--color-rule-heavy);
  border-top: none;
  box-shadow: var(--shadow-md);
  z-index: var(--z-modal);
  flex-direction: column;
}

@media (max-width: 640px) {
  .search-modal {
    width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
  }
}

.search-modal.is-open {
  display: flex;
}

.search-modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
  flex-shrink: 0;
}

.search-modal__input {
  flex: 1;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-ink);
  outline: none;
}

.search-modal__input::placeholder {
  color: var(--color-ink-faint);
}

.search-modal__voice {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink-faint);
  padding: var(--space-2);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.search-modal__voice:hover { color: var(--color-ink); }

.search-modal__voice.is-listening {
  color: var(--color-accent);
  animation: voice-pulse 1s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.search-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink-faint);
  font-size: var(--text-lg);
  line-height: 1;
  padding: var(--space-1);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.search-modal__close:hover {
  color: var(--color-ink);
}

.search-modal__results {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-2) 0;
}

.search-modal__footer {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  display: flex;
  gap: var(--space-4);
  flex-shrink: 0;
}

/* ── Search Results ─────────────────────────────────────────── */
.search-result {
  display: block;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
  transition: background var(--transition-fast);
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover,
.search-result:focus {
  background: var(--color-bg-alt);
  outline: none;
}

.search-result__meta {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.search-result__title {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.search-result__excerpt {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
}

.search-result__excerpt mark {
  background: transparent;
  color: var(--color-accent);
  font-weight: 600;
}

.search-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-rule);
  margin-top: var(--space-2);
}

.search-more__btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-muted);
  background: none;
  border: 1px solid var(--color-rule);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.search-more__btn:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.search-more__link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
}

.search-more__link:hover { text-decoration: underline; }

/* ── Search Section Filters ─────────────────────────────────── */
.search-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-rule);
  overflow-x: auto;
  flex-wrap: wrap;
  flex-shrink: 0;
  scrollbar-width: none;
}

.search-filters::-webkit-scrollbar { display: none; }

.search-filter-btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-rule);
  background: transparent;
  color: var(--color-ink-muted);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.search-filter-btn:hover {
  border-color: var(--color-ink-muted);
  color: var(--color-ink);
}

.search-filter-btn.is-active {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

/* ── Search Notice ──────────────────────────────────────────── */
.search-notice {
  padding: var(--space-6) var(--space-4);
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  text-align: center;
  margin: 0;
  max-width: none;
}

/* ── Subscribe Form ──────────────────────────────────────────── */
.subscribe-block {
  border-top: 3px double var(--color-rule-heavy);
  border-bottom: 3px double var(--color-rule-heavy);
  padding: var(--space-10) 0;
  margin: var(--space-10) 0;
  text-align: left;
}

.subscribe-block--sidebar {
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-4);
  text-align: left;
  margin: 0;
}

.subscribe-block--footer {
  border: none;
  border-top: 2px solid var(--color-rule);
  padding: var(--space-6) 0 0;
  text-align: left;
  margin: 0;
}

.subscribe-block__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.subscribe-block__heading {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.subscribe-block--sidebar .subscribe-block__heading {
  font-size: var(--text-md);
}

.site-footer__brand .subscribe-block__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
}

.site-footer__brand .subscribe-block__body {
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}

.subscribe-block__body {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  max-width: 52ch;
  margin-bottom: var(--space-6);
  line-height: var(--leading-normal);
}

.subscribe-block--sidebar .subscribe-block__body,
.subscribe-block--footer .subscribe-block__body {
  font-size: var(--text-sm);
  margin-inline: 0;
  margin-bottom: var(--space-4);
  max-width: none;
}

.subscribe-form {
  display: flex;
  gap: 0;
  max-width: 480px;
}

.subscribe-block--sidebar .subscribe-form,
.subscribe-block--footer .subscribe-form {
  margin-inline: 0;
  max-width: none;
}

.subscribe-form__input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule-heavy);
  border-right: none;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  min-width: 0;
  transition: border-color var(--transition-fast);
}

.subscribe-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.subscribe-form__input::placeholder {
  color: var(--color-ink-faint);
}

.subscribe-form__btn {
  padding: var(--space-3) var(--space-5);
  background: var(--color-ink);
  color: var(--color-bg);
  border: 1px solid var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.subscribe-form__btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.subscribe-form__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.subscribe-block__notice {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-top: var(--space-3);
}

.subscribe-block__notice a {
  color: inherit;
}

/* Stack subscribe form vertically on narrow screens */
@media (max-width: 500px) {
  .subscribe-form {
    flex-direction: column;
  }

  .subscribe-form__input {
    border-right: 1px solid var(--color-rule-heavy);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .subscribe-form__btn {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    text-align: center;
  }
}

/* Stacked (vertical) form variant — used on the /newsletter/ page */
.subscribe-form--stacked {
  flex-direction: column;
  gap: var(--space-3);
  max-width: 100%;
}

.subscribe-form--stacked .subscribe-form__input {
  border-right: 1px solid var(--color-rule-heavy);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.subscribe-form--stacked .subscribe-form__input:focus {
  border-color: var(--color-accent);
}

.subscribe-form--stacked .subscribe-form__btn {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-align: center;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
}

/* Success / error states */
.subscribe-status {
  display: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}

.subscribe-status.is-success {
  display: block;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.subscribe-status.is-error {
  display: block;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

[data-theme="dark"] .subscribe-status.is-success {
  background: #052e16;
  color: #86efac;
  border-color: #166534;
}

[data-theme="dark"] .subscribe-status.is-error {
  background: #2d0a0a;
  color: #fca5a5;
  border-color: #991b1b;
}

/* ── Support / Donate Block ──────────────────────────────────── */
.support-block {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-ink);
  padding: var(--space-6);
  margin: var(--space-10) 0;
}

.support-block__heading {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--color-ink);
}

.support-block__body {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
  max-width: none;
}

.support-block__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

/* ── GTranslate dropdown widget — match drawer action button style ── */
.nav-drawer .gtranslate_wrapper a,
.sidebar-widget .gtranslate_wrapper a {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-ink-muted) !important;
  background: var(--color-bg) !important;
  border: 1px solid var(--color-rule) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-1) var(--space-3) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast), border-color var(--transition-fast) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  height: 1.75rem !important;
  line-height: 1 !important;
}

.nav-drawer .gtranslate_wrapper a:hover,
.sidebar-widget .gtranslate_wrapper a:hover {
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}

.nav-drawer .gtranslate_wrapper select,
.sidebar-widget .gtranslate_wrapper select {
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-ink) !important;
  background: var(--color-bg) !important;
  border: 1px solid var(--color-rule) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-2) var(--space-3) !important;
  height: auto !important;
  max-width: none !important;
  width: 100% !important;
  cursor: pointer !important;
}

.nav-drawer__lang .gtranslate_wrapper select {
  font-size: var(--text-md) !important;
  padding: var(--space-3) var(--space-4) !important;
}

.nav-drawer .gtranslate_wrapper img,
.sidebar-widget .gtranslate_wrapper img {
  width: 14px !important;
  height: 14px !important;
}

/* ─── Changelog ──────────────────────────────────────────────────────────── */

.changelog-page {
  max-width: 780px;
  padding-top: var(--space-12);
  padding-bottom: var(--space-20);
}

.changelog-page__header {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 3px double var(--color-rule-heavy);
}

.changelog-page__title {
  font-family: var(--font-masthead);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.changelog-page__lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-ink-muted);
  font-style: italic;
  max-width: 58ch;
  line-height: var(--leading-relaxed);
}

/* Timeline */
.changelog-timeline {
  position: relative;
  padding-left: var(--space-8);
}

.changelog-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0;
  width: 1px;
  background: var(--color-rule);
}

.changelog-entry {
  position: relative;
  padding-bottom: var(--space-14);
}

.changelog-entry:last-child {
  padding-bottom: 0;
}

.changelog-entry__marker {
  position: absolute;
  left: calc(-1 * var(--space-8) - 4px);
  top: 0.45rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-ink);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-rule-heavy);
}

.changelog-entry__meta {
  margin-bottom: var(--space-6);
}

.changelog-entry__date {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}

.changelog-entry__title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Sections within an entry */
.changelog-section {
  margin-bottom: var(--space-6);
}

.changelog-section:last-child {
  margin-bottom: 0;
}

.changelog-section__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

/* List items */
.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--color-rule);
  padding-left: var(--space-4);
}

.changelog-list__item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  padding: var(--space-1) 0;
}

.changelog-list__item + .changelog-list__item {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
}

/* ── Web3Forms Contact Forms ──────────────────────────────────── */
.w3f {
  font-family: var(--font-ui);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-6);
}

.article-body .w3f {
  max-width: none;
}

@media (max-width: 480px) {
  .w3f { padding: var(--space-4) var(--space-4); }
}

@media (max-width: 360px) {
  .w3f { padding: var(--space-3); }
}

.w3f__group {
  margin-bottom: var(--space-6);
}

.w3f__label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.w3f__required {
  color: var(--color-accent);
  font-weight: 400;
  margin-left: 2px;
}

.w3f__hint {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-top: calc(-1 * var(--space-1));
  margin-bottom: var(--space-2);
  line-height: var(--leading-normal);
}

.w3f__input,
.w3f__select,
.w3f__textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule-heavy);
  padding: var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.w3f__input::placeholder,
.w3f__textarea::placeholder {
  color: var(--color-ink-faint);
  font-style: italic;
}

.w3f__input:focus,
.w3f__select:focus,
.w3f__textarea:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-ink);
  background: var(--color-bg);
}

.w3f__textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--leading-normal);
}

.w3f__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A4845' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

.w3f__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: end;
}

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

.w3f__submit {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-bg);
  background: var(--color-ink);
  border: none;
  padding: var(--space-3) var(--space-8);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--transition-fast), color var(--transition-fast);
  margin-top: var(--space-2);
}

.w3f__submit:hover {
  background: var(--color-accent);
  color: #fff;
}

.w3f__privacy {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-top: var(--space-3);
  line-height: var(--leading-normal);
}

.w3f__optional {
  font-weight: 400;
  color: var(--color-ink-faint);
  font-size: var(--text-xs);
}

.w3f__dictate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 1px solid var(--color-rule);
  color: var(--color-ink-faint);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.w3f__dictate:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.w3f__dictate.is-listening {
  color: var(--color-accent);
  border-color: var(--color-accent);
  animation: voice-pulse 1s ease-in-out infinite;
}

/* hCaptcha — match site background */
.w3f .h-captcha {
  margin-bottom: var(--space-4);
}

.w3f .h-captcha iframe {
  border-radius: 0;
}

/* Override hCaptcha container background */
.h-captcha > div,
.h-captcha iframe {
  background: var(--color-bg) !important;
}

[data-theme="dark"] .h-captcha {
  filter: invert(1) hue-rotate(180deg);
}

.w3f__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-ink-faint);
}

@media print {
  .w3f,
  .h-captcha { display: none !important; }
}

/* ============================================================
   THE FREETHINKING TIMES — Article / Long-form Reading Styles
   ============================================================ */

/* ── Bookmark indicators (margin markers) ──────────────────── */
.bookmark-indicator {
  position: absolute;
  left: -2.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 204, 21, 0.15);
  border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 50%;
  color: rgba(212, 160, 23, 0.9);
  cursor: pointer;
  z-index: 10;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.bookmark-indicator:hover {
  background: rgba(250, 204, 21, 0.3);
  color: rgba(212, 160, 23, 1);
}

@media (max-width: 900px) {
  .bookmark-indicator {
    left: -1rem;
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(250, 204, 21, 0.3);
    border-color: rgba(250, 204, 21, 0.5);
  }
  .bookmark-indicator svg {
    width: 8px;
    height: 8px;
  }
}

/* ── Sticky article reading header ──────────────────────────── */
.article-reading-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.article-reading-header.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Hide masthead content when reading header takes over */
.masthead.is-replaced {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* ── Article Header ─────────────────────────────────────────── */
.article-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
  position: relative;
  z-index: 10;
}

.article-header__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.article-header__headline {
  font-family: var(--font-headline);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.article-header__dek {
  font-size: clamp(1.1rem, 0.85rem + 1vw, 1.563rem);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  max-width: 65ch;
  font-style: italic;
  margin-bottom: var(--space-4);
}

.article-header__byline-block {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.article-header__author {
  position: relative;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}

.article-header__author::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: var(--leading-normal);
  max-width: 24ch;
  white-space: normal;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

.article-header__author:hover { color: var(--color-accent); }

.article-header__author:hover::after,
.article-header__author:focus-visible::after {
  opacity: 1;
}

.article-header__date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.article-header__date:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ── Date popover ────────────────────────────────────────────── */
.date-popover-wrap {
  position: relative;
  display: inline-block;
}

.date-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  min-width: 200px;
  max-width: 300px;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + 0.5rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 20;
}

.date-popover-wrap:hover .date-popover,
.date-popover-wrap:focus-within .date-popover {
  opacity: 1;
  pointer-events: auto;
}

.date-popover__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}

.date-popover__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.date-popover__list a {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-snug);
  display: block;
}

.date-popover__list a:hover {
  color: var(--color-accent);
}

/* ── Lead Image ─────────────────────────────────────────────── */
.article-lead-image {
  margin-bottom: var(--space-6);
}

.article-lead-image img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
}

.article-lead-image figcaption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-top: var(--space-2);
  line-height: var(--leading-normal);
}

/* ── Article Body ───────────────────────────────────────────── */
.article-body {
  position: relative;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  line-height: var(--leading-loose);
  max-width: var(--max-width-prose);
}

.article-body > * + * {
  margin-top: var(--space-6);
}

.article-body h2 {
  font-size: clamp(1.35rem, 1rem + 1.5vw, 1.953rem);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
  scroll-margin-top: var(--space-16);
}

.article-body h3 {
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.563rem);
  margin-top: var(--space-8);
  scroll-margin-top: var(--space-16);
}

/* Drop cap for first paragraph — suppressed in glossary and bookshelf layouts */
.glossary-body.article-body > p:first-of-type::first-letter,
.book-body.article-body > p:first-of-type::first-letter { font-size: 1em; float: none; line-height: inherit; margin: 0; }

.article-body > p:first-of-type::first-letter {
  font-family: var(--font-masthead);
  font-size: 4.5em;
  line-height: 0.8;
  float: left;
  margin-right: 0.05em;
  margin-top: 0.05em;
  color: var(--color-ink);
  font-weight: 700;
}

/* Inline image within article */
.article-body figure {
  margin: var(--space-8) 0;
}

.article-body figure img {
  width: 100%;
}

.article-body figure figcaption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-top: var(--space-2);
}

/* ── Article Footer ─────────────────────────────────────────── */
.article-footer {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 3px double var(--color-rule-heavy);
}

.article-footer__tags {
  margin-bottom: var(--space-6);
}

.article-footer__tags-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-3);
}

/* ── Author Bio Block ───────────────────────────────────────── */
.author-bio {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-rule-heavy);
  padding: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
}

.author-bio__name {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.author-bio__text {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  max-width: none;
  margin: 0;
}

/* ── Related Articles ───────────────────────────────────────── */
.related-articles {
  margin-top: var(--space-10);
}

.related-articles__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
}

.related-articles__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  list-style: none;
  padding: 0;
}

@media (max-width: 700px) {
  .related-articles__list { grid-template-columns: 1fr; }
}

/* ── Article byline extras ──────────────────────────────────── */
.article-header__reading-time {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.article-header__reading-time::before {
  content: "·";
  margin: 0 0.4em;
  color: var(--color-ink-faint);
}

/* ── Article footnotes (visible section) ───────────────────── */
.article-footnotes:empty { display: none; }

.article-footnotes {
  max-width: var(--max-width-prose);
  margin: var(--space-8) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.article-footnotes__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.article-footnotes__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
}

.article-footnotes__toggle {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-bg);
  background: var(--color-ink);
  border: none;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.article-footnotes__toggle:hover { background: var(--color-accent); }

.article-footnotes__list {
  margin: 0;
  padding-left: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
}

.article-footnotes__list li {
  margin-bottom: var(--space-2);
}

@media print {
  .article-footnotes { display: none !important; }
}

/* ── Article feedback popup ─────────────────────────────────── */
.article-feedback-wrap { position: relative; }
.article-feedback-popup {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(400px, 92vw);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  z-index: var(--z-overlay);
}

.article-feedback-popup form {
  gap: var(--space-4);
}

.article-feedback-popup .h-captcha {
  transform: scale(0.85);
  transform-origin: left;
}

.article-header__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.article-header__meta-row span {
  white-space: nowrap;
}

.article-header__meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-left: auto;
}

.article-header__meta-tags a {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px var(--space-2);
  border: 1px solid var(--color-rule);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.article-header__meta-tags a:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

@media (max-width: 640px) {
  .article-header__meta-tags { margin-left: 0; width: 100%; }
}


.article-header__updated {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ── Article action buttons (copy link / print) ─────────────── */
/* The article action bar is consolidated into the Reader panel.
   Hide the original inline bar — its buttons are moved into the panel
   at load time by reader-panel-migrate.js. */
.article-header__actions {
  display: none;
}

.article-action-btn .btn-label,
.article-action-btn span:not([aria-hidden]) {
  display: none;
}

/* Still style the selection toolbar + library reader actions on mobile —
   those are independent of the article action bar. */
@media (max-width: 768px) {
  .library-reader-actions,
  .annotation-toolbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
  }
  .library-reader-actions::-webkit-scrollbar,
  .annotation-toolbar::-webkit-scrollbar { display: none; }

  .annotation-toolbar__btn {
    flex-shrink: 0;
  }
}

/* When reading-settings, share, or download panels are relocated into a
   Reader panel tab section, strip their dropdown/fixed positioning so
   they render inline as tab content. */
.library-panel__section #reading-settings-panel,
.library-panel__section #share-panel,
.library-panel__section #download-panel {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  width: 100%;
  max-width: none;
  max-height: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  z-index: auto;
  display: block !important;
}

.library-panel__section #reading-settings-panel .rs-panel-close {
  display: none;
}

/* Strip the dropdown-row horizontal padding on share/download items when
   they render inside a tab section (the section body already has padding). */
.library-panel__section .share-panel__item,
.library-panel__section .download-panel__item {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  border-radius: var(--radius-sm);
}

/* When the feedback popup is rendered inside the Reader panel footer,
   its original position: absolute; top:100% would push it out of the
   narrow panel. Render it as a centered fixed dialog instead. */
.library-panel__footer-links .article-feedback-wrap {
  position: static;
  display: flex;
  flex: 1;
}
.library-panel__footer-links .article-feedback-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(440px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  z-index: 1000;
  padding: var(--space-6);
}

.article-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-ink-faint);
  background: var(--color-bg);
  border: 1px solid var(--color-rule-heavy);
  border-radius: var(--radius-sm);
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.article-action-btn svg {
  width: 14px;
  height: 14px;
}

/* Override library-panel-toggle pill shape when used as an action button */
.article-action-btn.library-panel-toggle {
  padding: 0;
  font-size: 0;
  gap: 0;
  border-radius: var(--radius-sm);
}

.article-action-btn::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

.article-action-btn:hover,
.article-action-btn:focus-visible {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.article-action-btn:hover::after,
.article-action-btn:focus-visible::after,
.article-action-btn.is-copied::after {
  opacity: 1;
}

/* Hide tooltips on small screens to prevent overflow */
@media (max-width: 600px) {
  .article-action-btn::after {
    display: none;
  }
}

.article-action-btn.is-copied {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.article-action-btn.is-speaking {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ── Reading Progress ───────────────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-accent);
  z-index: var(--z-overlay);
  transition: width 100ms linear;
}

/* ── TTS control bar ────────────────────────────────────────── */
/* TTS word highlight */
.tts-word-active {
  background: rgba(250, 204, 21, 0.35);
  border-radius: 2px;
  transition: background 0.1s ease;
}

[data-theme="dark"] .tts-word-active {
  background: rgba(250, 204, 21, 0.2);
  color: #f5f0e0;
}

.tts-controls {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-overlay);
  background: var(--color-ink);
  color: var(--color-bg);
  border-radius: 2rem;
  padding: var(--space-2) var(--space-6);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.tts-controls__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.tts-controls__btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.1s;
}

.tts-controls__btn:hover { opacity: 1; }

.tts-controls__divider {
  display: inline-block;
  width: 1px;
  height: 1rem;
  background: currentColor;
  opacity: 0.2;
}

.tts-speed-btn {
  background: none;
  border: 1px solid transparent;
  color: inherit;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  opacity: 0.55;
  transition: opacity 0.1s, border-color 0.1s;
}

.tts-speed-btn:hover { opacity: 0.85; }

.tts-speed-btn.is-active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.45);
}

.tts-controls__voice-select {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: inherit;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  cursor: pointer;
  max-width: 140px;
}

.tts-controls__voice-select option { color: #000; }

@media (max-width: 640px) {
  .tts-controls {
    left: var(--space-4);
    right: var(--space-4);
    transform: none;
    bottom: 4.5rem;
  }
  .tts-controls__inner {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .tts-controls__voice-select {
    max-width: none;
    width: 100%;
    margin-top: var(--space-1);
  }
}

/* ── Floating reading tools (progress % + back to top) ─────── */
.reading-floats {
  position: fixed;
  bottom: 6rem;
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: var(--z-nav);
  pointer-events: none;
}

.reading-pct {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  opacity: 0;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
}

.reading-floats.is-visible .reading-pct {
  opacity: 1;
}

.back-to-top {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-rule-heavy);
  color: var(--color-ink);
  font-size: var(--text-base);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    border-color var(--transition-fast);
}

.back-to-top:hover {
  border-color: var(--color-ink);
}

.reading-floats.is-visible .back-to-top {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Series navigation ──────────────────────────────────────── */
.series-nav {
  border: 1px solid var(--color-rule-heavy);
  border-top: 3px solid var(--color-ink);
  padding: var(--space-5);
  margin-bottom: var(--space-8);
}

.series-nav__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-1);
}

.series-nav__title {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.series-nav__list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

.series-nav__item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-rule);
}

.series-nav__item.is-current .series-nav__link {
  font-weight: 700;
  color: var(--color-ink);
  cursor: default;
}

.series-nav__part {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
  flex-shrink: 0;
  min-width: 3.5rem;
}

.series-nav__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  line-height: var(--leading-snug);
}

.series-nav__link:hover { color: var(--color-ink); text-decoration: underline; }

.series-nav__prev-next {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.series-nav__arrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  text-decoration: none;
}

.series-nav__arrow:hover { color: var(--color-ink); }

/* ── Table of contents ──────────────────────────────────────── */
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list__item { padding: var(--space-1) 0; }

.toc-list__item--h3 { padding-left: var(--space-3); }

.toc-list__link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  text-decoration: none;
  line-height: var(--leading-normal);
  display: block;
  transition: color var(--transition-fast);
  border-left: 2px solid transparent;
  padding-left: var(--space-2);
}

.toc-list__link:hover { color: var(--color-ink); }

.toc-list__link.is-active {
  color: var(--color-ink);
  border-left-color: var(--color-accent);
  font-weight: 600;
}

/* ── Reading time on article cards ─────────────────────────── */
.article-card__reading-time {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  font-style: normal;
}

.article-card__reading-time::before {
  content: "·";
  margin-left: var(--space-2);
  margin-right: var(--space-2);
  color: var(--color-ink-faint);
}

/* ── Reading filter (section pages) ────────────────────────── */
.reading-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}

.reading-filter__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin-right: var(--space-1);
}

.reading-filter__btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-rule-heavy);
  background: var(--color-bg);
  color: var(--color-ink-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.reading-filter__btn:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.reading-filter__btn.is-active {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

.reading-filter__hint {
  font-weight: 400;
  opacity: 0.7;
}

.reading-filter__empty {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-ink-muted);
  padding: var(--space-6) 0;
}

/* ── Pullquote share tooltip ────────────────────────────────── */
.pullquote-share {
  position: absolute;
  display: none;
  align-items: center;
  gap: var(--space-2);
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-bg);
  background: var(--color-ink);
  border: none;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  z-index: var(--z-overlay);
  transition: background var(--transition-fast);
}

.pullquote-share::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-ink);
}

.pullquote-share:hover { background: var(--color-accent); }
.pullquote-share:hover::after { border-top-color: var(--color-accent); }

/* ── Content profile badge ──────────────────────────────────── */
.profile-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-rule-heavy);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  cursor: help;
}
.profile-badge[data-profile="podcast"] { color: #6B2A2A; border-color: #6B2A2A; }
.profile-badge[data-profile="longread"] { color: var(--color-opinion); border-color: var(--color-opinion); }
.profile-badge[data-profile="photoessay"] { color: var(--color-arts-culture); border-color: var(--color-arts-culture); }
.profile-badge[data-profile="datavisualization"] { color: var(--color-science); border-color: var(--color-science); }
.profile-badge[data-profile="brief"] { color: var(--color-accent); border-color: var(--color-accent); }
.profile-badge[data-profile="interview"] { color: var(--color-history); border-color: var(--color-history); }
.profile-badge[data-profile="explainer"] { color: var(--color-glossary); border-color: var(--color-glossary); }

/* ── Profile-specific content blocks ────────────────────────── */
.profile-audio {
  margin: var(--space-8) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-rule);
  background: var(--color-bg-alt);
}
.profile-audio audio {
  width: 100%;
  margin-bottom: var(--space-2);
}
.profile-audio figcaption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  font-style: italic;
}
.profile-embed {
  margin: var(--space-8) 0;
}

/* ── Focus / reading mode ───────────────────────────────────── */
/* Chrome-hiding only applies when the page is a reading page. On section
   hubs and index pages the masthead and footer stay visible so the user
   can navigate out of a section even with focus mode still toggled on. */
[data-focus-mode="on"]:has(.article-body, .library-body, .glossary-layout, .book-layout) .masthead,
[data-focus-mode="on"]:has(.article-body, .library-body, .glossary-layout, .book-layout) .site-footer {
  display: none;
}

/* Keep reading header visible in focus mode — gives readers a way out */
[data-focus-mode="on"] .article-reading-header,
[data-focus-mode="on"] .library-reading-header {
  opacity: 1 !important;
  visibility: visible !important;
}

[data-focus-mode="on"] .article-layout__inner {
  grid-template-columns: 1fr;
}

[data-focus-mode="on"] .article-layout__aside {
  display: none;
}

[data-focus-mode="on"] .article-body {
  font-size: 1.2rem;
  max-width: 70ch;
  margin-inline: auto;
}

[data-focus-mode="on"] .article-layout {
  max-width: 800px;
  margin-inline: auto;
}

[data-focus-mode="on"] .related-articles,
[data-focus-mode="on"] .subscribe-block { display: none; }

/* Focus mode for glossary and bookshelf project layouts */
[data-focus-mode="on"] .glossary-layout,
[data-focus-mode="on"] .book-layout {
  grid-template-columns: 1fr;
}

[data-focus-mode="on"] .glossary-sidebar,
[data-focus-mode="on"] .book-sidebar {
  display: none;
}

/* ── Argument map ───────────────────────────────────────────── */
.argument-map {
  border: 1px solid var(--color-rule-heavy);
  border-left: 3px solid var(--color-ink);
  margin-bottom: var(--space-8);
  overflow: hidden;
}

.argument-map__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-bg);
  background: var(--color-ink);
  padding: var(--space-2) var(--space-4);
  margin: 0;
}

.argument-map__row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-rule);
  align-items: start;
}

.argument-map__row:first-of-type { border-top: none; }

.argument-map__step {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 2px;
}

.argument-map__step--claim      { color: var(--color-ink-faint); }
.argument-map__step--evidence   { color: var(--color-ink-faint); }
.argument-map__step--conclusion { color: var(--color-accent); }

.argument-map__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  font-style: italic;
  margin: 0;
}

.argument-map__list {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  padding-left: var(--space-5);
  margin: 0;
}

.argument-map__list li + li { margin-top: var(--space-2); }

@media (max-width: 540px) {
  .argument-map__row { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ── Edition badge (in article eyebrow) ─────────────────────── */
.edition-badge {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  border: 1px solid var(--color-rule-heavy);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.edition-badge:hover { color: var(--color-ink); border-color: var(--color-ink); }

/* ── Corrections log (in article footer) ────────────────────── */
.corrections-log {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.corrections-log__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-3);
}

.corrections-log__entry {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}

.corrections-log__date {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-1);
}

.corrections-log__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  font-style: italic;
}

/* ── Heading anchor links ───────────────────────────────────── */
.article-body h2,
.article-body h3 { position: relative; }

.heading-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4em;
  color: var(--color-ink-faint);
  opacity: 0;
  text-decoration: none;
  vertical-align: middle;
  transition: opacity 0.15s;
}

.article-body h2:hover .heading-anchor,
.article-body h3:hover .heading-anchor,
.heading-anchor:focus {
  opacity: 1;
}

/* ── Comments section (Cusdis) ──────────────────────────────── */
/* The Cusdis iframe uses its own fonts. Rather than fight it,
   we frame the section as a clearly separate zone.
   Near-white (#FFFDF9) lifts the section above the warm newsprint page bg (#F4F1EB). */
.article-comments {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

.article-comments__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.article-comments__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
}

.article-comments__toggle {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-bg);
  background: var(--color-ink);
  border: none;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.article-comments__toggle:hover { background: var(--color-accent); }

[data-theme="dark"] .comments-section {
  background: var(--color-bg-inset);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .comments-section {
    background: var(--color-bg-inset);
  }
}

.comments-section__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}

/* Cusdis renders in a cross-origin iframe. CSS vars must be concrete values —
   no var() references. 'Source Serif 4' is not available inside the iframe
   (Google Fonts only loads in our document), so Georgia is the closest match.
   Light-mode vars only — dark mode is handled natively by data-theme="dark". */
:root:not([data-theme="dark"]) #cusdis_thread {
  --cusdis-font-family: Georgia, serif;
  --cusdis-text-color: #1A1A1A;
  --cusdis-muted-color: #6B6864;
  --cusdis-bg-color: #F4F1EB;       /* warm — stands out from near-white section bg */
  --cusdis-border-color: #4A4845;   /* very dark so input borders are unmistakable */
  --cusdis-primary-color: #8B0000;
}

#cusdis_thread {
  position: relative;
}

/* Tall enough that users don't scroll inside the widget */
#cusdis_thread iframe {
  width: 100% !important;
  min-height: 640px !important;
}

/* Cover the "Powered by Cusdis" attribution row with a same-background overlay.
   A positioned ::after sits above the iframe in the stacking order. */
#cusdis_thread::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: #FFFDF9;
  pointer-events: none;
  z-index: 1;
}

[data-theme="dark"] #cusdis_thread::after {
  background: var(--color-bg-inset);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #cusdis_thread::after {
    background: var(--color-bg-inset);
  }
}

/* ── Share panel ─────────────────────────────────────────────── */
.share-wrap {
  position: relative;
}

.share-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule-heavy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 170px;
  z-index: var(--z-overlay);
  padding: var(--space-2) 0;
}

@media (max-width: 600px) {
  .share-panel {
    position: fixed;
    top: auto;
    bottom: 3.5rem;
    left: 0;
    right: 0;
    transform: none;
    min-width: 0;
    width: 100%;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    z-index: var(--z-modal);
  }
}

.share-panel__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.1s;
}
.share-panel__item:hover {
  background: var(--color-bg-alt);
  color: var(--color-ink);
}
.share-panel__item svg { flex-shrink: 0; color: var(--color-ink-faint); }

.share-panel__divider {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-2) 0;
}

/* ── Cite modal ──────────────────────────────────────────────── */
.cite-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: calc(var(--z-overlay) - 1);
}

.cite-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-overlay);
  background: var(--color-bg);
  border: 1px solid var(--color-rule-heavy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  width: min(560px, calc(100vw - 2rem));
  padding: var(--space-6);
}

.cite-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.cite-modal__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink-faint);
  margin: 0;
}

.cite-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink-faint);
  padding: var(--space-1);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}
.cite-modal__close:hover { color: var(--color-ink); }

.cite-modal__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-4);
}

.cite-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-faint);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.1s;
}
.cite-tab:hover { color: var(--color-ink); }
.cite-tab.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.cite-modal__text {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  user-select: all;
  min-height: 4rem;
}

.cite-modal__copy-btn {
  display: block;
  width: 100%;
  padding: var(--space-3);
  background: var(--color-ink);
  color: var(--color-bg);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cite-modal__copy-btn:hover { opacity: 0.85; }

/* ── Suggest a correction ───────────────────────────────────── */
.suggest-correction {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

.suggest-correction__link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.suggest-correction__link:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ── Bookmark button state ──────────────────────────────────── */
.bookmark-btn.is-saved .bookmark-icon { fill: currentColor; }

/* ── Inline footnotes ───────────────────────────────────────── */
.fn-ref {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
}

.fn-btn {
  font-family: var(--font-ui);
  font-size: 1em;
  font-weight: 700;
  color: var(--color-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 1px;
  line-height: 1;
}

.fn-btn:hover { text-decoration: underline; }

.fn-content { display: none; } /* content reservoir; tooltip reads from here */

.fn-tooltip {
  position: absolute;
  z-index: var(--z-overlay);
  max-width: 300px;
  width: max-content;
  background: var(--color-bg);
  border: 1px solid var(--color-rule-heavy);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: var(--space-3) var(--space-4);
}

.fn-tooltip__close {
  float: right;
  background: none;
  border: none;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  cursor: pointer;
  padding: 0 0 var(--space-1) var(--space-3);
  line-height: 1;
}

.fn-tooltip__close:hover { color: var(--color-ink); }

.fn-tooltip__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  clear: both;
}

/* ── Sidenotes (margin notes on screens ≥ 1400px) ───────────── */
/* Default: hidden — the tooltip is used on narrow screens       */
.sidenote {
  display: none;
}

@media (min-width: 1400px) {
  /* Make the prose column the positioning context */
  .article-body {
    position: relative;
    overflow: visible;
  }

  .sidenote {
    display: block;
    position: absolute;
    /* Start just past the prose max-width with a 1.5rem gutter */
    left: calc(var(--max-width-prose) + var(--space-6));
    width: 152px; /* body col (~908px) − 720px prose − 24px gap − 8px safety */
    font-family: var(--font-ui);
    font-size: 0.7rem;
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
    border-left: 2px solid var(--color-rule);
    padding-left: var(--space-3);
    transition: border-left-color 0.3s, background 0.3s;
  }

  .sidenote__number {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: 0.25rem;
  }

  .sidenote__text {
    margin: 0;
  }

  /* Brief highlight when user clicks the corresponding fn-btn */
  .sidenote--highlight {
    border-left-color: var(--color-accent);
    background: var(--color-surface);
  }

  /* Disable sidenotes when reading width is set to "wide" (prose fills the column) */
  .article-body[data-rs-width="wide"] + * .sidenote,
  [data-rs-width="wide"] .sidenote { display: none; }

  /* Disable sidenotes in focus mode (layout changes, positions are wrong) */
  [data-focus-mode="on"] .sidenote { display: none; }
}

/* ── Reading list page ──────────────────────────────────────── */
.reading-list {
  list-style: none;
  padding: 0;
}

.reading-list__item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-rule);
}

.reading-list__meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-2);
}

.reading-list__section {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
}

.reading-list__mins {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.reading-list__title {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  word-break: break-word;
  overflow-wrap: break-word;
}

.reading-list__title:hover { color: var(--color-accent); }

.reading-list__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reading-list__date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.reading-list__remove {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.reading-list__remove:hover { color: var(--color-ink); text-decoration: underline; }

.reading-list-clear {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-faint);
  background: none;
  border: 1px solid var(--color-rule-heavy);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.reading-list-clear:hover { color: var(--color-ink); border-color: var(--color-ink); }

/* ── Corrections page ───────────────────────────────────────── */
.correction-entry {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-rule);
}

.correction-entry__article {
  margin-bottom: var(--space-4);
}

.correction-entry__title {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: var(--space-1);
}

.correction-entry__title:hover { color: var(--color-accent); }

.correction-entry__section {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.correction-entry__item {
  padding: var(--space-3) 0 var(--space-3) var(--space-8);
  border-left: 2px solid var(--color-rule-heavy);
  margin-bottom: var(--space-2);
}

.correction-entry__date {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-1);
}

.correction-entry__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  font-style: italic;
}

/* ── Editions index ─────────────────────────────────────────── */
.editions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}

.edition-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-rule-heavy);
  border-top: 3px solid var(--color-ink);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-top-color var(--transition-fast);
}

.edition-card:hover { border-top-color: var(--color-accent); }

.edition-card__number {
  font-family: var(--font-masthead);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
}

.edition-card__count,
.edition-card__date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.edition-card__titles {
  list-style: none;
  padding: 0;
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Individual edition page ────────────────────────────────── */
.edition-header {
  padding-bottom: var(--space-8);
  max-width: 760px;
}

.edition-back {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  text-decoration: none;
  margin-bottom: var(--space-6);
}

.edition-back:hover { color: var(--color-ink); }

.edition-header__number {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}

.edition-header__date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-3);
}

.edition-header__title {
  font-family: var(--font-masthead);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.edition-header__count {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

.edition-rule {
  height: 3px;
  background: var(--color-ink);
  margin-bottom: var(--space-10);
  border: none;
}

.edition-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.edition-nav__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-muted);
  text-decoration: none;
}

.edition-nav__link:hover { color: var(--color-ink); }

/* ── Changelog page ─────────────────────────────────────────── */
.changelog__entry {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-rule);
}

.changelog__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.changelog__version {
  font-family: var(--font-masthead);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1;
}

.changelog__date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.changelog__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-muted);
  width: 100%;
}

.changelog__list {
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.changelog__list li {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

/* ── Inter-article response system ─────────────────────────── */
.response-banner {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-ink-faint);
  background: var(--color-bg-alt);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.response-banner__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  white-space: nowrap;
}

.response-banner__link {
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-snug);
}

.response-banner__link:hover { color: var(--color-accent); }

.responses-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.responses-section__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-4);
}

.responses-section__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.responses-section__item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}

.responses-section__section {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.responses-section__link {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.responses-section__link:hover { color: var(--color-accent); }

.responses-section__date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

/* ── Backlinks (Digital Garden) ─────────────────────────────── */
.backlinks-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.backlinks-section__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-4);
}

.backlinks-section__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.backlinks-section__item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}

.backlinks-section__section {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-1);
}

.backlinks-section__link {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.backlinks-section__link:hover { color: var(--color-accent); }

.backlinks-section__date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

/* ── Start Here page ────────────────────────────────────────── */
.start-here-layout {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-10);
}

.start-here-header {
  padding-bottom: var(--space-8);
  border-bottom: 3px solid var(--color-ink);
  margin-bottom: var(--space-8);
}

.start-here-header__kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}

.start-here-header__title {
  font-family: var(--font-masthead);
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-5);
}

.start-here-header__body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  max-width: 62ch;
}

.start-here-section {
  margin-bottom: var(--space-10);
}

.start-here-section__title {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
}

.start-here-section__intro {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-6);
  font-style: italic;
}

.start-here-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  counter-reset: start-here-counter attr(start);
}

.start-here-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}

.start-here-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.start-here-item__meta {
  grid-column: 2;
  margin-bottom: var(--space-1);
}

.start-here-item__section {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-weight: 600;
}

.start-here-item__title {
  grid-column: 2;
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.start-here-item__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.start-here-item__title a:hover { color: var(--color-accent); }

.start-here-item__desc {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

.start-here-footer {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 3px solid var(--color-ink);
}

.start-here-footer__text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-5);
}

.start-here-footer__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Editorial handbook page ────────────────────────────────── */
.editorial-layout {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-10);
}

.editorial-header {
  padding-bottom: var(--space-8);
  border-bottom: 3px solid var(--color-ink);
  margin-bottom: var(--space-8);
}

.editorial-header__kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}

.editorial-header__title {
  font-family: var(--font-masthead);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-5);
}

.editorial-header__body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  max-width: 62ch;
  margin-bottom: var(--space-4);
}

.editorial-header__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.editorial-toc {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
}

.editorial-toc__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-3);
}

.editorial-toc__list {
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.editorial-toc__list a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-link);
}

.editorial-body {
  max-width: 68ch;
}

.editorial-body section {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-rule);
}

.editorial-body section:last-child {
  border-bottom: none;
}

.editorial-body h2 {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
  scroll-margin-top: var(--space-16);
}

.editorial-body h3 {
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: 700;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.editorial-body p,
.editorial-body ul,
.editorial-body ol {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}

.editorial-body ul,
.editorial-body ol {
  padding-left: var(--space-6);
}

.editorial-body li {
  margin-bottom: var(--space-2);
}

.editorial-body strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* ── Document library ───────────────────────────────────────── */
.doc-type-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-bg);
  background: var(--color-ink);
  padding: 0.15em 0.6em;
  margin-bottom: var(--space-3);
}

/* Document index */
.doc-index-layout {
  max-width: 900px;
  margin-inline: auto;
  padding-block: var(--space-10);
}

.doc-index-header {
  padding-bottom: var(--space-8);
  border-bottom: 3px solid var(--color-ink);
  margin-bottom: var(--space-8);
}

.doc-index-header__kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}

.doc-index-header__title {
  font-family: var(--font-masthead);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-4);
}

.doc-index-header__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  max-width: 62ch;
}

.doc-index-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.doc-card {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-rule);
}

.doc-card:first-child { border-top: 1px solid var(--color-rule); }

.doc-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.doc-card__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.doc-card__title a:hover { color: var(--color-accent); }

.doc-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.doc-card__meta {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Document page */
.doc-layout {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-8) var(--space-16);
}

.doc-back {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-6);
}

.doc-back:hover { color: var(--color-accent); }

.doc-header {
  padding-bottom: var(--space-6);
  border-bottom: 3px solid var(--color-ink);
  margin-bottom: var(--space-8);
}

.doc-header__eyebrow { margin-bottom: var(--space-3); }

.doc-header__title {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

.doc-header__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  font-style: italic;
  margin-bottom: var(--space-5);
}

.doc-header__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  border: 1px solid var(--color-rule);
  padding: var(--space-4);
  background: var(--color-bg-alt);
}

.doc-meta-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}

.doc-meta-row dt {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
}

.doc-meta-row dd {
  color: var(--color-ink-muted);
}

.doc-related-articles {
  margin-top: var(--space-4);
}

.doc-related-articles__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}

.doc-related-articles ul {
  list-style: none;
  padding: 0;
}

.doc-related-articles a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-link);
}

.doc-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.doc-body p,
.doc-body ul,
.doc-body ol {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}

.doc-body h2 {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-ink);
}

.doc-body h3 {
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: 700;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}

.doc-body hr {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-6) 0;
}

.doc-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.doc-body th {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-ink);
  color: var(--color-ink-faint);
}

.doc-body td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}

.doc-body code {
  font-family: monospace;
  font-size: 0.9em;
  background: var(--color-bg-inset);
  padding: 0.1em 0.3em;
}

/* ─── Word Count ─────────────────────────────────────────────────────────── */

.article-header__word-count {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  letter-spacing: 0.03em;
}

.article-header__word-count::after {
  content: "";
}

/* ─── Download Panel ─────────────────────────────────────────────────────── */

.download-wrap {
  position: relative;
  display: inline-flex;
}

.download-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 200;
  overflow: hidden;
}

@media (max-width: 600px) {
  .download-panel {
    position: fixed;
    top: auto;
    bottom: 3.5rem;
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    z-index: var(--z-modal);
  }
}

.download-panel__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}

.download-panel__item:hover,
.download-panel__item:focus-visible {
  background: var(--color-bg-inset);
  outline: none;
}

.download-panel__item + .download-panel__item {
  border-top: 1px solid var(--color-rule);
}

/* ─── Reading Settings Panel ─────────────────────────────────────────────── */

.reading-settings-wrap {
  position: relative;
  display: inline-flex;
}

.reading-settings-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 260px;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
}

@media (max-width: 600px) {
  .reading-settings-panel {
    position: fixed;
    top: auto;
    bottom: 3.25rem;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 65vh;
    padding-bottom: var(--space-6);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    z-index: var(--z-modal);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.rs-panel-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: none;
  border: none;
  color: var(--color-ink-faint);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
}

.rs-panel-close:hover {
  color: var(--color-ink);
}

.rs-group {
  margin-bottom: var(--space-3);
}

.rs-group:last-child {
  margin-bottom: 0;
}

.rs-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-muted);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

/* Font size row */
.rs-size-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rs-small {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  line-height: 1;
  flex-shrink: 0;
}

.rs-large {
  font-size: var(--text-lg);
  color: var(--color-ink-faint);
  line-height: 1;
  flex-shrink: 0;
}

.rs-slider {
  flex: 1;
  height: 4px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Button groups */
.rs-btngroup {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  overflow: hidden;
}

.rs-btn {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  background: none;
  border: none;
  border-right: 1px solid var(--color-rule);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.rs-btn:last-child {
  border-right: none;
}

.rs-btn:hover {
  background: var(--color-bg-inset);
}

.rs-btn.is-active {
  background: var(--color-ink) !important;
  color: var(--color-bg) !important;
}

/* Ruler colour swatches — override btngroup border/overflow */
.rs-btngroup:has(.rs-swatch) {
  border: none;
  border-radius: 0;
  overflow: visible;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.rs-swatch {
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.rs-swatch.is-active {
  border-color: var(--color-ink);
  transform: scale(1.2);
}

.rs-swatch:hover { transform: scale(1.15); }

.rs-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
}

.rs-icon-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Reading settings select ── */
.rs-select {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
  color: var(--color-ink);
  cursor: pointer;
}

/* ── Toggle switches ── */
.rs-toggles { display: flex; flex-direction: column; gap: var(--space-2); }
.rs-toggle { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-ink-muted); }
.rs-toggle__input { accent-color: var(--color-accent); }

/* ── Article body — reading preference overrides ── */

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

/* Width */
.article-body[data-rs-width="narrow"] { max-width: 560px; }
.article-body[data-rs-width="wide"] { max-width: 100%; }

/* Background presets */
[data-rs-bg="sepia"] { --color-bg: #f4ecd8; --color-bg-alt: #ede4cc; --color-ink: #5b4636; }
[data-rs-bg="cream"] { --color-bg: #fefcf0; --color-bg-alt: #f8f5e8; --color-ink: #333; }
[data-rs-bg="dark"] { --color-bg: #1a1a1a; --color-bg-alt: #222; --color-ink: #e0e0e0; --color-ink-muted: #aaa; --color-ink-faint: #666; --color-rule: #333; }

/* Reading ruler */
.rs-ruler-line {
  position: fixed;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.6;
  z-index: 50;
  pointer-events: none;
  transition: top 0.04s linear, opacity 0.15s ease;
}


/* Paragraph numbers */
.rs-para-numbers { counter-reset: paragraph; }
.rs-para-numbers > p { counter-increment: paragraph; position: relative; }
.rs-para-numbers > p::before {
  content: counter(paragraph);
  position: absolute;
  left: -2.5rem;
  top: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  opacity: 0.5;
  width: 2rem;
  text-align: right;
}


/* ============================================================
   THE FREETHINKING TIMES — Projects
   ============================================================ */

/* ── Shared Game Layout ─────────────────────────────────────── */
.game-page {
  max-width: 600px;
  margin-inline: auto;
  padding: var(--space-10) var(--space-4) var(--space-16);
}

.game-header {
  text-align: center;
  padding-bottom: var(--space-8);
  border-bottom: 3px double var(--color-rule-heavy);
  margin-bottom: var(--space-8);
}

.game-back {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-5);
}

.game-back:hover { color: var(--color-ink-muted); text-decoration: none; }

.game-title {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.game-description {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  max-width: 48ch;
  margin-inline: auto;
}

.game-btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-6);
  border: 2px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.game-btn:hover {
  background: var(--color-ink);
  color: var(--color-bg);
}

.game-btn--accent {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.game-btn--accent:hover {
  background: var(--color-accent);
  color: #fff;
}

.game-status {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ── Projects Index ─────────────────────────────────────────── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

/* ── Topic cards (used on /topics/ index) ───────────────── */
.topic-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  line-height: 1.5;
}

.topic-cloud__item {
  font-family: var(--font-headline);
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}

.topic-cloud__item:hover {
  border-color: var(--color-ink);
  background: var(--color-bg-alt);
  text-decoration: none;
}

.topic-cloud__count {
  font-size: 0.65em;
  color: var(--color-ink-faint);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.topic-card {
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-ink);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.topic-card:hover {
  border-top-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.topic-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
}

.topic-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  line-height: var(--leading-snug);
  margin: 0;
}

.topic-card__title:hover {
  color: var(--color-accent);
}

.topic-card__count {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.topic-card__label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-2);
}

.topic-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.topic-card__chip {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-link);
  text-decoration: none;
  border: 1px solid var(--color-rule);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.topic-card__chip:hover {
  border-color: var(--color-link);
  background: var(--color-bg-alt);
}

.topic-card__latest {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.topic-card__latest-item {
  line-height: var(--leading-snug);
}

.topic-card__latest-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.topic-card__latest-link:hover {
  border-bottom-color: var(--color-ink-muted);
}

.project-card {
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-ink);
  padding: var(--space-6);
  text-decoration: none;
  display: block;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.project-card:hover {
  border-top-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.project-card__icon {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
  display: block;
}

.project-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.project-card__description {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

.project-card__status {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-top: var(--space-4);
}

/* ── Shared Project Section Styles ──────────────────────── */
.project-section-header {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-6);
  border-bottom: 3px solid var(--color-ink);
}

.project-section-header .section-badge {
  display: block;
  margin-bottom: var(--space-2);
}

.project-section-header h1 {
  font-family: var(--font-masthead);
  font-size: clamp(1.8rem, 5vw, 3.815rem);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
  overflow-wrap: break-word;
}

.project-section-lede {
  font-size: var(--text-md);
  color: var(--color-ink-muted);
  font-style: italic;
  max-width: 66ch;
  line-height: var(--leading-normal);
}

.project-back {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  text-decoration: none;
}

.project-back:hover { color: var(--color-ink-muted); }

/* ── Glossary Index ──────────────────────────────────────── */
.glossary-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.glossary-card {
  padding: var(--space-6);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-glossary);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.glossary-card__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin: 0;
}

.glossary-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin: 0;
}

.glossary-card__title a { color: var(--color-ink); text-decoration: none; }
.glossary-card__title a:hover { color: var(--color-glossary); }

.glossary-card__description {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  margin: 0;
  flex: 1;
}

.glossary-card__link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-glossary);
  text-decoration: none;
  margin-top: auto;
}

.glossary-card__link:hover { text-decoration: underline; }

/* ── Glossary Term Layout ────────────────────────────────── */
.glossary-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 768px) {
  .glossary-layout { grid-template-columns: 1fr; }
}

.glossary-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}

.glossary-header h1 {
  font-family: var(--font-masthead);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.glossary-pronounce {
  background: none;
  border: 1px solid var(--color-rule);
  color: var(--color-ink-faint);
  cursor: pointer;
  padding: var(--space-1);
  margin-left: var(--space-2);
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.glossary-pronounce:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.glossary-etymology {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  margin-bottom: 0;
}

.glossary-body.prose {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: 68ch;
}

.glossary-body.prose p { margin-bottom: var(--space-4); }

.glossary-tags {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.glossary-sidebar {
  position: sticky;
  top: 100px;
}

.glossary-figures {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
}

.glossary-figures li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink-muted);
}

.glossary-figures li:last-child { border-bottom: none; }

.glossary-related {
  list-style: none;
  padding: 0;
  margin: 0;
}

.glossary-related li { margin-bottom: var(--space-2); }

.glossary-related a {
  font-size: var(--text-sm);
  color: var(--color-link);
  font-weight: 600;
}

.glossary-az {
  list-style: none;
  padding: 0;
  margin: 0;
}

.glossary-az li {
  border-bottom: 1px solid var(--color-rule);
}

.glossary-az li a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.glossary-az li a:hover { color: var(--color-link); }
.glossary-az__current a { color: var(--color-glossary) !important; font-weight: 700; }

/* ── Thought Experiment Grid ─────────────────────────────── */
.te-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.te-card {
  padding: var(--space-6);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-thought-experiments);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.te-card__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin: 0;
}

.te-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin: 0;
}

.te-card__title a { color: var(--color-ink); text-decoration: none; }
.te-card__title a:hover { color: var(--color-thought-experiments); }

.te-card__description {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  margin: 0;
  flex: 1;
}

.te-card__link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-thought-experiments);
  text-decoration: none;
  margin-top: auto;
}

.te-card__link:hover { text-decoration: underline; }

/* ── Bookshelf Grid ──────────────────────────────────────── */
.bookshelf-category {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
}

.bookshelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.book-card {
  padding: var(--space-6);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-bookshelf);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.book-card__category {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin: 0;
}

.book-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin: 0;
}

.book-card__title a { color: var(--color-ink); text-decoration: none; }
.book-card__title a:hover { color: var(--color-bookshelf); }

.book-card__author {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin: 0;
}

.book-card__description {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  margin: 0;
  flex: 1;
}

.book-card__link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-bookshelf);
  text-decoration: none;
  margin-top: auto;
}

.book-card__link:hover { text-decoration: underline; }

/* ── Book Entry Layout ───────────────────────────────────── */
.book-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 768px) {
  .book-layout { grid-template-columns: 1fr; }
}

.book-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}

.book-header h1 {
  font-family: var(--font-masthead);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.book-category-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-bookshelf);
  display: block;
  margin-bottom: var(--space-2);
}

.book-byline {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.book-lede {
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-ink-muted);
  margin-bottom: 0;
}

.book-meta-block {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-bookshelf);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
}

.book-meta-block p { margin: 0; }
.book-meta-block strong { color: var(--color-ink); }

.book-body.prose {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: 68ch;
}

.book-body.prose p { margin-bottom: var(--space-4); }

.book-tags {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.book-sidebar {
  position: sticky;
  top: 100px;
}

.book-list-sidebar {
  list-style: none;
  padding: 0;
  margin: 0;
}

.book-list-sidebar li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-rule);
}

.book-list-sidebar li:last-child { border-bottom: none; }

.book-list-sidebar a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  font-weight: 600;
  line-height: var(--leading-snug);
}

.book-list-sidebar a:hover { color: var(--color-link); }
.book-list-sidebar__current a { color: var(--color-bookshelf) !important; }

.book-list-sidebar__author {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  font-weight: 400;
}

/* ── Trials Timeline ─────────────────────────────────────── */
.trials-timeline {
  position: relative;
  padding-left: var(--space-10);
  margin-top: var(--space-4);
}

.trials-timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0.6rem;
  bottom: 0;
  width: 2px;
  background: var(--color-rule-heavy);
}

.trial-entry {
  position: relative;
  padding-bottom: var(--space-10);
}

.trial-entry::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-10) + 0.75rem);
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-trials);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-trials);
}

.trial-year {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-trials);
  margin-bottom: var(--space-1);
}

.trial-name {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.trial-name a { color: var(--color-ink); text-decoration: none; }
.trial-name a:hover { color: var(--color-trials); }

.trial-meta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-3);
}

.trial-description {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  max-width: 64ch;
  margin-bottom: 0;
}

.trial-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-trials);
  text-decoration: none;
}

.trial-link:hover { text-decoration: underline; }

/* ── Trial Metadata Block (in article.njk pages) ────────── */
.trial-metadata {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-trials);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
}

.trial-metadata__item strong {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-1);
}

.trial-metadata__item span { color: var(--color-ink-muted); }


/* ============================================================
   THE FREETHINKING TIMES — Public Domain Library
   All values reference tokens from tokens.css.
   ============================================================ */

/* ── 1. Library Homepage ──────────────────────────────────── */

.library-home {
  padding-block: var(--space-12);
}

.library-hero {
  text-align: center;
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-12);
}

.library-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-4);
  text-align: center;
}

.library-hero__headline {
  font-family: var(--font-masthead);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-6);
}

.library-hero__deck {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  max-width: 60ch;
  margin: 0 auto var(--space-8);
}

/* Featured works grid */
.library-featured {
  margin-bottom: var(--space-16);
}

.library-featured__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-8);
}

.library-featured__empty {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  font-style: italic;
  padding: var(--space-8) 0;
}

.library-featured__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

.library-work-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: border-top-color var(--transition-fast), box-shadow var(--transition-fast);
}

.library-work-card:hover {
  border-top-color: var(--color-link);
  box-shadow: var(--shadow-md);
}

.library-work-card__era {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.library-work-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin: 0;
}

.library-work-card__author {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.library-work-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  margin: 0;
  flex: 1;
}

.library-work-card__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Catalogue table */
.library-catalogue {
  margin-bottom: var(--space-16);
}

.library-catalogue__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-6);
}

.library-catalogue__empty {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  font-style: italic;
  padding: var(--space-8) 0;
}

/* Filter bar */
.library-filter-bar {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-6);
}

.library-filter-bar__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.library-filter-bar select {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

.library-filter-bar select:focus {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
  border-color: var(--color-link);
}

/* Catalogue table */
.library-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.library-table thead th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-rule-heavy);
}

.library-table tbody tr {
  border-bottom: 1px solid var(--color-rule);
}

.library-table tbody tr[hidden] {
  display: none;
}

.library-table tbody tr:hover {
  background: var(--color-bg-alt);
}

.library-table td {
  padding: var(--space-3);
  vertical-align: middle;
  color: var(--color-ink);
  line-height: var(--leading-normal);
}

.library-table__title-cell a {
  color: var(--color-link);
  text-decoration: none;
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: 600;
}

.library-table__title-cell a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.library-table__author {
  color: var(--color-ink-muted);
}

.library-table__type,
.library-table__era {
  color: var(--color-ink-faint);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .library-table__author,
  .library-table__type,
  .library-table__era {
    display: none;
  }
}


/* ── 2. Work Landing Page ─────────────────────────────────── */

.library-work-landing {
  padding-block: var(--space-12);
}

.library-work-hero {
  max-width: var(--max-width-prose);
  margin: 0 auto var(--space-12);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-rule);
}

.library-work-hero__back {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.library-work-hero__back:hover {
  color: var(--color-link);
}

.library-work-hero__era {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-3);
}

.library-work-hero__title {
  font-family: var(--font-masthead);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

.library-work-hero__author {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-6);
}

.library-work-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-8);
}

.library-work-hero__meta span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  background: var(--color-rule);
  margin-right: var(--space-6);
  vertical-align: middle;
}

.library-work-hero__meta span:first-child::before {
  display: none;
}

.library-work-hero__intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

.library-work-hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* Chapter list */
.library-chapter-list {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.library-chapter-list__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-6);
}

.library-chapter-item {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
  color: inherit;
}

.library-chapter-item:hover .library-chapter-item__title {
  color: var(--color-link);
}

.library-chapter-item__number {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink-faint);
  text-align: right;
}

.library-chapter-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.library-chapter-item__title {
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  transition: color var(--transition-fast);
}

.library-chapter-item__subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

.library-chapter-item__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-align: right;
  white-space: nowrap;
}

.library-chapter-item__complete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-bg-inset);
  font-size: 0.6rem;
  color: var(--color-ink-faint);
}

.library-chapter-item__complete--done {
  background: var(--color-accent);
  color: #fff;
}


/* ── 3. Reading Layout ────────────────────────────────────── */

.library-reading {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

.library-reading-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;                          /* below masthead (100) so nav dropdowns aren't covered */
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-3) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.library-reading-header.is-visible {
  opacity: 1;
  visibility: visible;
}

.library-reading-header__back {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.library-reading-header__back:hover {
  color: var(--color-link);
}

.library-reading-header__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: center;
}

.library-reading-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.library-reading-progress {
  height: 2px;
  background: var(--color-rule);
  position: relative;
}

.library-reading-progress__bar {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
  transition: width 0.1s linear;
}

/* Body wrapper — centers prose, leaves room for panel on wide screens */
.library-body-wrapper {
  max-width: var(--max-width-prose);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter) var(--space-16);
}

.library-body-chapter-info {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}

.library-body-chapter-info__work {
  font-weight: 600;
  color: var(--color-ink-muted);
}

.library-body-meta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.library-body__heading {
  font-family: var(--font-masthead);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-6);
}

/* The rendered Markdown content */
.library-body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin-top: var(--space-8);
}

.library-body p { margin: 0 0 var(--space-6); }

.library-body h2 {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: var(--space-10) 0 var(--space-4);
  color: var(--color-ink);
}

.library-body h3 {
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 700;
  margin: var(--space-8) 0 var(--space-3);
  color: var(--color-ink);
}

.library-body blockquote {
  border-left: 3px solid var(--color-rule-heavy);
  padding-left: var(--space-6);
  margin: var(--space-6) 0;
  color: var(--color-ink-muted);
  font-style: italic;
}

.library-body a {
  color: var(--color-link);
  text-decoration: underline;
}

.library-body a:hover {
  color: var(--color-link-hover);
}

/* Chapter navigation */
.library-chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-rule);
  margin-top: var(--space-10);
}

.library-chapter-nav__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-link);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 45%;
}

.library-chapter-nav__link:hover {
  color: var(--color-link-hover);
}

.library-chapter-nav__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-ink-faint);
}

.library-chapter-nav__title {
  font-family: var(--font-headline);
  font-weight: 600;
}

.library-chapter-nav__link--next {
  text-align: right;
  margin-left: auto;
}


/* ── 4. Reading Panel ─────────────────────────────────────── */

.library-panel-toggle {
  background: none;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.library-panel-toggle:hover,
.library-panel-toggle[aria-expanded="true"] {
  border-color: var(--color-link);
  color: var(--color-link);
}

.library-panel {
  position: fixed;
  top: var(--space-16);
  right: 0;
  width: min(340px, 85vw);
  height: calc(100% - var(--space-16));
  background: var(--color-bg);
  border-left: 1px solid var(--color-rule);
  box-shadow: var(--shadow-md);
  /* Sits above the annotation-toolbar (both share --z-overlay by default,
     but the panel must win so selection buttons / download items in the
     Share tab aren't intercepted by the toolbar). */
  z-index: calc(var(--z-overlay) + 10);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.library-panel[aria-hidden="false"] {
  transform: translateX(0);
}

.library-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-rule);
  flex-shrink: 0;
}

.library-panel__header-btn {
  background: none;
  border: none;
  color: var(--color-ink-faint);
  cursor: pointer;
  padding: var(--space-1);
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.library-panel__header-btn:hover { color: var(--color-ink); }

.library-panel__export-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  padding: var(--space-2);
  z-index: var(--z-modal);
  min-width: 160px;
  border-radius: 6px;
}

.library-panel__export-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  background: none;
  border: none;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.library-panel__export-item:hover {
  background: var(--color-bg-alt);
  color: var(--color-ink);
}

.library-panel__close {
  background: none;
  border: none;
  font-size: var(--text-md);
  color: var(--color-ink-muted);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
}

.library-panel__close:hover {
  color: var(--color-ink);
}

.library-panel__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-rule);
  flex-shrink: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.library-panel__tabs::-webkit-scrollbar { display: none; }

/* ── Reader panel: quick-actions row ──
   Top band of the Reader panel. Holds Save, Listen, Focus — the
   three most-used toggles. Each slot stretches evenly; buttons
   show icon + label stacked for clarity. */
.library-panel__quick-actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-rule);
  flex-shrink: 0;
}
.library-panel__quick-actions:empty { display: none; }
.library-panel__quick-actions > div {
  flex: 1;
  display: flex;
}
.library-panel__quick-actions .article-action-btn {
  position: static;
  width: 100%;
  height: auto;
  min-height: 56px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
}
.library-panel__quick-actions .article-action-btn .btn-label {
  display: inline !important;
}
/* Tooltip hover-label is redundant when the label is already visible */
.library-panel__quick-actions .article-action-btn::after { display: none; }

/* ── Reader panel: footer links ──
   Bottom band with secondary actions (Cite, History, Comments,
   Feedback). Rendered as compact text-style buttons in a row. */
.library-panel__footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-rule);
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}
.library-panel__footer-links > div {
  flex: 1 1 45%;
  display: flex;
}
.library-panel__footer-links > div:empty { display: none; }
.library-panel__footer-links .article-action-btn {
  position: static;
  width: 100%;
  height: auto;
  min-height: 36px;
  padding: var(--space-2);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  border: none;
  background: none;
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: left;
}
.library-panel__footer-links .article-action-btn:hover,
.library-panel__footer-links .article-action-btn:focus-visible {
  color: var(--color-ink);
  background: var(--color-bg-alt);
}
.library-panel__footer-links .article-action-btn .btn-label {
  display: inline !important;
}
.library-panel__footer-links .article-action-btn::after { display: none; }

/* Subheads inside tab sections (e.g. "Share" / "Download" in the Share tab) */
.reader-panel-subhead {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-3);
}

.library-panel__tab {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.library-panel__tab[aria-selected="true"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.library-panel__tab:hover:not([aria-selected="true"]) {
  color: var(--color-ink-muted);
}

.library-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
}

.library-panel__section {
  display: none;
}

.library-panel__section[aria-hidden="false"] {
  display: block;
}

.library-panel__empty {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  font-style: italic;
  text-align: center;
  padding: var(--space-8) 0;
}

/* TOC items */
.library-toc-item {
  display: block;
  padding: var(--space-2) 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
  transition: color var(--transition-fast);
}

.library-toc-item:hover,
.library-toc-item[aria-current="page"] {
  color: var(--color-link);
}

.library-toc-item__number {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-right: var(--space-2);
}

/* Bookmark items */
.library-bookmark-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.library-bookmark-item {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast);
}

.library-bookmark-item:hover {
  border-color: var(--color-link);
}

.library-bookmark-item__chapter {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink-faint);
}

.library-bookmark-item__pos {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.library-bookmark-item__delete {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  cursor: pointer;
  padding: 0;
  margin-top: var(--space-1);
}

.library-bookmark-item__delete:hover {
  color: var(--color-accent);
}

/* Annotation items */
.library-annotation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.library-annotation-item {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.library-annotation-item__quote {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
}

.library-annotation-item__note {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.library-annotation-item__actions {
  display: flex;
  gap: var(--space-4);
}

.library-annotation-item__action {
  background: none;
  border: none;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.library-annotation-item__action:hover {
  color: var(--color-ink);
}


/* ── 5. Annotation Toolbar ──────────────────────────────────
   Persistent bottom command bar on reading pages. Three groups:
   left = selection-based actions (highlight/note/bookmark/share),
   middle = music controls (populated by music-player.js when
   playback is active), right = Reader panel toggle. */
.annotation-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: #1a1a1a;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  padding: var(--space-2) var(--space-4);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
  z-index: var(--z-overlay);
  min-height: 52px;
}

.annotation-toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.annotation-toolbar__group--music {
  flex: 1;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.annotation-toolbar__group--music:empty { display: none; }

.annotation-toolbar__group--reader {
  margin-left: auto;
}

/* Highlight/Note/Share dim when no text is selected */
.annotation-toolbar__btn--needs-selection {
  opacity: 0.35;
  pointer-events: none;
}

.annotation-toolbar__btn--needs-selection.is-active {
  opacity: 1;
  pointer-events: auto;
}

.annotation-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.annotation-toolbar__btn:hover,
.annotation-toolbar__btn:focus-visible {
  background: rgba(255,255,255,0.15);
  outline: none;
}

.annotation-toolbar__btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.18);
}

.annotation-toolbar__btn svg {
  display: block;
  pointer-events: none;
}

/* Legacy divider — still rendered in some layouts; flatten it. */
.annotation-toolbar__divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ── Inline highlight marks ── */
.library-highlight {
  background: rgba(250, 204, 21, 0.3);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.library-highlight:hover {
  background: rgba(250, 204, 21, 0.45);
}

[data-theme="dark"] .library-highlight {
  background: rgba(250, 204, 21, 0.15);
  color: #f5f0e0;
}

[data-theme="dark"] .library-highlight:hover {
  background: rgba(250, 204, 21, 0.25);
}

/* Highlight color variants — light theme */
.library-highlight--pink { background: rgba(219, 39, 119, 0.18); }
.library-highlight--pink:hover { background: rgba(219, 39, 119, 0.3); }
.library-highlight--blue { background: rgba(37, 99, 235, 0.15); }
.library-highlight--blue:hover { background: rgba(37, 99, 235, 0.28); }
.library-highlight--green { background: rgba(22, 163, 74, 0.18); }
.library-highlight--green:hover { background: rgba(22, 163, 74, 0.3); }
.library-highlight--orange { background: rgba(234, 88, 12, 0.18); }
.library-highlight--orange:hover { background: rgba(234, 88, 12, 0.3); }
.library-highlight--purple { background: rgba(124, 58, 237, 0.15); }
.library-highlight--purple:hover { background: rgba(124, 58, 237, 0.28); }

/* Dark theme */
[data-theme="dark"] .library-highlight--pink { background: rgba(244, 114, 182, 0.2); color: #fce7f3; }
[data-theme="dark"] .library-highlight--blue { background: rgba(96, 165, 250, 0.2); color: #dbeafe; }
[data-theme="dark"] .library-highlight--green { background: rgba(74, 222, 128, 0.2); color: #dcfce7; }
[data-theme="dark"] .library-highlight--orange { background: rgba(251, 146, 60, 0.2); color: #fed7aa; }
[data-theme="dark"] .library-highlight--purple { background: rgba(167, 139, 250, 0.2); color: #ede9fe; }

/* Sepia theme */
[data-rs-bg="sepia"] .library-highlight { background: rgba(180, 140, 20, 0.25); }
[data-rs-bg="sepia"] .library-highlight--pink { background: rgba(190, 50, 100, 0.2); }
[data-rs-bg="sepia"] .library-highlight--blue { background: rgba(50, 100, 180, 0.18); }
[data-rs-bg="sepia"] .library-highlight--green { background: rgba(40, 140, 70, 0.2); }
[data-rs-bg="sepia"] .library-highlight--orange { background: rgba(200, 90, 20, 0.22); }
[data-rs-bg="sepia"] .library-highlight--purple { background: rgba(120, 60, 200, 0.18); }
[data-gs-bg="sepia"] .library-highlight { background: rgba(180, 140, 20, 0.25); }
[data-gs-bg="sepia"] .library-highlight--pink { background: rgba(190, 50, 100, 0.2); }
[data-gs-bg="sepia"] .library-highlight--blue { background: rgba(50, 100, 180, 0.18); }
[data-gs-bg="sepia"] .library-highlight--green { background: rgba(40, 140, 70, 0.2); }
[data-gs-bg="sepia"] .library-highlight--orange { background: rgba(200, 90, 20, 0.22); }
[data-gs-bg="sepia"] .library-highlight--purple { background: rgba(120, 60, 200, 0.18); }

/* Cream theme */
[data-rs-bg="cream"] .library-highlight { background: rgba(200, 160, 20, 0.22); }
[data-rs-bg="cream"] .library-highlight--pink { background: rgba(200, 50, 110, 0.16); }
[data-rs-bg="cream"] .library-highlight--blue { background: rgba(50, 100, 190, 0.14); }
[data-rs-bg="cream"] .library-highlight--green { background: rgba(30, 140, 60, 0.16); }
[data-rs-bg="cream"] .library-highlight--orange { background: rgba(210, 90, 20, 0.18); }
[data-rs-bg="cream"] .library-highlight--purple { background: rgba(120, 50, 210, 0.14); }
[data-gs-bg="cream"] .library-highlight { background: rgba(200, 160, 20, 0.22); }
[data-gs-bg="cream"] .library-highlight--pink { background: rgba(200, 50, 110, 0.16); }
[data-gs-bg="cream"] .library-highlight--blue { background: rgba(50, 100, 190, 0.14); }
[data-gs-bg="cream"] .library-highlight--green { background: rgba(30, 140, 60, 0.16); }
[data-gs-bg="cream"] .library-highlight--orange { background: rgba(210, 90, 20, 0.18); }
[data-gs-bg="cream"] .library-highlight--purple { background: rgba(120, 50, 210, 0.14); }

/* Highlights with notes — dotted underline to indicate attached note */
.library-highlight--note {
  border-bottom: 2px dotted rgba(200, 160, 0, 0.6);
}
.library-highlight--pink.library-highlight--note { border-bottom-color: rgba(219, 39, 119, 0.5); }
.library-highlight--blue.library-highlight--note { border-bottom-color: rgba(37, 99, 235, 0.5); }
.library-highlight--green.library-highlight--note { border-bottom-color: rgba(22, 163, 74, 0.5); }
.library-highlight--orange.library-highlight--note { border-bottom-color: rgba(234, 88, 12, 0.5); }
.library-highlight--purple.library-highlight--note { border-bottom-color: rgba(124, 58, 237, 0.5); }

/* Article-level dark background */
[data-rs-bg="dark"] .library-highlight { background: rgba(250, 204, 21, 0.15); color: #f5f0e0; }
[data-rs-bg="dark"] .library-highlight--pink { background: rgba(244, 114, 182, 0.2); color: #fce7f3; }
[data-rs-bg="dark"] .library-highlight--blue { background: rgba(96, 165, 250, 0.2); color: #dbeafe; }
[data-rs-bg="dark"] .library-highlight--green { background: rgba(74, 222, 128, 0.2); color: #dcfce7; }
[data-rs-bg="dark"] .library-highlight--orange { background: rgba(251, 146, 60, 0.2); color: #fed7aa; }
[data-rs-bg="dark"] .library-highlight--purple { background: rgba(167, 139, 250, 0.2); color: #ede9fe; }

[data-theme="dark"] .library-highlight--note {
  border-bottom-color: rgba(250, 204, 21, 0.5);
}
[data-theme="dark"] .library-highlight--pink.library-highlight--note { border-bottom-color: rgba(244, 114, 182, 0.5); }
[data-theme="dark"] .library-highlight--blue.library-highlight--note { border-bottom-color: rgba(96, 165, 250, 0.5); }
[data-theme="dark"] .library-highlight--green.library-highlight--note { border-bottom-color: rgba(74, 222, 128, 0.5); }
[data-theme="dark"] .library-highlight--orange.library-highlight--note { border-bottom-color: rgba(251, 146, 60, 0.5); }
[data-theme="dark"] .library-highlight--purple.library-highlight--note { border-bottom-color: rgba(167, 139, 250, 0.5); }

/* Note editor modal */
.ann-note-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.ann-note-modal {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  width: min(480px, 100%);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ann-note-modal__header {
  padding: var(--space-3) var(--space-4) var(--space-2);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.ann-note-toolbar {
  display: flex;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-rule);
}

.ann-note-toolbar button {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  background: none;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  color: var(--color-ink-muted);
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1.4;
}

.ann-note-toolbar button:hover {
  background: var(--color-bg-inset);
  color: var(--color-ink);
}

.ann-note-editable {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg-alt);
  border: none;
  padding: var(--space-4);
  min-height: 120px;
  max-height: 40vh;
  overflow-y: auto;
  outline: none;
}

.ann-note-editable:empty::before {
  content: 'Write your note...';
  color: var(--color-ink-faint);
  pointer-events: none;
}

.ann-note-editable blockquote {
  border-left: 2px solid var(--color-rule);
  padding-left: var(--space-2);
  margin: var(--space-1) 0;
  color: var(--color-ink-muted);
}

.ann-note-editable a {
  color: var(--color-link);
  text-decoration: underline;
}

.ann-note-modal__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-rule);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.ann-note-btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
  color: var(--color-ink);
}

.ann-note-btn--save {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

.ann-note-btn:hover { opacity: 0.85; }

/* Rendered markdown in notes */
.library-annotation-item__note {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-muted);
  margin: var(--space-1) 0;
}

.library-annotation-item__note strong { font-weight: 700; color: var(--color-ink); }
.library-annotation-item__note em { font-style: italic; }
.library-annotation-item__note code {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-bg-inset);
  padding: 1px 4px;
  border-radius: 3px;
}
.library-annotation-item__note pre {
  background: var(--color-bg-inset);
  padding: var(--space-2);
  border-radius: 4px;
  overflow-x: auto;
  margin: var(--space-1) 0;
}
.library-annotation-item__note pre code { background: none; padding: 0; }
.library-annotation-item__note blockquote {
  border-left: 2px solid var(--color-rule);
  padding-left: var(--space-2);
  color: var(--color-ink-faint);
  margin: var(--space-1) 0;
}
.library-annotation-item__note ul {
  padding-left: var(--space-4);
  margin: var(--space-1) 0;
}
.library-annotation-item__note a {
  color: var(--color-link);
  text-decoration: underline;
}

/* Highlight color picker popup */
.hl-color-picker {
  position: absolute;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 300;
}

.hl-color-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.hl-color-btn:hover {
  transform: scale(1.2);
}

.hl-color-btn.is-active {
  border-color: var(--color-ink);
}

/* Panel overlay — disabled (panel is non-blocking sidebar) */
.library-panel-overlay {
  display: none !important;
}

/* Bookmark toggle button in header */
.library-bookmark-btn {
  background: none;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.library-bookmark-btn:hover,
.library-bookmark-btn[aria-pressed="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─────────────────────────────────────────────
   Discovery pages (subjects, authors)
   ───────────────────────────────────────────── */

.library-discovery {
  padding: var(--space-12) 0 var(--space-16);
}

.library-discovery__header {
  margin-bottom: var(--space-10);
}

.library-discovery__back {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  margin-bottom: var(--space-4);
}

.library-discovery__back:hover {
  color: var(--color-accent);
}

.library-discovery__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.library-discovery__deck {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: 0;
}

.library-discovery__count {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-6);
}

/* Tag cloud */
.library-tag-cloud {
  margin-bottom: var(--space-12);
}

.library-tag-cloud__heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}

.library-tag-cloud__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.library-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.library-tag:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-faint, var(--color-surface));
  color: var(--color-accent);
}

.library-tag__count {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  background: var(--color-rule);
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
  min-width: 1.4em;
  text-align: center;
}

/* Subject list table */
.library-subject-list {
  margin-top: var(--space-12);
}

.library-subject-list__heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}

.library-table__count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
  width: 4rem;
}

/* Author list */
.library-author-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.library-author-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}

.library-author-list__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
}

.library-author-list__link:hover .library-author-list__name {
  color: var(--color-accent);
}

.library-author-list__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.library-author-list__dates {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.library-author-list__meta {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

/* Author page */
.library-author-page {
  padding: var(--space-12) 0 var(--space-16);
}

.library-author-hero {
  margin-bottom: var(--space-8);
}

.library-author-hero__name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--color-ink);
  margin: var(--space-4) 0 var(--space-2);
}

.library-author-hero__meta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-4);
}

.library-author-hero__significance {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  max-width: 70ch;
  margin: 0;
}

.library-author-bio {
  max-width: 68ch;
  margin: 0 0 var(--space-12);
  color: var(--color-ink);
  line-height: var(--leading-prose);
}

.library-author-works {
  margin-top: var(--space-12);
}

.library-author-works__heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-6);
}

.library-author-map-note {
  margin-top: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.library-author-map-note a {
  color: var(--color-accent);
}

/* ─────────────────────────────────────────────
   Mobile reading experience
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Reading body: ensure minimum readable font size */
  .library-body {
    font-size: max(1.05rem, 16px);
  }

  /* Sticky header: hide chapter title to save horizontal space.
     The work title (back link) and Panel button are sufficient. */
  .library-reading-header__title {
    display: none;
  }

  /* Compact reading header on mobile */
  .library-reading-header {
    padding-inline: var(--space-4);
    gap: var(--space-3);
  }


  .annotation-toolbar__btn {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
  }
}

/* ─────────────────────────────────────────────
   Within-chapter floating TOC
   Populated by progress.js from h2/h3 in .article-body.
   Only rendered where there is whitespace outside the 720px
   reading column — roughly ≥1200px viewport.
   ───────────────────────────────────────────── */

.library-toc-float {
  /* Hidden everywhere; only shown once progress.js removes [hidden] on wide screens */
  display: none;
}

@media (min-width: 1200px) {
  /* :not([hidden]) prevents the CSS display:block from overriding the
     browser's [hidden] attribute, which would show an empty widget */
  .library-toc-float:not([hidden]) {
    display: block;
    position: fixed;
    top: 4rem;                          /* clear fixed reading header */
    right: 1.5rem;
    width: 190px;
    max-height: calc(100vh - 14rem);    /* bottom gap keeps TOC clear of back-to-top button */
    overflow-y: auto;
    scrollbar-width: thin;
    background: var(--color-bg);
    border: 1px solid var(--color-rule);
    border-radius: 4px;
    padding: var(--space-3) var(--space-4);
    z-index: 50;                        /* below panel overlay (~200) */
  }
}

.library-toc-float__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-3);
}

/* Hide floating TOC in focus mode (masthead gone, reading header
   occupies full top — but panel still provides chapter nav) */
html.is-library-reading[data-focus-mode="on"] .library-toc-float:not([hidden]) {
  display: none;
}

/* ─────────────────────────────────────────────
   Focus mode
   ───────────────────────────────────────────── */

/* On library reading pages, hide the site masthead so the reading
   header becomes the sole navigation chrome. All reader tools and
   the reading header itself remain fully visible. */
html.is-library-reading[data-focus-mode="on"] .masthead {
  display: none;
}

/* ─────────────────────────────────────────────
   Print styles
   ───────────────────────────────────────────── */

@media print {
  .library-reading-header,
  .library-panel,
  .library-panel-toggle,
  .library-chapter-nav,
  .annotation-toolbar,
  .library-reading-progress,
  .reading-settings-wrap {
    display: none !important;
  }

  .library-body {
    font-size: 12pt;
    line-height: 1.6;
    max-width: none;
  }

  .library-body-wrapper {
    padding: 0;
    max-width: none;
  }

  .library-body a {
    text-decoration: none;
    color: #000;
  }

  .library-body a[href]::after {
    content: none;
  }
}

/* ============================================================
   BROADSHEET — Calendar
   Editorial-style events calendar
   ============================================================ */

/* ── Calendar Page Layout ──────────────────────────────────── */
.cal-page { padding-top: var(--space-10); padding-bottom: var(--space-20); }

.cal-page__header {
  padding-bottom: var(--space-6);
  border-bottom: 3px double var(--color-ink);
  margin-bottom: var(--space-6);
}

.cal-page__title {
  font-family: var(--font-masthead);
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-2);
}

.cal-page__dek {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--color-ink-muted);
  margin: 0;
}

.cal-page__submit {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  margin: var(--space-4) 0 0;
}

.cal-page__submit a { color: var(--color-link); font-weight: 600; }

/* ── Controls Toolbar ──────────────────────────────────────── */
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-4);
  font-family: var(--font-ui);
  flex-wrap: wrap;
}

.cal-toolbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.cal-toolbar__title {
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

.cal-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Segmented Button Groups ───────────────────────────────── */
.cal-seg {
  display: flex;
  gap: 0;
}

.cal-seg__btn {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-right-width: 0;
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.cal-seg__btn:last-child { border-right-width: 1px; }

.cal-seg__btn:hover { background: var(--color-bg-alt); color: var(--color-ink); }

.cal-seg__btn--active {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

.cal-seg__btn--active + .cal-seg__btn { border-left-color: var(--color-ink); }

/* Nav buttons */
.cal-nav-btn {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  height: 36px;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.cal-nav-btn--arrow {
  width: 36px;
  padding: 0;
  font-size: var(--text-md);
  font-weight: 400;
}

.cal-nav-btn:hover {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* Filter selects */
.cal-toolbar__select {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  padding-right: var(--space-6);
  cursor: pointer;
  min-height: 36px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234A4845' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* ── Month Grid ────────────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--color-rule);
  border-top: 1px solid var(--color-rule);
}

.cal-grid__header {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
  text-align: center;
  padding: var(--space-2);
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-bg-alt);
}

.cal-grid__cell {
  min-height: 48px;
  padding: 4px;
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  cursor: default;
  position: relative;
  transition: background var(--transition-fast);
}

.cal-grid__cell--has-events { cursor: pointer; }
.cal-grid__cell--has-events:hover { background: var(--color-bg-alt); }
.cal-grid__cell--outside { opacity: 0.35; }

.cal-grid__num {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  line-height: 1;
}

.cal-grid__num--today {
  font-weight: 700;
  color: var(--color-ink);
  position: relative;
  display: inline-block;
}

.cal-grid__num--today::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
}

/* Event dots */
.cal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
  align-items: center;
}

.cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-dot--conference   { background: var(--color-opinion); }
.cal-dot--convention   { background: var(--color-accent); }
.cal-dot--meetup       { background: var(--color-science); }
.cal-dot--online       { background: var(--color-arts-culture); }
.cal-dot--observance   { background: var(--color-history); }

.cal-dots__more {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--color-ink-faint);
  line-height: 1;
}

/* ── Month Cell Tooltip ────────────────────────────────────── */
.cal-tip {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: -1px;
  z-index: var(--z-nav);
  min-width: 200px;
  max-width: 280px;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
}

.cal-grid__cell:hover .cal-tip,
.cal-tip--pinned { display: block; }

/* Right-edge cells: flip tooltip to left */
.cal-grid__cell:nth-child(7n+7) .cal-tip,
.cal-grid__cell:nth-child(7n+6) .cal-tip {
  left: auto;
  right: -1px;
}

.cal-tip__item {
  display: block;
  padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--color-accent);
  margin-bottom: 2px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink);
  line-height: var(--leading-snug);
  cursor: pointer;
  text-decoration: none;
}

.cal-tip__item:hover { background: var(--color-bg-alt); }

.cal-tip__item--conference   { border-color: var(--color-opinion); }
.cal-tip__item--convention   { border-color: var(--color-accent); }
.cal-tip__item--meetup       { border-color: var(--color-science); }
.cal-tip__item--online       { border-color: var(--color-arts-culture); }
.cal-tip__item--observance   { border-color: var(--color-history); }

/* ── Week View ─────────────────────────────────────────────── */
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--color-rule);
  border-top: 1px solid var(--color-rule);
}

.cal-week__col {
  min-height: 100px;
  padding: var(--space-2);
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.cal-week__day-hd {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
  text-align: center;
  margin-bottom: var(--space-1);
}

.cal-week__day-num {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--color-ink);
  text-align: center;
  margin-bottom: var(--space-2);
}

.cal-week__chip {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  padding: 2px 4px;
  margin-bottom: 2px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-alt);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-ink);
  transition: background var(--transition-fast);
}

.cal-week__chip:hover { background: var(--color-bg-inset); }

.cal-week__chip--conference   { border-color: var(--color-opinion); }
.cal-week__chip--convention   { border-color: var(--color-accent); }
.cal-week__chip--meetup       { border-color: var(--color-science); }
.cal-week__chip--online       { border-color: var(--color-arts-culture); }
.cal-week__chip--observance   { border-color: var(--color-history); }

/* ── Day & List Views ──────────────────────────────────────── */
.cal-list { max-width: var(--max-width-prose); }
.cal-layout .cal-list { max-width: none; }

.cal-day-hd {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-ink);
}

.cal-empty {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  font-style: italic;
  padding: var(--space-6) 0;
}

/* ── Event Cards ───────────────────────────────────────────── */
.cal-card {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  margin-bottom: var(--space-6);
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--color-rule);
}

.cal-card:last-child { border-bottom: none; }

.cal-card:hover { background: var(--color-bg-alt); }

.cal-card--conference   { border-left-color: var(--color-opinion); }
.cal-card--convention   { border-left-color: var(--color-accent); }
.cal-card--meetup       { border-left-color: var(--color-science); }
.cal-card--online       { border-left-color: var(--color-arts-culture); }
.cal-card--observance   { border-left-color: var(--color-history); }

.cal-card__kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cal-card__type {
  font-weight: 700;
}

.cal-card__type--conference   { color: var(--color-opinion); }
.cal-card__type--convention   { color: var(--color-accent); }
.cal-card__type--meetup       { color: var(--color-science); }
.cal-card__type--online       { color: var(--color-arts-culture); }
.cal-card__type--observance   { color: var(--color-history); }

.cal-card__headline {
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-snug);
}

.cal-card__dek {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
}

.cal-card__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Three-Column Layout ───────────────────────────────────── */
.cal-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 220px;
  gap: var(--space-6);
  align-items: start;
}

.cal-layout__main { min-width: 0; }

.cal-sidebar {
  position: sticky;
  top: var(--space-6);
}

.cal-sidebar__section {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}

.cal-sidebar__section:last-child { border-bottom: none; }

.cal-sidebar__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-3);
}

.cal-sidebar__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cal-sidebar__item:last-child { border-bottom: none; }
.cal-sidebar__item:hover { background: var(--color-bg-alt); }

.cal-sidebar__name {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  line-height: var(--leading-normal);
}

.cal-sidebar__date {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-top: 2px;
}

.cal-sidebar__stat {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.cal-sidebar__type-row {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.cal-sidebar__org {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1) 0;
}

.cal-sidebar__empty {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  font-style: italic;
  margin: 0;
}

/* ── Organizations Directory (bottom) ──────────────────────── */
.cal-orgs {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.cal-orgs__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-4);
}

.cal-orgs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-1) var(--space-6);
}

.cal-orgs__item {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1) 0;
}

@media (max-width: 1100px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr) 200px; }
  .cal-sidebar--left { display: none; }
}

@media (max-width: 900px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-sidebar { position: static; }
  .cal-sidebar--right { display: none; }
}

/* ── Detail Panel + Backdrop ───────────────────────────────── */
.cal-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.cal-detail-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

.cal-detail {
  position: fixed;
  top: 0;
  right: 0;
  width: min(400px, 85vw);
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg);
  border-left: 1px solid var(--color-rule);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-6);
}

.cal-detail--open { transform: translateX(0); }

.cal-detail__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: var(--text-lg);
  color: var(--color-ink-faint);
  cursor: pointer;
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-detail__close:hover { color: var(--color-ink); }

.cal-detail__type {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2);
}

.cal-detail__type--conference   { color: var(--color-opinion); }
.cal-detail__type--convention   { color: var(--color-accent); }
.cal-detail__type--meetup       { color: var(--color-science); }
.cal-detail__type--online       { color: var(--color-arts-culture); }
.cal-detail__type--observance   { color: var(--color-history); }

.cal-detail__name {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-snug);
}

.cal-detail__row {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-1);
}

.cal-detail__row strong { color: var(--color-ink); }

.cal-detail__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: var(--space-4) 0;
  line-height: var(--leading-normal);
}

.cal-detail__link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
}

.cal-detail__link:hover { text-decoration: underline; }

.cal-detail__recurrence {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  font-style: italic;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

/* ── Legend ─────────────────────────────────────────────────── */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
}

.cal-legend__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.cal-legend__dot--conference   { background: var(--color-opinion); }
.cal-legend__dot--convention   { background: var(--color-accent); }
.cal-legend__dot--meetup       { background: var(--color-science); }
.cal-legend__dot--online       { background: var(--color-arts-culture); }
.cal-legend__dot--observance   { background: var(--color-history); }

/* ── Focus & Keyboard Styles ──────────────────────────────── */
.cal-grid__cell:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: -2px;
  z-index: 1;
}

/* ── Responsive: ≤768px ────────────────────────────────────── */
@media (max-width: 768px) {
  .cal-week { display: none; }

  .cal-toolbar { gap: var(--space-1); }

  .cal-toolbar__title { font-size: var(--text-sm); }

  .cal-toolbar__right { width: 100%; justify-content: space-between; overflow-x: auto; flex-wrap: wrap; }

  .cal-seg__btn { min-height: 44px; flex: 1; justify-content: center; }

  .cal-nav-btn { min-height: 44px; width: 44px; }

  .cal-grid__cell { min-height: 44px; padding: 2px; }

  .cal-grid__num { font-size: 10px; }

  .cal-dot { width: 5px; height: 5px; }

  .cal-dots { gap: 2px; margin-top: 2px; }

  .cal-tip { display: none !important; }

  .cal-card { padding: var(--space-4) var(--space-4); }

  .cal-detail {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 80vh;
    border-left: none;
    border-top: 3px solid var(--color-ink);
    transform: translateY(100%);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  }

  .cal-detail--open { transform: translateY(0); }
}

@media (max-width: 480px) {
  .cal-page__title { font-size: var(--text-2xl); }
  .cal-toolbar__select { font-size: var(--text-xs); }
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cal-detail,
  .cal-detail-backdrop { transition: none; }
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  .cal-toolbar,
  .cal-legend,
  .cal-detail,
  .cal-detail-backdrop,
  .cal-grid,
  .cal-week { display: none !important; }

  .cal-card {
    border: 1px solid #ccc;
    border-left: 3px solid #000;
    page-break-inside: avoid;
  }
}

/* ============================================================
   BROADSHEET — Main Stylesheet
   Import order matters: tokens → base → layout → components → article
   ============================================================ */

/* ── Print Styles ───────────────────────────────────────────── */
.print-header,
.print-footer,
.print-footnotes,
.print-citations,
.edition-print-articles { display: none; }

@media print {
  .masthead,
  .masthead__actions,
  .site-nav,
  .site-footer,
  .reading-progress,
  .article-reading-header,
  .article-layout__aside,
  .article-header__actions,
  .reading-floats,
  .pullquote-share,
  .reading-filter,
  .related-articles,
  .subscribe-block,
  .subscribe-block--footer,
  .suggest-correction,
  .article-footer__tags,
  .author-bio,
  .comments-section,
  .tts-controls,
  .cite-modal,
  .cite-overlay,
  .library-panel,
  .library-panel-overlay,
  .article-notes-overlay,
  .annotation-toolbar,
  .gtranslate_wrapper,
  .gt_float_switcher,
  .fn-tooltip,
  .music-bar,
  .reading-settings-wrap,
  .global-settings-panel,
  .global-settings-overlay { display: none !important; }

  @page { margin: 0.5in; }
  body { orphans: 2; widows: 2; }

  /* Show link URLs in print (skip internal/anchor links) */
  .article-body a[href^="http"]::after,
  .library-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #666;
    word-break: break-all;
  }

  /* Footnote superscript — render as plain text, no button affordance */
  .fn-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #000;
    cursor: default;
  }

  /* Print-only footnotes section */
  .print-footnotes {
    display: block;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 2px solid #000;
    page-break-inside: avoid;
  }

  .print-footnotes__heading {
    font-size: 10pt;
    font-weight: 700;
    font-family: serif;
    margin: 0 0 0.5rem;
  }

  .print-footnotes__list {
    margin: 0;
    padding-left: 1.5rem;
    font-size: 8.5pt;
    font-family: serif;
    line-height: 1.5;
    color: #333;
  }

  .print-footnotes__list li { margin-bottom: 0.25rem; }

  /* Print-only citations section */
  .print-citations {
    display: block;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #999;
    page-break-inside: avoid;
  }

  .print-citations__heading {
    font-size: 10pt;
    font-weight: 700;
    font-family: serif;
    margin: 0 0 0.75rem;
  }

  .print-citations__item { margin-bottom: 0.75rem; }

  .print-citations__format {
    font-family: sans-serif;
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555;
    margin: 0 0 0.2rem;
  }

  .print-citations__text {
    font-family: serif;
    font-size: 8.5pt;
    line-height: 1.5;
    color: #000;
    margin: 0;
  }

  .series-nav { border: 1px solid #000; }

  /* ── Edition pages ── */
  .edition-back,
  .edition-nav,
  .edition-rule,
  #edition-print-btn { display: none !important; }

  .edition-header {
    text-align: left;
    padding: 0 0 1rem;
    border-bottom: 3px solid #000;
    margin-bottom: 1.5rem;
  }

  .edition-header__number {
    font-family: sans-serif;
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #666;
    margin: 0 0 0.25rem;
  }

  .edition-header__date {
    font-family: serif;
    font-size: 9pt;
    color: #555;
    margin: 0 0 0.4rem;
  }

  .edition-header__title {
    font-family: serif;
    font-size: 22pt;
    font-weight: 700;
    margin: 0 0 0.2rem;
  }

  .edition-header__count {
    font-family: sans-serif;
    font-size: 8pt;
    color: #777;
    margin: 0;
  }

  .article-card {
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    page-break-inside: avoid;
  }

  .article-card__image { display: none; }

  .article-card__eyebrow {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.2rem;
  }

  .section-badge {
    background: none;
    color: #555;
    font-family: sans-serif;
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid #999;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
  }

  .dateline { font-family: serif; font-size: 8pt; color: #777; }

  .article-card__headline {
    display: block;
    font-family: serif;
    font-size: 13pt;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
    margin-bottom: 0.2rem;
  }

  .article-card__dek {
    font-family: serif;
    font-size: 9pt;
    color: #333;
    line-height: 1.5;
    margin-bottom: 0.2rem;
  }

  .article-card__byline {
    font-family: sans-serif;
    font-size: 7.5pt;
    color: #666;
  }

  .article-list { list-style: none; padding: 0; margin: 0; }
  .article-list__item { display: block; }

  /* Full article text — screen: hidden; print: visible */
  .edition-print-articles { display: block; }

  .edition-print-article {
    page-break-before: always;
    padding-top: 1.5rem;
  }

  .edition-print-article__eyebrow {
    font-family: sans-serif;
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #666;
    margin: 0 0 0.4rem;
  }

  .edition-print-article__title {
    font-family: serif;
    font-size: 20pt;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    color: #000;
  }

  .edition-print-article__dek {
    font-family: serif;
    font-size: 11pt;
    color: #333;
    font-style: italic;
    line-height: 1.4;
    margin: 0 0 0.4rem;
  }

  .edition-print-article__byline {
    font-family: sans-serif;
    font-size: 8pt;
    color: #555;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #ccc;
  }

  .edition-print-article__body {
    font-family: serif;
    font-size: 10pt;
    line-height: 1.65;
    color: #000;
  }

  .edition-print-article__body h2,
  .edition-print-article__body h3 {
    font-family: serif;
    font-size: 12pt;
    margin: 1rem 0 0.4rem;
  }

  .edition-print-article__body p { margin: 0 0 0.6rem; }

  .edition-print-article__body img { display: none; }

  .edition-print-article__body a { color: #000; text-decoration: none; }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a { text-decoration: none; color: #000; }

  .article-header__headline { font-size: 24pt; }

  .print-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid #000;
    padding-bottom: 0.4rem;
    margin-bottom: 1.5rem;
    font-family: serif;
    font-size: 9pt;
    color: #444;
  }

  .print-header__title {
    font-weight: 700;
    font-size: 11pt;
    color: #000;
  }

  .print-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid #000;
    padding-top: 0.4rem;
    margin-top: 2rem;
    font-family: serif;
    font-size: 8pt;
    color: #666;
  }
}