/* Daodejing — Arsinoe Library Edition (PIPE 3)
   Design system carried over from the Analects prototype (analects.css):
   same palette, type scale, panel chrome, and rail mechanism. The
   chapter-line indent ladder is the Daodejing's own preservation-edition
   mechanism (Basic HTML, PIPE 2), kept structurally unchanged and only
   re-themed to the prototype's type scale. */

:root {
  --parchment: #f6f1e7;
  --parchment-mid: #eee7d6;
  --parchment-dark: #ddd3bd;
  --ink: #211c15;
  --ink-mid: #44392d;
  --ink-light: #665746;
  --rust: #842727;
  --rust-light: #a13a32;
  --gold: #7b6326;
  --rule: #c5b48f;
  --note-bg: #eee5cf;
  --note-border: #c0a070;
  --shadow: rgba(30, 25, 18, 0.16);
  --source-rail: 3.25rem;
  --source-label: 2.75rem;
  --contents-panel-width: 16rem;
  --header-height: 3.55rem;
  --section-bar-height: 2.15rem;
  --body: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Noto Serif CJK TC", Georgia, serif;
  --display: "Palatino Linotype", "Book Antiqua", "Noto Serif CJK TC", Georgia, serif;
  /* One layer of the preservation edition's indent grid (carried over
     unchanged from Basic HTML, Rule A/B/C/D). Everything measured in em
     against the reading column's own font-size, so it scales with it. */
  --step: 1.5em;
  /* Formerly hard-coded outside the token set (21 values, Captain-ordered
     dark-mode audit, post-production edit 2026-09-03): each is used at
     least once below and now lives here so a theme switch can retarget
     it. Names describe role, not the light value, since dark mode gives
     each a different value. */
  --paper-highlight: rgba(255, 255, 255, 0.82);
  --paper-texture: rgba(83, 64, 32, 0.018);
  --on-accent: white;
  --header-text: #f8f1df;
  --header-bg: rgba(32, 27, 20, 0.97);
  --header-shadow: rgba(0, 0, 0, 0.2);
  --toggle-hover-color: #e3c46b;
  --toggle-hover-bg: rgba(255, 255, 255, 0.08);
  --nav-accent: #d7b85b;
  --nav-meta: rgba(248, 241, 223, 0.82);
  --title-bg: #f5f0e6;
  --title-ink: #1e1913;
  --cover-border: rgb(0, 0, 0);
  --panel-highlight: rgba(255, 255, 255, 0.28);
  --link-hover-bg-strong: rgba(132, 39, 39, 0.07);
  --backdrop-bg: rgba(22, 18, 14, 0.42);
  --panel-tint: rgba(255, 255, 255, 0.3);
  --figure-bg: rgba(255, 255, 255, 0.55);
  --footer-text: #eee3ca;
  --footer-bg: #241f18;
  --focus-ring: #d19135;
  color-scheme: light;
}

/* ---- Dark mode (Captain-ordered, post-production edit 2026-09-03)--------
   Two paths reach the same palette: the System path follows the OS via
   prefers-color-scheme, suppressed when the reader has explicitly chosen
   Off (:root[data-theme="light"]); the explicit On path is
   :root[data-theme="dark"] and always wins regardless of the OS setting.
   A parchment-and-ink scholarly edition in the dark reads as ink-on-
   dark-paper -- warm, not a generic inverted website -- so hue is kept
   close to the light values; only lightness/direction flips. Rust and
   gold are brightened (not merely lightened) to clear 4.5:1 against the
   dark paper while still reading as the same two accent colours. The
   site header and footer are already a near-black chrome in light mode
   (this edition's permanent "dark furniture"), so their own tokens are
   left unredefined here -- they already read correctly in both themes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --parchment: #1b1712;
    --parchment-mid: #241f18;
    --parchment-dark: #2c251c;
    --ink: #e8dfc9;
    --ink-mid: #c9bc9c;
    --ink-light: #a89877;
    --rust: #e0785f;
    --rust-light: #ef9478;
    --gold: #d4af5a;
    --rule: #4a4030;
    --note-bg: #2a2318;
    --note-border: #6b5636;
    --shadow: rgba(0, 0, 0, 0.5);
    --paper-highlight: rgba(255, 240, 210, 0.045);
    --paper-texture: rgba(0, 0, 0, 0.32);
    --header-shadow: rgba(0, 0, 0, 0.5);
    --toggle-hover-bg: rgba(255, 255, 255, 0.12);
    --panel-highlight: rgba(255, 255, 255, 0.06);
    --link-hover-bg-strong: rgba(224, 120, 95, 0.18);
    --backdrop-bg: rgba(0, 0, 0, 0.6);
    --title-bg: #17130f;
    --title-ink: #f2e9d6;
    --cover-border: rgba(232, 223, 201, 0.4);
    --panel-tint: rgba(255, 255, 255, 0.06);
    --figure-bg: rgba(0, 0, 0, 0.2);
    --on-accent: #1b1712;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --parchment: #1b1712;
  --parchment-mid: #241f18;
  --parchment-dark: #2c251c;
  --ink: #e8dfc9;
  --ink-mid: #c9bc9c;
  --ink-light: #a89877;
  --rust: #e0785f;
  --rust-light: #ef9478;
  --gold: #d4af5a;
  --rule: #4a4030;
  --note-bg: #2a2318;
  --note-border: #6b5636;
  --shadow: rgba(0, 0, 0, 0.5);
  --paper-highlight: rgba(255, 240, 210, 0.045);
  --paper-texture: rgba(0, 0, 0, 0.32);
  --header-shadow: rgba(0, 0, 0, 0.5);
  --toggle-hover-bg: rgba(255, 255, 255, 0.12);
  --panel-highlight: rgba(255, 255, 255, 0.06);
  --link-hover-bg-strong: rgba(224, 120, 95, 0.18);
  --backdrop-bg: rgba(0, 0, 0, 0.6);
  --title-bg: #17130f;
  --title-ink: #f2e9d6;
  --cover-border: rgba(232, 223, 201, 0.4);
  --panel-tint: rgba(255, 255, 255, 0.06);
  --figure-bg: rgba(0, 0, 0, 0.2);
  --on-accent: #1b1712;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Preserved artefacts: image files themselves are never touched. Dark
   mode only dims them slightly so a bright scan does not glare on a
   dark page. Daodejing has 6 in-page <img> elements (scanned figures on
   white grounds), all of which pick this up. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img {
    filter: brightness(0.85);
  }
}

:root[data-theme="dark"] img {
  filter: brightness(0.85);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--header-h-actual, var(--header-height)) + var(--section-bar-height) + 0.75rem);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 10%, var(--paper-highlight), transparent 34rem),
    repeating-linear-gradient(0deg, var(--paper-texture) 0, var(--paper-texture) 1px, transparent 1px, transparent 4px),
    var(--parchment);
  font-family: var(--body);
  font-size: clamp(1.06rem, 0.98rem + 0.24vw, 1.24rem);
  line-height: 1.58;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--rust);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--rust-light);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.65rem 1rem;
  color: var(--on-accent);
  background: var(--rust);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

/* ---- Site header / nav ---------------------------------------------------- */
.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  color: var(--header-text);
  background: var(--header-bg);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 0.25rem 1rem var(--header-shadow);
}

