/* CALM DOOR — mobile cover: Begin button in first viewport */
@media (max-width: 768px) {
  .cover-sub {
    font-size: 12px;
    line-height: 1.6;
    max-height: 3.6em;
    overflow: hidden;
    opacity: .7;
  }

  .cover-foot {
    display: flex;
    flex-direction: column;
  }

  .cover-cta-row {
    order: -1;
    margin-top: 0;
    padding-bottom: 16px;
  }
}

/* TOOLBAR EXPLORE GROUP — two-tier mobile menu */
/* Desktop: explore wrapper is transparent, items inline */
.toolbar-explore {
  display: contents;
}

.toolbar-explore .toolbar-explore-toggle {
  display: none;
}

.toolbar-explore-items {
  display: contents;
}

@media (max-width: 768px) {
  .toolbar-explore {
    display: block;
    width: 100%;
  }

  .toolbar-explore-toggle {
    display: flex !important;
    width: 100%;
    border-top: 1px solid var(--rule);
    height: 44px;
    padding: 0 24px;
    justify-content: flex-start;
    gap: 10px;
    font-family: var(--mono);
    font-size: var(--size-xs);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-fade);
  }

  .toolbar-explore-items {
    display: none;
    flex-direction: column;
  }

  .toolbar-explore.is-open .toolbar-explore-items {
    display: flex;
  }

  .toolbar-explore.is-open .toolbar-explore-toggle span:first-child::before {
    content: '−';
  }

  .toolbar-explore.is-open .toolbar-explore-toggle span:first-child {
    font-size: 0;
  }

  .toolbar-explore.is-open .toolbar-explore-toggle span:first-child::before {
    font-size: var(--size-sm);
  }
}

/* MOBILE MENU OVERHAUL */
@media (max-width: 768px) {
  .topbar {
    overflow: visible;
    /* allow dropdown */
  }

  .topbar-tools {
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    background: rgba(244, 235, 213, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-direction: column;
    border-bottom: 1px solid var(--rule);
    display: none;
  }

  .topbar.is-mobile-open .topbar-tools {
    display: flex;
    align-items: stretch;
    width: 100vw;
  }

  .topbar.is-mobile-open .lang-toggle,
  .topbar.is-mobile-open .tool-btn {
    background: rgba(244, 235, 213, 0.98);
    border-left: none;
    border-top: 1px solid var(--rule);
    width: 100%;
    min-width: 100%;
    height: 52px;
    justify-content: flex-start;
    padding: 0 24px;
    font-size: var(--size-sm);
  }

  .topbar.is-mobile-open .tool-btn.is-on {
    background: var(--ink);
  }

  .lang-toggle {
    justify-content: flex-start;
    gap: 16px;
  }

  .topbar.is-mobile-open .tool-label,
  .topbar.is-mobile-open .tool-state {
    display: inline;
  }

  .topbar.is-mobile-open .tool-btn {
    gap: 10px;
  }

  .topbar.is-mobile-open .lang-toggle .lang-pill:not(.is-active) {
    display: block;
  }

  /* Mobile menu toggle button */
  .mobile-menu-btn {
    display: flex !important;
    border-left: 1px solid var(--rule);
    width: 52px;
    min-width: 52px;
    justify-content: center;
    border-top: none;
  }

  .topbar.is-mobile-open .mobile-menu-btn {
    width: 100%;
    min-width: 100%;
    justify-content: flex-start;
  }

  .topbar:not(.is-mobile-open) .mobile-menu-btn {
    display: flex !important;
  }

  /* On mobile, when closed, hide everything except brand and mobile toggle */
  .topbar:not(.is-mobile-open) .topbar-tools {
    display: flex;
    /* keep container visible */
    position: static;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    flex-direction: row;
    width: auto;
  }

  .topbar:not(.is-mobile-open) .tool-btn:not(.mobile-menu-btn):not(.yin-toggle),
  .topbar:not(.is-mobile-open) .lang-toggle {
    display: none;
  }

  .topbar:not(.is-mobile-open) .yin-toggle {
    border-left: 1px solid var(--rule);
  }
}

@media (min-width: 769px) {
  .mobile-menu-btn {
    display: none !important;
  }
}

/* =============================================================
   READING DAO DE JING WITH DR. NON
   Design: S,M,L,XL × DETAIL × Japanese wabi-sabi graphic design
   Each chapter unfolds as five layered "panels" — origin, direct,
   reading, code, note. Mobile = vertical scroll-snap, one panel at
   a time. Laptop = composed grid, lots of breathing room.
   ============================================================ */

:root {
  /* PALETTE — rice-paper cream, sumi black, cinnabar seal, jade,
     plus the wabi-sabi greys */
  --paper: #f4ebd5;
  --paper-deep: #ecdfc1;
  --paper-soft: #f8f1de;
  --paper-warm: #e3d3ad;
  --bone: #faf6e8;
  /* lightest, for code blocks */

  --ink: #15140f;
  --ink-soft: #2c2820;
  --ink-fade: #5e564a;
  --ink-mute: #6b5f4f;
  /* artifact cite caption tiers — alias tokens for WCAG-safe hierarchy */
  --ink-2: #2c2820;
  --ink-3: #5e564a;
  /* darkened for WCAG AA on paper */
  --ink-silver: #c0bcb1;
  /* wabi-sabi grey */

  --seal: #a83332;
  /* cinnabar */
  --seal-deep: #7a2222;
  --jade: #4a6b56;
  --jade-soft: #7a9982;
  --gold: #7a5f24;
  /* darkened for WCAG AA on paper (was #8f6f2e) */
  --deep-blue: #193b63;
  --signal-yellow: #d8ad35;
  --paper-map: #efe3c8;
  --rail-blue: #254f82;
  --code-jade: #2a4a3a;
  /* desaturated dark jade for code */

  --rule: rgba(21, 20, 15, .14);
  --rule-soft: rgba(21, 20, 15, .07);
  --rule-faint: rgba(21, 20, 15, .04);

  /* TYPE — the families */
  --serif: "Crimson Pro", "Cormorant Garamond", Georgia, serif;
  --display: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --reader: "Crimson Pro", "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --py: var(--mono);
  --cn-serif: "Noto Serif SC", "Source Han Serif SC", serif;
  --serif-cn: var(--cn-serif);
  --cn-brush: "Ma Shan Zheng", cursive;
  --cn-elegant: "ZCOOL XiaoWei", "Noto Serif SC", serif;
  --th: "IBM Plex Sans Thai", "Noto Sans Thai", "Prompt", sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: var(--serif);

  /* SIZES — S,M,L,XL,XXL scale */
  --size-tiny: 10px;
  --size-xs: 12px;
  --size-sm: 14px;
  --size-md: 18px;
  --size-lg: 24px;
  --size-xl: 36px;
  --size-xxl: 64px;
  --size-mega: 120px;
  --size-body: var(--size-sm);
  --text-micro: var(--size-xs);

  /* ── THE MoMA GRID (Axiom Design Core §XX · Editorial register) ──
     Layout + spacing law. New and edited rules use these; existing
     rules migrate when touched. Spacing has three currencies only:
     page-unit, baseline, cap. A raw px spacing value in a new rule
     is a spelling error. */
  --layout-max: 1184px;                              /* one container */
  --page-margin: 24px;                               /* side margins */
  --measure: 60ch;                                   /* prose cap = main column */
  --grid-uneven: minmax(0, 2fr) minmax(0, 1fr);      /* the 2/3 + 1/3 pair */

  --pu: 24px;                                        /* page-unit */
  --bl: 28px;                                        /* baseline ≈ one reading line */
  --cap: 0.75em;                                     /* cap unit, component-internal */

  /* image rhythm — asymmetric 1:3. Tight above binds the image to the
     paragraph that introduced it; open below releases what follows. */
  --img-above: var(--bl);
  --img-below: calc(3 * var(--bl));

  /* relative type steps — a section sets ONE size, children step */
  --step-down: 0.75;
  --step-up: 1.333;
  --step-major: 2;

  /* the sticky stack. Panels are scroll-snap targets; without a matching
     scroll-margin every panel lands with its opening line underneath the
     bars. Measured from the strip's stuck bottom edge, plus breathing:
     mobile the strip does not stick (topbar 52 only); ≥768 it sticks at
     top:60 and is 83 tall → 144. */
  --sticky-stack: 60px;
}

@media (min-width: 768px) {
  :root {
    --page-margin: 48px;
    --pu: 32px;
    --bl: 32px;
    --sticky-stack: 152px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  font-feature-settings: "liga", "kern", "onum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   GLOBAL LANGUAGE SCOPING
   ============================================================ */
body.lang-en [data-lang]:not([data-lang="en"]):not(.echo-copy),
body.lang-th [data-lang]:not([data-lang="th"]):not(.echo-copy),
body.lang-cn [data-lang]:not([data-lang="cn"]):not(.echo-copy) {
  display: none !important;
}

/* ============================================================
   LANGUAGE FONT UTILITIES — data-f replaces the ~300 per-element
   inline font styles. Same cascade weight as the inline styles
   they replace is not needed anywhere weaker rules win; verified
   by computed-style sweep on swap (2026-08-03).
   ============================================================ */
/* !important replicates the inline-style weight these replaced — later
   !important rules (e.g. .sp-sig mono) still win, exactly as before. */
[data-f="cn"] { font-family: var(--cn-serif) !important; }
[data-f="th"] { font-family: var(--th) !important; }
[data-f="cn-plain"] { font-family: var(--cn-serif) !important; text-transform: none; }
[data-f="th-plain"] { font-family: var(--th) !important; text-transform: none; }
[data-f="cn-plain-ls"] { font-family: var(--cn-serif) !important; text-transform: none; letter-spacing: .06em; }
[data-f="th-plain-ls"] { font-family: var(--th) !important; text-transform: none; letter-spacing: .04em; }
[data-f="cn-el"] { font-family: var(--cn-elegant) !important; }
[data-f="cn-norm"] { font-family: var(--cn-serif) !important; font-style: normal; }
[data-f="th-norm"] { font-family: var(--th) !important; font-style: normal; }
.pre-line { white-space: pre-line; }

/* ============================================================
   信 · THE LETTER — the part after the ending. Quiet paper, one
   mono kicker, prose at the measure. MoMA grid tokens; no new
   text sizes; the register is faithful, not beautiful.
   ============================================================ */
.letter {
  border-top: 1px solid var(--rule);
  background: var(--paper-soft);
}

.letter-inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: calc(3 * var(--pu)) var(--page-margin) calc(4 * var(--pu));
}

.letter-kicker {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  text-align: center;
  margin: 0 0 calc(2 * var(--bl));
}

.letter-kicker em {
  font-style: italic;
  text-transform: none;
  letter-spacing: .08em;
}

.letter-body {
  max-width: var(--measure);
  margin: 0 auto;
  font-family: var(--reader);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.7;
  color: var(--ink-soft);
}

.letter-body p {
  margin: 0 0 var(--bl);
}

.letter-body p:last-child {
  margin-bottom: 0;
}

/* the front door's one promise — a single line, seal-marked */
.cover-promise {
  font-family: var(--serif);
  font-size: var(--size-md);
  font-style: italic;
  color: var(--ink-soft);
  border-left: 3px solid var(--seal);
  padding-left: var(--pu);
  margin: var(--bl) 0;
  max-width: var(--measure);
}

/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(rgba(80, 55, 15, .018) 1px, transparent 1px),
    radial-gradient(rgba(80, 55, 15, .011) 1px, transparent 1px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 3px;
  mix-blend-mode: multiply;
}

/* ============================================================
   YIN MODE (DARK MODE) OVERRIDES
   ============================================================ */
body.yin-mode {
  --paper: #121415;
  /* deep cosmic dark */
  --paper-deep: #0f1112;
  --paper-soft: #181a1c;
  --paper-warm: #1b1e20;
  --bone: #242729;
  /* for code blocks */

  --ink: #d5dac4;
  /* soft parchment text */
  --ink-soft: #b8beaf;
  --ink-fade: #8f9689;
  --ink-mute: #9aa892;
  --ink-2: #b8beaf;
  --ink-3: #8f9689;
  /* lightened for WCAG AA on dark paper */
  --ink-silver: #4e544a;
  /* wabi-sabi grey dark */

  --seal: #d85c5c;
  /* lightened cinnabar */
  --seal-deep: #a63535;
  --jade: #628a70;
  --jade-soft: #82a88e;
  --gold: #d2a14e;
  --deep-blue: #3e74ab;
  --signal-yellow: #e5c462;
  --paper-map: #151719;
  --rail-blue: #3b69a3;
  --code-jade: #3f6651;

  --rule: rgba(213, 218, 196, .14);
  --rule-soft: rgba(213, 218, 196, .07);
  --rule-faint: rgba(213, 218, 196, .04);
}

body.yin-mode::before {
  background-image:
    radial-gradient(rgba(213, 218, 196, .04) 1px, transparent 1px),
    radial-gradient(rgba(213, 218, 196, .02) 1px, transparent 1px);
  mix-blend-mode: screen;
}

/* Smooth palette transition */
body {
  transition: background-color .5s ease, color .5s ease;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   WCAG AA CONTRAST SAFETY NET
   Addresses persistent "invisible text" reports. These rules
   guarantee minimum 4.5:1 (normal) / 3:1 (large) contrast for
   elements that inherited light-mode colours onto dark surfaces
   or whose per-chapter accent hues fell below the threshold.
   Scoped with high specificity so they win specificity battles
   without !important where possible.
   ============================================================ */

/* ── 1. PLAY-CARD TAG (.pc-tag) — dark text on gold chip ──────
   Was rgba(61,46,15) on #b8893a = 4.18:1 (fails 4.5).
   Pure-black text clears 5.9:1 while staying within the palette. */
.play-card .pc-tag {
  color: #0a0905;
}

/* ── 2. PASSPORT STAMP TEXT — sage numbers on cream ───────────
   Was rgba(154,168,146) on #f4ebd5 = 2.11:1. Darken to ink-mute. */
.passport-stamp .passport-text {
  color: var(--ink-mute);
}

.passport-stamp.visited .passport-text {
  color: var(--seal-deep);
}

/* §11.10: same fix already applied to .chapter .passport-stamp .passport-text
   (line ~15227) for the identical near-black-stamp-bg-in-dark-mode problem —
   this is the index-overlay's separate instance, outside .chapter, missed. */
body.yin-mode .index-list .passport-stamp .passport-text {
  color: #cfc7b2 !important;
}

/* ── 3. READING-ASIDE QUESTION (.ra-q) on dark surfaces ───────
   In light mode, dark-bg moods render .ra-q in --ink-fade (#5e564a)
   which reads ~2.6:1 on near-black mood backgrounds. Flip to paper. */
.chapter.mood-wabi .reading-aside .ra-q,
.chapter.mood-cosmic .reading-aside .ra-q,
.chapter.mood-cryptic .reading-aside .ra-q,
.chapter.mood-mirror .reading-aside .ra-q,
.chapter.mood-physics .reading-aside .ra-q {
  color: var(--paper);
}

/* ── 4. CHARACTER STACK GLYPH (.cs-c) on dark surfaces ────────
   Base inherited --ink-fade (#5e564a) renders ~2.5:1 on dark mood
   backgrounds. These moods need an explicit light override. */
.chapter.mood-wabi .cn-stack-char .cs-c,
.chapter.mood-cosmic .cn-stack-char .cs-c,
.chapter.mood-cryptic .cn-stack-char .cs-c,
.chapter.mood-mirror .cn-stack-char .cs-c,
.chapter.mood-physics .cn-stack-char .cs-c {
  color: var(--paper);
}

/* ── 5. CHAPTER-FOOT on dark surfaces ─────────────────────────
   The "Mark as Read" / prev-next nav sit in .chapter-foot whose
   background is transparent on dark moods, exposing the dark
   chapter surface while text inherits light-mode --ink-fade.
   Force the foot to use --paper as its own opaque surface so the
   cream/dark text always has a readable backing, regardless of
   the chapter mood behind it. */
.chapter .chapter-foot {
  background: var(--paper);
}

.chapter .chapter-foot,
.chapter .chapter-foot button,
.chapter .chapter-foot .read-stamp,
.chapter .chapter-foot .read-text {
  color: var(--ink-soft);
}

body.yin-mode .chapter .chapter-foot,
body.yin-mode .chapter .chapter-foot button,
body.yin-mode .chapter .chapter-foot .read-stamp,
body.yin-mode .chapter .chapter-foot .read-text {
  color: var(--ink-soft);
}

.chapter.mood-wabi .chapter-foot button:hover,
.chapter.mood-cosmic .chapter-foot button:hover,
.chapter.mood-cryptic .chapter-foot button:hover,
.chapter.mood-mirror .chapter-foot button:hover,
.chapter.mood-physics .chapter-foot button:hover {
  color: var(--seal);
}

/* ── 6. YIN MODE — chapter-foot read button & nav ─────────────
   In Yin mode the .chapter-foot background flips to --paper (#121415)
   but the read-button text stays at light-mode --ink-fade. */
body.yin-mode .chapter-foot,
body.yin-mode .chapter-foot button {
  color: var(--ink-soft);
}

body.yin-mode .chapter-foot button:hover {
  color: var(--seal);
}

/* ── 7. YIN MODE — character stack glyph on all moods ─────────
   Ensures .cs-c uses the Yin-flipped --ink (light parchment). */
body.yin-mode .chapter .cn-stack-char .cs-c {
  color: var(--ink);
}

/* non-ch81 mood-mirror in yin: light panels need dark glyphs */
body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .cn-stack-char .cs-c {
  color: #15140f;
}

/* ── 8. YIN MODE — reading-aside question ───────────────────── */
body.yin-mode .chapter .reading-aside .ra-q {
  color: var(--ink);
}

/* non-ch81 mood-mirror in yin: light panels need dark question text */
body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .reading-aside .ra-q {
  color: rgba(21, 20, 15, .85);
}

/* ── 9. PER-CHAPTER ACCENT — clamp minimum lightness ──────────
   The formula hsl(5°+hue, 65%+sat, 38%) occasionally produces
   hues that read below 4.5:1 on cream for small pinyin text.
   Rather than retune 81 inline values, clamp the accent toward
   the seal-red anchor when lightness would be too high by
   reducing the saturation boost ceiling. */
.chapter {
  --ch-accent: hsl(calc(5deg + var(--ch-hue, 0deg)),
      calc(55% + var(--ch-sat, 0%)),
      32%);
}

/* ── YIN CHROME ─ topbar, strips, overlays ──────────────────── */
body.yin-mode .topbar {
  background: rgba(18, 20, 21, .92);
}

body.yin-mode .chapter-strip {
  background: rgba(18, 20, 21, .88);
}

body.yin-mode .notes-head {
  background: rgba(18, 20, 21, .96);
}

body.yin-mode .search-overlay {
  background: rgba(18, 20, 21, .95);
}

body.yin-mode .colophon {
  color: rgba(18, 20, 21, .7);
}

/* §11.10: bg flips to cream here — needs the light-theme --seal value. */
body.yin-mode .colophon h3 {
  color: #a83332;
}

body.yin-mode .colophon p em {
  color: var(--paper);
}

body.yin-mode .colo-sig {
  color: rgba(18, 20, 21, .68) !important;
}

/* Mobile dropdown menu */
@media (max-width: 768px) {
  body.yin-mode .topbar-tools {
    background: rgba(18, 20, 21, 0.98);
  }

  body.yin-mode .topbar.is-mobile-open .lang-toggle,
  body.yin-mode .topbar.is-mobile-open .tool-btn {
    background: rgba(18, 20, 21, 0.98);
  }
}

/* ── YIN TOGGLE BUTTON ────────────────────────────────────── */
.yin-toggle .yt-han {
  font-size: 20px;
  line-height: 1;
  transition: transform .6s cubic-bezier(.2, .8, .25, 1), filter .4s;
}

.yin-toggle.is-on .yt-han {
  transform: rotate(180deg);
  filter: drop-shadow(0 0 6px var(--seal));
}

.yin-toggle.is-on {
  color: var(--seal);
}

/* ── YIN LIGHT-MOOD OVERRIDES ─────────────────────────────── */
/* Wabi (silence): off-white → deep charcoal */
body.yin-mode .chapter.mood-wabi {
  background: #161413 !important;
  color: var(--ink);
}

body.yin-mode .chapter.mood-wabi .chapter-strip {
  background: rgba(22, 20, 19, .92);
}

body.yin-mode .chapter.mood-wabi .panel-summary {
  background: #161413;
}

body.yin-mode .chapter.mood-wabi .summary-frame .su-cn {
  color: var(--ink-fade);
}

body.yin-mode .chapter.mood-wabi .summary-frame .su-en,
body.yin-mode .chapter.mood-wabi .summary-frame .su-th {
  color: var(--ink);
}

body.yin-mode .chapter.mood-wabi .origin-cn-title {
  color: var(--ink);
}

/* Natural (jade-forest): green-cream → deep forest */
body.yin-mode .chapter.mood-natural {
  background: linear-gradient(180deg, #0e1a10 0%, #081208 100%) !important;
  color: #c8e4b0;
}

body.yin-mode .chapter.mood-natural .chapter-strip {
  background: rgba(14, 26, 16, .92);
  color: #82a88e;
}

body.yin-mode .chapter.mood-natural .panel-direct {
  background: rgba(74, 107, 86, .08);
}

body.yin-mode .chapter.mood-natural .summary-frame .su-cn {
  color: #628a70;
}

body.yin-mode .chapter.mood-natural .summary-frame .su-en,
body.yin-mode .chapter.mood-natural .summary-frame .su-th {
  color: #c8e4b0;
  border-left-color: #628a70;
}

body.yin-mode .chapter.mood-natural .origin-cn-title {
  color: #c8e4b0;
}

body.yin-mode .chapter.mood-natural .origin-cn-title-py {
  color: #82a88e;
}

body.yin-mode .chapter.mood-natural .cn-stack-char .cs-c {
  color: #c8e4b0;
}

body.yin-mode .chapter.mood-natural .cn-stack-char .cs-py {
  color: #82a88e;
}

body.yin-mode .chapter.mood-natural .origin-gloss {
  color: rgba(200, 228, 176, .85);
}

body.yin-mode .chapter.mood-natural .reading-body,
body.yin-mode .chapter.mood-natural .note-body {
  color: rgba(200, 228, 176, .92);
}

body.yin-mode .chapter.mood-natural .panel-reading,
body.yin-mode .chapter.mood-natural .panel-note {
  color: #c8e4b0;
}

body.yin-mode .chapter.mood-natural .reading-aside {
  background: rgba(98, 138, 112, .08);
  color: rgba(200, 228, 176, .75);
}

/* Civic (practical): warm parchment → dark earth */
body.yin-mode .chapter.mood-civic {
  background: #14120e !important;
  color: var(--ink);
}

body.yin-mode .chapter.mood-civic .chapter-strip {
  background: #14120e;
}

body.yin-mode .chapter.mood-civic .panel-summary {
  background: #14120e;
}

body.yin-mode .chapter.mood-civic .summary-frame .su-cn {
  color: var(--ink);
  border-bottom-color: var(--ink-fade);
}

body.yin-mode .chapter.mood-civic .summary-frame .su-cn-py {
  color: var(--ink-fade);
}

body.yin-mode .chapter.mood-civic .summary-frame .su-en,
body.yin-mode .chapter.mood-civic .summary-frame .su-th {
  color: var(--ink);
}

/* Pop (Warhol): bright halftone → neon-on-dark */
body.yin-mode .chapter.mood-pop {
  background:
    radial-gradient(circle at 20% 30%, rgba(232, 75, 90, .12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 200, 40, .10) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(50, 140, 210, .08) 0%, transparent 60%),
    #121415 !important;
  color: #e8e8f2;
}

body.yin-mode .chapter.mood-pop .chapter-strip {
  background: rgba(18, 20, 21, .92);
  color: #8a8aa4;
}

body.yin-mode .chapter.mood-pop .summary-frame {
  background: #14121a;
  border-color: rgba(138, 138, 164, .3);
  color: #e8e8f2;
}

body.yin-mode .chapter.mood-pop .summary-frame .su-cn {
  color: #e84b5a;
}

body.yin-mode .chapter.mood-pop .summary-frame .su-en,
body.yin-mode .chapter.mood-pop .summary-frame .su-th {
  color: #e8e8f2;
  border-left-color: #328cd2;
}

body.yin-mode .chapter.mood-pop .origin-cn-title {
  color: #e84b5a;
}

body.yin-mode .chapter.mood-pop .origin-cn-title-py {
  color: #8a8aa4;
}

body.yin-mode .chapter.mood-pop .cn-stack-char .cs-c {
  color: #e8e8f2;
}

body.yin-mode .chapter.mood-pop .cn-stack-char .cs-py {
  color: #8a8aa4 !important;
}

/* pure-yin: beat the global .cs-py var(--ch-accent)!important */
/* quiet+yin: the quiet-mode pop rule (html body.quiet-mode … cs-py {var(--ch-accent)!important}, 0,5,2)
   forces the light-mode dark-red accent onto the dark bg. Out-specify it (0,6,2) so pinyin stays readable. */
html body.quiet-mode.yin-mode .chapter.mood-pop .cn-stack-char .cs-py {
  color: #8a8aa4 !important;
}

body.yin-mode .chapter.mood-pop .origin-gloss {
  color: rgba(232, 232, 242, .85);
}

body.yin-mode .chapter.mood-pop .reading-body,
body.yin-mode .chapter.mood-pop .note-body {
  color: rgba(232, 232, 242, .92);
}

body.yin-mode .chapter.mood-pop .panel-reading,
body.yin-mode .chapter.mood-pop .panel-note {
  color: #e8e8f2;
}

body.yin-mode .chapter.mood-pop .reading-aside {
  background: rgba(138, 138, 164, .08);
  color: rgba(232, 232, 242, .75);
}

/* Physics (graph paper): bone grid → dark grid */
body.yin-mode .chapter.mood-physics {
  background:
    linear-gradient(rgba(98, 138, 112, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 138, 112, .1) 1px, transparent 1px),
    var(--bone) !important;
  background-size: 24px 24px, 24px 24px, auto;
}

body.yin-mode .chapter.mood-physics .summary-frame {
  background: var(--paper);
  border-color: var(--ink-fade);
}

body.yin-mode .chapter.mood-physics {
  color: #d0e4d8;
  /* §11.10: yin --seal #d85c5c is 4.01:1 on the --bone graph-paper grid —
     brighten it inside physics chapters (checkpoint/postit kickers etc.) */
  --seal: #e07070;
}

body.yin-mode .chapter.mood-physics .chapter-strip {
  background: rgba(36, 39, 41, .92);
  color: #82a88e;
}

body.yin-mode .chapter.mood-physics .summary-frame .su-cn {
  color: #7a9982;
}

body.yin-mode .chapter.mood-physics .summary-frame .su-en,
body.yin-mode .chapter.mood-physics .summary-frame .su-th {
  color: #d0e4d8;
  border-left-color: #7a9982;
}

body.yin-mode .chapter.mood-physics .origin-cn-title {
  color: #d0e4d8;
}

body.yin-mode .chapter.mood-physics .origin-cn-title-py {
  color: #82a88e;
}

body.yin-mode .chapter.mood-physics .cn-stack-char .cs-c {
  color: #d0e4d8;
}

body.yin-mode .chapter.mood-physics .cn-stack-char .cs-py {
  color: #82a88e;
}

body.yin-mode .chapter.mood-physics .origin-gloss {
  color: rgba(208, 228, 216, .85);
}

body.yin-mode .chapter.mood-physics .reading-body,
body.yin-mode .chapter.mood-physics .note-body {
  color: rgba(208, 228, 216, .92);
}

body.yin-mode .chapter.mood-physics .panel-reading,
body.yin-mode .chapter.mood-physics .panel-note {
  color: #d0e4d8;
}

body.yin-mode .chapter.mood-physics .reading-aside {
  background: rgba(122, 153, 130, .08);
  color: rgba(208, 228, 216, .75);
}

/* Mirror (closing): dark → light in Yin mode — var(--ink) is light in yin,
   so mood-mirror auto-inverts; force dark readable text on the light surface.
   Chapter 81 is excluded — it keeps the black finale in both modes. */
body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .chapter-strip {
  background: #e8e4d8;
  border-bottom-color: rgba(21, 20, 15, .14);
  color: #15140f;
}

body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .panel-summary,
body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .panel-origin,
body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .panel-direct,
body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .panel-reading,
body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .panel-note {
  background: #e8e4d8 !important;
  color: #15140f;
}

body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .origin-gloss {
  color: rgba(21, 20, 15, .85);
}

body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .origin-line {
  border-top-color: rgba(21, 20, 15, .12);
}

body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .direct-text {
  color: rgba(21, 20, 15, .92);
}

body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .reading-frame .reading-aside {
  background: rgba(21, 20, 15, .06);
  color: rgba(21, 20, 15, .78);
}

body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .reading-body,
body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .note-body {
  color: rgba(21, 20, 15, .92);
}

body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .chapter-foot {
  background: #e8e4d8;
  border-top-color: rgba(21, 20, 15, .18);
  color: rgba(21, 20, 15, .55);
}

body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .chapter-foot button {
  color: rgba(21, 20, 15, .85);
}

body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .panel-image .image-caption {
  background: rgba(232, 228, 216, .96);
  color: rgba(21, 20, 15, .72);
}

body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .panel-image .image-caption em {
  color: rgba(21, 20, 15, .92);
}

/* Ch 81 finale — stay black + cream in yin (do not inherit mirror flip) */
body.yin-mode .chapter[data-n="81"] .chapter-foot {
  background: #000;
  color: rgba(244, 235, 213, .85);
}
body.yin-mode .chapter[data-n="81"] .chapter-foot button {
  color: rgba(244, 235, 213, .85);
}
body.yin-mode .chapter[data-n="81"] .panel-summary,
body.yin-mode .chapter[data-n="81"] .panel-origin,
body.yin-mode .chapter[data-n="81"] .panel-direct,
body.yin-mode .chapter[data-n="81"] .panel-reading,
body.yin-mode .chapter[data-n="81"] .panel-note,
body.yin-mode .chapter[data-n="81"] .panel-checkpoint {
  background: #000 !important;
  color: rgba(244, 235, 213, .92);
}

body.yin-mode .chapter[data-n="81"] .summary-frame .su-en,
body.yin-mode .chapter[data-n="81"] .summary-frame .su-th,
body.yin-mode .chapter[data-n="81"] .reading-body,
body.yin-mode .chapter[data-n="81"] .note-body,
body.yin-mode .chapter[data-n="81"] .checkpoint-main,
body.yin-mode .chapter[data-n="81"] .checkpoint-gloss {
  color: rgba(244, 235, 213, .92) !important;
}

/* Flesh (warmth, rose): blush → dark rose */
body.yin-mode .chapter.mood-flesh {
  background: #1a1010 !important;
  color: #e0c8c0;
}

body.yin-mode .chapter.mood-flesh .chapter-strip {
  background: rgba(26, 16, 16, .92);
  color: #a87070;
}

body.yin-mode .chapter.mood-flesh .summary-frame .su-cn {
  color: #a87070;
}

body.yin-mode .chapter.mood-flesh .summary-frame .su-en,
body.yin-mode .chapter.mood-flesh .summary-frame .su-th {
  color: #e0c8c0;
  border-left-color: #a87070;
}

body.yin-mode .chapter.mood-flesh .origin-cn-title {
  color: #e0c8c0;
}

body.yin-mode .chapter.mood-flesh .origin-cn-title-py {
  color: #c08080;
}

body.yin-mode .chapter.mood-flesh .cn-stack-char .cs-c {
  color: #e0c8c0;
}

body.yin-mode .chapter.mood-flesh .cn-stack-char .cs-py {
  color: #c08080;
}

body.yin-mode .chapter.mood-flesh .origin-gloss {
  color: rgba(224, 200, 192, .85);
}

body.yin-mode .chapter.mood-flesh .reading-body,
body.yin-mode .chapter.mood-flesh .note-body {
  color: rgba(224, 200, 192, .92);
}

body.yin-mode .chapter.mood-flesh .panel-reading,
body.yin-mode .chapter.mood-flesh .panel-note {
  color: #e0c8c0;
}

body.yin-mode .chapter.mood-flesh .summary-frame .su-cn-py {
  color: #c08080;
}

/* dark yin bg #1a1010 — 4.66:1 */
body.yin-mode .chapter.mood-flesh .origin-en-title,
body.yin-mode .chapter.mood-flesh .origin-th-title {
  color: rgba(224, 200, 192, .78);
}

body.yin-mode .chapter.mood-flesh .origin-meta {
  color: rgba(224, 200, 192, .5);
}

body.yin-mode .chapter.mood-flesh .reading-aside {
  background: rgba(180, 120, 120, .06);
  color: rgba(224, 200, 192, .75);
}

body.yin-mode .chapter.mood-flesh .reading-aside .ra-q {
  color: #c08080;
}

body.yin-mode .chapter.mood-flesh .chapter-foot {
  color: rgba(224, 200, 192, .6);
}

body.yin-mode .chapter.mood-flesh .chapter-foot button {
  color: rgba(224, 200, 192, .8);
}

/* Ink (void, minimal): near-white → near-black */
body.yin-mode .chapter.mood-ink {
  background: #0e0e0e !important;
  color: #d8d8d8;
}

body.yin-mode .chapter.mood-ink .chapter-strip {
  background: rgba(14, 14, 14, .92);
  color: #888;
  border-bottom-color: rgba(255, 255, 255, .08);
}

body.yin-mode .chapter.mood-ink .summary-frame .su-cn {
  color: #bbb;
}

body.yin-mode .chapter.mood-ink .summary-frame .su-cn-py {
  color: #666;
}

body.yin-mode .chapter.mood-ink .summary-frame .su-en,
body.yin-mode .chapter.mood-ink .summary-frame .su-th {
  color: #d8d8d8;
  border-left-color: #666;
}

body.yin-mode .chapter.mood-ink .origin-cn-title {
  color: #d8d8d8;
}

body.yin-mode .chapter.mood-ink .origin-cn-title-py {
  color: #666;
}

body.yin-mode .chapter.mood-ink .cn-stack-char .cs-c {
  color: #d8d8d8;
}

body.yin-mode .chapter.mood-ink .cn-stack-char .cs-py {
  color: #666;
}

body.yin-mode .chapter.mood-ink .origin-gloss {
  color: rgba(216, 216, 216, .85);
}

body.yin-mode .chapter.mood-ink .origin-line {
  border-top-color: rgba(255, 255, 255, .06);
}

body.yin-mode .chapter.mood-ink .reading-body,
body.yin-mode .chapter.mood-ink .note-body {
  color: rgba(216, 216, 216, .92);
}

body.yin-mode .chapter.mood-ink .panel-reading,
body.yin-mode .chapter.mood-ink .panel-note {
  color: #d8d8d8;
}

body.yin-mode .chapter.mood-ink .reading-aside {
  background: rgba(255, 255, 255, .03);
  color: rgba(216, 216, 216, .7);
}

body.yin-mode .chapter.mood-ink .reading-aside .ra-q {
  color: rgba(216, 216, 216, .85);
}

body.yin-mode .chapter.mood-ink .chapter-foot {
  color: rgba(216, 216, 216, .55);
}

body.yin-mode .chapter.mood-ink .chapter-foot button {
  color: rgba(216, 216, 216, .8);
}

body.yin-mode .chapter.mood-ink .chapter-foot button:hover {
  color: #d8d8d8;
}

body.yin-mode .chapter.mood-ink .chapter-foot .ch-marker {
  color: #999;
}

/* Weather (rain, grey-blue): grey tint → deep storm */
body.yin-mode .chapter.mood-weather {
  background: linear-gradient(180deg, #121820 0%, #0e1418 100%) !important;
  color: #b0c4d4;
}

body.yin-mode .chapter.mood-weather .chapter-strip {
  background: rgba(18, 24, 32, .92);
  color: #6a90a8;
  border-bottom-color: rgba(90, 122, 138, .25);
}

body.yin-mode .chapter.mood-weather .summary-frame .su-cn {
  color: #6a90a8;
}

body.yin-mode .chapter.mood-weather .summary-frame .su-en,
body.yin-mode .chapter.mood-weather .summary-frame .su-th {
  color: #b0c4d4;
  border-left-color: #6a90a8;
}

body.yin-mode .chapter.mood-weather .origin-cn-title {
  color: #b0c4d4;
}

body.yin-mode .chapter.mood-weather .origin-cn-title-py {
  color: #6a90a8;
}

body.yin-mode .chapter.mood-weather .cn-stack-char .cs-c {
  color: #b0c4d4;
}

body.yin-mode .chapter.mood-weather .cn-stack-char .cs-py {
  color: #6a90a8;
}

body.yin-mode .chapter.mood-weather .origin-gloss {
  color: rgba(176, 196, 212, .85);
}

body.yin-mode .chapter.mood-weather .origin-line {
  border-top-color: rgba(90, 122, 138, .2);
}

body.yin-mode .chapter.mood-weather .reading-body,
body.yin-mode .chapter.mood-weather .note-body {
  color: rgba(176, 196, 212, .92);
}

body.yin-mode .chapter.mood-weather .panel-reading,
body.yin-mode .chapter.mood-weather .panel-note {
  color: #b0c4d4;
}

body.yin-mode .chapter.mood-weather .reading-aside {
  background: rgba(90, 122, 138, .08);
  color: rgba(176, 196, 212, .75);
}

body.yin-mode .chapter.mood-weather .summary-frame .su-cn-py {
  color: #6a90a8;
}

/* dark yin bg #121820 — 5.96:1 */
body.yin-mode .chapter.mood-weather .reading-aside .ra-q {
  color: #6a90a8;
}

/* dark yin bg #121820 — 5.96:1 */
body.yin-mode .chapter.mood-weather .chapter-foot {
  color: rgba(176, 196, 212, .55);
}

body.yin-mode .chapter.mood-weather .chapter-foot button {
  color: rgba(176, 196, 212, .8);
}

body.yin-mode .chapter.mood-weather .chapter-foot button:hover {
  color: #b0c4d4;
}

/* Cosmic (source chapters): chapter bg is already dark in light-mode; only the var(--paper)
   text references break in yin-mode because --paper flips to #121415 (near-black background).
   Sea / Stone / Ember / Cryptic use hardcoded light values throughout — no override needed. */
body.yin-mode .chapter.mood-cosmic {
  color: rgba(244, 235, 213, .92);
  /* was var(--paper) → #121415 dark */
}

body.yin-mode .chapter.mood-cosmic .chapter-strip .cs-cn-han,
body.yin-mode .chapter.mood-cosmic .origin-cn-title,
body.yin-mode .chapter.mood-cosmic .cn-stack-char .cs-c {
  color: rgba(244, 235, 213, 1);
}

body.yin-mode .chapter.mood-cosmic .panel-direct,
body.yin-mode .chapter.mood-cosmic .panel-reading,
body.yin-mode .chapter.mood-cosmic .panel-note {
  color: rgba(244, 235, 213, .92);
}

::selection {
  background: var(--seal);
  color: var(--paper);
}

a {
  color: var(--seal);
  text-decoration: none;
  border-bottom: 1px dotted var(--seal);
  transition: color .2s, border-color .2s;
}

a:hover {
  color: var(--jade);
  border-bottom-color: var(--jade);
}

/* ============================================================
   PROGRESS
   ============================================================ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--seal);
  z-index: 200;
  transition: width .12s linear;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 52px;
  padding: 0;
  background: rgba(244, 235, 213, .92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  overflow: hidden;
}

.topbar-brand {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  border-right: 1px solid var(--rule);
}

/* BIG 道 — bleeds from topbar into the space, borderless */
.topbar-dao {
  font-family: "Ma Shan Zheng", var(--cn-brush), cursive;
  font-size: 52px;
  line-height: 1;
  color: var(--seal);
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  letter-spacing: 0;
  font-weight: 400;
  /* Bleed slightly above/below topbar — the calligraphy breathes */
  margin: -4px 0;
  align-self: center;
}

.topbar-name {
  font-family: var(--cn-elegant);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  padding-right: 18px;
}

@media (max-width: 480px) {
  .topbar-name {
    display: none;
  }
}

@media (max-width: 400px) {
  .topbar-dao {
    font-size: 40px;
    padding: 0 8px 0 10px;
  }

  /* §11.8 — hit area stays 44×44 even on iPhone SE. Padding/font shrink but the tappable rect doesn't. */
  .lang-toggle,
  .tool-btn {
    padding: 0 6px;
    min-width: 44px;
    min-height: 44px;
    font-size: 10px;
  }

  .tool-btn {
    padding: 0 5px;
  }
}

.topbar-tools {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-shrink: 0;
}

/* All tool buttons — uniform glyph grid */
.lang-toggle,
.tool-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--size-xs);
  letter-spacing: .08em;
  cursor: pointer;
  padding: 0 10px;
  height: 100%;
  min-width: 44px;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.tool-btn {
  padding: 0 10px;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}

/* Active state — matches .lang-pill.is-active's signifier exactly:
   color + underline. A toggle that's "on" and a language that's
   selected are the same kind of fact; they now look like it. */
.tool-btn.is-on {
  color: var(--seal);
  border-bottom-color: var(--seal);
}

.yin-toggle.is-on {
  color: var(--seal);
  border-bottom-color: var(--seal);
}

.lang-toggle:hover,
.tool-btn:hover {
  color: var(--seal);
}

.lang-toggle:focus-visible,
.tool-btn:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
  background: color-mix(in srgb, var(--seal) 10%, var(--paper));
  color: var(--ink);
  border-color: var(--seal);
}

/* Group the flat glyph row by whitespace, not boxes — the hairline
   left-border on each button still carries the break; these just
   give it room to read as a new cluster starting, not a random gap.
   Toggles+language | Guide | Notes/Characters/Search/Reflect/Index. */
#deepworkBtn {
  margin-left: 10px;
}

#notesBtn {
  margin-left: 10px;
}

.tool-label,
.tool-state {
  display: none;
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.tool-state {
  color: color-mix(in srgb, currentColor 72%, transparent);
  border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  padding-left: 6px;
}

/* pt-roman (āē superscript) is never shown — glyphs speak for themselves */
.tool-btn .pt-roman,
.pinyin-toggle .pt-roman {
  display: none;
}

/* Labels and state badges are never shown — tooltips + title attrs serve discovery */
.tool-label,
.tool-state {
  display: none;
}

@media (min-width: 1120px) {
  .topbar .tool-btn {
    min-width: auto;
    padding: 0 10px;
  }
}

.lang-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 0;
}

.lang-toggle .lang-pill {
  padding: 2px 8px;
  font-size: var(--size-xs);
  font-family: inherit;
  letter-spacing: .05em;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all .2s ease;
  cursor: pointer;
}

.lang-toggle .lang-pill.is-active {
  color: var(--seal);
  font-weight: 600;
  border-bottom: 2px solid var(--seal);
}

.lang-toggle .lang-pill:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

.lang-toggle:hover .lang-pill {
  color: var(--seal);
}

.lang-toggle:hover .lang-pill.is-active {
  border-bottom-color: var(--seal);
}

/* ============================================================
   COVER — the threshold
   ============================================================ */
.cover {
  min-height: 100vh;
  padding: 52px 6vw 6vh;
  /* 52px = topbar height — hero image starts below the fixed bar */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  /* contain the hero's negative-margin bleed; allow vertical growth */
}

.cover-hero-media {
  width: calc(100% + 12vw);
  margin: 0 -6vw clamp(24px, 5vh, 48px);
  border-bottom: 1px solid var(--ink);
  background: var(--bone);
  position: relative;
}

.cover-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  /* full image — no cropping, all characters visible */
  object-fit: fill;
}

.cover-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-fade);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  position: relative;
  z-index: 2;
}

.cover-stack {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  padding: clamp(10px, 2vh, 22px) 0;
  position: relative;
  z-index: 2;
}

.cover-cn-vertical {
  font-family: var(--cn-elegant);
  font-size: clamp(60px, 8vw, 120px);
  line-height: .95;
  color: var(--ink);
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 8px;
  font-weight: 400;
}

.cover-text {
  max-width: 36ch;
}

.cover-kicker {
  font-family: var(--mono);
  font-size: var(--size-xs);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 14px;
}

.cover-title {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 88px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}

.cover-sub {
  font-family: var(--reader);
  font-style: italic;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 12px 0 0;
  max-width: 40ch;
}

.cover-sub em {
  color: var(--seal);
  font-style: italic;
}

.cover-foot {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}

.cover-instructions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0;
}

.cover-instructions strong {
  color: var(--seal);
  background: var(--paper-warm);
  padding: 2px 7px;
  margin-right: 6px;
  font-weight: 500;
}

.cover-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.cover-begin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid var(--seal);
  background: var(--seal);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.cover-begin-btn:hover {
  background: var(--seal-deep);
  border-color: var(--seal-deep);
  color: var(--paper);
  text-decoration: none;
}

.cover-about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.cover-about-btn:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}

.cover-note-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 18px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--seal) 48%, var(--rule));
  background: color-mix(in srgb, var(--paper) 86%, var(--seal));
  color: var(--seal);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.cover-note-btn:hover {
  background: var(--paper);
  border-color: var(--seal);
  transform: translateY(-1px);
}

/* ============================================================
   PREFACE
   ============================================================ */
.preface {
  background: var(--paper-deep);
  padding: clamp(56px, 10vh, 120px) 6vw;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.preface-inner {
  max-width: 60ch;
  margin: 0 auto;
}

.preface-kicker {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 14px;
}

.preface-title {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -.012em;
  margin: 0 0 28px;
}

.preface-title[data-lang="th"] {
  font-family: var(--th);
  font-weight: 600;
  letter-spacing: 0;
}

.preface-inner p {
  margin: 0 0 18px;
  font-family: var(--reader);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.preface-inner p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 500;
  float: left;
  font-size: 4.4em;
  line-height: .85;
  margin: 6px 10px -6px 0;
  color: var(--seal);
}

.preface-inner em {
  color: var(--seal);
  font-style: italic;
}

/* CTA card at the bottom of the preface — opens the Notes overlay */
.preface-notes-cta {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.pncta-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  cursor: pointer;
  text-align: left;
  font-family: var(--reader);
  color: var(--ink);
  transition: border-color .2s, background .2s, transform .25s;
}

.pncta-btn:hover {
  border-color: var(--seal);
  background: var(--paper);
}

.pncta-btn .pncta-han {
  font-family: var(--cn-elegant);
  font-size: 32px;
  color: var(--seal);
  line-height: 1;
  flex-shrink: 0;
}

.pncta-btn .pncta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.pncta-btn .pncta-text strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -.005em;
}

.pncta-btn .pncta-text em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-fade);
  line-height: 1.5;
}

.pncta-btn .pncta-arrow {
  font-family: var(--mono);
  font-size: 20px;
  color: var(--seal);
  flex-shrink: 0;
  transition: transform .25s;
}

.pncta-btn:hover .pncta-arrow {
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .pncta-btn {
    padding: 18px 16px;
    gap: 14px;
  }

  .pncta-btn .pncta-han {
    font-size: 26px;
  }

  .pncta-btn .pncta-text strong {
    font-size: 15px;
  }

  .pncta-btn .pncta-text em {
    font-size: 10px;
  }
}

.preface-sig {
  font-family: var(--mono);
  font-size: 11px !important;
  letter-spacing: .2em;
  color: var(--ink-fade) !important;
  text-transform: uppercase;
  margin-top: 36px !important;
}

/* ============================================================
   CHAPTER — the journey container
   Mobile: each panel is one scroll-snap screen
   Laptop: panels compose on a grid
   ============================================================ */
.chapter {
  position: relative;
  border-top: 1px solid var(--ink);
  background: var(--paper);
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

.chapter:nth-child(odd) {
  background: var(--paper-soft);
}

/* CHAPTER HEADER STRIP — DETAIL-magazine micro-typography */
.chapter-strip {
  position: sticky;
  top: 60px;
  /* below topbar */
  z-index: 50;
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr) auto auto auto auto auto;
  align-items: baseline;
  gap: 16px;
  padding: 14px 6vw;
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-fade);
  background: rgba(244, 235, 213, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

.chapter-strip .cs-num {
  color: var(--seal);
  font-weight: 600;
  font-size: var(--size-xs);
}

.chapter-strip .cs-cn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-transform: none;
}

.chapter-strip .cs-cn-han {
  font-family: var(--cn-elegant);
  font-size: var(--size-md);
  letter-spacing: 4px;
  color: var(--ink);
  line-height: 1.05;
}

.chapter-strip .cs-cn-py {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: .14em;
  color: var(--seal);
  opacity: .85;
  text-transform: lowercase;
  line-height: 1;
}

.chapter-strip .cs-num-py {
  font-family: var(--mono);
  font-style: italic;
  text-transform: lowercase;
  color: var(--ink-fade);
  opacity: .75;
  font-weight: 400;
}

body.pinyin-off .cs-cn-py,
body.pinyin-off .cs-num-py {
  display: none;
}

.chapter-strip .cs-en {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--size-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.chapter-strip .cs-th {
  font-family: var(--th);
  font-size: var(--size-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}

body.lang-en .cs-th {
  display: none;
}

body.lang-th .cs-en {
  display: none;
}

body.lang-cn .cs-en,
body.lang-cn .cs-th {
  display: none;
}

.chapter-strip .cs-progress {
  font-variant-numeric: tabular-nums;
  font-size: var(--size-tiny);
  color: var(--ink-mute);
}

.cs-echo-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--seal) 26%, transparent);
  background: color-mix(in srgb, var(--paper) 74%, transparent);
  color: var(--ink-fade);
  cursor: pointer;
  min-height: 44px;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.cs-echo-btn:hover {
  color: var(--seal);
  border-color: color-mix(in srgb, var(--seal) 58%, transparent);
  background: color-mix(in srgb, var(--paper-soft) 90%, transparent);
  transform: translateY(-1px);
}
.cs-echo-btn:focus-visible {
  color: var(--seal);
  border-color: color-mix(in srgb, var(--seal) 58%, transparent);
  background: color-mix(in srgb, var(--paper-soft) 90%, transparent);
  transform: translateY(-1px);
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

.cs-echo-han {
  font-family: var(--cn-elegant);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--seal);
}

.cs-echo-copy [data-lang] {
  display: none;
}

body.lang-en .cs-echo-copy [data-lang="en"],
body.lang-th .cs-echo-copy [data-lang="th"],
body.lang-cn .cs-echo-copy [data-lang="cn"] {
  display: inline;
}

@media (max-width: 720px) {
  .chapter-strip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 8px;
    padding: 10px 5vw;
    font-size: 9px;
  }

  .chapter-strip .cs-num {
    flex: 0 0 auto;
  }

  .chapter-strip .cs-num-py {
    display: none;
  }

  .chapter-strip .cs-cn {
    flex: 0 1 auto;
    text-align: center;
  }

  .chapter-strip .cs-cn-py {
    display: none;
  }

  .chapter-strip .cs-en,
  .chapter-strip .cs-th {
    display: none;
  }

  /* title repeats in origin panel below */
  .chapter-strip .cs-echo-btn,
  .chapter-strip .cs-tsai-btn {
    flex: 0 0 auto;
  }

  .chapter-strip .cs-progress {
    display: none;
  }

  .cs-echo-btn {
    padding: 6px 8px;
    min-width: 44px;
  }

  .cs-echo-copy {
    display: none;
  }
}

/* PANELS — the five layers */
.panel {
  padding: clamp(40px, 8vh, 100px) 6vw;
  position: relative;
  scroll-snap-align: start;
  /* land BELOW the sticky topbar + chapter-strip, not behind them */
  scroll-margin-top: var(--sticky-stack);
  border-bottom: 1px solid var(--rule-faint);
}

@media (max-width: 600px) {
  .panel {
    padding: clamp(28px, 5vh, 56px) 5vw;
  }

  .panel-summary {
    padding: clamp(28px, 5vh, 56px) 5vw clamp(24px, 4vh, 48px);
  }
}

.panel-label {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

.panel-label .pl-num {
  color: var(--ink-mute);
  font-size: 9px;
  letter-spacing: .15em;
}

.panel-label .pl-cn {
  font-family: var(--cn-elegant);
  color: var(--ink-fade);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 2px;
  margin-left: auto;
}

/* Panel 01 — ORIGIN */
.panel-origin {
  background: var(--paper);
}

.origin-head {
  max-width: 980px;
  margin: 0 auto 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.origin-num-roman {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--seal);
  letter-spacing: .25em;
  text-transform: uppercase;
  margin: 0;
}

.origin-cn-title-py {
  font-family: var(--mono);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .18em;
  color: var(--seal);
  opacity: .9;
  margin: 6px 0 -2px;
  line-height: 1;
  text-transform: lowercase;
}

.origin-cn-title {
  font-family: var(--cn-elegant);
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1;
  color: var(--ink);
  margin: 6px 0 0;
  letter-spacing: 8px;
  font-weight: 400;
}

.origin-en-title {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0;
}

.origin-th-title {
  font-family: var(--th);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0;
}

body.lang-en .origin-th-title {
  display: none;
}

body.lang-th .origin-en-title {
  display: none;
}

body.lang-cn .origin-en-title,
body.lang-cn .origin-th-title {
  display: none;
}

.origin-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 18px 0 0;
}

/* CHINESE AUDIO LISTEN BUTTON */
.cn-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  min-height: 44px;
}

.cn-listen-btn em {
  font-style: italic;
  font-size: .85em;
  color: var(--seal);
  text-transform: lowercase;
  letter-spacing: .1em;
}

.cn-listen-btn:hover {
  border-color: var(--seal);
  color: var(--seal);
  background: rgba(168, 51, 50, .05);
}

.cn-listen-btn.is-playing {
  background: var(--seal);
  color: var(--paper);
  border-color: var(--seal);
}

.cn-listen-btn.is-playing em {
  color: var(--paper);
}

.cn-listen-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.cn-listen-row .cn-listen-btn {
  margin-top: 0;
}

.cn-walk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  min-height: 44px;
}

.cn-walk-btn em {
  font-style: italic;
  font-size: .85em;
  color: var(--seal);
  text-transform: lowercase;
  letter-spacing: .1em;
}

.cn-walk-btn:hover {
  border-color: var(--seal);
  color: var(--seal);
  background: rgba(168, 51, 50, .05);
}

.cn-walk-btn.is-walking {
  background: var(--seal);
  color: var(--paper);
  border-color: var(--seal);
}

.cn-walk-btn.is-walking em {
  color: var(--paper);
}

/* Per-character click feedback when TTS is speaking that character. */
.cn-stack-char {
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  padding: 2px 1px;
  border-radius: 0;
}

.cn-stack-char:hover {
  background: rgba(168, 51, 50, .06);
}

.cn-stack-char:hover .cs-c {
  color: var(--seal);
}

.cn-stack-char.is-speaking {
  background: var(--seal);
}

.cn-stack-char.is-speaking .cs-c,
.cn-stack-char.is-speaking .cs-py {
  color: var(--paper);
}

/* ============================================================
   COMPARE PANEL — 比較 bǐ jiào — translations side by side
   ============================================================ */
.panel-compare {
  background: var(--paper-warm);
  padding: clamp(32px, 5vh, 60px) 6vw;
  border-top: 1px solid var(--rule);
}

.compare-details {
  max-width: 880px;
  margin: 0 auto;
}

.compare-summary {
  font-family: var(--display);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  font-style: italic;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 10px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color .2s;
}

.compare-summary::before {
  content: "↓";
  font-family: var(--mono);
  color: var(--seal);
  font-style: normal;
}

.compare-details[open] .compare-summary::before {
  content: "↑";
}

.compare-summary:hover {
  color: var(--ink);
}

.compare-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  margin-top: 14px;
}

.cmp-row {
  padding: 20px 0;
  border-bottom: 1px dashed var(--rule-soft);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px 24px;
  align-items: start;
}

@media (max-width: 720px) {
  .cmp-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.cmp-who {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0;
  padding-top: 4px;
}

.cmp-text {
  font-family: var(--reader);
  font-size: 17px;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
  grid-column-start: 2;
}

@media (max-width: 720px) {
  .cmp-text {
    grid-column-start: 1;
  }
}

.cmp-note {
  grid-column: 1 / -1;
  font-family: var(--reader);
  font-size: 14px;
  color: var(--ink-fade);
  font-style: italic;
  margin: 6px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
}

/* ============================================================
   ORIGIN STACK — the teach-by-example layout
   Each Chinese line gets pinyin on top, characters in the middle,
   line-translation on the bottom. Default view; pinyin can hide.
   ============================================================ */
.origin-stack {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.origin-line {
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
}

.origin-line:first-child {
  border-top: none;
  padding-top: 0;
}

/* CHARS row — flex-wrap so long lines break gracefully on phones */
.origin-chars {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px 14px;
  margin: 0 0 18px;
  font-family: var(--cn-serif);
  transition: gap .25s cubic-bezier(0.4, 0, 0.2, 1);
}

.layout-poetry .origin-chars {
  justify-content: center;
}

.layout-poetry .origin-gloss {
  text-align: center;
}

.layout-poetry .origin-line {
  border-bottom: 1px solid var(--rule-soft);
  border-top: none;
  padding-bottom: 16px;
  padding-top: 16px;
}

.layout-poetry .origin-line:first-child {
  border-top: 1px solid var(--rule-soft);
}

.layout-poetry .origin-line:last-child {
  border-bottom: none;
}

@media (min-width: 720px) {
  .origin-chars {
    gap: 6px 18px;
  }
}

/* Each Chinese character with its pinyin sits as a vertical stack */
.cn-stack-char {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.cn-stack-char .cs-py {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--seal);
  opacity: .9;
  margin-bottom: 6px;
  line-height: 1;
  white-space: nowrap;
  max-height: 1.2em;
  overflow: hidden;
  transition: max-height .25s cubic-bezier(0.4, 0, 0.2, 1), margin-bottom .25s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s ease;
}

@media (min-width: 720px) {
  .cn-stack-char .cs-py {
    font-size: 12px;
  }
}

.cn-stack-char .cs-c {
  font-family: var(--cn-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

/* ── DROP-CAP INITIAL ───────────────────────────────────────────
   The very first Chinese character of every chapter's Wang Bi text
   renders 3× larger, in cinnabar, as an illuminated manuscript
   initial. It marks the threshold — the moment you enter the text.
   Only the first character of the first line of the origin stack.
   Quiet-mode preserved: the colour distinction matters more there.
────────────────────────────────────────────────────────────────── */
.origin-stack .origin-line:first-child .origin-chars:first-child .cn-stack-char:first-child .cs-c {
  font-size: clamp(52px, 7.5vw, 88px);
  color: var(--seal, #a83332);
  line-height: 0.85;
  align-self: flex-end;
  margin-right: 4px;
}

/* Punctuation flows with chars — no pinyin, sits at char baseline */
.cn-stack-punct {
  font-family: var(--cn-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--ink-fade);
  align-self: flex-end;
  line-height: 1;
}

/* Hidden-pinyin mode: show only the chars (no romanisation) */
body.pinyin-off .cn-stack-char .cs-py {
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

body.pinyin-off .origin-chars {
  gap: 4px 8px;
}

/* GLOSS row — the literal translation under each line */
.origin-gloss {
  margin: 0 0 4px;
  padding-left: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.origin-gloss[data-lang="en"] {
  font-family: var(--reader);
  font-style: italic;
}

.origin-gloss[data-lang="cn"] {
  font-family: var(--cn-serif);
  font-style: normal;
}

.origin-gloss[data-lang="th"] {
  font-family: var(--th);
  font-style: normal;
}

.origin-gloss .og-mark {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--seal);
  margin-top: 4px;
  font-style: normal;
}


@media (max-width: 600px) {
  .origin-stack {
    gap: 28px;
  }

  .origin-line {
    padding-top: 16px;
  }

  .cn-stack-char .cs-c,
  .cn-stack-punct {
    font-size: 22px;
  }

  .cn-stack-char .cs-py {
    font-size: 10px;
    margin-bottom: 5px;
  }

  .origin-gloss {
    font-size: 15px;
  }
}

/* PINYIN TOGGLE — inherits tool-btn base; only glyph styling needed */
.pinyin-toggle .pt-han {
  font-family: var(--cn-elegant);
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
}

.pinyin-toggle.is-on {
  color: var(--seal);
}

.pinyin-toggle.is-on .pt-han {
  color: var(--seal);
}

/* QUIET MODE TOGGLE — inherits tool-btn base; only glyph styling needed */
.quiet-toggle .qt-han {
  font-family: var(--cn-elegant);
  font-size: 14px;
  line-height: 1;
}

.quiet-toggle.is-on {
  color: var(--seal);
}

.quiet-toggle.is-on .qt-han {
  color: var(--seal);
}

/* ============================================================
   QUIET MODE — body.quiet-mode strips the maximalism.
   Hides the visual ornamentation panels and forces the default
   cream-ink palette regardless of chapter mood. Keeps the
   teaching panels: Origin, Reading, Note, Closer.
   ============================================================ */
body.quiet-mode .chapter-break,
body.quiet-mode .panel-tsai,
body.quiet-mode .panel-painting,
body.quiet-mode .panel-play,
body.quiet-mode .panel-checkpoint,
body.quiet-mode .panel-summary,
body.quiet-mode .section-break:not(.section-break-major),
body.quiet-mode .cs-tsai-btn,
body.quiet-mode .cs-echo-btn {
  display: none;
}

/* Force every chapter back to the calm default — no mood backgrounds,
   no neon, no newsprint columns. Override the mood-class colour and
   background rules with the paper-ink default.
   Using `html body` prefix to beat chapter-specific mood overrides
   (e.g. .chapter[data-n="1"] .panel-summary) that also use !important.
   CRITICAL: mood modules redefine --ink/--ink-soft/--ink-fade to light
   colours. In quiet mode we force the paper background, so we must also
   restore those custom properties to their light-mode dark values. */
html body.quiet-mode .chapter {
  --ink: #15140f;
  --ink-soft: #2c2820;
  --ink-fade: #5e564a;
  --ink-mute: #6b5f4f;
  --ink-silver: #c0bcb1;
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* In yin mode the background is dark (--paper=#121415) but the quiet-mode
   chapter block forces --ink-fade/#8f9689 back to its dark light-mode
   value. Restore yin-mode light values so every `color: var(--ink-*)` rule
   below stays readable on the dark paper. */
html body.quiet-mode.yin-mode .chapter {
  --ink: #d5dac4;
  --ink-soft: #b8beaf;
  --ink-fade: #8f9689;
  --ink-mute: #9aa892;
}

html body.quiet-mode .chapter .panel,
html body.quiet-mode .chapter .panel-summary,
html body.quiet-mode .chapter .panel-origin,
html body.quiet-mode .chapter .panel-reading,
html body.quiet-mode .chapter .panel-note,
html body.quiet-mode .chapter .panel-character,
html body.quiet-mode .chapter .panel-closer,
html body.quiet-mode .chapter .panel-reflection,
html body.quiet-mode .chapter .panel-joke,
html body.quiet-mode .chapter .panel-direct,
html body.quiet-mode .chapter .panel-npm,
html body.quiet-mode .chapter .panel-tsai,
html body.quiet-mode .chapter .panel-compare,
html body.quiet-mode .chapter .panel-image,
html body.quiet-mode .chapter .panel-checkpoint,
html body.quiet-mode .chapter .panel-play,
html body.quiet-mode .chapter .chapter-foot,
html body.quiet-mode .chapter .chapter-break,
html body.quiet-mode .chapter .section-break,
html body.quiet-mode .chapter .char-brush,
html body.quiet-mode .chapter .reading-frame,
html body.quiet-mode .chapter .closer-frame,
html body.quiet-mode .chapter .reflection-frame,
html body.quiet-mode .chapter .checkpoint-frame,
html body.quiet-mode .chapter .direct-frame,
html body.quiet-mode .chapter .origin-frame,
html body.quiet-mode .chapter .joke-frame {
  background: transparent !important;
  background-image: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Catch-all for anything else inside a quiet-mode chapter */
html body.quiet-mode .chapter * {
  text-shadow: none !important;
  filter: none !important;
}

/* Keep opaque surfaces inside quiet-mode chapters.
   Active TTS buttons stay seal-red (not paper) so cream label text reads. */
html body.quiet-mode .chapter .cn-listen-btn.is-playing,
html body.quiet-mode .chapter .cn-walk-btn.is-walking {
  background: var(--seal) !important;
  border-color: var(--seal) !important;
  color: var(--paper) !important;
}

html body.quiet-mode .chapter .closer-frame,
html body.quiet-mode .chapter .reflection-frame,
html body.quiet-mode .chapter .reading-frame {
  background: var(--paper) !important;
}

/* Video captions use light text, so their dark panel must survive quiet mode's
   broad transparent-background reset above. */
html body.quiet-mode .chapter .panel-video {
  background: #15140f !important;
}

html body.quiet-mode.yin-mode .chapter .panel-video {
  background: #0a0e14 !important;
}

/* mood-pop summary-frame has background:var(--ink) which in quiet-mode is dark (#15140f).
   Quiet-mode forces text to var(--ink-soft) — dark on dark. Reset to paper so text reads. */
html body.quiet-mode .chapter.mood-pop .summary-frame {
  background: var(--paper);
  border-color: var(--rule);
}

/* Override mood-specific text colours so light text doesn't disappear
   on the cream quiet-mode background. Specificity (0,3,1) beats mood
   rules like .chapter.mood-cosmic .summary-frame .su-en (0,3,0). */
html body.quiet-mode .chapter .summary-frame .su-en,
html body.quiet-mode .chapter .summary-frame .su-th,
html body.quiet-mode .chapter .panel-origin .origin-cn-title,
html body.quiet-mode .chapter .panel-origin .origin-cn-title-py,
html body.quiet-mode .chapter .panel-origin .origin-en-title,
html body.quiet-mode .chapter .panel-origin .origin-th-title,
html body.quiet-mode .chapter .panel-origin .origin-meta,
html body.quiet-mode .chapter .panel-origin .origin-gloss,
html body.quiet-mode .chapter .panel-origin .cn-stack-char:not(.is-speaking) .cs-c,
html body.quiet-mode .chapter .panel-origin .cn-stack-char:not(.is-speaking) .cs-py,
html body.quiet-mode .chapter .panel-origin .cn-stack-punct,
html body.quiet-mode .chapter .reading-sources,
html body.quiet-mode .chapter .reading-sources li {
  color: var(--ink-fade) !important;
}

/* §11.10 — quiet-mode strips panel backgrounds; restore opaque surfaces where
   mood-specific light text would otherwise sit on cream chapter paper. */
html body.quiet-mode .chapter .panel-image:not(.is-sumie) .image-caption {
  background: rgba(14, 12, 8, .94);
  color: rgba(244, 235, 213, .78);
}

html body.quiet-mode .chapter .panel-image:not(.is-sumie) .image-caption em {
  color: rgba(244, 235, 213, .95);
}

html body.quiet-mode .chapter[data-n="81"] .panel-checkpoint,
html body.quiet-mode .chapter[data-n="81"] .checkpoint-frame {
  background: #000 !important;
}

html body.quiet-mode .chapter[data-n="81"] .checkpoint-main,
html body.quiet-mode .chapter[data-n="81"] .checkpoint-gloss {
  color: #f4ebd5 !important;
}

html body.quiet-mode .chapter .reading-body,
html body.quiet-mode .chapter .note-body,
html body.quiet-mode .chapter .closer-q,
html body.quiet-mode .chapter .reflection-title,
html body.quiet-mode .chapter .reflection-lists,
html body.quiet-mode .chapter .cd-breakdown,
html body.quiet-mode .chapter .cd-mnemonic,
html body.quiet-mode .chapter .cd-pivot,
html body.quiet-mode .chapter .char-meaning {
  color: var(--ink-soft) !important;
}

html body.quiet-mode .chapter .summary-frame .su-cn,
html body.quiet-mode .chapter .panel-origin .origin-cn-title {
  color: var(--ink) !important;
}

html body.quiet-mode .chapter .panel-label,
html body.quiet-mode .chapter .panel-label em {
  color: var(--seal) !important;
}

/* Panel label children can carry their own hardcoded colours (e.g.
   mood-ink panel-origin .pl-num). Force them back to the accent. */
html body.quiet-mode .chapter .panel-origin .panel-label .pl-num,
html body.quiet-mode .chapter .panel-origin .panel-label .pl-cn,
html body.quiet-mode .chapter .panel-origin .origin-gloss .og-mark {
  color: var(--seal) !important;
}

/* Strip / origin / foot hardcoded light colours that survive the
   --ink restoration above. */
html body.quiet-mode .chapter .chapter-strip,
html body.quiet-mode .chapter .chapter-strip .cs-num,
html body.quiet-mode .chapter .chapter-strip .cs-cn-han,
html body.quiet-mode .chapter .chapter-strip .cs-cn-py,
html body.quiet-mode .chapter .chapter-strip .cs-num-py,
html body.quiet-mode .chapter .chapter-strip .cs-en,
html body.quiet-mode .chapter .chapter-strip .cs-th,
html body.quiet-mode .chapter .chapter-strip .cs-progress,
html body.quiet-mode .chapter .chapter-strip .cs-route,
html body.quiet-mode .chapter .chapter-foot,
html body.quiet-mode .chapter .chapter-foot button,
html body.quiet-mode .chapter .chapter-foot .ch-marker,
html body.quiet-mode .chapter .cn-stack-char:not(.is-speaking) .cs-c,
html body.quiet-mode .chapter .cn-stack-char:not(.is-speaking) .cs-py,
html body.quiet-mode .chapter .cn-stack-punct,
html body.quiet-mode .chapter .origin-gloss,
html body.quiet-mode .chapter .direct-text,
html body.quiet-mode .chapter .reading-aside,
html body.quiet-mode .chapter .reading-aside .ra-q,
html body.quiet-mode .chapter .joke-text,
html body.quiet-mode .chapter .joke-layer {
  color: var(--ink-fade) !important;
  /* §11.10: 3 of these 18 selectors (cs-cn-py .85, cs-num-py .75,
     cn-stack-char .cs-py .9) carry a base-rule opacity that dilutes
     this color below AA — same class of bug as joke-layer/cd-label em.
     The other 15 have no opacity, so this is a no-op for them. */
  opacity: 1 !important;
}

/* §11.10 — quiet-mode: mood dark chips + forced dark ra-q text = unreadable.
   Restore paper chip and ink hierarchy on reading aside + artifact cites. */
html body.quiet-mode .chapter .reading-aside {
  background: var(--paper-soft) !important;
  border: 1px solid var(--rule);
  padding: 14px 16px;
}

html body.quiet-mode .chapter .reading-aside .ra-q {
  color: var(--ink) !important;
}

html body.quiet-mode .chapter .artifact-cite {
  background: var(--paper-soft) !important;
  border-color: var(--rule);
  border-left-color: var(--gold);
}

html body.quiet-mode .chapter .artifact-cite .ac-subject {
  color: var(--ink) !important;
}

html body.quiet-mode .chapter .artifact-cite .ac-caption {
  color: var(--ink-2) !important;
}

html body.quiet-mode .chapter .artifact-cite .ac-source {
  color: var(--ink-3) !important;
}

html body.quiet-mode .chapter .reading-figure {
  background: var(--paper-soft) !important;
  border-color: var(--rule);
}

html body.quiet-mode .chapter .reading-figure .rf-cap {
  color: var(--ink-soft) !important;
}

html body.quiet-mode .chapter .reading-figure .rf-credit {
  color: var(--ink-fade) !important;
}

/* Make the chapter strip a hairline rule, not a coloured ribbon. */
html body.quiet-mode .chapter-strip {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule);
}

/* Make the topbar quiet too: no animated backgrounds, plain cream. */
html body.quiet-mode .topbar {
  background: var(--paper) !important;
}

/* ============================================================
   LIGHT CHAPTER BRIDGE — explain the absence of commentary, so
   light chapters feel intentional rather than broken.
   ============================================================ */
.light-bridge {
  max-width: 56ch;
  margin: 40px auto 24px;
  padding: 18px 24px;
  border-top: 1px solid var(--rule-soft, rgba(0, 0, 0, .10));
  border-bottom: 1px solid var(--rule-soft, rgba(0, 0, 0, .10));
  text-align: center;
}

.light-bridge p {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-fade);
  margin: 0;
}

body.lang-th .light-bridge p {
  font-family: var(--th);
  font-style: normal;
  font-size: 15px;
}

body.lang-cn .light-bridge p {
  font-family: var(--cn-serif);
  font-style: normal;
  font-size: 15px;
  letter-spacing: .02em;
}

@media (max-width: 600px) {
  .pinyin-toggle .pt-roman {
    display: none;
  }

  .pinyin-toggle {
    padding: 0 7px;
  }
}

/* ============================================================
   INLINE PINYIN — every Chinese phrase in chrome carries its
   pinyin in a small italic <em>. Consistent everywhere.
   ============================================================ */
.about-kicker em,
.currents-kicker em,
.wild-kicker em,
.as-label em,
.era-name .en-cn em,
.preface em.cs-py-sub,
.cover-sub em.cs-py-sub,
.panel-label em,
.tsai-credit em,
.index-title em,
.index-part em,
.origin-meta em,
.origin-num-roman em {
  font-family: var(--mono);
  font-size: .82em;
  font-weight: 300;
  font-style: italic;
  letter-spacing: .08em;
  color: var(--seal);
  opacity: .9;
  text-transform: lowercase;
  margin: 0 4px 0 2px;
}

.panel-label em {
  font-size: 10px;
  letter-spacing: .14em;
}

body.pinyin-off .about-kicker em,
body.pinyin-off .currents-kicker em,
body.pinyin-off .wild-kicker em,
body.pinyin-off .as-label em,
body.pinyin-off .era-name .en-cn em,
body.pinyin-off .preface em.cs-py-sub,
body.pinyin-off .cover-sub em.cs-py-sub,
body.pinyin-off .panel-label em,
body.pinyin-off .index-title em,
body.pinyin-off .index-part em,
body.pinyin-off .origin-meta em,
body.pinyin-off .origin-num-roman em {
  display: none;
}

/* ============================================================
   PANEL — SUMMARY · the Daily-Stoic spine
   One sentence. Three languages. Sits below the chapter strip,
   before the Origin panel. Treated like a quotation — not chrome.
   ============================================================ */
.panel-summary {
  background: var(--paper);
  padding: clamp(40px, 6vh, 80px) 6vw clamp(32px, 5vh, 64px);
  border-bottom: 1px solid var(--rule-soft);
}

.summary-frame {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.summary-frame .su-cn-py {
  font-family: var(--mono);
  font-size: var(--size-sm);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--seal);
  opacity: .9;
  margin: 0 0 6px;
  line-height: 1;
}

.summary-frame .su-cn {
  font-family: var(--cn-elegant);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 6px;
  color: var(--seal);
  margin: 0 0 18px;
  line-height: 1;
  font-weight: 400;
}

.summary-frame .su-en,
.summary-frame .su-th {
  font-family: var(--reader);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
  font-style: italic;
  text-wrap: pretty;
  border-left: 3px solid var(--seal);
  padding-left: 22px;
}

.summary-frame .su-th {
  font-family: var(--th);
  font-style: normal;
}

body.lang-en .summary-frame .su-th {
  display: none;
}

body.lang-th .summary-frame .su-en {
  display: none;
}

body.lang-cn .summary-frame .su-en,
body.lang-cn .summary-frame .su-th {
  display: none;
}

@media (max-width: 600px) {
  .summary-frame .su-cn {
    font-size: 20px;
    letter-spacing: 4px;
  }

  .summary-frame .su-en,
  .summary-frame .su-th {
    font-size: 18px;
    padding-left: 16px;
  }
}

/* ============================================================
   SML XL TYPOGRAPHY RHYTHM
   The summary sentence at chapter top should be IMPOSSIBLE to miss.
   It is the hook. The reader makes the continue-or-bounce decision
   here, in under 3 seconds. Make it unmissable.
   Every third panel should feel visually shorter than the others —
   vary the rhythm so it doesn't feel like one long document.
   ============================================================ */

/* HUGE summary — the newspaper headline */
.panel-summary .summary-frame .su-en,
.panel-summary .summary-frame .su-th {
  font-size: clamp(24px, 3.2vw, 40px) !important;
  line-height: 1.25 !important;
  font-weight: 400;
}

.panel-summary .summary-frame .su-cn {
  font-size: clamp(24px, 3.6vw, 48px) !important;
  letter-spacing: 8px !important;
  margin-bottom: 22px !important;
}

/* ============================================================
   LEARNER CHECKPOINTS — distributed benchmark banners
   ============================================================ */
.panel-checkpoint {
  background:
    linear-gradient(135deg, rgba(168, 51, 50, .06), rgba(184, 137, 58, .08)),
    var(--paper-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  padding: clamp(42px, 7vh, 84px) 6vw;
}

.checkpoint-frame {
  max-width: 980px;
  margin: 0 auto;
}

.checkpoint-kicker {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--seal);
}

.checkpoint-main {
  margin: 0;
  font-family: var(--th);
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.25;
  color: var(--ink);
  max-width: 22ch;
}

.checkpoint-gloss {
  margin: 18px 0 0;
  max-width: 44ch;
  font-family: var(--reader);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-fade);
}

@media (max-width: 720px) {
  .checkpoint-main {
    max-width: 100%;
    font-size: clamp(24px, 8vw, 38px);
  }
}

/* NPM artwork — break out of panels to feel full-width */
.npm-img-wrap {
  padding: 0;
  margin: 0 calc(-6vw);
  width: calc(100% + 12vw);
  max-height: none;
}

/* ≤600px the panel pads 5vw, not 6vw — the 6vw breakout overshot the
   viewport by 2vw (~8px of horizontal scroll on every painting panel) */
@media (max-width: 600px) {
  .npm-img-wrap {
    margin: 0 calc(-5vw);
    width: calc(100% + 10vw);
  }
}

.npm-img-wrap img {
  width: 100%;
  max-height: 70vh;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 820px) {
  .npm-img-wrap {
    margin: 0;
    width: 100%;
  }
}

/* Closing question — LARGE, intimate, slightly off the grid */
.closer-q {
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.3 !important;
}

/* In-progress badge — shown when Thai reading is still being written */
.lang-fallback-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--ink-mute);
  margin: 0 0 16px;
  opacity: .75;
}

.lang-fallback-tag::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-silver);
  flex-shrink: 0;
}

.is-fallback {
  opacity: .82;
}

/* Skip-to-content — visible on focus, otherwise off-screen */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: none;
  transition: top .15s;
}

.skip-link:focus {
  top: 0;
}

/* Screen-reader only label — visible to assistive tech, hidden visually */
.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;
}

/* ============================================================
   MOOD MODULES — each chapter wears a visual register
   The mood class lives on .chapter; rules below scope into the
   chapter to recolour the summary, the chapter-strip accent,
   and (sparingly) the Origin chars. Every change is small but
   noticeable — the book keeps the same skeleton; the skin shifts.
   ============================================================ */

/* ============================================================
   MOOD MODULES — DRAMATIC EDITION
   Every chapter wears a different magazine spread. Pop-art,
   cyberpunk, watercolor, graph paper, smoke-and-stars, newsprint.
   The treatments override .chapter:nth-child(odd) using !important
   on the background only.
   ============================================================ */

/* — Dark-mood contrast lift: re-scope --ink-fade/--ink-mute so the
   357 anonymous spans (echoes, descriptors, etc.) on dark backgrounds
   pass §11.10 (WCAG AA). Applies to mood-cosmic (any cosmic chapter)
   AND chapter 81 (the dark final-chapter override). */
.chapter.mood-cosmic,
.chapter[data-n="81"],
.chapter.mood-mirror {
  /* Text tokens only — do NOT override --ink (used as a dark surface by
     panel-image, summary-frame, mood-mirror chapter bg in light mode). */
  --ink-soft: rgba(244, 235, 213, .92);
  --ink-fade: rgba(244, 235, 213, .78);
  --ink-mute: rgba(244, 235, 213, .6);
}

/* — COSMIC: the source chapters. Smoke. Stars. Big seal. */
.chapter.mood-cosmic {
  background: radial-gradient(ellipse at 20% 15%, rgba(168, 51, 50, .08), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(74, 107, 86, .06), transparent 50%),
    linear-gradient(180deg, #1a1815 0%, #0e0c08 100%) !important;
  color: var(--paper);
}

.chapter.mood-cosmic .chapter-strip {
  background: rgba(14, 12, 8, .92);
  color: rgba(244, 235, 213, .6);
  border-bottom-color: rgba(244, 235, 213, .12);
}

.chapter.mood-cosmic .chapter-strip .cs-cn-han {
  color: var(--paper);
}

.chapter.mood-cosmic .chapter-strip .cs-cn-py,
.chapter.mood-cosmic .chapter-strip .cs-num-py {
  color: var(--gold);
}

.chapter.mood-cosmic .chapter-strip .cs-en,
.chapter.mood-cosmic .chapter-strip .cs-th {
  color: rgba(244, 235, 213, .7);
}

.chapter.mood-cosmic .panel-summary {
  background: transparent;
  border-bottom: 1px solid rgba(244, 235, 213, .1);
}

.chapter.mood-cosmic .summary-frame .su-cn-py {
  color: var(--gold);
}

.chapter.mood-cosmic .summary-frame .su-cn {
  color: var(--gold);
  letter-spacing: 14px;
}

.chapter.mood-cosmic .summary-frame .su-en,
.chapter.mood-cosmic .summary-frame .su-th {
  color: rgba(244, 235, 213, .95);
  border-left-color: var(--gold);
}

.chapter.mood-cosmic .panel-origin {
  background: transparent;
}

.chapter.mood-cosmic .origin-num-roman {
  color: var(--gold);
}

.chapter.mood-cosmic .origin-cn-title {
  color: var(--paper);
  letter-spacing: 16px;
}

.chapter.mood-cosmic .origin-cn-title-py {
  color: var(--gold);
}

.chapter.mood-cosmic .origin-en-title,
.chapter.mood-cosmic .origin-th-title {
  color: rgba(244, 235, 213, .78);
}

.chapter.mood-cosmic .origin-meta {
  color: rgba(244, 235, 213, .5);
}

.chapter.mood-cosmic .origin-meta em {
  color: var(--gold);
}

.chapter.mood-cosmic .cn-stack-char .cs-c {
  color: var(--paper);
}

.chapter.mood-cosmic .cn-stack-char .cs-py {
  color: var(--gold);
  opacity: .95;
}

.chapter.mood-cosmic .cn-stack-punct {
  color: rgba(244, 235, 213, .5);
}

.chapter.mood-cosmic .origin-line {
  border-top-color: rgba(244, 235, 213, .1);
}

.chapter.mood-cosmic .origin-gloss {
  color: rgba(244, 235, 213, .85);
}

.chapter.mood-cosmic .origin-gloss .og-mark {
  color: var(--gold);
}

.chapter.mood-cosmic .panel-direct,
.chapter.mood-cosmic .panel-reading,
.chapter.mood-cosmic .panel-note {
  background: transparent;
  color: var(--paper);
}

.chapter.mood-cosmic .direct-text,
.chapter.mood-cosmic .reading-body,
.chapter.mood-cosmic .note-body {
  color: rgba(244, 235, 213, .92);
}

.chapter.mood-cosmic .panel-label .pl-num,
.chapter.mood-cosmic .panel-label>span:nth-child(2),
.chapter.mood-cosmic .panel-label .pl-cn {
  color: var(--gold);
}

.chapter.mood-cosmic .reading-aside {
  background: rgba(244, 235, 213, .06);
  color: rgba(244, 235, 213, .78);
}

.chapter.mood-cosmic .reading-aside .ra-q {
  color: var(--gold);
}

.chapter.mood-cosmic .reading-sources {
  color: rgba(244, 235, 213, .6);
}

.chapter.mood-cosmic .chapter-foot {
  background: transparent;
  border-top-color: rgba(244, 235, 213, .18);
  color: rgba(244, 235, 213, .6);
}

.chapter.mood-cosmic .chapter-foot button {
  color: rgba(244, 235, 213, .85);
}

.chapter.mood-cosmic .chapter-foot button:hover {
  color: var(--gold);
}

.chapter.mood-cosmic .chapter-foot .ch-marker {
  color: var(--gold);
}

/* — WABI: silence chapters. Maximum air. Almost empty. */
.chapter.mood-wabi {
  background: #fbfaf3 !important;
}

.chapter.mood-wabi .panel-summary {
  padding-top: clamp(80px, 12vh, 160px);
  padding-bottom: clamp(60px, 9vh, 110px);
}

.chapter.mood-wabi .summary-frame {
  max-width: 480px;
}

.chapter.mood-wabi .summary-frame .su-cn {
  font-family: var(--cn-elegant);
  color: var(--ink-fade);
  letter-spacing: 18px;
  font-size: clamp(20px, 2vw, 26px);
}

.chapter.mood-wabi .summary-frame .su-en,
.chapter.mood-wabi .summary-frame .su-th {
  border-left: none;
  padding-left: 0;
  font-style: normal;
  font-family: var(--reader);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -.005em;
}

/* dark panel-summary background needs light text */
.chapter.mood-wabi .panel-summary .summary-frame .su-cn {
  color: #fbfaf3;
}
.chapter.mood-wabi .panel-summary .summary-frame .su-en,
.chapter.mood-wabi .panel-summary .summary-frame .su-th {
  color: #f4f1e8;
}

.chapter.mood-wabi .panel-origin {
  padding-bottom: clamp(80px, 12vh, 160px);
}

/* — NATURAL: watercolor jade and a faint river. */
.chapter.mood-natural {
  background: linear-gradient(180deg, #f4f6ee 0%, #e7ede0 100%) !important;
  position: relative;
}

.chapter.mood-natural::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 30% at 10% 25%, rgba(74, 107, 86, .10), transparent 70%),
    radial-gradient(ellipse 50% 28% at 90% 80%, rgba(74, 107, 86, .08), transparent 70%);
  z-index: 0;
}

.chapter.mood-natural>* {
  position: relative;
  z-index: 1;
}

.chapter.mood-natural .chapter-strip {
  background: rgba(244, 246, 238, .92);
  color: var(--jade);
  border-bottom-color: rgba(74, 107, 86, .18);
}

.chapter.mood-natural .summary-frame .su-cn {
  color: var(--jade);
}

.chapter.mood-natural .summary-frame .su-cn-py {
  color: var(--jade);
}

.chapter.mood-natural .summary-frame .su-en,
.chapter.mood-natural .summary-frame .su-th {
  border-left-color: var(--jade);
}

.chapter.mood-natural .cn-stack-char .cs-py {
  color: var(--jade);
}

.chapter.mood-natural .origin-num-roman,
.chapter.mood-natural .origin-cn-title-py {
  color: var(--jade);
}

.chapter.mood-natural .panel-direct {
  background: rgba(74, 107, 86, .06);
}

.chapter.mood-natural .origin-gloss .og-mark {
  color: var(--jade);
}

/* — CIVIC: NEWSPAPER. Heavy black rules, masthead title, columnar. */
.chapter.mood-civic {
  background: #f4f1e8 !important;
}

.chapter.mood-civic .chapter-strip {
  border-top: 4px double var(--ink);
  border-bottom: 4px double var(--ink);
  background: #f4f1e8;
}

.chapter.mood-civic .panel-summary {
  background: #f4f1e8;
}

.chapter.mood-civic .summary-frame {
  max-width: 720px;
}

.chapter.mood-civic .summary-frame .su-cn-py {
  font-family: var(--mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
}

.chapter.mood-civic .summary-frame .su-cn {
  font-family: var(--cn-elegant);
  letter-spacing: 8px;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.chapter.mood-civic .summary-frame .su-en,
.chapter.mood-civic .summary-frame .su-th {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  border-left: none;
  padding: 12px 0 0;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.25;
  color: var(--ink);
}

/* dark panel-summary background needs light text */
.chapter.mood-civic .panel-summary .summary-frame .su-cn-py {
  color: #d5dac4;
}
.chapter.mood-civic .panel-summary .summary-frame .su-cn {
  color: #f4f1e8;
  border-bottom-color: rgba(244, 241, 232, .4);
}
.chapter.mood-civic .panel-summary .summary-frame .su-en,
.chapter.mood-civic .panel-summary .summary-frame .su-th {
  color: #f4f1e8;
}

/* — POP: WARHOL. Halftone field, big duplicate seal, primary colors. */
.chapter.mood-pop {
  background:
    radial-gradient(circle at 20% 30%, rgba(232, 75, 90, .18) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 200, 40, .20) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(50, 140, 210, .10) 0%, transparent 60%),
    repeating-radial-gradient(circle at center, var(--paper) 0 1px, transparent 1px 6px),
    var(--paper) !important;
}

.chapter.mood-pop .panel-summary {
  background: transparent;
  position: relative;
}

.chapter.mood-pop .summary-frame {
  background: var(--ink);
  color: var(--paper);
  padding: 36px 32px;
  border: 4px solid var(--ink);
  max-width: 640px;
  position: relative;
  box-shadow: 8px 8px 0 0 var(--seal);
}

.chapter.mood-pop .summary-frame::before {
  content: "POW";
  position: absolute;
  top: -16px;
  right: 20px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  padding: 4px 12px;
  letter-spacing: .1em;
  border: 2px solid var(--ink);
  font-size: 14px;
  transform: rotate(6deg);
}

.chapter.mood-pop .summary-frame .su-cn-py {
  color: var(--gold);
}

.chapter.mood-pop .summary-frame .su-cn {
  color: var(--gold);
  letter-spacing: 12px;
  font-size: clamp(28px, 3.2vw, 40px) !important;
}

.chapter.mood-pop .summary-frame .su-en,
.chapter.mood-pop .summary-frame .su-th {
  color: var(--paper);
  border-left-color: var(--gold);
  border-left-width: 4px;
  font-style: normal;
  font-weight: 500;
}

.chapter.mood-pop .origin-cn-title {
  color: var(--seal);
  text-shadow: 4px 4px 0 var(--gold), 8px 8px 0 var(--ink);
  letter-spacing: 12px;
}

/* — CRYPTIC: CYBERPUNK. Dark navy, neon lime accents, scanlines. */
.chapter.mood-cryptic {
  --ink: #cfe7ad;
  --ink-soft: rgba(207, 231, 173, .92);
  --ink-fade: rgba(207, 231, 173, .78);
  --ink-mute: rgba(207, 231, 173, .6);
  background:
    repeating-linear-gradient(0deg, rgba(180, 255, 80, .04) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #0d1224 0%, #14182e 100%) !important;
  color: #cfe7ad;
}

.chapter.mood-cryptic .chapter-strip {
  background: rgba(13, 18, 36, .95);
  color: #82d65f;
  border-bottom-color: rgba(180, 255, 80, .2);
}

.chapter.mood-cryptic .chapter-strip .cs-cn-han {
  color: #d4f5b5;
}

.chapter.mood-cryptic .chapter-strip .cs-cn-py,
.chapter.mood-cryptic .chapter-strip .cs-num-py {
  color: #ff6ec7;
}

.chapter.mood-cryptic .chapter-strip .cs-en,
.chapter.mood-cryptic .chapter-strip .cs-th {
  color: #b9d8a4;
}

.chapter.mood-cryptic .panel-summary {
  background: transparent;
}

.chapter.mood-cryptic .summary-frame .su-cn-py {
  font-family: var(--mono);
  color: #ff6ec7;
  text-transform: uppercase;
  letter-spacing: .25em;
}

.chapter.mood-cryptic .summary-frame .su-cn {
  font-family: var(--mono);
  color: #82d65f;
  letter-spacing: .15em;
  text-shadow: 2px 0 0 #ff6ec7, -2px 0 0 #00d9ff;
  font-size: clamp(22px, 2.4vw, 30px) !important;
}

.chapter.mood-cryptic .summary-frame .su-en,
.chapter.mood-cryptic .summary-frame .su-th {
  font-family: var(--mono);
  color: #d4f5b5;
  border-left-style: dashed;
  border-left-color: #ff6ec7;
  font-style: normal;
  font-size: 17px !important;
  line-height: 1.65;
}

.chapter.mood-cryptic .panel-origin {
  background: transparent;
}

.chapter.mood-cryptic .origin-num-roman {
  color: #ff6ec7;
}

.chapter.mood-cryptic .origin-cn-title {
  color: #d4f5b5;
}

.chapter.mood-cryptic .origin-cn-title-py {
  color: #ff6ec7;
  text-transform: uppercase;
}

/* dark navy bg — light pink reads 7.2:1; do not darken */
.chapter.mood-cryptic .origin-en-title,
.chapter.mood-cryptic .origin-th-title {
  color: #b9d8a4;
}

.chapter.mood-cryptic .origin-meta {
  color: #82d65f;
}

.chapter.mood-cryptic .origin-meta em {
  color: #ff6ec7;
}

.chapter.mood-cryptic .cn-stack-char .cs-c {
  color: #d4f5b5;
}

.chapter.mood-cryptic .cn-stack-char .cs-py {
  color: #ff6ec7;
  text-transform: uppercase;
}

/* dark navy bg — light pink reads 7.2:1; do not darken */
.chapter.mood-cryptic .cn-stack-punct {
  color: #82d65f;
  opacity: .6;
}

.chapter.mood-cryptic .origin-line {
  border-top-color: rgba(180, 255, 80, .15);
}

.chapter.mood-cryptic .origin-gloss {
  color: #b9d8a4;
  font-style: normal;
  font-family: var(--mono);
  font-size: 14px;
}

.chapter.mood-cryptic .origin-gloss .og-mark {
  color: #ff6ec7;
}

.chapter.mood-cryptic .panel-direct,
.chapter.mood-cryptic .panel-reading,
.chapter.mood-cryptic .panel-note {
  background: transparent;
}

.chapter.mood-cryptic .direct-text,
.chapter.mood-cryptic .reading-body,
.chapter.mood-cryptic .note-body {
  color: #d4f5b5;
  font-family: var(--mono);
  font-size: 15px;
}

.chapter.mood-cryptic .panel-label .pl-num,
.chapter.mood-cryptic .panel-label>span:nth-child(2),
.chapter.mood-cryptic .panel-label .pl-cn {
  color: #ff6ec7;
}

.chapter.mood-cryptic .reading-aside {
  background: rgba(180, 255, 80, .06);
  color: #b9d8a4;
}

.chapter.mood-cryptic .reading-aside .ra-q {
  color: #82d65f;
}

.chapter.mood-cryptic .chapter-foot {
  background: transparent;
  border-top-color: rgba(180, 255, 80, .2);
  color: #b9d8a4;
}

.chapter.mood-cryptic .chapter-foot button {
  color: #d4f5b5;
}

.chapter.mood-cryptic .chapter-foot button:hover {
  color: #ff6ec7;
}

.chapter.mood-cryptic .chapter-foot .ch-marker {
  color: #ff6ec7;
}

/* — PHYSICS: GRAPH PAPER. Theorem layout. Geometric. */
.chapter.mood-physics {
  background:
    linear-gradient(rgba(74, 107, 86, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 107, 86, .07) 1px, transparent 1px),
    var(--bone) !important;
  background-size: 24px 24px, 24px 24px, auto;
}

.chapter.mood-physics .panel-summary {
  background: transparent;
}

.chapter.mood-physics .summary-frame {
  border: 2px solid var(--ink);
  padding: 32px;
  max-width: 640px;
  background: var(--paper);
  position: relative;
}

.chapter.mood-physics .summary-frame::before {
  content: "Theorem";
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--paper);
  color: var(--seal);
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-style: italic;
}

.chapter.mood-physics .summary-frame .su-cn-py {
  font-family: var(--mono);
  letter-spacing: .25em;
  text-transform: uppercase;
}

.chapter.mood-physics .summary-frame .su-cn {
  font-family: var(--mono);
  font-size: 16px !important;
  letter-spacing: .14em;
  color: var(--ink);
  text-transform: none;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.chapter.mood-physics .summary-frame .su-en,
.chapter.mood-physics .summary-frame .su-th {
  font-family: var(--reader);
  font-style: normal;
  font-size: 19px !important;
  border-left: none;
  padding-left: 0;
  line-height: 1.5;
}

.chapter.mood-physics .summary-frame .su-en::after,
.chapter.mood-physics .summary-frame .su-th::after {
  content: " ∎";
  color: var(--seal);
  margin-left: 6px;
}

.chapter.mood-physics .panel-origin {
  background: transparent;
}

.chapter.mood-physics .panel-direct {
  background: rgba(74, 107, 86, .05);
}

/* — MIRROR: the closing chapter, ch 81. Reverse. */
.chapter.mood-mirror {
  background: var(--ink) !important;
  color: var(--paper);
}

.chapter.mood-mirror .chapter-strip {
  background: var(--ink);
  color: var(--paper);
  border-bottom-color: rgba(244, 235, 213, .2);
}

.chapter.mood-mirror .chapter-strip .cs-cn,
.chapter.mood-mirror .chapter-strip .cs-en,
.chapter.mood-mirror .chapter-strip .cs-th {
  color: var(--paper);
}

.chapter.mood-mirror .panel-summary,
.chapter.mood-mirror .panel-origin,
.chapter.mood-mirror .panel-direct,
.chapter.mood-mirror .panel-reading,
.chapter.mood-mirror .panel-note {
  background: var(--ink) !important;
  color: var(--paper);
}

.chapter.mood-mirror .summary-frame .su-cn {
  color: var(--seal);
}

.chapter.mood-mirror .summary-frame .su-en,
.chapter.mood-mirror .summary-frame .su-th {
  color: var(--paper);
  border-left-color: var(--gold);
}

.chapter.mood-mirror .origin-cn-title,
.chapter.mood-mirror .origin-num-roman,
.chapter.mood-mirror .origin-meta,
.chapter.mood-mirror .origin-en-title,
.chapter.mood-mirror .origin-th-title {
  color: var(--paper);
}

.chapter.mood-mirror .cn-stack-char .cs-c,
.chapter.mood-mirror .cn-stack-punct {
  color: var(--paper);
}

.chapter.mood-mirror .cn-stack-char .cs-py {
  color: var(--gold);
}

.chapter.mood-mirror .origin-gloss {
  color: rgba(244, 235, 213, .85);
}

.chapter.mood-mirror .origin-gloss .og-mark {
  color: var(--gold);
}

.chapter.mood-mirror .origin-line {
  border-top-color: rgba(244, 235, 213, .12);
}

.chapter.mood-mirror .direct-text {
  color: rgba(244, 235, 213, .92);
}

.chapter.mood-mirror .reading-frame .reading-aside {
  background: rgba(244, 235, 213, .06);
  color: rgba(244, 235, 213, .78);
}

.chapter.mood-mirror .reading-body {
  color: rgba(244, 235, 213, .92);
}

.chapter.mood-mirror .note-body {
  color: rgba(244, 235, 213, .92);
  border-left-color: var(--gold);
}

.chapter.mood-mirror .chapter-foot {
  background: var(--ink);
  border-top-color: rgba(244, 235, 213, .18);
  color: rgba(244, 235, 213, .55);
}

.chapter.mood-mirror .chapter-foot button {
  color: rgba(244, 235, 213, .85);
}

.chapter.mood-mirror .chapter-foot .ch-marker {
  color: var(--gold);
}

.chapter.mood-mirror .chapter-foot button:hover {
  color: var(--gold);
}

/* — SEA: deep water, jade, cool. */
.chapter.mood-sea {
  --ink: #e8f0f0;
  --ink-soft: rgba(232, 240, 240, .92);
  --ink-fade: rgba(232, 240, 240, .78);
  --ink-mute: rgba(232, 240, 240, .6);
  background: linear-gradient(180deg, #1a3a3a 0%, #0d2828 100%) !important;
  color: #e8f0f0;
}

.chapter.mood-sea .chapter-strip {
  background: rgba(13, 40, 40, .85);
  color: #a8d5d5;
  border-bottom-color: rgba(100, 180, 180, .2);
}

.chapter.mood-sea .summary-frame .su-cn {
  color: #a8d5d5;
  letter-spacing: 14px;
}

.chapter.mood-sea .summary-frame .su-cn-py {
  color: #64b4b4;
}

.chapter.mood-sea .summary-frame .su-en,
.chapter.mood-sea .summary-frame .su-th {
  color: #e8f0f0;
  border-left-color: #64b4b4;
}

.chapter.mood-sea .origin-cn-title {
  color: #e8f0f0;
  letter-spacing: 14px;
}

.chapter.mood-sea .origin-cn-title-py {
  color: #64b4b4;
}

.chapter.mood-sea .origin-en-title,
.chapter.mood-sea .origin-th-title {
  color: rgba(232, 240, 240, .75);
}

.chapter.mood-sea .origin-meta {
  color: rgba(232, 240, 240, .45);
}

.chapter.mood-sea .cn-stack-char .cs-c {
  color: #e8f0f0;
}

.chapter.mood-sea .cn-stack-char .cs-py {
  color: #64b4b4 !important;
}

/* dark teal bg — light teal reads 6.0:1; do not darken */
.chapter.mood-sea .origin-line {
  border-top-color: rgba(100, 180, 180, .15);
}

.chapter.mood-sea .origin-gloss {
  color: rgba(232, 240, 240, .85);
}

.chapter.mood-sea .origin-gloss .og-mark {
  color: #64b4b4;
}

.chapter.mood-sea .panel-reading,
.chapter.mood-sea .panel-note {
  background: transparent;
  color: #e8f0f0;
}

.chapter.mood-sea .reading-body,
.chapter.mood-sea .note-body {
  color: rgba(232, 240, 240, .92);
}

.chapter.mood-sea .panel-label .pl-num,
.chapter.mood-sea .panel-label>span:nth-child(2),
.chapter.mood-sea .panel-label .pl-cn {
  color: #64b4b4;
}

.chapter.mood-sea .reading-aside {
  background: rgba(100, 180, 180, .06);
  color: rgba(232, 240, 240, .75);
}

.chapter.mood-sea .reading-aside .ra-q {
  color: #a8d5d5;
}

.chapter.mood-sea .chapter-foot {
  background: transparent;
  border-top-color: rgba(100, 180, 180, .15);
}

.chapter.mood-sea .chapter-foot button {
  color: rgba(232, 240, 240, .8);
}

.chapter.mood-sea .chapter-foot button:hover {
  color: #64b4b4;
}

.chapter.mood-sea .chapter-foot .ch-marker {
  color: #64b4b4;
}

/* — STONE: grey weight, iron, funeral. */
.chapter.mood-stone {
  --ink: #d0d0d0;
  --ink-soft: rgba(208, 208, 208, .92);
  --ink-fade: rgba(208, 208, 208, .78);
  --ink-mute: rgba(208, 208, 208, .6);
  background: #2a2a2a !important;
  color: #d0d0d0;
}

.chapter.mood-stone .chapter-strip {
  background: rgba(30, 30, 30, .9);
  color: #888;
  border-bottom-color: rgba(100, 100, 100, .3);
}

.chapter.mood-stone .summary-frame .su-cn {
  color: #aaa;
  letter-spacing: 12px;
}

.chapter.mood-stone .summary-frame .su-cn-py {
  color: #aaa;
}

/* dark stone bg #2a2a2a — 5.81:1 */
.chapter.mood-stone .summary-frame .su-en,
.chapter.mood-stone .summary-frame .su-th {
  color: #d0d0d0;
  border-left-color: #666;
}

.chapter.mood-stone .origin-cn-title {
  color: #e0e0e0;
  letter-spacing: 12px;
}

.chapter.mood-stone .origin-cn-title-py {
  color: #aaa;
}

/* dark stone bg #2a2a2a — 5.81:1 */
.chapter.mood-stone .origin-en-title,
.chapter.mood-stone .origin-th-title {
  color: rgba(208, 208, 208, .7);
}

.chapter.mood-stone .origin-meta {
  color: rgba(208, 208, 208, .45);
}

.chapter.mood-stone .cn-stack-char .cs-c {
  color: #e0e0e0;
}

.chapter.mood-stone .cn-stack-char .cs-py {
  color: #777;
}

.chapter.mood-stone .origin-line {
  border-top-color: rgba(100, 100, 100, .2);
}

.chapter.mood-stone .origin-gloss {
  color: rgba(208, 208, 208, .85);
}

.chapter.mood-stone .origin-gloss .og-mark {
  color: #888;
}

.chapter.mood-stone .panel-reading,
.chapter.mood-stone .panel-note {
  background: transparent;
  color: #d0d0d0;
}

.chapter.mood-stone .reading-body,
.chapter.mood-stone .note-body {
  color: rgba(208, 208, 208, .92);
}

.chapter.mood-stone .panel-label .pl-num,
.chapter.mood-stone .panel-label>span:nth-child(2),
.chapter.mood-stone .panel-label .pl-cn {
  color: #888;
}

.chapter.mood-stone .reading-aside {
  background: rgba(100, 100, 100, .06);
  color: rgba(208, 208, 208, .7);
}

.chapter.mood-stone .reading-aside .ra-q {
  color: #aaa;
}

.chapter.mood-stone .chapter-foot {
  background: transparent;
  border-top-color: rgba(100, 100, 100, .2);
}

.chapter.mood-stone .chapter-foot button {
  color: rgba(208, 208, 208, .8);
}

.chapter.mood-stone .chapter-foot button:hover {
  color: #aaa;
}

.chapter.mood-stone .chapter-foot .ch-marker {
  color: #888;
}

/* — FLESH: warmth, infant, rose, organic. */
.chapter.mood-flesh {
  background: #faf5f0 !important;
  color: #4a2c2a;
}

.chapter.mood-flesh .chapter-strip {
  background: rgba(250, 245, 240, .92);
  color: #8b5a5a;
  border-bottom-color: rgba(180, 120, 120, .2);
}

.chapter.mood-flesh .summary-frame .su-cn {
  color: #8b5a5a;
  letter-spacing: 14px;
}

.chapter.mood-flesh .summary-frame .su-cn-py {
  color: #904040;
}

/* cream bg #faf5f0 — 6.11:1 */
.chapter.mood-flesh .summary-frame .su-en,
.chapter.mood-flesh .summary-frame .su-th {
  color: #4a2c2a;
  border-left-color: #c08080;
}

.chapter.mood-flesh .origin-cn-title {
  color: #4a2c2a;
  letter-spacing: 14px;
}

.chapter.mood-flesh .origin-cn-title-py {
  color: #904040;
}

/* cream bg #faf5f0 — 6.11:1 */
.chapter.mood-flesh .origin-en-title,
.chapter.mood-flesh .origin-th-title {
  color: rgba(74, 44, 42, .75);
}

.chapter.mood-flesh .origin-meta {
  color: rgba(74, 44, 42, .5);
}

.chapter.mood-flesh .cn-stack-char .cs-c {
  color: #4a2c2a;
}

.chapter.mood-flesh .cn-stack-char .cs-py {
  color: #904040;
}

/* was #c08080 — darkened for WCAG AA (5.91:1 on --paper) */
.chapter.mood-flesh .origin-line {
  border-top-color: rgba(180, 120, 120, .15);
}

.chapter.mood-flesh .origin-gloss {
  color: rgba(74, 44, 42, .85);
}

.chapter.mood-flesh .origin-gloss .og-mark {
  color: #c08080;
}

.chapter.mood-flesh .panel-reading,
.chapter.mood-flesh .panel-note {
  background: transparent;
  color: #4a2c2a;
}

.chapter.mood-flesh .reading-body,
.chapter.mood-flesh .note-body {
  color: rgba(74, 44, 42, .92);
}

.chapter.mood-flesh .panel-label .pl-num,
.chapter.mood-flesh .panel-label>span:nth-child(2),
.chapter.mood-flesh .panel-label .pl-cn {
  color: #c08080;
}

.chapter.mood-flesh .reading-aside {
  background: rgba(180, 120, 120, .06);
  color: rgba(74, 44, 42, .75);
}

.chapter.mood-flesh .reading-aside .ra-q {
  color: #8b5a5a;
}

.chapter.mood-flesh .chapter-foot {
  background: transparent;
  border-top-color: rgba(180, 120, 120, .15);
}

.chapter.mood-flesh .chapter-foot button {
  color: rgba(74, 44, 42, .8);
}

.chapter.mood-flesh .chapter-foot button:hover {
  color: #8b5a5a;
}

.chapter.mood-flesh .chapter-foot .ch-marker {
  color: #c08080;
}

/* — INK: emptiness, void, minimal brushstroke. */
.chapter.mood-ink {
  background: #fafafa !important;
  color: #1a1a1a;
}

.chapter.mood-ink .chapter-strip {
  background: rgba(250, 250, 250, .92);
  color: #666;
  border-bottom-color: rgba(0, 0, 0, .08);
}

.chapter.mood-ink .summary-frame .su-cn {
  color: #333;
  letter-spacing: clamp(6px, 1.8vw, 14px);
}

.chapter.mood-ink .summary-frame .su-cn-py {
  color: #555;
}

/* near-white bg #fafafa — 7.30:1 */
.chapter.mood-ink .summary-frame .su-en,
.chapter.mood-ink .summary-frame .su-th {
  color: #1a1a1a;
  border-left-color: #999;
  font-weight: 300;
}

.chapter.mood-ink .origin-cn-title {
  color: #1a1a1a;
  letter-spacing: clamp(8px, 2vw, 16px);
}

.chapter.mood-ink .origin-cn-title-py {
  color: #999;
}

.chapter.mood-ink .origin-en-title,
.chapter.mood-ink .origin-th-title {
  color: rgba(26, 26, 26, .7);
}

.chapter.mood-ink .origin-meta {
  color: rgba(26, 26, 26, .45);
}

.chapter.mood-ink .cn-stack-char .cs-c {
  color: #1a1a1a;
}

.chapter.mood-ink .cn-stack-char .cs-py {
  color: #999;
}

.chapter.mood-ink .origin-line {
  border-top-color: rgba(0, 0, 0, .06);
}

.chapter.mood-ink .origin-gloss {
  color: rgba(26, 26, 26, .85);
}

.chapter.mood-ink .origin-gloss .og-mark {
  color: #666;
}

.chapter.mood-ink .panel-reading,
.chapter.mood-ink .panel-note {
  background: transparent;
  color: #1a1a1a;
}

.chapter.mood-ink .reading-body,
.chapter.mood-ink .note-body {
  color: rgba(26, 26, 26, .92);
}

.chapter.mood-ink .panel-label .pl-num,
.chapter.mood-ink .panel-label>span:nth-child(2),
.chapter.mood-ink .panel-label .pl-cn {
  color: #666;
}

.chapter.mood-ink .reading-aside {
  background: rgba(0, 0, 0, .03);
  color: rgba(26, 26, 26, .7);
}

.chapter.mood-ink .reading-aside .ra-q {
  color: #333;
}

.chapter.mood-ink .chapter-foot {
  background: transparent;
  border-top-color: rgba(0, 0, 0, .06);
}

.chapter.mood-ink .chapter-foot button {
  color: rgba(26, 26, 26, .8);
}

.chapter.mood-ink .chapter-foot button:hover {
  color: #333;
}

.chapter.mood-ink .chapter-foot .ch-marker {
  color: #666;
}

/* — WEATHER: transient, rain, clouds, grey-blue. */
.chapter.mood-weather {
  background: linear-gradient(180deg, #e8ebed 0%, #dde2e5 100%) !important;
  color: #2c3e50;
}

.chapter.mood-weather .chapter-strip {
  background: rgba(232, 235, 237, .92);
  color: #5a7a8a;
  border-bottom-color: rgba(90, 122, 138, .2);
}

.chapter.mood-weather .summary-frame .su-cn {
  color: #5a7a8a;
  letter-spacing: 14px;
}

.chapter.mood-weather .summary-frame .su-cn-py {
  color: #266070;
}

/* light gray bg — 5.36:1 */
.chapter.mood-weather .summary-frame .su-en,
.chapter.mood-weather .summary-frame .su-th {
  color: #2c3e50;
  border-left-color: #8aaabb;
}

/* dark panel-summary background needs light text */
.chapter.mood-weather .panel-summary .summary-frame .su-cn {
  color: #6a90a8;
}
.chapter.mood-weather .panel-summary .summary-frame .su-cn-py {
  color: #6a90a8;
}
.chapter.mood-weather .panel-summary .summary-frame .su-en,
.chapter.mood-weather .panel-summary .summary-frame .su-th {
  color: #b0c4d4;
  border-left-color: #6a90a8;
}

.chapter.mood-weather .origin-cn-title {
  color: #2c3e50;
  letter-spacing: 14px;
}

.chapter.mood-weather .origin-cn-title-py {
  color: #266070;
}

/* light gray bg — 5.36:1 */
.chapter.mood-weather .origin-en-title,
.chapter.mood-weather .origin-th-title {
  color: rgba(44, 62, 80, .75);
}

.chapter.mood-weather .origin-meta {
  color: rgba(44, 62, 80, .75);
}

.chapter.mood-weather .cn-stack-char .cs-c {
  color: #2c3e50;
}

.chapter.mood-weather .cn-stack-char .cs-py {
  color: #266070;
}

/* was #8aaabb — darkened for WCAG AA (5.92:1 on --paper) */
.chapter.mood-weather .origin-line {
  border-top-color: rgba(90, 122, 138, .15);
}

.chapter.mood-weather .origin-gloss {
  color: rgba(44, 62, 80, .85);
}

.chapter.mood-weather .origin-gloss .og-mark {
  color: #8aaabb;
}

.chapter.mood-weather .panel-reading,
.chapter.mood-weather .panel-note {
  background: transparent;
  color: #2c3e50;
}

.chapter.mood-weather .reading-body,
.chapter.mood-weather .note-body {
  color: rgba(44, 62, 80, .92);
}

.chapter.mood-weather .panel-label .pl-num,
.chapter.mood-weather .panel-label>span:nth-child(2),
.chapter.mood-weather .panel-label .pl-cn {
  color: #8aaabb;
}

.chapter.mood-weather .reading-aside {
  background: rgba(90, 122, 138, .06);
  color: rgba(44, 62, 80, .75);
}

.chapter.mood-weather .reading-aside .ra-q {
  color: #266070;
}

/* light gray bg — 5.36:1 */
.chapter.mood-weather .chapter-foot {
  background: transparent;
  border-top-color: rgba(90, 122, 138, .15);
}

.chapter.mood-weather .chapter-foot button {
  color: rgba(44, 62, 80, .8);
}

.chapter.mood-weather .chapter-foot button:hover {
  color: #5a7a8a;
}

.chapter.mood-weather .chapter-foot .ch-marker {
  color: #8aaabb;
}

/* — EMBER: dying fire, residual warmth, faint glow. */
.chapter.mood-ember {
  --ink: #e8ddd5;
  --ink-soft: rgba(232, 221, 213, .92);
  --ink-fade: rgba(232, 221, 213, .78);
  --ink-mute: rgba(232, 221, 213, .6);
  background: #1f1512 !important;
  color: #e8ddd5;
}

.chapter.mood-ember .chapter-strip {
  background: rgba(31, 21, 18, .9);
  color: #c49a7a;
  border-bottom-color: rgba(180, 100, 60, .25);
}

.chapter.mood-ember .summary-frame .su-cn {
  color: #c49a7a;
  letter-spacing: 14px;
}

.chapter.mood-ember .summary-frame .su-cn-py {
  color: #d4a060;
}

.chapter.mood-ember .summary-frame .su-en,
.chapter.mood-ember .summary-frame .su-th {
  color: #e8ddd5;
  border-left-color: #d4a060;
}

.chapter.mood-ember .origin-cn-title {
  color: #e8ddd5;
  letter-spacing: 14px;
}

.chapter.mood-ember .origin-cn-title-py {
  color: #d4a060;
}

.chapter.mood-ember .origin-en-title,
.chapter.mood-ember .origin-th-title {
  color: rgba(232, 221, 213, .75);
}

.chapter.mood-ember .origin-meta {
  color: rgba(232, 221, 213, .45);
}

.chapter.mood-ember .cn-stack-char .cs-c {
  color: #e8ddd5;
}

.chapter.mood-ember .cn-stack-char .cs-py {
  color: #d4a060 !important;
}

/* dark brown bg — amber reads 8.2:1; do not darken */
.chapter.mood-ember .origin-line {
  border-top-color: rgba(180, 100, 60, .15);
}

.chapter.mood-ember .origin-gloss {
  color: rgba(232, 221, 213, .85);
}

.chapter.mood-ember .origin-gloss .og-mark {
  color: #d4a060;
}

.chapter.mood-ember .panel-reading,
.chapter.mood-ember .panel-note {
  background: transparent;
  color: #e8ddd5;
}

.chapter.mood-ember .reading-body,
.chapter.mood-ember .note-body {
  color: rgba(232, 221, 213, .92);
}

.chapter.mood-ember .panel-label .pl-num,
.chapter.mood-ember .panel-label>span:nth-child(2),
.chapter.mood-ember .panel-label .pl-cn {
  color: #d4a060;
}

.chapter.mood-ember .reading-aside {
  background: rgba(180, 100, 60, .06);
  color: rgba(232, 221, 213, .75);
}

.chapter.mood-ember .reading-aside .ra-q {
  color: #c49a7a;
}

.chapter.mood-ember .chapter-foot {
  background: transparent;
  border-top-color: rgba(180, 100, 60, .15);
}

.chapter.mood-ember .chapter-foot button {
  color: rgba(232, 221, 213, .8);
}

.chapter.mood-ember .chapter-foot button:hover {
  color: #c49a7a;
}

.chapter.mood-ember .chapter-foot .ch-marker {
  color: #d4a060;
}

/* ============================================================
   SCALE SYSTEM — S, M, L, XL · Koolhaas architectural program
   Every chapter is a room of a different size.
   ============================================================ */

/* S — Small: compact, tight, a note passed in class */
.chapter.scale-S .panel-summary {
  padding-top: clamp(40px, 6vh, 80px);
  padding-bottom: clamp(30px, 4vh, 60px);
}

.chapter.scale-S .summary-frame {
  max-width: 560px;
}

.chapter.scale-S .summary-frame .su-en,
.chapter.scale-S .summary-frame .su-th {
  font-size: clamp(18px, 2vw, 24px);
}

.chapter.scale-S .panel-origin {
  padding-bottom: clamp(40px, 6vh, 80px);
}

.chapter.scale-S .origin-cn-title {
  letter-spacing: 8px;
  font-size: clamp(28px, 4vw, 48px);
}

.chapter.scale-S:not(.image-spotlight) .panel-image {
  display: none;
}

.chapter.scale-S .chapter-foot {
  padding: 24px 5vw;
}

/* M — Medium: standard, the baseline (no overrides needed) */

/* L — Large: expansive, breathing room, full-bleed potential */
.chapter.scale-L .panel-summary {
  padding-top: clamp(100px, 16vh, 200px);
  padding-bottom: clamp(80px, 12vh, 140px);
}

.chapter.scale-L .summary-frame {
  max-width: 720px;
}

.chapter.scale-L .summary-frame .su-en,
.chapter.scale-L .summary-frame .su-th {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.3;
}

.chapter.scale-L .panel-origin {
  padding-bottom: clamp(100px, 16vh, 200px);
}

.chapter.scale-L .origin-cn-title {
  letter-spacing: 18px;
  font-size: clamp(42px, 6vw, 72px);
}

.chapter.scale-L .panel-image {
  min-height: 60vh;
}

.chapter.scale-L .panel-reading {
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(80px, 12vh, 140px);
}

/* XL — Extra Large: monumental, architectural, you enter the chapter */
.chapter.scale-XL .panel-summary {
  padding-top: clamp(140px, 22vh, 280px);
  padding-bottom: clamp(100px, 16vh, 200px);
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.chapter.scale-XL .summary-frame {
  max-width: 520px;
}

.chapter.scale-XL .summary-frame .su-cn {
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: clamp(6px, 2vw, 14px);
}

.chapter.scale-XL .summary-frame .su-en,
.chapter.scale-XL .summary-frame .su-th {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.25;
}

.chapter.scale-XL .panel-origin {
  padding-bottom: clamp(140px, 22vh, 280px);
}

.chapter.scale-XL .origin-cn-title {
  letter-spacing: 28px;
  font-size: clamp(56px, 8vw, 120px);
}

.chapter.scale-XL .origin-num-roman {
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: .3em;
}

.chapter.scale-XL .panel-image {
  min-height: 80vh;
}

.chapter.scale-XL .panel-reading {
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(80px, 12vh, 140px);
}

.chapter.scale-XL .panel-note {
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(80px, 12vh, 140px);
}

/* ============================================================
   PANEL — CHARACTER 字 zì · one key character per chapter
   HanziWriter animated SVG on the left, learning content right.
   The CN title in the chapter strip is a clickable entry point.
   ============================================================ */
.panel-character {
  background: var(--paper-soft);
  padding: clamp(48px, 8vh, 100px) 6vw;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.character-frame {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}

@media (min-width: 820px) {
  .character-frame {
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 56px;
    /* the glyph card runs taller than its breakdown text — centre the
       short column against the tall one (§XX: no orphaned hole) */
    align-items: center;
  }
}

.char-brush {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px 20px 24px;
  position: relative;
}

.char-brush::before,
.char-brush::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--seal);
  border-style: solid;
}

.char-brush::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.char-brush::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

/* Stroke count badge */
.char-stroke-count {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

/* The hanzi-writer SVG wrapper */
.char-writer-wrap {
  width: 220px;
  height: 220px;
  margin: 0 0 16px;
  display: block;
  cursor: pointer;
}

.char-writer-wrap svg {
  display: block;
}

.char-brush .char-py {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .14em;
  color: var(--seal);
  text-transform: lowercase;
  margin: 0 0 6px;
}

.char-brush .char-meaning {
  font-family: var(--reader);
  font-size: 16px;
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
  margin: 0 0 20px;
}

/* Animate / Quiz buttons */
.char-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.char-btn {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  min-height: 44px;
}

.char-btn:hover {
  border-color: var(--seal);
  color: var(--seal);
}

.char-btn-quiz {
  border-style: dashed;
}

/* STROKE GUIDE — numbered steps */
.stroke-guide {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sg-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sg-n {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--seal);
  color: var(--paper);
  border-radius: 0;
  /* house style: zero border-radius */
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.sg-text {
  flex: 1;
}

.sg-move {
  font-family: var(--reader);
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 3px;
}

.sg-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-fade);
  font-style: italic;
  margin: 0;
}

/* CHAPTER STRIP — clickable CN title as character entry */
.cs-cn-link {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  min-width: 44px;
}

.cs-cn-link:hover .cs-cn-han {
  color: var(--seal);
}

.cs-cn-link::after {
  content: "→ 字";
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--seal);
  opacity: 0;
  transition: opacity .2s;
  text-transform: none;
}

.cs-cn-link:hover::after {
  opacity: 1;
}

.char-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.char-detail .cd-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 14px 0 0;
}

.char-detail .cd-label:first-child {
  margin-top: 0;
}

.char-detail .cd-label em {
  font-family: var(--mono);
  font-size: .9em;
  font-style: italic;
  color: var(--seal);
  opacity: .85;
  letter-spacing: .08em;
  text-transform: lowercase;
}

.char-detail .cd-breakdown {
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.char-detail .cd-mnemonic {
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  font-style: italic;
  text-wrap: pretty;
}

.char-detail .cd-pivot {
  font-family: var(--reader);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

body.pinyin-off .char-detail .cd-label em {
  display: none;
}

/* Character panel TH/EN toggle */


/* Mood overrides — the character panel adapts gently to each mood */
.chapter.mood-cosmic .panel-character {
  background: rgba(244, 235, 213, .04);
  border-color: rgba(244, 235, 213, .18);
}

.chapter.mood-cosmic .char-brush {
  background: rgba(244, 235, 213, .06);
  border-color: rgba(244, 235, 213, .18);
}

.chapter.mood-cosmic .char-brush .char-glyph {
  color: var(--paper);
}

.chapter.mood-cosmic .char-brush .char-py {
  color: var(--gold);
}

.chapter.mood-cosmic .char-brush .char-meaning {
  color: rgba(244, 235, 213, .78);
}

.chapter.mood-cosmic .char-detail .cd-label,
.chapter.mood-cosmic .char-detail .cd-label em {
  color: var(--gold);
}

.chapter.mood-cosmic .char-detail .cd-breakdown {
  color: rgba(244, 235, 213, .95);
}

.chapter.mood-cosmic .char-detail .cd-mnemonic,
.chapter.mood-cosmic .char-detail .cd-pivot {
  color: rgba(244, 235, 213, .86);
  border-left-color: var(--gold);
}

.chapter.mood-cryptic .panel-character {
  background: rgba(180, 255, 80, .03);
  border-color: rgba(180, 255, 80, .2);
}

.chapter.mood-cryptic .char-brush {
  background: rgba(13, 18, 36, .6);
  border-color: rgba(180, 255, 80, .25);
}

.chapter.mood-cryptic .char-brush .char-glyph {
  color: #d4f5b5;
  text-shadow: 2px 0 0 #ff6ec7, -2px 0 0 #00d9ff;
}

.chapter.mood-cryptic .char-brush .char-py {
  color: #b82060;
  text-transform: uppercase;
}

/* was #ff6ec7 — darkened for WCAG AA (5.18:1 on --paper) */
.chapter.mood-cryptic .char-brush .char-meaning {
  color: #b9d8a4;
}

.chapter.mood-cryptic .char-detail .cd-label,
.chapter.mood-cryptic .char-detail .cd-label em {
  color: #ff6ec7;
}

.chapter.mood-cryptic .char-detail .cd-breakdown,
.chapter.mood-cryptic .char-detail .cd-mnemonic,
.chapter.mood-cryptic .char-detail .cd-pivot {
  color: #d4f5b5;
  font-family: var(--mono);
  font-size: 14px;
}

.chapter.mood-pop .char-brush {
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 0 var(--seal);
}

.chapter.mood-pop .char-brush .char-glyph {
  color: var(--seal);
  text-shadow: 4px 4px 0 var(--gold), 8px 8px 0 var(--ink);
}

.chapter.mood-natural .char-brush {
  border-color: rgba(74, 107, 86, .3);
}

.chapter.mood-natural .char-brush .char-py {
  color: var(--jade);
}

.chapter.mood-sea .panel-character {
  background: rgba(13, 40, 40, .5);
  border-color: rgba(100, 180, 180, .2);
}

.chapter.mood-sea .char-brush {
  background: rgba(13, 40, 40, .4);
  border-color: rgba(100, 180, 180, .2);
}

.chapter.mood-sea .char-brush .char-py {
  color: #64b4b4;
}

.chapter.mood-sea .char-detail .cd-label {
  color: #64b4b4;
}

.chapter.mood-sea .char-detail .cd-breakdown,
.chapter.mood-sea .char-detail .cd-mnemonic,
.chapter.mood-sea .char-detail .cd-pivot {
  color: #e8f0f0;
}

.chapter.mood-stone .panel-character {
  background: rgba(40, 40, 40, .5);
  border-color: rgba(100, 100, 100, .2);
}

.chapter.mood-stone .char-brush {
  background: rgba(40, 40, 40, .4);
  border-color: rgba(100, 100, 100, .2);
}

.chapter.mood-stone .char-brush .char-py {
  color: #777;
}

.chapter.mood-stone .char-detail .cd-label {
  color: #888;
}

.chapter.mood-stone .char-detail .cd-breakdown,
.chapter.mood-stone .char-detail .cd-mnemonic,
.chapter.mood-stone .char-detail .cd-pivot {
  color: #d0d0d0;
}

.chapter.mood-ember .panel-character {
  background: rgba(40, 25, 20, .5);
  border-color: rgba(180, 100, 60, .2);
}

.chapter.mood-ember .char-brush {
  background: rgba(40, 25, 20, .4);
  border-color: rgba(180, 100, 60, .2);
}

.chapter.mood-ember .char-brush .char-py {
  color: #d4a060;
}

.chapter.mood-ember .char-detail .cd-label {
  color: #d4a060;
}

.chapter.mood-ember .char-detail .cd-breakdown,
.chapter.mood-ember .char-detail .cd-mnemonic,
.chapter.mood-ember .char-detail .cd-pivot {
  color: #e8ddd5;
}

.chapter.mood-flesh .char-brush .char-py {
  color: #c08080;
}

.chapter.mood-flesh .char-detail .cd-label {
  color: #c08080;
}

.chapter.mood-ink .char-brush .char-py {
  color: #999;
}

.chapter.mood-ink .char-detail .cd-label {
  color: #666;
}

.chapter.mood-weather .char-brush .char-py {
  color: #8aaabb;
}

.chapter.mood-weather .char-detail .cd-label {
  color: #8aaabb;
}

@media (max-width: 600px) {
  .char-brush {
    padding: 24px 16px 20px;
  }

  .char-brush .char-glyph {
    font-size: 140px;
  }

  .char-detail .cd-breakdown,
  .char-detail .cd-mnemonic,
  .char-detail .cd-pivot {
    font-size: 16px;
  }
}

/* Panel 02 — DIRECT */
.panel-direct {
  background: var(--paper-soft);
}

.direct-text {
  max-width: 60ch;
  margin: 0 auto;
  font-family: var(--reader);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-line;
  font-weight: 300;
}

.direct-text em {
  color: var(--seal);
  font-style: italic;
}

body.lang-th .direct-text {
  font-family: var(--th);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.75;
}

body.lang-cn .direct-text[data-lang="cn"] {
  font-family: var(--cn-serif);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.85;
  letter-spacing: 0.02em;
  font-weight: 400;
}

body.lang-cn .direct-text[data-lang="cn"] em {
  font-family: var(--cn-serif);
  font-style: normal;
  color: var(--seal);
}

/* Panel 03 — READING (the substantive one) */
.panel-reading {
  background: var(--paper);
  /* ── GLYPH WATERMARK ── ─────────────────────────────────────
     Each reading panel carries its chapter's Chinese title as a
     large faded glyph positioned top-right. It anchors the eye
     without competing with the text. Pure CSS — no images needed.
     opacity .028 = ink at 3% presence, invisible to the rushing
     reader, visible to the one who pauses.
  ──────────────────────────────────────────────────────────── */
  position: relative;
  overflow: hidden;
}

.panel-reading[data-cn-glyph]::before {
  content: attr(data-cn-glyph);
  position: absolute;
  right: -0.05em;
  top: -0.08em;
  font-family: var(--cn-serif);
  font-size: min(38vw, 400px);
  line-height: 1;
  color: var(--ink);
  opacity: 0.028;
  pointer-events: none;
  z-index: 0;
  font-weight: 400;
  white-space: nowrap;
  user-select: none;
}

/* A compact promise at the threshold: the Chinese deep read is intentionally
   shorter, so a reader never mistakes a different shape of book for missing
   content. Keep it plain enough to scan on a phone. */
.edition-note {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 18px 6vw 20px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.65;
}

.edition-note p { margin: 0; }
.edition-note-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--seal);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Reading length is orientation, not a progress bar: it tells a phone reader
   whether to stay here or save the chapter for a less interrupted minute. */
.reading-signpost {
  max-width: var(--layout-max);
  margin: 0 auto 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rule-soft, rgba(0,0,0,.08));
  color: var(--ink-fade);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.reading-length { display: block; }
.reading-signpost.is-long { color: var(--seal); }
.reading-long-copy {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-family: var(--reader);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

/* Keep watermark ink-dark in quiet mode — it's structural, not mood */
body.quiet-mode .panel-reading[data-cn-glyph]::before {
  opacity: 0.028;
}

/* ── PULL QUOTE ─────────────────────────────────────────────────
   Extracted algorithmically from the middle paragraph of each
   reading. Breaks the text wall. The sentence sits between the
   panel label and the reading frame — a typographic threshold.
   Position: relative + z-index so it sits above the glyph watermark.
────────────────────────────────────────────────────────────────── */
.reading-pull {
  max-width: 860px;
  margin: 0 auto 8px;
  padding: 28px 6vw 24px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft, rgba(0, 0, 0, .08));
  text-align: center;
  position: relative;
  z-index: 1;
}

.reading-pull .rp-sentence {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto;
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* Quiet mode: hide pull quote (reduces visual density on request) */
body.quiet-mode .reading-pull {
  display: none;
}

/* ── ALTERNATE ASIDE LAYOUT (every 4th chapter) ─────────────────
   Instead of aside-left + body-right, the aside spans full width
   above the reading body as a horizontal strip. Creates structural
   variety every 4 chapters without touching content.
────────────────────────────────────────────────────────────────── */
.reading-frame--top-aside {
  grid-template-columns: 1fr !important;
}

.reading-frame--top-aside .reading-aside {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 40px;
  align-items: baseline;
  border-bottom: 1px solid var(--rule-soft, rgba(0, 0, 0, .08));
  padding-bottom: 24px;
  margin-bottom: 4px;
  text-align: left;
}

.reading-frame--top-aside .reading-aside .ra-q {
  width: 100%;
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 20px);
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-weight: 300;
}

.reading-frame--top-aside .reading-aside p[data-lang] {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.reading-frame {
  max-width: var(--layout-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 980px) {
  .reading-frame {
    grid-template-columns: 240px 1fr;
    gap: 80px;
  }

  /* The aside holds ~100px of pull-quote. Stretched to the grid row it
     rendered as a bordered EMPTY box up to 4,800px tall running the whole
     reading. Size it to its content: a marginal card, not a hole.
     (No sticky here — align-self:start collapses the grid area, so a
     sticky child would have nothing to travel within.) */
  .reading-frame > .reading-aside {
    align-self: start;
  }
}

.reading-aside {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .15em;
  color: var(--ink-fade);
  line-height: 1.7;
  text-transform: uppercase;
}

.reading-aside .ra-q {
  font-family: var(--reader);
  font-style: italic;
  font-size: var(--size-md);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 18px;
  line-height: 1.4;
}

.reading-aside p[data-lang] {
  color: inherit;
}

/* §11.10 — reading-aside: translucent mood tints fail contrast on accent bleed;
   light-paper moods get an opaque paper chip; dark moods get an opaque dark chip. */
.chapter.mood-weather .reading-aside,
.chapter.mood-flesh .reading-aside,
.chapter.mood-natural .reading-aside {
  background: var(--paper-soft);
  padding: 14px 16px;
}

.chapter.mood-weather .reading-aside .ra-q {
  color: #1e4555;
}

.chapter.mood-flesh .reading-aside .ra-q {
  color: #5a3535;
}

.chapter.mood-natural .reading-aside .ra-q {
  color: #2d4a32;
}

.chapter.mood-cryptic .reading-aside,
.chapter.mood-cosmic .reading-aside,
.chapter.mood-sea .reading-aside,
.chapter.mood-stone .reading-aside,
.chapter.mood-ember .reading-aside,
.chapter.mood-mirror .reading-aside,
.chapter.mood-physics .reading-aside {
  background: rgba(14, 14, 14, .88);
  padding: 14px 16px;
}

.chapter.mood-cryptic .reading-aside {
  color: #b9d8a4;
}

.chapter.mood-cryptic .reading-aside .ra-q {
  color: #d4f5b5;
}

.chapter.mood-cosmic .reading-aside {
  color: rgba(244, 235, 213, .85);
}

.chapter.mood-cosmic .reading-aside .ra-q {
  color: rgba(244, 235, 213, .95);
}

.chapter.mood-mirror .reading-aside .ra-q {
  color: rgba(244, 235, 213, .95);
}

.chapter.mood-sea .reading-aside {
  color: rgba(232, 240, 240, .85);
}

.chapter.mood-sea .reading-aside .ra-q {
  color: #c8e8e8;
}

.chapter.mood-stone .reading-aside {
  color: rgba(208, 208, 208, .85);
}

.chapter.mood-stone .reading-aside .ra-q {
  color: #e0e0e0;
}

.chapter.mood-ember .reading-aside {
  color: rgba(232, 221, 213, .85);
}

.chapter.mood-ember .reading-aside .ra-q {
  color: #f0e4dc;
}

.chapter.mood-physics .reading-aside {
  color: rgba(208, 228, 216, .85);
}

.chapter.mood-physics .reading-aside .ra-q {
  color: #e8f4ec;
}

.insight-card {
  background: var(--paper-soft);
  border: 1px solid color-mix(in srgb, var(--rule) 40%, transparent);
  padding: 40px;
  position: relative;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .insight-card {
    padding: 24px 20px;
  }

  .insight-badge {
    left: 20px;
  }
}

.insight-badge {
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--seal);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 4px;
}

/* Dark-background moods: insight-card cream bg makes light reading text invisible.
   Setting background:transparent lets the dark chapter bg show through so the
   mood-specific light text (e.g. #d4f5b5 in cryptic) becomes readable.
   Quiet-mode still works: its reading-frame:var(--paper) override creates a cream
   surface above the transparent card, and quiet-mode also forces reading-body to
   --ink-soft (dark) — so dark text on cream applies correctly in quiet-mode. */
.chapter.mood-cryptic .insight-card,
.chapter.mood-cosmic .insight-card,
.chapter.mood-sea .insight-card,
.chapter.mood-stone .insight-card,
.chapter.mood-ember .insight-card,
.chapter.mood-mirror .insight-card {
  background: transparent;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}

/* ── Inline newspaper figure inside reading panel ─────────────────────────── */
.reading-figure {
  float: right;
  margin: 4px 0 20px 28px;
  max-width: 260px;
  border: 1px solid var(--hairline, rgba(0,0,0,0.12));
  background: var(--paper-soft, #f9f6f0);
  clear: right;
}
.reading-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.rf-caption {
  padding: 8px 10px 6px;
  border-top: 1px solid var(--hairline, rgba(0,0,0,0.10));
}
.rf-cap {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-secondary, #555);
  margin: 0 0 4px;
}
.rf-credit {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-tertiary, #888);
}
@media (max-width: 600px) {
  .reading-figure {
    float: none;
    max-width: 100%;
    margin: 0 0 20px;
  }
}
/* Dark-mood overrides for reading-figure */
.chapter.mood-cryptic .reading-figure,
.chapter.mood-cosmic .reading-figure,
.chapter.mood-sea .reading-figure,
.chapter.mood-stone .reading-figure,
.chapter.mood-ember .reading-figure,
.chapter.mood-mirror .reading-figure {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
}
.chapter.mood-cryptic .reading-figure,
.chapter.mood-cosmic .reading-figure,
.chapter.mood-sea .reading-figure,
.chapter.mood-stone .reading-figure,
.chapter.mood-ember .reading-figure,
.chapter.mood-mirror .reading-figure {
  background: rgba(14, 14, 14, .92);
}
.chapter.mood-cryptic .rf-cap,
.chapter.mood-cosmic .rf-cap,
.chapter.mood-sea .rf-cap,
.chapter.mood-stone .rf-cap,
.chapter.mood-ember .rf-cap,
.chapter.mood-mirror .rf-cap { color: rgba(255,255,255,0.88); }
.chapter.mood-cryptic .rf-credit,
.chapter.mood-cosmic .rf-credit,
.chapter.mood-sea .rf-credit,
.chapter.mood-stone .rf-credit,
.chapter.mood-ember .rf-credit,
.chapter.mood-mirror .rf-credit { color: rgba(255,255,255,0.72); }

.reading-body {
  font-family: var(--reader);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
  white-space: pre-line;
  text-wrap: pretty;
}

.reading-body em {
  color: var(--seal);
  font-style: italic;
}

.reading-body strong {
  color: inherit;
  font-weight: 500;
}

body.lang-th .reading-body {
  font-family: var(--th);
  font-size: 17px;
  line-height: 1.78;
}

body.lang-cn .reading-body[data-lang="cn"] {
  font-family: var(--cn-serif);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.85;
  letter-spacing: 0.02em;
}

body.lang-cn .reading-body[data-lang="cn"] em,
body.lang-cn .reading-body[data-lang="cn"] strong {
  font-family: var(--cn-serif);
  font-style: normal;
  font-weight: 600;
}

/* ── Glossary tooltips ──────────────────────────────────────────────────── */
.dao-gloss {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted var(--ink-mute);
  cursor: help;
  vertical-align: baseline;
}

.dao-gloss__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(3px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--reader);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.45;
  padding: 5px 10px;
  width: 200px;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s, transform 0.12s;
  z-index: 60;
}

.dao-gloss:hover .dao-gloss__tip,
.dao-gloss:focus .dao-gloss__tip,
.dao-gloss.is-open .dao-gloss__tip {
  opacity: 1;
  transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(0);
}

body.yin-mode .dao-gloss__tip {
  background: var(--ink-soft);
  color: var(--paper);
}

body.lang-cn .note-body[data-lang="cn"] {
  font-family: var(--cn-serif);
  font-style: normal;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

body.lang-cn .note-body[data-lang="cn"] strong {
  font-family: var(--cn-serif);
  font-weight: 600;
}

/* Intentional "coming soon" placeholder for unfinished readings.
   Designed to look deliberate, not broken — hairline frame, mono number,
   short line of body text. Replaces the old fallback-tag-+-english-leak. */
.reading-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 24px 48px;
  border-top: 1px solid var(--rule-soft, rgba(0, 0, 0, .10));
  border-bottom: 1px solid var(--rule-soft, rgba(0, 0, 0, .10));
  text-align: center;
  margin: 8px 0;
}

.reading-pending .rp-mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: currentColor;
  opacity: 0.45;
}

.reading-pending .rp-mark::before {
  content: "CH ";
}

.reading-pending .rp-line {
  font-family: var(--cn-serif);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: inherit;
}

body.lang-th .reading-pending .rp-line {
  font-family: var(--th);
  letter-spacing: 0;
}

.reading-pending .rp-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: currentColor;
  opacity: 0.45;
  max-width: 36ch;
  line-height: 1.7;
}

body.lang-th .reading-pending .rp-sub {
  font-family: var(--th);
  font-size: 13px;
  letter-spacing: 0;
}

.reading-sources {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--size-xs);
  letter-spacing: .04em;
  color: var(--ink-fade);
  line-height: 1.65;
}

.reading-sources .rs-label {
  display: block;
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin-bottom: 8px;
}

.reading-sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reading-sources li {
  padding: 4px 0;
  padding-left: 18px;
  position: relative;
}

.reading-sources li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--seal);
}

/* Panel 04 — CODE (TypeScript-as-philosophy) */
/* ── UNIVERSAL LANGUAGE TOGGLE ──────────────────────────────────────────────
   One rule to govern ALL data-lang elements across the ENTIRE PAGE.
   Any element with data-lang="th" hides in EN mode and vice versa.
   This covers cover, preface, prologue, and every future addition.
   ─────────────────────────────────────────────────────────────────────────── */
body.lang-en [data-lang]:not([data-lang="en"]) {
  display: none !important;
}

body.lang-th [data-lang]:not([data-lang="th"]) {
  display: none !important;
}

body.lang-cn [data-lang]:not([data-lang="cn"]) {
  display: none !important;
}

body.lang-th [data-lang="th"] {
  font-family: var(--th);
  font-style: normal;
}

body.lang-cn [data-lang="cn"],
body.lang-cn .cn-stack-char .cs-c,
body.lang-cn .cn-stack-char .cs-py,
body.lang-cn .origin-cn-title,
body.lang-cn .origin-cn-title-py {
  font-family: var(--cn-serif);
  font-style: normal;
  color: var(--ink) !important;
}

/* §11.10: the blanket rule above hits every [data-lang="cn"] node, including
   badges/pills that set their own color against a solid (non-paper) background.
   Restore their own tuned color so it doesn't drop to ~2.6:1 on --seal red. */
body.lang-cn .insight-badge [data-lang="cn"],
body.lang-cn .cover-begin-btn [data-lang="cn"] {
  color: var(--paper) !important;
}

/* Colophon in CN: the blanket rule made ink-on-ink (invisible). Restore
   the SAME tuned pairs EN/TH use — not full-brightness paper — so the
   Chinese reader gets the identical colophon, both themes. */
body.lang-cn .colophon [data-lang] {
  color: rgba(244, 235, 213, .7) !important;
}
body.lang-cn .colophon h3 [data-lang] {
  color: #d85c5c !important;
}
body.yin-mode.lang-cn .colophon [data-lang] {
  color: rgba(18, 20, 21, .7) !important;
}
body.yin-mode.lang-cn .colophon h3 [data-lang] {
  color: #a83332 !important;
}

/* Same clobbering, different fixed-dark-scrim surface (image captions always
   sit on a rgba(14,12,8,.94) photo scrim, regardless of site theme) — but
   NOT .is-sumie, whose caption sits directly on the light page bg instead. */
body.lang-cn .panel-image:not(.is-sumie) .image-caption em [data-lang="cn"] {
  color: rgba(244, 235, 213, .95) !important;
}

/* Inline spans inside labels/headings need inline not block */
span[data-lang] {
  display: inline;
}

body.lang-en span[data-lang="th"] {
  display: none !important;
}

body.lang-th span[data-lang="en"] {
  display: none !important;
}

/* ── PER-CHAPTER COLOR INDIVIDUALITY ────────────────────────────────────────
   Each chapter gets --ch-hue and --ch-sat injected inline by app.js.
   These variables cascade into the Summary border, Character glyph colour,
   Origin gloss arrow, and Closer rule — enough to make every chapter feel
   visually unique without breaking the overall palette.
   ─────────────────────────────────────────────────────────────────────────── */
.chapter {
  --ch-accent: hsl(calc(5deg + var(--ch-hue, 0deg)),
      /* 5° = near seal-red base */
      calc(65% + var(--ch-sat, 0%)),
      38%);
}

/* Apply the per-chapter accent to key visual accents */
.chapter .summary-frame .su-en,
.chapter .summary-frame .su-th {
  border-left-color: var(--ch-accent);
}

.chapter .char-brush .char-py {
  color: var(--ch-accent);
}

.chapter .origin-cn-title-py {
  color: var(--ch-accent);
}

.chapter .cn-stack-char .cs-py {
  color: var(--ch-accent) !important;
}

.chapter .origin-gloss .og-mark {
  color: var(--ch-accent);
}

.chapter .closer-q {
  border-left-color: var(--ch-accent);
}

.chapter .chapter-foot .ch-marker {
  color: var(--ch-accent);
}

/* These only apply to non-mooded chapters (moods override with their own colors) */
.chapter.mood-wabi .summary-frame .su-en {
  border-left-color: var(--ink-fade);
}

.chapter.mood-natural .cn-stack-char .cs-py {
  color: var(--jade) !important;
}

.chapter.mood-cryptic .cn-stack-char .cs-py {
  color: #ff6ec7 !important;
}

/* dark navy bg — light pink reads 7.2:1; do not darken */
.chapter.mood-sea .cn-stack-char .cs-py {
  color: #64b4b4 !important;
}

/* dark teal bg — light teal reads 6.0:1 */
.chapter.mood-ember .cn-stack-char .cs-py {
  color: #d4a060 !important;
}

/* dark brown bg — amber reads 8.2:1 */
.chapter.mood-cosmic .cn-stack-char .cs-py {
  color: var(--gold) !important;
}

/* ── CODE PANEL — collapsed stripe by default; click to expand ── */
.panel-code {
  background: var(--code-jade);
  color: var(--bone);
  padding: 0;
  /* stripe height handled by .code-stripe */
}

.code-details {
  width: 100%;
}

.code-details[open] {
  padding-bottom: clamp(48px, 8vh, 88px);
}

/* THE STRIPE — what shows when collapsed */
.code-stripe {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0 6vw;
  height: 48px;
  cursor: pointer;
  list-style: none;
  background: var(--code-jade);
  border-bottom: 1px solid rgba(244, 235, 213, .12);
  user-select: none;
  transition: background .2s;
}

.code-stripe::-webkit-details-marker {
  display: none;
}

.code-stripe:hover {
  background: rgba(42, 74, 58, .9);
}

.code-details[open] .code-stripe {
  border-bottom: 1px solid rgba(244, 235, 213, .15);
}

.cs-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-right: 20px;
}

.code-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .25em;
  color: var(--gold);
  text-transform: uppercase;
}

.code-stripe-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 235, 213, .6);
  white-space: nowrap;
}

.code-stripe-label em {
  font-style: italic;
  color: rgba(244, 235, 213, .4);
  text-transform: lowercase;
  font-size: .85em;
  margin-left: 4px;
}

.code-preview {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
  opacity: .65;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.code-expand-hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244, 235, 213, .3);
  flex-shrink: 0;
  transition: color .2s;
}

.code-details[open] .code-expand-hint {
  content: "collapse";
  color: rgba(244, 235, 213, .2);
}

.code-stripe:hover .code-expand-hint {
  color: rgba(244, 235, 213, .6);
}

.code-details[open] .code-preview {
  display: none;
}

.code-frame {
  max-width: 880px;
  margin: clamp(40px, 6vh, 72px) auto 0;
  padding: 0 6vw;
}

.code-block {
  font-family: var(--mono);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.7;
  color: var(--bone);
  white-space: pre-wrap;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-ligatures: contextual;
}

.code-block .c-key {
  color: #ffaa66;
}

/* keywords */
.code-block .c-com {
  color: #8aa394;
  font-style: italic;
}

/* comments */
.code-block .c-str {
  color: #c8d49b;
}

/* strings */
.code-block .c-num {
  color: #ffd28e;
}

/* numbers */
.code-block .c-type {
  color: #b6e2c7;
}

/* types */
.code-caption {
  font-family: var(--reader);
  font-style: italic;
  font-size: 16px;
  color: rgba(244, 235, 213, .6);
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(244, 235, 213, .15);
  text-align: center;
}

/* Panel 05 — NOTE */
.panel-note {
  background: var(--paper-deep);
}

.note-frame {
  max-width: 60ch;
  margin: 0 auto;
}

body.lang-en .note-body[data-lang="th"],
body.lang-en .note-body[data-lang="cn"] {
  display: none;
}

body.lang-th .note-body[data-lang="en"],
body.lang-th .note-body[data-lang="cn"] {
  display: none;
}

body.lang-cn .note-body[data-lang="en"],
body.lang-cn .note-body[data-lang="th"] {
  display: none;
}

.note-body {
  font-family: var(--reader);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.7;
  color: var(--ink-soft);
  font-style: italic;
  border-left: 3px solid var(--seal);
  padding: 4px 0 4px 22px;
  margin: 0;
}

.note-body strong {
  color: inherit;
  font-weight: 500;
}

.note-fallback-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-fade);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
  font-style: normal;
}

/* VOICE JOURNAL — Dr Non's spoken reactions (English voice notes).
   Sibling to the written note, but upright (spoken, not composed) and
   multi-paragraph. Uses --ink-soft / --seal so it flips cleanly in yin. */
.panel-voice {
  background: var(--paper-soft);
}

.voice-frame {
  max-width: 62ch;
  margin: 0 auto;
  border-left: 2px solid var(--seal);
  padding-left: 24px;
}

.voice-body {
  font-family: var(--reader);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.voice-body:last-child {
  margin-bottom: 0;
}

/* ============================================================
   ILLUSTRATION PANEL — Ian Xiaohei Dr Non × chapter scene
   White-bg ink art; full-width up to 680px, centred, lazy.
   ============================================================ */
.panel-illus {
  background: transparent;
  padding: clamp(24px, 4vh, 48px) 6vw clamp(32px, 5vh, 56px);
}

.illus-figure {
  margin: 0;
}

.illus-img {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--rule);
  filter: contrast(1.03);
}

body.yin-mode .illus-img {
  filter: brightness(0.80) contrast(1.06);
}

@media (max-width: 480px) {
  .panel-illus {
    padding: 20px 0 28px;
  }

  .illus-img {
    border-left: none;
    border-right: none;
  }
}

/* ============================================================
   COMPARATIVE NOTES · 同 — small chapter-level side room
   ============================================================ */
.echo-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 52px);
  background:
    radial-gradient(circle at 50% 0%, rgba(168, 51, 50, .11), transparent 36%),
    rgba(21, 20, 15, .36);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}

.echo-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .28s ease;
}

.echo-shell {
  width: min(920px, 100%);
  max-height: min(760px, 88vh);
  overflow: auto;
  position: relative;
  background: color-mix(in srgb, var(--paper-soft) 92%, white);
  border: 1px solid color-mix(in srgb, var(--seal) 28%, var(--rule));
  padding: clamp(28px, 4vw, 50px);
}

.echo-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 24px;
  display: grid;
  place-items: center;
}

.echo-close:hover {
  color: var(--seal);
  border-color: var(--seal);
}
.echo-close:focus-visible {
  color: var(--seal);
  border-color: var(--seal);
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

.echo-kicker,
.echo-label,
.echo-caveat {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .2em;
}

.echo-kicker {
  margin: 0 48px 12px 0;
  color: var(--seal);
  font-size: 10px;
}

.echo-kicker em {
  text-transform: lowercase;
  font-style: italic;
  color: var(--ink-fade);
}

.echo-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 56px);
  line-height: .96;
  letter-spacing: 0;
  color: var(--ink);
}

.echo-sub {
  margin: 16px 0 28px;
  max-width: 48ch;
  font-family: var(--reader);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.35;
  color: var(--ink-soft);
  font-style: italic;
}

.echo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.echo-card {
  background: var(--paper);
  padding: clamp(20px, 3vw, 30px);
  min-height: 260px;
}

.echo-card--buddhist {
  background: color-mix(in srgb, var(--paper) 84%, #dce8dd);
}

.echo-card--science {
  background: color-mix(in srgb, var(--paper) 84%, #e8dfd0);
}

.echo-label {
  margin: 0 0 16px;
  color: var(--seal);
  font-size: 10px;
}

.echo-copy,
.echo-list {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.58;
}

.echo-list {
  padding-left: 18px;
}

.echo-list li+li {
  margin-top: 12px;
}

.echo-caveat {
  margin: 22px 0 0;
  color: var(--ink-mute);
  font-size: 9px;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .echo-overlay {
    align-items: end;
    padding: 0;
  }

  .echo-shell {
    width: 100%;
    max-height: 86vh;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 26px 20px 30px;
  }

  .echo-grid {
    grid-template-columns: 1fr;
  }

  .echo-card {
    min-height: 0;
  }
}

/* ============================================================
   PANEL 06 — PLAY 玩 (optional sixth panel)
   Slingerland insights, blog material, what-ifs, trivia,
   tiny games. Lighter typography, breath between paragraphs.
   ============================================================ */
.panel-play {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
}

.panel-play .panel-label .pl-num,
.panel-play .panel-label>span:nth-child(2) {
  color: var(--gold);
}

.panel-play .panel-label .pl-cn {
  color: var(--gold);
  opacity: .85;
}

.play-frame {
  max-width: 64ch;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.play-details {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.play-details:first-child {
  border-top: none;
  padding-top: 0;
}

.play-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 14px;
  min-height: 44px;
  font-family: var(--display);
  font-size: clamp(16px, 1.45vw, 19px);
  color: var(--ink-soft);
  transition: color .2s ease;
}

.play-summary::-webkit-details-marker {
  display: none;
}

.play-summary:hover,
.play-summary:focus-visible {
  color: var(--ink);
  outline: none;
}

.play-summary:focus-visible .play-summary-mark {
  color: var(--seal);
  outline: 2px solid var(--seal);
  outline-offset: 4px;
}

.play-summary-mark {
  width: 18px;
  flex: 0 0 18px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--gold);
  text-align: center;
  transition: transform .2s ease, color .2s ease;
}

.play-details[open] .play-summary-mark {
  transform: rotate(90deg);
}

.play-details[open] .play-summary .play-summary-mark {
  color: var(--seal);
}

.play-summary-copy {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35em;
}

.play-card {
  border-left: 2px solid var(--gold);
  padding: 8px 0 8px 22px;
  position: relative;
}

.play-details:not([open]) .play-card {
  display: none;
}

.play-card .pc-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  /* §11.10 — #0a0905 clears 5.9:1 on the gold chip. The earlier fix at
     the top of this file was silently defeated by this later rule. */
  color: #0a0905;
  background: rgba(184, 137, 58, .22);
  padding: 3px 8px;
  margin-bottom: 8px;
}

.play-card .pc-title {
  font-family: var(--display);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 500;
  letter-spacing: -.005em;
  margin: 0 0 8px;
  color: var(--ink);
}

.play-card .pc-body {
  font-family: var(--reader);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.play-card .pc-body em {
  color: var(--seal);
  font-style: italic;
}

.play-card .pc-body strong {
  color: inherit;
  font-weight: 500;
}

.pc-body-stack {
  display: block;
}

body.lang-en .pc-body-stack .pc-body[data-lang="th"] {
  display: none;
}

body.lang-th .pc-body-stack .pc-body[data-lang="en"] {
  display: none;
}

body.lang-cn .pc-body-stack .pc-body[data-lang="en"] {
  display: none;
}

body.lang-cn .pc-body-stack .pc-body[data-lang="th"] {
  display: none;
}

.play-figure {
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
}

.play-figure img {
  width: 100%;
  max-width: 420px;
  display: block;
  border: 1px solid var(--rule);
}

.play-figcaption {
  margin: 0;
  font-family: var(--reader);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-fade);
}

.play-card .pc-cite {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-fade);
  text-transform: uppercase;
}

/* ============================================================
   ABOUT THE READER — 識人
   Daoist three-language tribute. Sits between preface and first
   chapter. Three-column grid on desktop, stacked on mobile.
   ============================================================ */
.about {
  background: var(--paper-soft);
  padding: clamp(56px, 9vh, 110px) 6vw;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.about-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.about-kicker {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 14px;
}

.about-title {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 500;
  letter-spacing: -.012em;
  margin: 0 0 18px;
  max-width: 30ch;
}

.about-blurb {
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-fade);
  max-width: 60ch;
  margin: 0 0 56px;
}

/* ================================================================
   ABOUT — CIVILIZATION INTERLUDE
   Cost of accumulated interference, named without manifesto.
   All three languages visible simultaneously (matches about-origin
   convention — no data-lang gating in this section).
   ================================================================ */
/* §11.11: .about-origin is the same trilingual stacked-prose block as
   .about-civ below — EN primary in italic reader face, TH/CN as secondary
   scripts. It shipped without any rules, so the three paragraphs rendered
   with browser-default rhythm. Mirrors the .about-civ typography. */
.about-origin {
  max-width: 680px;
}

.about-origin-en,
.about-origin-th,
.about-origin-cn {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.about-origin-en {
  font-family: var(--reader);
  font-style: italic;
}

.about-origin-th {
  font-family: var(--th);
  font-size: 14px;
  line-height: 1.9;
  font-style: normal;
}

.about-origin-cn {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .025em;
  font-style: normal;
}

.about-origin-en+.about-origin-th,
.about-origin-th+.about-origin-cn {
  margin-top: 28px;
}

.about-civ {
  margin: 44px 0 64px;
  padding-top: 44px;
  border-top: 1px solid var(--rule-soft);
  max-width: 680px;
}

.about-civ-en,
.about-civ-th,
.about-civ-cn {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.about-civ-en {
  font-family: var(--reader);
  font-style: italic;
}

.about-civ-th {
  font-family: var(--th);
  font-size: 14px;
  line-height: 1.9;
  font-style: normal;
}

.about-civ-cn {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .025em;
  font-style: normal;
}

/* The -th/-cn paragraphs live INSIDE .about-civ, so the old
   ".about-civ+.about-civ-th" never matched anything. These adjacent-
   sibling selectors restore the intended gap between language blocks. */
.about-civ-en+.about-civ-th,
.about-civ-th+.about-civ-cn {
  margin-top: 28px;
}

.about-civ-dao.about-quote {
  margin-top: 8px;
}

.about-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  counter-reset: stanza;
}

@media (min-width: 720px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 48px;
  }
}

@media (min-width: 1100px) {
  .about-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.about-stanza {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 4px 16px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  position: relative;
}

.about-stanza .as-num {
  font-family: var(--cn-elegant);
  font-size: 28px;
  color: var(--seal);
  line-height: 1;
  grid-row: 1 / span 1;
  align-self: start;
}

.about-stanza .as-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-fade);
  align-self: center;
}

.about-stanza .as-cn,
.about-stanza .as-en,
.about-stanza .as-th {
  grid-column: 1 / span 2;
  margin: 0;
  padding-top: 6px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.about-stanza .as-cn {
  font-family: var(--cn-elegant);
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--ink);
  margin-top: 12px;
  padding-top: 0;
}

.about-stanza .as-en {
  font-family: var(--reader);
  font-style: italic;
}

.about-stanza .as-th {
  font-family: var(--th);
  font-size: 13px;
}

/* ================================================================
   PROVENANCE — THE JOURNEY OF THE TEXT
   Verified artifact timeline. House style: mono labels, hairline
   rules, single seal accent, zero radius/shadow, mobile-first.
   Notes gate by language; the CN/pinyin/EN name-unit always shows.
   ================================================================ */
.provenance {
  margin: 44px 0 64px;
  padding-top: 44px;
  border-top: 1px solid var(--rule-soft);
  max-width: 720px;
}

.prov-kicker {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 18px;
}

.prov-kicker em {
  font-style: italic;
  text-transform: none;
  letter-spacing: .08em;
  color: var(--ink-mute);
}

.prov-intro {
  font-family: var(--reader);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-fade);
  max-width: 62ch;
  margin: 0 0 14px;
}

.prov-timeline {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
}

.prov-item {
  display: grid;
  gap: 6px;
  padding: 26px 0;
  border-top: 1px solid var(--rule-soft);
}

.prov-item:last-of-type {
  border-bottom: 1px solid var(--rule-soft);
}

.prov-era {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.prov-name {
  display: block;
  margin: 2px 0 4px;
}

.prov-name .prov-cn {
  font-family: var(--cn-elegant);
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--ink);
  margin-right: 10px;
}

.prov-name .prov-py {
  font-family: var(--mono);
  font-size: 12px;
  font-style: italic;
  letter-spacing: .1em;
  color: var(--seal);
  margin-right: 8px;
}

.prov-name .prov-en {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}

.prov-note {
  font-family: var(--reader);
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 60ch;
}

.prov-note em {
  color: var(--seal);
  font-style: italic;
}

.prov-hold {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-mute);
  margin-top: 2px;
}

.prov-hold em {
  font-style: italic;
}

.prov-item--figure {
  grid-template-columns: 1fr;
}

.prov-figure {
  margin: 0 0 8px;
}

.prov-figure img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border: 1px solid var(--rule);
}

.prov-figure figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  margin-top: 6px;
}

.prov-sources {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin: 28px 0 0;
  max-width: 64ch;
}

.prov-sources em {
  font-style: italic;
}

@media (min-width: 720px) {
  .prov-item--figure {
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
  }

  .prov-item--figure .prov-figure {
    margin: 0;
  }
}

/* ── Dao De Jing quote callout — one per About stanza ─────────────────────
   A small geometric block: hairline top border, mono chapter reference,
   Chinese source line, pinyin underneath, then trilingual translation.
   House style: no border-radius, no shadow, no gradient. */
.about-quote {
  margin: 22px 0 4px;
  padding: 14px 0 0;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.about-quote .aq-ref {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-fade);
  line-height: 1;
}

.about-quote .aq-ref em {
  font-style: normal;
  text-transform: none;
  letter-spacing: .05em;
  color: var(--ink-mute);
}

.about-quote .aq-cn {
  margin: 2px 0 0;
  font-family: var(--cn-serif);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--seal);
  line-height: 1.4;
}

.about-quote .aq-py {
  margin: 0;
  font-family: var(--mono);
  font-style: italic;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  line-height: 1.2;
}

.about-quote .aq-tr {
  margin: 4px 0 0;
  font-family: var(--display-body, "Cormorant Garamond"), serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.about-quote .aq-tr[data-lang="th"] {
  font-family: var(--th);
  font-style: normal;
}

.about-quote .aq-tr[data-lang="cn"] {
  font-family: var(--cn-serif);
  font-style: normal;
}

body.lang-en .about-quote .aq-tr[data-lang="th"],
body.lang-en .about-quote .aq-tr[data-lang="cn"],
body.lang-th .about-quote .aq-tr[data-lang="en"],
body.lang-th .about-quote .aq-tr[data-lang="cn"],
body.lang-cn .about-quote .aq-tr[data-lang="en"],
body.lang-cn .about-quote .aq-tr[data-lang="th"] {
  display: none;
}

.about-stanza--with-art .as-art {
  grid-column: 1 / span 2;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
}

.about-stanza--with-art .as-art img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  filter: contrast(1.04);
}

.about-stanza--with-art .as-art figcaption {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-fade);
  line-height: 1.5;
}

.about-stanza--with-art .as-art figcaption em {
  font-family: var(--cn-elegant);
  font-style: normal;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--seal);
  text-transform: none;
}

.era-card--with-art .era-art {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
}

.era-card--with-art .era-art img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  filter: contrast(1.05);
}

.era-card--with-art .era-art figcaption {
  margin: 10px 0 0;
  font-family: var(--reader);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-fade);
  font-style: italic;
}

.era-card--with-art .era-art figcaption em {
  color: var(--seal);
  font-style: italic;
  font-weight: 500;
}

.about-sig {
  margin-top: 56px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-fade);
  text-align: right;
}

/* ============================================================
   CURRENTS · 源流 — five-card history of Daoism × Buddhism
   ============================================================ */
.currents {
  background: var(--paper-deep);
  padding: clamp(56px, 9vh, 110px) 6vw;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.currents-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.currents-kicker {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 14px;
}

.currents-title {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 500;
  letter-spacing: -.012em;
  margin: 0 0 18px;
  max-width: 30ch;
}

.currents-blurb {
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-fade);
  max-width: 60ch;
  margin: 0 0 56px;
}

.currents-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  counter-reset: era;
}

@media (min-width: 720px) {
  .currents-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .currents-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  .currents-grid .era-card {
    border-right: 1px solid var(--rule);
    padding: 28px 24px 32px;
  }

  .currents-grid .era-card:last-child {
    border-right: none;
  }
}

.era-card {
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 1100px) {
  .era-card {
    border-top: none;
  }
}

.era-num {
  font-family: var(--cn-elegant);
  font-size: 32px;
  color: var(--seal);
  margin: 0 0 8px;
  line-height: 1;
}

.era-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 12px;
}

.era-name {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.era-name .en-cn {
  font-family: var(--cn-elegant);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--ink);
  font-weight: 400;
}

.era-name .en-en {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: -.005em;
  color: var(--seal);
  font-weight: 500;
}

.era-body {
  font-family: var(--reader);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.era-body em {
  color: var(--seal);
  font-style: italic;
}

.era-body strong {
  color: inherit;
  font-weight: 500;
}

.currents-foot {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-family: var(--reader);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-fade);
  max-width: 70ch;
  font-style: italic;
}

.currents-foot em {
  color: var(--seal);
  font-style: italic;
}

/* ============================================================
   PROLOGUE · 楔子 — meet Lao Tzu
   The story-warm-up between preface and chapter 1.
   ============================================================ */
.prologue {
  background: var(--paper-deep);
  padding: clamp(56px, 10vh, 120px) 6vw;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--ink);
}

.prologue-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.prologue-kicker {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 14px;
}

.prologue-title {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 500;
  letter-spacing: -.012em;
  margin: 0 0 36px;
  max-width: 30ch;
}

/* FULL-BLEED departure image in Prologue Act I — breaks out of container */
.prologue-art--full {
  margin-left: calc(-6vw);
  margin-right: calc(-6vw);
  width: calc(100% + 12vw);
  max-width: none;
  padding: 0;
  background: var(--ink);
  border: none;
}

.prologue-art--full img {
  width: 100%;
  display: block;
  max-height: 80vh;
  object-fit: cover;
  object-position: center 20%;
  filter: contrast(1.08);
}

@media (min-width: 1200px) {
  .prologue-art--full {
    margin-left: calc(-12vw);
    margin-right: calc(-12vw);
    width: calc(100% + 24vw);
  }
}

/* Acts — vertical stacks separated by hairline rules */
.prologue-act {
  margin: 0 0 80px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}

.prologue-act:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.prologue-claim {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  color: var(--seal);
  line-height: 1.3;
  margin: 0 0 32px;
  max-width: 32ch;
  border-left: 4px solid var(--seal);
  padding-left: 22px;
}

.prologue-art--full {
  margin: 0 0 36px;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
}

.prologue-art--full img {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.05);
}

.prologue-art--full figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-fade);
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
}

body.lang-en .prologue-story[data-lang="th"],
body.lang-en .prologue-story[data-lang="cn"] {
  display: none;
}

body.lang-th .prologue-story[data-lang="en"],
body.lang-th .prologue-story[data-lang="cn"] {
  display: none;
}

body.lang-cn .prologue-story[data-lang="en"],
body.lang-cn .prologue-story[data-lang="th"] {
  display: none;
}

body.lang-th .prologue-story p {
  font-family: var(--th);
  font-style: normal;
}

body.lang-th .prologue-lead {
  font-family: var(--th);
  font-style: normal;
}

/* ── Chinese front-matter typography ── */
body.lang-cn .prologue-story[data-lang="cn"] p {
  font-family: var(--cn-serif);
  font-style: normal;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

body.lang-cn .prologue-story[data-lang="cn"] .prologue-lead {
  font-family: var(--cn-serif);
  font-style: normal;
  border-left-color: var(--seal);
}

body.lang-cn .prologue-story[data-lang="cn"] p:first-child {
  font-style: normal;
}

body.lang-cn .prologue-story[data-lang="cn"] p em,
body.lang-cn .prologue-story[data-lang="cn"] p strong {
  font-family: var(--cn-serif);
  font-style: normal;
}

body.lang-cn .preface-inner p[data-lang="cn"] {
  font-family: var(--cn-serif);
  line-height: 1.85;
  letter-spacing: 0.02em;
}

body.lang-cn .cover-sub[data-lang="cn"] {
  font-family: var(--cn-serif);
  line-height: 1.85;
}

body.lang-cn .cover-kicker[data-lang="cn"] {
  font-family: var(--cn-elegant);
  letter-spacing: 0.1em;
}

body.lang-cn .preface-kicker[data-lang="cn"] {
  font-family: var(--cn-elegant);
  letter-spacing: 0.15em;
}

body.lang-cn .preface-title[data-lang="cn"] {
  font-family: var(--cn-elegant);
}

body.lang-cn .prologue-title[data-lang="cn"] {
  font-family: var(--cn-elegant);
  font-style: normal;
}

body.lang-cn .prologue-claim[data-lang="cn"] {
  font-family: var(--cn-serif);
  font-style: normal;
}

body.lang-cn .index-part span[data-lang="cn"],
body.lang-cn .index-kicker span[data-lang="cn"],
body.lang-cn .index-sub[data-lang="cn"] {
  font-family: var(--cn-serif);
}

.prologue-story--single {
  max-width: 64ch;
}

.prologue-story--single p {
  font-family: var(--reader);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.prologue-story--single p strong {
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
}

.prologue-story--single p em {
  color: var(--seal);
  font-style: italic;
}

.prologue-lead {
  font-size: clamp(20px, 1.7vw, 23px) !important;
  color: var(--ink) !important;
  font-style: italic;
  border-left: 3px solid var(--seal);
  padding-left: 20px;
}

.prologue-story p {
  font-family: var(--reader);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 18px;
  text-wrap: pretty;
}

.prologue-story p:first-child {
  font-size: clamp(19px, 1.6vw, 22px);
  font-style: italic;
  color: var(--ink);
}

.prologue-story p strong {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 500;
}

.prologue-story em {
  color: var(--seal);
  font-style: italic;
}

.prologue-pivot {
  margin-top: 28px !important;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: clamp(18px, 1.5vw, 21px) !important;
  color: var(--ink) !important;
  font-style: normal !important;
}

.prologue-arrow {
  margin: 56px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--seal);
}

.prologue-arrow em {
  font-family: var(--mono);
  font-size: .82em;
  font-style: italic;
  color: var(--seal);
  opacity: .9;
  text-transform: lowercase;
  margin: 0 4px;
}

/* Inline pinyin marks inside the prologue */
.prologue em.cs-py-sub {
  font-family: var(--mono);
  font-size: .78em;
  font-weight: 300;
  font-style: italic;
  letter-spacing: .08em;
  color: var(--seal);
  opacity: .9;
  text-transform: lowercase;
  margin: 0 4px 0 2px;
}

body.pinyin-off .prologue em.cs-py-sub,
body.pinyin-off .prologue-arrow em,
body.pinyin-off .prologue-kicker em,
body.pinyin-off .prologue-title em {
  display: none;
}

/* ============================================================
   DEEPWORK OVERLAY — 5 minute emergency reading room
   ============================================================ */
.deepwork-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ink-fade);
  /* #5e564a — 5.8:1 on --paper; --gold (#b8893a) was only 2.7:1 */
}

.deepwork-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: #11100d;
  color: var(--paper);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.deepwork-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .35s ease;
}

.deepwork-head {
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 22px 6vw 18px;
  background: rgba(17, 16, 13, .84);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(244, 235, 213, .12);
}

.deepwork-kicker {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.deepwork-exit-note {
  margin: 0 96px 12px 0;
  max-width: 34ch;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  line-height: 1.55;
  text-transform: uppercase;
  color: rgba(244, 235, 213, .62);
}

.deepwork-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--th);
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.16;
  color: var(--paper);
}

.deepwork-sub {
  margin: 14px 0 0;
  max-width: 52ch;
  font-family: var(--th);
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.6;
  color: rgba(244, 235, 213, .75);
}

.deepwork-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  border: 1px solid rgba(244, 235, 213, .18);
  background:
    radial-gradient(circle at center, rgba(17, 16, 13, .95) 0 58%, transparent 59%),
    conic-gradient(var(--seal) 0 var(--hold-pct, 0%), rgba(244, 235, 213, .12) 0 100%);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}

.deepwork-close:hover {
  border-color: rgba(244, 235, 213, .68);
}

.deepwork-close.is-holding {
  transform: scale(.985);
}

.deepwork-close-x {
  display: block;
  font-family: var(--mono);
  font-size: 26px;
  line-height: 1;
}

.deepwork-close-hint {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 235, 213, .82);
}

.deepwork-body {
  display: flex;
  flex-direction: column;
}

.dw-section {
  position: relative;
  min-height: max(72vh, 620px);
  display: flex;
  align-items: end;
  padding: clamp(72px, 10vh, 120px) 6vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dw-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(17, 16, 13, .34) 0%, rgba(17, 16, 13, .52) 28%, rgba(17, 16, 13, .82) 100%);
}

.dw-copy {
  position: relative;
  z-index: 1;
  max-width: 70ch;
}

.dw-copy h3 {
  margin: 0 0 20px;
  font-family: var(--th);
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.25;
  color: var(--paper);
}

.dw-copy p {
  margin: 0 0 16px;
  font-family: var(--th);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.95;
  color: rgba(244, 235, 213, .96);
}

.dw-copy .dw-pull {
  margin: 26px 0;
  max-width: 28ch;
  font-size: clamp(24px, 2.7vw, 40px);
  line-height: 1.4;
  color: var(--gold);
}

.dw-section--ox {
  background-image: url('img/laozi-riding-ox-cma.jpg');
}

.dw-section--water {
  background-image: url('img/hokusai-rainstorm.jpg');
}

.dw-section--empty {
  background-image: url('img/muqi.jpg');
}

.dw-section--mud {
  background-image: url('img/sesshu.jpg');
}

.dw-section--fool {
  background-image: url('img/wanderer.jpg');
}

.dw-section--mountain {
  background-image: url('img/hokusai-fuji.jpg');
}

.dw-section--state {
  background-image: url('img/whistler.jpg');
}

.dw-section--child {
  background-image: url('img/liang-kai.jpg');
}

.dw-section--soft {
  background-image: url('img/monk-sea.jpg');
}

/* Deepwork overlay — multilingual lang-toggle support */
body.lang-en .deepwork-overlay [data-lang="th"],
body.lang-en .deepwork-overlay [data-lang="cn"],
body.lang-th .deepwork-overlay [data-lang="en"],
body.lang-th .deepwork-overlay [data-lang="cn"],
body.lang-cn .deepwork-overlay [data-lang="en"],
body.lang-cn .deepwork-overlay [data-lang="th"] {
  display: none;
}

/* Per-language font overrides inside dw-copy */
.dw-copy p[data-lang="en"],
.dw-copy .dw-pull[data-lang="en"] {
  font-family: "Cormorant Garamond", Georgia, serif;
}

.dw-copy h3[data-lang="en"] {
  font-family: "Cormorant Garamond", Georgia, serif;
}

.dw-copy p[data-lang="cn"],
.dw-copy .dw-pull[data-lang="cn"],
.dw-copy h3[data-lang="cn"] {
  font-family: var(--cn-serif);
}

.dw-copy .dw-science {
  margin-top: 24px;
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.65;
  color: rgba(244, 235, 213, .55);
  font-style: italic;
}

.dw-copy .dw-science[data-lang="en"] {
  font-family: "Cormorant Garamond", serif;
}

.dw-copy .dw-chref {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.dw-source {
  padding: 48px 6vw;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  line-height: 1.7;
  color: rgba(244, 235, 213, .4);
  border-top: 1px solid rgba(244, 235, 213, .1);
}

.dw-source a {
  color: rgba(244, 235, 213, .55);
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}

.dw-source[data-lang="th"],
.dw-source[data-lang="cn"] {
  font-family: var(--th);
  font-size: 12px;
  letter-spacing: 0;
}

.dw-source[data-lang="cn"] {
  font-family: var(--cn-serif);
}

/* Deepwork title / sub multilingual */
.deepwork-title[data-lang="en"] {
  font-family: "Cormorant Garamond", serif;
}

.deepwork-title[data-lang="cn"] {
  font-family: var(--cn-serif);
}

.deepwork-sub[data-lang="en"] {
  font-family: "Cormorant Garamond", serif;
}

.deepwork-sub[data-lang="cn"] {
  font-family: var(--cn-serif);
}

@media (max-width: 720px) {
  .deepwork-close {
    width: 64px;
    height: 64px;
  }

  .deepwork-exit-note {
    margin-right: 84px;
    max-width: 26ch;
  }

  .deepwork-title {
    max-width: none;
    padding-right: 84px;
  }

  .dw-section {
    min-height: 0;
    padding-top: 96px;
    padding-bottom: 72px;
    align-items: end;
  }

  .dw-copy p {
    font-size: 18px;
    line-height: 1.82;
  }
}

/* ============================================================
   NOTES OVERLAY · 注 — Dr Non's optional notes, behind a tab system
   ============================================================ */
.notes-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--paper);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* never block taps on the topbar when closed */
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.notes-overlay.open {
  pointer-events: auto;
}

.notes-overlay.open {
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease;
}

/* Scrim isolates the cover during the 0.35s fade-in. Mirrors .chars-scrim. */
.notes-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .30);
  z-index: 219;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.notes-overlay.open~.notes-scrim {
  opacity: 1;
  pointer-events: auto;
}

.notes-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.notes-head {
  position: sticky;
  top: 0;
  background: rgba(244, 235, 213, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  padding: 22px 6vw 0;
  z-index: 10;
}

.notes-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, border-color .2s;
  display: grid;
  place-items: center;
}

.notes-close:hover {
  color: var(--seal);
  border-color: var(--seal);
}

.notes-kicker {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 10px;
}

.notes-title {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -.012em;
  margin: 0 0 22px;
  max-width: 32ch;
}

.notes-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin: 0 -2px;
  padding: 0;
}

.notes-tab {
  background: transparent;
  border: 1px solid var(--rule);
  border-bottom: none;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px 18px;
  margin: 0 2px -1px 0;
  cursor: pointer;
  position: relative;
  bottom: -1px;
  transition: color .2s, border-color .2s, background .2s;
  min-height: 44px;
}

.notes-tab em {
  font-family: var(--mono);
  font-size: .82em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: .08em;
  color: var(--seal);
  margin: 0 4px;
  text-transform: lowercase;
  opacity: .9;
}

body.pinyin-off .notes-tab em {
  display: none;
}

.notes-tab:hover {
  color: var(--seal);
}

.notes-tab.is-active {
  color: var(--seal);
  background: var(--paper);
  border-color: var(--rule);
  border-bottom: 1px solid var(--paper);
  z-index: 2;
}

.notes-body {
  padding: 0;
  flex: 1;
}

.notes-pane {
  display: none;
}

.notes-pane.is-active {
  display: block;
}

/* When inside the notes overlay, soften the top padding of moved sections */
.notes-overlay .prologue,
.notes-overlay .about,
.notes-overlay .currents,
.notes-overlay .wild,
.notes-overlay .reference-pane {
  border-top: none;
  padding-top: clamp(40px, 6vh, 80px);
}

.notes-overlay .prologue {
  background: transparent;
  border-bottom: none;
  padding-left: 0;
  padding-right: 0;
}

.notes-overlay .prologue-inner {
  max-width: 1040px;
}

.notes-overlay .prologue-act:last-child {
  margin-bottom: 0;
}

.notes-overlay .prologue-art--full figcaption a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--seal) 55%, transparent);
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .notes-head {
    padding: 18px 5vw 0;
  }

  .notes-title {
    margin-bottom: 14px;
  }

  /* Tabs become a single horizontal swipe-row so the sticky header stops
     eating ~40% of the phone viewport before any content appears. */
  .notes-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -5vw;
    padding: 0 5vw;
    scroll-snap-type: x proximity;
  }

  .notes-tabs::-webkit-scrollbar {
    display: none;
  }

  .notes-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    padding: 12px 14px;
    font-size: 10px;
  }

  .notes-close {
    width: 44px;
    height: 44px;
  }
}

/* The Notes button in the topbar */
.notes-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 9px;
  height: 32px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

/* .tool-btn (topbar grid) sets height/border/margin itself — this
   pre-refactor rule's own copies of those would otherwise conflict. */
.tool-btn.notes-btn {
  margin-right: 0;
  align-items: center;
}

.notes-btn .nb-han {
  font-family: var(--cn-elegant);
  font-size: 14px;
  line-height: 1;
}

.notes-btn .nb-en {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

.notes-btn:hover {
  color: var(--seal);
  border-color: var(--seal);
}

.notes-btn:hover .nb-en {
  color: var(--seal);
}

@media (max-width: 600px) {
  .notes-btn .nb-en {
    display: none;
  }

  .notes-btn {
    padding: 0 7px;
  }
}

/* The Characters button in the topbar (字) */
.chars-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 9px;
  height: 32px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.tool-btn.chars-btn {
  margin-right: 0;
  align-items: center;
}

.chars-btn .cb-han {
  font-family: var(--cn-elegant);
  font-size: 14px;
  line-height: 1;
}

.chars-btn:hover {
  color: var(--seal);
  border-color: var(--seal);
}

@media (max-width: 600px) {
  .chars-btn {
    padding: 0 7px;
  }
}

/* ============================================================
   CHARACTERS OVERLAY · 字 zì — the 828 unique characters
   Modeled on the notes overlay structure, but its own layout.
   ============================================================ */
.chars-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.chars-overlay.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

.chars-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .30);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.chars-overlay.open~.chars-scrim {
  opacity: 1;
  pointer-events: auto;
}

.chars-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 6vw 80px;
}

.chars-head {
  position: relative;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}

.chars-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.chars-close:hover {
  color: var(--seal);
  border-color: var(--seal);
}

.chars-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.chars-kicker em {
  font-style: italic;
  color: var(--seal);
}

.chars-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.35;
  letter-spacing: .005em;
  margin: 0 0 24px;
  max-width: 64ch;
  color: var(--ink);
}

.chars-title em {
  font-style: italic;
  color: var(--seal);
}

.chars-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chars-search {
  width: 100%;
  max-width: 480px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  outline: none;
  min-height: 44px;
}

.chars-search::placeholder {
  color: var(--ink-fade);
  letter-spacing: .08em;
}

.chars-search:focus {
  border-color: var(--seal);
}

.chars-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chars-sort-btn {
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s;
  min-height: 44px;
}

.chars-sort-btn:hover {
  border-color: var(--seal);
  color: var(--seal);
}

.chars-sort-btn.is-active {
  background: var(--seal);
  color: var(--paper);
  border-color: var(--seal);
}

.chars-howread {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 78ch;
  margin: 12px 0 0;
}

body.lang-th .chars-howread {
  font-family: var(--th);
  font-size: 14px;
  letter-spacing: 0;
}

body.lang-cn .chars-howread {
  font-family: var(--cn-serif);
  font-size: 13px;
  letter-spacing: 0;
}

.chars-howread-link {
  color: var(--seal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chars-howread-link:hover {
  text-decoration: none;
}

.chars-counter {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--ink-fade);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.chars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-soft, rgba(0, 0, 0, .10));
  border-left: 1px solid var(--rule-soft, rgba(0, 0, 0, .10));
}

.ch-cell {
  padding: 20px 18px 16px;
  border-right: 1px solid var(--rule-soft, rgba(0, 0, 0, .10));
  border-bottom: 1px solid var(--rule-soft, rgba(0, 0, 0, .10));
  position: relative;
  background: var(--paper);
  transition: background .15s ease;
}

.ch-cell:hover {
  background: rgba(168, 51, 50, .03);
}

.ch-mark {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--ink-fade, rgba(0, 0, 0, .30));
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ch-mark .ch-rank {
  color: var(--ink-fade);
}

.ch-mark .ch-firstchap {
  color: var(--seal);
  text-decoration: none;
}

.ch-mark .ch-firstchap:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ch-glyph {
  font-family: var(--cn-serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
  cursor: pointer;
  margin: 4px 0 10px;
  user-select: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ch-glyph:hover {
  color: var(--seal);
}

.ch-glyph .ch-simp {
  font-family: var(--cn-serif);
  font-size: 22px;
  color: var(--ink-fade);
  border: 1px solid var(--rule);
  padding: 2px 6px;
  align-self: flex-end;
}

.ch-py {
  font-family: var(--mono);
  font-style: italic;
  font-size: 13px;
  color: var(--seal);
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.ch-g {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 4px;
  font-style: italic;
}

.ch-b {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-fade);
  line-height: 1.6;
  letter-spacing: .02em;
  margin: 6px 0 0;
}

.ch-m {
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 6px 0 0;
}

.ch-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule-soft, rgba(0, 0, 0, .08));
}

.ch-freq {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--ink-fade);
}

.ch-speak {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s;
}

.ch-speak em {
  color: var(--seal);
  font-style: italic;
  text-transform: lowercase;
}

.ch-speak:hover {
  border-color: var(--seal);
  color: var(--seal);
}

/* 寫 WRITE / STROKE ORDER */
.ch-write {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s;
}

.ch-write em {
  color: var(--seal);
  font-style: italic;
  text-transform: lowercase;
}

.ch-write:hover {
  border-color: var(--seal);
  color: var(--seal);
}

.ch-write.is-active {
  border-color: var(--seal);
  color: var(--seal);
  background: rgba(168, 51, 50, .05);
}

.ch-stroke-host {
  display: none;
  margin-top: 12px;
  text-align: center;
}

.ch-stroke-host.is-open {
  display: block;
}

.ch-stroke-canvas {
  display: inline-block;
  background: transparent;
}

.ch-stroke-unavail {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-fade);
  text-align: center;
  padding: 10px 0;
  margin: 0;
}

/* On narrow cards, make the stroke canvas smaller */
@media (max-width: 480px) {
  .ch-stroke-canvas svg {
    width: 110px !important;
    height: 110px !important;
  }
}

/* "How to read" primer section */
.chars-howread-section {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}

.chrh-head {
  margin-bottom: 28px;
}

.chrh-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  display: block;
  margin-bottom: 12px;
}

.chrh-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.25;
  letter-spacing: .005em;
  margin: 0;
  color: var(--ink);
}

.chrh-body p {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0 0 18px;
}

.chrh-body p em {
  color: var(--seal);
  font-style: italic;
}

.chrh-body ol {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 68ch;
  padding-left: 22px;
  margin: 0 0 24px;
}

.chrh-body ol li {
  margin-bottom: 10px;
}

.chrh-body ol li strong {
  color: inherit;
  font-weight: 500;
}

body.lang-th .chrh-body p,
body.lang-th .chrh-body ol {
  font-family: var(--th);
  font-size: 17px;
  line-height: 1.78;
}

body.lang-cn .chrh-body p,
body.lang-cn .chrh-body ol {
  font-family: var(--cn-serif);
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: .02em;
}

/* Mobile: smaller grid cells */
@media (max-width: 600px) {
  .chars-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .ch-glyph {
    font-size: 44px;
  }

  .chars-shell {
    padding: 20px 18px 60px;
  }
}

/* ============================================================
   DAILY CHECK-IN · 問 wèn — reflective notebook with voice input
   Modeled on the chars-overlay shell; its own content layout.
   ============================================================ */
.checkin-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 9px;
  height: 32px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.tool-btn.checkin-btn {
  margin-right: 0;
  align-items: center;
}

.checkin-btn .ci-han {
  font-family: var(--cn-elegant);
  font-size: 14px;
  line-height: 1;
}

.checkin-btn:hover {
  color: var(--seal);
  border-color: var(--seal);
}

@media (max-width: 600px) {
  .checkin-btn {
    padding: 0 7px;
  }
}

.checkin-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.checkin-overlay.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

.checkin-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .30);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.checkin-overlay.open~.checkin-scrim {
  opacity: 1;
  pointer-events: auto;
}

.checkin-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 6vw 80px;
}

.checkin-head {
  position: relative;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
}

.checkin-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.checkin-close:hover {
  color: var(--seal);
  border-color: var(--seal);
}

.checkin-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.checkin-kicker em {
  font-style: italic;
  color: var(--seal);
}

.checkin-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-fade);
  margin: 0 0 18px;
}

body.lang-th .checkin-date {
  font-family: var(--th);
  letter-spacing: 0;
  font-size: 13px;
}

body.lang-cn .checkin-date {
  font-family: var(--cn-serif);
  letter-spacing: 0;
  font-size: 13px;
}

.checkin-theme {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 10px;
  font-weight: 500;
}

.checkin-question {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.32;
  letter-spacing: .005em;
  margin: 0 0 14px;
  color: var(--ink);
  max-width: 36ch;
}

body.lang-th .checkin-question {
  font-family: var(--th);
  line-height: 1.5;
}

body.lang-cn .checkin-question {
  font-family: var(--cn-serif);
  line-height: 1.4;
  letter-spacing: .02em;
}

.checkin-nudge {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}

body.lang-th .checkin-nudge {
  font-family: var(--th);
  font-style: normal;
  font-size: 15px;
}

body.lang-cn .checkin-nudge {
  font-family: var(--cn-serif);
  font-style: normal;
  font-size: 15px;
}

.checkin-compose {
  margin-bottom: 48px;
}

#checkinAnswer {
  width: 100%;
  min-height: 160px;
  padding: 18px 18px;
  background: transparent;
  border: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  outline: none;
}

body.lang-th #checkinAnswer {
  font-family: var(--th);
  font-size: 17px;
  line-height: 1.75;
}

body.lang-cn #checkinAnswer {
  font-family: var(--cn-serif);
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: .02em;
}

#checkinAnswer:focus {
  border-color: var(--seal);
}

#checkinAnswer::placeholder {
  color: var(--ink-fade);
  font-style: italic;
}

.checkin-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.checkin-mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  min-height: 44px;
}

.checkin-mic .mic-dot {
  width: 8px;
  height: 8px;
  background: var(--ink-fade);
  display: inline-block;
  transition: background .2s;
}

.checkin-mic:hover {
  border-color: var(--seal);
  color: var(--seal);
}

.checkin-mic:hover .mic-dot {
  background: var(--seal);
}

.checkin-mic.is-recording {
  background: var(--seal);
  color: var(--paper);
  border-color: var(--seal);
}

.checkin-mic.is-recording .mic-dot {
  background: var(--paper);
  animation: ci-pulse 1s infinite;
}

@keyframes ci-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

body.lang-th .checkin-mic .mic-label,
body.lang-cn .checkin-mic .mic-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.checkin-counter {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-fade);
  flex: 1;
  text-align: right;
}

.checkin-counter::after {
  content: " words";
}

body.lang-th .checkin-counter::after {
  content: " คำ";
}

body.lang-cn .checkin-counter::after {
  content: " 字";
}

.checkin-save {
  padding: 10px 22px;
  background: var(--seal);
  border: 1px solid var(--seal);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  min-height: 44px;
}

.checkin-save:hover {
  filter: brightness(1.1);
}

.checkin-save.is-saved {
  background: var(--ink);
  border-color: var(--ink);
}

body.lang-th .checkin-save,
body.lang-cn .checkin-save {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.checkin-share {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px dashed var(--rule);
  cursor: pointer;
}

.checkin-share input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
  accent-color: var(--seal);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.share-text {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
  letter-spacing: .03em;
}

body.lang-th .share-text {
  font-family: var(--th);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.7;
}

body.lang-cn .share-text {
  font-family: var(--cn-serif);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.7;
}

.checkin-history {
  margin: 48px 0;
}

.ch-hist-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

.ch-hist-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}

body.lang-th .ch-hist-title,
body.lang-cn .ch-hist-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-family: var(--th);
}

body.lang-cn .ch-hist-title {
  font-family: var(--cn-serif);
}

.ch-hist-export {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s;
}

.ch-hist-export:hover {
  border-color: var(--seal);
  color: var(--seal);
}

.ch-hist-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-fade);
  line-height: 1.6;
  letter-spacing: .04em;
  margin: 0 0 18px;
}

body.lang-th .ch-hist-note {
  font-family: var(--th);
  font-size: 13px;
  letter-spacing: 0;
}

body.lang-cn .ch-hist-note {
  font-family: var(--cn-serif);
  font-size: 13px;
  letter-spacing: 0;
}

.checkin-entries {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ce-entry {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft, rgba(0, 0, 0, .08));
}

.ce-entry:last-child {
  border-bottom: 0;
}

.ce-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.ce-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--ink-fade);
}

.ce-date em {
  color: var(--seal);
  font-style: italic;
}

.ce-q {
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  flex: 1;
}

body.lang-th .ce-q {
  font-family: var(--th);
  font-style: normal;
  font-size: 14px;
}

body.lang-cn .ce-q {
  font-family: var(--cn-serif);
  font-style: normal;
  font-size: 14px;
}

.ce-shared {
  font-size: 12px;
  color: var(--seal);
  letter-spacing: .15em;
}

.ce-body {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  white-space: pre-wrap;
}

.ce-lang-th .ce-body {
  font-family: var(--th);
  font-size: 16px;
  line-height: 1.78;
}

.ce-lang-cn .ce-body {
  font-family: var(--cn-serif);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .02em;
}

.ce-empty {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-fade);
  letter-spacing: .05em;
  font-style: italic;
}

body.lang-th .ce-empty {
  font-family: var(--th);
  font-size: 14px;
  letter-spacing: 0;
  font-style: normal;
}

body.lang-cn .ce-empty {
  font-family: var(--cn-serif);
  font-size: 14px;
  letter-spacing: 0;
  font-style: normal;
}

.checkin-about {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}

.ch-about-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
  font-weight: 500;
}

body.lang-th .ch-about-title,
body.lang-cn .ch-about-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-family: var(--th);
}

body.lang-cn .ch-about-title {
  font-family: var(--cn-serif);
}

.checkin-about p {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 14px;
}

.checkin-about p em {
  color: var(--seal);
  font-style: italic;
}

body.lang-th .checkin-about p {
  font-family: var(--th);
  font-size: 16px;
  line-height: 1.78;
}

body.lang-cn .checkin-about p {
  font-family: var(--cn-serif);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .02em;
}

@media (max-width: 600px) {
  .checkin-shell {
    padding: 20px 18px 60px;
  }

  .checkin-question {
    font-size: 22px;
  }

  .checkin-tools {
    gap: 8px;
  }

  .checkin-counter {
    width: 100%;
    text-align: left;
    order: 3;
    flex-basis: 100%;
  }
}

/* ============================================================
   IN THE WILD · 在野 — eight movements of living Daoism
   ============================================================ */
.wild {
  background: var(--paper);
  padding: clamp(64px, 11vh, 140px) 6vw;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.wild-inner {
  max-width: 880px;
  margin: 0 auto;
}

.wild-kicker {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 14px;
}

.wild-title {
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 500;
  letter-spacing: -.012em;
  margin: 0 0 18px;
  max-width: 26ch;
  line-height: 1.2;
}

.wild-blurb {
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-fade);
  max-width: 64ch;
  margin: 0 0 64px;
}

.wild-mvt {
  margin: 0 0 64px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
  position: relative;
}

.wild-mvt:first-of-type {
  border-top: 1px solid var(--ink);
  padding-top: 44px;
}

.wm-num {
  font-family: var(--cn-elegant);
  font-size: 36px;
  color: var(--seal);
  margin: 0 0 14px;
  line-height: 1;
  letter-spacing: .02em;
}

.wm-title {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  max-width: 28ch;
  line-height: 1.25;
  color: var(--ink);
}

.wm-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 24px;
}

.wm-tag em {
  font-family: var(--reader);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
  color: var(--seal);
}

.wm-body {
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 18px;
  text-wrap: pretty;
}

.wm-body em {
  color: var(--seal);
  font-style: italic;
}

.wm-body strong {
  color: inherit;
  font-weight: 500;
}

.wild-mvt--with-art .wm-art {
  margin: 22px 0 4px;
  padding-top: 0;
}

.wild-mvt--with-art .wm-art img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  filter: contrast(1.05);
}

.wild-mvt--with-art .wm-art figcaption {
  margin: 12px 0 0;
  font-family: var(--reader);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-fade);
  font-style: italic;
}

.wild-mvt--with-art .wm-art figcaption em {
  color: var(--seal);
  font-style: italic;
}

.wild-foot {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--ink);
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-fade);
  font-style: italic;
  text-wrap: pretty;
}

.wild-foot em {
  color: var(--seal);
  font-style: italic;
  font-weight: 500;
}

.reference-pane {
  padding: clamp(56px, 8vh, 96px) 6vw;
}

.reference-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.reference-blurb {
  max-width: 760px;
  margin: 0 0 32px;
  font-family: var(--reader);
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.65;
  color: var(--ink-soft);
}

.reference-blurb[data-lang="th"] {
  font-family: var(--th);
}

.slingerland-deep {
  margin: 34px 0;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--ink);
  background: var(--bone);
}

.slingerland-deep h3 {
  margin: 6px 0 16px;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 500;
}

.slingerland-deep ul {
  margin: 0 0 18px;
  padding-left: 20px;
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.7;
}

.slingerland-deep p:last-child {
  margin: 0;
  font-family: var(--reader);
  color: var(--ink-soft);
  line-height: 1.65;
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
}

.ideas-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 86px) 6vw;
}

.ideas-kicker {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--seal);
}

.ideas-title {
  max-width: 820px;
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 66px);
  line-height: .95;
  font-weight: 500;
}

.ideas-blurb {
  max-width: 780px;
  margin: 0 0 34px;
  font-family: var(--reader);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.55;
  color: var(--ink-soft);
}

.ideas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.idea-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-top: 3px solid hsl(calc(18 + (var(--idea-i, 0) * 23)) 46% 42% / .68);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bone) 82%, white), color-mix(in srgb, var(--paper-warm) 88%, white));
}

.idea-index,
.idea-source {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

.idea-card h3 {
  margin: 12px 0 12px;
  font-family: var(--display);
  font-size: clamp(23px, 2.4vw, 32px);
  line-height: 1.08;
  font-weight: 500;
  color: var(--ink);
}

.idea-body {
  margin: 0 0 18px;
  font-family: var(--reader);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-soft);
}

.idea-question {
  margin: auto 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}

.idea-question span:first-child {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--seal);
}

.reference-card {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-top: 3px solid hsl(var(--ref-hue, 20) 38% 44% / .68);
  background: color-mix(in srgb, var(--bone) 72%, white);
}

.reference-card img {
  width: 118px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.reference-card h3 {
  margin: 4px 0 6px;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 500;
}

.reference-author {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

.reference-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.reference-card dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--seal);
}

.reference-card dd {
  margin: -5px 0 4px;
  font-family: var(--reader);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 620px) {
  .reference-card {
    grid-template-columns: 92px 1fr;
    padding: 12px;
    gap: 14px;
  }

  .reference-card img {
    width: 92px;
  }
}

/* ============================================================
   ANIMATIONS — subtle reveals as the reader scrolls
   The book breathes; the panels emerge. JS adds .is-visible
   when an element enters the viewport.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  .wild-mvt,
  .era-card,
  .about-stanza,
  .play-card,
  .idea-card,
  .reference-card,
  .panel-tsai .tsai-frame {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
  }

  .wild-mvt.is-visible,
  .era-card.is-visible,
  .about-stanza.is-visible,
  .play-card.is-visible,
  .idea-card.is-visible,
  .reference-card.is-visible,
  .panel-tsai.is-visible .tsai-frame {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger the about stanzas a touch */
  .about-stanza.is-visible:nth-child(1) {
    transition-delay: 0ms;
  }

  .about-stanza.is-visible:nth-child(2) {
    transition-delay: 60ms;
  }

  .about-stanza.is-visible:nth-child(3) {
    transition-delay: 120ms;
  }

  .about-stanza.is-visible:nth-child(4) {
    transition-delay: 180ms;
  }

  .about-stanza.is-visible:nth-child(5) {
    transition-delay: 220ms;
  }

  /* Era cards stagger left-to-right on desktop */
  @media (min-width: 1100px) {
    .era-card.is-visible:nth-child(1) {
      transition-delay: 0ms;
    }

    .era-card.is-visible:nth-child(2) {
      transition-delay: 100ms;
    }

    .era-card.is-visible:nth-child(3) {
      transition-delay: 200ms;
    }

    .era-card.is-visible:nth-child(4) {
      transition-delay: 300ms;
    }

    .era-card.is-visible:nth-child(5) {
      transition-delay: 400ms;
    }
  }

  /* Subtle ink reveal on chapter strips when first scrolled into view */
  .chapter-strip {
    transition: background-color .6s ease;
  }

  /* Chapter entrance — a quiet breath as each chapter arrives */
  .chapter {
    opacity: 0.96;
    transform: translateY(10px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
  }

  .chapter.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Tsai cartoon zooms in subtly */
  .panel-tsai .tsai-img-wrap img {
    transition: transform 1.6s cubic-bezier(.22, .61, .36, 1);
    transform: scale(1.015);
  }

  .panel-tsai.is-visible .tsai-img-wrap img {
    transform: scale(1);
  }
}

/* ============================================================
   PANEL — TSAI CHIH-CHUNG CARTOON 蔡志忠
   Slot between Direct (02) and Reading (03). Hides itself if
   the image fails to load.
   ============================================================ */
.panel-tsai {
  background: var(--bone);
  padding: clamp(40px, 6vh, 80px) 6vw;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.panel-tsai .panel-label .pl-num,
.panel-tsai .panel-label>span:nth-child(2),
.panel-tsai .panel-label .pl-cn {
  color: var(--seal);
}

.tsai-frame {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.tsai-img-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
}

.tsai-img-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  filter: contrast(1.04);
}

.tsai-caption {
  font-family: var(--reader);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.tsai-caption-main {
  margin: 0 0 14px;
  font-style: italic;
}

.tsai-caption-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

.tsai-caption-note--th {
  font-family: var(--th);
}

.tsai-caption-note--cn {
  font-family: var(--cn-serif);
}

.tsai-credit {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0;
}

.panel-tsai.is-missing {
  display: none;
}

.tsai-overlay {
  position: fixed;
  inset: 0;
  z-index: 245;
  background: rgba(22, 18, 13, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.tsai-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .25s ease;
}

.tsai-gallery-shell {
  /* Width is set dynamically by JS after image renders, so the shell
     is exactly as wide as the comic image + arrows + padding.
     CSS sets a sensible starting max so there's no jump on first open. */
  width: min(740px, calc(100% - 32px));
  max-width: min(900px, calc(100% - 32px));
  min-width: min(340px, calc(100% - 32px));
  margin: 28px auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(12px, 2vw, 24px);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tsai-gallery-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 24px;
  cursor: pointer;
}

.tsai-gallery-kicker,
.slingerland-kicker,
.reference-kicker,
.reference-kind,
.tsai-gallery-credit {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--seal);
}

.tsai-gallery-title,
.reference-title {
  margin: 8px 0 12px;
  font-family: var(--display);
  font-size: clamp(26px, 4.4vw, 48px);
  font-weight: 500;
}

.tsai-gallery-head {
  padding-right: 50px;
}

.tsai-album-note--th {
  font-family: var(--th);
}

.tsai-album-note--cn {
  font-family: var(--cn-serif);
}

.tsai-album {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  touch-action: pan-y;
}

.tsai-album-page {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tsai-album-image-wrap {
  /* No fixed height — the wrapper adapts to the image's natural proportions.
     Checkerboard background removed; image sits cleanly on paper.
     Works for both landscape spreads and tall portrait pages. */
  min-height: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tsai-album-image {
  /* Height-driven sizing: fix the height to the viewport fraction so the
     image doesn't overflow the screen; width follows the aspect ratio.
     The shell's fit-content width then wraps exactly around this image. */
  display: block;
  height: min(68dvh, 720px);
  width: auto;
  max-width: calc(100vw - 140px);
  /* prevent runaway landscape images */
  background: var(--paper);
}

.tsai-album-caption {
  min-height: 94px;
  color: var(--ink-soft);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.55;
  display: grid;
  gap: 6px;
}

.tsai-album-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--seal);
}

.tsai-album-note {
  margin: 0;
}

.tsai-album-nav {
  width: 48px;
  height: 72px;
  border: 1px solid var(--rule);
  background: rgba(255, 252, 242, .74);
  color: var(--ink);
  font-family: var(--display);
  font-size: 46px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s ease, transform .2s ease, color .2s ease, opacity .2s ease;
}

.tsai-album-nav:hover:not(:disabled),
.tsai-album-nav:focus-visible {
  background: var(--bone);
  color: var(--seal);
  transform: translateY(-1px);
}

.tsai-album-nav:disabled {
  opacity: .28;
  cursor: default;
}

.tsai-album-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 2px;
}

.tsai-album-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(121, 72, 54, .46);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.tsai-album-dot.is-active {
  background: var(--seal);
  border-color: var(--seal);
}

@media (max-width: 720px) {
  .tsai-gallery-shell {
    width: min(calc(100% - 12px), fit-content);
    max-width: calc(100% - 12px);
    margin: 6px auto;
    padding: 12px;
  }

  .tsai-gallery-close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
  }

  .tsai-gallery-head {
    padding-right: 44px;
  }

  .tsai-gallery-title {
    font-size: clamp(28px, 10vw, 42px);
    line-height: 1.08;
  }

  .tsai-album {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
    margin-top: 12px;
  }

  .tsai-album-page {
    grid-column: 1 / -1;
    order: 1;
  }

  .tsai-album-image-wrap {
    height: min(58dvh, 560px);
    padding: 8px;
  }

  .tsai-album-caption {
    min-height: 78px;
    font-size: 14px;
  }

  .tsai-album-nav {
    order: 2;
    width: 100%;
    height: 44px;
    font-size: 32px;
  }

  .tsai-album-nav--prev {
    grid-column: 1;
  }

  .tsai-album-nav--next {
    grid-column: 2;
  }

  .tsai-album-dots {
    flex-wrap: wrap;
    max-height: 42px;
    overflow: hidden;
  }
}

/* Panel image — appears between panels for some chapters */
.panel-image {
  padding: 0;
  background: var(--ink);
  position: relative;
  height: 60vh;
  min-height: 360px;
  overflow: hidden;
}

.panel-image .image-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: contrast(1.05) saturate(.85);
}

.panel-image .image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 6vw;
  background: rgba(14, 12, 8, .94);
  color: rgba(244, 235, 213, .78);
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.panel-image .image-caption em {
  font-family: var(--reader);
  font-style: italic;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(244, 235, 213, .95);
  display: block;
  margin-bottom: 4px;
}

/* §11.10 — dark-mood chapters must not inherit cream --ink as panel-image surface */
.chapter.mood-cosmic .panel-image,
.chapter.mood-mirror .panel-image,
.chapter[data-n="81"] .panel-image {
  background: #0e0c08;
}

/* Sumi-e illustration variant — light paper background, ink text */
.panel-image.is-sumie {
  background: var(--paper-soft);
  height: auto;
  min-height: 0;
  padding: clamp(32px, 6vw, 72px) 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.panel-image.is-sumie .image-bg {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 640px;
  height: 0;
  padding-bottom: 66%;
  /* 3:2 aspect ratio */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: none;
  mix-blend-mode: multiply;
  /* cream paper melds with page */
}

.panel-image.is-sumie .image-caption {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  padding: 0;
  background: transparent;
  color: var(--ink-fade);
  max-width: 640px;
  width: 100%;
  text-align: center;
}

.panel-image.is-sumie .image-caption em {
  color: var(--ink-soft);
}

/* Yin mode — invert the mix-blend so sumi-e still reads on dark backgrounds */
body.yin-mode .panel-image.is-sumie {
  background: var(--paper-soft);
}

body.yin-mode .panel-image.is-sumie .image-bg {
  filter: invert(1) brightness(.88);
  mix-blend-mode: screen;
}

body.yin-mode .panel-image.is-sumie .image-caption {
  color: var(--ink-fade);
}

body.yin-mode .panel-image.is-sumie .image-caption em {
  color: var(--ink-soft);
}

/* Cartoon illustrations in bio: white bg dims in dark mode */
body.yin-mode .as-art--cartoon img {
  filter: brightness(0.82) contrast(1.05);
}

/* ============================================================
   PANEL — POST-IT · short attributed observation from Dr Non's life.
   One observation, one source line, hairline rules. Sits between
   the note and the closing question. Less heavy than a note,
   more personal than a source citation. Like a sticky note he
   left himself after watching the chapter play out in real life.
   ============================================================ */
.panel-postit {
  background: var(--paper);
  padding: clamp(32px, 5vh, 56px) 6vw;
  border-top: 1px solid var(--rule-soft, rgba(0, 0, 0, .10));
}

.postit-frame {
  max-width: 640px;
  margin: 0 auto;
}

.postit-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 16px;
}

body.lang-th .postit-kicker,
body.lang-cn .postit-kicker {
  text-transform: none;
  letter-spacing: 0.05em;
  font-size: 12px;
}

body.lang-th .postit-kicker {
  font-family: var(--th);
}

body.lang-cn .postit-kicker {
  font-family: var(--cn-serif);
}

body.lang-en .postit-kicker [data-lang="th"],
body.lang-en .postit-kicker [data-lang="cn"] {
  display: none;
}

body.lang-th .postit-kicker [data-lang="en"],
body.lang-th .postit-kicker [data-lang="cn"] {
  display: none;
}

body.lang-cn .postit-kicker [data-lang="en"],
body.lang-cn .postit-kicker [data-lang="th"] {
  display: none;
}

.postit-body {
  margin: 0;
  padding: 20px 0 20px 22px;
  border-left: 2px solid var(--seal);
}

.postit-body p {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

body.lang-th .postit-body p {
  font-family: var(--th);
  font-style: normal;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.78;
}

body.lang-cn .postit-body p {
  font-family: var(--cn-serif);
  font-style: normal;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.85;
  letter-spacing: 0.02em;
}

body.lang-en .postit-body p[data-lang="th"],
body.lang-en .postit-body p[data-lang="cn"] {
  display: none;
}

body.lang-th .postit-body p[data-lang="en"],
body.lang-th .postit-body p[data-lang="cn"] {
  display: none;
}

body.lang-cn .postit-body p[data-lang="en"],
body.lang-cn .postit-body p[data-lang="th"] {
  display: none;
}

/* ============================================================
   PANEL — CLOSER 問 wèn · the recognition question at chapter end
   Trilingual (EN/TH). Big, italic, like the chapter is asking
   directly. Sits just above the prev/next nav.
   ============================================================ */
.panel-closer {
  background: var(--paper-warm);
  padding: clamp(48px, 8vh, 100px) 6vw;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.closer-frame {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.closer-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 22px;
}

.closer-kicker em {
  font-family: var(--mono);
  font-size: .82em;
  font-style: italic;
  color: var(--seal);
  opacity: .9;
  letter-spacing: .08em;
  text-transform: lowercase;
  margin: 0 4px;
}

.closer-q {
  font-family: var(--reader);
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
  font-style: italic;
  text-wrap: pretty;
  border-left: 4px solid var(--seal);
  padding-left: 24px;
}

/* ============================================================
   PANEL — DEEP REFLECTION 深問
   A compact practice block after the chapter's closing question.
   ============================================================ */
.panel-reflection {
  background: color-mix(in srgb, var(--paper-warm) 78%, white);
  padding: clamp(36px, 6vh, 72px) 6vw;
  border-bottom: 1px solid var(--rule);
}

.reflection-frame {
  max-width: 880px;
  margin: 0 auto;
}

.reflection-kicker {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--seal);
}

.reflection-title {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.12;
  font-weight: 500;
  color: var(--ink);
}

.reflection-lists ol {
  margin: 0;
  padding-left: 1.35em;
  font-family: var(--reader);
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.55;
  color: var(--ink-soft);
}

.reflection-lists li+li {
  margin-top: 12px;
}

.reflection-practice {
  margin: 24px 0 0;
  padding: 16px 18px;
  border-left: 4px solid var(--gold);
  background: color-mix(in srgb, var(--bone) 72%, white);
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}

.closer-q[data-lang="th"] {
  font-family: var(--th);
  font-style: normal;
}

body.lang-en .closer-q[data-lang="th"],
body.lang-en .closer-q[data-lang="cn"] {
  display: none;
}

body.lang-th .closer-q[data-lang="en"],
body.lang-th .closer-q[data-lang="cn"] {
  display: none;
}

body.lang-cn .closer-q[data-lang="en"],
body.lang-cn .closer-q[data-lang="th"] {
  display: none;
}

@media (max-width: 600px) {

  /* Remove padding-left here — closer-q gets horizontal rhythm from its
     parent container (.closer-frame) padding; adding extra left-indent
     only on mobile created an alignment jump at the 600px breakpoint. */
  .closer-q {
    font-size: 20px;
  }
}

/* ============================================================
   PANEL — JOKE 笑 xiào
   Laughter as a door. One joke per chapter, with a deeper layer.
   Sits after the reflection panel. Hidden in quiet mode.
   ============================================================ */
.panel-joke {
  background: transparent;
  padding: clamp(28px, 4vh, 44px) 6vw;
  border-bottom: 1px solid var(--rule);
}

.joke-frame {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
}

.joke-kicker {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .65;
}

.joke-text {
  margin: 0 0 12px;
  font-family: var(--reader);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
}

.joke-layer {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-soft);
  /* §11.10: no opacity here — it was blending the (otherwise AA-passing)
     color down to ~3.2:1 against the panel background in both themes. */
}

@media (max-width: 600px) {
  .joke-frame {
    padding-left: 14px;
  }

  .joke-text {
    font-size: 15px;
  }
}

/* ============================================================
   PANEL — VIDEO MIRROR 影 yǐng
   One short moving clip per selected chapter. Muted, no autoplay,
   tap to play. Mute-by-default keeps the page quiet; a short
   moving koan is a pause, not a soundscape. Sharp edges, no
   border-radius — the house style. The Chinese character 影
   carries the double meaning of "shadow" and "motion picture".
   ============================================================ */
.panel-video {
  --video-ink: #f4ebd5;
  background: #15140f;
  color: var(--video-ink);
  padding: clamp(56px, 8vh, 96px) 6vw;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
body.yin-mode .panel-video {
  background: #0a0e14;
  border-top-color: rgba(138,138,164,.18);
  border-bottom-color: rgba(138,138,164,.18);
}

.panel-video .panel-label .pl-num,
.panel-video .panel-label>span:nth-child(2),
.panel-video .panel-label .pl-cn {
  color: var(--gold);
}
body.yin-mode .panel-video .panel-label .pl-num,
body.yin-mode .panel-video .panel-label>span:nth-child(2),
body.yin-mode .panel-video .panel-label .pl-cn {
  color: var(--gold);
}

/* Graceful degradation: if the video media 404s (e.g. not deployed), hide the
   dead play control but keep the poster + caption rather than a broken player. */
.video-stage.is-unavailable .video-play-btn,
.video-stage.is-unavailable .video-cc-btn {
  display: none;
}

.video-frame {
  max-width: 420px;            /* matches the vertical phone-aspect of the source */
  margin: 0 auto;
  display: grid;
  gap: 24px;
  text-align: left;
}

.video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 14;        /* matches 720×1120-ish source framing */
  background: #000;
  border: 1px solid var(--gold);
  overflow: hidden;
  display: block;
}
body.yin-mode .video-stage {
  border-color: var(--gold);
  background: #000;
}

.video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* fill the stage; vertical source gets pillarboxed by aspect */
  background: #000;
  border: 0;
}

.video-play-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--video-ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index: 2;
  transition: background .25s ease;
}
.video-play-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  transition: opacity .25s ease;
  z-index: -1;
}
.video-play-btn:hover::before,
.video-play-btn:focus-visible::before {
  background: rgba(0, 0, 0, 0.48);
}
.video-play-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

.video-play-btn .vpb-tri {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--video-ink);
  font-size: 18px;
  margin-bottom: 10px;
  /* Triangle is rotated square; keep shape rigid. No fill animation. */
  color: var(--video-ink);
  background: rgba(0,0,0,.35);
}
.video-play-btn .vpb-tri::before {
  /* nudge the triangle so it visually centers */
  content: "";
  position: relative;
  display: block;
  width: 0; height: 0;
  border-left: 14px solid var(--video-ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;            /* optical balance */
}
.video-play-btn .vpb-tri {
  font-size: 0;                 /* hide the text ▶ — we use a real triangle */
}
.video-play-btn .vpb-text {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--video-ink);
  text-shadow: 0 0 8px rgba(0,0,0,.5);
}

.video-stage.is-playing .video-play-btn {
  opacity: 0;
  pointer-events: none;
}
.video-stage.is-playing:hover .video-play-btn,
.video-stage.is-playing:focus-within .video-play-btn {
  opacity: 1;
  pointer-events: auto;
}

.video-cc-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.55);
  color: var(--video-ink);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.15s ease;
}
.video-stage:hover .video-cc-btn,
.video-stage:focus-within .video-cc-btn {
  opacity: 1;
}
.video-cc-btn.on {
  background: var(--seal);
  border-color: var(--seal);
  color: #fff;
}
.video-cc-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.video-stage.is-playing .video-cc-btn {
  opacity: 1;
}

.video-caption {
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.video-caption .vc-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--video-ink);
  font-weight: 400;
}
.video-caption .vc-line--th,
.video-caption .vc-line--cn {
  opacity: 0.82;
}
.video-caption .vc-credit {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.78;
}

.video-caption .video-status {
  margin: 0;
  color: #d2a14e;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Quiet mode: dim but keep visible — videos are a key surface, not decoration */
html body.quiet-mode .chapter .panel-video {
  opacity: 0.96;
}
html body.quiet-mode .chapter .panel-video .video-el,
html body.quiet-mode .chapter .panel-video .video-play-btn {
  filter: saturate(0.92);
}

/* Reduced motion: still allow the play button, but skip the autoplay loop */
@media (prefers-reduced-motion: reduce) {
  .video-el { /* nothing — videos are user-gated anyway */ }
  .video-play-btn { transition: none; }
}

/* Mobile: full-bleed, still respects the page padding */
@media (max-width: 720px) {
  .video-frame { max-width: 360px; }
  .video-stage { aspect-ratio: 9 / 14; }
  .video-caption .vc-line { font-size: 15px; }
}

/* MoMA grid (§XX): laptop composes the frame as the uneven 2/3 + 1/3 pair —
   caption reads in the main column, the 9:14 stage sits in the side column.
   The dark band stays (named folly, context.md); the grid fills it so the
   band reads intentional instead of marooning a lone portrait column. */
/* MoMA grid (§XX) on the mirror: the markup is already a figure —
   stage, then caption beneath it. Keep that. The figure takes its width
   FROM the stage so the caption wraps to exactly the image's edge (rule
   8, and Invariant 7 — no orphan edges), and the height is bounded by
   the viewport minus the sticky stack so the whole band reads on one
   screen. A short caption is NOT dragged into a second column: that
   leaves a hole and puts the caption visually ahead of its own image. */
@media (min-width: 768px) {
  .video-frame {
    width: min(420px, calc(56vh * 9 / 14));
    max-width: 100%;
    margin-inline: auto;
    gap: var(--bl);
  }
  .video-caption .vc-line {
    font-size: calc(1em * var(--step-down));
  }
  .video-caption .vc-credit {
    margin-top: var(--cap);
  }
}

/* ============================================================
   PANEL — NPM CHINESE PAINTING 畫 huà
   Public-domain masterworks from the National Palace Museum.
   Image left, attribution + meaning + relevance right.
   ============================================================ */
.panel-npm {
  background: var(--bone);
  padding: clamp(48px, 8vh, 100px) 6vw;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.npm-frame {
  max-width: var(--layout-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

@media (min-width: 900px) {
  .npm-frame {
    grid-template-columns: minmax(0, 1.4fr) 1fr;
    gap: 56px;
    align-items: center;
  }
}

.npm-img-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 12px;
  display: grid;
  place-items: center;
}

.npm-img-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: contrast(1.05);
}

.npm-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.npm-title-cn {
  font-family: var(--cn-elegant);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 4px;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}

.npm-title-cn .npm-title-py {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: .12em;
  color: var(--seal);
  opacity: .9;
  text-transform: lowercase;
  margin-left: 6px;
}

body.pinyin-off .npm-title-cn .npm-title-py {
  display: none;
}

.npm-title-en {
  font-family: var(--display);
  font-size: clamp(16px, 1.6vw, 19px);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 500;
}

.npm-artist {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-fade);
  margin: 0 0 8px;
  text-transform: uppercase;
}

.npm-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 16px 0 0;
}

.npm-meaning,
.npm-relevance {
  font-family: var(--reader);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.npm-relevance {
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  font-style: italic;
}

.npm-credit {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.panel-npm.is-missing {
  display: none;
}

/* CHAPTER FOOT NAV */
.chapter-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 32px 6vw 48px;
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-fade);
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

/* §11.8 — on phones the auto centre column starves the 1fr flanks; long
   chapter titles left the prev/next buttons 12–39px wide, wrapping one
   glyph per line. Two rows: nav pair on top (each ≥44px, ≥8px apart),
   the read/marker centre beneath. */
@media (max-width: 600px) {
  .chapter-foot {
    grid-template-columns: 1fr 1fr;
    gap: var(--cap) var(--pu);
    padding-inline: 5vw;
  }
  .chapter-foot > button:first-child { grid-column: 1; grid-row: 1; justify-self: start; }
  .chapter-foot > button:last-child  { grid-column: 2; grid-row: 1; justify-self: end; }
  .chapter-foot > .ch-foot-center    { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .chapter-foot button { min-width: 44px; white-space: nowrap; }
}

.chapter-foot button {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 8px 0;
  min-height: 44px;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.chapter-foot button:last-child {
  justify-content: flex-end;
  text-align: right;
}

.chapter-foot button:hover {
  color: var(--seal);
}

.chapter-foot button[disabled] {
  opacity: .25;
  cursor: default;
}

.chapter-foot .ch-marker {
  font-family: var(--cn-elegant);
  font-size: var(--size-md);
  letter-spacing: 4px;
  color: var(--seal);
  text-transform: none;
  font-weight: 400;
  text-align: center;
}

/* Keep-going teaser — the momentum pull from one chapter to the next */
.chapter-foot button.ch-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  text-align: right;
  padding: 12px 0 12px 16px;
  border-left: 1px solid var(--rule);
  min-height: 64px;
}

.ch-next .ch-next-eyebrow {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--seal);
}

.ch-next .ch-next-teaser {
  font-family: var(--reader);
  font-size: var(--size-sm);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--ink);
  max-width: 30ch;
}

.ch-next .ch-next-ref {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

.ch-next:hover .ch-next-teaser {
  color: var(--seal);
}

.ch-next:hover .ch-next-ref {
  color: var(--ink-soft);
}

/* Warm on-ramp on the cover — the spoken invitation, the implied gift */
.cover-invite {
  font-family: var(--reader);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 18px 0 4px;
  max-width: 46ch;
}

.cover-invite[data-lang="th"] {
  font-family: var(--th);
  line-height: 1.85;
}

.cover-invite[data-lang="cn"] {
  font-family: var(--cn-serif);
  line-height: 1.8;
}

/* Cover affordance → opens the three reading paths */
.cover-paths-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  margin-top: 18px;
  padding: 14px 0 0;
  border: none;
  border-top: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}

.cover-paths-btn .cpb-lead {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

.cover-paths-btn .cpb-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--seal);
}

.cover-paths-btn:hover .cpb-cta {
  color: var(--seal-deep);
}

/* One-line intro to the video-mirrors layer — kept subtle, set under
   the reading-paths button. The Chinese character 影 carries the double
   meaning of "shadow" and "motion picture". */
.cover-video-note {
  margin: 28px auto 0;
  max-width: 56ch;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.65;
  color: var(--ink-soft);
  text-align: center;
}
.cover-video-note .cv-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 8px;
}
.cover-video-note em {
  font-style: normal;
  color: var(--seal);
  letter-spacing: .04em;
}

/* Three reading paths overlay */
.tracks-scrim {
  position: fixed;
  inset: 0;
  background: rgba(21, 20, 15, .55);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .35s, visibility 0s .35s;
}

.tracks-scrim.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .35s, visibility 0s;
}

.tracks-overlay {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(620px, 94vw);
  background: var(--paper);
  z-index: 260;
  padding: 64px 32px 48px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .42s cubic-bezier(.2, .8, .25, 1), visibility 0s linear .42s;
  overflow-y: auto;
  border-left: 1px solid var(--rule);
  box-shadow: -30px 0 80px rgba(21, 20, 15, .18);
}

.tracks-overlay.open {
  transform: translateX(0);
  visibility: visible;
  transition: none;
}

.tracks-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-fade);
  width: 44px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.tracks-close:hover {
  color: var(--seal);
  border-color: var(--seal);
}

.tracks-head {
  margin-bottom: 32px;
}

.tracks-kicker {
  display: block;
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin-bottom: 8px;
}

.tracks-title {
  font-family: var(--cn-elegant);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  margin: 0 0 12px;
  line-height: 1.1;
}

.tracks-sub {
  font-family: var(--reader);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-fade);
  margin: 0;
  max-width: 46ch;
}

.track-card {
  padding-top: 28px;
}

.track-card+.track-card {
  border-top: 1px solid var(--rule);
  margin-top: 28px;
}

.track-name {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 12px;
}

.track-intro {
  font-family: var(--reader);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 48ch;
}

.track-subtitle {
  font-size: var(--size-tiny);
  font-style: italic;
  color: var(--ink-mute);
  margin: -4px 0 12px;
  letter-spacing: .02em;
}

.track-card.is-highlighted {
  outline: 1px solid var(--amber, #f59e0b);
  outline-offset: 8px;
}

/* ── feeling pre-filter ── */
.tracks-feelings {
  margin-bottom: 28px;
}

.tracks-feelings-label {
  font-size: var(--size-tiny);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-mute);
  margin-bottom: 10px;
}

.tracks-feelings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feeling-chip {
  padding: 8px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-soft);
  background: transparent;
  cursor: pointer;
  font-size: var(--size-body);
  transition: border-color .15s, background .15s;
}

.feeling-chip:hover {
  border-color: var(--ink-mute);
}

.feeling-chip.is-active {
  border-color: var(--amber, #f59e0b);
  background: rgba(245, 158, 11, 0.08);
}

.track-intro[data-lang="th"] {
  font-family: var(--th);
  line-height: 1.8;
}

.track-intro[data-lang="cn"] {
  font-family: var(--cn-serif);
  line-height: 1.75;
}

.track-chips {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.track-chip {
  display: grid;
  grid-template-columns: 28px 44px 1fr;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 6px;
  border: none;
  border-top: 1px solid var(--rule-soft);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}

.track-chip:hover {
  background: var(--paper-soft);
}

.track-chip .tc-step {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .1em;
  color: var(--ink-mute);
}

.track-chip .tc-roman {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .12em;
  color: var(--seal);
}

.track-chip .tc-title {
  font-family: var(--cn-elegant);
  font-size: var(--size-sm);
  color: var(--ink);
}

.track-chip:hover .tc-title {
  color: var(--seal);
}

/* In-reading character annotations (E) — tap a glyph to learn it */
.cn-stack-char.has-gloss {
  cursor: pointer;
}

.cn-stack-char.has-gloss .cs-c {
  border-bottom: 1px dotted var(--ink-silver);
  transition: color .15s, border-color .15s;
}

.cn-stack-char.has-gloss:hover .cs-c,
.cn-stack-char.has-gloss:focus-visible .cs-c {
  color: var(--seal);
  border-bottom-color: var(--seal);
}

.cn-stack-char.has-gloss:focus-visible {
  outline: none;
}

.char-pop {
  position: fixed;
  z-index: 240;
  width: min(320px, calc(100vw - 24px));
  background: var(--paper);
  border: 1px solid var(--seal);
  padding: 16px 18px 18px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}

.char-pop.show {
  opacity: 1;
  transform: translateY(0);
}

.char-pop-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--ink-fade);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.char-pop-close:hover {
  color: var(--seal);
}

.char-pop .char-pop-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  padding-right: 36px;
}

.char-pop .cp-glyph {
  font-family: var(--cn-elegant);
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
}

.char-pop .cp-py {
  font-family: var(--mono);
  font-size: var(--size-sm);
  letter-spacing: .08em;
  color: var(--seal);
}

.char-pop .cp-gloss {
  font-family: var(--reader);
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 10px;
}

.char-pop .cp-build {
  font-family: var(--reader);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.char-pop .cp-build .cp-label {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .1em;
  color: var(--ink-mute);
  margin-right: 4px;
}

.char-pop .cp-mnemonic {
  font-family: var(--reader);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
}

.char-pop .cp-freq {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

/* ============================================================
   CHAPTER INDEX OVERLAY  (kept from v1, minor tweaks)
   ============================================================ */
.index-scrim {
  position: fixed;
  inset: 0;
  background: rgba(21, 20, 15, .55);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .35s, visibility 0s linear .35s;
  backdrop-filter: blur(2px);
}

.index-scrim.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .35s, visibility 0s;
}

.index-overlay {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(560px, 92vw);
  background: var(--paper);
  z-index: 260;
  padding: 64px 32px 32px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .42s cubic-bezier(.2, .8, .25, 1), visibility 0s linear .42s;
  overflow-y: auto;
  border-left: 1px solid var(--rule);
  box-shadow: -30px 0 80px rgba(21, 20, 15, .18);
}

.index-overlay.open {
  transform: translateX(0);
  visibility: visible;
  transition: none;
}

.index-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-fade);
  width: 44px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.index-close:hover {
  color: var(--seal);
  border-color: var(--seal);
}

.index-head {
  margin-bottom: 36px;
}

.index-kicker {
  display: block;
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin-bottom: 8px;
}

.index-title {
  font-family: var(--cn-elegant);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  margin: 0 0 12px;
  line-height: 1.1;
  /* Let the inline <em> pinyin wrap to its own line so "道德經 dào dé jīng — 81 Chapters"
     doesn't truncate at narrow overlay widths (was clipping to "dào dé j"). */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .35em;
}

.index-title em {
  flex: 0 1 auto;
}

.index-sub {
  font-family: var(--reader);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-fade);
  margin: 0;
}

.index-half+.index-half {
  margin-top: 36px;
}

.index-part {
  font-family: var(--mono);
  font-size: var(--size-tiny);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

.index-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0;
}

.index-list a {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 7px 4px;
  text-decoration: none;
  color: var(--ink-soft);
  border: none;
  font-family: var(--reader);
  font-size: 14px;
  transition: color .2s, padding-left .2s;
  cursor: pointer;
  background: none;
}

.index-list a:hover {
  color: var(--seal);
  padding-left: 8px;
}

.index-list a.current {
  color: var(--seal);
}

.index-list a.visited {
  color: var(--ink);
}

.index-list .ix-n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 500;
}

.index-list .ix-titles {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.index-list .ix-cn {
  font-family: var(--cn-elegant);
  letter-spacing: 1px;
  color: var(--ink);
}

.index-list .ix-py {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: .14em;
  color: var(--seal);
  opacity: .85;
  text-transform: lowercase;
}

.index-list .ix-en {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-fade);
}

/* Decoded layer — one-line core distillation (EN) + theme tag in the index */
.index-list .ix-core {
  font-family: var(--reader);
  font-style: italic;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-fade);
  margin-top: 2px;
  max-width: 38ch;
}

.index-list>li.theme-hidden {
  display: none;
}

/* Theme filter chips — concept taxonomy navigation.
   House style: mono label, hairline border, zero radius, single amber accent. */
.index-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: min(680px, calc(100% - 32px));
  margin: 0 auto 14px;
}

.index-theme-chip {
  min-height: 44px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-soft);
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-fade);
  transition: border-color .15s, color .15s, background .15s;
}

.index-theme-chip:hover {
  border-color: var(--ink-mute);
  color: var(--ink);
}

.index-theme-chip.is-active {
  border-color: var(--amber, #f59e0b);
  background: rgba(245, 158, 11, 0.08);
  color: var(--ink);
}

body.pinyin-off .index-list .ix-py {
  display: none;
}

.index-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.index-bookmark {
  font-family: var(--mono);
  font-size: var(--size-xs);
  letter-spacing: .12em;
  color: var(--ink-fade);
  margin: 0 0 24px;
  padding: 12px;
  background: var(--paper-warm);
  border-left: 3px solid var(--seal);
  display: none;
}

.index-bookmark.show {
  display: block;
}

.index-bookmark.show::before {
  content: 'CONTINUE READING ';
  color: var(--seal);
  font-weight: 600;
}

.index-bookmark a {
  display: inline-block;
  margin-left: 6px;
  color: var(--ink);
  border: none;
  font-family: var(--reader);
  font-style: italic;
  font-size: 14px;
}

.other-books {
  margin-top: 12px;
}

.ob-head {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
}

.other-books a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  text-decoration: none;
  border-left: none;
  border-right: none;
  border-top: none;
  transition: color .2s, padding-left .2s;
}

.other-books a:hover {
  color: var(--seal);
  padding-left: 4px;
}

.other-books a:last-child {
  border-bottom: none;
}

.other-books span {
  display: block;
  font-family: var(--reader);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
}

.other-books em {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* ============================================================
   CONTINUE TOAST (minor, same pattern as other books)
   ============================================================ */
.continue-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 90;
  transform: translate(-50%, 200%);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform .5s cubic-bezier(.2, .8, .25, 1), opacity .3s;
  opacity: 0;
  max-width: calc(100vw - 24px);
}

.continue-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.continue-toast .ct-ico {
  width: 28px;
  height: 28px;
  background: var(--seal);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--cn-elegant);
  font-size: 14px;
  flex-shrink: 0;
}

.continue-toast .ct-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.continue-toast .ct-meta small {
  font-size: 9px;
  opacity: .55;
}

.continue-toast .ct-meta strong {
  font-family: var(--reader);
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.continue-toast button {
  background: var(--seal);
  color: var(--paper);
  border: none;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: .14em;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 38px;
}

.continue-toast .ct-x {
  background: transparent;
  color: rgba(255, 255, 255, .4);
  font-size: 16px;
  padding: 6px 8px;
}

@media (max-width: 560px) {
  .continue-toast {
    flex-wrap: wrap;
    left: 12px;
    right: 12px;
    transform: translate(0, 200%);
  }

  .continue-toast.show {
    transform: translate(0, 0);
  }
}

/* ============================================================
   COLOPHON
   ============================================================ */
.colophon {
  background: var(--ink);
  color: rgba(244, 235, 213, .7);
  padding: 80px 6vw;
  text-align: center;
}

.colo-inner {
  max-width: 60ch;
  margin: 0 auto;
}

.colophon h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  /* §11.10: .colophon's bg is always var(--ink), which inverts per theme
     (near-black in light mode, cream in dark mode) — so this needs the
     opposite-theme's --seal value in each case, not the theme-matched one. */
  color: #d85c5c;
  margin: 0 0 24px;
}

.colophon p {
  font-family: var(--reader);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 14px;
}

.colophon p em {
  color: var(--paper);
  font-style: italic;
}

.colo-sig {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: .25em;
  text-transform: uppercase;
  /* §11.10: .4 alpha measured 3.42:1 (light) / 2.44:1 (yin) — quiet, but
     legible-quiet. .68 clears AA small-text in both themes. */
  color: rgba(244, 235, 213, .68) !important;
  margin-top: 32px !important;
}

/* ============================================================
   MOBILE-FIRST RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  body {
    font-size: 17px;
  }

  .topbar {
    padding: 8px 12px;
  }

  .lang-toggle,
  .tool-btn {
    padding: 0 8px;
    height: 44px;
    min-width: 44px;
  }

  .cover {
    padding: 0 5vw 5vh;
  }

  .cover-hero-media {
    width: calc(100% + 10vw);
    margin-left: -5vw;
    margin-right: -5vw;
  }

  .cover-hero-media img {
    height: 58vh;
    min-height: 300px;
    object-position: center top;
  }

  .cover-stack {
    grid-template-columns: 1fr;
    padding: 24px 0;
    gap: 24px;
  }

  .cover-cn-vertical {
    writing-mode: horizontal-tb;
    font-size: clamp(56px, 16vw, 96px);
    letter-spacing: 8px;
  }

  .cover-cn-vertical br {
    display: none;
  }

  .cover-instructions {
    gap: 10px 18px;
    font-size: 9px;
  }

  .preface {
    padding: 56px 5vw;
  }

  .preface-inner p {
    font-size: 17px;
  }

  .chapter-strip {
    grid-template-columns: auto 1fr auto;
    top: 56px;
  }

  .chapter-strip .cs-en,
  .chapter-strip .cs-th {
    display: none;
  }

  .panel {
    padding: 56px 5vw;
    min-height: 80vh;
  }

  .panel-label {
    font-size: 9px;
  }

  .origin-cn-title {
    font-size: clamp(40px, 12vw, 64px);
    letter-spacing: 4px;
  }

  .origin-cn {
    font-size: 18px;
    line-height: 2.1;
    letter-spacing: 2px;
  }

  .direct-text {
    font-size: 19px;
  }

  .reading-body {
    font-size: 17px;
  }

  .reading-frame {
    gap: 24px;
  }

  .code-block {
    font-size: 12.5px;
    line-height: 1.65;
  }

  .panel-image {
    height: 50vh;
    min-height: 280px;
  }

  .index-overlay {
    padding: 56px 22px 22px;
  }

  .index-list {
    grid-template-columns: 1fr;
  }

  .colophon {
    padding: 56px 5vw;
  }

  .chapter-foot {
    padding: 24px 5vw 32px;
    gap: 12px;
    font-size: 9px;
  }

  .chapter-foot button:first-child,
  .chapter-foot button:last-child {
    font-size: 10px;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* PRINT */
@media print {
  body::before {
    display: none;
  }

  .topbar,
  .progress,
  .index-overlay,
  .index-scrim,
  .continue-toast {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 11pt;
  }

  .panel {
    padding: 0;
    min-height: auto;
  }

  .panel-code {
    background: white;
    color: black;
  }

  .code-block {
    color: black;
  }

  .chapter {
    page-break-before: always;
    border: none;
  }

  .cover {
    min-height: auto;
  }

  a {
    color: black;
    border-bottom: none;
  }
}

/* ============================================================
   THE LIBRARY — all five books, current highlighted
   Sits below the colophon. Same structure as the other books'
   library widgets so the cross-link is visually consistent.
   ============================================================ */
.library {
  background: var(--paper-deep);
  padding: clamp(56px, 9vh, 110px) 6vw clamp(48px, 8vh, 90px);
  border-top: 1px solid var(--rule);
}

.lib-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  text-align: center;
  margin: 0 0 8px;
}

.lib-sub {
  font-family: var(--reader);
  font-size: 16px;
  font-style: italic;
  color: var(--ink-fade);
  text-align: center;
  max-width: 50ch;
  margin: 0 auto 36px;
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .lib-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 540px) {
  .lib-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .library {
    padding: 48px 5vw 60px;
  }
}

.lib-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: border-color .2s, transform .2s, box-shadow .2s;
  min-height: 168px;
  text-decoration: none;
}

.lib-card:hover {
  border-color: var(--seal);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .35);
}

.lib-card.current {
  background: var(--seal);
  color: var(--paper);
  border-color: var(--seal);
  pointer-events: none;
  cursor: default;
}

.lib-card.current .lib-num {
  color: rgba(244, 235, 213, .7);
}

.lib-card.current .lib-title {
  color: var(--paper);
}

.lib-card.current .lib-tag {
  color: rgba(244, 235, 213, .85);
}

/* §11.10: --seal is lighter in dark mode (rgb(216,92,92)) — the hardcoded
   cream above only reaches ~2.7:1 there. Dark mode needs dark text on it,
   same as .lib-card.current .lib-title already correctly does via --paper. */
body.yin-mode .lib-card.current .lib-num,
body.yin-mode .lib-card.current .lib-tag {
  color: var(--paper);
}

.lib-num {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--seal);
}

.lib-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.lib-tag {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-fade);
  line-height: 1.55;
}

.lib-here {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  background: var(--gold);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 600;
  align-self: flex-start;
}

/* ============================================================
   DATA WALL — 世界亂象 · World Noise
   Bloomberg-terminal aesthetic. Mobile-first.
   Appears before the cover — the reader scrolls through the
   chaos of the world and then discovers the book that answers it.
   ============================================================ */
.data-wall {
  min-height: 100dvh;
  background: #02040a;
  color: #c8d8e8;
  font-family: var(--mono);
  font-size: 12px;
  overflow: hidden;
  position: relative;
}

/* Subtle scan-line overlay */
.data-wall::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .018) 0px, rgba(255, 255, 255, .018) 1px,
      transparent 1px, transparent 4px);
  pointer-events: none;
  z-index: 0;
}

.dw-inner {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 8vh, 80px) 5vw clamp(40px, 6vh, 60px);
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* HEADER */
.dw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #1e3a5f;
  padding-bottom: 10px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #4a6a8a;
}

.dw-header-left {
  color: #7ba4c8;
}

.dw-header-right {
  color: #4a6a8a;
  font-variant-numeric: tabular-nums;
}

.dw-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #22c55e;
  animation: dw-blink 2s ease-in-out infinite;
  margin-left: 8px;
}

.dw-delayed {
  color: #f59e0b;
  margin-left: 8px;
}

@keyframes dw-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

/* SECTION LABELS */
.dw-section-label {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #2a5a8a;
  margin-bottom: 8px;
}

/* CITY CLOCKS */
.dw-clocks {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.dw-clocks::-webkit-scrollbar {
  display: none;
}

.dw-clock {
  flex-shrink: 0;
  background: #060d1a;
  border: 1px solid #0e2540;
  padding: 9px 12px 8px;
  text-align: center;
  min-width: 64px;
  transition: opacity .3s;
}

.dw-clock.dw-night {
  opacity: .35;
}

.dw-clock-time {
  font-size: 15px;
  font-weight: 700;
  color: #e0f0ff;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dw-clock-city {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #3a6a9a;
  margin-top: 4px;
}

.dw-clock-day {
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2a4a6a;
  margin-top: 2px;
}

/* TWO-COLUMN LAYOUT */
.dw-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 540px) {
  .dw-two-col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* DATA ROWS */
.dw-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #0a1e34;
  padding: 5px 0;
}

.dw-row-label {
  font-size: 11px;
  color: #5a8aaa;
  letter-spacing: .1em;
}

.dw-row-val {
  font-size: 13px;
  font-weight: 700;
  color: #d0e8f8;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dw-up {
  color: #22c55e;
  font-size: 10px;
}

.dw-down {
  color: #ef4444;
  font-size: 10px;
}

.dw-flat {
  color: #64748b;
  font-size: 10px;
}

/* BIG NUMBERS */
.dw-big-nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 540px) {
  .dw-big-nums {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dw-big-card {
  background: #040c18;
  border: 1px solid #0e2540;
  padding: 11px 12px;
}

.dw-big-val {
  font-size: 18px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dw-big-label {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #4a6a8a;
  margin-top: 6px;
}

.dw-big-sub {
  font-size: 8px;
  letter-spacing: .14em;
  color: #2a3a4a;
  margin-top: 2px;
}

/* THE REVEAL — the moment it becomes a book */
.dw-reveal {
  margin-top: clamp(24px, 5vh, 56px);
  border-top: 1px solid #1e3a5f;
  padding-top: clamp(20px, 4vh, 40px);
  text-align: center;
}

.dw-reveal-cn {
  font-family: "ZCOOL XiaoWei", var(--cn-serif), serif;
  font-size: clamp(28px, 5vw, 52px);
  color: #e0f0ff;
  letter-spacing: 12px;
  line-height: 1;
  margin-bottom: 12px;
}

.dw-reveal-py {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: #a83332;
  text-transform: lowercase;
  margin-bottom: 14px;
}

.dw-reveal-en {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(15px, 1.8vw, 18px);
  color: #7ba4c8;
  font-style: italic;
  max-width: 50ch;
  margin: 0 auto 20px;
  line-height: 1.55;
}

.dw-reveal-scroll {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #2a5a8a;
  animation: dw-blink 2.5s ease-in-out infinite;
}

@media (max-width: 600px) {
  .dw-inner {
    padding: 52px 4vw 32px;
    gap: 16px;
  }

  .dw-reveal-cn {
    letter-spacing: 8px;
  }
}

/* ============================================================
   SELF TAB — 自述 zì shù · Non's spoken reflections
   ============================================================ */
.self-pane {
  display: none;
}

.self-pane.is-active {
  display: block;
}

/* MoMA grid (§XX): the Story pane is the cleanest demonstration of
   text-at-measure / images-at-layout-width. Prose stays at 60ch;
   figures run the container. One template for every piece:
   heading → lead figure → prose → coda figures. Sigs in a footer. */
.self-inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: calc(2 * var(--pu)) var(--page-margin) calc(3 * var(--pu));
}

.self-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 16px;
}

.self-title {
  font-family: var(--display);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 14px;
}

.self-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  line-height: 1.65;
  color: var(--ink-fade);
  max-width: 52ch;
  margin: 0 0 56px;
}

.self-piece {
  margin: 0 0 72px;
  border-top: 1px solid var(--rule);
  padding-top: 36px;
}

.sp-heading {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 28px;
}

.self-piece p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 22px;
  max-width: 60ch;
}

.self-piece p em {
  font-style: italic;
}

.sp-sig {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ink-fade) !important;
  margin-top: 40px !important;
}

.sp-photo {
  margin: var(--img-above) 0 var(--img-below);
  padding: 0;
}

.sp-photo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* lead — the section opener. Explicit 3:2 crop (the one opt-in crop). */
.sp-photo--lead {
  margin: 0 0 var(--bl);
}

.sp-photo--lead img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 20%;
}

/* coda — natural proportions, bounded, never upscaled. Consecutive
   codas sit one baseline apart (image → image = 1). */
.sp-photo--close {
  margin: var(--img-above) 0 0;
}

.sp-photo--close img {
  max-height: calc(16 * var(--bl));
}

.sp-photo figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-fade);
  margin-top: var(--cap);
  text-transform: uppercase;
}

/* Self tab language switching is covered by the GLOBAL LANGUAGE
   SCOPING rule (top of file) — every element carries data-lang. */
.sp-lang[data-lang="th"] p {
  font-family: var(--th) !important;
}

.self-footer {
  border-top: 1px solid var(--rule);
  padding-top: var(--pu);
}

.self-footer .sp-sig {
  margin-top: 0 !important;
}

.sp-lang[data-lang="cn"] p {
  font-family: var(--cn-serif) !important;
}

/* ============================================================
   CHAPTER VARIATION — MONUMENTAL SCALE-S (short lesson chapters)
   Some scale-S chapters get a giant CN character layout when the
   origin panel has only 1–2 lines of text (≤ ~40 Chinese chars)
   ============================================================ */

/* Giant character mode — triggered by .scale-s.mood-ink and .scale-s.mood-wabi
   for haiku-length chapters: the origin text takes one third of the viewport */
.chapter.scale-s .panel-origin .origin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.chapter.scale-s .origin-cn-title {
  font-size: clamp(48px, 8vw, 108px);
  letter-spacing: 8px;
  margin-bottom: 6px;
}

/* Scale-S chapters: push the Chinese character line even bigger */
.chapter.scale-s .cn-stack-char .cs-c,
.chapter.scale-s .cn-stack-punct {
  font-size: clamp(28px, 4.5vw, 48px);
}

/* ============================================================
   MOOD ENHANCEMENTS — more dramatic treatments for select moods
   ============================================================ */

/* mood-cryptic: full cyberpunk — scanline overlay, neon palette */
.chapter.mood-cryptic {
  position: relative;
}

.chapter.mood-cryptic::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, .04) 2px,
      rgba(0, 0, 0, .04) 4px);
}

.chapter.mood-cryptic .panel-origin {
  background: #0d1224;
  color: #d4f5b5;
}

.chapter.mood-cryptic .origin-cn-title {
  font-size: clamp(56px, 9vw, 120px);
  letter-spacing: 12px;
  color: #ff6ec7;
  text-shadow: 0 0 40px rgba(255, 110, 199, .35), 0 0 80px rgba(180, 51, 96, .2);
}

.chapter.mood-cryptic .panel-label {
  color: #d4f5b5;
  border-bottom-color: rgba(212, 245, 181, .2);
}

.chapter.mood-cryptic .pl-num {
  color: #ff6ec7;
}

/* mood-mirror (ch81): full inversion, maximum drama */
.chapter.mood-mirror .panel-origin .origin-cn-title {
  font-size: clamp(64px, 10vw, 140px);
  letter-spacing: 16px;
  color: var(--paper);
  text-shadow: none;
}

.chapter.mood-mirror .origin-num-roman {
  font-size: clamp(14px, 2vw, 24px);
  letter-spacing: .4em;
  color: rgba(244, 235, 213, .5);
}

/* mood-pop (ch38 — the virtue decay chapter): bold editorial layout */
.chapter.mood-pop .panel-origin {
  background: var(--seal);
  color: var(--paper);
}

.chapter.mood-pop .origin-cn-title {
  color: var(--paper);
  font-size: clamp(44px, 7vw, 96px);
}

.chapter.mood-pop .origin-en-title,
.chapter.mood-pop .origin-th-title {
  color: rgba(244, 235, 213, .8);
}

.chapter.mood-pop .cn-stack-char .cs-c {
  color: var(--paper);
}

.chapter.mood-pop .cn-stack-char .cs-py {
  color: rgba(244, 235, 213, .65) !important;
}

.chapter.mood-pop .panel-label {
  color: var(--paper);
  border-bottom-color: rgba(244, 235, 213, .25);
}

.chapter.mood-pop .pl-num {
  color: var(--paper);
}

/* Quiet mode strips mood-pop's cinnabar bg → restore all origin text to ink */
html body.quiet-mode .chapter.mood-pop .panel-origin {
  color: var(--ink);
}

html body.quiet-mode .chapter.mood-pop .panel-label,
html body.quiet-mode .chapter.mood-pop .pl-num {
  color: var(--ink);
}

html body.quiet-mode .chapter.mood-pop .origin-cn-title {
  color: var(--ink) !important;
}

html body.quiet-mode .chapter.mood-pop .origin-en-title,
html body.quiet-mode .chapter.mood-pop .origin-th-title {
  color: var(--ink-fade);
}

html body.quiet-mode .chapter.mood-pop .cn-stack-char .cs-c {
  color: var(--ink);
}

html body.quiet-mode .chapter.mood-pop .cn-stack-char .cs-py {
  color: var(--ch-accent) !important;
}

html body.quiet-mode .chapter.mood-pop .cn-stack-punct {
  color: var(--ink-fade);
}

html body.quiet-mode .chapter.mood-pop .origin-gloss {
  color: var(--ink-soft);
}

html body.quiet-mode .chapter.mood-pop .origin-gloss .og-mark {
  color: var(--seal);
}

/* mood-ink: maximally spare — pure void treatment */
.chapter.mood-ink .panel-origin {
  background: #000;
}

.chapter.mood-ink .origin-cn-title {
  color: rgba(244, 235, 213, .85);
  font-size: clamp(52px, 8.5vw, 112px);
  letter-spacing: 14px;
}

.chapter.mood-ink .cn-stack-char .cs-c {
  color: rgba(244, 235, 213, .9);
}

.chapter.mood-ink .cn-stack-char .cs-py {
  color: rgba(244, 235, 213, .35) !important;
}

/* Keyboard shortcut visible in cover footer */
.cover-instructions .cover-key-e::before {
  content: "E";
}

/* ============================================================
   FINAL IMPRESSION PASS — scale extremes, mood drama, chapter art
   ============================================================ */

/* ── XL: push to true monument scale ─────────────────────── */
.chapter.scale-XL .origin-cn-title {
  font-size: clamp(72px, 11vw, 160px) !important;
  letter-spacing: clamp(16px, 2.5vw, 36px) !important;
  line-height: .92 !important;
}

.chapter.scale-XL .panel-summary {
  min-height: 80vh !important;
  padding-top: clamp(160px, 26vh, 320px) !important;
  padding-bottom: clamp(120px, 20vh, 240px) !important;
}

.chapter.scale-XL .summary-frame .su-en,
.chapter.scale-XL .summary-frame .su-th {
  font-size: clamp(30px, 4vw, 52px) !important;
  line-height: 1.22 !important;
}

/* ── S: haiku mode — the shortest teachings get the most space ─ */
.chapter.scale-S .panel-summary {
  min-height: 50vh;
  padding-top: clamp(60px, 10vh, 120px) !important;
  padding-bottom: clamp(40px, 7vh, 80px) !important;
}

.chapter.scale-S .origin-cn-title {
  font-size: clamp(52px, 8.5vw, 120px) !important;
  letter-spacing: clamp(10px, 2vw, 28px) !important;
  line-height: .9 !important;
}

/* Ultra-compact S chapters: the summary sentence is the chapter */
.chapter.scale-S .summary-frame .su-en,
.chapter.scale-S .summary-frame .su-th {
  font-size: clamp(20px, 2.4vw, 30px) !important;
  max-width: 26ch;
}

/* ── mood-cosmic: starfield entry, maximum depth ─────────────*/
.chapter.mood-cosmic .panel-summary {
  background:
    radial-gradient(ellipse 60% 80% at 50% 120%, rgba(168, 51, 50, .28) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 30% -10%, rgba(100, 60, 20, .15) 0%, transparent 60%),
    #0a0906;
}

.chapter.mood-cosmic .summary-frame .su-en,
.chapter.mood-cosmic .summary-frame .su-th {
  color: rgba(244, 235, 213, .92);
  text-shadow: 0 0 60px rgba(184, 137, 58, .3);
}

.chapter.mood-cosmic .panel-origin {
  background: #0a0906;
}

.chapter.mood-cosmic .origin-cn-title {
  font-size: clamp(72px, 11vw, 160px) !important;
  letter-spacing: 28px !important;
  color: var(--paper);
  text-shadow: 0 0 80px rgba(184, 137, 58, .25), 0 0 160px rgba(168, 51, 50, .15);
}

/* ── mood-sea: deep water, bioluminescent edge ─────────────── */
.chapter.mood-sea .panel-summary {
  background: linear-gradient(180deg, #0a1f1f 0%, #061414 100%);
}

.chapter.mood-sea .panel-origin {
  background: #061414;
}

.chapter.mood-sea .origin-cn-title {
  color: #b8e4e4;
  text-shadow: 0 0 40px rgba(100, 180, 180, .3);
  font-size: clamp(64px, 10vw, 150px) !important;
  letter-spacing: clamp(8px, 2vw, 16px) !important;
}

.chapter.mood-sea .summary-frame .su-en,
.chapter.mood-sea .summary-frame .su-th {
  color: rgba(184, 228, 228, .88);
}

/* ── mood-natural: living forest, jade and earth ───────────── */
.chapter.mood-natural .panel-summary {
  background: linear-gradient(160deg, #1a2a1a 0%, #0e1a10 100%);
}

.chapter.mood-natural .origin-cn-title {
  color: #c8e4b0;
  font-size: clamp(56px, 9vw, 128px) !important;
}

.chapter.mood-natural .summary-frame .su-en,
.chapter.mood-natural .summary-frame .su-th {
  color: rgba(200, 228, 176, .88);
}

/* ── mood-stone: weight, gravity, funeral grey ──────────────── */
.chapter.mood-stone .panel-summary {
  background: linear-gradient(180deg, #1a1a18 0%, #111110 100%);
}

.chapter.mood-stone .panel-origin {
  background: #111110;
}

.chapter.mood-stone .origin-cn-title {
  color: rgba(200, 200, 194, .82);
  letter-spacing: 14px !important;
  font-size: clamp(52px, 8vw, 112px) !important;
}

.chapter.mood-stone .summary-frame .su-en,
.chapter.mood-stone .summary-frame .su-th {
  color: rgba(190, 190, 184, .85);
}

/* ── mood-flesh: warmth, intimacy, the organic ──────────────── */
.chapter.mood-flesh .panel-summary {
  background: linear-gradient(160deg, #1f0e0e 0%, #160808 100%);
}

.chapter.mood-flesh .origin-cn-title {
  color: #e8c4b0;
  font-size: clamp(52px, 8vw, 112px) !important;
}

.chapter.mood-flesh .summary-frame .su-en,
.chapter.mood-flesh .summary-frame .su-th {
  color: rgba(232, 196, 176, .88);
}

/* ── mood-weather: atmosphere, clouds, the fleeting ─────────── */
.chapter.mood-weather .panel-summary {
  background: linear-gradient(200deg, #1a2030 0%, #0e1422 100%);
}

.chapter.mood-weather .origin-cn-title {
  color: rgba(180, 200, 230, .85);
  font-size: clamp(52px, 8vw, 112px) !important;
}

/* ── mood-ember: dying fire, amber, the turning point ────────── */
.chapter.mood-ember .panel-summary {
  background: linear-gradient(180deg, #1a1008 0%, #110a04 100%);
}

.chapter.mood-ember .origin-cn-title {
  color: #e8c080;
  text-shadow: 0 0 40px rgba(200, 140, 60, .2);
  font-size: clamp(52px, 8vw, 112px) !important;
}

/* ── mood-physics: structural, scientific, precise ───────────── */
.chapter.mood-physics .panel-summary {
  background: linear-gradient(180deg, #0e1418 0%, #080e12 100%);
}

.chapter.mood-physics .origin-cn-title {
  color: rgba(180, 220, 240, .85);
  font-size: clamp(52px, 8vw, 112px) !important;
  letter-spacing: clamp(8px, 2vw, 16px) !important;
}

/* ── mood-civic: practical, earthy, action ───────────────────── */
.chapter.mood-civic .panel-summary {
  background: linear-gradient(180deg, #181410 0%, #100e0a 100%);
}

.chapter.mood-civic .origin-cn-title {
  color: rgba(220, 200, 170, .9);
  font-size: clamp(52px, 8vw, 112px) !important;
}

/* ── mood-wabi: stillness, understatement, the default ─────── */
.chapter.mood-wabi .panel-summary {
  background: linear-gradient(180deg, #181410 0%, #110f0c 100%);
}

.chapter.mood-wabi .origin-cn-title {
  font-size: clamp(52px, 8vw, 112px) !important;
  letter-spacing: 12px !important;
}

/* ── Chapter-specific overrides: three keystones ─────────────
   Ch 1  體道 · the opening — cosmic, portal
   Ch 8  易性 · water — the deepest moment
   Ch 81 顯質 · the closing — the book ends itself       ──── */

/* Ch 1: cosmic portal, maximum drama */
.chapter[data-n="1"] .panel-summary {
  background:
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(168, 51, 50, .35) 0%, transparent 55%),
    radial-gradient(ellipse 60% 100% at 80% 0%, rgba(60, 20, 10, .4) 0%, transparent 50%),
    #050402 !important;
  min-height: 88vh !important;
}

.chapter[data-n="1"] .origin-cn-title {
  font-size: clamp(80px, 13vw, 180px) !important;
  letter-spacing: 36px !important;
  color: #f4ebd5 !important;
  /* hardcoded light instead of var(--paper) which goes dark in yin-mode */
  text-shadow: 0 0 100px rgba(184, 137, 58, .28) !important;
}

.chapter[data-n="1"] .panel-origin {
  background: #050402 !important;
}

/* Ch 8: water — deep and still */
.chapter[data-n="8"] .panel-summary {
  background: linear-gradient(180deg, #03100e 0%, #020c0a 100%) !important;
  min-height: 82vh !important;
}

.chapter[data-n="8"] .origin-cn-title {
  font-size: clamp(76px, 12vw, 160px) !important;
  letter-spacing: 28px !important;
  color: #9ee4e0 !important;
  text-shadow: 0 0 60px rgba(60, 180, 170, .25) !important;
}

.chapter[data-n="8"] .panel-origin {
  background: #02100e !important;
}

/* Ch 81: closing monument — the book ends by undermining itself */
.chapter[data-n="81"] .panel-summary {
  background: #000 !important;
  min-height: 88vh !important;
}

.chapter[data-n="81"] .summary-frame .su-en,
.chapter[data-n="81"] .summary-frame .su-th {
  font-size: clamp(32px, 4.5vw, 60px) !important;
  letter-spacing: .04em !important;
  color: rgba(244, 235, 213, .7) !important;
}

.chapter[data-n="81"] .origin-cn-title {
  font-size: clamp(80px, 13vw, 180px) !important;
  letter-spacing: 36px !important;
  color: #f4ebd5 !important;
  /* hardcoded light instead of var(--paper) */
  opacity: .82 !important;
}

.chapter[data-n="81"] .panel-origin {
  background: #000 !important;
}

/* §11.10 contrast — panel-checkpoint was cream-on-cream (~1.02:1, invisible).
   Force dark bg + cream text on the ch81 checkpoint pane. */
.chapter[data-n="81"] .panel-checkpoint {
  background: #000 !important;
}

.chapter[data-n="81"] .checkpoint-frame {
  background: #000 !important;
}

.chapter[data-n="81"] .checkpoint-main,
.chapter[data-n="81"] .checkpoint-gloss {
  color: #f4ebd5 !important;
}

/* §11.10: this pane is fixed-black in both themes, so the kicker cannot use
   theme-relative --seal (dark #a83332 in light mode = 3.18:1 on black). */
.chapter[data-n="81"] .checkpoint-kicker {
  color: #d85c5c;
}

/* Ch 37 / 47 / 48: the three subtraction chapters — strip to the minimum */
.chapter[data-n="37"] .origin-cn-title,
.chapter[data-n="47"] .origin-cn-title,
.chapter[data-n="48"] .origin-cn-title {
  font-size: clamp(64px, 10vw, 140px) !important;
  letter-spacing: 22px !important;
  opacity: .75 !important;
}

/* ── deepwork overlay: dramatic section transitions ──────────── */
.dw-section {
  transition: opacity .3s ease;
}

.dw-section:target {
  opacity: 1;
}

/* ── about-quote: more presence ─────────────────────────────── */
.about-quote {
  margin: 28px 0 8px !important;
  padding: 18px 0 0 !important;
}

.about-quote .aq-cn {
  font-size: 22px !important;
  letter-spacing: 4px !important;
}

.about-quote .aq-tr {
  font-size: 14px !important;
}

/* ── Self tab: larger leading paragraph ─────────────────────── */
.self-piece p:first-of-type {
  font-size: clamp(19px, 1.8vw, 22px) !important;
  line-height: 1.9 !important;
  color: var(--ink) !important;
}

/* ── panel-label upgrade: more present, less ghost ──────────── */
.panel-label {
  letter-spacing: .22em !important;
}

/* On desktop: the hero image already says "Reading Dao De Jing with Dr Non"
   so the cover-stack text below it is redundant — hide it. Keep on mobile. */
@media (min-width: 768px) {
  .cover .cover-stack {
    display: none;
  }

  .cover .cover-meta {
    border-bottom: none;
    padding-bottom: 4px;
  }
}

/* Mobile tweaks for all scale enhancements */
@media (max-width: 600px) {
  .chapter.scale-XL .origin-cn-title {
    font-size: clamp(56px, 14vw, 96px) !important;
  }

  .chapter[data-n="1"] .origin-cn-title,
  .chapter[data-n="8"] .origin-cn-title,
  .chapter[data-n="81"] .origin-cn-title {
    font-size: clamp(60px, 15vw, 100px) !important;
  }

  .chapter.scale-S .origin-cn-title {
    font-size: clamp(44px, 11vw, 80px) !important;
  }

  /* ── KILL the blank space on mobile — halve all summary padding ── */
  .chapter.scale-XL .panel-summary {
    min-height: 44vh !important;
    padding-top: clamp(48px, 7vh, 80px) !important;
    padding-bottom: clamp(36px, 5vh, 60px) !important;
  }

  .chapter.scale-XL .summary-frame .su-en,
  .chapter.scale-XL .summary-frame .su-th {
    font-size: clamp(22px, 5.5vw, 30px) !important;
  }

  /* Chapter keystones: also cut min-height on mobile */
  .chapter[data-n="1"] .panel-summary,
  .chapter[data-n="8"] .panel-summary,
  .chapter[data-n="81"] .panel-summary {
    min-height: 50vh !important;
    padding-top: clamp(56px, 8vh, 90px) !important;
    padding-bottom: clamp(40px, 6vh, 64px) !important;
  }

  /* S chapters: already compact, make tighter */
  .chapter.scale-S .panel-summary {
    min-height: 36vh !important;
    padding-top: clamp(36px, 5vh, 56px) !important;
    padding-bottom: clamp(24px, 4vh, 40px) !important;
  }

  /* L + M scale: content-height only, no blank void */
  .chapter.scale-L .panel-summary,
  .chapter.scale-M .panel-summary {
    min-height: auto !important;
    padding-top: clamp(60px, 9vh, 90px) !important;
    padding-bottom: clamp(48px, 7vh, 72px) !important;
  }

  /* All panel-reading and panel-note: tighter on mobile */
  .chapter.scale-XL .panel-reading,
  .chapter.scale-XL .panel-note {
    padding-top: clamp(40px, 6vh, 64px) !important;
    padding-bottom: clamp(40px, 6vh, 64px) !important;
  }

  /* Cover: fit without overflow on mobile */
  .cover {
    min-height: auto;
    padding-bottom: 4vh;
  }

  .cover-hero-media img {
    height: auto;
  }

  /* full image on mobile too */
}

/* ============================================================
   DARK MOOD TEXT FIXES — summary text visible on dark panels
   These overrides only apply in Yin (dark) mode. In light mode
   the chapter moods keep their designed light backgrounds and
   dark text; forcing light text there made the summaries disappear.
   ============================================================ */

/* mood-wabi: warm dark #161413 in yin mode */
body.yin-mode .chapter.mood-wabi .summary-frame .su-cn {
  color: rgba(220, 200, 170, .7) !important;
}

body.yin-mode .chapter.mood-wabi .summary-frame .su-en,
body.yin-mode .chapter.mood-wabi .summary-frame .su-th {
  color: rgba(220, 200, 170, .88) !important;
  border-left-color: rgba(168, 51, 50, .68) !important;
}

/* mood-civic: earthy dark #14120e in yin mode */
body.yin-mode .chapter.mood-civic .summary-frame .su-en,
body.yin-mode .chapter.mood-civic .summary-frame .su-th {
  color: rgba(220, 200, 170, .9) !important;
}

body.yin-mode .chapter.mood-civic .summary-frame .su-cn {
  color: rgba(200, 180, 140, .8) !important;
}

/* mood-physics: dark grid #242729 in yin mode */
body.yin-mode .chapter.mood-physics .summary-frame .su-en,
body.yin-mode .chapter.mood-physics .summary-frame .su-th {
  color: rgba(180, 220, 240, .85) !important;
}

body.yin-mode .chapter.mood-physics .summary-frame .su-cn {
  color: rgba(180, 220, 240, .8) !important;
  letter-spacing: 14px !important;
}

/* mood-weather: dark slate #121820 in yin mode */
body.yin-mode .chapter.mood-weather .summary-frame .su-en,
body.yin-mode .chapter.mood-weather .summary-frame .su-th {
  color: rgba(180, 200, 230, .85) !important;
  border-left-color: rgba(138, 170, 187, .68) !important;
}

body.yin-mode .chapter.mood-weather .summary-frame .su-cn {
  color: rgba(140, 180, 200, .85) !important;
}

/* mood-mirror: in light mode it is dark ink-on-paper; in yin mode it flips
   to paper-on-ink. Keep the light-text override scoped to yin mode only. */
body.yin-mode .chapter.mood-mirror[data-n="81"] .summary-frame .su-en,
body.yin-mode .chapter.mood-mirror[data-n="81"] .summary-frame .su-th {
  color: rgba(244, 235, 213, .75) !important;
  border-left-color: rgba(244, 235, 213, .68) !important;
}

/* non-ch81 mood-mirror in yin: light panels need dark text */
body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .summary-frame .su-en,
body.yin-mode .chapter.mood-mirror:not([data-n="81"]) .summary-frame .su-th {
  color: rgba(21, 20, 15, .88) !important;
  border-left-color: rgba(21, 20, 15, .5) !important;
}

/* mood-weather origin text: keep DARK on paper-bg panel-origin in light mode.
   The base mood-weather colour is #2c3e50, which is fine there; this just
   enforces consistency against any stray overrides. */
body:not(.yin-mode) .chapter.mood-weather .panel-origin .origin-en-title,
body:not(.yin-mode) .chapter.mood-weather .panel-origin .origin-th-title {
  color: rgba(44, 62, 80, .75) !important;
}

body:not(.yin-mode) .chapter.mood-weather .panel-origin .origin-meta {
  color: rgba(44, 62, 80, .75) !important;
}

/* mood-cryptic: remove the position:fixed scanline overlay — it creates a z-index
   stacking issue that renders above panel content on Android Chrome */
.chapter.mood-cryptic::after {
  display: none;
}

/* ============================================================
   PANEL-ORIGIN TITLE FIXES
   The Final Impression Pass set origin-cn-title to light colours
   for dramatic contrast in panel-summary (dark bg). But panel-origin
   keeps background: var(--paper) — those same light colours are
   invisible on light paper. Override per mood.
   ============================================================ */

/* Light-chapter moods: origin panel is paper bg → title must be dark */
body:not(.yin-mode) .chapter.mood-civic .panel-origin .origin-cn-title {
  color: var(--ink) !important;
}

body:not(.yin-mode) .chapter.mood-natural .panel-origin .origin-cn-title {
  color: var(--jade) !important;
}

body:not(.yin-mode) .chapter.mood-weather .panel-origin .origin-cn-title {
  color: #2c3e50 !important;
}

body:not(.yin-mode) .chapter.mood-flesh .panel-origin .origin-cn-title {
  color: #4a2c2a !important;
}

/* Dark-chapter mood-ember: no panel-origin bg was set — add one so
   the amber title colour stays legible */
.chapter.mood-ember .panel-origin {
  background: #1a0d04 !important;
}

/* ============================================================
   DARK-MOOD PANEL-LABEL CONTAINER FIX
   panel-label uses color: var(--seal) and border: var(--rule).
   Both are invisible on dark chapter backgrounds. The child
   elements (.pl-num etc.) already have mood-specific overrides,
   but the container's own color (affects the · separator) and
   border need matching.
   ============================================================ */
.chapter.mood-cosmic .panel-label,
.chapter.mood-sea .panel-label,
.chapter.mood-stone .panel-label,
.chapter.mood-ember .panel-label,
.chapter.mood-mirror .panel-label {
  color: rgba(244, 235, 213, .35);
  border-bottom-color: rgba(244, 235, 213, .12);
}

/* ============================================================
   MOOD-INK PANEL-ORIGIN — black bg needs light text
   The FIP set .panel-origin { background: #000 } but the base
   mood-ink rules all use dark text (#1a1a1a) for the white
   chapter bg. Override everything inside the black origin.
   ============================================================ */
.chapter.mood-ink .panel-origin .origin-en-title,
.chapter.mood-ink .panel-origin .origin-th-title {
  color: rgba(244, 235, 213, .7) !important;
}

.chapter.mood-ink .panel-origin .origin-meta {
  color: rgba(244, 235, 213, .4) !important;
}

.chapter.mood-ink .panel-origin .origin-gloss {
  color: rgba(244, 235, 213, .85) !important;
}

.chapter.mood-ink .panel-origin .origin-gloss .og-mark {
  color: rgba(244, 235, 213, .5) !important;
}

.chapter.mood-ink .panel-origin .origin-line {
  border-top-color: rgba(244, 235, 213, .1) !important;
}

.chapter.mood-ink .panel-origin .origin-num-roman {
  color: rgba(244, 235, 213, .5) !important;
}

.chapter.mood-ink .panel-origin .origin-cn-title-py {
  color: rgba(244, 235, 213, .5) !important;
}

.chapter.mood-ink .panel-origin .cn-stack-char .cs-c {
  color: rgba(244, 235, 213, .85) !important;
}

.chapter.mood-ink .panel-origin .cn-stack-char .cs-py {
  color: rgba(244, 235, 213, .5) !important;
}

.chapter.mood-ink .panel-origin .panel-label {
  color: rgba(244, 235, 213, .35);
  border-bottom-color: rgba(244, 235, 213, .1);
}

.chapter.mood-ink .panel-origin .panel-label .pl-num,
.chapter.mood-ink .panel-origin .panel-label .pl-cn {
  color: rgba(244, 235, 213, .5);
}

/* mood-pop panel-label: paper-on-paper in reading/note panels.
   Keep paper colour for origin panel (seal bg), use ink for others. */
.chapter.mood-pop .panel-reading .panel-label,
.chapter.mood-pop .panel-note .panel-label,
.chapter.mood-pop .panel-direct .panel-label {
  color: var(--seal);
  border-bottom-color: rgba(168, 51, 50, .15);
}

.chapter.mood-pop .panel-reading .panel-label .pl-num,
.chapter.mood-pop .panel-reading .panel-label .pl-cn,
.chapter.mood-pop .panel-note .panel-label .pl-num,
.chapter.mood-pop .panel-note .panel-label .pl-cn {
  color: var(--seal);
}

/* mood-pop origin panel: origin-cn-title-py and origin-meta
   were seal-on-seal. Fix to paper on seal bg. */
.chapter.mood-pop .panel-origin .origin-cn-title-py {
  color: rgba(244, 235, 213, .6) !important;
}

.chapter.mood-pop .panel-origin .origin-meta {
  color: rgba(244, 235, 213, .5) !important;
}

.chapter.mood-pop .panel-origin .origin-gloss {
  color: rgba(244, 235, 213, .85) !important;
}

/* ============================================================
   CHAPTER BREAKS — caricature banners between chapters
   Full-bleed image panels; no scroll-snap so the chapter after
   them lands on its own snap point cleanly.
   ============================================================ */
.chapter-break {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--rule-faint);
  border-bottom: 1px solid var(--rule-faint);
  /* No scroll-snap-align — the chapter articles handle their own */
}

.chapter-break img {
  display: block;
  width: 100%;
  height: auto;
  /* Train is panoramic (≈2:1); classroom + shanghai are 16:9.
     On mobile all three are visible without clipping. */
}

.break-caption {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-fade);
  padding: 12px 16px 4px;
  margin: 0;
  line-height: 1.6;
}

.break-caption[data-lang="th"] {
  font-family: var(--th);
}

.break-caption[data-lang="cn"] {
  font-family: var(--cn-serif);
}

body.lang-en .break-caption[data-lang="th"],
body.lang-en .break-caption[data-lang="cn"] {
  display: none;
}

body.lang-th .break-caption[data-lang="en"],
body.lang-th .break-caption[data-lang="cn"] {
  display: none;
}

body.lang-cn .break-caption[data-lang="en"],
body.lang-cn .break-caption[data-lang="th"] {
  display: none;
}

/* ============================================================
   SECTION BREAK — thematic pauses between groups of chapters.
   Rendered after CH 10, 20, 30, 37, 50, 65, 80.
   The 37→38 break is "major" because it's the only true textual
   division in the book (道經 ends, 德經 begins).
   ============================================================ */
.section-break {
  width: 100%;
  padding: clamp(80px, 12vh, 140px) 6vw;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

.section-break-major {
  /* The only true textual boundary in the DDJ: 道經 ends, 德經 begins.
     Full-viewport height, cinnabar seal character. You know you've
     crossed from one half of the book to the other. */
  background: var(--paper-warm, var(--paper));
  padding-top: clamp(120px, 20vh, 240px);
  padding-bottom: clamp(120px, 20vh, 240px);
  min-height: 90vh;
  position: relative;
}

/* Hairline top and bottom rules for the major break — spine marks */
.section-break-major::before,
.section-break-major::after {
  content: '';
  position: absolute;
  left: 6vw;
  right: 6vw;
  height: 1px;
  background: var(--seal, #a83332);
  opacity: 0.35;
}

.section-break-major::before {
  top: clamp(28px, 5vh, 60px);
}

.section-break-major::after {
  bottom: clamp(28px, 5vh, 60px);
}

.sb-frame {
  max-width: 56ch;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.sb-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 48px;
}

body.lang-th .sb-kicker,
body.lang-cn .sb-kicker {
  text-transform: none;
  letter-spacing: 0.05em;
  font-size: 12px;
}

body.lang-th .sb-kicker {
  font-family: var(--th);
}

body.lang-cn .sb-kicker {
  font-family: var(--cn-serif);
}

.sb-mark {
  font-family: var(--cn-serif);
  /* Standard breaks: mark is bold presence, not full statement */
  font-size: clamp(100px, 18vw, 220px);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 48px;
  letter-spacing: 0;
  font-weight: 400;
}

.section-break-major .sb-mark {
  /* The 德 — dominant, cinnabar, book-spine scale */
  color: var(--seal, #a83332);
  font-size: clamp(160px, 32vw, 420px);
  margin: 0 0 56px;
  /* Very subtle shadow so it reads on paper-warm background */
  text-shadow: 0 1px 0 rgba(168, 51, 50, .12);
}

.sb-line {
  font-family: var(--body);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 52ch;
}

body.lang-th .sb-line {
  font-family: var(--th);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.78;
}

body.lang-cn .sb-line {
  font-family: var(--cn-serif);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

body.lang-en .sb-line[data-lang="th"],
body.lang-en .sb-line[data-lang="cn"] {
  display: none;
}

body.lang-th .sb-line[data-lang="en"],
body.lang-th .sb-line[data-lang="cn"] {
  display: none;
}

body.lang-cn .sb-line[data-lang="en"],
body.lang-cn .sb-line[data-lang="th"] {
  display: none;
}

/* ============================================================
   WORDLESS CHAPTER — radical visual treatment for CH 40.
   The shortest chapter in the book gets a page of breath.
   ============================================================ */
.chapter-wordless {
  background: var(--paper);
  min-height: 95vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.chapter-wordless .chapter-strip {
  border-bottom: 1px solid var(--rule);
}

.panel-wordless {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 10vh, 120px) 6vw;
}

.wordless-frame {
  max-width: 36rem;
  text-align: center;
}

.wordless-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: inherit;
  margin: 0 0 64px;
}

body.lang-th .wordless-kicker {
  font-family: var(--th);
  text-transform: none;
  letter-spacing: 0.05em;
  font-size: 13px;
}

body.lang-cn .wordless-kicker {
  font-family: var(--cn-serif);
  text-transform: none;
  letter-spacing: 0.05em;
  font-size: 13px;
}

body.lang-en .wordless-kicker [data-lang="th"],
body.lang-en .wordless-kicker [data-lang="cn"] {
  display: none;
}

body.lang-th .wordless-kicker [data-lang="en"],
body.lang-th .wordless-kicker [data-lang="cn"] {
  display: none;
}

body.lang-cn .wordless-kicker [data-lang="en"],
body.lang-cn .wordless-kicker [data-lang="th"] {
  display: none;
}

.wordless-cn {
  font-family: var(--cn-serif);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.7;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin: 0 0 36px;
}

.wordless-cn p {
  margin: 0 0 8px;
}

.wordless-py {
  font-family: var(--mono);
  font-style: italic;
  font-size: 13px;
  color: var(--seal);
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.wordless-title-en {
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
  font-style: italic;
}

.wordless-title-th {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 64px;
}

.wordless-coda {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-fade);
  line-height: 1.7;
  margin: 0;
}

body.lang-th .wordless-coda {
  font-family: var(--th);
  letter-spacing: 0;
  font-size: 13px;
}

body.lang-cn .wordless-coda {
  font-family: var(--cn-serif);
  letter-spacing: 0;
  font-size: 13px;
}

body.lang-en .wordless-coda [data-lang="th"],
body.lang-en .wordless-coda [data-lang="cn"] {
  display: none;
}

body.lang-th .wordless-coda [data-lang="en"],
body.lang-th .wordless-coda [data-lang="cn"] {
  display: none;
}

body.lang-cn .wordless-coda [data-lang="en"],
body.lang-cn .wordless-coda [data-lang="th"] {
  display: none;
}

body.lang-en .wordless-title-th {
  display: none;
}

body.lang-th .wordless-title-en {
  display: none;
}

body.lang-cn .wordless-title-en,
body.lang-cn .wordless-title-th {
  display: none;
}

/* Final topbar normalization: older rules above mixed 44px controls into
   a 52px bar. Keep the chrome calm and full-height before mobile overrides. */
@media (min-width: 561px) {
  .topbar {
    overflow: visible;
  }

  .topbar-tools {
    align-items: stretch;
    height: 100%;
  }

  .topbar-tools .lang-toggle,
  .topbar-tools .tool-btn {
    height: 100%;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
  }

  /* Active-state underline (matches .lang-pill.is-active) needs to
     out-specify the border-bottom:0 reset directly above. */
  .topbar-tools .tool-btn.is-on {
    border-bottom: 2px solid var(--seal);
  }

  .topbar-tools .tool-btn {
    min-width: 50px;
    width: auto;
    white-space: nowrap;
  }

  .topbar-tools .lang-toggle {
    min-width: 122px;
  }
}

/* Mobile topbar: keep every primary control reachable in the first viewport. */
@media (max-width: 560px) {
  .topbar {
    overflow: visible;
    justify-content: flex-start;
    padding: 0;
  }

  .topbar-brand {
    display: none;
  }

  .topbar-tools {
    position: absolute;
    inset: 0;
    display: flex;
    flex: none;
    min-width: 0;
  }

  .topbar-tools .tool-btn {
    flex: 0 0 44px;
    min-width: 0;
    width: 44px;
    height: 52px;
    padding: 0;
  }

  .topbar-tools .lang-toggle {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 2px;
    overflow: hidden;
  }

  .lang-toggle .lang-pill {
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 3px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0;
  }

  .lang-toggle .lang-pill:not(.is-active) {
    display: none;
  }
}

@media (max-width: 380px) {
  .topbar-tools .tool-btn {
    flex-basis: 36px;
    width: 36px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    font-size: 15px;
  }

  .topbar-tools .lang-toggle {
    flex-basis: auto;
  }
}

@media (max-width: 340px) {
  .topbar-tools .tool-btn {
    flex-basis: 34px;
    width: 34px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    font-size: 14px;
  }

  .topbar-tools .lang-toggle {
    flex-basis: auto;
  }

  .lang-toggle .lang-pill {
    font-size: 9px;
  }
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(244, 235, 213, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

.search-overlay.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .2s ease, visibility 0s;
}

.search-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .20);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.search-overlay.open~.search-scrim {
  opacity: 1;
  pointer-events: auto;
}

.search-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 6vw 80px;
}

.search-head {
  position: relative;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}

.search-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.search-close:hover {
  color: var(--seal);
  border-color: var(--seal);
}

.search-kicker {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--seal);
  margin: 0 0 16px;
}

.search-input {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  border-radius: 4px;
}

.search-input:focus {
  border-color: var(--jade);
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sr-item {
  display: block;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: background .2s;
}

.sr-item:hover {
  background: rgba(0, 0, 0, .03);
  border-color: var(--ink-mute);
}

.sr-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--jade);
}

.sr-match {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.sr-match em {
  background: rgba(200, 50, 50, 0.1);
  font-style: normal;
  font-weight: 600;
  color: var(--seal);
  padding: 0 2px;
}

.sr-empty {
  padding: 18px 0;
  font-family: var(--reader);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .search-shell {
    padding-top: 24px;
  }

  .search-close {
    width: 40px;
    height: 40px;
  }

  .search-input {
    padding-right: 48px;
    font-size: 16px;
  }
}

/* ============================================================
   REFLECTION TEXTAREA
   ============================================================ */
.reflection-input,
.play-input {
  width: 100%;
  min-height: 120px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--rule);
  background: transparent;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  outline: none;
  transition: border-color .2s;
}

.reflection-input:focus,
.play-input:focus {
  border-color: var(--jade);
  background: rgba(255, 255, 255, 0.4);
}

.reflection-save,
.play-save {
  margin-top: 12px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s;
}

.reflection-save:hover,
.play-save:hover,
.reflection-save:focus-visible,
.play-save:focus-visible {
  border-color: var(--seal);
  color: var(--seal);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal) 18%, transparent);
}

.reflection-save.is-saved,
.play-save.is-saved {
  background: var(--seal);
  color: var(--paper);
  border-color: var(--seal);
}

/* ============================================================
   DAO EXPERIENCE SYSTEM — transit map, passport, movement rhythm
   ============================================================ */
.dao-map-host {
  position: relative;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(168, 51, 50, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(21, 20, 15, .055) 1px, transparent 1px),
    var(--paper-map);
  background-size: 36px 36px, 36px 36px, auto;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.dao-map-host--cover {
  padding: clamp(28px, 5vw, 58px) 6vw;
}

.dao-map-host--index {
  margin: 0 0 30px;
  padding: 16px;
  border: 1px solid var(--rule);
  background-size: 26px 26px, 26px 26px, auto;
}

.dao-map {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

.dao-map-head {
  display: grid;
  grid-template-columns: minmax(180px, .6fr) minmax(240px, 1fr);
  gap: 16px clamp(24px, 5vw, 60px);
  align-items: end;
}

.dao-map-kicker {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--seal);
}

.dao-map-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 58px);
  line-height: .96;
  letter-spacing: 0;
  color: var(--ink);
}

.dao-map-head p:not(.dao-map-kicker) {
  margin: 0;
  max-width: 58ch;
  font-family: var(--reader);
  font-size: clamp(16px, 1.8vw, 21px);
  line-height: 1.45;
  color: var(--ink-soft);
}

.dao-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dao-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bone) 72%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.dao-map-legend-item i {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  font-style: normal;
  font-family: var(--cn-serif);
  color: var(--exp-color, var(--seal));
}

.dao-map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 70%, white 30%);
}

.dao-map-line {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.dao-map-line:nth-child(3n) {
  border-right: none;
}

.dao-map-line:nth-last-child(-n+3) {
  border-bottom: none;
}

.dao-map-line-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--mono);
}

.route-chip {
  padding: 3px 6px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: .1em;
}

.route-mark {
  font-family: var(--cn-serif);
  font-size: 24px;
  line-height: 1;
  color: var(--seal);
}

.route-name {
  min-width: 0;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.route-range {
  font-size: 10px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* §11.10: .dao-map-grid mixes --paper with 30% white — in dark mode that
   lightens near-black into a mid-grey (89,91,91) faster than --ink-mute
   (tuned against the true dark --paper) can track, dropping to ~2.7:1.
   Same problem hits .route-name's --ink-soft (~3.58:1) — both need --ink. */
body.yin-mode .route-range,
body.yin-mode .route-name {
  color: var(--ink);
}

.dao-map-stations {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 7px;
  position: relative;
}

.dao-map-stations::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--seal), var(--rail-blue), var(--signal-yellow));
  transform: translateY(-50%);
  opacity: .35;
}

.dao-map-station {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--exp-color, var(--seal)) 68%, var(--ink) 12%);
  background: var(--bone);
  color: var(--ink);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.dao-map-station:hover,
.dao-map-station:focus-visible {
  transform: translateY(-2px);
  background: var(--ink);
  color: var(--paper);
  outline: none;
}

.dao-map-station.current {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--seal);
}

.dao-map-station.visited .station-stamp {
  opacity: 1;
  transform: rotate(-12deg) scale(1);
}

.station-num {
  font-size: clamp(8px, 1vw, 11px);
  font-variant-numeric: tabular-nums;
  color: currentColor;
}

.station-han {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-family: var(--cn-serif);
  font-size: 12px;
  color: var(--exp-color, var(--seal));
}

.dao-map-station:hover .station-han,
.dao-map-station:focus-visible .station-han {
  color: var(--paper);
}

.station-stamp {
  position: absolute;
  inset: auto auto 3px 3px;
  opacity: 0;
  transform: rotate(-12deg) scale(.7);
  color: var(--seal);
  font-family: var(--cn-serif);
  font-size: 13px;
  line-height: 1;
  transition: opacity .18s ease, transform .18s ease;
}

.is-hinge {
  border-style: double;
  border-width: 3px;
}

.exp-station {
  --exp-color: var(--seal);
}

.exp-instrument {
  --exp-color: var(--deep-blue);
}

.exp-cinema {
  --exp-color: var(--jade);
}

.exp-comic {
  --exp-color: var(--signal-yellow);
}

.exp-character-lab {
  --exp-color: var(--ink);
}

.exp-quiet-void {
  --exp-color: var(--ink-mute);
}

.exp-field-note {
  --exp-color: var(--gold);
}

/* Station-han marks (記, 漫) are 12px on --bone bg — gold/yellow fail 4.5:1.
   Override specifically for the map marker glyph. */
.exp-field-note .station-han {
  color: #7a5a20;
}

/* amber-brown: 6.4:1 on --bone */
.exp-comic .station-han {
  color: #7a6200;
}

/* deep yellow: 5.5:1 on --bone */
.dao-map--compact {
  gap: 14px;
}

.dao-map--compact .dao-map-head {
  grid-template-columns: 1fr;
  gap: 8px;
}

.dao-map--compact .dao-map-head h2 {
  font-size: 24px;
}

.dao-map--compact .dao-map-head p:not(.dao-map-kicker),
.dao-map--compact .dao-map-legend {
  display: none;
}

.dao-map--compact .dao-map-grid {
  grid-template-columns: 1fr;
}

.dao-map--compact .dao-map-line,
.dao-map--compact .dao-map-line:nth-child(3n),
.dao-map--compact .dao-map-line:nth-last-child(-n+3) {
  border-right: none;
  border-bottom: 1px solid var(--rule);
}

.dao-map--compact .dao-map-line:last-child {
  border-bottom: none;
}

.passport-stamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 42px;
  min-height: 28px;
  justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--seal) 50%, transparent);
  color: var(--ink-mute);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  transform: rotate(-2deg);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
}

.passport-mark {
  font-family: var(--cn-serif);
  color: var(--seal);
}

.passport-stamp.visited {
  color: var(--seal-deep);
  border-color: var(--seal);
  background: color-mix(in srgb, var(--seal) 10%, var(--paper) 90%);
}

.chapter-strip .cs-route {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
  color: var(--ink-fade);
  white-space: nowrap;
}

.chapter-strip .cs-route span {
  color: var(--seal);
  font-weight: 700;
}

.chapter-strip .cs-route b {
  font-weight: 400;
  color: var(--ink-mute);
}

.chapter-strip .cs-route em {
  font-style: normal;
  letter-spacing: .08em;
}

.index-list .ix-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.index-list .ix-meta .passport-stamp {
  min-width: 32px;
  min-height: 20px;
  font-size: 8px;
  transform: rotate(-4deg);
}

.entry-hook {
  margin: 0 auto 22px;
  max-width: 62ch;
  padding: 10px 14px;
  border-left: 3px solid var(--exp-color, var(--seal));
  background: color-mix(in srgb, var(--bone) 78%, transparent);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .03em;
  color: var(--ink-soft);
}

.exp-instrument .panel-summary {
  background-image:
    linear-gradient(90deg, rgba(25, 59, 99, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(25, 59, 99, .08) 1px, transparent 1px);
  background-size: 40px 40px;
}

.exp-instrument .summary-frame::after {
  content: "SIGNAL";
  display: block;
  margin: 18px auto 0;
  width: max-content;
  padding: 4px 10px;
  border: 1px solid var(--deep-blue);
  color: var(--deep-blue);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
}

.exp-cinema .panel-summary {
  background: linear-gradient(180deg, rgba(21, 20, 15, .08), transparent 54%), var(--paper);
}

.exp-comic .panel-summary {
  background:
    repeating-linear-gradient(-8deg, rgba(216, 173, 53, .16) 0 8px, transparent 8px 18px),
    var(--paper-soft);
}

.exp-character-lab .origin-cn-title {
  text-shadow: 0 0 0 var(--ink);
}

.exp-quiet-void .panel-summary,
.exp-quiet-void .panel-reading {
  padding-top: clamp(70px, 11vh, 150px);
  padding-bottom: clamp(70px, 11vh, 150px);
}

.movement-interlude {
  position: relative;
  min-height: clamp(460px, 72vh, 760px);
  padding: clamp(70px, 10vw, 150px) 6vw;
  display: grid;
  grid-template-columns: minmax(70px, .18fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  background:
    linear-gradient(90deg, rgba(21, 20, 15, .12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(21, 20, 15, .06) 1px, transparent 1px),
    var(--paper-map);
  background-size: 54px 54px, 54px 54px, auto;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.mi-rail {
  height: 100%;
  min-height: 260px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mi-rail span {
  display: block;
  background: linear-gradient(180deg, var(--seal), var(--deep-blue), var(--signal-yellow));
}

.mi-panel {
  max-width: 820px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px clamp(20px, 4vw, 52px);
  align-items: center;
}

.mi-kicker {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--seal);
}

.mi-mark {
  grid-row: span 3;
  font-family: var(--cn-serif);
  font-size: clamp(92px, 17vw, 230px);
  line-height: .9;
  color: var(--seal);
}

.mi-panel h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 76px);
  line-height: .94;
  letter-spacing: 0;
}

.mi-line,
.mi-next,
.mi-hinge {
  margin: 0;
  max-width: 58ch;
}

.mi-line {
  font-family: var(--reader);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  color: var(--ink-soft);
}

.mi-next,
.mi-hinge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

.movement-interlude--hinge {
  background:
    linear-gradient(90deg, rgba(168, 51, 50, .14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(168, 51, 50, .08) 1px, transparent 1px),
    var(--paper-warm);
}

.movement-interlude--hinge .mi-mark {
  color: var(--seal-deep);
}

body.lang-th .dao-map,
body.lang-th .entry-hook,
body.lang-th .movement-interlude {
  font-family: var(--th);
}

body.lang-cn .dao-map,
body.lang-cn .entry-hook,
body.lang-cn .movement-interlude {
  font-family: var(--cn-serif);
}

@media (max-width: 900px) {

  .dao-map-head,
  .dao-map-grid {
    grid-template-columns: 1fr;
  }

  .dao-map-line,
  .dao-map-line:nth-child(3n),
  .dao-map-line:nth-last-child(-n+3) {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }

  .dao-map-line:last-child {
    border-bottom: none;
  }

  .chapter-strip .cs-route {
    display: none;
  }
}

@media (max-width: 600px) {
  .dao-map-host--cover {
    padding: 22px 4vw;
  }

  .dao-map-head h2 {
    font-size: 30px;
  }

  .dao-map-grid {
    border-left: none;
    border-right: none;
  }

  .dao-map-line {
    padding: 12px 8px;
  }

  .dao-map-line-head {
    grid-template-columns: auto auto 1fr;
  }

  .route-range {
    display: none;
  }

  .dao-map-stations {
    gap: 5px;
  }

  .station-han {
    display: none;
  }

  .chapter-strip .passport-stamp {
    min-width: 34px;
    min-height: 24px;
  }

  .movement-interlude {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 58px 5vw;
  }

  .mi-rail {
    height: 36px;
    min-height: 36px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }

  .mi-panel {
    grid-template-columns: 1fr;
  }

  .mi-mark {
    grid-row: auto;
    font-size: 88px;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .topbar,
  .deepwork-overlay,
  .index-overlay,
  .checkin-overlay,
  .search-overlay,
  .progress,
  .continue-toast {
    display: none !important;
  }

  .chapter-strip,
  .panel {
    page-break-inside: avoid;
  }

  .book {
    padding: 0 !important;
  }

  .chapter-shell {
    box-shadow: none !important;
    margin: 0 !important;
    border-bottom: 1px solid #ccc;
  }
}

/* ============================================================
   GLOBAL THAI TYPOGRAPHY POLISH
   ============================================================ */
body.lang-th p,
body.lang-th li,
body.lang-th .reading-body,
body.lang-th .note-body,
body.lang-th .postit-body p,
body.lang-th .sb-line,
body.lang-th .checkin-about p {
  line-height: 1.85 !important;
}

/* ============================================================
   VOICE BUTTON ACTIVE STATE
   ============================================================ */
.cs-voice-btn.is-playing {
  background: var(--seal) !important;
  color: var(--paper) !important;
  border-color: var(--seal) !important;
}

.cs-voice-btn.is-playing .cs-echo-han {
  color: var(--paper) !important;
}

/* ============================================================
   NOVEL TEASE — 兩層 · Two Layers
   ============================================================ */
.novel-tease {
  margin: 44px 0 64px;
  padding-top: 44px;
  border-top: 1px solid var(--rule-soft);
  max-width: 720px;
}

.novel-premise {
  font-family: var(--reader);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.novel-premise em {
  font-style: italic;
  color: var(--ink);
}

.novel-pull {
  border-left: 2px solid var(--seal);
  margin: 28px 0;
  padding: 2px 0 2px 20px;
}

.novel-pull p {
  font-family: var(--reader);
  font-size: clamp(16px, 1.45vw, 19px);
  font-style: italic;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 8px;
}

.novel-pull footer {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-fade);
}

.novel-coords {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.novel-coords li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--rule-soft);
}

.novel-coords li:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

.nc-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--seal);
  min-width: 22px;
  flex-shrink: 0;
}

.nc-text {
  font-family: var(--reader);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 600px) {
  .novel-tease {
    max-width: 100%;
  }

  .novel-pull {
    margin: 20px 0;
  }
}
/* ============================================================
   LESSON ILLUSTRATION CAPTIONS
   ============================================================ */
.illus-cap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
}

.illus-teaching {
  font-size: var(--size-tiny);
  letter-spacing: 0.05em;
  color: var(--ink-2);
  flex: 1;
}

.illus-ann {
  font-family: var(--cn-serif);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.1em;
}

/* ============================================================
   DR NON CARTOON FIGURE
   ============================================================ */
.drnon-figure {
  float: right;
  clear: right;
  width: 240px;
  margin: 0 0 20px 24px;
  border: 1px solid var(--rule);
}

.drnon-figure img {
  width: 100%;
  display: block;
}

.drnon-figcap {
  font-size: var(--text-micro);
  color: var(--ink-3);
  padding: 6px 10px;
  border-top: 1px solid var(--rule);
  text-align: right;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .drnon-figure {
    float: none;
    width: 100%;
    margin: 16px 0;
  }
}

/* ============================================================
   INLINE ARTIFACT CITATION — museum portrait / painting sidebar
   ============================================================ */
.artifact-cite {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--amber, var(--gold));
  background: var(--paper-soft);
  margin: 0 0 20px 20px;
  width: 220px;
}

.artifact-cite.has-img {
  width: 240px;
}

.artifact-cite .ac-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  margin: 0 0 10px;
  border: 1px solid var(--rule);
  background: var(--paper-soft);
}

.ac-subject {
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
}

.ac-caption {
  font-size: var(--size-tiny);
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 6px;
}

.ac-source {
  font-size: var(--size-tiny);
  color: var(--ink-3);
  font-style: italic;
  letter-spacing: 0.03em;
}

@media (max-width: 640px) {
  .artifact-cite,
  .artifact-cite.has-img {
    float: none;
    clear: both;
    width: 100%;
    max-width: none;
    margin: 16px 0;
    padding: 14px 16px;
  }

  .artifact-cite .ac-img {
    width: 100%;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .reading-frame > div > .reading-body {
    clear: both;
  }
}

/* ============================================================
   READING FLOW — MoMA grid (§XX). Artifacts interleave with the
   prose as composed interruptions: text at measure, wide plates
   run the full card width, and every plate binds to the paragraph
   above it (1 baseline) then releases what follows (3 baselines).
   Symmetric margins are what made the plates uninvited guests.
   ============================================================ */
.reading-flow .reading-body {
  max-width: var(--measure);
}

.reading-flow .rb-p {
  white-space: pre-line;
  margin: 0 0 var(--bl);
}

.reading-flow .rb-p:last-child {
  margin-bottom: 0;
}

.reading-flow > .artifact-cite,
.reading-flow > .artifact-cite.has-img {
  float: none;
  clear: none;
  width: 100%;
  margin: var(--img-above) 0 var(--img-below);
}

/* wide plate — image on top, contained (never cropped), full card
   width: wider than the measure is the deliberate interruption */
.reading-flow > .artifact-cite.plate--wide .ac-img {
  width: 100%;
  min-height: 0;
  max-height: 440px;
  object-fit: contain;
  background: transparent;
}

/* portrait plate — small image left, bio right; stays at the measure.
   Root font-size mirrors .reading-body so 60ch resolves to the SAME
   edge as the prose (children set explicit px sizes, unaffected). */
.reading-flow > .artifact-cite.plate--portrait {
  max-width: var(--measure);
  font-size: clamp(18px, 1.5vw, 21px);
}

.reading-flow > .artifact-cite.plate--portrait.has-img {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 18px;
  align-items: start;
}

.reading-flow > .artifact-cite.plate--portrait.has-img .ac-img {
  width: 116px;
  height: 140px;
  min-height: 0;
  margin: 0;
  object-fit: cover;
}

.reading-flow .ac-body {
  min-width: 0;
}

@media (max-width: 640px) {
  .reading-flow > .artifact-cite.plate--portrait.has-img {
    grid-template-columns: 92px 1fr;
    gap: 14px;
  }

  .reading-flow > .artifact-cite.plate--portrait.has-img .ac-img {
    width: 92px;
    height: 116px;
    aspect-ratio: auto;
  }
}

/* the think-first pause — the reader guesses before the Turn opens.
   Works without JS (native details). Target ≥44px. */
.reading-flow .pause {
  max-width: var(--measure);
  margin: var(--bl) 0;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  background: var(--paper-soft);
}

.reading-flow .pause > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--pu);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.reading-flow .pause > summary::-webkit-details-marker { display: none; }

.reading-flow .pause > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 14px;
}

.reading-flow .pause[open] > summary::after { content: "−"; }

.reading-flow .pause[open] > summary { border-bottom: 1px solid var(--rule); }

.reading-flow .pause .rb-p {
  padding: var(--pu);
  margin: 0;
}

/* evidence micro-label — {ev:...} in readings. Mono micro (grandfathered). */
.ev-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  white-space: nowrap;
}

/* ============================================================
   ARTIFACT CITE + READING PANEL — contrast + mobile pass
   Dark moods: opaque chips, light text ≥0.75 luminance.
   Light moods: paper-soft chips, dark ink hierarchy.
   ============================================================ */

/* Dark-background chapter moods — artifact cite museum sidebar */
.chapter.mood-cryptic .artifact-cite,
.chapter.mood-cosmic .artifact-cite,
.chapter.mood-sea .artifact-cite,
.chapter.mood-stone .artifact-cite,
.chapter.mood-ember .artifact-cite,
.chapter.mood-mirror .artifact-cite {
  background: rgba(14, 14, 14, .92);
  border-color: rgba(255, 255, 255, .14);
  border-left-color: #f59e0b;
}

.chapter.mood-cryptic .artifact-cite .ac-subject { color: #d4f5b5; }
.chapter.mood-cryptic .artifact-cite .ac-caption { color: rgba(207, 231, 173, .88); }
.chapter.mood-cryptic .artifact-cite .ac-source { color: rgba(207, 231, 173, .72); }

.chapter.mood-cosmic .artifact-cite .ac-subject { color: rgba(244, 235, 213, .95); }
.chapter.mood-cosmic .artifact-cite .ac-caption { color: rgba(244, 235, 213, .82); }
.chapter.mood-cosmic .artifact-cite .ac-source { color: rgba(244, 235, 213, .68); }

.chapter.mood-sea .artifact-cite .ac-subject { color: #e8f0f0; }
.chapter.mood-sea .artifact-cite .ac-caption { color: rgba(232, 240, 240, .85); }
.chapter.mood-sea .artifact-cite .ac-source { color: rgba(168, 213, 213, .75); }

.chapter.mood-stone .artifact-cite .ac-subject { color: #e8e8e8; }
.chapter.mood-stone .artifact-cite .ac-caption { color: rgba(224, 224, 224, .85); }
.chapter.mood-stone .artifact-cite .ac-source { color: rgba(200, 200, 200, .72); }

.chapter.mood-ember .artifact-cite .ac-subject { color: #f0e4dc; }
.chapter.mood-ember .artifact-cite .ac-caption { color: rgba(240, 228, 220, .85); }
.chapter.mood-ember .artifact-cite .ac-source { color: rgba(212, 160, 96, .78); }

.chapter.mood-mirror .artifact-cite .ac-subject { color: rgba(244, 235, 213, .95); }
.chapter.mood-mirror .artifact-cite .ac-caption { color: rgba(244, 235, 213, .82); }
.chapter.mood-mirror .artifact-cite .ac-source { color: rgba(244, 235, 213, .68); }

.chapter.mood-cryptic .artifact-cite .ac-img,
.chapter.mood-cosmic .artifact-cite .ac-img,
.chapter.mood-sea .artifact-cite .ac-img,
.chapter.mood-stone .artifact-cite .ac-img,
.chapter.mood-ember .artifact-cite .ac-img,
.chapter.mood-mirror .artifact-cite .ac-img {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .35);
}

/* Insight cards on dark moods — badge stays seal; body inherits mood reading colours */
.chapter.mood-cryptic .insight-card .insight-badge,
.chapter.mood-cosmic .insight-card .insight-badge,
.chapter.mood-sea .insight-card .insight-badge,
.chapter.mood-stone .insight-card .insight-badge,
.chapter.mood-ember .insight-card .insight-badge,
.chapter.mood-mirror .insight-card .insight-badge {
  color: var(--paper);
}

/* Mobile-first reading panel — 390px / 360px first impression */
@media (max-width: 480px) {
  .panel-reading {
    padding-left: 16px;
    padding-right: 16px;
  }

  .reading-frame {
    gap: 20px;
    padding: 0;
  }

  .reading-pull {
    padding: 20px 0 18px;
  }

  .artifact-cite,
  .artifact-cite.has-img,
  .artifact-cite.full_width {
    margin: 14px 0;
    padding: 12px 14px;
  }

  .artifact-cite .ac-img {
    aspect-ratio: 3 / 2;
    min-height: 140px;
  }

  .reading-figure {
    margin: 0 0 16px;
  }

  .insight-card {
    padding: 20px 16px;
    margin-top: 16px;
  }

  .reading-aside {
    padding: 12px 14px;
  }
}

/* ============================================================
   §11.10 CONTRAST FLOOR — legibility layer (appended last = wins)
   Theme fully determines panel background:
     light theme  = body:not(.yin-mode)  → cream panels  → dark text
     dark theme   = body.yin-mode         → near-black     → light text
   Targets the small label / pinyin / control classes whose mood
   accent colours failed WCAG AA (some as low as 1.0:1, invisible).
   ============================================================ */

/* Mood rules reach 4 classes (.chapter.mood-x .char-brush .char-py); this is
   an accessibility floor, so !important is the correct, robust guarantee. */

/* ---- LIGHT THEME (cream panels) → dark, legible ---- */
html body:not(.yin-mode) .chapter .pl-num,
html body:not(.yin-mode) .chapter .pl-cn,
html body:not(.yin-mode) .chapter .panel-label > span,
html body:not(.yin-mode) .chapter .panel-origin .origin-num-roman,
html body:not(.yin-mode) .chapter .cd-label,
html body:not(.yin-mode) .chapter .cd-label span,
html body:not(.yin-mode) .chapter .cn-listen-btn,
html body:not(.yin-mode) .chapter .cn-walk-btn,
html body:not(.yin-mode) .chapter .cn-listen-btn span,
html body:not(.yin-mode) .chapter .cn-walk-btn span,
html body:not(.yin-mode) .chapter .char-controls .char-btn,
html body:not(.yin-mode) .chapter .char-controls .char-btn span,
html body:not(.yin-mode) .chapter .passport-stamp .passport-text {
  color: #5f5239 !important; /* warm dark taupe — ≥6:1 on cream */
}

html body:not(.yin-mode) .chapter .char-py,
html body:not(.yin-mode) .chapter .su-cn-py,
html body:not(.yin-mode) .chapter .npm-title-py,
html body:not(.yin-mode) .chapter .cd-label em,
html body:not(.yin-mode) .chapter .panel-origin em,
html body:not(.yin-mode) .chapter .panel-label em,
html body:not(.yin-mode) .chapter .closer-kicker em,
html body:not(.yin-mode) .chapter .reflection-kicker em {
  color: #9a3b34 !important; /* dark seal — ≥5.5:1 on cream, on-brand accent */
  opacity: 1 !important; /* .cd-label em's base rule sets opacity:.85 — was diluting this fix */
}

/* ---- DARK THEME (yin, near-black panels) → light, legible ---- */
html body.yin-mode .chapter .pl-num,
html body.yin-mode .chapter .pl-cn,
html body.yin-mode .chapter .panel-label > span,
html body.yin-mode .chapter .panel-origin .origin-num-roman,
html body.yin-mode .chapter .cd-label,
html body.yin-mode .chapter .cd-label span,
html body.yin-mode .chapter .cn-listen-btn,
html body.yin-mode .chapter .cn-walk-btn,
html body.yin-mode .chapter .cn-listen-btn span,
html body.yin-mode .chapter .cn-walk-btn span,
html body.yin-mode .chapter .char-controls .char-btn,
html body.yin-mode .chapter .char-controls .char-btn span,
html body.yin-mode .chapter .passport-stamp .passport-text {
  color: #cfc7b2 !important; /* warm light grey — ≥10:1 on near-black */
}

html body.yin-mode .chapter .char-py,
html body.yin-mode .chapter .su-cn-py,
html body.yin-mode .chapter .npm-title-py,
html body.yin-mode .chapter .cd-label em,
html body.yin-mode .chapter .panel-origin em,
html body.yin-mode .chapter .panel-label em,
html body.yin-mode .chapter .closer-kicker em,
html body.yin-mode .chapter .reflection-kicker em {
  color: #ec9a8e !important; /* light salmon — ≥8:1 on near-black, on-brand accent */
  opacity: 1 !important; /* .cd-label em's base rule sets opacity:.85 — was diluting this fix */
}

/* Lesson-caption annotation + play-card title sit on a grey card surface
   (~rgb(97,99,101)) in yin mode — need brighter text to clear AA. */
html body.yin-mode .chapter .illus-ann,
html body.yin-mode .chapter .pc-title,
html body.yin-mode .chapter .pc-title span,
html body.yin-mode .chapter .reflection-practice,
html body.yin-mode .chapter .reflection-practice span {
  color: #ebece4 !important; /* ≥4.8:1 on the grey card */
}

/* ============================================================
   §11.10b SEAL-SURFACE + DARK-MOOD CAPTION EXCEPTIONS
   Appended after the contrast floor so active TTS highlights,
   insight badges, image scrims, and lesson captions keep the
   inverse palette (paper on seal / paper on near-black).
   ============================================================ */

/* §11.10 floor targets cream-panel controls — undo on seal-red active states */
html body:not(.yin-mode) .chapter .cn-listen-btn.is-playing,
html body:not(.yin-mode) .chapter .cn-listen-btn.is-playing span,
html body:not(.yin-mode) .chapter .cn-listen-btn.is-playing em,
html body:not(.yin-mode) .chapter .cn-walk-btn.is-walking,
html body:not(.yin-mode) .chapter .cn-walk-btn.is-walking span,
html body:not(.yin-mode) .chapter .cn-walk-btn.is-walking em,
html body.yin-mode .chapter .cn-listen-btn.is-playing,
html body.yin-mode .chapter .cn-listen-btn.is-playing span,
html body.yin-mode .chapter .cn-listen-btn.is-playing em,
html body.yin-mode .chapter .cn-walk-btn.is-walking,
html body.yin-mode .chapter .cn-walk-btn.is-walking span,
html body.yin-mode .chapter .cn-walk-btn.is-walking em,
html body.quiet-mode .chapter .cn-listen-btn.is-playing,
html body.quiet-mode .chapter .cn-listen-btn.is-playing span,
html body.quiet-mode .chapter .cn-listen-btn.is-playing em,
html body.quiet-mode .chapter .cn-walk-btn.is-walking,
html body.quiet-mode .chapter .cn-walk-btn.is-walking span,
html body.quiet-mode .chapter .cn-walk-btn.is-walking em {
  color: var(--paper) !important;
}

/* Per-character TTS highlight — seal block must carry paper glyphs */
html body.quiet-mode .chapter .cn-stack-char.is-speaking .cs-c,
html body.quiet-mode .chapter .cn-stack-char.is-speaking .cs-py,
html body:not(.yin-mode) .chapter .cn-stack-char.is-speaking .cs-c,
html body:not(.yin-mode) .chapter .cn-stack-char.is-speaking .cs-py,
html body.yin-mode .chapter .cn-stack-char.is-speaking .cs-c,
html body.yin-mode .chapter .cn-stack-char.is-speaking .cs-py {
  color: var(--paper) !important;
  opacity: 1 !important;
}

/* Insight badge — tri() spans inherit lang-cn ink override otherwise */
.chapter .insight-badge,
.chapter .insight-badge [data-lang],
body.lang-cn .insight-badge [data-lang="cn"],
body.lang-en .insight-badge [data-lang="en"],
body.lang-th .insight-badge [data-lang="th"] {
  color: var(--paper) !important;
}

/* Panel-image dark scrim — lock caption text for every language */
.chapter .panel-image:not(.is-sumie) .image-caption,
.chapter .panel-image:not(.is-sumie) .image-caption [data-lang],
body.lang-cn .chapter .panel-image:not(.is-sumie) .image-caption em [data-lang="cn"],
body.lang-en .chapter .panel-image:not(.is-sumie) .image-caption em [data-lang="en"],
body.lang-th .chapter .panel-image:not(.is-sumie) .image-caption em [data-lang="th"] {
  color: rgba(244, 235, 213, .78) !important;
}

.chapter .panel-image:not(.is-sumie) .image-caption em,
.chapter .panel-image:not(.is-sumie) .image-caption em [data-lang] {
  color: rgba(244, 235, 213, .95) !important;
}

/* Lesson illustration captions sit on dark mood chapter bg (not white img) */
.chapter.mood-wabi .illus-cap,
.chapter.mood-cosmic .illus-cap,
.chapter.mood-cryptic .illus-cap,
.chapter.mood-mirror .illus-cap,
.chapter.mood-physics .illus-cap,
.chapter.mood-sea .illus-cap,
.chapter.mood-stone .illus-cap,
.chapter.mood-flesh .illus-cap,
.chapter.mood-ink .illus-cap,
.chapter.mood-weather .illus-cap,
.chapter.mood-ember .illus-cap {
  border-top-color: rgba(255, 255, 255, .12);
}

.chapter.mood-wabi .illus-teaching,
.chapter.mood-cosmic .illus-teaching,
.chapter.mood-cryptic .illus-teaching,
.chapter.mood-mirror .illus-teaching,
.chapter.mood-physics .illus-teaching,
.chapter.mood-sea .illus-teaching,
.chapter.mood-stone .illus-teaching,
.chapter.mood-flesh .illus-teaching,
.chapter.mood-ink .illus-teaching,
.chapter.mood-weather .illus-teaching,
.chapter.mood-ember .illus-teaching {
  color: rgba(244, 235, 213, .82);
}

.chapter.mood-wabi .illus-ann,
.chapter.mood-cosmic .illus-ann,
.chapter.mood-cryptic .illus-ann,
.chapter.mood-mirror .illus-ann,
.chapter.mood-physics .illus-ann,
.chapter.mood-sea .illus-ann,
.chapter.mood-stone .illus-ann,
.chapter.mood-flesh .illus-ann,
.chapter.mood-ink .illus-ann,
.chapter.mood-weather .illus-ann,
.chapter.mood-ember .illus-ann {
  color: var(--gold);
}

/* Quiet-mode strips mood bg — captions return to cream-surface ink */
html body.quiet-mode .chapter .illus-teaching {
  color: var(--ink-soft) !important;
}

html body.quiet-mode .chapter .illus-ann {
  color: var(--gold) !important;
}

/* §11.10: .panel-video is a fixed dark cinema surface in BOTH themes.
   Its labels were set via theme-relative --gold, which flips dark in
   light mode (dark-on-dark ~2.1:1), and the quiet-mode label guards
   above force cream-paper ink colors onto parts of it. Pin the panel's
   label family to the dark-theme gold/accent values regardless of theme. */
html body .chapter .panel-video .panel-label .pl-num,
html body .chapter .panel-video .panel-label > span,
html body .chapter .panel-video .panel-label .pl-cn,
html body .chapter .panel-video .vc-credit,
html body .chapter .panel-video .vc-credit span {
  color: #d2a14e !important;
}
html body .chapter .panel-video .panel-label em {
  color: #ec9a8e !important;
}

/* Same surface, same clobber class as the insight-badge/image-caption
   lesson: body.lang-cn [data-lang="cn"] !important forces cream-paper
   ink onto the CN caption spans sitting on the dark cinema panel. */
html body .chapter .panel-video .vc-line,
html body .chapter .panel-video .vc-line [data-lang] {
  color: #f4ebd5 !important;
}

/* =============================================================
   GAMES OVERLAY 算 (devised by Dr Non)
   Sharp-edged, no shadows, single --seal accent. Matches notes/checkin.
   ============================================================= */

.games-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--paper);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.games-overlay.open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease;
}

.games-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .30);
  z-index: 219;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.games-overlay.open ~ .games-scrim {
  opacity: 1;
  pointer-events: auto;
}

.games-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.games-head {
  position: sticky;
  top: 0;
  background: rgba(244, 235, 213, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  padding: 22px 6vw 18px;
  z-index: 10;
}

.games-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  background: rgba(244, 235, 213, .96);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 11; /* sits above the sticky .games-head (z-index: 10) */
}
.games-close:hover { color: var(--seal); border-color: var(--seal); }

.games-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 6px;
}
.games-kicker em {
  font-family: var(--py);
  font-style: normal;
  color: var(--seal);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 4px;
}

.games-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 6px;
  max-width: 60ch;
}
.games-byline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

.games-stage {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 32px 6vw 64px;
}

/* ----- CHOICE VIEW ---------------------------------------- */
.games-choice {
  width: min(880px, 100%);
}
.games-choice-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.games-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
@media (min-width: 720px) {
  .games-cards { grid-template-columns: 1fr 1fr; }
}
.game-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--rule);
  padding: 18px 18px 20px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .2s, background .2s;
  position: relative;
}
.game-card:hover {
  border-color: var(--seal);
  background: rgba(168, 51, 50, .04);
}
.game-card:focus-visible {
  border-color: var(--seal);
  background: rgba(168, 51, 50, .04);
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}
.game-card-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.game-card-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
}
.game-card-byline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--seal);
}
.game-card-intro {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.game-card-cta {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink-mute);
}
.game-card:hover .game-card-cta { color: var(--seal); }
.games-foot {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute);
  font-style: italic;
  max-width: 60ch;
  margin: 0;
}

/* ----- QUESTION VIEW -------------------------------------- */
.game-round {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.game-progress {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.game-prompt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  padding: 28px 24px;
  background: transparent;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--seal);
}
.game-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.game-input-label {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.game-hint {
  color: var(--ink-silver);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  font-family: var(--serif);
  font-size: 13px;
}
.game-input {
  font-family: var(--serif);
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.2;
  background: transparent;
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink-soft);
  padding: 14px 16px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.game-input:focus {
  border-color: var(--seal);
  border-bottom-color: var(--seal);
}
.game-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.game-submit,
.game-next,
.game-newround,
.game-back {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 10px 18px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.game-submit:hover,
.game-next:hover,
.game-newround:hover,
.game-back:hover {
  background: var(--seal);
  border-color: var(--seal);
  color: var(--paper);
}
.game-back {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
}
.game-back:hover {
  background: transparent;
  color: var(--seal);
  border-color: var(--seal);
}
.game-feedback {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  min-height: 1.5em;
}
.game-verdict { font-weight: 600; }
.game-verdict.is-correct { color: var(--ink); }
.game-verdict.is-wrong   { color: var(--seal); }
.game-tail { color: var(--ink-mute); margin-left: 6px; }
.game-score {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

/* ----- RESULT VIEW ---------------------------------------- */
.game-result {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--seal);
  padding: 28px 24px 30px;
}
.game-result-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.game-result-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 0;
  font-family: var(--serif);
}
.game-result-num {
  font-size: clamp(56px, 9vw, 96px);
  font-weight: 600;
  line-height: 1;
  color: var(--seal);
}
.game-result-of {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.game-result-line {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 8px 0 0;
  max-width: 50ch;
}
.game-result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ----- TOPBAR BUTTON 算 ----------------------------------- */
.games-btn .gb-han {
  font-family: var(--serif-cn);
  color: var(--seal);
  font-size: 18px;
  line-height: 1;
}

/* YIN MODE — ensure games surfaces stay legible (paper bg, ink text). */
html body.yin-mode .games-overlay { background: var(--paper); color: var(--ink); }

/* ============================================================
   §11.8 — THE LANGUAGE DOOR MUST BE VISIBLE ON ARRIVAL
   This book is opened from a shared link, on a phone, often by a Thai
   reader who is grieving. The language control was reachable ONLY inside
   the unlabelled "⋯" menu, and its pills measured 19px tall (the tap
   floor is 44). app.js now picks her language on first visit; this makes
   the control itself visible so she can correct it — an English-locale
   phone is ordinary in Bangkok. The collapsed bar used 108px of 375px,
   so the room was already there.
   Appended last on purpose: earlier blocks set .lang-toggle{display:none}
   and hide non-active pills at equal specificity (lesson 2026-08-03 —
   a later duplicate rule silently defeats the fix).
   ============================================================ */
@media (max-width: 768px) {
  .topbar:not(.is-mobile-open) .lang-toggle {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    align-items: stretch;
    gap: 0;
    padding: 0;
    height: 52px;
    border-left: 1px solid var(--rule);
    overflow: visible;
  }

  /* Every language visible at once — a cycling single pill hides the
     choice behind a guess (Norman: affordance needs a signifier). */
  .topbar:not(.is-mobile-open) .lang-toggle .lang-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    font-size: 11px;
    letter-spacing: .04em;
  }

  /* Same 44px floor inside the opened ⋯ menu, where they were 19px. */
  .topbar.is-mobile-open .lang-toggle .lang-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* §11.8 tap floor — the three phone top-bar controls sat at 36px wide.
   With the language door now beside them the bar uses 265px of 375px,
   so the missing 8px each was never a space problem. */
@media (max-width: 768px) {
  .topbar:not(.is-mobile-open) .tool-btn { min-width: 44px; }
}