/* chapter/reading.css — the reading contract.
 *
 * Unlayered and loaded after every other chapter sheet, so it is the last
 * word on how a chapter *reads*: one centred measure for the whole flow,
 * the story before the apparatus, plain words for readers and Spw for
 * scribes, and a handful of platform features (view transitions, text
 * fragments, popover contents) that only a web page can offer a book.
 *
 * Map:
 *   0. The nook: page edge, coziness, texture
 *   1. Type & measure        4. Chapter end          7. Dock, contents, resume
 *   2. The head              5. Top bar               8. Line links, targets
 *   3. Sections & voices     6. Rail: reader/scribe   9. Page turns (view transitions)
 */

/* ─── 0. The nook ───────────────────────────────────────────────────────
 * One knob for density: --cozy (0.6 snug … 1.5 roomy, set by the Reading
 * nook panel and the head script) multiplies every gap and pad below, and
 * nudges the leading. The page itself has no margin — the reading surface
 * runs to the window's edge, separated only by a hairline gutter that
 * breathes with coziness. Texture is the noise dial: data-nook-texture is
 * plain | soft | lively, --nook-texture is the continuous 0…1 value. */

html {
  --cozy: 1;
  --nook-texture: 0.6;
  --nook-gutter: calc(0.4rem * var(--cozy));
}

body:has(> main.chapter) {
  padding: var(--nook-gutter);
  gap: calc(0.75rem * var(--cozy));
}

body:has(> main.chapter) > :is(nav.chapter-navigation, .section-navigation, main, aside, footer) {
  width: 100%;
  max-width: none;
}

@media (min-width: 70rem) {
  body:has(> main.chapter):has(> aside) {
    grid-template-columns: 0 minmax(0, 1fr) clamp(17rem, 21vw, 23rem) 0;
    column-gap: var(--nook-gutter);
    row-gap: calc(0.6rem * var(--cozy));
  }

  body:has(> main.chapter):has(> aside) > aside {
    top: calc(var(--scroll-pad-top, 4.75rem) - 0.5rem);
    gap: calc(var(--spacing-small) * var(--cozy));
  }
}

/* A phone is the page: no gutter at all, and the bar and dock run edge to edge. */
@media (max-width: 39.99rem) {
  body:has(> main.chapter) {
    padding: 0;
    gap: 0.35rem;
  }

  body:has(> main.chapter) > :is(nav.chapter-navigation, .section-navigation, main.chapter, aside) {
    border-radius: 0;
    border-inline: 0;
  }

  body:has(> main.chapter) > nav.chapter-navigation {
    border-top: 0;
  }
}

html body main#chapter-content {
  padding: calc(clamp(0.9rem, 2.4vw, 1.9rem) * var(--cozy)) calc(clamp(1rem, 3vw, 2.4rem) * var(--cozy));
  --chapter-flow-gap: calc(0.86rem * var(--cozy));
  --chapter-line-height: calc(1.44 + 0.3 * var(--cozy));
}

/* Texture: plain paper drops the grain, glows and tints; soft keeps the
 * grain faint; lively is the room as it was designed. */
body:has(> main.chapter)::before {
  opacity: calc(var(--nook-texture) * 1.2);
}

body:has(> main.chapter)::after {
  opacity: var(--nook-texture);
}

html[data-nook-texture="plain"] body:has(> main.chapter) {
  background: var(--bg-color-main);
}

html[data-nook-texture="plain"] :is(main.chapter, aside, nav.chapter-navigation, .section-navigation) {
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-nook-texture="plain"] main.chapter > [data-ebook-section] {
  background: transparent;
  box-shadow: none;
}

html[data-nook-texture="plain"] main.chapter > [data-ebook-section]::before {
  opacity: 0.25;
}

html[data-nook-texture="plain"] main.chapter::before,
html[data-nook-texture="plain"] .reading-ref-whisper {
  display: none;
}

html[data-nook-texture="soft"] main.chapter > [data-ebook-section].is-ebook-active {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--theme-accent-main) 50%, transparent);
}

/* ─── 1. Type & measure ─────────────────────────────────────────────────
 * Every block in the flow shares one centred column. The prose inside a
 * section is --chapter-measure wide; the block around it adds only its
 * own padding. Wide things (figures, the turn) may step out a little. */

main.chapter {
  --flow-pad: calc(clamp(0.6rem, 1.6vw, 1.1rem) * var(--cozy, 1));
  --flow-width: min(100%, calc(var(--chapter-measure, 66ch) + var(--flow-pad) * 2));
  --flow-wide: min(100%, calc(var(--chapter-measure, 66ch) + 10rem));
}

main.chapter > * {
  margin-inline: auto;
  max-width: var(--flow-width);
}

main.chapter > :is(figure, .chapter-turn) {
  max-width: var(--flow-wide);
}

main.chapter [data-ebook-section] p,
main.chapter [data-ebook-section] blockquote {
  max-width: none;
}

@media (min-width: 70rem) {
  main.chapter {
    font-size: calc(1.1rem * var(--reader-scale, 1));
  }
}

@media (min-width: 100rem) {
  main.chapter {
    font-size: calc(1.16rem * var(--reader-scale, 1));
  }
}

@media (max-width: 39.99rem) {
  main.chapter {
    font-size: calc(1.0625rem * var(--reader-scale, 1));
    --flow-pad: calc(0.6rem * var(--cozy, 1));
  }
}

/* ─── 2. The head ───────────────────────────────────────────────────────
 * Kicker, title, "in which", epigraph — centred like a book's chapter
 * opening, and short enough on a phone that the first sentence of the
 * story is on the first screen. */

/* reset.css makes every [data-component] an inline-size container, which
 * zeroes the intrinsic width of anything centred or flexed. These pieces
 * size to their content, so they opt out. */
main.chapter .chapter-head,
main.chapter .chapter-head > *,
main.chapter .chapter-colophon,
main.chapter .chapter-colophon *,
main.chapter .chapter-route-rail,
.section-meta > *,
.ebook-nav-panel,
.ebook-toc,
.ebook-toc > li {
  container-type: normal;
}

main.chapter > .chapter-head {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: calc(clamp(1rem, 4vw, 2.6rem) * var(--cozy, 1)) 0 calc(clamp(0.6rem, 2.4vw, 1.4rem) * var(--cozy, 1));
  text-align: center;
  container-type: normal;
}

body main.chapter .chapter-head h1 {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2.1rem, 5vw, 3.3rem) !important;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--color-accent-alt);
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
}

.chapter-head .chapter-kicker {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-family-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-gold, #c4922e) 70%, var(--color-accent-main));
}

.chapter-head .chapter-title-text {
  display: block;
}

main.chapter .chapter-head .chapter-in-which {
  margin: 0;
  max-width: 34ch;
  font-style: italic;
  font-size: 1.08em;
  color: var(--color-text-alt);
  text-wrap: balance;
}

main.chapter .chapter-head .chapter-epigraph {
  margin: 0.6rem 0 0;
  max-width: 40ch;
  padding: 0.85rem 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-gold, #c4922e) 45%, transparent);
  background: none;
  font-size: 0.95em;
  font-style: italic;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text-alt) 88%, var(--color-accent-main));
  text-wrap: balance;
}

/* ─── 3. Sections & voices ─────────────────────────────────────────── */

main.chapter > [data-ebook-section] {
  padding-inline: var(--flow-pad);
}

main.chapter > * + [data-ebook-section] {
  margin-top: calc(clamp(1.4rem, 3.5vw, 2.4rem) * var(--cozy, 1));
}

main.chapter section > h2 {
  margin-top: 0.3rem;
}

/* Marks and the scene toggle share one quiet line under the heading. */
.section-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0.15rem 0 0.9rem;
}

.section-meta .section-marks {
  margin: 0;
}

.section-meta .scene-sketch {
  margin: 0;
  flex: 0 1 auto;
  border-style: solid;
  border-color: color-mix(in srgb, var(--theme-accent-main, #2a6f7f) 22%, transparent);
  border-radius: 999px;
  background: transparent;
}

.section-meta .scene-sketch[open] {
  flex-basis: 100%;
  border-radius: var(--border-radius-small);
  border-style: dashed;
  background: color-mix(in srgb, var(--theme-paper, #fffcf6) 88%, transparent);
}

.section-meta .scene-sketch > summary {
  padding: 0.22rem 0.75rem;
  font-size: 0.72rem;
  cursor: pointer;
}

/* Voices sit in the same column as the prose around them. */
main.chapter > [data-voice-shape="block"] {
  padding: calc(0.9rem * var(--cozy, 1)) var(--flow-pad) calc(1rem * var(--cozy, 1));
}

/* The references whisper becomes marginalia — only where there is margin. */
.reading-ref-whisper {
  display: none !important;
}

@container chapter-main (min-width: 62rem) {
  main.chapter > [data-ebook-section] > .reading-ref-whisper {
    display: block !important;
    left: calc(100% + 1.4rem);
    width: 10.5rem;
    opacity: 0.86;
  }
}

/* ─── 4. Chapter end: mark, turn, slip, colophon, doors ───────────────── */

main.chapter > .chapter-end-mark {
  margin-block: clamp(1.8rem, 5vw, 3rem) 0.4rem;
  text-align: center;
  font-size: 1.35rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-gold, #c4922e) 78%, var(--color-accent-main));
  text-indent: 0;
}

main.chapter > .chapter-turn {
  margin-top: clamp(1rem, 3vw, 1.6rem);
}

.chapter-turn-link {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: clamp(1.1rem, 3.4vw, 1.8rem) clamp(1rem, 4vw, 2.4rem);
  border: 1px solid color-mix(in srgb, var(--color-accent-main) 26%, var(--border-color-main));
  border-radius: 0.9rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--color-gold, #c4922e) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--theme-paper) 92%, var(--color-accent-main) 3%);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 10px 30px color-mix(in srgb, var(--color-accent-main) 9%, transparent);
  transition: transform 180ms ease, box-shadow 200ms ease, border-color 180ms ease;
}

.chapter-turn-link:hover,
.chapter-turn-link:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-gold, #c4922e) 55%, var(--color-accent-main));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 16px 36px color-mix(in srgb, var(--color-accent-main) 14%, transparent);
}

.chapter-turn-kicker {
  font-family: var(--font-family-heading);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-main);
}

.chapter-turn-title {
  font-family: var(--chapter-display, Georgia, serif);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  line-height: 1.15;
  color: var(--color-accent-alt);
  text-wrap: balance;
}

.chapter-turn-number {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-family-heading);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-gold, #c4922e) 70%, var(--color-accent-main));
}

.chapter-turn-in-which {
  max-width: 38ch;
  font-style: italic;
  color: var(--color-text-alt);
  text-wrap: balance;
}

.chapter-turn-link::after {
  content: "Read on →";
  margin-top: 0.35rem;
  font-family: var(--font-family-heading);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-accent-main);
}

