/* ============================================================
   chapters.css — table of contents + chapter reader
   Loaded after style.css by manifesto.html and chapters/*.html
   ============================================================ */

/* Measurements taken from the source PDF so a page on screen is the page as
   it was set: 6x9in trim, 46.8pt side margins, EB Garamond at 13.5pt on a
   19.5pt line. Points converted at 96dpi (1pt = 4/3 px). */
:root {
  --page-w: 576px;      /* 432pt */
  --page-h: 864px;      /* 648pt */
  --page-mx: 62.4px;    /* 46.8pt */
  --page-mt: 57.9px;    /* 43.4pt */
  --page-mb: 44.3px;    /* 33.2pt */
  --page-fs: 18px;      /* 13.5pt */
  --page-lh: 1.444;     /* 19.5pt / 13.5pt */
}

/* ---------- Table of contents ---------- */

.toc-page main {
  max-width: 720px;
  padding: 0 2rem 4rem 2rem;
}

.toc-head {
  margin: 3.4rem 0 3.2rem 0;
  text-align: center;
}

.toc-book-title {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #bcd2e8;
  margin: 0 0 0.7rem 0;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.toc-book-sub {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 0.72rem;
  color: #8c98a6;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0;
}

.toc-section {
  margin-bottom: 1.2rem;
  border-top: 1px solid rgba(188, 210, 232, 0.28);
  padding-top: 1rem;
}

/* Section headings are set like the chapter entries beneath them. "The Posts"
   and "The Diary" were small uppercase labels, which made them look unrelated
   to "The Screenplay" and "Tertium Quid" - those two are single-chapter
   sections and so appear only as entries. */
.toc-section-title {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: #e8ecf0;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.4;
  margin: 0;
  padding: 0.75rem 0.6rem 0.75rem 0.2rem;
}

.toc-section-blurb {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 0.78rem;
  line-height: 1.8;
  color: #8c98a6;
  margin: 0 0 1.4rem 0;
  max-width: 46ch;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-item + .toc-item {
  border-top: 1px solid rgba(188, 210, 232, 0.12);
}

.toc-item a {
  display: flex;
  align-items: baseline;
  padding: 0.75rem 0.6rem 0.75rem 0.2rem;
  transition: background 0.18s ease, padding-left 0.18s ease;
}

.toc-item a:hover,
.toc-item a:focus-visible {
  background: rgba(188, 210, 232, 0.07);
  padding-left: 0.7rem;
}

.toc-title {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  color: #e8ecf0;
  line-height: 1.4;
}

.toc-item a:hover .toc-title {
  color: #fff;
}

.toc-downloads {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  border-top: 1px solid rgba(188, 210, 232, 0.28);
  padding-top: 2rem;
}

/* The menu drops upward here: this control sits at the foot of the page. */
.toc-downloads .share-menu {
  top: auto;
  bottom: 115%;
}

/* ---------- Chapter reader ---------- */

.chapter-page main {
  max-width: 100%;
  padding: 0 1rem 4rem 1rem;
  width: 100%;
  box-sizing: border-box;
}

.chapter {
  margin-top: 3rem;
  max-width: var(--page-w);
  margin-left: auto;
  margin-right: auto;
}

.chapter-eyebrow {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8c98a6;
  margin: 0 0 0.9rem 0;
}

.chapter-eyebrow a:hover {
  color: #bcd2e8;
}

.chapter-title {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #bcd2e8;
  margin: 0 0 2rem 0;
  line-height: 1.15;
}

/* ---------- The book ----------
   One .book-page per physical page of the source PDF, stacked to scroll.

   Geometry and typography are lifted from the build that produced the PDF
   (DreamingTogether_build/styles/book.css + pdf.css), which Chromium rendered
   at 6x9in with 0.6in/0.75in print margins and 0.65in body padding. The same
   numbers and the same font files give the same line breaking, so a page here
   ends where the printed page ends.

   The text is real text - selectable, searchable, indexable. */

/* The page is measured in em throughout, and its font-size is derived from the
   width of .book — so every dimension on it (measure, margins, folio, the
   formula, the screenplay indent, and the generator's own baseline offsets)
   is one number times the same scale. Set the scale and the whole page
   follows, which is what makes a phone show the printed page shrunk to fit
   rather than the printed text reflowed into a narrower column.

   32em is the 6in trim at 13.5pt (576px / 18px), so on a desktop where .book
   is 576px wide the page comes out at exactly 18px and nothing about the
   existing setting moves. */
.book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  container-type: inline-size;
}

.book-page {
  font-size: calc(100cqi / 32);
  /* Android Chrome inflates small text on its own ("font boosting"), which
     would pull the type off the geometry the rest of the page is built on. */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  width: 32em;              /* 6in trim */
  min-height: 48em;         /* 9in trim; min- so a page can never clip itself */
  box-sizing: border-box;
  position: relative;
  background: #000;
  color: #ededed;
  border-radius: 2px;
  /* 0.6in top / 0.75in bottom print margin, 0.65in body inset each side */
  padding: 3.2em 3.46667em 4em 3.46667em;
  /* An outline, not a border: a border sits inside the border box and would
     take 2px off the measure, which is enough to push a word onto a new line
     and knock the page out of step with the printed one. */
  border: 0;
  outline: 1px solid rgba(188, 210, 232, 0.16);
  outline-offset: -1px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45);
}

