: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;
  --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;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.82), transparent 34rem),
    repeating-linear-gradient(0deg, rgba(83, 64, 32, 0.018) 0, rgba(83, 64, 32, 0.018) 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: white;
  background: var(--rust);
  transform: translateY(-150%);
}

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

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  color: #f8f1df;
  background: rgba(32, 27, 20, 0.97);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
}

.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: #f8f1df;
  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: #e3c46b;
  background: rgba(255, 255, 255, 0.08);
}

.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: #d7b85b;
  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: #d7b85b;
  font-size: 0.68rem;
}

.nav-meta {
  color: rgba(248, 241, 223, 0.82);
  font-size: 0.54rem;
  letter-spacing: 0.045em;
}

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

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

.title-page {
  min-height: calc(100vh - 3.55rem);
  padding: clamp(3rem, 6vw, 5rem) 1.5rem 3.5rem;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  background: #f5f0e6;
}

.library-edition {
  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;
}

.kicker,
.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;
}

.title-page h1 {
  margin: 0;
  color: #1e1913;
  font-family: "Bodoni MT", Didot, "Times New Roman", serif;
  font-size: clamp(3.25rem, 6vw, 6.75rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.82;
  text-transform: uppercase;
}

.title-page .kicker {
  margin: clamp(1.45rem, 2.8vw, 2.2rem) 0 0;
  color: #9a5c25;
  font-family: "Bodoni MT", Didot, "Times New Roman", serif;
  font-size: clamp(0.74rem, 1.2vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  line-height: 1.3;
}

.title-rule {
  width: 8rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.75rem, 5vw, 3.75rem);
  border-top: 1px solid #b8a678;
}

.chinese-title {
  margin: 0.4rem 0 1.4rem;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: 0.16em;
}

.cover-figure {
  width: min(47rem, 76vw);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(73, 58, 35, 0.25);
  box-shadow: none;
}

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

.translator {
  margin: 0;
}

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

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

.scroll-cue {
  margin-top: 1.3rem;
  font-family: var(--display);
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.title-credits {
  margin-top: 1.65rem;
}

.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;
}

.document-section > h2,
.book-divider 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;
}

.front-matter {
  position: relative;
  width: min(100% - 2rem, 52rem);
  max-width: 52rem;
  padding-right: var(--source-rail);
  box-sizing: border-box;
}

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

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

.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-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;
}

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

.introduction .note-box p {
  text-indent: 0;
}

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

.update-notice {
  margin-block: 2rem;
}

.update-notice p {
  margin-bottom: 0.45rem;
}

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

.front-matter > p:not(.permissions, .copyright, .resource-link, .signature, .revision-note, .page-ref),
.introduction > p,
.glossary-entry > p {
  text-align: justify;
  text-wrap: pretty;
}

.page-ref {
  color: var(--ink-light);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.source-reference {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}

.web-location {
  color: var(--rust);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- markers off ------------------------------------------------------------
   Zeroing --source-rail on the body collapses the reserved rail in every
   reading container at once, including the narrow-width overrides, so the
   reading column takes the space back. The rail is a layout reservation; with
   no markers to hold, it reserves nothing. */
body.markers-hidden {
  --source-rail: 0rem;
}

/* The narrow-width chapter rule subtracts from the rail; with no rail that
   would become negative padding. */
body.markers-hidden .chapter {
  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;
}

/* Markers off. Kept below the rail rule so the contract checker's
   `.source-page-origin { … }` lookup still reads the rail's own declarations. */
body.markers-hidden .source-page-origin {
  display: none;
}

.title-page {
  position: relative;
}

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

.introduction {
  position: relative;
  width: min(100% - 2rem, 52rem);
  padding-right: var(--source-rail);
  box-sizing: border-box;
}

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

.contents {
  font-size: 1rem;
}

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

.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, rgba(83, 64, 32, 0.018) 0, rgba(83, 64, 32, 0.018) 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;
}

/* --- the provenance toggle -------------------------------------------------
   A boxed switch above all Contents content, because it governs the whole
   document rather than any one destination. Default on where the panel is
   docked, off where it becomes an overlay; the script owns that decision.
   Deliberately NOT inside a screen-only media query: printing follows whatever
   the reader chose. */
/* One recessed panel holding every display switch, set into the cream panel
   by a darker parchment fill and a soft drop shadow in the page's own shadow
   colour. It reads as a control surface rather than as a Contents entry. */
.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 rgba(255, 255, 255, 0.28);
}

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