main.chapter > .scriptorium-slip {
  max-width: min(100%, 36rem);
}

main.chapter > .chapter-colophon {
  display: grid;
  gap: 0.6rem;
  margin-top: clamp(1.4rem, 4vw, 2.2rem);
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border-color-main) 55%, transparent);
  font-size: 0.9rem;
}

.chapter-colophon .chapter-topic-row {
  margin: 0;
  align-items: center;
  max-width: none;
}

.chapter-threads-label {
  margin-right: 0.2rem;
  font-family: var(--font-family-heading);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-main);
}

main.chapter .chapter-colophon .chapter-byline {
  display: block;
  margin: 0;
  max-width: none;
  font-size: 0.88rem;
  color: var(--color-text-alt);
}

.chapter-colophon .chapter-pillars {
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

main.chapter > .chapter-route-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

main.chapter > .chapter-route-rail .chapter-route-rail-label {
  flex: 1 0 100%;
  max-width: none;
}

main.chapter > .chapter-route-rail .chapter-route-card {
  flex: 1 1 10rem;
}

/* ─── 5. Top bar: real links, sized to fit a phone ───────────────────── */

nav.chapter-navigation :is(a.prev, a.next) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.4rem 0.8rem;
  border: var(--interactive-border);
  border-radius: var(--interactive-radius, 999px);
  background: var(--color-accent-gradient);
  color: var(--color-text-content, #fff);
  font-family: var(--font-family-heading);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--interactive-transition);
}

nav.chapter-navigation :is(a.prev, a.next):hover,
nav.chapter-navigation :is(a.prev, a.next):focus-visible {
  outline: 2px solid var(--interactive-outline);
  outline-offset: 2px;
  box-shadow: var(--interactive-shadow-hover);
  transform: translateY(-1px);
}

nav.chapter-navigation .hub-home {
  margin-right: auto;
}

nav.chapter-navigation[data-edge="first"] a.prev {
  display: none;
}

@media (max-width: 24rem) {
  nav.chapter-navigation .nav-word {
    display: none;
  }
}

aside a.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-decoration: none;
}

/* ─── 6. Rail: reader tier, scribe's desk ───────────────────────────────
 * Readers get what reading needs: the seal, the contents, text size,
 * references, field notes, the doors. Everything that shows how the
 * chapter is *made* waits behind the scribe's desk (the "engineer"
 * register in ebook-navigation.mjs). A whitelist, so a new instrument
 * lands on the desk by default instead of in a reader's way. */

html:not([data-ebook-register="engineer"]):not([data-switch-full-rail="on"]) aside > :not(
  .chamber-seal-mount,
  .ebook-nav-panel,
  .reader-scale-controls,
  .reading-nook,
  .reading-switches,
  .xray-panel,
  .reading-ref,
  #lore-button,
  #lore-collector,
  .additional-links,
  .primary-action,
  .chapter-tuning-controls
) {
  display: none !important;
}

html:not([data-ebook-register="engineer"]):not([data-switch-full-rail="on"]) .ebook-rail-zone--engineer {
  display: none;
}

aside .chamber-seal-mount { order: 0; }
aside .ebook-nav-panel { order: 1; }
aside .reader-scale-controls { order: 2; }
aside .reading-nook { order: 2; }
aside .reading-switches { order: 2; }
aside .xray-panel { order: 2; }
aside .reading-ref { order: 3; }
aside #lore-button,
aside ul#lore-collector { order: 4; }
aside .chapter-tuning-controls { order: 5; }
aside .primary-action { order: 6; }
aside .additional-links { order: 7; }
aside > :not(.chamber-seal-mount, .ebook-nav-panel, .reader-scale-controls, .reading-nook, .reading-switches, .xray-panel, .reading-ref, #lore-button, #lore-collector, .chapter-tuning-controls, .primary-action, .additional-links) {
  order: 10;
}

/* Reader contents: number + title, not a handle. */
html:not([data-ebook-register="engineer"]) .ebook-toc > li {
  display: block;
  width: 100%;
  min-width: 0;
}

html:not([data-ebook-register="engineer"]) .ebook-toc {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

html:not([data-ebook-register="engineer"]) .ebook-toc-link {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  align-items: baseline;
  width: 100%;
  padding: 0.38rem 0.5rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--color-text-main);
  font-family: var(--font-family-body);
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: none;
  transform: none;
}

html:not([data-ebook-register="engineer"]) .ebook-toc-link:hover,
html:not([data-ebook-register="engineer"]) .ebook-toc-link:focus-visible {
  background: color-mix(in srgb, var(--color-accent-main) 8%, transparent);
  outline-offset: 0;
  transform: none;
}

