/* ========================================================================
   Reader shell — wraps the book content
   ======================================================================== */

:root {
  --r-paper: #faf7f2;
  --r-paper-warm: #f4ede0;
  --r-ink: #1a1814;
  --r-ink-soft: #3d3832;
  --r-ink-muted: #6b645a;
  --r-accent: #8b6f3f;
  --r-rule: #d9d2c2;
  --r-nav-bg: rgba(250, 247, 242, 0.95);
  --r-body-size: 20px;
  --r-line-height: 1.75;
  --serif-body: 'EB Garamond', Georgia, serif;
  --serif-display: 'Playfair Display', Georgia, serif;
}

body.reader-body {
  margin: 0; padding: 0;
  background: var(--r-paper);
  color: var(--r-ink);
  font-family: var(--serif-body);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ---------- Top nav bar ---------- */
.reader-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--r-nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--r-rule);
  padding: 12px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.reader-nav-left { display: flex; }
.reader-nav-right { display: flex; gap: 8px; justify-content: flex-end; }
.reader-nav-center { display: flex; justify-content: center; }

.reader-home {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--r-ink-soft); text-decoration: none;
  font-size: 15px; padding: 6px 10px;
  border-radius: 4px; transition: background 0.15s ease;
}
.reader-home:hover { background: rgba(0,0,0,0.04); color: var(--r-ink); }

.reader-toc-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--r-rule);
  padding: 8px 16px; border-radius: 20px;
  font-family: var(--serif-body); font-size: 15px;
  color: var(--r-ink); cursor: pointer;
  max-width: 400px;
  transition: all 0.15s ease;
}
.reader-toc-toggle:hover { border-color: var(--r-accent); color: var(--r-accent); }
.reader-current-chapter {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 300px;
}

.reader-control {
  background: transparent; border: 1px solid var(--r-rule);
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--r-ink-soft); cursor: pointer;
  font-family: var(--serif-body); font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.reader-control:hover { border-color: var(--r-accent); color: var(--r-accent); }
.reader-control:active { transform: scale(0.95); }

/* ---------- Progress bar ---------- */
.reader-progress {
  position: fixed; top: 63px; left: 0;
  height: 2px; background: var(--r-accent);
  width: 0%; z-index: 99; transition: width 0.1s ease-out;
}

/* ---------- TOC drawer ---------- */
.toc-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 360px; max-width: 88vw;
  background: var(--r-paper-warm);
  border-right: 1px solid var(--r-rule);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 200;
  display: flex; flex-direction: column;
  box-shadow: 0 0 60px rgba(0,0,0,0.15);
}
.toc-drawer.open { transform: translateX(0); }
.toc-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px; border-bottom: 1px solid var(--r-rule);
}
.toc-drawer-title {
  font-family: var(--serif-display); font-style: italic;
  font-size: 28px; color: var(--r-ink);
}
.toc-close {
  background: transparent; border: none;
  font-size: 32px; color: var(--r-ink-muted);
  cursor: pointer; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.toc-close:hover { background: rgba(0,0,0,0.05); color: var(--r-ink); }

.toc-drawer-nav {
  flex: 1; overflow-y: auto;
  padding: 16px 0;
}
.toc-link {
  display: flex; gap: 18px; align-items: baseline;
  padding: 14px 24px;
  color: var(--r-ink-soft); text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}
.toc-link:hover {
  background: rgba(139,111,63,0.08);
  border-left-color: var(--r-accent);
  color: var(--r-ink); text-decoration: none;
}
.toc-link.active {
  background: rgba(139,111,63,0.12);
  border-left-color: var(--r-accent);
  color: var(--r-ink);
}
.toc-l-num {
  font-family: var(--serif-display); font-weight: 700;
  color: var(--r-accent); min-width: 28px;
  font-size: 18px; font-variant-numeric: tabular-nums;
}
.toc-link.toc-frontmatter .toc-l-num {
  font-style: italic; font-weight: 400;
  font-size: 14px; min-width: auto;
}
.toc-l-title {
  font-family: var(--serif-body);
  font-size: 16px; line-height: 1.35;
}

.toc-drawer-footer { padding: 20px 24px; border-top: 1px solid var(--r-rule); }
.toc-resume {
  width: 100%; padding: 12px;
  background: var(--r-ink); color: var(--r-paper);
  border: none; border-radius: 4px;
  font-family: var(--serif-body); font-size: 15px;
  cursor: pointer;
}
.toc-resume:hover { background: var(--r-accent); }

.toc-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.toc-backdrop.visible { opacity: 1; pointer-events: auto; }

/* ---------- Reader main — override book's print-sized page ---------- */
.reader-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px 120px;
}