/* Folio: centred, 36pt up from the foot, EB Garamond 9.5pt - the same stamp
   render_pdf.py applies in its PyMuPDF post-pass. */
.book-page-num {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-size: 0.70556em;     /* 9.5pt against the page's 13.5pt */
  /* em on `bottom` resolves against this element's own size, so 36pt up from
     the foot is 45px / 12.7px. */
  bottom: 3.5433em;
  line-height: 1;
  color: #cccccc;
  user-select: none;
}

.book-page-body {
  font-family: 'EB Garamond', 'Noto Serif KR', Georgia, 'Times New Roman', serif;
  font-size: 1em;           /* the page's own 13.5pt; see .book-page */
  line-height: 1.42;
  text-align: justify;
  /* manual, not auto: the only division points are the soft hyphens the
     generator carried over from the typesetting, so every browser breaks the
     lines where the printed page breaks them instead of guessing from a
     hyphenation dictionary it may or may not have. */
  -webkit-hyphens: manual;
  hyphens: manual;
  text-wrap: pretty;
}

/* Novel setting: indented first line, no gap between paragraphs. */
.book-page-body p {
  margin: 0;
  text-indent: 1.4em;
}

/* A page opening mid-sentence is not a new paragraph, and nothing is indented
   directly after a heading. */
.book-page-body p.cont,
.book-page-body p:first-child,
.book-page-body .part + p,
.book-page-body .post + p,
.book-page-body .diary-date + p,
.book-page-body .scene-title + p,
.book-page-body .display + p,
.book-page-body .code + p {
  text-indent: 0;
}

/* ---------- Headings, exactly as book.css sets them ----------
   Keyed on class rather than tag so the heading level can follow the document
   outline while the setting still comes from the book. */

.book-page-body .part {
  text-align: center;
  font-weight: normal;
  font-size: 1.7em;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 2.2em 0 1.4em;
  color: #f6f6f6;
  text-indent: 0;
}

.book-page-body .scene-title {
  font-family: 'Courier Prime', 'Courier New', monospace;
  text-transform: uppercase;
  font-size: 1.15em;
  letter-spacing: 0;
  font-weight: normal;
  line-height: 1.25;
  margin: 0.67em 0;
  color: #f6f6f6;
  text-indent: 0;
}

.book-page-body .post {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 0.8em;
  font-weight: normal;
  color: #e6e6e6;
  margin: 2.2em 0 0.9em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #444;
  text-align: left;
  word-break: break-all;
  text-indent: 0;
}

.book-page-body .diary-date {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 1.15em;
  font-weight: normal;
  color: #f0f0f0;
  margin: 2em 0 0.9em;
  text-indent: 0;
}

.book-page-body .display {
  text-indent: 0;
  line-height: 1.3;
  margin: 1.1em 0;
}

/* Cipher / source listing */
.book-page-body .code {
  font-family: 'Courier Prime', 'Courier New', monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #161616;
  color: #d2d2d2;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 0.7em 1em;
  margin: 1.1em 0;
  font-size: 0.74em;
  line-height: 1.38;
  text-align: left;
  text-indent: 0;
}

