/* ============================================================
   chapters.css — table of contents + chapter reader
   Loaded after style.css by manifesto.html and chapter/*.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 ---------- */

/* The contents page is two columns now - cover left, chapters right - so it
   needs the width for both. The right-hand column is still held to a readable
   measure by .toc-contents below; this only widens the frame around it. */
.toc-page main {
  max-width: 1180px;
  padding: 0 2rem 4rem 2rem;
}

/* Cover and contents. The cover column is the wider of the two: the book's
   face is the point of this page, and the chapter list is a column of short
   links that gains nothing from extra width. */
.toc-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: start;      /* so the sticky column can move independently */
  margin-top: 2rem;
}

/* How much vertical room the cover gives up to everything above and below it.
   The cover has to fit the FIRST screen, not the pinned one: before you scroll,
   it sits below the nav and below the layout's top margin, so sizing it to the
   pinned geometry (100vh - 2x the sticky offset) ran it 47px off the bottom of
   a 14in laptop until you scrolled. This covers the nav, that margin and a gap
   beneath, so the whole jacket is on screen at rest - and it is then
   comfortably inside the viewport once pinned. */
:root {
  --toc-cover-inset: 9rem;
}

/* Sticky through the whole scroll. `align-items:start` above is what makes
   this work: a stretched grid item is full-height and has nothing to travel
   against, and position:sticky would silently do nothing. */
.toc-cover {
  position: sticky;
  top: 1.5rem;
  height: calc(100vh - var(--toc-cover-inset));
  display: flex;
  align-items: center;
  justify-content: center;
}

.toc-cover img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* contain, never cover: this is a book jacket with text on it, and cropping
     it to fill the column would cut the title. */
  object-fit: contain;
  display: block;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.75);
  border-radius: 2px;
}

/* Holds the chapter list to a comfortable measure inside its column. */
.toc-contents {
  min-width: 0;
  max-width: 34rem;
}

/* This page's footer carries the counters as well as the copyright, so the two
   need the space between them that the landing page sets inline. Scoped to
   .toc-page rather than added to `footer` in style.css: gap is inert in a
   footer with one child, which is every other page except the thread pages -
   and those put their notice straight into the footer as a second child and
   would quietly take the space too.

   The min-width query is load-bearing, not tidiness. style.css stacks the
   footer into a column with `gap: 0.6rem` below 900px, but it does that from a
   bare `footer` selector - and `.toc-page footer` is more specific, so an
   unguarded rule here would beat the media query and widen the stacked gap on
   phones. Specificity outranks source order; the query is what keeps this rule
   out of the width where the other one is meant to win. */
@media (min-width: 901px) {
  .toc-page footer {
    gap: 1.5rem;
  }
}

/* One column below this width - there is no room for a cover beside the list.
   The cover goes on top, capped so it reads as a jacket without pushing the
   chapters off the first screen, and it stops being sticky: a pinned banner
   would permanently spend vertical space a phone does not have. */
@media (max-width: 900px) {
  .toc-layout {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin-top: 2rem;
  }
  /* 45vh here was very nearly half the screen and buried the chapter list
     under it. A third reads as a jacket at the head of the contents without
     the list starting below the fold. */
  .toc-cover {
    position: static;
    height: auto;
    max-height: 32vh;
  }
  .toc-cover img {
    max-height: 32vh;
  }
  .toc-contents {
    max-width: none;
  }
}

/* .toc-head / .toc-book-title / .toc-book-sub were the set title and subtitle
   above the contents. The cover carries both now, so they are gone rather than
   left behind as rules nothing selects. */

.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;
  /* Symmetric padding: the old 0.2rem left / 0.6rem right was there to align a
     left-set heading with the entries under it. Centred, uneven padding pulls
     the text visibly off axis. */
  padding: 0.75rem 0.6rem;
  text-align: center;
}

.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 auto 1.4rem auto;
  max-width: 46ch;
  text-align: center;
}

.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;
  justify-content: center;
  padding: 0.75rem 0.6rem;
  transition: background 0.18s ease;
}

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