/* Floating section-title bar (post-production edit, 2026-09-03; ported from
   the Sunzi-war build's CAP-011): a second, slimmer sticky strip directly
   beneath .site-header, showing the current tracked section's title as the
   reader scrolls. Reserves its height at all times so the reading column
   never jumps when it fills in; only its own opacity/visibility toggle when
   a section is known. Hidden above the first tracked section (Note for
   readers) -- the title page and the offcanvas Contents panel are never
   tracked, so the bar stays hidden until the reader reaches real content. */
.section-bar {
  position: sticky;
  z-index: 25;
  /* the measured header height, set by script; the token is the fallback */
  top: var(--header-h-actual, var(--header-height));
  display: flex;
  align-items: center;
  min-height: var(--section-bar-height);
  padding: 0;
  color: var(--ink-light);
  background: var(--parchment-mid);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 0.15rem 0.4rem var(--shadow);
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms, padding-left 180ms ease;
}

/* Inner wrapper mirrors the reading column's own centering rule (shared
   with .document-section, .chapter, .book-divider below) so the title's
   left edge tracks the running text's left edge at every viewport and
   Contents-panel state, without hard-coding an offset. The bar's own
   background stays full-bleed; only this wrapper -- and the text inside
   it -- is inset. */
.section-bar-inner {
  width: min(100% - 2rem, 52rem);
  height: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.section-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 160ms ease, transform 160ms ease, padding-left 180ms ease;
}

