/* =========================================================================
   Roots4Family – Familienbuch (DIN A4, Letter vorbereitet)
   Zwei Schichten: Werkstatt (Studio) und gesetzte Seiten (.book-page).
   ========================================================================= */

/* Figtree + IBM Plex Mono (Google Fonts), lokal – kein Aufruf an fonts.googleapis.com */
/* Static instances embed as TrueType text in Chromium PDFs, avoiding Type 3 glyphs. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/figtree-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/figtree-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/figtree-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/figtree-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/figtree-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/figtree-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/figtree-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/figtree-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url("../vendor/fonts/figtree-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url("../vendor/fonts/figtree-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/ibmplexmono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/ibmplexmono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/ibmplexmono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/ibmplexmono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.book, .book-page {
  --book-font: "Figtree", Helvetica, Arial, sans-serif;
  --book-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --paper: #F2EDE6;
  --paper-2: #F7F3ED;
  --ink: #24201C;
  --ink-2: #5D564D;
  --ink-3: #8B8377;
  --ink-4: #3A342E;
  --soft: #6B6459;
  --rule: #D8CEBE;
  --rule-soft: #DFD6C7;
  --track: #E3DACA;
  --gold: #C3943C;
  --terracotta: #9A3B1E;
  --male: #3E5E77;
  --female: #914863;
  --brown: #4B352A;
  --banner: #F4E7DC;
  --cover: #241613;
  --cover-ink: #f3eee4;
  font-family: var(--book-font);
  color: var(--ink);
}

/* ------------------------------------------------------------------------ */
/* Studio                                                                    */
/* ------------------------------------------------------------------------ */

body[data-view="book"] .view { padding: 0; overflow: hidden; }
.book-studio {
  display: grid;
  grid-template-columns: clamp(380px, 32vw, 600px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.book-desk {
  min-width: 0;
  overflow: auto;
  padding: 22px 20px 48px;
  border-right: 1px solid var(--panel-border);
  background: var(--bg);
}
.book-desk h1 { font-size: 28px; letter-spacing: -0.03em; margin: 0 0 6px; }
.book-desk .lead { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.book-field { margin: 0 0 12px; }
.book-field label { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); font-family: var(--mono); margin-bottom: 5px; }
.book-field input[type="text"] { width: 100%; }
.book-chapters { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 16px; }
.book-ch {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--panel-border); cursor: pointer;
  background: var(--panel);
}
.book-ch:hover { border-color: var(--line-strong); }
.book-ch.on { border-color: var(--accent); background: var(--accent-soft); }
.book-ch strong { display: block; font-size: 13.5px; }
.book-ch span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.book-ch small { color: var(--ink3); font-family: var(--mono); font-size: 10px; padding-top: 3px; }
.book-options { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 16px; }
.book-options .eyebrow { margin-bottom: 4px; }
.book-option {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--panel-border); background: var(--panel); cursor: pointer;
}
.book-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.book-option:has(input:disabled) { opacity: 0.55; cursor: default; }
.book-option input { margin-top: 2px; accent-color: var(--accent); }
.book-option strong { display: block; font-size: 13.5px; }
.book-option span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.45; }
.book-bio-selection { margin-bottom: 4px; }
.book-bio-selection .book-selection-hint { margin: 0 0 10px; }
.book-bio-count { margin: 0 0 6px; padding: 10px; background: var(--accent-soft); color: var(--text); font-size: 13px; font-weight: 700; }
.book-bio-details { padding: 4px 0 6px; }
.book-bio-details summary { cursor: pointer; font-size: 13px; font-weight: 650; }
.book-bio-selection .book-selection-bulk { margin: 10px 0; }
.book-bio-selection .btn.small { font-size: 11px; padding: 7px 9px; white-space: normal; }
.book-bio-selection input[type="search"] { width: 100%; min-width: 0; margin-bottom: 6px; }
.book-bio-selection input[type="checkbox"] { flex: none; margin-top: 2px; accent-color: var(--accent); }
.book-bio-selection .book-person-list { max-height: 260px; }
.book-note-box {
  padding: 12px 14px; background: var(--bg-2);
  border: 1px solid var(--panel-border); font-size: 12.5px; color: var(--muted); margin: 0 0 16px;
}
.book-note-box strong { color: var(--text); }
.book-pay {
  position: relative; padding: 16px 16px 16px 20px; border: 1px solid var(--amber-line);
  background: var(--amber-soft); margin: 0 0 14px; overflow: hidden;
}
.book-pay::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent-2); }
.book-pay.free { border-color: rgba(112, 211, 187, 0.35); background: var(--accent-soft); }
.book-pay.free::before, .book-pay.unlocked::before { background: var(--accent); }
.book-pay.unlocked { border-color: rgba(111, 207, 154, 0.45); background: rgba(111, 207, 154, 0.09); }
.book-pay.warn { border-color: rgba(240, 122, 122, 0.45); background: rgba(240, 122, 122, 0.07); }
.book-pay.warn::before { background: var(--bad); }
.book-pay .price { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.book-pay .price em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.book-pay p { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.book-pay .book-operator-hint { font-family: var(--mono); font-size: 11px; color: var(--ink3); }
.book-pay-list { margin: 10px 0 14px; padding: 0; list-style: none; display: grid; gap: 5px; }
.book-pay-list li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--text); line-height: 1.45; }
.book-pay-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-ink); font-weight: 700; }
.book-pay > .btn.primary { width: 100%; justify-content: center; padding: 11px 16px; font-size: 13.5px; background: var(--accent-2); border-color: var(--accent-2); color: #1a1400; }
.book-pay > .btn.primary[aria-expanded="true"] { background: transparent; color: var(--text); border-color: var(--line-strong); }
.book-unlock { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--amber-line); display: grid; gap: 12px; }
.book-unlock-price { display: flex; align-items: baseline; gap: 8px; }
.book-unlock-price strong { font-size: 20px; letter-spacing: -0.02em; }
.book-unlock-price span { font-size: 12px; color: var(--muted); }
.book-consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 12px; line-height: 1.5; color: var(--text); cursor: pointer; }
.book-consent input { margin-top: 2px; }
.book-unlock-privacy { margin: 0; font-size: 11px; line-height: 1.5; color: var(--ink3); }
.book-or { display: flex; align-items: center; gap: 10px; color: var(--ink3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.book-or::before, .book-or::after { content: ""; flex: 1; height: 1px; background: var(--amber-line); }
.book-code-row { display: flex; gap: 6px; }
.book-code-row input { flex: 1; min-width: 0; font-size: 12px; }
.book-unlock-status { margin: 0; font-size: 12.5px; font-weight: 600; min-height: 1em; }
.book-unlock-status.good { color: var(--good); }
.book-unlock-status.warn { color: var(--warn); }
.book-unlock-status.bad { color: var(--bad); }
.book-legal-links { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; }
.book-seller { margin: 0; font-size: 11px; color: var(--ink3); }
.book-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.book-meta { margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--ink3); }

.book-selection { margin: 20px 0; padding: 16px 14px; border: 1px solid var(--panel-border); background: var(--panel); }
.book-selection h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.02em; }
.book-selection-hint { margin: 8px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.book-selection .select, .book-selection input[type="search"] { width: 100%; min-width: 0; }
.book-selection-count { margin: 16px 0 12px; padding: 10px; background: var(--accent-soft); color: var(--text); font-size: 14px; font-weight: 700; }
.book-selection-check { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; font-size: 12px; cursor: pointer; }
.book-selection input[type="checkbox"] { flex: none; margin-top: 2px; accent-color: var(--accent); }
.book-selection-details { border-top: 1px solid var(--panel-border); padding: 11px 0; }
.book-selection-details summary { cursor: pointer; font-size: 13px; font-weight: 650; }
.book-generation-option { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; padding: 9px 0; align-items: center; cursor: pointer; }
.book-generation-option strong { font-size: 12px; }
.book-generation-option small { display: block; color: var(--muted); font-size: 11px; }
.book-search-label { display: block; font-size: 12px; margin: 14px 0 6px; }
.book-selection-bulk { display: flex; flex-wrap: wrap; gap: 6px; }
.book-selection .btn.small { font-size: 11px; padding: 7px 9px; white-space: normal; }
.book-person-list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.book-person-option, .book-bio-option { display: flex; align-items: flex-start; gap: 9px; padding: 10px 4px; border-bottom: 1px solid var(--panel-border); cursor: pointer; }
.book-person-option:hover, .book-bio-option:hover { background: var(--accent-soft); }
.book-person-option:focus-within, .book-bio-option:focus-within, .book-generation-option:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.book-person-option span, .book-bio-option span { min-width: 0; }
.book-person-option strong, .book-bio-option strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.book-person-option small, .book-bio-option small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.book-person-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12px; }
.book-selection-clear { margin-top: 10px; }
.book-selection-empty { font-size: 12px; color: var(--muted); }