.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
   (the book build's 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 carrying on the previous page's paragraph is not a new paragraph, and
   nothing is indented directly after a heading. Only .cont is flush here: a
   page that opens a paragraph of its own indents it, exactly as the book does,
   which a blanket :first-child rule would flatten. */
.book-page-body p.cont,
.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;
  /* The book sets it as h1.part.scene-title, so it takes .part's centring. */
  text-align: center;
}

/* The heading wraps onto two printed lines, which extraction brings back as
   two blocks. They are one heading on the page: no gap between them. */
.book-page-body .scene-title:has(+ .scene-title) {
  margin-bottom: 0;
}

.book-page-body .scene-title + .scene-title {
  margin-top: 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;
  }
  .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;
}

/* A speech carried on into a new paragraph under the same name: the book
   leaves 6pt between them, not the gap that opens a new element. */
.book-page-body .sp-dialogue + .sp-dialogue {
  margin-top: 0.472em;
}

/* ---- 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; }

/* ============================================================
   Light page (paper) mode
   ============================================================
   The site chrome stays dark. The only thing that changes is the reading
   box - .book-page and what is set on it - so a chapter can be read as black
   type on white without the rest of the page moving. That is the whole
   contract: colour only. Nothing below touches a size, a margin, a line
   height or a font, because the page geometry is what keeps a screen page
   ending where the printed page ends, and a theme has no business in it.

   The switch is a class on <html>, not <body>, so the inline script in each
   chapter's <head> can set it before the first paint. Setting it on <body>
   would mean waiting for <body> to exist and the reader would see the dark
   page flash white.

   The colours are the ones the white PDF is set in, so the two editions of
   the same page agree. */

html.paper .book-page {
  background: #ffffff;
  color: #111111;
  outline-color: rgba(20, 28, 38, 0.22);
}

html.paper .book-page-num {
  color: #666666;
}

html.paper .book-page-body .part,
html.paper .book-page-body .scene-title,
html.paper .book-page-body .diary-date {
  color: #000000;
}

html.paper .book-page-body .post {
  color: #1a1a1a;
  border-bottom-color: #c9c9c9;
}

html.paper .book-page-body .code {
  background: #f4f4f2;
  color: #2a2a2a;
  border-color: #dcdcd8;
}

/* The formula is filled with currentColor, so it follows the page on its own -
   but .book-figure svg sets that colour explicitly for the dark page and has
   to be told again here. */
html.paper .book-figure svg {
  color: #111111;
}

/* The choice links need a blue that carries on white. The dark page's #6aa8ff
   is close to invisible there. */
html.paper .cyoa-link {
  color: #1a4fbf;
}

html.paper .cyoa-link:visited {
  color: #6b3fa0;
}

html.paper .cyoa-link:hover,
html.paper .cyoa-link:focus-visible {
  color: #000000;
  background: rgba(26, 79, 191, 0.18);
}

/* The landing flash is a background colour, so it needs its own keyframes
   rather than an override - an animation cannot be recoloured by a later rule. */
html.paper .cyoa-anchor:target + * {
  animation: cyoa-land-paper 1.4s ease-out 1;
}

@keyframes cyoa-land-paper {
  from { background: rgba(26, 79, 191, 0.16); }
  to   { background: transparent; }
}

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

/* ---------- The switch ----------
   Set like #page-indicator, because it is the same kind of object: a small
   fixed control floating over the reading column. It differs in being always
   visible - the page tracker earns its way in by being scrolled to, but a
   reader who wants the light page wants it on page one. */

.theme-toggle {
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  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);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}

.theme-toggle:hover {
  color: #ffffff;
  border-color: rgba(188, 210, 232, 0.4);
}

.theme-toggle:focus-visible {
  outline: 2px solid #bcd2e8;
  outline-offset: 2px;
}

.theme-icon {
  font-size: 0.9em;
  line-height: 1;
}

/* Without JS the class on <html> can never change, so the control would be a
   button that does nothing. It is written into the markup hidden and revealed
   by theme.js, which is the only thing that can honour it. */
.theme-toggle[hidden] { display: none; }

@media (max-width: 600px) {
  /* The page tracker moves to the bottom centre on a phone; this sits with it
     rather than over the nav. */
  .theme-toggle {
    top: auto;
    bottom: 12px;
    right: 10px;
    font-size: 0.6rem;
    padding: 6px 10px;
  }
}