.site-nav {
  width: min(100% - 2rem, 76rem);
  min-height: 3.55rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.nav-leading {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-nav a {
  color: inherit;
  text-decoration: none;
}

.contents-toggle,
.contents-close,
.contents-backdrop {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.contents-toggle {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--header-text);
  background: transparent;
  border-radius: 0.25rem;
  font-family: var(--body);
  font-size: 1.2rem;
  line-height: 1;
}

.contents-toggle:hover,
.contents-toggle[aria-expanded="true"] {
  color: var(--toggle-hover-color);
  background: var(--toggle-hover-bg);
}

.nav-brand {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.55rem;
  row-gap: 0.08rem;
  font-size: 0.86rem;
  line-height: 1.3;
}

.nav-title {
  white-space: nowrap;
}

.nav-title-chinese {
  margin-right: 0.55rem;
  color: var(--nav-accent);
  font-family: var(--body);
  font-size: 1.05rem;
}

.nav-meta-group {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  white-space: nowrap;
}

.nav-separator {
  color: var(--nav-accent);
  font-size: 0.68rem;
}

.nav-meta {
  color: var(--nav-meta);
  font-size: 0.54rem;
  letter-spacing: 0.045em;
}

.top-link {
  white-space: nowrap;
}

main {
  min-height: 100vh;
  transition: margin-left 180ms ease;
  overflow-x: clip;
}

/* ---- Title page ------------------------------------------------------------ */
/* Boundary 1 (title-page -> #reader-note), FO recovery ruling 2026-09-24
   (supersedes the 2026-09-24 same-day edit that measured gap-below to
   #reader-note's <h2> "Note for readers"): #reader-note's first VISIBLE
   CONTENT is p.copyright, not its heading -- the heading is not the first
   thing in the section, so the heading was never a valid proxy here. Gap
   below (line -> p.copyright's text top) is a small, content-driven
   ~117px/~71px value (#reader-note's own document-section padding-top plus
   normal text-block offset), not the ~546px/~644px the superseded edit
   used. Bottom padding restored to its pre-2026-09-24 baseline and then
   tuned by a small measured constant so gap-above matches that real
   gap-below. */
/* Captain order, 2026-09-28 (standing divider rule: every main-section
   divider in a document uses ONE gap, the Analects rhythm, measured to
   visible ink, equal above and below): padding-bottom 117.38px (flat, and
   70.98px at <=700px) -> calc(clamp(3.5rem, 8vw, 7rem) - 0.1px), the same
   clamp() Analects' .document-section uses (56px at 420, 61.44px at 768,
   102.4px at 1280, 112px at 1920); the -0.1px keeps the measured
   stamp-to-line gap (Range-rect ink) at 55.7 / 61.14 / 102.11 / 111.7,
   Analects' modal being 56.0 / 61.44 / 102.39 / 112.0. min-height loses
   20.8px (here and in the 720px block) -- exactly what the stamp's
   margin-top loses below -- so the stamp-to-next-section gap does not move
   when the window is taller than the title page. */
.title-page {
  position: relative;
  min-height: calc(100vh - 3.55rem - 20.8px);
  padding: clamp(3rem, 6vw, 5rem) 1.5rem calc(clamp(3.5rem, 8vw, 7rem) - 0.1px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  text-align: center;
  background: var(--title-bg);
}

.title-page > .source-page-origin {
  right: max(1rem, calc(50% - 26rem));
  margin: 0;
}

/* Captain order, 2026-09-28 ("All builds should match": the title-page
   `Arsinoe Library Edition, 2026` stamp follows Analects): margin-top
   1.65rem -> 0.35rem, Analects' own value (analects.css:415). Range-rect ink
   gap from the last text line above (p.edition) to the stamp: 28.17 / 28.06 /
   28.02 / 27.73 -> 7.38 / 7.27 / 7.22 / 6.94 at 420 / 768 / 1280 / 1920,
   identical to Analects. Colour was already var(--ink-light). The stamp is
   still the first child in the markup and displayed last via `order: 5`;
   only spacing changes. */
.library-edition {
  order: 5;
  margin: 0.35rem 0 0;
  color: var(--ink-light);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.title-ornament {
  order: -2;
  margin: 0 0 0.25rem;
  color: var(--rust);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.kicker {
  order: -3;
  margin: 1rem 0 0.25rem;
  color: var(--rust);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.title-page h1 {
  order: -1;
  margin: clamp(1.45rem, 2.8vw, 2.2rem) 0 0;
  color: var(--title-ink);
  font-family: "Bodoni MT", Didot, "Times New Roman", serif;
  font-size: clamp(3.25rem, 7vw, 6.75rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.86;
  text-transform: uppercase;
}

.title-page h1 em {
  font-style: normal;
}

.chinese-title {
  order: 0;
  margin: 0.5rem 0 0;
  color: var(--ink-light);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: 0.16em;
}

.author {
  order: 0;
  margin: 1.15rem 0 0;
}

.cover-figure {
  order: 1;
  width: min(47rem, 76vw);
  max-width: 70%;
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  padding: 0;
  background: transparent;
  border: 5px solid var(--cover-border);
  box-shadow: none;
}

.cover-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.1) contrast(1.03);
}

.translator {
  order: 3;
  margin: 1.65rem 0 0;
}

.edition {
  order: 4;
  margin: 0.25rem 0 0;
  color: var(--rust);
  font-weight: 700;
}

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

/* ---- Colophon (Captain order, 2026-10-10): after the title block, before
   #reader-note. Left-aligned rows; label/value pairs run in. The title page's
   own padding-bottom supplies the gap above, so padding-top is 0; padding-bottom
   is the same clamp() as the other main sections, so the line that opens
   #reader-note keeps its gap. Colours are this build's own tokens, so both
   themes follow. ---- */
/* `.document-section.colophon`, not `.colophon`: the shared `.document-section`
   rule below sets the padding and comes later, so a one-class selector lost
   and the colophon carried G above and below instead of 0 above. */
/* Captain order, 2026-10-10 ("Where is my section divider?"): the colophon
   opens with the build's standing divider, a 1px var(--rule) line. Above it the
   title page's own padding-bottom already gives G to the stamp (measured to
   ink, same as before the colophon existed); below it padding-top is
   G - 1.5px, which cancels the first row's own leading (1-2px) so the line ->
   first-row ink gap is G, as at #reader-note / #introduction-section. */
.document-section.colophon {
  border-top: 1px solid var(--rule);
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) - 1.5px);
  padding-bottom: calc(clamp(3.5rem, 8vw, 7rem) - 2.9px);
  padding-left: 1.25rem; /* On War's colophon side inset */
  font-size: 0.9rem;
}

/* Captain order, 2026-10-11: made uniform with On War's colophon
   (clausewitz-war.css `.colophon dl/dt/dd`): a two-column grid of direct
   dt/dd pairs, label in the body font (no small caps, no letter-spacing),
   weight 600, colour --ink-light; font-size 0.9rem is set on the section above. */
.colophon dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  text-align: left;
}

.colophon dt {
  color: var(--ink-light);
  font-weight: 600;
}

.colophon dd {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Same narrow-width stacking as On War (clausewitz-war.css, max-width 560px):
   label above value, no grid. */
@media (max-width: 560px) {
  .colophon dl {
    display: block;
  }
  .colophon dt {
    margin-top: 0.7rem;
  }
  .colophon dt:first-child {
    margin-top: 0;
  }
}

/* ---- Front matter / introduction / glossary shared shell ------------------ */
.document-section,
.chapter,
.book-divider {
  position: relative;
  width: min(100% - 2rem, 52rem);
  margin-inline: auto;
  box-sizing: border-box;
}

.document-section {
  padding: clamp(3.5rem, 8vw, 7rem) var(--source-rail) clamp(3.5rem, 8vw, 7rem) 0;
}

/* Main-section dividers (Captain's spacing-line-spacing ruling, 2026-09-24).
   These two sections carried no line at all; the other three main-section
   boundaries already draw one via a pre-existing rule, reconciled in place
   below (.glossary, .source-note, #classic-of-dao). */
#reader-note,
#introduction-section {
  border-top: 1px solid var(--rule);
}

/* Captain order, 2026-09-28 (standing divider rule: every main-section
   divider uses ONE gap, the Analects rhythm, equal above and below, measured
   to visible ink): the two sides of the two lines above. G below is
   clamp(3.5rem, 8vw, 7rem) -- 56 / 61.44 / 102.4 / 112px at 420 / 768 / 1280
   / 1920 -- the value .document-section already carried, which the
   sections' own first/last content had been offsetting by different amounts
   (Range-rect ink, before -> after, above/below the line):
   - #reader-note padding-top: G alone left p.copyright's 12.8px margin plus
     its leading inside the gap (69.8 / 76.23 / 116.19 / 126.8 below);
     now G - 14.9px (G - 13.8px at <=700px) -> below 55.98 / 61.33 / 101.3 /
     111.89 (Analects' modal below: 56.0 / 61.44 / 101.39 / 111.0). The
     leading rounds by 1px differently at 420 and 768-1920, hence the split.
   - #introduction-section padding-top: G + 3px, the same +3px Analects gives
     .document-section > h2 (its heading text starts ~3-4px above its line
     box) -> below 56.0 / 61.44 / 101.39 / 111.0, identical to Analects.
   - #introduction-section padding-bottom: G - 15.7px cancels the last
     paragraph's own 12.8px margin plus its leading (above was 71.58 / 76.91 /
     117.81 / 127.14) -> above 55.88 / 61.2 / 102.11 / 111.44 (Analects' modal
     above: 56.0 / 61.44 / 102.39 / 112.0).
   Every one of the five main-section boundaries now reads within 1px of
   Analects' modal per side and within 1px of itself; see the Work Log. */
#reader-note {
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) - 14.9px);
}

#introduction-section {
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) + 3px);
  padding-bottom: calc(clamp(3.5rem, 8vw, 7rem) - 15.7px);
}

/* Table of Contents section (Captain order, 2026-10-11), between #reader-note
   and #introduction-section. Main-section divider like #introduction-section:
   1px --rule line above, G + 3px padding-top (the h2's text starts ~3px above
   its line box), and a padding-bottom that leaves G of ink gap above the
   Introduction's line (the last link's own click-target padding zeroed below,
   as Analects does). G = clamp(3.5rem, 8vw, 7rem). */
#table-of-contents {
  border-top: 1px solid var(--rule);
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) + 3px);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}

#table-of-contents .contents-page-group:last-child .contents-page-list a:last-child {
  padding-bottom: 0;
}

/* In-body Table of Contents lists, ported from analects.css (.contents-page,
   .contents-page-part, .contents-page-list, .contents-page-list-2col): a boxed
   small-caps group label over a plain list of links. Same token names as
   Analects, all defined in this build's :root and its dark overrides. The
   2-col lists run column-major; `--rows` is set inline per list (19 for
   chapters 1-37, 22 for 38-81); single column at max-width 720px. */