/* Hide print-only pages (half-title, title, copyright, epigraph, toc) in reader */
.reader-main .half-title-page,
.reader-main .title-page,
.reader-main .copyright-page,
.reader-main .epigraph-page,
.reader-main .toc-page,
body .half-title-page,
body .title-page,
body .copyright-page,
body .epigraph-page,
body .toc-page {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset book's print-style page containers so they flow as web content */
.reader-main section {
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 80px !important;
  page-break-after: auto !important;
  page-break-before: auto !important;
  break-after: auto !important;
  break-before: auto !important;
  display: block !important;
}
.reader-main .page-break-after { page-break-after: auto !important; }
.reader-main .page-break-before { page-break-before: auto !important; }

/* Body text sizing controls */
body.size-sm { --r-body-size: 17px; --r-line-height: 1.7; }
body.size-md { --r-body-size: 20px; --r-line-height: 1.75; }
body.size-lg { --r-body-size: 23px; --r-line-height: 1.8; }
body.size-xl { --r-body-size: 26px; --r-line-height: 1.85; }

.reader-main p {
  font-size: var(--r-body-size) !important;
  line-height: var(--r-line-height) !important;
  color: var(--r-ink-soft);
  text-align: left !important;
  text-indent: 0 !important;
  margin: 0 0 1.1em !important;
  max-width: 100% !important;
}
.reader-main p + p {
  text-indent: 1.5em !important;
}
.reader-main p.first-paragraph,
.reader-main p:first-of-type {
  text-indent: 0 !important;
}

/* Chapter headers — more airy for web */
.reader-main .chapter-label {
  display: block;
  font-family: var(--serif-body);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--r-ink-muted);
  text-align: center;
  margin: 60px 0 20px;
}
.reader-main .chapter-title {
  font-family: var(--serif-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  text-align: center;
  margin: 0 0 40px;
  line-height: 1.15;
  color: var(--r-ink);
}
/* Author's Note gets italic treatment */
.reader-main .authors-note .chapter-title {
  font-style: italic;
  font-weight: 400;
}
.reader-main .chapter-title::after {
  content: '◆';
  display: block;
  font-size: 16px;
  color: var(--r-accent);
  margin-top: 30px;
  font-weight: 400;
}

/* Section break ornaments */
.reader-main .section-break {
  text-align: center;
  margin: 40px 0 !important;
  color: var(--r-accent);
  font-size: 14px;
  letter-spacing: 1em;
}

/* Drop cap */
.reader-main .dropcap::first-letter,
.reader-main p.dropcap::first-letter {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 5em;
  float: left;
  line-height: 0.85;
  margin: 0.08em 0.1em 0 0;
  color: var(--r-accent);
}

/* Thought italics */
.reader-main em.thought { font-style: italic; color: var(--r-ink); }

/* Chapter section padding - give each chapter its own breathing room */
.reader-main section[id^="chapter-"],
.reader-main section#authors-note {
  padding-top: 40px !important;
  border-top: 1px solid var(--r-rule);
}
.reader-main section#authors-note {
  border-top: none;
}
.reader-main section:first-of-type { border-top: none; padding-top: 0 !important; }

/* End nav */
.reader-end-nav {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 80px; padding-top: 40px;
  border-top: 1px solid var(--r-rule);
}
.reader-end-nav .btn {
  display: inline-block; padding: 12px 22px;
  font-family: var(--serif-body); font-size: 15px;
  border-radius: 2px; text-decoration: none;
  transition: all 0.2s ease;
}
.reader-end-nav .btn-primary {
  background: var(--r-ink); color: var(--r-paper);
  border: 1px solid var(--r-ink);
}
.reader-end-nav .btn-primary:hover {
  background: var(--r-accent); border-color: var(--r-accent);
}
.reader-end-nav .btn-ghost {
  background: transparent; color: var(--r-ink);
  border: 1px solid var(--r-ink);
}
.reader-end-nav .btn-ghost:hover {
  background: var(--r-ink); color: var(--r-paper);
}

/* ===== Acknowledgments / Sources sections ===== */
.reader-main .acknowledgments-page,
.reader-main .sources-page {
  margin-top: 80px !important;
  padding-top: 40px !important;
  border-top: 1px solid var(--r-rule);
}
.reader-main .acknowledgments-title,
.reader-main .sources-title {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(32px, 4vw, 44px);
  text-align: center;
  margin-bottom: 40px;
  color: var(--r-ink);
}

/* ===== THEMES ===== */
body.theme-sepia {
  --r-paper: #f3ead7;
  --r-paper-warm: #ede1c5;
  --r-ink: #2a1f12;
  --r-ink-soft: #4a3a24;
  --r-ink-muted: #7a6a52;
  --r-rule: #d8c9a8;
  --r-nav-bg: rgba(243, 234, 215, 0.95);
}

body.theme-night {
  --r-paper: #14110d;
  --r-paper-warm: #1c1814;
  --r-ink: #e8dfcd;
  --r-ink-soft: #cfc4ad;
  --r-ink-muted: #8a8070;
  --r-accent: #d4b07c;
  --r-rule: #2a2520;
  --r-nav-bg: rgba(20, 17, 13, 0.95);
}
body.theme-night .reader-control,
body.theme-night .reader-toc-toggle { color: var(--r-ink-soft); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .reader-nav { padding: 10px 14px; grid-template-columns: auto 1fr auto; gap: 8px; }
  .reader-home span { display: none; }
  .reader-home { padding: 8px; }
  .reader-toc-toggle { padding: 6px 12px; font-size: 14px; }
  .reader-current-chapter { max-width: 180px; }
  .reader-control { width: 34px; height: 34px; font-size: 13px; }
  .reader-main { padding: 32px 22px 100px; }
  body.size-md { --r-body-size: 18px; }
  body.size-lg { --r-body-size: 20px; }
  body.size-xl { --r-body-size: 23px; }
  .reader-progress { top: 57px; }
}
@media (max-width: 480px) {
  .reader-control:nth-child(1), .reader-control:nth-child(2) { display: none; }
  .reader-current-chapter { max-width: 140px; font-size: 13px; }
}