/* ==== PORTED VERBATIM from wonderleaf-app/tools/explainer/static/reader.css (book mode, frozen baseline). Selector rewrites only: body.* -> #reader.* ; :root -> #reader.mode-book. ==== */
/* Into production from mockups/book-alive-2026-09-22/v9/field/app/bookview.css (#629 Phase 2,
2026-09-26). Two changes, marked `#629` where they are:
1. THE TYPE. The prototype linked `static/fonts/fonts-core.css` out of the wonderleaf-app tree
for Lora / Inter / Caveat. The field ships NO webfonts at all — app/style.css sets --serif
and --sans to system stacks with the language-aware --cjk chain appended — so mirroring
hundreds of woff2 files into this bundle to serve one view is not this issue's call. The
named faces stay FIRST in every chain (a host that does serve them still gets them), and
what follows is now the field's own stack instead of Noto names nothing here can load. The
book therefore reads in the same faces as the scroll view, and a CJK book is never tofu.
2. THE FINIS MARK is a background-image here rather than an ![]()
in bookview.js, so
release/build_rc.py's graph walker can see the file and copy it into the RC.
Nothing else is touched: no rule is retimed, recoloured or removed. */
#reader.mode-book {
/* Body + UI: chains fall through CJK fallbacks per glyph so the same
stylesheet works for Latin, Korean, Japanese, and Simplified Chinese. */
/* #629: the named faces first, then app/style.css's own stacks (var(--cjk) is retargeted per
there, which is how the field keeps Japanese kanji off Korean faces). */
--serif: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Liberation Serif', 'DejaVu Serif', Times, var(--cjk), serif;
--sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', 'Liberation Sans', Arial, var(--cjk), sans-serif;
--text-primary: #1a1a1a;
--text-secondary: #6b6b6b;
--text-tertiary: #9a9a9a;
--bg: #fafaf7;
--border: #ececec;
}
/* ── Reader 2026 (#501) design tokens ──────────────────────────────────────
ADDITIVE ONLY. Every token is `--r26-*` because the names above and the
`.flipbook`-scoped palette below are load-bearing elsewhere:
· `--bg`/`--text-primary` are used by `_reader_critical.css`, which is
BAKED into all ~2,340 published book s — rebinding them desyncs
every baked head with no re-render escape.
· `--serif`/`--sans` carry the per-glyph CJK fallback chains. Rebinding
either strips the chain and renders tofu on the 905 language variants.
So: never repoint an existing token; only add. The look comes from weight,
size and tracking over the faces the reader already loads AND gates
(Lora / Inter / Caveat) — no new font family is introduced, which also
keeps test_fonts_selfhosted_contract green. */
#reader.mode-book {
/* paper world */
--r26-surface: #fffdf3; /* page surface */
--r26-paper: #fbf6e9; /* app/desk cream */
--r26-paper-deep: #f4eedb; /* desk, card grounds */
--r26-ink: #1a1d24;
--r26-body: #4c4336; /* body copy brown */
--r26-muted: #6a6d74;
--r26-wood: #5a3825; /* kickers, folios, rules */
--r26-wood-light: #7a5238;
--r26-leaf: #2f4a26;
--r26-leaf-dark: #24391d;
--r26-gold-soft: #edc87c;
--r26-terra: #a62d14; /* fx-shout */
--r26-hairline: rgba(90,56,37,0.22);
--r26-page-edge: #e2d5ae;
/* cloth cover world — foil text over the existing cloth and gold tokens */
--r26-foil-text: #f2e3c2;
--r26-foil-dim: rgba(242,227,194,0.75);
/* type roles — gated faces only (Cormorant Garamond is CUT: it lives in
fonts-chat.css, not fonts-core.css, so naming it renders a system
fallback AND turns the self-hosted font contract red). */
--r26-display: var(--serif); /* headings, finis, folios */
--r26-prose: var(--serif); /* book prose */
--r26-ui: var(--sans); /* buttons, kickers, meta */
--r26-hand: 'Caveat', var(--serif); /* cover title, fx voices */
/* per-scene aura tints — 7 themes (schema.py COLOR_THEMES) + fallback.
A NEW property name on purpose: each book bakes an inline