/* ABOUTME: Component styles for the Production Inference Economics book.
   ABOUTME: Loads after book-tokens.css. Component vocabulary per spec §6. */

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16.5px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Links ─────────────────────────────────────── */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--ink-soft);
  text-underline-offset: 0.18em;
  transition: color 0.15s, text-decoration-color 0.15s;
}
a:hover {
  color: var(--brown);
  text-decoration-color: var(--brown);
}

/* ── Typography ────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--text);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  font-weight: 700;
}

.book-h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h1);
  letter-spacing: -0.005em;
  margin-bottom: var(--space-2);
}

.book-h1-display {
  /* used on landing page only — see spec §7.2 display face usage rule */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

h2 { font-size: var(--fs-h2); margin-top: var(--space-6); margin-bottom: var(--space-3); color: var(--ink); }
h3 { font-size: var(--fs-h3); margin-top: var(--space-5); margin-bottom: var(--space-2); color: var(--ink); }
h4 { font-size: var(--fs-h4); margin-top: var(--space-4); margin-bottom: var(--space-2); color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); }

/* Paragraphs use 100% width of their container — the .part-container sets the
   actual reading measure (65ch) at the section level, which is more reliable
   than constraining every p individually (which broke wide elements). */
p { margin-bottom: var(--space-4); }
strong { font-weight: 600; }

/* Opsz axis for Newsreader */
.book-prose p { font-variation-settings: "opsz" 16; }
.book-sidenote { font-variation-settings: "opsz" 10; }
.book-deck { font-variation-settings: "opsz" 24; font-style: italic; font-size: var(--fs-h1-deck); color: var(--text-deck); max-width: 50ch; margin-bottom: var(--space-5); }

/* ── Broadsheet top rule ──────────────────────── */
.book-top-rule {
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: var(--space-2) 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: var(--space-5);
}

/* ── Prose grid: main column + sidenote column ── */
.book-prose-grid {
  display: grid;
  grid-template-columns: 1fr var(--sidenote-col);
  gap: var(--gutter);
  align-items: start;
}

.book-prose { font-family: var(--font-body); }
.book-prose p { font-size: var(--fs-body); margin-bottom: var(--space-4); max-width: var(--measure); }

/* ── Drop cap ─────────────────────────────────── */
.book-prose p.has-dropcap::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  float: left;
  font-size: 3.6rem;
  line-height: 0.85;
  padding-right: 0.08em;
  padding-top: 0.05em;
  color: var(--ink);
}

/* permissive drop-cap: works on top-level <p class="has-dropcap"> in current content */
p.has-dropcap::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  float: left;
  font-size: 3.6rem;
  line-height: 0.85;
  padding-right: 0.08em;
  padding-top: 0.05em;
  color: var(--ink);
}

/* ── Sidenotes ────────────────────────────────── */
.book-sidenote-col { padding-top: var(--space-1); }
.book-sidenote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sidenote);
  color: var(--brown);
  line-height: 1.55;
  padding-left: var(--space-3);
  border-left: 2px solid var(--brown-soft);
  margin-bottom: var(--space-4);
}
.book-sidenote code {
  font-family: var(--font-mono);
  background: var(--brown-tint);
  color: var(--brown);
  padding: 0 0.18em;
  border-radius: 2px;
  font-style: normal;
}
.book-sup, sup.book-sup {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-meta);
  vertical-align: super;
  font-weight: 700;
  color: var(--brown);
  text-decoration: none;
}

/* ── "Where this breaks" callout (oxblood) ────── */
.book-break {
  background: var(--brown-tint);
  border-left: 3px solid var(--brown);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  font-style: italic;
}
.book-break-label {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brown);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
/* Bullets inside the callout need space from the left edge */
.book-break ul, .book-break ol {
  padding-left: var(--space-5);
  margin-top: var(--space-2);
}
.book-break li { margin-bottom: var(--space-2); }
.book-break li:last-child { margin-bottom: 0; }
/* Same for decision-rule callout */
.book-decision-rule ul, .book-decision-rule ol {
  padding-left: var(--space-5);
  margin-top: var(--space-2);
}
.book-decision-rule li { margin-bottom: var(--space-2); }
.book-decision-rule li:last-child { margin-bottom: 0; }