.book-stage {
  min-width: 0;
  overflow: auto;
  background: #16110e;
  padding: 28px 20px 80px;
}
.book-stage-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 6px 16px; overflow-wrap: anywhere;
  max-width: 820px; margin: 0 auto 18px; color: #c9b89a; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.book-sheets { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.book-sheet {
  --preview-scale: 0.58;
  width: calc(var(--sheet-w, 210mm) * var(--preview-scale));
  height: calc(var(--sheet-h, 297mm) * var(--preview-scale));
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.book-sheet .book-page {
  transform: scale(var(--preview-scale));
  transform-origin: top left;
}
/* Unbezahlte Vorschau: diagonales Wasserzeichen auf jedem Blatt (auch im Ausdruck). */
.book-sheet { position: relative; }
.book-stage.locked .book-sheet::after {
  content: attr(data-watermark);
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 clamp(34px, 9vw, 96px) / 1 var(--font, "Manrope", sans-serif);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(120, 90, 40, 0.28); transform: rotate(-30deg);
  pointer-events: none; user-select: none; z-index: 2;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@media print {
  .book-stage.locked .book-sheet::after { display: grid !important; color: rgba(90, 70, 30, 0.45) !important; }
}
/* Vor dem Kauf: die ersten Blätter scharf, der Rest als unscharfe Seitenansicht. */
.book-stage.locked .book-sheet.blurred .book-page {
  filter: blur(7px) saturate(0.85);
  user-select: none;
  pointer-events: none;
}
.book-stage.locked .book-sheet.blurred::before {
  content: attr(data-blur-note);
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  max-width: 80%; padding: 7px 12px; z-index: 3;
  background: rgba(22, 17, 14, 0.82); color: #f3e9d6;
  font: 600 11px / 1.4 var(--font, "Manrope", sans-serif); letter-spacing: 0.04em; text-align: center;
  pointer-events: none; user-select: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@media print {
  .book-stage.locked .book-sheet.blurred .book-page { filter: blur(7px) !important; }
}

/* Konto, Anmeldung und Export-Rückmeldung im Kaufbereich */
.book-login label { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; line-height: 1.4; }
.book-login input { font-size: 12.5px; }
.book-checkout { width: 100%; justify-content: center; padding: 11px 16px; font-size: 13.5px; }
.book-account { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.linklike { background: none; border: 0; padding: 0; color: var(--accent-ink); font: inherit; font-size: inherit; text-decoration: underline; cursor: pointer; }
.linklike:hover { color: var(--text); }
.book-export-note { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; min-height: 0; }
.book-export-note:empty { display: none; }
.book-export-note.good { color: var(--good); }
.book-export-note.warn { color: var(--warn); }
.book-export-note.bad { color: var(--bad); }

@media (max-width: 1100px) {
  .book-studio { grid-template-columns: minmax(0, 1fr); }
  .book-desk { border-right: 0; border-bottom: 1px solid var(--panel-border); max-height: 46vh; }
  .book-sheet { --preview-scale: 0.46; }
}
@media (max-width: 640px) {
  .book-sheet { --preview-scale: 0.36; }
}

/* ------------------------------------------------------------------------ */
/* Pages                                                                     */
/* ------------------------------------------------------------------------ */

.book-page {
  page: book-portrait;
  position: relative;
  background-color: var(--paper);
  color: var(--ink);
  overflow: hidden;
  page-break-after: always;
  break-after: page;
}
.book-page:last-child { page-break-after: auto; break-after: auto; }
.book-page.landscape { page: book-landscape; }

.book-page.content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10mm 11.5mm 8mm;
}
.book-page.content.landscape { padding: 8mm 10mm 7mm; }
.book-inner {
  position: static;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  padding-top: 0;
}
.book-inner.fill, .book-spread, .book-stack, .book-map-wrap, .book-plate.fill,
.book-gens.fill, .book-records.fill, .book-quote-grid, .book-quote-pair,
.book-roster.fill, .book-tri, .book-type.fill {
  min-height: 0;
}
.fill { flex: 1 1 auto; }
.book-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  flex: 1 1 auto;
}
.book-stack { display: flex; flex-direction: column; min-height: 0; }
.book-stack.chart-col { justify-content: center; }
.book-tri {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  flex: 1 1 auto;
}
.book-kv-grid.single { grid-template-columns: 1fr; }
.book-run {
  position: static;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--book-mono); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; gap: 16px;
}
.book-run-rule {
  height: 2px; margin-top: 7px; flex: none;
  background: linear-gradient(90deg, var(--terracotta) 0 86px, var(--rule) 86px);
}
.book-folio {
  position: static;
  display: flex; justify-content: space-between;
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--book-mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}