html:not([data-ebook-register="engineer"]) .ebook-toc-link[aria-current="true"] {
  background: color-mix(in srgb, var(--color-gold, #c4922e) 14%, transparent);
  color: var(--color-accent-alt);
}

.ebook-toc-number,
.chapter-contents-number {
  font-family: var(--font-family-heading);
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-gold, #c4922e) 72%, var(--color-accent-main));
}

html:not([data-ebook-register="engineer"]) .ebook-nav-panel :is(.ebook-nav-status, .ebook-nav-controls) {
  display: none;
}

.scribe-desk-toggle {
  justify-self: start;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px dashed color-mix(in srgb, var(--color-accent-main) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-main);
  font-size: 0.78rem;
  box-shadow: none;
}

.scribe-desk-toggle[aria-pressed="true"] {
  border-style: solid;
  background: color-mix(in srgb, var(--color-accent-main) 10%, transparent);
}

.scribe-desk-note {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-alt);
}

html[data-ebook-register="engineer"] .scribe-desk-note {
  display: none;
}

/* ─── 7. Dock, contents popover, resume ─────────────────────────────── */

.section-navigation .dock-word {
  font-family: var(--font-family-heading);
}

button.section-navigation-position {
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

button.section-navigation-position:hover,
button.section-navigation-position:focus-visible {
  background: color-mix(in srgb, var(--color-accent-main) 10%, transparent);
  transform: none;
}

.chapter-contents-popover {
  position: fixed;
  inset: auto 0.75rem calc(var(--scroll-pad-bottom, 5.5rem) + 0.25rem) auto;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(70dvh, 32rem);
  margin: 0;
  padding: 0.9rem 0.75rem 0.75rem;
  overflow: auto;
  border: var(--interactive-border);
  border-radius: 0.9rem;
  /* --theme-paper is translucent by design; a popover over prose must not be. */
  background: linear-gradient(var(--theme-paper, #fffcf6), var(--theme-paper, #fffcf6)), var(--bg-color-main, #f3ede1);
  color: var(--color-text-main);
  box-shadow: 0 24px 60px color-mix(in srgb, #0b1627 26%, transparent);
}

@media (min-width: 70rem) {
  .chapter-contents-popover {
    inset: auto auto calc(var(--scroll-pad-bottom, 5.5rem) + 0.25rem) 50%;
    translate: -50% 0;
  }
}

.chapter-contents-popover::backdrop {
  background: color-mix(in srgb, #0b1627 16%, transparent);
}

.chapter-contents-kicker {
  margin: 0 0 0.4rem 0.4rem;
  font-family: var(--font-family-heading);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-main);
}

.chapter-contents-list {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-contents-link {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  align-items: baseline;
  min-height: 2.6rem;
  padding: 0.5rem 0.55rem;
  border-radius: 0.55rem;
  color: inherit;
  font-family: var(--font-family-body);
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
}

.chapter-contents-link:hover,
.chapter-contents-link:focus-visible {
  background: color-mix(in srgb, var(--color-accent-main) 8%, transparent);
}

.chapter-contents-link[aria-current="true"] {
  background: color-mix(in srgb, var(--color-gold, #c4922e) 16%, transparent);
  color: var(--color-accent-alt);
}

.chapter-contents-all {
  display: block;
  margin: 0.5rem 0.55rem 0;
  font-family: var(--font-family-heading);
  font-size: 0.8rem;
  color: var(--color-accent-main);
}

.resume-offer {
  display: inline-grid;
  justify-items: center;
  gap: 0.1rem;
  margin-top: 0.8rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--color-gold, #c4922e) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-gold, #c4922e) 10%, var(--theme-paper, #fffcf6));
  color: var(--color-accent-alt);
  font-size: 0.85rem;
  box-shadow: none;
}

.resume-offer-kicker {
  font-family: var(--font-family-heading);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-main);
}

.resume-offer-target {
  font-family: var(--font-family-body);
  font-style: italic;
}

/* ─── 8. Line links and landing targets ─────────────────────────────── */

.line-share {
  position: fixed;
  z-index: 60;
  padding: 0.38rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent-alt, #1d3c4f);
  color: #fffcf6;
  font-size: 0.76rem;
  box-shadow: 0 8px 24px color-mix(in srgb, #0b1627 28%, transparent);
}

.line-share[hidden] {
  display: none;
}

/* A shared link lands on the exact words. */
::target-text {
  background: color-mix(in srgb, var(--color-gold, #c4922e) 38%, transparent);
  color: inherit;
}

main.chapter > [data-ebook-section]:target {
  scroll-margin-top: var(--scroll-pad-top, 4.75rem);
}

/* ─── 9. Page turns — cross-document view transitions ─────────────────
 * Chapter links are real anchors, so the browser can carry the reader
 * from page to page: the top bar holds still while the page turns. The
 * direction (forward/back) is set by the pagereveal hook in the template. */

@view-transition {
  navigation: auto;
}

nav.chapter-navigation {
  view-transition-name: chapter-bar;
}

@keyframes lore-turn-out {
  to { opacity: 0; translate: calc(var(--turn-dir, 1) * -2.5rem) 0; }
}

@keyframes lore-turn-in {
  from { opacity: 0; translate: calc(var(--turn-dir, 1) * 2.5rem) 0; }
}

::view-transition-old(root) {
  animation: 200ms cubic-bezier(0.4, 0, 1, 1) both lore-turn-out;
}

::view-transition-new(root) {
  animation: 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both lore-turn-in;
}

html:active-view-transition-type(back) {
  --turn-dir: -1;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@media print {
  .line-share,
  .resume-offer,
  .chapter-contents-popover,
  main.chapter > .chapter-turn,
  main.chapter > .chapter-route-rail {
    display: none !important;
  }

  main.chapter > * {
    max-width: none;
  }
}

/* ─── Reading nook panel ────────────────────────────────────────────── */

.reading-nook {
  display: grid;
  gap: calc(0.55rem * var(--cozy, 1));
  padding: 0.75rem;
  border: var(--interactive-border);
  border-radius: var(--border-radius-small);
  background: color-mix(in srgb, var(--theme-paper) 90%, var(--color-gold, #c4922e) 4%);
}

.reading-nook h2 {
  margin: 0;
  font-size: 0.95rem;
}

.reading-nook-dial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  margin: 0;
}

.reading-nook-name {
  font-family: var(--font-family-heading);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--color-accent-main);
}

.reading-nook-readout {
  justify-self: end;
  font-family: var(--font-family-body);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-text-alt);
}

.reading-nook-dial input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0.1rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: color-mix(in srgb, var(--color-gold, #c4922e) 70%, var(--color-accent-main));
}

.reading-nook-reset {
  justify-self: start;
  padding: 0.3rem 0.7rem;
  border: 0;
  background: transparent;
  color: var(--color-accent-main);
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}

/* Component name chips (spw.css) are structure talk — scribes only. */
html:not([data-ebook-register="engineer"]):not([data-switch-full-rail="on"]) aside [data-spw-component]::before {
  content: none;
}

/* ─── Boonberry canon (.spw/surfaces/enchantment.spw#boonberry_form) ────
 * A boonberry is a cluster of glassy teal drupelets, each keeping an
 * amber ember at its core. Boof's postage on the slip wears that form. */

main.chapter .scriptorium-slip::after {
  width: 0.66rem;
  height: 0.66rem;
  background:
    radial-gradient(circle at 50% 56%, #f4b25c 0 14%, #c86d2c 26%, transparent 44%),
    radial-gradient(circle at 34% 28%, #b8e3dc 0 8%, #4d9f97 34%, #235f5b 78%);
  box-shadow:
    -0.52rem 0.2rem 0 -0.05rem #2f7c76,
    -0.26rem -0.44rem 0 -0.07rem #3b8e87,
    0.3rem -0.36rem 0 -0.08rem #2a6f6a,
    -0.62rem -0.3rem 0 -0.12rem #1f5552,
    0 0 0.55rem 0.05rem color-mix(in srgb, #f4b25c 45%, transparent);
}

/* The texture dial's top end: vignette and grain, like the plate studies. */
html:not([data-nook-texture="plain"]) body main#chapter-content {
  box-shadow:
    var(--theme-shadow, var(--shadow-main)),
    inset 0 0 clamp(4rem, 12vw, 10rem) color-mix(in srgb, #14261c max(0%, calc((var(--nook-texture) - 0.45) * 26%)), transparent);
}

/* ─── Light: day · dusk · lamp (Reading nook "Light" dial) ─────────────
 * Palette from the boonberry studies: a leaf-dark room, warm paper text,
 * amber lit from within, teal kept for the second voice. Overrides the
 * base tokens, so every --color-* and --theme-* alias follows. */

html[data-nook-light="dusk"] {
  --bg-color-main: #e7dbc6;
  --bg-color-content: rgba(246, 237, 220, 0.93);
  --bg-color-content-strong: rgba(250, 243, 230, 0.97);
  --color-parchment-base: #e7dbc6;
  --glass-bg: rgba(246, 236, 218, 0.62);
  --glass-bg-strong: rgba(249, 241, 226, 0.82);
  --paper-fiber: rgba(120, 84, 40, 0.06);
  --paper-fiber-strong: rgba(120, 84, 40, 0.11);
}

html[data-nook-light="lamp"] {
  color-scheme: dark;
  --bg-color-main: #161d16;
  --bg-color-content: rgba(26, 38, 31, 0.94);
  --bg-color-content-strong: rgba(32, 46, 38, 0.97);
  --accent-color-main: #cdaa72;
  --accent-color-alt: #e6c98f;
  --accent-gradient: linear-gradient(130deg, #b87230 0%, #7c4a1e 100%);
  --text-color-main: #ecdfc4;
  --text-color-alt: #bcae93;
  --text-color-content: #fff4e2;
  --focus-outline-color: #f3cf94;
  --hover-bg-color: rgba(226, 165, 83, 0.14);
  --border-color-main: rgba(226, 180, 120, 0.2);
  --shadow-main: 0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 20px 44px rgba(0, 0, 0, 0.55);
  --glass-bg: rgba(26, 38, 31, 0.62);
  --glass-bg-strong: rgba(32, 46, 38, 0.82);
  --glass-border: rgba(226, 180, 120, 0.2);
  --paper-fiber: rgba(236, 200, 150, 0.035);
  --paper-fiber-strong: rgba(236, 200, 150, 0.06);
  --color-celestial-teal: #4d9f97;
  --color-golden-sand: #e2a553;
  --color-burnt-orange: #c8742c;
  --color-gold: #e2a553;
  --color-parchment-base: #161d16;
  --color-stone-shadow: #050907;
  --chapter-reading-ink: #e9dcc1;
}

/* The room from the LORE . LAND covers: a teal-green field darkening to
 * olive at the edges, with out-of-focus lamps. Texture sets how many. */
html[data-nook-light="lamp"] body:has(> main.chapter) {
  --bokeh: calc(var(--nook-texture, 0.6) * 100%);
  background:
    radial-gradient(0.9rem 0.9rem at 8% 22%, color-mix(in srgb, #e2a553 calc(var(--bokeh) * 0.5), transparent), transparent),
    radial-gradient(1.6rem 1.6rem at 91% 14%, color-mix(in srgb, #cdaa72 calc(var(--bokeh) * 0.35), transparent), transparent),
    radial-gradient(1.2rem 1.2rem at 4% 78%, color-mix(in srgb, #4d9f97 calc(var(--bokeh) * 0.4), transparent), transparent),
    radial-gradient(2.2rem 2.2rem at 96% 70%, color-mix(in srgb, #e2a553 calc(var(--bokeh) * 0.28), transparent), transparent),
    radial-gradient(1rem 1rem at 88% 92%, color-mix(in srgb, #4d9f97 calc(var(--bokeh) * 0.35), transparent), transparent),
    radial-gradient(80rem 60rem at 50% 35%, #2a4034, #1a2219 55%, #121710);
  background-attachment: fixed;
}

/* Paper fibers screen-blend a grey haze over a dark room; keep them a whisper. */
html[data-nook-light="lamp"] body:has(> main.chapter)::before {
  mix-blend-mode: screen;
  opacity: calc(var(--nook-texture, 0.6) * 0.25);
}

html[data-nook-light="lamp"] main.chapter :is(h1, h2),
html[data-nook-light="lamp"] .chapter-turn-title {
  color: #e2c68f;
}

html[data-nook-light="lamp"] main.chapter > [data-ebook-section] {
  background: color-mix(in srgb, #1b271f 94%, #cdaa72 3%);
}

html[data-nook-light="lamp"] :is(.chapter-topic-chip, .chapter-route-card, .chapter-turn-link, .scriptorium-slip, .reading-nook, .resume-offer) {
  background: rgba(32, 46, 38, 0.9);
  box-shadow: none;
}

html[data-nook-light="lamp"] .line-share {
  background: #f3cf94;
  color: #1a140b;
}

html[data-nook-light="lamp"] ::target-text {
  background: rgba(226, 165, 83, 0.35);
}

/* The end ornament: a four-lobed amber boonberry, seeds where lobes meet. */
main.chapter > .chapter-end-mark {
  width: 2rem;
  height: 2rem;
  max-width: none;
  overflow: hidden;
  color: transparent;
  background:
    radial-gradient(circle at 50% 50%, #3a2412 0 6%, transparent 9%),
    radial-gradient(circle at 50% 27%, #fbd78e 0 10%, #e8a043 24%, transparent 27%),
    radial-gradient(circle at 73% 50%, #fbd78e 0 10%, #e8a043 24%, transparent 27%),
    radial-gradient(circle at 50% 73%, #fbd78e 0 10%, #e8a043 24%, transparent 27%),
    radial-gradient(circle at 27% 50%, #fbd78e 0 10%, #e8a043 24%, transparent 27%);
  filter: drop-shadow(0 0 0.35rem rgba(232, 160, 67, 0.45));
}

/* Boof's postage: the boonberry that notices the story it is in. */
main.chapter .scriptorium-slip::after {
  top: 0.8rem;
  right: 0.95rem;
  width: 1.05rem;
  height: 0.95rem;
  border-radius: 46% 46% 42% 42% / 40% 40% 52% 52%;
  background:
    radial-gradient(circle at 34% 44%, #f4c26a 0 7%, transparent 10%),
    radial-gradient(circle at 66% 44%, #f4c26a 0 7%, transparent 10%),
    linear-gradient(#1f3f3b, #1f3f3b) 50% 50% / 26% 6% no-repeat,
    radial-gradient(circle at 50% 62%, #b9e2cf 0 8%, #5aa79d 38%, #2e6f69 85%);
  box-shadow:
    0 -0.28rem 0 -0.16rem #b7a47c,
    0 0 0.5rem 0.02rem color-mix(in srgb, #5aa79d 40%, transparent);
}

/* ─── The monument's mark and wordmark (LORE . LAND cover studies) ──────
 * book/images/covers/: four cover studies (-v1…-v4) and the bud sigil
 * redrawn from v2. The sigil is a mask, so the light dial colours it. */

html {
  --sigil-gold: #a67c38;
}

html[data-nook-light="lamp"] {
  --sigil-gold: #cdaa72;
}

main.chapter .chapter-head::before {
  content: "";
  width: 1.35rem;
  height: 1.45rem;
  margin-bottom: 0.1rem;
  background: var(--sigil-gold);
  -webkit-mask: url("/book/images/covers/bud-sigil.svg") center / contain no-repeat;
  mask: url("/book/images/covers/bud-sigil.svg") center / contain no-repeat;
}

nav.chapter-navigation .hub-home {
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sigil-gold);
}

/* ─── The nook's rooms (book/images/nook/nook-room-v1…v7) ───────────────
 * Seven corners of one reading nook: shelves, candles, lanterns, a window,
 * a small teal cloud drifting between the books. Chapter N sits in room
 * ((N − 1) mod 7) + 1. Lamplight shows the room through the page, most at
 * the chapter's opening, less where the prose runs; dusk sees it through a
 * cream haze; daylight is plain paper and never downloads the image. The
 * Texture dial is how much of the room comes through.
 *
 * html::before, not a body child: body carries perspective (reset.css),
 * which would turn a fixed layer into a body-sized, scrolling one. */

html:has(body[data-chapter="01"]), html:has(body[data-chapter="08"]) { --nook-room: url("/book/images/nook/nook-room-v1.webp"); }
html:has(body[data-chapter="02"]), html:has(body[data-chapter="09"]) { --nook-room: url("/book/images/nook/nook-room-v2.webp"); }
html:has(body[data-chapter="03"]), html:has(body[data-chapter="10"]) { --nook-room: url("/book/images/nook/nook-room-v3.webp"); }
html:has(body[data-chapter="04"]), html:has(body[data-chapter="11"]) { --nook-room: url("/book/images/nook/nook-room-v4.webp"); }
html:has(body[data-chapter="05"]), html:has(body[data-chapter="12"]) { --nook-room: url("/book/images/nook/nook-room-v5.webp"); }
html:has(body[data-chapter="06"]), html:has(body[data-chapter="13"]) { --nook-room: url("/book/images/nook/nook-room-v6.webp"); }
html:has(body[data-chapter="07"]) { --nook-room: url("/book/images/nook/nook-room-v7.webp"); }

html:is([data-nook-light="lamp"], [data-nook-light="dusk"]):has(body > main.chapter)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--nook-room, none) center 30% / cover no-repeat;
}

/* The rooms are shot dark; lamplight lifts them so shelves read through the veil. */
html[data-nook-light="lamp"]:has(body > main.chapter)::before {
  filter: brightness(1.45) saturate(1.1);
}

html[data-nook-light="dusk"]:has(body > main.chapter)::before {
  background:
    linear-gradient(rgba(238, 226, 203, 0.6), rgba(238, 226, 203, 0.6)),
    var(--nook-room, none) center 30% / cover no-repeat;
}

/* Lamplight: body's own room gradient steps back so the photograph is the room. */
html[data-nook-light="lamp"] body:has(> main.chapter) {
  background: transparent;
}

html[data-nook-light="lamp"] {
  background: #121710;
}

html[data-nook-light="lamp"] body main#chapter-content {
  background:
    linear-gradient(to bottom,
      rgba(22, 31, 25, calc(0.72 - 0.62 * var(--nook-texture, 0.6))) 0,
      rgba(22, 31, 25, calc(0.94 - 0.2 * var(--nook-texture, 0.6))) min(34rem, 60vh),
      rgba(22, 31, 25, calc(0.97 - 0.12 * var(--nook-texture, 0.6))) min(60rem, 110vh));
}

html[data-nook-light="lamp"] body:has(> main.chapter) > aside {
  background: rgba(22, 31, 25, calc(0.94 - 0.3 * var(--nook-texture, 0.6)));
}

html[data-nook-light="lamp"] main.chapter .chapter-head {
  text-shadow: 0 1px 12px rgba(6, 10, 7, 0.85), 0 0 2px rgba(6, 10, 7, 0.6);
}

html[data-nook-light="dusk"] body main#chapter-content {
  background:
    linear-gradient(to bottom,
      rgba(247, 239, 223, calc(0.86 - 0.5 * var(--nook-texture, 0.6))) 0,
      rgba(247, 239, 223, 0.94) min(34rem, 60vh));
}

/* ─── Switches (reading-switches.mjs) ───────────────────────────────────
 * Features that default to off. Hidden pieces ship in the prerendered
 * page with [hidden] (so reader mode and no-JS skip them); a switch on
 * <html> lets them show. */

html[data-switch-logline="on"] main.chapter .chapter-logline[hidden] {
  display: block !important; /* beats reset.css [hidden] !important */
  max-width: 44ch;
  margin: 0 0 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.95em;
  color: var(--color-text-alt);
  text-wrap: balance;
}

html[data-switch-reading-time="on"] main.chapter .read-time[hidden] {
  display: inline-flex !important; /* beats reset.css [hidden] !important */
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent-main) 9%, transparent);
  font-family: var(--font-family-heading);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--color-accent-main);
}

html[data-switch-reading-time="on"] main.chapter > [data-voice-shape="block"] > .read-time {
  margin-bottom: 0.4rem;
}

html[data-switch-prompts="on"] main.chapter > .plate-prompts[hidden] {
  display: grid !important; /* beats reset.css [hidden] !important */
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding: 1rem;
  border: 1px dashed color-mix(in srgb, var(--color-accent-main) 40%, transparent);
  border-radius: 0.7rem;
}

.plate-prompts-kicker {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-main);
}

main.chapter .plate-prompts .plate-prompts-note,
main.chapter .plate-prompts .plate-prompt-for {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-alt);
  text-indent: 0;
}

.plate-prompts-list {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plate-prompts-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 0.6rem;
  align-items: start;
}

.plate-prompt-for {
  grid-column: 1 / -1;
}

.plate-prompt-text {
  padding: 0.55rem 0.7rem;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--color-text-main) 6%, transparent);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: none;
  user-select: all;
}

.plate-prompt-copy {
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
}

/* Numbered paragraphs: ::after, because ::before would join the drop cap. */
html:is([data-switch-paragraph-numbers="on"], [data-lens="bone"]) main.chapter {
  counter-reset: lore-paragraph;
}

html:is([data-switch-paragraph-numbers="on"], [data-lens="bone"]) main.chapter [data-ebook-section] > p:not(.section-marks) {
  position: relative;
  counter-increment: lore-paragraph;
}

/* Sections use content-visibility: auto, which implies paint containment:
   anything drawn outside a section is clipped. Numbers and lens marks get an
   inner gutter instead. */
html:is([data-switch-paragraph-numbers="on"], [data-lens], [data-genre-tuned]) main.chapter > [data-ebook-section] {
  padding-left: calc(var(--flow-pad) + 1.8rem);
}

html:is([data-switch-paragraph-numbers="on"], [data-lens="bone"]) main.chapter [data-ebook-section] > p:not(.section-marks)::after {
  content: counter(lore-paragraph);
  position: absolute;
  top: 0.35em;
  left: -1.8rem;
  width: 0.95rem;
  text-align: right;
  font-family: var(--font-family-heading);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-gold, #c4922e) 75%, var(--color-accent-main));
  opacity: 0.8;
}

@media (max-width: 39.99rem) {
  html:is([data-switch-paragraph-numbers="on"], [data-lens="bone"]) main.chapter [data-ebook-section] > p:not(.section-marks)::after {
    left: -1.75rem;
    width: 1.1rem;
    font-size: 0.55rem;
  }
}

/* Reading line: the paragraph under the eye stays bright. */
html[data-switch-focus-line="on"] main.chapter [data-ebook-section] > p {
  transition: opacity 320ms ease;
}

html[data-switch-focus-line="on"] main.chapter [data-ebook-section] > p:not(.is-reading-line) {
  opacity: 0.45;
}

/* Return notes. */
.return-notes {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
  max-width: 34rem;
  margin-top: 0.9rem;
  padding: 0.8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-gold, #c4922e) 45%, transparent);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--color-gold, #c4922e) 8%, var(--theme-paper, #fffcf6));
  text-align: left;
  text-shadow: none;
}

.return-notes-kicker {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-main);
}

main.chapter .return-notes ul {
  margin: 0;
  padding-inline-start: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.return-notes-close {
  padding: 0.25rem 0.8rem;
  font-size: 0.74rem;
}

/* The drawer itself. */
.reading-switches {
  padding: 0.6rem 0.75rem;
  border: var(--interactive-border);
  border-radius: var(--border-radius-small);
  background: var(--theme-paper);
}

.reading-switches > summary {
  cursor: pointer;
  font-family: var(--font-family-heading);
  font-size: 0.9rem;
}

.reading-switches-group {
  display: grid;
  gap: 0.45rem;
  margin: 0.6rem 0 0;
  padding: 0;
  border: 0;
}

.reading-switches-group > legend {
  padding: 0;
  font-family: var(--font-family-heading);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-main);
}

.reading-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
  cursor: pointer;
}

.reading-switch input {
  margin: 0.2rem 0 0;
  accent-color: var(--color-accent-main);
}

.reading-switch-text {
  display: grid;
  gap: 0.05rem;
}

.reading-switch-name {
  font-size: 0.84rem;
  color: var(--color-text-main);
}

.reading-switch-hint,
.reading-switches-note,
.reading-switches-teaser {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--color-text-alt);
}

.reading-switches-teaser {
  margin-top: 0.6rem;
  font-style: italic;
}

/* Install: one quiet button, only when the browser offers and the reader stayed. */
.reading-install {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--color-gold, #c4922e) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-gold, #c4922e) 10%, transparent);
  color: var(--color-accent-alt);
  font-size: 0.8rem;
  box-shadow: none;
}

.reading-install[hidden] {
  display: none;
}

.reading-shelf-status:empty {
  display: none;
}

/* ─── Wander the stacks (book/content/world/shelf-list.json) ────────────
 * The chapter's shelf-mates by call number. Shown by default; hidden only
 * once switches are ready and the reader has turned it off. */

html[data-switches-ready]:not([data-switch-stacks="on"]) main.chapter > .chapter-stacks {
  display: none;
}

main.chapter > .chapter-stacks {
  display: grid;
  gap: 0.7rem;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  max-width: var(--flow-wide);
}

.chapter-stacks-kicker {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-main);
}

main.chapter .chapter-stacks-lede {
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
  font-style: italic;
  font-size: 0.95em;
  color: var(--color-text-alt);
  text-indent: 0;
}

.chapter-stacks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-stacks-item {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.85rem 0.9rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--border-color-main) 80%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--color-gold, #c4922e) 60%, transparent);
  border-radius: 0.3rem 0.6rem 0.6rem 0.3rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 1.45rem, color-mix(in srgb, var(--color-accent-main) 6%, transparent) 1.45rem 1.5rem),
    color-mix(in srgb, var(--theme-paper) 94%, var(--color-gold, #c4922e) 3%);
}

main.chapter .chapter-stacks-item p {
  margin: 0;
  max-width: none;
  text-indent: 0;
}

main.chapter .chapter-stacks-subject {
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 1.1em;
  color: var(--color-accent-alt);
}

main.chapter .chapter-stacks-call {
  font-family: var(--font-family-heading);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-main);
}

.chapter-stacks-call abbr {
  text-decoration: none;
}

main.chapter .chapter-stacks-wander {
  font-size: 0.9em;
  line-height: 1.5;
  font-style: italic;
  color: var(--color-text-main);
}

.chapter-stacks-find {
  justify-self: start;
  margin-top: 0.15rem;
  font-family: var(--font-family-heading);
  font-size: 0.72rem;
  color: var(--color-accent-main);
}

html[data-nook-light="lamp"] .chapter-stacks-item {
  background:
    repeating-linear-gradient(0deg, transparent 0 1.45rem, rgba(205, 170, 114, 0.05) 1.45rem 1.5rem),
    rgba(32, 46, 38, 0.9);
}

/* ─── The grammar, faintly (resonance-layer.mjs, trial) ──────────────── */

.resonance {
  position: relative;
  display: inline-block;
  margin-inline-start: 0.4em;
  vertical-align: 0.1em;
  text-shadow: none;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.resonance-sigil {
  min-width: 1.6rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid color-mix(in srgb, var(--color-gold, #c4922e) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-gold, #c4922e) 8%, transparent);
  color: color-mix(in srgb, var(--color-gold, #c4922e) 80%, var(--color-accent-main));
  font-family: "JetBrainsMono", "IBM Plex Mono", var(--font-family-mono, monospace);
  font-size: 0.72rem;
  line-height: 1.4;
  box-shadow: none;
  opacity: 0.75;
  transform: none;
}

.resonance-sigil:hover,
.resonance-sigil:focus-visible,
.resonance-sigil[aria-expanded="true"] {
  opacity: 1;
  transform: none;
}

.resonance-note:not([hidden]) {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.4rem);
  left: 50%;
  translate: -50% 0;
  display: grid;
  gap: 0.35rem;
  width: min(20rem, 80vw);
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-gold, #c4922e) 45%, transparent);
  border-radius: 0.6rem;
  background: linear-gradient(var(--theme-paper, #fffcf6), var(--theme-paper, #fffcf6)), var(--bg-color-main, #f3ede1);
  box-shadow: 0 16px 40px color-mix(in srgb, #0b1627 22%, transparent);
  color: var(--color-text-main);
  font-family: var(--font-family-body);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}

.resonance-note-title {
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 1.05rem;
  color: var(--color-accent-alt);
}

.resonance-note-library,
.resonance-note-engineering {
  font-size: 0.76rem;
  color: var(--color-text-alt);
}

.resonance-note-engineering {
  font-family: "JetBrainsMono", "IBM Plex Mono", var(--font-family-mono, monospace);
  font-size: 0.7rem;
}

.resonance-note-witness {
  padding-top: 0.3rem;
  border-top: 1px solid color-mix(in srgb, var(--color-gold, #c4922e) 30%, transparent);
  font-style: italic;
}

/* Every flow block is its own stacking context (panels.css z-index: 1);
   the block holding an open note rises above its neighbours. */
main.chapter > :has(.resonance-note:not([hidden])),
aside > :has(.resonance-note:not([hidden])) {
  z-index: 50;
}

/* ─── Read as: boon · bane · bone (lens-control.mjs, valence-lens.mjs) ──
 * Every paragraph leans somewhere (data-lean). The lens brings one lean
 * forward; the others step back but stay readable — the story is whole
 * under every lens, only its weight moves. Balanced is the default. */

.chapter-lens:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  text-shadow: none;
}

.chapter-lens-label {
  margin-right: 0.25rem;
  font-family: var(--font-family-heading);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-alt);
}

.chapter-lens-option {
  padding: 0.22rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-accent-main) 28%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-main);
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 0.86rem;
  box-shadow: none;
  transform: none;
}

.chapter-lens-option:hover,
.chapter-lens-option:focus-visible {
  transform: none;
  background: color-mix(in srgb, var(--color-accent-main) 8%, transparent);
}

.chapter-lens-option[aria-pressed="true"] {
  border-color: var(--lens-ink, var(--color-accent-main));
  background: color-mix(in srgb, var(--lens-ink, var(--color-accent-main)) 14%, transparent);
  color: var(--color-accent-alt);
}

.chapter-lens-option[data-lens="boon"] { --lens-ink: #c4922e; }
.chapter-lens-option[data-lens="bane"] { --lens-ink: #a34a2e; }
.chapter-lens-option[data-lens="bone"] { --lens-ink: #4d7f8a; }

main.chapter .chapter-lens-gloss {
  flex: 1 0 100%;
  max-width: 40ch;
  margin: 0.2rem auto 0;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--color-text-alt);
  text-align: center;
}

main.chapter .chapter-lens-gloss:empty {
  display: none;
}

/* Genre as a blend: each lean's paragraphs sit at 0.4 + 0.6 × its weight
   (weights normalized so the strongest land is 1), neutral paragraphs at
   the share an even third would have. Balanced sets no attribute at all. */
html[data-genre-tuned] main.chapter [data-ebook-section] > p:not(.section-marks) {
  position: relative;
  opacity: calc(0.4 + 0.6 * var(--w-none, 1));
  transition: opacity 360ms ease;
}

html[data-genre-tuned] main.chapter [data-ebook-section] > p[data-lean="boon"] { opacity: calc(0.4 + 0.6 * var(--w-boon, 1)); }
html[data-genre-tuned] main.chapter [data-ebook-section] > p[data-lean="bane"] { opacity: calc(0.4 + 0.6 * var(--w-bane, 1)); }
html[data-genre-tuned] main.chapter [data-ebook-section] > p[data-lean="bone"] { opacity: calc(0.4 + 0.6 * var(--w-bone, 1)); }

html[data-genre-tuned] main.chapter p[data-lean]::before {
  content: "";
  position: absolute;
  top: 0.3em;
  bottom: 0.3em;
  left: -0.55rem;
  width: 3px;
  border-radius: 3px;
  pointer-events: none;
}

/* Boon: a warm glow in the margin, as strong as boon's share. */
html[data-genre-tuned] main.chapter p[data-lean="boon"]::before {
  background: linear-gradient(#e8b45a, #c4922e);
  box-shadow: 0 0 0.6rem rgba(232, 180, 90, 0.65);
  opacity: var(--w-boon, 0);
}

/* Bane: a dry stamp of rust. */
html[data-genre-tuned] main.chapter p[data-lean="bane"]::before {
  background: repeating-linear-gradient(180deg, #a34a2e 0 5px, transparent 5px 8px);
  opacity: var(--w-bane, 0);
}

/* Bone: a notation tick — a hairline with a mark at each end. */
html[data-genre-tuned] main.chapter p[data-lean="bone"]::before {
  width: 7px;
  left: -0.7rem;
  background:
    linear-gradient(#4d7f8a, #4d7f8a) center / 1px 100% no-repeat,
    linear-gradient(#4d7f8a, #4d7f8a) top / 7px 1px no-repeat,
    linear-gradient(#4d7f8a, #4d7f8a) bottom / 7px 1px no-repeat;
  opacity: var(--w-bone, 0);
}

/* The dial. */
.chapter-lens-tune[aria-expanded="true"] {
  background: color-mix(in srgb, var(--color-accent-main) 12%, transparent);
}

.genre-dial:not([hidden]) {
  flex: 1 0 100%;
  display: grid;
  justify-items: center;
  margin-top: 0.4rem;
}

.genre-dial-stage {
  position: relative;
  width: min(15rem, 70vw);
  aspect-ratio: 100 / 92;
  margin: 2.6rem 4.5rem 2.4rem;
  touch-action: none;
  cursor: crosshair;
}

.genre-dial-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.genre-dial-field {
  fill: color-mix(in srgb, var(--theme-paper, #fffcf6) 70%, var(--color-gold, #c4922e) 8%);
  stroke: color-mix(in srgb, var(--color-accent-main) 35%, transparent);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.genre-dial-corner--boon { fill: #c4922e; }
.genre-dial-corner--bane { fill: #a34a2e; }
.genre-dial-corner--bone { fill: #4d7f8a; }

.genre-dial-handle {
  fill: var(--color-accent-alt, #1d3c4f);
  stroke: var(--theme-paper, #fffcf6);
  stroke-width: 1.4;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.genre-dial-thumb {
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  translate: -50% -50%;
  border-radius: 50%;
  outline-offset: 2px;
}

.genre-dial-label {
  position: absolute;
  display: grid;
  gap: 0.05rem;
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
  color: var(--color-text-alt);
  white-space: nowrap;
  pointer-events: none;
}

.genre-dial-label strong {
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--color-text-main);
}

.genre-dial-label--boon { left: 50%; top: -1.35rem; translate: -50% -50%; }
.genre-dial-label--bane { left: 8%; top: 96%; translate: -50% 0; }
.genre-dial-label--bone { left: 92%; top: 96%; translate: -50% 0; }

@media (prefers-reduced-motion: reduce) {
  html[data-genre-tuned] main.chapter [data-ebook-section] > p {
    transition: none;
  }
}

/* ─── Page controls: hairline gold on paper, in the cover's type ─────────
 * The story is the only thing on the page that should look heavy. */

nav.chapter-navigation :is(a.prev, a.next),
.section-navigation :is(button, .prev-section, .next-section),
.reader-scale-button,
.reader-scale-reset {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--sigil-gold, #a67c38) 45%, transparent);
  color: var(--color-accent-alt);
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  box-shadow: none;
  filter: none;
}

nav.chapter-navigation :is(a.prev, a.next):hover,
nav.chapter-navigation :is(a.prev, a.next):focus-visible,
.section-navigation :is(button, .prev-section, .next-section):hover,
.section-navigation :is(button, .prev-section, .next-section):focus-visible {
  background: color-mix(in srgb, var(--sigil-gold, #a67c38) 12%, transparent);
  border-color: var(--sigil-gold, #a67c38);
  box-shadow: none;
  transform: none;
}

nav.chapter-navigation .nav-word,
.section-navigation .dock-word {
  font-family: var(--chapter-display, Georgia, serif);
}

.section-navigation {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 20%, transparent), transparent 60%),
    color-mix(in srgb, var(--theme-paper) 96%, transparent);
  border-color: color-mix(in srgb, var(--sigil-gold, #a67c38) 30%, transparent);
}

button.section-navigation-position {
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--sigil-gold, #a67c38);
}

html[data-nook-light="lamp"] nav.chapter-navigation :is(a.prev, a.next),
html[data-nook-light="lamp"] .section-navigation :is(button, .prev-section, .next-section) {
  color: #e6c98f;
}

/* The lens, folded: one quiet line under the epigraph until it is wanted. */
.chapter-lens:not([hidden]) {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  text-shadow: none;
}

.chapter-lens-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--sigil-gold, #a67c38) 35%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-alt);
  font-family: var(--font-family-heading);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: none;
}

.chapter-lens-toggle:hover,
.chapter-lens-toggle:focus-visible,
.chapter-lens-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--sigil-gold, #a67c38) 10%, transparent);
  transform: none;
  box-shadow: none;
}

.chapter-lens-current {
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent-alt);
}

.chapter-lens-caret {
  font-size: 0.7rem;
  color: var(--sigil-gold, #a67c38);
}

.chapter-lens-menu:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
}

.chapter-lens-menu .chapter-lens-label {
  display: none;
}

/* ─── X-ray reading (xray-reading.mjs) ───────────────────────────────────
 * Off by default. Ten lexicon threads get ten hues by index; a word in a
 * thread carries a faint underline always, and its whole thread lights on
 * hover or hold. Sentences and paragraphs show their lean; paragraphs also
 * show the section's Spw sign in the margin. */

main.chapter[data-xray] {
  --xr-0: #c4922e; --xr-1: #4d9f97; --xr-2: #a34a2e; --xr-3: #7a5ca8; --xr-4: #4d7f8a;
  --xr-5: #b8862f; --xr-6: #5e8a4a; --xr-7: #a86a8a; --xr-8: #6b7fae; --xr-9: #8a6a36;
}

.xr-word[data-group] {
  --xr: var(--xr-9);
  background: linear-gradient(transparent 82%, color-mix(in srgb, var(--xr) 45%, transparent) 82%);
  border-radius: 2px;
  transition: background-color 160ms ease, color 160ms ease;
}

.xr-word[data-group-index="0"], .xray-legend li[data-group-index="0"] { --xr: var(--xr-0); }
.xr-word[data-group-index="1"], .xray-legend li[data-group-index="1"] { --xr: var(--xr-1); }
.xr-word[data-group-index="2"], .xray-legend li[data-group-index="2"] { --xr: var(--xr-2); }
.xr-word[data-group-index="3"], .xray-legend li[data-group-index="3"] { --xr: var(--xr-3); }
.xr-word[data-group-index="4"], .xray-legend li[data-group-index="4"] { --xr: var(--xr-4); }
.xr-word[data-group-index="5"], .xray-legend li[data-group-index="5"] { --xr: var(--xr-5); }
.xr-word[data-group-index="6"], .xray-legend li[data-group-index="6"] { --xr: var(--xr-6); }
.xr-word[data-group-index="7"], .xray-legend li[data-group-index="7"] { --xr: var(--xr-7); }
.xr-word[data-group-index="8"], .xray-legend li[data-group-index="8"] { --xr: var(--xr-8); }
.xr-word[data-group-index="9"], .xray-legend li[data-group-index="9"] { --xr: var(--xr-9); }

/* Word mode: any word answers the pointer; thread words answer with their thread. */
main.chapter[data-xray="word"] .xr-word {
  cursor: pointer;
  border-radius: 3px;
}

main.chapter[data-xray="word"] .xr-word:hover,
main.chapter[data-xray="word"] .xr-word.is-held {
  background-color: color-mix(in srgb, var(--color-accent-main) 14%, transparent);
}

main.chapter[data-xray="word"] .xr-word[data-group]:hover,
main.chapter[data-xray="word"] .xr-word.is-held[data-group],
main.chapter[data-xray="word"] .xr-word.is-kin {
  background-color: color-mix(in srgb, var(--xr) 26%, transparent);
  color: color-mix(in srgb, var(--xr) 55%, var(--color-text-main));
  box-shadow: 0 0 0.5rem color-mix(in srgb, var(--xr) 35%, transparent);
}

main.chapter[data-xray="word"] .xr-word.is-held {
  outline: 1px solid var(--xr, var(--color-accent-main));
  outline-offset: 1px;
}

/* Sentence mode: the sentence lifts and shows its lean. */
main.chapter[data-xray="sentence"] .xr-sentence {
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 180ms ease;
}

main.chapter[data-xray="sentence"] .xr-sentence:hover,
main.chapter[data-xray="sentence"] .xr-sentence.is-held {
  background-color: color-mix(in srgb, var(--xr-lean, var(--color-accent-main)) 14%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xr-lean, var(--color-accent-main)) 14%, transparent);
}

main.chapter[data-xray="sentence"] .xr-sentence[data-lean="boon"] { --xr-lean: #c4922e; }
main.chapter[data-xray="sentence"] .xr-sentence[data-lean="bane"] { --xr-lean: #a34a2e; }
main.chapter[data-xray="sentence"] .xr-sentence[data-lean="bone"] { --xr-lean: #4d7f8a; }

main.chapter[data-xray="sentence"] .xr-sentence:hover .xr-word[data-group],
main.chapter[data-xray="sentence"] .xr-sentence.is-held .xr-word[data-group] {
  background-color: color-mix(in srgb, var(--xr) 24%, transparent);
}

/* Paragraph mode: the lean mark and the section's sign in the margin. */
main.chapter[data-xray="paragraph"] .xr-paragraph {
  position: relative;
  cursor: pointer;
  transition: background-color 180ms ease;
}

main.chapter[data-xray="paragraph"] > [data-ebook-section] {
  padding-left: calc(var(--flow-pad) + 1.8rem);
}

main.chapter[data-xray="paragraph"] .xr-paragraph::before {
  content: attr(data-xr-sigil);
  position: absolute;
  left: -1.7rem;
  top: 0.15em;
  font-family: "JetBrainsMono", "IBM Plex Mono", var(--font-family-mono, monospace);
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--sigil-gold, #a67c38) 70%, transparent);
  opacity: 0.55;
  transition: opacity 160ms ease;
}

main.chapter[data-xray="paragraph"] .xr-paragraph:hover,
main.chapter[data-xray="paragraph"] .xr-paragraph.is-held {
  background-color: color-mix(in srgb, var(--xr-lean, var(--color-accent-main)) 9%, transparent);
  box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--xr-lean, var(--color-accent-main)) 9%, transparent);
  border-radius: 0.4rem;
}

main.chapter[data-xray="paragraph"] .xr-paragraph:hover::before,
main.chapter[data-xray="paragraph"] .xr-paragraph.is-held::before {
  opacity: 1;
}

main.chapter[data-xray="paragraph"] .xr-paragraph[data-xr-lean="boon"] { --xr-lean: #c4922e; }
main.chapter[data-xray="paragraph"] .xr-paragraph[data-xr-lean="bane"] { --xr-lean: #a34a2e; }
main.chapter[data-xray="paragraph"] .xr-paragraph[data-xr-lean="bone"] { --xr-lean: #4d7f8a; }

main.chapter[data-xray="paragraph"] .xr-paragraph:hover .xr-word[data-group],
main.chapter[data-xray="paragraph"] .xr-paragraph.is-held .xr-word[data-group] {
  background-color: color-mix(in srgb, var(--xr) 22%, transparent);
}

/* The note a held unit leaves. */
.xr-note {
  display: block;
  margin: 0.35rem 0 0.2rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--xr, var(--xr-lean, var(--sigil-gold, #a67c38)));
  border-radius: 0 0.5rem 0.5rem 0;
  /* --theme-paper is translucent by design; a note over prose must not be. */
  background:
    linear-gradient(color-mix(in srgb, var(--theme-paper, #fffcf6) 92%, var(--color-text-main) 4%), color-mix(in srgb, var(--theme-paper, #fffcf6) 92%, var(--color-text-main) 4%)),
    var(--bg-color-main, #f3ede1);
  color: var(--color-text-alt);
  font-family: var(--font-family-body);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.45;
  text-indent: 0;
  text-shadow: none;
  cursor: auto;
}

.xr-word .xr-note,
.xr-sentence .xr-note {
  position: absolute;
  z-index: 30;
  left: 0;
  width: min(24rem, 78vw);
  margin-top: 0.4rem;
  box-shadow: 0 12px 32px color-mix(in srgb, #0b1627 18%, transparent);
}

main.chapter[data-xray] .xr-word.is-held,
main.chapter[data-xray] .xr-sentence.is-held {
  position: relative;
}

.xr-note code {
  font-family: "JetBrainsMono", var(--font-family-mono, monospace);
  color: var(--sigil-gold, #a67c38);
}

.xr-note a {
  color: var(--color-accent-main);
}

/* The rail panel. */
.xray-panel {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
  border: var(--interactive-border);
  border-radius: var(--border-radius-small);
  background: var(--theme-paper);
}

.xray-panel h2 {
  margin: 0;
  font-size: 0.95rem;
}

.xray-lede {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-text-alt);
}

.xray-modes {
  display: flex;
  gap: 0.3rem;
}

.xray-mode {
  flex: 1 1 0;
  padding: 0.3rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--sigil-gold, #a67c38) 40%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-alt);
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 0.8rem;
  box-shadow: none;
}

.xray-mode[aria-pressed="true"] {
  background: color-mix(in srgb, var(--sigil-gold, #a67c38) 16%, transparent);
  border-color: var(--sigil-gold, #a67c38);
}

.xray-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xray-legend li {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--xr, #8a6a36) 16%, transparent);
  color: color-mix(in srgb, var(--xr, #8a6a36) 60%, var(--color-text-main));
  font-family: var(--font-family-heading);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .xr-word, .xr-sentence, .xr-paragraph, .xr-paragraph::before {
    transition: none;
  }
}

/* ─── Constellation (constellation.mjs) ──────────────────────────────────
 * A ring of thirteen boonberries, one per chamber, lit where a thread runs.
 * Marks become doors: motif / trope / foreshadow chips, colophon threads,
 * voice kickers, and x-ray notes all open one. */

main.chapter .section-marks button.mark,
main.chapter .chapter-topic-chip[data-constellation],
main.chapter .voice-kicker[data-constellation] {
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 200ms ease, background-color 160ms ease;
}

main.chapter .section-marks button.mark {
  font: inherit;
  line-height: inherit;
  appearance: none;
}

main.chapter .section-marks button.mark:hover,
main.chapter .section-marks button.mark:focus-visible,
main.chapter .chapter-topic-chip[data-constellation]:hover,
main.chapter .voice-kicker[data-constellation]:hover,
main.chapter .voice-kicker[data-constellation]:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 0.8rem color-mix(in srgb, var(--sigil-gold, #a67c38) 45%, transparent);
  background-color: color-mix(in srgb, var(--sigil-gold, #a67c38) 12%, transparent);
}

.xr-note-constellation {
  padding: 0.15rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--sigil-gold, #a67c38) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sigil-gold, #a67c38) 10%, transparent);
  color: var(--color-accent-alt);
  font-size: 0.76rem;
  box-shadow: none;
}

.constellation {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(22rem, calc(100vw - 1rem));
  max-height: min(80dvh, 34rem);
  padding: 0.9rem 0.95rem 0.85rem;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--sigil-gold, #a67c38) 45%, transparent);
  border-radius: 0.9rem;
  background: linear-gradient(var(--theme-paper, #fffcf6), var(--theme-paper, #fffcf6)), var(--bg-color-main, #f3ede1);
  color: var(--color-text-main);
  box-shadow: 0 24px 60px color-mix(in srgb, #0b1627 26%, transparent);
  font-family: var(--font-family-body);
}

.constellation::backdrop {
  background: color-mix(in srgb, #0b1627 10%, transparent);
}

.constellation.is-sheet {
  inset: auto 0.5rem 0.5rem 0.5rem;
  width: auto;
  margin: 0 auto;
  max-width: 26rem;
}

.constellation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.5rem;
  align-items: start;
}

.constellation-kicker {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-main);
}

.constellation-title {
  grid-column: 1;
  margin: 0.05rem 0 0;
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-accent-alt);
}

.constellation-close {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--sigil-gold, #a67c38) 40%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-alt);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: none;
}

.constellation-ring {
  display: block;
  width: min(11rem, 60vw);
  height: auto;
  margin: 0.5rem auto 0.2rem;
  overflow: visible;
}

.constellation-path {
  fill: none;
  stroke: color-mix(in srgb, var(--sigil-gold, #a67c38) 30%, transparent);
  stroke-width: 0.8;
  stroke-dasharray: 2 3;
}

.constellation-centre {
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 18px;
  fill: var(--color-accent-alt);
}

.constellation-centre-sub {
  font-family: var(--font-family-heading);
  font-size: 6.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--color-text-alt);
}

/* The berries: hollow teal when the thread does not pass; teal skin with an
   amber ember when it does; a gold ring around the chamber you are in. */
.constellation-berry .constellation-skin {
  fill: color-mix(in srgb, #4d9f97 12%, transparent);
  stroke: color-mix(in srgb, #4d9f97 45%, transparent);
  stroke-width: 0.9;
  transition: fill 160ms ease, transform 160ms ease;
}

.constellation-berry .constellation-ember {
  fill: transparent;
  transition: fill 200ms ease;
}

.constellation-berry.is-lit {
  cursor: pointer;
}

.constellation-berry.is-lit .constellation-skin {
  fill: #4d9f97;
  stroke: #2e6f69;
}

.constellation-berry.is-lit .constellation-ember {
  fill: #f4b25c;
  filter: drop-shadow(0 0 2px rgba(244, 178, 92, 0.9));
}

.constellation-berry.is-lit:hover .constellation-skin,
.constellation-berry.is-lit:focus-visible .constellation-skin {
  fill: #5fb3ab;
  transform: scale(1.18);
}

.constellation-berry:focus-visible {
  outline: none;
}

.constellation-berry:focus-visible .constellation-skin {
  stroke: var(--sigil-gold, #a67c38);
  stroke-width: 1.6;
}

.constellation-here {
  fill: none;
  stroke: var(--sigil-gold, #a67c38);
  stroke-width: 0.9;
  stroke-dasharray: 1.5 2;
  animation: constellation-here 3s linear infinite;
}

@keyframes constellation-here {
  to { stroke-dashoffset: -7; }
}

.constellation-berry.is-door .constellation-skin {
  stroke-dasharray: 2 1.5;
}

.constellation-sum {
  margin: 0.2rem 0 0.5rem;
  font-size: 0.8rem;
  color: var(--color-text-alt);
  text-align: center;
}

.constellation-list {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.constellation-list a {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: baseline;
  padding: 0.35rem 0.5rem;
  border-radius: 0.45rem;
  color: inherit;
  font-size: 0.86rem;
  line-height: 1.3;
  text-decoration: none;
}

.constellation-list a:hover,
.constellation-list a:focus-visible {
  background: color-mix(in srgb, var(--sigil-gold, #a67c38) 12%, transparent);
}

.constellation-list li.is-here a {
  background: color-mix(in srgb, var(--sigil-gold, #a67c38) 8%, transparent);
}

.constellation-num {
  font-family: var(--font-family-heading);
  font-size: 0.7rem;
  color: var(--sigil-gold, #a67c38);
}

.constellation-tag {
  font-family: var(--font-family-heading);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-main);
}

.constellation-all {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-family-heading);
  font-size: 0.78rem;
  color: var(--color-accent-main);
}

@media (prefers-reduced-motion: reduce) {
  .constellation-here { animation: none; }
  .constellation-berry .constellation-skin { transition: none; }
}

/* ─── Settled: every change says what it changed (settled.mjs) ──────────
 * A small card near the control — sigil, what settled, one line of
 * consequence — and a gold sweep over the region it changed. On a phone
 * the card is a strip at the foot of the screen. Nothing waits on it. */

.settled {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.settled[hidden] { display: none !important; }

.settled-card {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.55rem 0.8rem 0.55rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--sigil-gold, #a67c38) 55%, transparent);
  border-radius: 0.7rem;
  background:
    linear-gradient(color-mix(in srgb, var(--theme-paper, #fffcf6) 94%, var(--color-text-main) 3%), color-mix(in srgb, var(--theme-paper, #fffcf6) 94%, var(--color-text-main) 3%)),
    var(--bg-color-main, #f3ede1);
  color: var(--color-text-main);
  box-shadow: 0 10px 28px color-mix(in srgb, #0b1627 18%, transparent);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.settled-card.is-in { opacity: 1; transform: none; }
.settled-card.is-out { opacity: 0; transform: translateY(-4px); transition: opacity 300ms ease, transform 300ms ease; }

.settled-card.is-strip {
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 8px);
  max-width: min(30rem, calc(100vw - 2rem));
}

.settled-card.is-strip.is-in { transform: translate(-50%, 0); }
.settled-card.is-strip.is-out { transform: translate(-50%, -4px); }

.settled-sigil {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sigil-gold, #a67c38) 18%, transparent);
  color: var(--sigil-gold, #a67c38);
  font-family: "JetBrainsMono", "IBM Plex Mono", var(--font-family-mono, monospace);
  font-size: 0.95rem;
  animation: settled-pip 600ms ease-out;
}

@keyframes settled-pip {
  0% { transform: scale(0.6); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sigil-gold, #a67c38) 45%, transparent); }
  60% { transform: scale(1.08); }
  100% { transform: none; box-shadow: 0 0 0 0.6rem transparent; }
}

.settled-text { display: grid; gap: 0.05rem; min-width: 0; }

.settled-title {
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
}

.settled-detail {
  font-family: var(--font-family-body);
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--color-text-alt);
}

/* The sweep: a hairline of gold crosses the region that changed. */
.is-settling { position: relative; }
.is-settling::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--sigil-gold, #a67c38) 14%, transparent) 50%, transparent 70%);
  background-size: 260% 100%;
  animation: settled-sweep 900ms ease-out forwards;
}

@keyframes settled-sweep {
  from { background-position: 120% 0; opacity: 1; }
  to { background-position: -120% 0; opacity: 0; }
}

/* ─── X-ray gestures: tap, hold, brush (xray-reading.mjs) ─────────────── */

/* A pressed unit tightens; a let-go unit leaves a trace that fades. */
main.chapter[data-xray] .is-pressing {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--xr, var(--xr-lean, var(--sigil-gold, #a67c38))) 55%, transparent);
  border-radius: 3px;
  transition: box-shadow 480ms ease-in;
}

main.chapter[data-xray] .is-traced {
  animation: xr-trace 2600ms ease-out forwards;
  border-radius: 3px;
}

@keyframes xr-trace {
  0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sigil-gold, #a67c38) 50%, transparent), 0 0 0.8rem color-mix(in srgb, var(--sigil-gold, #a67c38) 35%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
}

/* A pin: a small gold mark and a lasting outline; pins outlast taps. */
main.chapter[data-xray] .is-pinned {
  position: relative;
  outline: 1.5px dashed color-mix(in srgb, var(--sigil-gold, #a67c38) 75%, transparent);
  outline-offset: 2px;
  border-radius: 3px;
}

main.chapter[data-xray] .xr-word.is-pinned::after,
main.chapter[data-xray] .xr-sentence.is-pinned::after {
  content: "&";
  position: absolute;
  top: -0.9em;
  right: -0.35em;
  font-family: "JetBrainsMono", "IBM Plex Mono", var(--font-family-mono, monospace);
  font-size: 0.6rem;
  line-height: 1;
  color: var(--sigil-gold, #a67c38);
  pointer-events: none;
}

main.chapter[data-xray="paragraph"] .xr-paragraph.is-pinned::before {
  content: "&";
  opacity: 1;
  color: var(--sigil-gold, #a67c38);
}

/* Brushing: each word crossed lights in order, thread by thread. */
main.chapter[data-xray].is-brushing,
main.chapter[data-xray].is-brushing .xr-word,
main.chapter[data-xray].is-brushing .xr-sentence,
main.chapter[data-xray].is-brushing .xr-paragraph {
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

main.chapter[data-xray].is-brushable [data-ebook-section] > p,
main.chapter[data-xray].is-brushable .voice-pull {
  touch-action: none;
}

main.chapter[data-xray] .xr-word.is-brushed {
  --brush-color: var(--xr, var(--sigil-gold, #a67c38));
  background-color: color-mix(in srgb, var(--brush-color) 24%, transparent);
  color: color-mix(in srgb, var(--brush-color) 55%, var(--color-text-main));
  box-shadow: 0 0 0.45rem color-mix(in srgb, var(--brush-color) 30%, transparent);
  border-radius: 3px;
  animation: xr-brush-in 260ms ease-out backwards;
  animation-delay: calc(var(--brush-i, 0) * 18ms);
  transition: background-color 1200ms ease, color 1200ms ease, box-shadow 1200ms ease;
}

main.chapter[data-xray] .xr-word.is-brushed:not([data-group]) {
  --brush-color: var(--sigil-gold, #a67c38);
  background-color: color-mix(in srgb, var(--brush-color) 12%, transparent);
  color: inherit;
  box-shadow: none;
}

main.chapter[data-xray] .xr-word.is-brushed.is-fading {
  background-color: color-mix(in srgb, var(--brush-color) 7%, transparent);
  color: inherit;
  box-shadow: none;
}

main.chapter[data-xray] .xr-word.is-brushed.is-fading[data-group] {
  background-color: color-mix(in srgb, var(--brush-color) 12%, transparent);
}

@keyframes xr-brush-in {
  from { transform: translateY(-0.12em); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

main.chapter[data-xray] .xr-sentence.is-brushed,
main.chapter[data-xray] .xr-paragraph.is-brushed {
  border-radius: 3px;
}

/* The brush note: what the sweep found, and where those threads meet again. */
.xr-brush-note {
  position: relative;
  display: grid;
  gap: 0.3rem;
  margin: 0.55rem 0 0.25rem;
  padding: 0.6rem 2rem 0.6rem 0.8rem;
  border-left: 3px solid var(--sigil-gold, #a67c38);
  border-radius: 0 0.55rem 0.55rem 0;
  background:
    linear-gradient(color-mix(in srgb, var(--theme-paper, #fffcf6) 92%, var(--color-text-main) 4%), color-mix(in srgb, var(--theme-paper, #fffcf6) 92%, var(--color-text-main) 4%)),
    var(--bg-color-main, #f3ede1);
  color: var(--color-text-alt);
  font-family: var(--font-family-body);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.45;
  text-indent: 0;
  text-shadow: none;
  cursor: auto;
  user-select: text;
  -webkit-user-select: text;
  animation: xr-note-in 260ms ease-out;
}

@keyframes xr-note-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.xr-brush-note > div { margin: 0; text-indent: 0; }

/* The paragraph after a brush note keeps its indent, as after any paragraph. */
main.chapter .xr-brush-note + p { text-indent: 1.6em; }

.xr-brush-head {
  font-family: var(--chapter-display, Georgia, serif);
  color: var(--color-text-main);
}

.xr-thread {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  margin: 0.1rem 0;
  padding: 0.08rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--xr, #8a6a36) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--xr, #8a6a36) 16%, transparent);
  color: color-mix(in srgb, var(--xr, #8a6a36) 60%, var(--color-text-main));
  font-family: var(--font-family-heading);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  box-shadow: none;
  cursor: pointer;
}

.xr-thread:hover { background: color-mix(in srgb, var(--xr, #8a6a36) 28%, transparent); }

.xr-thread-count { opacity: 0.7; font-size: 0.6rem; }

.xr-thread[data-group-index="0"], .xray-pin-meta[data-group-index="0"] { --xr: var(--xr-0); }
.xr-thread[data-group-index="1"], .xray-pin-meta[data-group-index="1"] { --xr: var(--xr-1); }
.xr-thread[data-group-index="2"], .xray-pin-meta[data-group-index="2"] { --xr: var(--xr-2); }
.xr-thread[data-group-index="3"], .xray-pin-meta[data-group-index="3"] { --xr: var(--xr-3); }
.xr-thread[data-group-index="4"], .xray-pin-meta[data-group-index="4"] { --xr: var(--xr-4); }
.xr-thread[data-group-index="5"], .xray-pin-meta[data-group-index="5"] { --xr: var(--xr-5); }
.xr-thread[data-group-index="6"], .xray-pin-meta[data-group-index="6"] { --xr: var(--xr-6); }
.xr-thread[data-group-index="7"], .xray-pin-meta[data-group-index="7"] { --xr: var(--xr-7); }
.xr-thread[data-group-index="8"], .xray-pin-meta[data-group-index="8"] { --xr: var(--xr-8); }
.xr-thread[data-group-index="9"], .xray-pin-meta[data-group-index="9"] { --xr: var(--xr-9); }

.xr-lean {
  font-family: var(--font-family-heading);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.xr-lean[data-lean="boon"] { color: #c4922e; }
.xr-lean[data-lean="bane"] { color: #a34a2e; }
.xr-lean[data-lean="bone"] { color: #4d7f8a; }

.xr-brush-meet { color: var(--color-text-alt); }

.xr-chamber {
  font-family: "JetBrainsMono", "IBM Plex Mono", var(--font-family-mono, monospace);
  font-size: 0.78rem;
  color: var(--color-accent-main);
}

strong.xr-chamber { color: var(--sigil-gold, #a67c38); }

.xr-brush-close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-alt);
  font-size: 1rem;
  line-height: 1;
  box-shadow: none;
}

/* The rail: brush-with-a-finger, and the pins held. */
.xray-brushable {
  justify-self: start;
  padding: 0.25rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--sigil-gold, #a67c38) 40%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-alt);
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 0.76rem;
  box-shadow: none;
}

.xray-brushable[aria-pressed="true"] {
  background: color-mix(in srgb, var(--sigil-gold, #a67c38) 16%, transparent);
  border-color: var(--sigil-gold, #a67c38);
}

@media (hover: hover) and (pointer: fine) {
  .xray-brushable { display: none; }
}

.xray-pins {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px dashed color-mix(in srgb, var(--sigil-gold, #a67c38) 40%, transparent);
}

.xray-pins h3 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sigil-gold, #a67c38);
}

.xray-pin-list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xray-pin-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.3rem;
  align-items: center;
  max-width: none;
  padding: 0;
}

.xray-pin-text {
  grid-column: 1;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-main);
  font-family: var(--font-family-body);
  font-size: 0.78rem;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.xray-pin-text:hover { color: var(--color-accent-main); }

.xray-pin-meta {
  grid-column: 1;
  font-family: var(--font-family-heading);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--xr, var(--color-text-alt)) 70%, var(--color-text-main));
}

.xray-pin-drop {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-alt);
  box-shadow: none;
}

.xray-pin-share {
  margin: 0;
  font-size: 0.76rem;
  color: var(--color-text-alt);
}

.xray-pins-clear {
  justify-self: start;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--sigil-gold, #a67c38) 40%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-alt);
  font-family: var(--chapter-display, Georgia, serif);
  font-size: 0.72rem;
  box-shadow: none;
}

/* A held finger is a pin, not a selection or a callout. */
@media (pointer: coarse) {
  main.chapter[data-xray] .xr-paragraph {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }
  main.chapter[data-xray] .xr-note,
  main.chapter[data-xray] .xr-brush-note {
    user-select: text;
    -webkit-user-select: text;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settled-card { transition: opacity 200ms ease; transform: none; }
  .settled-card.is-strip { transform: translate(-50%, 0); }
  .settled-sigil, .is-settling::after, .xr-word.is-brushed, .xr-brush-note { animation: none; }
  main.chapter[data-xray] .is-traced { animation: none; }
}