.contents-page {
  display: grid;
  gap: 2rem;
  margin-top: 1.75rem;
}

.contents-page-part {
  margin: 0 0 0.75rem;
  text-align: left;
}

.contents-page-part a {
  display: block;
  padding: 0.6rem 0.85rem;
  color: var(--ink);
  background: var(--parchment-mid);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.contents-page-part a:hover {
  border-color: var(--gold);
  color: var(--rust);
}

.contents-page-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.15rem;
}

.contents-page-list a {
  display: block;
  padding: 0.32rem 0.4rem;
  color: var(--ink-mid);
  border-radius: 3px;
  font-size: 0.94rem;
  text-decoration: none;
  line-height: 1.4;
}

.contents-page-list a:hover {
  color: var(--rust);
  background: var(--link-hover-bg-strong);
}

.contents-page-list-2col {
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), auto);
  column-gap: 2rem;
}

@media (max-width: 720px) {
  .contents-page-list-2col {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

.document-section > h2 {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.2;
  text-align: center;
}

/* Captain order, 2026-09-28 (standing divider rule): padding-bottom
   G - 2.51rem -> G - 1.5rem - 0.3px. #reader-note's last child is the
   revision note-box, whose own 1.5rem margin-bottom sits below its visible
   (filled) edge, so G - 1.5rem puts that edge exactly G above the line
   (Analects' .introduction/.appendix boxes do the same with a zeroed margin);
   the old 2.51rem left it 86.23px above at 1280. After: above 55.69 / 61.13
   / 102.09 / 111.69 at 420 / 768 / 1280 / 1920. Only #reader-note carries
   .front-matter. */
.front-matter {
  padding-bottom: calc(clamp(3.5rem, 8vw, 7rem) - 1.5rem - 0.3px);
}

.copyright,
.permissions,
.resource-link,
.signature {
  text-align: center;
}

.permissions {
  color: var(--ink-mid);
}

.front-matter h2 {
  margin-top: 3rem;
  text-align: left;
}

.introduction h2 {
  margin-top: 0;
}

.introduction h3 {
  margin: 3rem 0 0.75rem;
  color: var(--rust);
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.front-matter p:not(.copyright, .permissions, .resource-link, .signature),
.introduction p,
.glossary-entry p {
  /* Captain order 2026-10-12: left-aligned at every width (was justify) --
     without hyphenation, justified lines before a long word stretched their
     word gaps. */
  text-align: left;
  text-wrap: pretty;
}

/* p carries pre-wrap so the 392 deliberate two-space sentence runs render
   literally instead of collapsing. This must survive every override below. */
p {
  margin: 0.8rem 0;
  white-space: pre-wrap;
}

.front-indent {
  text-indent: var(--step);
}

.idea-item {
  margin: 1.25rem 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  text-indent: 0 !important;
}

.page-continuation {
  margin-top: 0;
  text-indent: 0;
}

.note-box {
  margin: 1.5rem 0 1.5rem 1.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--note-bg);
  border-left: 3px solid var(--note-border);
  color: var(--ink-mid);
  font-size: 0.85rem;
  line-height: 1.58;
  text-align: left;
  text-indent: 0;
}

.note-box p {
  margin: 0 0 0.45rem;
  text-align: left;
  text-indent: 0;
  white-space: normal;
}

.note-box p:last-child {
  margin-bottom: 0;
}

.note-ref {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--rust);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.source-footnote-call {
  margin-left: 0.08em;
  font-size: 0.66em;
  line-height: 0;
  vertical-align: super;
}

.source-footnote-call a {
  color: var(--rust);
  text-decoration: none;
}

.source-footnote-call a:hover,
.source-footnote-call a:focus-visible {
  text-decoration: underline;
}

/* --- markers off ------------------------------------------------------------ */
body.markers-hidden {
  --source-rail: 0rem;
}

body.markers-hidden .chapter,
body.markers-hidden .document-section {
  padding-right: 0;
}

.source-page-origin {
  position: absolute;
  right: 0;
  float: none;
  width: var(--source-label);
  max-width: none;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-light);
  font-family: var(--display);
  font-size: 0.44rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: right;
  text-transform: uppercase;
  scroll-margin-top: 6rem;
}

.source-page-origin span {
  display: block;
  white-space: nowrap;
}

body.markers-hidden .source-page-origin {
  display: none;
}

/* ---- Contents panel --------------------------------------------------------- */
.contents-panel {
  position: fixed;
  z-index: 40;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  width: min(var(--contents-panel-width), calc(100vw - 3rem));
  padding: 1.25rem 1rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, var(--paper-texture) 0, var(--paper-texture) 1px, transparent 1px, transparent 4px),
    var(--parchment);
  border-right: 1px solid var(--rule);
  box-shadow: 0.5rem 0 1.4rem var(--shadow);
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 180ms ease, visibility 0s linear 180ms;
}

.eyebrow {
  margin: 1rem 0 0.25rem;
  color: var(--rust);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.display-controls {
  margin: 1rem 0 1.25rem;
  padding: 0.55rem 0.7rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--parchment-dark);
  box-shadow: 0 2px 6px var(--shadow), inset 0 1px 0 var(--panel-highlight);
}

.display-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.28rem 0;
}

.display-toggle-master {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--note-border);
}

.display-toggle-child {
  padding-left: 0.85rem;
}

.display-toggle-child .display-toggle-label {
  color: var(--ink-light);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 0.63rem;
}

.display-toggle-label {
  color: var(--ink-mid);
  font-family: var(--display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.display-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.15rem;
  border: 0;
  background: none;
  color: var(--ink-light);
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.display-toggle-switch:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.display-toggle-track {
  display: inline-block;
  position: relative;
  width: 1.85rem;
  height: 0.85rem;
  border: 1px solid var(--note-border);
  border-radius: 0.85rem;
  background: transparent;
  transition: background-color 0.15s ease;
}

.display-toggle-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.13rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--note-border);
  transform: translateY(-50%);
  transition: left 0.15s ease, background-color 0.15s ease;
}

.display-toggle-switch[aria-checked="true"] .display-toggle-track {
  background: var(--parchment);
}

.display-toggle-switch[aria-checked="true"] .display-toggle-track::after {
  left: calc(100% - 0.68rem);
  background: var(--rust);
}

.display-toggle-switch:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

.display-toggle-state {
  min-width: 1.6rem;
  text-align: left;
}