/* The master governs the switches beneath it, so it is separated from them
   rather than from the markers switch above. */
.display-toggle-master {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--note-border);
}

/* Children are indented under their parent and set slightly quieter, so the
   hierarchy is legible without reading the labels. */
.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;
}

/* A child switch while the master is off. It stays readable so the reader can
   see what it is set to; it simply cannot be operated. */
.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;
}

/* --- what the note switches hide -------------------------------------------
   Also deliberately outside any screen-only media query: the printed copy
   follows whatever the reader chose, exactly as the markers switch does.
   Commentary is one control because book and appendix commentary are both the
   source's parallel commentary, not notes about it. */
body.notes-hidden .note-box {
  display: none;
}

body.notes-commentary-hidden .note-box.author-commentary,
body.notes-commentary-hidden .note-box.appendix-commentary {
  display: none;
}

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

body.notes-notice-hidden .note-box.revision-note,
body.notes-notice-hidden .note-box.source-credit {
  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: rgba(132, 39, 39, 0.07);
}

.contents-backdrop {
  position: fixed;
  z-index: 35;
  inset: var(--header-height) 0 0;
  display: none;
  padding: 0;
  background: rgba(22, 18, 14, 0.42);
}

.major-links {
  margin: 1.25rem 0 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.major-links a {
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 0.78rem;
  text-decoration: none;
  text-align: center;
}

.major-links span {
  display: block;
  margin-top: 0.35rem;
  color: var(--ink-light);
  font-family: var(--body);
  font-size: 0.82rem;
}

.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-end h3 {
  margin: 0;
}

.toc-end 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;
}

@media (min-width: 901px) {
  .contents-open main,
  .contents-open .site-footer {
    margin-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;
  }
}

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

.introduction {
  padding-bottom: 4rem;
}

.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;
}

.introduction p {
  margin: 0.8rem 0;
  text-indent: 2em;
}

.introduction .source-quotation {
  margin: 1.5rem 2.5rem;
  color: var(--ink-mid);
  font-size: 0.96em;
  text-indent: 0;
}

.introduction .source-footnote {
  margin-block: 1.5rem;
  text-indent: 0;
}

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

.chapters-wrap {
  padding-bottom: 6rem;
}

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

.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;
}

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

.chapter {
  position: relative;
  width: min(100% - 2rem, 52rem);
  padding: 3.5rem var(--source-rail) 3.5rem 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--rule);
}

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

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

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

.chapter-header .source-reference {
  justify-self: start;
}

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

.verse-line {
  min-height: 1.45em;
  padding-left: 4.6rem;
  text-indent: -2.25rem;
  overflow-wrap: anywhere;
}

.verse-line.part {
  margin-top: 0.9rem;
  padding-left: 0;
  color: var(--ink);
  text-indent: 0;
}

.verse-line.base {
  padding-left: 2.4rem;
  text-indent: 0;
}

.verse-line.indent-1 {
  padding-left: 4.6rem;
  text-indent: 0;
}

.verse-line.indent-2 {
  padding-left: 6.8rem;
  text-indent: 0;
}

.verse-line strong {
  font-weight: 600;
}

.glossary {
  position: relative;
  width: min(100% - 2rem, 52rem);
  padding-right: var(--source-rail);
  box-sizing: border-box;
  border-top: 1px solid var(--rule);
}

.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 .source-reference {
  flex: 0 0 auto;
}

.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 h3 [lang="zh-Hant"] {
  white-space: nowrap;
}

.glossary-entry .term-meaning {
  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: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--ink-mid);
}

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

.glossary-figure figcaption {
  margin-top: 0.3rem;
  color: var(--ink-light);
  font-size: 0.75rem;
  text-align: center;
}