/* .sr-only now lives in style.css, which every page loads and which is always
   loaded before this file. The chapter pages use it for the same reason they
   always did: the heading is kept for the document outline but not shown,
   because the page already carries its title in the book's own setting. */

/* The page itself needs no breakpoint any more - it is sized from .book, which
   .chapter caps at the 576px trim. All that changes with the window is how
   much gutter is left around it. */
@media (min-width: 760px) {
  .chapter-page main {
    padding: 0 2rem 4rem 2rem;
  }
}

.chapter-body {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  color: #dfe5ec;
}
/* Chapters whose text is not published yet have very little in them, so keep
   their vertical rhythm tight rather than leaving a hole above the footer. */
.chapter-pending {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 0.8rem;
  line-height: 1.9;
  color: #8c98a6;
  border-left: 2px solid rgba(188, 210, 232, 0.28);
  padding-left: 1.1rem;
  margin: 0;
}

.chapter-body:has(.chapter-pending) + .chapter-nav,
.chapter-body:has(.chapter-pending) ~ .chapter-nav {
  margin-top: 2.2rem;
}

.chapter-pending code {
  color: #bcd2e8;
  font-size: 0.95em;
}

.chapter-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 2.4rem;
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bcd2e8;
  transition: color 0.18s;
}

.chapter-pdf::before {
  content: "□";
  font-size: 0.9em;
  line-height: 1;
}

.chapter-pdf:hover {
  color: #f8f8f8;
}

.chapter-pdf:hover::before {
  content: "■";
}

/* ---------- Floating page tracker ---------- */

#page-indicator {
  position: fixed;
  /* Tucked just under the nav rather than down over the text: it is an
     overlay, and at 72px it sat across the first lines of a page. */
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(20, 27, 36, 0.94);
  border: 1px solid rgba(188, 210, 232, 0.18);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: #cfd8e2;
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* .show is set by reader.js once a page is actually in view */
#page-indicator.show {
  opacity: 1;
  pointer-events: auto;
}

#page-indicator[hidden] { display: none; }

.bookmark-btn {
  background: #3b5a92;
  border: none;
  padding: 5px 9px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  transition: background 0.2s;
  white-space: nowrap;
}

.bookmark-btn:hover { background: #4466a8; }

@media (max-width: 600px) {
  #page-indicator {
    top: auto;
    bottom: 12px;
    font-size: 0.6rem;
    padding: 6px 10px;
  }
}

/* ---------- Prev / next ---------- */

.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  border-top: 1px solid rgba(188, 210, 232, 0.28);
  padding-top: 1.6rem;
}

.chapter-step {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(188, 210, 232, 0.18);
  border-radius: 10px;
  transition: border-color 0.18s, background 0.18s, transform 0.14s;
}

.chapter-step:hover {
  border-color: #bcd2e8;
  background: rgba(188, 210, 232, 0.06);
  transform: translateY(-2px);
}

.chapter-step.next {
  text-align: right;
  align-items: flex-end;
}

.chapter-step.disabled {
  border-color: transparent;
  pointer-events: none;
}

.step-label {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6f7f90;
}

.step-title {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  color: #e8ecf0;
}

.chapter-step:hover .step-title {
  color: #fff;
}

.chapter-contents {
  text-align: center;
  margin-top: 2rem;
}

.chapter-contents a {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8c98a6;
  transition: color 0.18s;
}

.chapter-contents a:hover {
  color: #bcd2e8;
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
  .toc-page main,
  .chapter-page main {
    padding: 0 1.25rem 3rem 1.25rem;
  }
  .toc-book-title {
    font-size: 2rem;
  }
  .chapter-title {
    font-size: 1.6rem;
  }
  .chapter-nav {
    flex-direction: column;
  }
  .chapter-step.next {
    text-align: left;
    align-items: flex-start;
  }
}

/* ---- Choose-your-own-adventure ----
   The end of the book turns its numbered choices into links. In the PDF these
   are link annotations over the numerals; on the web they are real anchors. */