/* ── Decision rule callout (moss) ─────────────── */
.book-decision-rule {
  background: rgba(58, 79, 42, 0.06);
  border-left: 3px solid var(--ink);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}
.book-decision-rule-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

/* ── Mad-libs panel ───────────────────────────── */
.book-madlibs {
  background: var(--paper-tint);
  border-left: 3px solid var(--ink);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* ── Variable chips ───────────────────────────── */
.var-chip {
  font-family: var(--font-mono);
  font-style: normal;
  background: var(--paper);
  color: var(--ink);
  padding: 1px 5px;
  border: 1px solid var(--ink-soft);
  border-radius: 2px;
  font-size: var(--fs-mono-data);
  font-weight: 600;
}
.var-active {
  font-family: var(--font-mono);
  font-style: normal;
  background: var(--ink);
  color: var(--paper);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: var(--fs-mono-data);
  font-weight: 500;
}

/* ── Data row ─────────────────────────────────── */
.book-data-row {
  border-top: 1px solid var(--ink);
  padding: var(--space-2) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  display: grid;
  grid-template-columns: 1fr auto;
}
.book-data-row:last-of-type { border-bottom: 1px solid var(--ink); }
.book-data-strong { font-weight: 700; color: var(--ink); }

.book-verdict-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}

/* ── Ornament ─────────────────────────────────── */
.book-ornament {
  text-align: center;
  color: var(--ink);
  letter-spacing: 0.7em;
  margin: var(--space-5) 0;
  font-size: var(--fs-mono-data);
  opacity: 0.7;
}

/* ── Evidence block ───────────────────────────── */
.book-evidence {
  margin-top: var(--space-5);
  padding-left: var(--space-3);
  border-left: 2px solid var(--brown-soft);
}
.book-evidence-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brown);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.book-evidence-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-meta);
  color: var(--brown);
  line-height: 1.7;
}

/* ── Tabular numerics (apply globally to numeric contexts) ── */
.var-chip, .var-active, .book-data-row, .book-data-strong, .book-evidence-tag,
.book-plot text, .book-mono-data {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ── Code blocks (preserve from existing) ──────── */
code {
  font-family: var(--font-mono);
  font-size: 0.87em;
  background: var(--paper-tint);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
pre {
  background: var(--paper-tint);
  border: 1px solid var(--ink-soft);
  border-radius: 8px;
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  margin-bottom: var(--space-5);
  line-height: 1.55;
}
pre code { background: none; padding: 0; font-size: 0.85rem; }

/* ── Blockquote ────────────────────────────────── */
blockquote {
  border-left: 3px solid var(--ink);
  background: rgba(58, 79, 42, 0.04);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  font-style: italic;
  color: var(--text-deck);
}

/* ── Tables (data; not the book-data-row component) ─ */
/* Wrap tables so they scroll horizontally on mobile instead of pushing the
   whole page wider than the viewport. */
.content table, .book-prose table, table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: 0.92rem;
  -webkit-overflow-scrolling: touch;
}
th, td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--ink-soft); white-space: normal; }
th { font-family: var(--font-mono); font-size: var(--fs-mono-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); background: var(--paper-tint); }
tbody tr:hover { background: rgba(58, 79, 42, 0.03); }

/* ── HR as section ornament (keep existing convention) ── */
hr { border: none; height: 1px; background: var(--ink-soft); max-width: 40%; margin: var(--space-6) auto; }

/* ── Part navigation (prev/next) ──────────────── */
.book-part-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-soft);
}
.book-part-nav a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
}
.book-part-nav a:hover { border-color: var(--ink); background: rgba(58, 79, 42, 0.04); }

/* ── Sidebar (existing TOC) ────────────────────── */
.book-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  padding: var(--space-6) var(--space-4);
  background: var(--paper-tint);
  border-right: 1px solid var(--ink-soft);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
}
.book-sidebar a { display: block; padding: var(--space-1) 0; color: var(--text-deck); text-decoration: none; }
.book-sidebar a.active { color: var(--ink); font-weight: 700; }

/* ── Reading progress bar (existing) ──────────── */
.book-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--ink);
  z-index: 100;
  transition: width 50ms linear;
}