/* Dark Mode: a three-way segmented control, not a track-and-thumb switch
   (that shape only ever honestly shows two states). Kept in the same
   .display-toggle row/label rhythm as the note-box switches above so it
   reads as one family of controls, not a bolted-on extra.
   Post-production edit, 2026-09-03, Captain's explicit permission --
   ported from the Sunzi-war build's Dark Mode control. */
.theme-switch {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--note-border);
  border-radius: 0.85rem;
  overflow: hidden;
}

.theme-switch-option {
  border: 0;
  border-left: 1px solid var(--note-border);
  padding: 0.2rem 0.5rem;
  background: transparent;
  color: var(--ink-light);
  cursor: pointer;
  font: inherit;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.theme-switch-option:first-child {
  border-left: 0;
}

.theme-switch-option[aria-checked="true"] {
  color: var(--parchment);
  background: var(--rust);
}

.theme-switch-option:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

body.notes-hidden .note-box {
  display: none;
}

.note-box.is-hidden {
  display: none;
}

.contents-panel > .source-page-origin {
  top: 1.2rem;
  right: 3.7rem;
}

.contents-open .contents-panel {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.contents-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.contents-panel-head .eyebrow {
  margin-top: 0;
}

.contents-panel-head h2 {
  margin: 0;
  font-size: 1.65rem;
}

.contents-close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--ink-light);
  background: transparent;
  border-radius: 0.25rem;
  font-size: 1.6rem;
  line-height: 1;
}

.contents-close:hover {
  color: var(--rust);
  background: var(--link-hover-bg-strong);
}

.contents-backdrop {
  position: fixed;
  z-index: 35;
  inset: var(--header-height) 0 0;
  display: none;
  padding: 0;
  background: var(--backdrop-bg);
}

/* Boxed group-header treatment (post-production edit, 2026-09-03,
   Captain's explicit permission) -- adopted verbatim from Sunzi-war's
   .toc-group h3 a boxed Part links, since the Captain ruled the two
   builds' Contents panels must share one look. The PDF-page-range
   sublabel that used to sit under each box (stripped from the markup
   in build.py, step 6b) is gone, so .major-links span no longer has
   any markup to style. */
.major-links {
  margin: 1.25rem 0 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.major-links a {
  display: block;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  background: var(--parchment-mid);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}

.major-links a:hover {
  border-color: var(--gold);
  color: var(--rust);
}

.toc-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.toc-group h3 {
  color: var(--rust);
  font-family: var(--display);
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
}

/* .toc-title added by hand, 2026-09-12, Captain's order (all builds):
   "update the Title entry to the same style as the 'End of Document'
   entry in the Analects build -- no block, unique color." The panel's
   Title entry (build.py step 6h) is now a toc-group toc-title element
   shaped exactly like toc-end -- <h3><a>...</a></h3>, no box, no border --
   so its h3/a rules are added here to the SAME selectors as toc-end's,
   rather than as a separate copy, so the two stay pixel-identical by
   construction, in both themes, instead of by independently maintained
   values that could drift apart. Hand edit to this master stylesheet --
   build.py performs no css patching, only re-fingerprints this file
   (section 8). */
.toc-end h3,
.toc-title h3 {
  margin: 0;
}

.toc-end a,
.toc-title a {
  color: inherit;
  text-decoration: none;
}

.chapter-links {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  list-style: none;
}

.chapter-links a {
  display: block;
  padding: 0.35rem 0.25rem;
  color: var(--ink-mid);
  border-bottom: 1px dotted var(--rule);
  text-align: center;
  text-decoration: none;
}

.chapter-links span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (min-width: 901px) {
  .contents-open main,
  .contents-open .site-footer {
    margin-left: var(--contents-panel-width);
  }

  /* The bar is sticky, not shifted by main's margin-left, so it needs the
     same inset applied as padding-left -- keeping its background full-bleed
     with no seam at the panel edge (lesson carried over from Sunzi-war). */
  .contents-open .section-bar {
    padding-left: var(--contents-panel-width);
  }

  .site-footer {
    transition: margin-left 180ms ease;
  }
}

@media (max-width: 900px) {
  body.contents-open {
    overflow: hidden;
  }

  .contents-open .contents-backdrop {
    display: block;
  }
}

/* ---- Book divider ------------------------------------------------------------ */
.chapters-wrap {
  padding-bottom: 0;
}

.book-divider {
  margin-block: 2rem 3rem;
  padding: 3.5rem 1rem;
  border-block: 1px solid var(--rule);
  text-align: center;
}

/* Boundary 3 (introduction -> chapters) line-and-gap fix, Captain's ruling
   2026-09-24: scoped to id so #classic-of-de (then called an internal book
   split, out of scope) kept .book-divider's shared margin/padding untouched
   -- until the Captain's 2026-09-28 order, see #classic-of-de below.
   FO recovery ruling 2026-09-24: gap-below must be measured to this
   section's first VISIBLE CONTENT -- the "Chapters 1-37" label span, which
   sits before the "Classic of Dao" <h2> -- not the heading. padding-top
   retuned (flat px, matching the .glossary precedent below) to match
   #introduction-section's own measured gap-above under that convention. */
/* Captain order, 2026-09-28 (standing divider rule: one gap, the Analects
   rhythm, equal above and below): padding-top 106.82px (62.58px at <=700px,
   in the media block below, now removed) -> G + 15.1px - 1.39em, with G =
   clamp(3.5rem, 8vw, 7rem). The label's ink sits a font-dependent distance
   below the padding edge (8 / 9 / 10 / 12px at 420 / 768 / 1280 / 1920, it
   rides on the body font-size clamp(), 16.96 -> 19.84px), so a flat px value
   cannot hold the gap at every width; -1.39em tracks it (em is this box's
   own font-size, the body's). Ink gap below the line, before -> after:
   70.58 / 115.81 / 116.81 / 118.81 -> 55.52 / 61.17 / 101.42 / 111.52
   (Analects' modal below: 56.0 / 61.44 / 101.39 / 111.0); the gap above is
   #introduction-section's padding-bottom, set above. The lower line of this
   box (border-bottom, above "Chapter 1") is untouched; #classic-of-de has its
   own rule below. */
#classic-of-dao {
  margin-top: 0;
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) + 15.1px - 1.39em);
}

/* Captain order, 2026-09-28 (Classic of Dao -> Classic of De: "all main-
   section dividers use one gap, the Analects rhythm, equal above and below";
   the 2026-09-28 pass above left this boundary as it was, lined twice --
   chapter 37's border-bottom, then this box's own border-top 32px lower --
   on its own scoping, not a Captain ruling). Made ONE line, the way chapter
   81's was: chapter 37's border-bottom stays as the line (its own spacing
   is set at #chapter-37 below), and this box drops its border-top and its
   2rem margin-top, so its padding-top now sets the gap below that line --
   the same G + 15.1px - 1.39em as #classic-of-dao above (the "Chapters
   38-81" label is the first ink here too, at the same offset). Border-
   bottom (the lower line, above "Chapter 38") and margin-bottom are
   untouched. */