.book-kicker {
  font-family: var(--book-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
}
.book-kicker.ink { color: var(--terracotta); }
.book-rule { border: 0; border-top: 1px solid var(--gold); width: 64px; margin: 18px 0; opacity: 0.85; }
.book-page-title { font-size: 36px; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 22px; }
.book-h3 {
  font-family: var(--book-mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--terracotta); margin: 0 0 11px; font-weight: 500;
}
.book-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin: 10px 0 14px; }
.book-empty { color: var(--ink-3); font-style: italic; }
.book-cont { font-family: var(--book-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 16px; }
.book-footnote { margin: 16px 0 0; font-size: 12px; line-height: 1.55; color: var(--soft); }
.book-page.layout-person .book-footnote { margin-top: 8px; font-size: 11px; }
.soft { color: #7A7268; font-weight: 400; }

.book-ch-head { display: flex; flex-direction: column; gap: 5px; margin: 32px 0 0; }
.book-ch-head.tight { margin: 22px 0 8px; }
.book-ch-head.tight .book-ch-title { font-size: 24px; }
.book-ch-num { font-family: var(--book-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--gold); }
.book-ch-title { font-size: 32px; letter-spacing: -0.01em; font-weight: 700; margin: 0; line-height: 1.1; }
.book-ch-lede { font-size: 14px; color: var(--ink-2); max-width: 440px; line-height: 1.45; margin: 0; }

.book-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 30px 0 0; }
.book-hero-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.book-hero-grid.four { grid-template-columns: repeat(4, 1fr); }
.book-hero-grid.compact .book-fig { padding: 16px 18px; }
.book-hero-grid.compact .book-fig-v { font-size: 26px; }
.book-fig { background: var(--paper-2); padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; }
.book-fig-v { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.book-fig-l { font-family: var(--book-mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.book-fig-s { font-size: 12px; color: var(--ink-2); }

.book-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 0; }
.book-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; white-space: nowrap; }
.book-kv dt { color: var(--ink-2); }
.book-kv dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.book-sexbar { margin: 0; }
.book-sexbar-track { display: flex; height: 16px; overflow: hidden; background: var(--paper-2); }
.book-sexbar-track i { display: block; height: 100%; }
.book-sexbar-track i.F { background: var(--female); }
.book-sexbar-track i.M { background: var(--male); }
.book-sexbar-track i.U { background: var(--ink-3); }
.book-sexbar-leg { display: flex; gap: 24px; margin-top: 11px; font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.book-sex {
  display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--ink-3); vertical-align: middle;
}
.book-sex.F { background: var(--female); }
.book-sex.M { background: var(--male); }

.book-bars { display: flex; flex-direction: column; gap: 14px; }
.book-bars.tall { gap: 14px; }
.book-bar { display: grid; grid-template-columns: 90px 1fr 46px; gap: 12px; align-items: center; font-size: 12.5px; color: var(--ink-4); }
.book-bars.tall .book-bar { grid-template-columns: 104px 1fr 36px; font-size: 13px; }
.book-bars.stacked .book-bar { grid-template-columns: 1fr 36px; gap: 10px; align-items: baseline; }
.book-bars.stacked .book-bar-track { grid-column: 1 / -1; }
.book-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-bar-track { height: 16px; background: var(--track); overflow: hidden; }
.book-bars.tall .book-bar-track { height: 22px; }
.book-bars.stacked .book-bar-track { height: 14px; }
.book-bar-track i { display: block; height: 100%; background: var(--terracotta); }
.book-bar-n { text-align: right; font-family: var(--book-mono); font-size: 11.5px; color: var(--ink); }
/* Occupations: men/women split with the most frequent place under the name */
.book-bars.split { gap: 17px; }
.book-bars.split .book-bar { grid-template-columns: 122px 1fr 30px; align-items: center; }
.book-bars.split .book-bar-name { white-space: normal; line-height: 1.25; }
.book-bars.split .book-bar-name strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-bars.split .book-bar-name small { display: block; font-size: 9.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-bar-track.split { display: flex; height: 20px; }
.book-page.layout-split .book-hero-grid + .book-spread { margin-top: 28px; }
.book-page.layout-split .book-stack > .book-footnote { margin-top: auto; padding: 16px 0 22px; }
.book-bar-track.split i.M { background: var(--male); }
.book-bar-track.split i.F { background: var(--female); }
.book-bar-track.split i.U { background: var(--ink-3); }
.book-stack > .book-sexbar-leg { margin-top: 16px; }
.book-century-list { display: flex; flex-direction: column; gap: 16px; }
.book-century-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.book-century-head .c { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.book-century-head .n { font-family: var(--book-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.book-century-row .book-bar-track { display: block; height: 6px; }
.book-century-top { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-4); }
.book-century-top strong { font-weight: 600; color: var(--ink); }
.book-gen-occ-block { margin-top: 26px; }
.book-gen-occ { display: flex; flex-direction: column; }
.book-gen-occ-row { display: grid; grid-template-columns: 78px 1fr 26px; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 11.5px; line-height: 1.4; color: var(--ink-4); }
.book-gen-occ-row .g { font-family: var(--book-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terracotta); white-space: nowrap; }
.book-gen-occ-row .t strong { font-weight: 600; color: var(--ink); }
.book-gen-occ-row .n { text-align: right; font-family: var(--book-mono); font-size: 10.5px; color: var(--ink); }

.book-meters { display: flex; flex-direction: column; gap: 9px; }
.book-meter-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.book-meter-track { display: block; height: 5px; background: var(--paper-2); overflow: hidden; }
.book-meter-track i { display: block; height: 100%; background: var(--gold); }

.book-quotes { display: flex; flex-direction: column; gap: 16px; }
.book-quote {
  margin: 0; padding: 0 0 0 16px; border-left: 2px solid #C9BBA4;
  display: flex; flex-direction: column; gap: 7px;
}
.book-quote-t { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.book-quote-b { font-size: 12px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.book-quote footer, .book-basis {
  margin-top: 0; font-family: var(--book-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.book-tag {
  align-self: start; font-family: var(--book-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta); border: 1px solid #D9B7A6; padding: 3px 7px;
}

.book-records { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.book-rec { background: var(--paper-2); padding: 17px 18px; display: flex; flex-direction: column; gap: 6px; }
.book-rec-l { font-family: var(--book-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.book-rec-v { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.book-rec-p { font-size: 12px; color: var(--ink-4); display: flex; flex-direction: column; gap: 4px; }
.book-rec-split { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 4px; }
.book-rec-stack { display: flex; flex-direction: column; gap: 26px; margin-top: 30px; }
.book-rec-group { display: flex; flex-direction: column; gap: 11px; }
.book-person { display: flex; align-items: center; gap: 7px; }
.book-person em { font-style: normal; color: var(--ink-3); margin-left: 0; font-family: var(--book-mono); font-size: 10px; }

.book-type { display: flex; flex-wrap: wrap; gap: 20px 22px; align-items: baseline; margin-top: 0; }
.book-type-item { font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; color: var(--ink); }
.book-type-item sup { font-family: var(--book-mono); font-size: 11px; color: var(--terracotta); margin-left: 4px; font-weight: 400; }

.book-plate { margin: 8px 0 12px; padding: 10px 12px 8px; background: var(--paper-2); border: 1px solid var(--rule); }
.book-plate-cap { font-family: var(--book-mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.book-spark { display: block; }
.book-spark .area { fill: rgba(139, 58, 40, 0.16); stroke: none; }
.book-spark .line { fill: none; stroke: var(--terracotta); stroke-width: 1.6; }
.book-spark .peak { fill: var(--gold); }
.book-spark-axis { display: flex; justify-content: space-between; font-family: var(--book-mono); font-size: 9px; color: var(--ink-3); margin-top: 4px; }
.book-map { display: block; background: #efe6d6; }
.book-map .frame { fill: #efe6d6; stroke: var(--rule); }
.book-map .grid { stroke: rgba(70, 48, 20, 0.12); stroke-width: 0.6; }
.book-map .dot { fill: var(--terracotta); opacity: 0.82; }
.book-map .lbl { font-size: 8px; fill: var(--ink-2); font-family: var(--book-font); }

.book-gens { display: flex; flex-direction: column; gap: 9px; }
.book-gen-lab { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.book-gen-lab span { font-family: var(--book-mono); font-size: 10px; color: var(--ink-3); }
.book-gen-track { position: relative; height: 16px; background: var(--paper-2); }
.book-gen-track i { display: block; height: 100%; background: #5c3a2e; }
.book-gen-track em { position: absolute; right: 6px; top: 1px; font-style: normal; font-size: 10px; font-family: var(--book-mono); color: var(--ink); }
.book-gen-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.book-plain { margin: 0; padding: 0; list-style: none; }
.book-plain li { padding: 11px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; }
.book-plain.tight li { padding: 11px 0; }
.book-plain em { font-style: normal; color: var(--ink-2); margin-left: 8px; font-family: var(--book-mono); font-size: 11.5px; }
.book-plain strong { font-weight: 600; }

/* Cover / half / toc / colophon */
.book-page.cover { background: var(--cover); color: var(--cover-ink); background-image:
  radial-gradient(ellipse at 80% 120%, rgba(166, 124, 66, 0.18), transparent 46%),
  radial-gradient(ellipse at 0% 0%, rgba(243, 238, 228, 0.05), transparent 40%);
}
.book-cover { height: 100%; padding: 28mm 22mm 20mm 28mm; box-sizing: border-box; position: relative; }
.book-cover .book-tree { position: absolute; right: 18mm; top: 36mm; opacity: 0.95; }
.book-tree .stem { stroke: #c4a06a; stroke-width: 1.8; }
.book-tree .node { fill: #c4a06a; }
.book-tree .node.a { fill: #7ea0b8; }
.book-tree .node.b { fill: #d08aa6; }
.book-cover-title {
  font-size: 58px; line-height: 0.95; font-weight: 800; letter-spacing: -0.045em;
  margin: 8px 0 16px; max-width: 14ch;
}
.book-cover-title.long { font-size: 40px; max-width: 16ch; }
.book-cover-years { font-family: var(--book-mono); font-size: 18px; letter-spacing: 0.18em; color: var(--gold); margin: 0 0 8px; }
.book-cover-meta { font-size: 13px; color: #d8cfc2; margin: 0 0 4px; }
.book-cover-meta.soft { color: #9a8d7e; font-size: 12px; }
.book-cover-foot {
  position: absolute; left: 28mm; right: 22mm; bottom: 18mm;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--book-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #9a8d7e;
}
.book-signet { color: var(--gold); letter-spacing: 0.2em; }

.book-half { height: 100%; padding: 28mm 22mm 22mm 24mm; box-sizing: border-box; }
.book-half.split { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 18mm; align-items: stretch; }
.book-half-copy { display: flex; flex-direction: column; justify-content: center; }
.book-half-rail { display: flex; flex-direction: column; justify-content: stretch; border-left: 1px solid var(--rule); padding-left: 12mm; }
.book-half-rail .book-fig { flex: 1; border-bottom: 1px solid rgba(201, 184, 154, 0.55); }
.book-half h2 { font-size: 42px; letter-spacing: -0.035em; margin: 0 0 22px; }
.book-half-text { font-size: 15px; line-height: 1.5; max-width: 36ch; color: var(--ink-2); }
.book-half-note { margin-top: 28px; font-size: 12px; color: var(--ink-3); max-width: 40ch; }

.book-page.toc { box-sizing: border-box; padding: 28mm 22mm 22mm 24mm; }
.book-inner.toc-grid {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: 12mm;
}
.book-toc { list-style: none; margin: 0; padding: 0; }
.book-toc li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.book-toc-n { font-family: var(--book-mono); font-size: 12px; color: var(--gold); }
.book-toc-aside { display: flex; flex-direction: column; justify-content: flex-end; border-left: 1px solid var(--rule); padding-left: 10mm; color: var(--ink-2); font-size: 13px; }
.book-toc-count { margin-bottom: 18px; }
.book-toc-count strong { display: block; font-size: 72px; letter-spacing: -0.05em; line-height: 0.9; color: var(--terracotta); }
.book-toc-count span { font-family: var(--book-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.book-toc-foot { margin-top: 28px; font-family: var(--book-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.book-toc-foot a { color: var(--terracotta); }

.book-colo { height: 100%; padding: 70mm 28mm; box-sizing: border-box; }
.book-colo h2 { font-size: 28px; margin: 0 0 18px; }
.book-colo p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 38ch; }
.book-colo-brand { margin-top: 36px !important; font-family: var(--book-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold) !important; }

/* Same-tab print overlay (no popup). @page size is injected by export.js */
.book-print-root { display: none; }
html.book-printing { color-scheme: light; }
html.book-printing .book-print-root {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 4000;
  overflow: auto;
  background: #16110e;
  padding: 20px 20px 48px;
}
.book-print-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  max-width: 820px;
  margin: 0 auto 18px;
  padding: 12px 14px;
  background: #241e1a;
  color: #f3eee4;
  border: 1px solid #3a322c;
}
.book-print-bar p { margin: 0; font-size: 13px; line-height: 1.4; max-width: 52ch; }
.book-print-bar .btn { font: inherit; }
.book-print-root .book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.book-print-root .book-page {
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}

html.book-print, html.book-print body {
  margin: 0; background: #fff; overflow: visible !important; height: auto !important;
}
html.book-print .book-page,
html.book-printing .book-page {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@page book-portrait { size: A4 portrait; margin: 0; }
@page book-landscape { size: A4 landscape; margin: 0; }

@media print {
  html.book-printing,
  html.book-printing body {
    color-scheme: only light !important;
    background: #fff !important;
    overflow: visible !important;
    height: auto !important;
  }
  html.book-printing body > *:not(#book-print-root) {
    display: none !important;
  }
  html.book-printing .book-print-root {
    display: block !important;
    position: static !important;
    overflow: visible !important;
    background: #fff !important;
    padding: 0 !important;
  }
  html.book-printing .book-print-bar { display: none !important; }
  html.book-printing .book-print-root .book { display: block; gap: 0; }
  html.book-printing .book-page { box-shadow: none !important; }
}

/* Charts */
.book-donut { display: flex; gap: 24px; align-items: center; }
.book-donut.stack { flex-direction: column; align-items: stretch; gap: 18px; }
.book-donut.stack .book-donut-ring { align-self: center; }
.book-donut svg { flex: 0 0 auto; display: block; }
.book-donut-ring { position: relative; width: fit-content; }
.book-donut-center {
  position: absolute; inset: 22%; background: var(--paper-2);
  border-radius: 50%; /* the hole of a ring chart is a shape, not an edge */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.book-donut-center strong { font-size: 24px; font-weight: 700; line-height: 1; }
.book-donut-center span { font-family: var(--book-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.book-donut-leg { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--ink-4); }
.book-donut-leg li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.book-donut-leg i { display: inline-block; width: 10px; height: 10px; flex: 0 0 auto; }
.book-cols, .book-area, .book-lifebars { display: block; width: 100%; }
.book-cols .axis, .book-lifebars .axis { stroke: var(--rule); stroke-width: 0.8; }
.book-cols .tick, .book-area .tick, .book-lifebars .tick { font-size: 8px; fill: var(--ink-3); text-anchor: middle; font-family: var(--book-mono); }
.book-cols .tick.end, .book-area .tick.end, .book-lifebars .tick.end { text-anchor: end; }
.book-area .tick.start { text-anchor: start; }
.book-cols .val { font-size: 8px; fill: var(--ink-2); text-anchor: middle; font-family: var(--book-mono); }
.book-area .fill { fill: rgba(139, 58, 40, 0.16); }
.book-area .stroke { fill: none; stroke: var(--terracotta); stroke-width: 1.7; }
.book-area .peak { fill: var(--gold); }
.book-lifebars .lbl { font-size: 8px; fill: var(--ink-2); text-anchor: end; font-family: var(--book-font); }
.book-lifebars .grid { stroke: rgba(201, 184, 154, 0.4); stroke-width: 0.45; }
.book-lifebars .yr { font-size: 7.5px; fill: var(--ink-2); font-family: var(--book-mono); }
.book-lifebars .yr.in { fill: #f4efe6; }
.book-lifebars .yr.start { text-anchor: end; }
.book-lifebars .yr.end { text-anchor: start; }
.book-lifebars .yr.in.end { text-anchor: end; }
.book-lifebars g.focus .lbl { font-weight: 700; fill: var(--ink); }
.book-plate.spans { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.book-plate.spans .book-lifebars { flex: 1 1 auto; min-height: 0; }

/* Map plate */
.book-map-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 210px; }
.book-mapplate {
  position: relative;
  flex: 1 1 auto;
  min-height: 210px;
  overflow: hidden;
  background: #c8d4c0;
  border: 1px solid var(--rule);
}
.book-map-missing { position: absolute; inset: 30% 8% auto; padding: 20px; background: var(--paper-2); color: var(--ink-2); text-align: center; }
.book-map-svg image[data-load="error"] { display: none; }
.book-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.book-map-svg .water { fill: #c5d4dc; }
.book-map-svg .water.dim { fill: #d5ddd0; }
.book-map-svg .land { fill: #c5d0b8; stroke: #9aa88c; stroke-width: 0.45; }
.book-map-svg .dot { fill: var(--terracotta); stroke: #f4efe6; stroke-width: 0.7; }
.book-map-svg .flow { stroke: var(--gold); stroke-width: 1.3; opacity: 0.75; }
.book-map-svg .label-bg { fill: rgba(244, 239, 230, 0.85); }
.book-map-svg .lbl { font-size: 8px; fill: var(--ink); font-family: var(--book-font); }
.book-map-attr {
  position: absolute; left: 8px; bottom: 6px; margin: 0;
  font-family: var(--book-mono); font-size: 7.5px; letter-spacing: 0.04em; color: var(--ink-3);
  background: rgba(244, 239, 230, 0.82); padding: 2px 6px;
}
.book-note.map-cap { margin: 8px 0 0; }

/* Circle / person pages */
.book-roster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  flex: 1 1 auto;
  align-content: start;
}
.book-roster-g ul { list-style: none; margin: 0; padding: 0; }
.book-roster-g li { font-size: 12px; padding: 2px 0; }
.book-roster-g em { font-style: normal; color: var(--ink-3); margin-left: 6px; font-family: var(--book-mono); font-size: 10px; }
.book-roster-entry { overflow-wrap: anywhere; padding: 2px 0; }
.book-roster-entry p { margin: 0; font-size: 12px; }
.book-roster-entry .book-h3 { margin: 12px 0 6px; }
.book-roster-entry small { display: block; font-family: var(--book-mono); color: var(--ink-3); font-size: 10px; padding-left: 14px; }
.book-person-head {
  margin: 28px 0 0; padding: 22px 24px;
  background: var(--cover); color: var(--cover-ink); border-left: 4px solid var(--gold);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
}
.book-person-head > div { display: flex; flex-direction: column; gap: 7px; }
.book-person-head .book-kicker { color: var(--gold); font-size: 8.5px; letter-spacing: 0.2em; margin: 0; }
.book-person-head h2 { font-size: 31px; letter-spacing: -0.01em; margin: 0; line-height: 1.1; font-weight: 700; }
.book-person-sub { margin: 0; font-family: var(--book-mono); font-size: 13px; color: var(--cover-ink); white-space: nowrap; }
.book-tl { list-style: none; margin: 0; padding: 0; flex: 1; }
.book-tl.full { min-height: 0; }
/* Year and age columns grow for qualified values ("nach 1910", "ca. 62 J.") instead of wrapping them. */
.book-tl li { display: grid; grid-template-columns: minmax(42px, max-content) 1fr minmax(34px, max-content); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: 12.5px; align-items: baseline; }
.book-tl .y { font-family: var(--book-mono); font-size: 11px; color: var(--terracotta); white-space: nowrap; }
.book-tl b { font-weight: 600; }
.book-tl em { font-style: normal; color: var(--ink-3); margin-left: 6px; }
.book-tl .age { font-family: var(--book-mono); font-size: 10px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.book-page.layout-person .book-spread { flex: 1 1 auto; }
.book-family, .book-life, .book-kin { min-height: 0; display: flex; flex-direction: column; }
.book-plate.tight { margin-top: auto; }
.book-mapplate { background: #c5d4dc; }
.book-page.layout-split .book-spread,
.book-page.layout-chart .book-plate { flex: 1 1 auto; }
.book-stack.gap-lg { gap: 32px; }
.book-spread.portrait-body { grid-template-columns: 1.12fr 0.88fr; gap: 38px; margin-top: 38px; align-items: start; }
.book-spread.life-foot { gap: 32px; margin-top: 40px; align-items: stretch; }
.book-spread.places-top { grid-template-columns: 1.08fr 0.92fr; gap: 38px; margin-top: 32px; align-items: start; }
.book-spread.person-top { grid-template-columns: 0.85fr 1.15fr; gap: 36px; margin-top: 28px; align-items: start; }
.book-spread.person-foot { grid-template-columns: 0.85fr 1.15fr; gap: 36px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); align-items: start; }

.book-panel {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px; border: 1px solid var(--rule); background: var(--paper-2);
}
.book-panel.life-donut { padding: 22px; gap: 14px; }
.book-panel-note { margin: 2px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--soft); border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.book-notestrip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule);
}
.book-notestrip p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-4); }
.book-notestrip .book-h3 { margin-bottom: 5px; font-size: 8px; letter-spacing: 0.14em; }

.book-feature {
  margin-top: 28px; padding: 22px 24px; background: var(--paper-2); border-left: 3px solid var(--terracotta);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: center;
}
.book-feature-copy { display: flex; flex-direction: column; gap: 8px; }
.book-feature .book-quote-t { font-size: 21px; line-height: 1.25; }
.book-feature .book-quote-b { font-size: 12.5px; }
.book-quote-bars { display: flex; align-items: flex-end; justify-content: flex-end; gap: 30px; }
.book-quote-bar { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.book-quote-bar .v { font-size: 16px; font-weight: 700; }
.book-quote-bar i { display: block; width: 50px; background: var(--terracotta); }
.book-quote-bar .l { font-family: var(--book-mono); font-size: 8px; color: var(--ink-3); letter-spacing: 0.04em; }
.book-quote-grid {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 30px;
  margin-top: 30px; align-content: start; flex: 1 1 auto;
}

.book-century { display: flex; flex-direction: column; gap: 16px; margin-top: 38px; }
.book-cols-css {
  display: grid;
  gap: 16px; align-items: end; height: 250px; border-bottom: 1px solid #C9BBA4;
}
.book-col-css { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; height: 100%; }
.book-col-css .v { font-family: var(--book-mono); font-size: 11px; color: var(--ink-4); }
.book-col-css i { display: block; width: 100%; max-width: 72px; background: var(--terracotta); }
.book-cols-axis {
  display: grid;
  gap: 16px; font-family: var(--book-mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--ink-3); text-align: center;
}

.book-callout { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--paper-2); border-left: 3px solid var(--terracotta); }
.book-callout.gold { border-left-color: var(--gold); padding: 18px; gap: 9px; }
.book-callout-t { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 600; }
.book-callout-b { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-2); }

.book-flow-block { display: flex; flex-direction: column; gap: 16px; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--rule); }
.book-flows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.book-flow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); font-size: 12px; line-height: 1.4; }
.book-flow em { font-style: normal; font-family: var(--book-mono); font-size: 10.5px; color: var(--ink-3); }

.book-fact { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.book-fact-l { font-family: var(--book-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.book-fact-v { font-size: 13px; line-height: 1.45; }
.book-fact-v b { font-weight: 600; }
.book-fact-residence { padding-bottom: 4px; border-bottom: 0; }
.book-fact-residence + .book-fact-residence { padding-top: 0; }
.book-fact-residence + .book-fact-residence .book-fact-l { display: none; }
.book-fact-residence + .book-fact:not(.book-fact-residence) { margin-top: 6px; border-top: 1px solid var(--rule-soft); }

.book-fplot {
  padding: 16px 14px; background: var(--paper-2); border: 1px solid var(--track);
  display: flex; flex-direction: column; align-items: center;
}
.book-fplot-row { display: flex; align-items: center; gap: 34px; }
.book-fplot-row.me { gap: 12px; }
.book-fplot-stem { width: 1px; height: 22px; background: #C9BBA4; }
.book-fplot-link { width: 30px; height: 1px; background: #C9BBA4; margin-bottom: 16px; }
.book-fn { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.book-fn i { display: block; background: var(--ink-3); }
.book-fn.sex-F i { background: var(--female); }
.book-fn.sex-M i { background: var(--male); }
.book-fn.sz-l i { width: 46px; height: 46px; }
.book-fn.sz-m i { width: 30px; height: 30px; }
.book-fn.sz-s i { width: 26px; height: 26px; }
.book-fn.sz-xs i { width: 20px; height: 20px; }
.book-fn.me i { background: var(--ink); border: 3px solid var(--terracotta); box-sizing: border-box; }
.book-fn span { font-family: var(--book-mono); font-size: 8px; color: var(--ink-2); }
.book-fn.me span { font-weight: 500; color: var(--ink); }
.book-fplot-sibs {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--track); width: 100%;
}
.book-fplot-sibs > span { font-family: var(--book-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.book-fplot-sibs .book-fplot-row { gap: 14px; }

.book-rels { display: flex; flex-direction: column; }
.book-rel { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; font-size: 12.5px; }
.book-rel .role { font-family: var(--book-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.book-rel .name { display: flex; align-items: center; gap: 7px; }
.book-rel .yrs { font-family: var(--book-mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }

/* Measure at paper size, outside the scaled preview and without painting. */
.book-measure {
  position: fixed; left: -20000px; top: 0; width: max-content;
  visibility: hidden; pointer-events: none;
}
.book-preview-request { max-width: 540px; margin: 60px auto; padding: 26px; border: 1px solid #524333; color: #f3eee4; }
.book-preview-request h2 { margin-top: 0; font-size: 23px; }
.book-preview-request p { color: #c9b89a; line-height: 1.6; }

/* Bounded areas let the compositor move whole rows before they reach the footer. */
.book-page.layout-person { line-height: 1.45; }
.book-page.layout-person .book-run,
.book-page.layout-person .book-folio { flex: none; }
.book-page.person-first .book-inner {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 22px;
  padding-bottom: 16px;
}
.book-page.person-first .person-top,
.book-page.layout-person .person-foot {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  margin-top: 0; align-items: stretch;
}
.book-page.person-compact .book-inner { display: block; }
.book-page.person-compact .person-top,
.book-page.person-compact .person-foot { margin-top: 22px; }
.book-page.person-compact .book-row-list { flex: none; }
.book-page.person-compact .book-more { display: none; }
.book-page.person-family .person-foot { flex: 1 1 0; padding: 0 0 16px; border-top: 0; }
.book-family-next { margin: 0; font-size: 11px; color: var(--ink-3); }
.book-page.layout-person .book-person-head { flex: none; }
.book-page.layout-person .book-person-head > div { min-width: 0; }
.book-page.layout-person .book-person-head h2 { overflow-wrap: anywhere; }
.book-flow-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.book-flow-column > .book-h3 { flex: none; }
.book-family > .book-h3 { flex: none; }
.book-flow-column > .book-row-list {
  display: block; flex: 1 1 0; min-height: 0; margin: 0; padding: 0;
}
.book-row-list > * { break-inside: avoid; }
.book-page.layout-person .book-tl li { grid-template-columns: minmax(42px, max-content) minmax(0, 1fr) minmax(34px, max-content); }
.book-page.layout-person .book-rel { grid-template-columns: 78px minmax(0, 1fr) minmax(70px, max-content); }
.book-page.layout-person .book-rel .name { align-items: baseline; }
.book-page.layout-person .book-rel .name > span { min-width: 0; }
.book-page.layout-person .book-rel .book-sex { flex: none; }
.book-page.layout-person .book-row-list * { min-width: 0; overflow-wrap: anywhere; }
.book-page.layout-person .book-fplot { padding: 12px; }
.book-page.layout-person .book-fplot:not(.book-row-list),
.book-page.layout-person .book-fplot.book-fplot-fitted { flex: none; }
.book-page.layout-person .book-fplot-row { width: 100%; max-width: 100%; flex-wrap: wrap; gap: 14px 12px; justify-content: center; align-items: flex-start; }
.book-page.layout-person .book-fn { min-width: 56px; max-width: 100%; flex: 0 1 auto; }
.book-page.layout-person .book-fn span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; line-height: 1.2; }
.book-fplot-group { width: 100%; padding: 7px 0; }
.book-family-group-start:not(:first-child) { border-top: 1px solid var(--track); margin-top: 5px; }
.book-fplot-caption { display: none; margin-bottom: 10px; font-family: var(--book-mono); font-size: 8px; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.book-family-group-start > .book-fplot-caption { display: block; }
.book-more { flex: none; margin: 8px 0 0; font-size: 10px; line-height: 1.45; color: var(--terracotta); }
.book-person-cont-head { flex: none; margin: 28px 0 22px; }
.book-person-cont-head h2 { margin: 0; font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; }
.book-cont-columns {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  flex: 1 1 0; min-height: 0; padding-bottom: 16px;
}
.book-page.person-with-notes .book-inner { display: block; }
.book-page.person-with-notes .book-row-list { flex: none; }
.book-page.person-with-notes .book-more[style*="hidden"] { display: none; }
.book-page.person-with-notes .person-foot,
.book-page.person-with-notes .book-cont-columns { height: auto; flex: none; }
.book-person-notes { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.book-person-notes-list { padding: 0; margin: 0; }
.book-person-note { padding: 0 0 12px; }
.book-person-note p { margin: 0; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.book-note-context { font-weight: 600; color: var(--ink-3); }
.person-notes-cont .book-person-notes { margin-top: 0; padding-top: 0; border-top: 0; }
/* Biography: two text columns below the profile, continued on further sheets. */
.book-person-bio { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.person-bio-cont .book-person-bio { margin-top: 0; padding-top: 0; border-top: 0; }
.book-bio-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; align-items: start; }
.book-bio-list { display: block; margin: 0; padding: 0; overflow: hidden; }
.book-bio-para { padding: 0 0 8px; }
.book-bio-para .book-h3 { margin: 6px 0 6px; }
.book-bio-para:first-child .book-h3 { margin-top: 0; }
.book-bio-para .book-h3:empty { display: none; }
.book-bio-para p { margin: 0; font-size: 11.5px; line-height: 1.55; hyphens: auto; overflow-wrap: anywhere; }
.book-bio-para.note p { font-size: 9.5px; line-height: 1.5; color: var(--ink-3); }
.book-page.layout-person-index { line-height: 1.45; }
.book-page.layout-person-index .book-run,
.book-page.layout-person-index .book-folio { flex: none; }
.book-index-head { flex: none; margin: 28px 0 16px; }
.book-index-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 14px;
  align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule-soft);
  color: var(--ink); text-decoration: none;
}
.book-index-row:hover { color: var(--terracotta); text-decoration: none; }
.book-index-person { min-width: 0; overflow-wrap: anywhere; }
.book-index-person strong { display: block; font-size: 13px; font-weight: 600; }
.book-index-person small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--ink-3); }
.book-index-page { font-family: var(--book-mono); font-size: 12px; text-align: right; color: var(--terracotta); }

/* Compact name rows, with deliberate space after the key figures. */
.book-page.layout-names .names-body { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.book-page.layout-names .book-bars { gap: 5px; }
.book-page.layout-names .book-type { flex: none; align-content: flex-start; gap: 6px 16px; }
.book-page.layout-names .book-panel-note { margin-top: 16px; }
.book-page.layout-names .book-stack { min-width: 0; }

/* "Im Lauf der Zeit": chart with the numbers underneath in two tables. */
.book-page.layout-chart .book-plate.timeline-plate { flex: none; margin-top: 26px; }
.book-year-block { display: flex; flex-direction: column; min-height: 0; margin-top: 18px; }
.book-year-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
.book-year-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.book-year-table th {
  text-align: left; padding: 0 0 6px; border-bottom: 1px solid var(--rule);
  font-family: var(--book-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.book-year-table td { padding: 3px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink-4); }
.book-year-table td:first-child { font-family: var(--book-mono); font-size: 10.5px; color: var(--terracotta); width: 38%; }
.book-year-table th:last-child, .book-year-table td:last-child { text-align: right; }
.book-year-table td:last-child { font-weight: 600; color: var(--ink); }
.book-year-table tr.peak td { background: var(--paper-2); font-weight: 700; }
.book-year-table tr.peak td:last-child { color: var(--terracotta); }

/* Generation bands keep their natural height and continue on another sheet. */
.book-page.layout-bands .book-run,
.book-page.layout-bands .book-folio,
.book-page.layout-bands .book-ch-head { flex: none; }
.book-gen-chart { flex: none; margin-top: 22px; }
.book-gen-chart .book-plate-cap { margin-top: 8px; }
.book-page.layout-bands .book-gens {
  display: block; flex: 1 1 0; min-height: 0; margin: 22px 0 16px;
}
.book-page.layout-bands .book-gen { padding: 0 0 14px; break-inside: avoid; }
.book-page.layout-bands .book-gen-meta { overflow-wrap: anywhere; }

.book-desk .picker { width: 100%; margin-bottom: 8px; }