/* ── Article shell (offset for sidebar) ───────── */
.book-part {
  max-width: calc(var(--measure) + var(--sidenote-col) + var(--gutter) + var(--space-8));
  margin-left: calc(280px + var(--space-8));
  margin-right: var(--space-6);
  padding-top: var(--space-5);
  padding-bottom: var(--space-10);
}

/* ── Colophon ─────────────────────────────────── */
.book-colophon {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  color: var(--text-deck);
  line-height: 1.7;
}
.book-colophon dt { color: var(--ink); font-weight: 700; }
.book-colophon dd { margin-left: 0; margin-bottom: var(--space-2); }

/* ── Legacy DOM compatibility ─────────────────────────────────────────
   The migrated book pages still emit the original Pandoc-generated DOM
   (#sidebar, .page-layout, .part-container, .part-nav, etc.) rather
   than the spec's planned new component classes (.book-sidebar,
   .book-prose-grid, .book-part-nav). These selectors map the legacy
   structure to the new palette and typography. To be removed in P4
   polish when content is rewritten to the new vocabulary.
   ───────────────────────────────────────────────────────────────────── */

/* Page layout: 2-column grid (sidebar + article) at desktop */
.page-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  background: var(--paper);
}
/* CSS Grid items default to min-width:auto which means they refuse to shrink
   below their content's min-size. Long URLs, code spans, and pre blocks then
   push the article column wider than the viewport. min-width:0 lets them
   shrink. Same for the sidebar (so sticky-area can scroll internally). */
.page-layout > * { min-width: 0; }
/* Belt-and-suspenders against any rogue element forcing horizontal scroll
   on mobile. Use `clip` (not `hidden`) — `overflow: hidden` on body/html
   creates a scrolling context that breaks `position: sticky` on descendant
   elements (the desktop sidebar). `overflow-x: clip` clips overflow without
   creating that context, so sticky keeps working.
   Supported in Chrome 90+, Firefox 81+, Safari 16+. */
html, body { overflow-x: clip; }

/* Legacy sidebar — desktop: STICKY in the grid column (scrolls with viewport).
   Mobile: fixed slide-in (see @media at the bottom). */
#sidebar {
  width: 280px;
  padding: var(--space-6) var(--space-4);
  background: var(--paper-tint);
  border-right: 1px solid var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-header {
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}
.sidebar-header h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--text);
  margin: 0;
}
.back-link {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-deck);
  text-decoration: none;
  margin-bottom: var(--space-2);
}
.back-link:hover { color: var(--ink); }
.part-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.part-label a {
  color: var(--ink);
  text-decoration: none;
}
.part-label a:hover { color: var(--brown); }
.chapters-info,
.chapters-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-meta);
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-1);
}
.sidebar-toc {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.sidebar-toc li { margin-bottom: var(--space-1); }
.sidebar-toc a {
  display: block;
  padding: var(--space-1) 0;
  color: var(--text-deck);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
}
.sidebar-toc a:hover { color: var(--ink); }
.sidebar-toc a.active {
  color: var(--ink);
  font-weight: 700;
}
/* sidebar-nav (prev/next part) — visually distinct from .sidebar-toc chapter list:
   reduced opacity, smaller font, indented in a box-ish way so the arrows read
   as separate navigation rather than just two more chapter items. */
.sidebar-nav {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
  margin-top: var(--space-5);
}
.sidebar-nav a {
  display: block;
  padding: var(--space-2) var(--space-2);
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--brown);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.sidebar-nav a:hover {
  color: var(--ink);
  border-left-color: var(--ink);
  background: rgba(58, 79, 42, 0.04);
}

/* Progress bar + mobile menu toggle + overlay */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--ink);
  z-index: 100;
  transition: width 50ms linear;
}
#menu-toggle {
  display: none; /* hidden at desktop; shown in @media */
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  color: var(--ink);
  cursor: pointer;
  z-index: 95;
}
#sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(26, 26, 26, 0.35);
  z-index: 85;
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* Support both .is-open (spec) and .open (legacy page script toggles 'open' — see
   the inline <script> blocks in content/extra/book/*/index.html). Keep both
   selectors so the toggle works regardless of which name JavaScript uses. */
#sidebar-overlay.is-open,
#sidebar-overlay.open {
  display: block;
  opacity: 1;
}