/* Tables -------------------------------------------------------------------
   A source table is always wrapped: <figure class="source-table"> holding an
   optional <figcaption> and a <div class="table-scroll"> around the <table>.
   The scroll container is what keeps a wide table from forcing the whole page
   to scroll sideways on a narrow screen. */

.source-table {
  margin: 1.6rem 0;
}

.source-table figcaption {
  margin-bottom: 0.45rem;
  color: var(--ink-light);
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.source-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: left;
}

.source-table caption {
  padding-bottom: 0.4rem;
  color: var(--ink-light);
  font-size: 0.78rem;
  text-align: left;
}

.source-table th,
.source-table td {
  padding: 0.42rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-indent: 0;
}

.source-table thead th {
  border-bottom: 2px solid var(--note-border);
  color: var(--rust);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.source-table tbody tr:last-child th,
.source-table tbody tr:last-child td {
  border-bottom: 0;
}

.source-table tbody tr:nth-child(even) {
  background: var(--parchment-mid);
}

/* Row-header tables — first cell of each row identifies the row. */
.source-table tbody th[scope="row"] {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.source-note {
  margin-bottom: 5rem;
  padding: 2.5rem;
  background: var(--note-bg);
  border: 1px solid var(--rule);
  box-shadow: 0 0.8rem 2rem var(--shadow);
}

.source-note h2 {
  font-size: 1.35rem;
  text-align: left;
}

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

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

.site-footer a {
  color: #e3c46b;
}

:focus-visible {
  outline: 3px solid #d19135;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 8rem;
  }

  .source-table table {
    font-size: 0.8rem;
  }

  .source-table th,
  .source-table td {
    padding: 0.34rem 0.5rem;
  }

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

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

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

  .title-page {
    min-height: calc(100vh - 6.5rem);
  }

  .chapter-links {
    grid-template-columns: repeat(4, 1fr);
  }

  .introduction p {
    text-align: left;
    text-indent: 1.25em;
  }

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

  .introduction .source-quotation,
  .introduction .idea-item {
    margin-inline: 0.5rem;
  }

  .verse-line,
  .verse-line.base,
  .verse-line.indent-1,
  .verse-line.indent-2 {
    padding-left: 1rem;
    text-indent: 0;
  }

  .verse-line.indent-1 {
    padding-left: 2rem;
  }

  .verse-line.indent-2 {
    padding-left: 3rem;
  }

  .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;
  }

  .source-note {
    padding: 1.5rem;
  }
}

@media print {
  /* Tables must not scroll on paper — release the scroll container, keep the
     header row on every page a long table spans, and avoid splitting rows. */
  .table-scroll {
    overflow-x: visible;
  }

  .source-table {
    break-inside: auto;
  }

  .source-table thead {
    display: table-header-group;
  }

  .source-table tr {
    break-inside: avoid;
  }

  .source-table tbody tr:nth-child(even) {
    background: transparent;
  }

  .source-table th,
  .source-table td {
    border-bottom: 1px solid #999;
  }

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

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

  .site-header,
  .skip-link,
  .scroll-cue,
  .contents-backdrop,
  .contents-toggle,
  .contents-close,
  /* The switches themselves are meaningless on paper; the printed copy still
     follows whatever the reader chose, through the body classes they set. */
  .display-controls,
  .page-ref,
  .web-location,
  .source-note,
  .site-footer {
    display: none !important;
  }

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

  .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;
  }

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

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

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

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

  .glossary-entry {
    break-inside: avoid;
  }

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

  .update-notice,
  .glossary-nav {
    background: #fff;
  }
}

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

/* Analects-specific reading structures. */
.title-page h1 {
  font-size: clamp(3.25rem, 6vw, 6.75rem);
  line-height: 0.82;
}

.resource-list {
  width: min(100%, 42rem);
  margin: 1.2rem auto;
}

.resource-list li {
  margin-block: 0.5rem;
}

.maps .source-figure {
  margin-bottom: 3.5rem;
}