/* Plainly blue, so a choice reads as clickable against the body text. */
.cyoa-link {
  color: #6aa8ff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  border-radius: 3px;
  padding: 0 0.12em;
  font-weight: 400;
  transition: background 0.15s ease, color 0.15s ease;
}

.cyoa-link:visited {
  color: #9d8cff;
}

.cyoa-link:hover,
.cyoa-link:focus-visible {
  color: #fff;
  background: rgba(106, 168, 255, 0.28);
}

/* The landing point for a choice. Takes no space, but offsets the scroll so
   the destination is not hidden under the page indicator. */
.cyoa-anchor {
  display: block;
  height: 0;
  /* Clears the page tracker, which now sits close to the top of the window. */
  scroll-margin-top: 3.5rem;
}

/* A freshly jumped-to passage flashes briefly, so the reader can see where
   the choice landed them. */
.cyoa-anchor:target + * {
  animation: cyoa-land 1.4s ease-out 1;
}

@keyframes cyoa-land {
  from { background: rgba(188, 210, 232, 0.20); }
  to   { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .cyoa-anchor:target + * { animation: none; }
}

/* ---- Screenplay ----
   EXT. THE WAITING ROOM is set as a screenplay: action flush to the margin,
   dialogue indented, character names centred. Geometry taken from the PDF —
   Courier Prime 12.7pt, dialogue indented 64.3pt, names centred on the
   measure — so the page reads as it is set in the book. Line breaks are the
   typesetter's and are preserved. */
.book-page-body .sp-action,
.book-page-body .sp-dialogue,
.book-page-body .sp-character {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 0.94em;
  line-height: 1.3;
  text-indent: 0;
  margin: 0;
  white-space: normal;
  /* A screenplay is set ragged right in a monospaced face; the surrounding
     prose is justified, and inheriting that stretches the spaces. */
  text-align: left;
  hyphens: manual;
}

.book-page-body .sp-action {
  margin: 1.1em 0 0 0;
}

.book-page-body .sp-character {
  text-align: center;
  margin: 1.1em 0 0 0;
}

/* Dialogue follows its character name with no gap, as on the page. */
.book-page-body .sp-character + .sp-dialogue {
  margin-top: 0;
}

/* 64.3pt, against this element's own 12.7pt - so the indent scales with the
   page and the screenplay holds its shape at every width. */
.book-page-body .sp-dialogue {
  margin: 1.1em 0 0 0;
  padding-left: 5.065em;
}

/* ---- Display figure ----
   The contentment equation is drawn as vector paths in the PDF, so extraction
   sees nothing where it sits. The same SVG the book build produced is inlined
   here; it is filled with currentColor, so it takes the page's text colour
   instead of coming out black on black.

   Two things have to hold at once.

   The size is the PDF's. There, .math-display is pulled 0.38in out into each
   margin (pdf.css) and the SVG fills that, so the formula is set wider than
   the measure - 29.12em against the text's 25.07em - and reads a little
   larger than the type around it. Constraining it to the measure instead had
   it come out smaller than the text it belongs to.

   The height must not be its own. The generator already gives the paragraph
   after a figure the exact top offset the printed page uses, which reserves
   the space the formula occupies there. Left in the flow the figure adds its
   height on top of that reserved gap and the page runs long. Taking it out of
   the flow lets it sit inside the gap that is already there, so the page ends
   where every other page ends. The one figure in the book opens its page, so
   the top of the text block is where it goes. */
.book-figure {
  position: absolute;
  top: 3.2em;                    /* the page's top print margin */
  left: 3.46667em;               /* the body inset ... */
  right: 3.46667em;              /* ... on both sides */
  margin: 0 -2.02667em;          /* then out 0.38in again, as the PDF does */
  padding: 0;
  text-align: center;
}

.book-figure svg {
  display: block;
  width: 100%;
  height: auto;
  color: #ededed;
}

/* ---- Sub/superscripts ----
   Set from the book's own subscripted variables. Kept small and tight so a
   subscripted line does not open up the leading around it. */
.book-page-body sub,
.book-page-body sup {
  font-size: 0.68em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.book-page-body sub { bottom: -0.28em; }
.book-page-body sup { top: -0.45em; }