#classic-of-de {
  margin-top: 0;
  border-top: 0;
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) + 15.1px - 1.39em);
}

.book-divider span {
  color: var(--rust);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.book-divider h2 {
  margin: 0.55rem 0 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}

.book-divider p {
  margin: 0.35rem 0 0;
  color: var(--ink-light);
  font-style: italic;
}

/* ---- Chapter / indent ladder -------------------------------------------------
   Rule A-D below are carried over unchanged in mechanism from the Basic
   HTML preservation edition; only the type scale is adapted to the
   prototype. One constant, --step, drives the marker gutter, the verse
   rungs, the runover drop, the front-matter first-line indent, and the
   block quotation. Nothing sits between rungs. */
.chapter {
  padding: 3.5rem var(--source-rail) 3.5rem var(--step);
  border-bottom: 1px solid var(--rule);
}

/* Captain order, 2026-09-28 (standing divider rule: every main-section
   divider uses ONE gap, the Analects rhythm, equal above and below):
   chapter 81's border-bottom is the chapters -> glossary main-section
   divider, so this ONE chapter's own bottom spacing follows the main-section
   gap (G = clamp(3.5rem, 8vw, 7rem)). Chapters 1-80 and every chapter's own
   .chapter rule above are untouched (the Captain-kept small-chapter rhythm;
   their gaps and box heights are identical before and after, measured).
   The last paragraph's 1em margin is zeroed and padding-bottom set to
   G - 2.85px, so the ink gap above the line goes 75.67 / 76.11 / 77.28 /
   79.08 -> 55.34 / 60.64 / 101.52 / 111.8 at 420 / 768 / 1280 / 1920
   (Analects' modal above: 56.0 / 61.44 / 102.39 / 112.0). The gap below is
   .glossary's padding-top, set below. */
#chapter-81 .chapter-text > :last-child {
  margin-bottom: 0;
}

#chapter-81 {
  padding-bottom: calc(clamp(3.5rem, 8vw, 7rem) - 2.85px);
}

/* Captain order, 2026-09-28 (Classic of Dao -> Classic of De, see
   #classic-of-de above): chapter 37's border-bottom is now the ONE line of
   that main-section boundary, so this chapter's bottom spacing is handled
   exactly as chapter 81's is -- last paragraph's 1em margin zeroed, padding-
   bottom G - 2.85px, G = clamp(3.5rem, 8vw, 7rem). Chapters 1-36, 38-80 and
   every chapter's own .chapter rule stay untouched. */
#chapter-37 .chapter-text > :last-child {
  margin-bottom: 0;
}

#chapter-37 {
  padding-bottom: calc(clamp(3.5rem, 8vw, 7rem) - 2.85px);
}

.chapter-header {
  margin-bottom: 2rem;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.9rem;
}

.chapter-header .eyebrow {
  margin: 0;
  text-align: right;
}

.chapter-header h2 {
  min-width: 3rem;
  margin: 0;
  color: var(--rust);
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 1;
  text-align: center;
}

.chapter-text {
  width: min(100%, 42rem);
  margin-inline: auto;
  font-size: 1.03em;
  line-height: 1.5;
}

.chapter-paragraph {
  margin: 0 0 1em;
}

/* Rule A: a line's own first line sits on its step's rung; a wrapped
   runover line hangs one rung deeper. */
.chapter-line {
  display: block;
  position: relative;
  overflow-wrap: break-word;
  padding-left: var(--step);
  text-indent: calc(-1 * var(--step));
}

.chapter-line-step-1 { margin-left: calc(1 * var(--step)); }
.chapter-line-step-2 { margin-left: calc(2 * var(--step)); }
.chapter-line-step-3 { margin-left: calc(3 * var(--step)); }

.chapter-line-ragged {
  display: block;
}

/* Rule B: the a>/b>/c>/d>/e> markers are pinned to one far-left gutter, so
   prose on a marker line starts exactly on its rung and markers form a
   straight column, independent of which step their line is on. */
.chapter-line-marker > strong:first-child {
  position: absolute;
  top: 0;
  width: var(--step);
  text-indent: 0;
  white-space: nowrap;
  left: calc(-1 * var(--indent, 0px) - var(--step));
}

.chapter-line-marker.chapter-line-step-1 > strong:first-child { --indent: calc(1 * var(--step)); }
.chapter-line-marker.chapter-line-step-2 > strong:first-child { --indent: calc(2 * var(--step)); }
.chapter-line-marker.chapter-line-step-3 > strong:first-child { --indent: calc(3 * var(--step)); }

/* Lineated verse block (chapter 12) -- plain stacked lines, no rung math. */
.chapter-lineated {
  margin: 0 0 1em calc(1 * var(--step));
}

.chapter-lineated-line {
  display: block;
}

/* Rule D: the Chang Ju block quotation. No hanging indent; each rung is a
   flat margin-left so an inherited text-indent can never leak in. */
.source-quotation {
  margin: 1.5rem 0;
  color: var(--ink-mid);
  font-size: 0.96em;
  text-indent: 0;
  white-space: pre-wrap;
}

.quote-line {
  display: block;
  text-indent: 0;
}

.quote-line-rung-1 {
  margin-left: calc(1 * var(--step));
}

.quote-line-rung-2 {
  margin-left: calc(2 * var(--step));
}

/* ---- Glossary ---------------------------------------------------------------- */
/* Boundary 4 (chapters -> glossary), Captain's ruling 2026-09-24: this rule's
   own border-top used to double up with chapter-81's border-bottom (the
   .chapter rule draws all 81 small-chapter dividers and is left untouched
   per the Captain's allowance) -- reconciled here to one line by dropping
   this border and matching padding-top to the chapter grid's own rhythm
   instead of the main-section clamp. Boundary 5 (glossary -> source-note):
   padding-bottom trimmed so the last .glossary-entry's own 2.5rem padding
   plus this padding sums to the main-section clamp, matching source-note's
   own padding-top fix below. */
