/* book/style.css Shared stylesheet for the website, and (per the Stage 9 spec) kept plain enough that a later EPUB leg can reuse it too. The base typography rules below are deliberately written without CSS custom properties, since some EPUB readers only give partial support to CSS variables; only the site's theme colors use variables, and those live in their own block so the EPUB leg can drop that block without touching anything else. */ /* ---- Base typography, safe for EPUB reuse ---- */ body { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif; line-height: 1.6; hyphens: manual; margin: 0; } article, .front-matter, .parts, .back-matter, .language-choice { max-width: 34em; margin: 0 auto; padding: 0 1em; } h1 { line-height: 1.25; /* Owner's call: regular weight throughout the headings, not the browser's bold-by-default h1. .chapter-heading (a more specific selector) already sets font-weight: normal on the chapter's own numeral/title, so this covers the title page, part openers, the prologue, the epilogue, matter sections and the glossary the same way. */ font-weight: normal; } img { max-width: 100%; height: auto; } figure { margin: 1.5em 0; } figcaption { font-size: 0.9em; font-style: normal; /* the caption itself is not italic; emphasis inside it, if any, still renders as */ margin-top: 0.4em; } /* ---- Site chrome: theme colors (variables; not needed for EPUB) ---- */ :root { --bg: #ffffff; --fg: #1a1a1a; --link: #6b2d16; --topbar-bg: #f4f0e8; } @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --fg: #e8e2d5; --link: #e0a97a; --topbar-bg: #262421; } } html.theme-light { --bg: #ffffff; --fg: #1a1a1a; --link: #6b2d16; --topbar-bg: #f4f0e8; } html.theme-dark { --bg: #1a1a1a; --fg: #e8e2d5; --link: #e0a97a; --topbar-bg: #262421; } html, body { background: var(--bg); color: var(--fg); } a { color: var(--link); } /* Font-size steps, applied as a class on by reader.js. Five steps around a 1em baseline, kept modest so line length stays reasonable. */ html.fs-1 { font-size: 87.5%; } html.fs-2 { font-size: 100%; } html.fs-3 { font-size: 112.5%; } html.fs-4 { font-size: 125%; } html.fs-5 { font-size: 137.5%; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--topbar-bg); color: var(--fg); padding: 0.5em 1em; z-index: 10; } .skip-link:focus { left: 0.5em; top: 0.5em; } .topbar { display: flex; justify-content: space-between; gap: 1em; padding: 0.5em 1em; background: var(--topbar-bg); flex-wrap: wrap; } .topbar-group { display: flex; gap: 0.25em; } .font-btn, .theme-btn { font: inherit; background: var(--bg); color: var(--fg); border: 1px solid var(--fg); border-radius: 3px; padding: 0.2em 0.6em; cursor: pointer; } .theme-btn[aria-pressed="true"] { font-weight: bold; } header nav, .unit-nav { max-width: 34em; margin: 0 auto; padding: 0.5em 1em; display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; } .unit-nav { border-top: 1px solid var(--topbar-bg); margin-top: 2em; } /* The top copy of previous/next (item 7 of the rework spec: readers landing mid-chapter should not have to scroll to the bottom just to move on) sits directly under the header's own nav, so a border/margin meant to separate it from the body text above would be backwards here. */ .unit-nav-top { border-top: none; border-bottom: 1px solid var(--topbar-bg); margin-top: 0; } /* Continuous reading (book/reader.js): each appended unit is visually separated from the one above it with a thin top border in the topbar colour and generous space, echoing the .unit-nav divider so the seam between two units reads as a natural break in the book rather than a layout glitch. The heading and body inside keep their own class-based styles (chapter-heading, chapter-body, etc.), so nothing extra is needed here for those; the drop cap selector below still fires because it targets .chapter-body > p:first-of-type regardless of where in the document that element sits. */ .continued-unit { border-top: 1px solid var(--topbar-bg); margin-top: 3em; } /* A small spacer, not a visible rule of its own (the border above already draws the line): kept as its own element because it is what book/reader.js's fetch-and-append step actually inserts first, ahead of the fetched article, rather than folding "divider" and "space" into one invisible concept. */ .continued-divider { padding-top: 1em; } /* The IntersectionObserver trigger for continuous reading (book/reader.js) carries no content and is not meant to be seen or read by assistive tech; it exists purely as a scroll-position marker just above the bottom prev/next links. */ .continuous-sentinel { height: 1px; } footer { max-width: 34em; margin: 2em auto 0; padding: 1em; font-size: 0.85em; color: var(--fg); opacity: 0.8; } /* Visible keyboard focus everywhere: never remove the outline without replacing it, since that breaks keyboard navigation for readers who rely on it. */ a:focus, button:focus { outline: 3px solid var(--link); outline-offset: 2px; } .cover-main { max-width: 24em; margin: 2em auto; padding: 0 1em; text-align: center; } .language-choice { list-style: none; padding: 0; text-align: left; } .parts > li { margin-bottom: 1em; } @media (max-width: 40em) { article, .front-matter, .parts, .back-matter, .language-choice, header nav, .unit-nav, footer { max-width: none; } } /* ---- Ornaments: chapter heading (Option B), part-opener frieze (also reused, unchanged, by the epilogue opener page, which now carries a full-width frieze the same way a part does), matter ornament (prologue only -- the epilogue no longer carries the small centered matter ornament), title-page emblem. See book/build.py's render_page_heading_block/chapter_heading_html for the markup this CSS targets, and book/trace_ornaments.py for where the SVGs come from. ---- */ /* Visually hidden but still present in the DOM and in the accessibility tree: the standard clip-based pattern, never display:none, since a screen reader (and the PDF leg's bookmark-label default, which reads an element's own rendered text content) both need this text to still exist, just not be seen on screen. */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .chapter-heading { text-align: center; font-weight: normal; } .chapter-heading .chapter-number { display: block; font-size: 3.2em; line-height: 1; font-weight: normal; } .chapter-heading .ornament-chapter { display: block; margin: 0.3em auto; /* Owner ruling, 2026-09-11 ("smaller is better"): half the first build's 5em. At the site's default step that is about 85 px tall on a phone, a glyph between numeral and title rather than a picture. The print leg keeps its own 22 mm (book/print.css), where the page is taller and the figure carries more weight. */ height: 2.5em; width: auto; color: inherit; /* the traced SVG fills with currentColor, so it follows theme */ } .chapter-heading .chapter-title { display: block; font-variant: small-caps; letter-spacing: 0.14em; font-size: 1.2em; font-weight: normal; } .part-frieze, .ornament-matter-wrap, .ornament-title-wrap { text-align: center; } .part-frieze .ornament-frieze { display: inline-block; max-width: 100%; max-height: 9em; width: auto; height: auto; color: inherit; } .ornament-matter-wrap .ornament-matter { display: inline-block; height: 2.5em; /* same halving as the chapter ornament, same ruling */ width: auto; color: inherit; } .ornament-title-wrap .ornament-title { display: inline-block; max-height: 12em; width: auto; color: inherit; } /* Drop cap: chapters only, on the first PARAGRAPH only (never a
: ">p:first-of-type" is scoped to the first child of type

specifically, so a figure that insert_figures might place before it in the DOM does not change which element this rule targets -- see book/build.py's article_class comment for why chapter pages alone get the "chapter-body" class this selector depends on). */ .chapter-body > p:first-of-type::first-letter { float: left; font-size: 3.1em; line-height: 0.85; padding-right: 0.08em; }