.source-figure {
  margin: 1.75rem auto;
  text-align: center;
}

.source-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 72vh;
  margin-inline: auto;
  object-fit: contain;
}

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

.analect-entry {
  margin: 0 0 2.4rem;
  padding-top: 0.1rem;
}

.analect-entry > h3 {
  margin: 0 0 0.25rem;
  color: var(--rust);
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}

.analect-text p {
  margin: 0 0 0.75rem;
  text-align: left;
  text-wrap: pretty;
}

.author-commentary {
  margin: 0.9rem 0 1.75rem 1.7rem;
}

.author-commentary .note-ref {
  font-family: var(--body);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.appendix {
  position: relative;
  width: min(100% - 2rem, 52rem);
  padding-right: var(--source-rail);
  box-sizing: border-box;
  border-top: 1px solid var(--rule);
}

.appendix > p,
.manuscript-appendix > p {
  text-align: justify;
  text-wrap: pretty;
}

.appendix h3 {
  margin: 2.4rem 0 0.8rem;
  color: var(--rust);
  font-family: var(--display);
  font-size: 1.25rem;
}

.appendix h4 {
  margin: 2rem 0 0.75rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  text-align: center;
}

.appendix-introduction {
  margin-bottom: 2.5rem;
}

.disciple-list {
  display: grid;
  gap: 1.35rem;
}

.disciple-entry {
  padding: 1rem 1.1rem 1.05rem;
  background: rgba(255, 255, 255, 0.28);
  border-left: 3px solid var(--rule);
}

.disciple-entry h3 {
  margin: 0 0 0.55rem;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.disciple-entry p {
  margin: 0;
  text-align: left;
}

.appendix-date {
  margin: -0.9rem 0 2rem;
  color: var(--ink-light);
  font-family: var(--display);
  font-size: 0.85rem;
  text-align: center !important;
  text-indent: 0;
}

#appendix-3 > h3 {
  margin-top: 3.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 1.35rem;
}

.analysis-summary,
.analysis-passage {
  margin-left: 1.25rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--rule);
  text-align: left !important;
  text-indent: 0;
}

.analysis-passage {
  font-size: 0.96rem;
}

.analysis-bullets {
  margin: 1.1rem 0 1.6rem 1.2rem;
  padding-left: 1.2rem;
}

.analysis-bullets li {
  margin: 0.55rem 0;
}

.compact-analysis-table {
  max-width: 34rem;
  margin-inline: auto;
}

.appendix-footnotes {
  margin-top: 4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
}

.manuscript-figure {
  max-width: 24rem;
}

#appendix-4 > h3[id^="appendix-4-manuscript-"] {
  margin: 2.4rem 0 1.1rem;
  text-align: center;
}

#appendix-4 > .manuscript-title {
  margin: 0 0 1.8rem;
  text-align: center;
}

#appendix-4 > .manuscript-title ~ p {
  padding-left: 2rem;
}

#appendix-4 > p.manuscript-passage {
  text-indent: -2rem;
}

.graph-figure {
  float: none;
  width: 7rem;
  margin: 1rem auto 1.5rem;
}

.inline-glyph-group {
  display: inline-block;
  margin: 0 0.1em;
  padding: 0;
  vertical-align: middle;
  line-height: 1;
}

.inline-glyph {
  display: inline-block;
  width: auto;
  height: 3.42em;
  vertical-align: -1.02em;
}

.table-scroll {
  margin: 1.6rem 0;
  overflow-x: auto;
}

.source-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.source-table caption {
  margin-bottom: 0.55rem;
  color: var(--rust);
  font-family: var(--display);
  font-weight: 700;
  text-align: left;
}

.source-table th,
.source-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.source-table thead th {
  background: var(--note-bg);
}

@media (max-width: 700px) {
  .title-page {
    padding: 2.75rem 1rem 3rem;
  }

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

  .title-page .kicker {
    max-width: 23rem;
    letter-spacing: 0.24em;
  }

  .title-rule {
    width: 6rem;
    margin-block: 2.25rem 2.5rem;
  }

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

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

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

}