/* Captain order, 2026-09-28 (standing divider rule: one gap, the Analects
   rhythm, equal above and below). G = clamp(3.5rem, 8vw, 7rem).
   - padding-top 82.3px (79.7px at <=700px, in the media block below, now
     removed) -> G + 3px, the same +3px as #introduction-section (the h2's
     text starts ~3-4px above its line box): the chapters -> glossary line
     (chapter 81's border-bottom) now has 56.0 / 61.44 / 101.39 / 111.0 below
     it at 420 / 768 / 1280 / 1920, identical to Analects' modal below
     (was 76.69 / 79.3 / 78.3 / 78.3).
   - padding-bottom G - 2.5rem -> G - 2.5rem - 2.6px: the last paragraph's
     own half-leading (~2.6px) sat inside the gap above the About-box line
     (106.01 at 1280); with the line moved up 1.5px (see .source-note::before
     below) the gap above is now 55.67 / 61.0 / 101.91 / 111.23 and the gap
     below 55.5 / 60.94 / 101.9 / 111.5 (Analects' modal 56.0 / 61.44 /
     102.39 / 112.0 above and 56.0 / 61.44 / 101.39 / 111.0 below). */
.glossary {
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) + 3px);
  /* Captain order, 2026-10-10: 2.6px -> 3.1px. The line below is now #citations'
     own border-top (not the About box's `::before`, 1.5px higher), so the
     gap above it needed 0.5px less to stay within 1px of the gap below. */
  padding-bottom: calc(clamp(3.5rem, 8vw, 7rem) - 2.5rem - 3.1px);
}

/* Captain order, 2026-09-28 (divider fix, glossary -> source-note): the
   base `p { margin: 0.8rem 0 }` rule left the true last glossary entry's
   own trailing paragraph margin (12.8px) sitting inside `.glossary`'s
   padding-bottom, un-collapsed (`.glossary-entry` is `display: flow-root`,
   a new block-formatting context, so its child's margin cannot collapse
   through its own 2.5rem padding) -- measured, this pushed the gap above
   the new divider line to ~114.6px at 1280 against the line's own ~100.4px
   below, a ~14px mismatch. Analects has the identical shape of problem at
   its own glossary-like appendix and fixes it the same way, by selector:
   `#appendix-2 > .glossary-entry:last-child > p:last-child { margin-bottom:
   0 }` (analects.css ~615). Ported verbatim here, scoped to this glossary's
   own last entry's own last paragraph only -- no other glossary entry's
   internal spacing changes. */
#glossary > .glossary-entry:last-child > p:last-child {
  margin-bottom: 0;
}

.glossary > .eyebrow {
  text-align: center;
}

.glossary-nav {
  margin: 1.5rem 0 3rem;
  padding: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.1rem;
  background: var(--note-bg);
  border: 1px solid var(--rule);
}

.glossary-entry {
  display: flow-root;
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
}

.glossary-entry header {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.glossary-entry h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.25;
}

.glossary-entry .term-meaning,
.glossary-entry small {
  font-size: 0.72em;
}

.glossary-entry p {
  margin: 0.7rem 0;
}

.glossary-figure {
  float: right;
  width: 6rem;
  margin: 0.25rem 0 1rem 1.25rem;
  padding: 0.45rem;
  background: var(--figure-bg);
  border: 1px solid var(--ink-mid);
}

.glossary-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Colophon / footer -------------------------------------------------------- */
/* Captain order, 2026-09-28 ("you fucked up the text box top spacing inside
   the box. And there is no section line / space divider as requested for
   all sections. Again, reference Analects for correct example."): the
   previous fix (Captain's ruling 2026-09-24, "Boundary 5") grew this box's
   OWN padding-top to `clamp(3.5rem, 8vw, 7rem) + 0.93rem` to fake the gap,
   which left the card's inside padding asymmetric (~117px top vs 40px on
   the other three sides) and drew no actual line -- exactly the two faults
   named. Reverted to the Prototype's own technique verbatim
   (analects.css:1717-1750): padding flat `2.5rem` on all four sides again
   (equal inside padding, matching every other side of the card), the
   divider's spacing moved OUTSIDE the box via `margin-top` (same
   `clamp(3.5rem, 8vw, 7rem)` magnitude every other main-section boundary in
   this file already uses -- .glossary's own trimmed padding-bottom, just
   above, already supplies the matching gap on the other side, untouched),
   and the line itself drawn by the `::before` pseudo-element below, in that
   margin, rather than as padding inside the box. */
/* Captain order, 2026-10-10: the About box is the closing box of the Reference
   section (as in Analects), so the divider line and its clamp() gap above the
   box are gone (the `::before` line is removed below; #citations' padding-bottom
   is zeroed); the box sits 1.5rem under Reference's last line. */
.source-note {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 5rem;
  padding: 2.5rem;
  background: var(--note-bg);
  border: 1px solid var(--rule);
  box-shadow: 0 0.8rem 2rem var(--shadow);
}

/* `body.markers-hidden .document-section { padding-right: 0 }` (~line 649)
   also matches this box (it carries the `document-section` class too) and
   zeroes this side alone below the 901px breakpoint, where markers default
   off -- measured: 40/0/40/40px, not equal on all four sides. Analects'
   own equivalent rule only ever targeted `.chapter`, never
   `.document-section` (analects.css:899), so its own source-note never had
   this problem; restored here instead of touching the shared rule (which
   also governs every OTHER document-section in this build). Same
   specificity as that rule (two classes each) so source order alone
   decides -- this is later in the file and wins. */
body.markers-hidden .source-note {
  padding-right: 2.5rem;
}

/* The divider line, same technique and magnitude as analects.css:1736-1750:
   positioned in the margin-top gap just added above, flush with the box's
   own border-box edges (the containing block for an absolutely positioned
   child of a `position: relative` ancestor is that ancestor's PADDING box,
   1px inside its border -- `-1px` each side puts the line back on the
   border's own outer edge, matching every other divider line in this
   document). */
/* Captain order, 2026-09-28 (standing divider rule: one gap, the Analects
   rhythm, equal above and below): top -G -> -G - 1.5px. The padding-box
   origin plus the line's own 1px left the gap below the line at G - 2px
   (54.0 / 59.44 / 100.4 / 110.0) against a gap above of G + 3.6px
   (59.78 / 65.11 / 106.01 / 115.34) -- Analects' own About box reads the
   same 106.01 / 100.4 at 1280. The line now sits 1.5px higher (below
   55.5 / 60.94 / 101.9 / 111.5) and .glossary's padding-bottom is trimmed
   to match (above 55.67 / 61.0 / 101.91 / 111.23). */
/* (Captain order, 2026-10-10: the `.source-note::before` rule that drew this line
   was removed; the line above the glossary -> About-box boundary is now
   #citations' own border-top, below.) */