/* Article container — when inside .page-layout, override the standalone .book-part offset */
.page-layout .book-part {
  margin: 0;
  max-width: none;
  padding-top: var(--space-5);
  padding-bottom: var(--space-10);
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.main-content {
  width: 100%;
  max-width: none;
}
.part-container {
  /* Use up to 88ch (~970px at 17px body) but always 100% of available space
     on smaller viewports. The `width:100%` is critical for mobile — without
     it, `max-width` alone won't shrink below 88ch when long words/tables
     exist. */
  width: 100%;
  max-width: 88ch;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
}
/* Defensive: anything inside the article that's intrinsically wide
   (images, embeds, code blocks) must cap at 100% of container. */
.part-container img,
.part-container video,
.part-container iframe,
.part-container svg { max-width: 100%; height: auto; }
.part-container pre,
.part-container code { max-width: 100%; overflow-wrap: break-word; }
.part-container pre { overflow-x: auto; }
/* Break long unbroken words/URLs so they don't push the column wider */
.part-container p,
.part-container li,
.part-container h1,
.part-container h2,
.part-container h3,
.part-container h4 { overflow-wrap: break-word; }
.part-header {
  border-bottom: 1px solid var(--ink);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
}
.part-header h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h1);
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.part-header .label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.part-header .label a {
  color: var(--ink);
  text-decoration: none;
}
.part-header .label a:hover { color: var(--brown); }

/* Legacy part-nav (prev/next at bottom of part) */
.part-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-soft);
}
.part-nav .nav-prev,
.part-nav .nav-next {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
}
.part-nav .nav-prev:hover,
.part-nav .nav-next:hover {
  border-color: var(--ink);
  background: rgba(58, 79, 42, 0.04);
}
.part-nav .nav-next { text-align: right; }
.part-nav .nav-dir {
  color: var(--text-mute);
  margin: 0 var(--space-2);
}
.part-nav .nav-title { color: var(--ink); }

/* ── Responsive: 3 breakpoints (spec §4 decision 18) ── */

/* ≤ 960px — sidebar slides off-screen */
@media (max-width: 960px) {
  .book-sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 90;
  }
  .book-sidebar.is-open { transform: translateX(0); }
  .book-part {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }

  /* Legacy DOM mobile rules */
  .page-layout { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 90;
  }
  /* Both selectors — script toggles 'open', spec uses 'is-open'. */
  #sidebar.is-open,
  #sidebar.open { transform: translateX(0); }
  #menu-toggle { display: block; }
  /* On mobile, sticky sidebar reverts to fixed slide-in (height already 100vh, top:0).
     Override the desktop sticky/align-self so nothing fights the fixed positioning. */
  #sidebar { position: fixed; align-self: auto; }
  .page-layout .book-part {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .part-container {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

/* ≤ 700px — sidenotes collapse to inline footnotes */
@media (max-width: 700px) {
  .book-prose-grid {
    display: block;
  }
  .book-sidenote-col {
    margin-top: var(--space-3);
  }
  .book-sidenote {
    display: block;
    margin: var(--space-3) 0;
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--brown-soft);
    background: var(--brown-tint);
  }
}

/* ≤ 600px — type scale steps down 6%; chapter top-rules stack vertically */
@media (max-width: 600px) {
  html { font-size: 15.5px; }
  .book-h1 { font-size: 2.0rem; }
  .book-top-rule {
    flex-direction: column;
    gap: var(--space-1);
    text-align: center;
  }
  .book-part-nav { grid-template-columns: 1fr; }
}

/* ── Print stylesheet (preserve from existing) ── */
@media print {
  .book-sidebar, .book-progress, .book-part-nav,
  #sidebar, #progress-bar, #menu-toggle, #sidebar-overlay, .part-nav { display: none; }
  .book-part, .page-layout .book-part { margin: 0; max-width: none; padding: 0; }
  .page-layout { display: block; }
  .book-prose-grid { display: block; }
  .book-sidenote {
    display: block;
    margin: 0.5em 0;
    border-left: none;
    color: var(--text);
    font-size: 0.9em;
  }
  .book-ornament { color: var(--text); }
  body { font-size: 11pt; line-height: 1.45; }
}