/* Reference section (Captain order, 2026-10-10). A main section like #reader-note:
   1px --rule line above (border-top), G + 3px padding-top (the h2's text starts
   ~3px above its line box). padding-bottom 0 so the About box sits only its own
   1.5rem margin below the last entry. Entries: hanging indent, left-aligned
   (justification would stretch the spaces inside the URL), as Analects'
   `.citations > p`. */
#citations {
  border-top: 1px solid var(--rule);
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) + 3px);
  padding-bottom: 0;
}

.citations > p {
  margin: 1.1rem 0;
  padding-left: 2em;
  text-indent: -2em;
  text-align: left;
  text-wrap: pretty;
}

.citations > p:last-child {
  margin-bottom: 0;
}

.source-note h2 {
  padding-top: 3px; /* Analects' .document-section > h2 value, so the heading sits as it does there */
  font-size: 1.35rem;
  text-align: left;
}

/* The card's last paragraph carried the base `p { margin: 0.8rem 0 }`
   bottom margin on top of the box's own 40px padding-bottom (measured: 55.4px
   ink gap, not 40px) -- neither Analects nor Clausewitz-war let a
   trailing-paragraph margin add to the box's own padding this way. Zeroed
   here, scoped to this one box only. */
.source-note > p:last-child {
  margin-bottom: 0;
}

.site-footer {
  padding: 2.5rem 1rem;
  color: var(--footer-text);
  background: var(--footer-bg);
  border-top: 3px solid var(--gold);
  font-size: 0.86rem;
  text-align: center;
}

.site-footer p {
  margin: 0.2rem;
}

.site-footer a {
  color: var(--toggle-hover-color);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: calc(8rem + var(--section-bar-height));
  }

  .site-nav {
    min-height: var(--header-height);
    gap: 0.75rem;
  }

  .nav-brand {
    padding-block: 0.38rem;
  }

  .nav-meta {
    font-size: 0.5rem;
  }

  /* Captain order, 2026-09-28: -20.8px, see .title-page above. */
  .title-page {
    min-height: calc(100vh - 6.5rem - 20.8px);
  }

  .front-matter p:not(.copyright, .permissions, .resource-link, .signature) {
    text-align: left;
  }

  .glossary-entry > p {
    text-align: left;
  }

  .glossary-entry header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .source-page-origin {
    scroll-margin-top: 9rem;
  }

  .note-box {
    margin-left: 0.5rem;
  }

  /* Same fix as the wide-viewport rule above (analects.css:1864-1870): the
     divider's own spacing now lives entirely in `margin-top`, outside the
     box, so this narrow-width reset goes back to a plain, uniform 1.5rem
     on all four sides. */
  .source-note {
    padding: 1.5rem;
  }

  /* Same `body.markers-hidden .document-section` counter as the wide rule
     above, re-declared at this breakpoint's own 1.5rem padding value. */
  body.markers-hidden .source-note {
    padding-right: 1.5rem;
  }

  .chapter {
    padding-right: calc(var(--source-rail) - 0.45rem);
  }
}

@media (max-width: 700px) {
  /* Captain order, 2026-09-28 (standing divider rule: one gap, the Analects
     rhythm): padding-bottom 70.98px -> calc(clamp(3.5rem, 8vw, 7rem) -
     0.1px), see .title-page above; #reader-note's padding-top takes G -
     13.8px here (G - 14.9px above 700px: the first line's leading rounds
     1px differently at these widths). The per-boundary 2026-09-24 values
     that stood here for #classic-of-dao (62.58px) and .glossary (79.7px) are
     removed -- their base rules now hold G-based formulas that already track
     the narrow widths (measured 55.52 / 56.0 below the two lines at 420). */
  .title-page {
    padding: 2.75rem 1rem calc(clamp(3.5rem, 8vw, 7rem) - 0.1px);
  }

  #reader-note {
    padding-top: calc(clamp(3.5rem, 8vw, 7rem) - 13.8px);
  }

  .title-page h1 {
    font-size: clamp(2.65rem, 14vw, 4.2rem);
    line-height: 0.9;
  }

  .cover-figure {
    width: min(100%, 30rem);
  }

  .note-box {
    margin-left: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Post-production edit, 2026-09-03: must be the universal *, *::before,
     *::after form -- a guard naming individual selectors gets out-specified
     by their own more specific transition rules (e.g. .contents-panel,
     .section-bar.is-visible) and silently does nothing, a lesson carried
     over from the Sunzi-war and Scarlet-citadel builds. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  main {
    overflow-x: visible;
  }

  @page {
    size: letter;
    margin: 0.65in 0.7in;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  .site-header,
  .skip-link,
  .contents-backdrop,
  .contents-toggle,
  .contents-close,
  .display-controls {
    display: none !important;
  }

  .source-note {
    background: none;
    border: 0;
    box-shadow: none;
  }

  .site-footer {
    margin-top: 0.3in;
    padding-top: 0.15in;
    border-top: 1px solid #999;
    text-align: center;
  }

  .source-page-origin {
    position: static;
    float: right;
    width: auto;
    margin: 0 0 0.04in 0.14in;
    text-align: right;
  }

  .source-page-origin span {
    display: inline;
  }

  .source-page-origin span + span::before {
    content: " ";
  }

  .title-page {
    min-height: 8.4in;
    padding: 0.5in 0;
    background: #fff;
  }

  .cover-figure {
    width: auto;
    max-width: 100%;
    max-height: 4in;
  }

  .cover-figure img {
    width: auto;
    max-width: 100%;
    max-height: 4in;
  }

  .document-section,
  .chapter,
  .book-divider {
    width: 100%;
  }

  .contents-panel {
    position: static;
    width: 100%;
    max-height: none;
    padding: 0.35in 0;
    overflow: visible;
    border-right: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    break-after: page;
  }

  .front-matter,
  .introduction,
  .glossary {
    break-before: page;
  }

  .chapter {
    padding-block: 0.35in;
    break-inside: auto;
  }

  .chapter-header {
    margin-bottom: 0.18in;
    break-after: avoid;
  }

  h2, h3, h4 {
    break-after: avoid;
  }

  .note-box, figure {
    break-inside: avoid;
  }

  .book-divider {
    break-before: page;
  }

  a {
    color: #000;
    text-decoration: none;
  }
}

/* ---- Typography base -------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: inherit;
  line-height: 1.25;
}

em { font-style: italic; }
strong { font-weight: 600; }

figure {
  margin: 1.5rem auto;
  text-align: center;
  max-width: 100%;
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

figcaption {
  margin-top: 0.4rem;
  color: var(--ink-light);
  font-size: 0.83rem;
  font-style: italic;
}