/* Vendored copy of _Skill/finished-html-kit/kit.css (sha256 c6c0dff26bf1880c...) taken on 2026-10-03 for
   Lovecraft-mountains-madness.  Everything below is the kit's own text; this build's additions are
   gathered at the end of the file under "Build-specific rules".  This stylesheet is a plain file,
   edited directly; the page's ?v= is kept by Build-Scripts/fingerprint_css.py. */

/* Finished HTML kit: the house layout for a single-page reading edition.
   Retune the edition through the tokens in :root; the rules below read only tokens.
   Breakpoints are literal because CSS cannot read a variable inside @media:
   901px docks the Contents panel (DOCK in the page script must match), 720px is narrow. */

:root {
  color-scheme: light;

  /* Palette, light theme.  The dark theme redefines the same names, in the same order, below. */
  --parchment: #f6f1e7;
  --parchment-mid: #eee7d6;
  --parchment-dark: #ddd3bd;
  --ink: #211c15;
  --ink-mid: #44392d;
  --ink-light: #665746;
  --rust: #842727;
  --rust-light: #a13a32;
  --gold: #7b6326;
  --rule: #c5b48f;
  --note-bg: #eee5cf;
  --note-border: #c0a070;
  --shadow: rgba(30, 25, 18, 0.16);
  --paper-highlight: rgba(255, 255, 255, 0.82);
  --paper-texture: rgba(83, 64, 32, 0.018);
  --panel-highlight: rgba(255, 255, 255, 0.28);
  --link-hover-bg: rgba(132, 39, 39, 0.07);
  --backdrop-bg: rgba(22, 18, 14, 0.42);
  --on-accent: white;
  --title-bg: #f5f0e6;
  --title-ink: #1e1913;
  --title-kicker: #9a5c25;
  --title-rule: #b8a678;
  --cover-border: rgb(0, 0, 0);
  --header-shadow: rgba(0, 0, 0, 0.2);
  --toggle-hover-bg: rgba(255, 255, 255, 0.08);
  /* The masthead and footer are dark furniture in both themes. */
  --header-text: #f8f1df;
  --header-bg: rgba(32, 27, 20, 0.97);
  --toggle-hover-color: #e3c46b;
  --nav-accent: #d7b85b;
  --nav-meta: rgba(248, 241, 223, 0.82);
  --footer-text: #eee3ca;
  --footer-bg: #241f18;
  --focus-ring: #d19135;
  --print-ink: #000;
  --print-paper: #fff;
  --print-rule: #999;
  --img-dark-filter: brightness(0.85);

  /* Fonts. */
  --font-body: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Noto Serif CJK TC", Georgia, serif;
  --font-display: "Palatino Linotype", "Book Antiqua", "Noto Serif CJK TC", Georgia, serif;
  --font-title: "Bodoni MT", Didot, "Times New Roman", serif;

  /* Type scale. */
  --text-size: clamp(1.06rem, 0.98rem + 0.24vw, 1.24rem);
  --leading: 1.58;
  --title-size: clamp(3.25rem, 6vw, 6.75rem);
  --title-size-narrow: clamp(2.65rem, 14vw, 4.2rem);
  --h2-size: clamp(1.7rem, 4vw, 2.6rem);
  --chapter-title-size: 2.2rem;
  --box-title-size: 1.35rem;
  --note-size: 0.85rem;
  --label-size: 0.72rem;
  --footer-size: 0.86rem;
  --para-indent: 2em;
  --para-indent-narrow: 1.25em;

  /* Layout.  Column = min(100% - 2 * gutter, measure); body text = column - reading inset, with or
     without page markers.  Shown markers sit in the inset on the right; otherwise it is split evenly. */
  --measure: 52rem;
  --gutter: 1rem;
  --reading-inset: 3.25rem;
  --source-rail: 3.25rem;
  --source-label: 2.75rem;
  --nav-width: 76rem;
  --panel-width: 16rem;
  --header-height: 3.55rem;
  --section-bar-height: 2.15rem;
  --cover-width: min(47rem, 76vw);
  --cover-max: 70%;
  --cover-width-narrow: min(100%, 30rem);
  --cover-frame: 5px;
  --figure-max-height: 72vh;

  /* Rhythm: one gap above and below every main-section rule, measured to ink. */
  --section-gap: clamp(3.5rem, 8vw, 7rem);
  --divider-width: 1px;
  --chapter-gap: 3.5rem;
  --chapter-rule: 1px solid var(--rule);
  --box-pad: 2.5rem;
  --box-pad-narrow: 1.5rem;
  --end-space: 5rem;

  /* Lake's wireless reports: layout A (dispatch card), the Captain's choice, Review 2 fix 2. */
  --ri: calc(2 * var(--text-size));
  --hang: -0.5em;
}

@media (max-width: 900px) {
  :root { --reading-inset: 0rem; }
}

/* Dark theme: System follows the OS unless the reader chose Off; On always wins.
   The two blocks below must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --parchment: #1b1712;
    --parchment-mid: #241f18;
    --parchment-dark: #2c251c;
    --ink: #e8dfc9;
    --ink-mid: #c9bc9c;
    --ink-light: #a89877;
    --rust: #e0785f;
    --rust-light: #ef9478;
    --gold: #d4af5a;
    --rule: #4a4030;
    --note-bg: #2a2318;
    --note-border: #6b5636;
    --shadow: rgba(0, 0, 0, 0.5);
    --paper-highlight: rgba(255, 240, 210, 0.045);
    --paper-texture: rgba(0, 0, 0, 0.32);
    --panel-highlight: rgba(255, 255, 255, 0.06);
    --link-hover-bg: rgba(224, 120, 95, 0.18);
    --backdrop-bg: rgba(0, 0, 0, 0.6);
    --on-accent: #1b1712;
    --title-bg: #17130f;
    --title-ink: #f2e9d6;
    --title-kicker: #dba765;
    --title-rule: #6b5636;
    --cover-border: rgba(232, 223, 201, 0.4);
    --header-shadow: rgba(0, 0, 0, 0.5);
    --toggle-hover-bg: rgba(255, 255, 255, 0.12);
  }

  :root:not([data-theme="light"]) img { filter: var(--img-dark-filter); }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --parchment: #1b1712;
  --parchment-mid: #241f18;
  --parchment-dark: #2c251c;
  --ink: #e8dfc9;
  --ink-mid: #c9bc9c;
  --ink-light: #a89877;
  --rust: #e0785f;
  --rust-light: #ef9478;
  --gold: #d4af5a;
  --rule: #4a4030;
  --note-bg: #2a2318;
  --note-border: #6b5636;
  --shadow: rgba(0, 0, 0, 0.5);
  --paper-highlight: rgba(255, 240, 210, 0.045);
  --paper-texture: rgba(0, 0, 0, 0.32);
  --panel-highlight: rgba(255, 255, 255, 0.06);
  --link-hover-bg: rgba(224, 120, 95, 0.18);
  --backdrop-bg: rgba(0, 0, 0, 0.6);
  --on-accent: #1b1712;
  --title-bg: #17130f;
  --title-ink: #f2e9d6;
  --title-kicker: #dba765;
  --title-rule: #6b5636;
  --cover-border: rgba(232, 223, 201, 0.4);
  --header-shadow: rgba(0, 0, 0, 0.5);
  --toggle-hover-bg: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] img { filter: var(--img-dark-filter); }

/* Reading inset: on the right when page markers are shown (they sit in it), else even on both sides. */
body {
  --inset-start: calc(var(--reading-inset) / 2);
  --inset-end: calc(var(--reading-inset) / 2);
}

body:has(.source-page-origin):not(.markers-hidden) {
  --inset-start: 0rem;
  --inset-end: max(var(--reading-inset), var(--source-rail));
}

/* ---- Base ---- */

* { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--header-h-actual, var(--header-height)) + var(--section-bar-height) + 0.75rem);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 10%, var(--paper-highlight), transparent 34rem),
    repeating-linear-gradient(0deg, var(--paper-texture) 0, var(--paper-texture) 1px, transparent 1px, transparent 4px),
    var(--parchment);
  font-family: var(--font-body);
  font-size: var(--text-size);
  line-height: var(--leading);
  text-rendering: optimizeLegibility;
}

a {
  color: var(--rust);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

a:hover { color: var(--rust-light); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.65rem 1rem;
  color: var(--on-accent);
  background: var(--rust);
  transform: translateY(-150%);
}

.skip-link:focus { transform: none; }

/* ---- Masthead ---- */

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  color: var(--header-text);
  background: var(--header-bg);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 0.25rem 1rem var(--header-shadow);
}

.site-nav {
  width: min(100% - 2rem, var(--nav-width));
  min-height: var(--header-height);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: var(--font-display);
  font-size: var(--label-size);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.site-nav a {
  color: inherit;
  text-decoration: none;
}

.nav-leading {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.contents-toggle,
.contents-close,
.contents-backdrop {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.contents-toggle {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--header-text);
  background: transparent;
  border-radius: 0.25rem;
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1;
}

.contents-toggle:hover,
.contents-toggle[aria-expanded="true"] {
  color: var(--toggle-hover-color);
  background: var(--toggle-hover-bg);
}

.nav-brand {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.55rem;
  row-gap: 0.08rem;
  font-size: 0.86rem;
  line-height: 1.3;
}

.nav-title,
.nav-meta-group,
.top-link { white-space: nowrap; }

.nav-meta-group {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}

.nav-separator {
  color: var(--nav-accent);
  font-size: 0.68rem;
}

.nav-meta {
  color: var(--nav-meta);
  font-size: 0.54rem;
  letter-spacing: 0.045em;
}

/* ---- Floating section bar: sticks under the masthead, names the current section ---- */

.section-bar {
  position: sticky;
  z-index: 25;
  top: var(--header-h-actual, var(--header-height));
  display: flex;
  align-items: center;
  min-height: var(--section-bar-height);
  color: var(--ink-light);
  background: var(--parchment-mid);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 0.15rem 0.4rem var(--shadow);
  font-family: var(--font-display);
  font-size: var(--label-size);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms, padding-left 180ms ease;
}

.section-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 160ms ease, transform 160ms ease, padding-left 180ms ease;
}

.section-bar-inner {
  width: min(100% - 2 * var(--gutter), var(--measure));
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--inset-start) var(--inset-end);
  display: flex;
  align-items: center;
}

main {
  min-height: 100vh;
  overflow-x: clip;
  transition: margin-left 180ms ease;
}

/* ---- Title page ---- */

.title-page {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem var(--section-gap);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  background: var(--title-bg);
  text-align: center;
  text-indent: 0;
}

.title-page h1 {
  margin: 0;
  color: var(--title-ink);
  font-family: var(--font-title);
  font-size: var(--title-size);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.82;
  text-transform: uppercase;
}

.kicker {
  margin: clamp(1.45rem, 2.8vw, 2.2rem) 0 0;
  color: var(--title-kicker);
  font-family: var(--font-title);
  font-size: clamp(0.74rem, 1.2vw, 1rem);
  letter-spacing: 0.34em;
  line-height: 1.3;
  text-transform: uppercase;
}

.title-rule {
  width: 8rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.75rem, 5vw, 3.75rem);
  border-top: 1px solid var(--title-rule);
}

.cover-figure {
  width: var(--cover-width);
  max-width: var(--cover-max);
  margin: 0;
  border: var(--cover-frame) solid var(--cover-border);
}

.cover-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.1) contrast(1.03);
}

.title-credits {
  margin-top: 1.65rem;
  text-box: trim-end text;
}

.credit { margin: 0; }

.edition {
  margin: 0.25rem 0 0;
  color: var(--rust);
  font-weight: 700;
}

.edition span { color: var(--ink); }

.library-edition {
  margin: 0.35rem 0 0;
  color: var(--ink-light);
  font-family: var(--font-display);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow {
  margin: 1rem 0 0.25rem;
  color: var(--rust);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---- Main sections: each opens with the spacing-line-spacing divider ---- */

.document-section {
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
  padding: var(--section-gap) var(--inset-end) var(--section-gap) var(--inset-start);
  border-top: var(--divider-width) solid var(--rule);
}

/* A section's padding is the gap the reader sees: its first and last lines are trimmed to the
   glyphs, and its first and last in-flow children lose their outer margins.  The trim sits on the
   text block itself; Chromium can skip a section-level trim when a marker is its first or last child. */
.document-section > :first-child:not(.source-page-origin),
.document-section > .source-page-origin:first-child + * { margin-top: 0; }

:is(.document-section, .chapter, .source-note) > :not(.source-page-origin):is(:last-child, :has(+ .source-page-origin:last-child)) {
  margin-bottom: 0;
}

.document-section > h2,
.chapter-title { text-box: trim-start text; }

:where(.document-section, .chapter) > :where(:not(.source-page-origin, .chapter, .note-box, .source-note, .table-scroll):is(:last-child, :has(+ .source-page-origin:last-child))) {
  text-box: trim-end text;
}

/* The trim is progressive enhancement.  Without text-box, these em offsets (measured for the house
   fonts) stand in for it: the heading glyphs' overhang above the line box, and the leading of a line. */
@supports not (text-box: trim-both text) {
  .document-section > h2,
  .source-note > h2 { padding-top: 0.09em; }

  .chapter-title { padding-top: 0.2em; }

  .document-section > :not(.source-page-origin, h2, .note-box, .table-scroll):is(:first-child, .source-page-origin:first-child + *) {
    margin-top: -0.14em;
  }

  :is(.document-section, .chapter, .source-note) > :not(.source-page-origin, .chapter, .note-box, .source-note, .table-scroll, .contents-page):is(:last-child, :has(+ .source-page-origin:last-child)),
  .document-section > :has(+ .source-note) { margin-bottom: -0.14em; }
}

.document-section:last-child { padding-bottom: var(--end-space); }

.document-section > h2 {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: 1.2;
  text-align: center;
}

:is(.document-section, .chapter) > p {
  margin: 0.8rem 0;
  text-align: justify;
  text-indent: var(--para-indent);
  text-wrap: pretty;
}

/* Chromium can stretch a pretty-wrapped last line that ends in an absolute marker. */
.document-section p:has(> .source-page-origin:last-child) { text-wrap: wrap; }

/* ---- Small chapters: a lighter rule and gap between them, never the main divider ---- */

/* The rule spans the whole column; the negative margins and matching padding leave the text in place. */
.chapter ~ .chapter {
  margin: var(--chapter-gap) calc(-1 * var(--inset-end)) 0 calc(-1 * var(--inset-start));
  padding: var(--chapter-gap) var(--inset-end) 0 var(--inset-start);
  border-top: var(--chapter-rule);
}

.chapter-title {
  margin: 0 0 2rem;
  color: var(--rust);
  font-family: var(--font-display);
  font-size: var(--chapter-title-size);
  line-height: 1;
  text-align: center;
}

.chapter-title .eyebrow { margin: 0 0.9rem 0 0; }

/* ---- Colophon: a single top rule, no card ---- */

/* Left-aligned (Captain Review 2, fix 3; it was centred): every row, and every wrapped line of a long value, starts at
   the column's left edge. */
/* Captain order, 2026-10-11: made uniform with On War's colophon -- 0.9rem, a two-column grid of labels and values,
   semibold body-font labels (no small caps), values kept as written. */
.colophon { font-size: 0.9rem; }

.colophon dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  text-align: left;
  text-box: trim-both text;
}

.colophon dt {
  color: var(--ink-light);
  font-weight: 600;
}

.colophon dd {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* In the grid the dl's own text trim does not reach its items, so the first row's tops and the last row's bottoms are
   trimmed on the items themselves, keeping the divider gaps equal to the build's others. */
@media (min-width: 561px) {
  .colophon :is(dt:first-child, dt:first-child + dd) { text-box: trim-start text; }
  .colophon dd:last-child { text-box: trim-end text; }
}

@media (max-width: 560px) {
  .colophon dl { display: block; }
  .colophon dt { margin-top: 0.7rem; }
  .colophon dt:first-child { margin-top: 0; }
}

/* ---- In-page Contents ---- */

.contents-page { margin-top: 1.75rem; }

.contents-page-group + .contents-page-group { margin-top: 2rem; }

.contents-page-part {
  margin: 0 0 0.75rem;
  text-align: left;
}

.contents-page-part a,
.major-links > a {
  display: block;
  color: var(--ink);
  background: var(--parchment-mid);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
}

.contents-page-part a {
  padding: 0.6rem 0.85rem;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}

.contents-page-part a:hover,
.major-links > a:hover {
  border-color: var(--gold);
  color: var(--rust);
}

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

.contents-page-list li + li { margin-top: 0.15rem; }

.contents-page-list a {
  display: block;
  padding: 0.32rem 0.4rem;
  color: var(--ink-mid);
  border-radius: 3px;
  font-size: 0.94rem;
  line-height: 1.4;
  text-decoration: none;
}

.contents-page-list a:hover {
  color: var(--rust);
  background: var(--link-hover-bg);
}

/* The section's last ink is this label, not its click padding. */
.contents-page-group:last-child li:last-child a { padding-bottom: 0; }

.contents-page-list.two-col { columns: 2; column-gap: 2rem; }
.contents-page-list.two-col li { break-inside: avoid; }

/* ---- Note boxes (optional; switched from the Contents panel) ---- */

.note-box {
  margin: 1.5rem 0 1.5rem 1.6rem;
  padding: 0.7rem 0.9rem;
  color: var(--ink-mid);
  background: var(--note-bg);
  border-left: 3px solid var(--note-border);
  font-size: var(--note-size);
  line-height: var(--leading);
  text-align: left;
  text-indent: 0;
}

.note-box p { margin: 0 0 0.45rem; }
.note-box > :last-child { margin-bottom: 0; }

.note-ref {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--rust);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.source-footnote-call {
  margin-left: 0.08em;
  font-size: 0.66em;
  line-height: 0;
  vertical-align: super;
}

.source-footnote-call a {
  color: var(--rust);
  text-decoration: none;
}

.source-footnote-call a:is(:hover, :focus-visible) { text-decoration: underline; }

body.notes-hidden .note-box,
.note-box.is-hidden { display: none; }

/* ---- Source-page markers in the right rail (optional; PDF sources only) ---- */

.source-page-origin {
  position: absolute;
  right: 0;
  width: var(--source-label);
  margin: 0.15rem 0 0;
  color: var(--ink-light);
  font-family: var(--font-display);
  font-size: 0.44rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: right;
  text-indent: 0;
  text-transform: uppercase;
  scroll-margin-top: 6rem;
}

.source-page-origin span {
  display: block;
  white-space: nowrap;
}

.title-page > .source-page-origin {
  right: max(1rem, calc(50% - var(--measure) / 2));
  margin: 0;
}

/* Markers off: the inset re-centres the text; its width does not change. */
body.markers-hidden .source-page-origin { display: none; }

/* ---- Figures and tables (optional) ---- */

.source-figure {
  margin: 1.75rem auto;
  text-align: center;
}

.source-figure + .source-figure { margin-top: 3.5rem; }

.source-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: var(--figure-max-height);
  margin-inline: auto;
  object-fit: contain;
}

.source-figure.framed img { border: var(--cover-frame) solid var(--cover-border); }

.source-figure figcaption {
  margin-top: 0.65rem;
  color: var(--ink-light);
  font-size: 0.83rem;
  font-style: italic;
}

.figure-full {
  display: block;
  cursor: zoom-in;
}

.figure-full img { transition: filter 140ms ease; }
.figure-full:is(:hover, :focus-visible) img { filter: brightness(1.04); }

.table-scroll {
  margin: 1.6rem 0;
  overflow-x: auto;
}

.source-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.source-table caption {
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  color: var(--rust);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
}

.source-table th,
.source-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  text-indent: 0;
  vertical-align: top;
}

.source-table thead th {
  color: var(--rust);
  background: var(--note-bg);
  border-bottom: 2px solid var(--note-border);
  font-family: var(--font-display);
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.source-table tbody tr:last-child > * { border-bottom: 0; }
.source-table tbody tr:nth-child(even) { background: var(--parchment-mid); }

.source-table tbody th[scope="row"] {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Reference: always the last section; the archival-edition box is its last element ---- */

.reference > p {
  margin: 1.1rem 0;
  padding-left: 2em;
  text-indent: -2em;
  text-align: left;
  text-wrap: pretty;
}

.permalink { overflow-wrap: anywhere; }

/* Captain order, 2026-10-10: the box closes Reference, so no divider line sits between them; the box stands 1.5rem under
   Reference's last line (1.5rem plus the 0.17rem the last line's text trim removes, to match the Analects gap). */
.source-note {
  position: relative;
  margin: 1.67rem calc(-1 * var(--inset-end)) 0 calc(-1 * var(--inset-start));
  padding: var(--box-pad);
  background: var(--note-bg);
  border: 1px solid var(--rule);
  box-shadow: 0 0.8rem 2rem var(--shadow);
  text-box: trim-both text;
}

.document-section > :has(+ .source-note) { text-box: trim-end text; }

.source-note > h2 {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--box-title-size);
  line-height: 1.2;
  text-align: left;
}

/* ---- Footer: dark bar in both themes ---- */

.site-footer {
  padding: 2.5rem 1rem;
  color: var(--footer-text);
  background: var(--footer-bg);
  border-top: 3px solid var(--gold);
  font-size: var(--footer-size);
  text-align: center;
  text-indent: 0;
}

.site-footer p { margin: 0.2rem; }
.site-footer a { color: var(--toggle-hover-color); }

/* ---- Contents panel: docked on wide screens, an overlay on narrow ones ---- */

.contents-panel {
  position: fixed;
  z-index: 40;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  width: min(var(--panel-width), calc(100vw - 3rem));
  padding: 1.25rem 1rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, var(--paper-texture) 0, var(--paper-texture) 1px, transparent 1px, transparent 4px),
    var(--parchment);
  border-right: 1px solid var(--rule);
  box-shadow: 0.5rem 0 1.4rem var(--shadow);
  font-size: 1rem;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 180ms ease, visibility 0s linear 180ms;
}

.contents-open .contents-panel {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.contents-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.contents-panel-head .eyebrow { margin-top: 0; }

.contents-panel-head h2 {
  margin: 0;
  font-size: 1.65rem;
}

.contents-close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--ink-light);
  background: transparent;
  border-radius: 0.25rem;
  font-size: 1.6rem;
  line-height: 1;
}

.contents-close:hover {
  color: var(--rust);
  background: var(--link-hover-bg);
}

.contents-backdrop {
  position: fixed;
  z-index: 35;
  inset: var(--header-height) 0 0;
  display: none;
  padding: 0;
  background: var(--backdrop-bg);
}

/* Display switches: one recessed control surface per group. */
.display-controls {
  margin: 1rem 0 1.25rem;
  padding: 0.55rem 0.7rem 0.6rem;
  background: var(--parchment-dark);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 2px 6px var(--shadow), inset 0 1px 0 var(--panel-highlight);
}

.display-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.28rem 0;
}

.display-toggle-master {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--note-border);
}

.display-toggle-child { padding-left: 0.85rem; }

.display-toggle-label {
  color: var(--ink-mid);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.display-toggle-child .display-toggle-label {
  color: var(--ink-light);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
}

.display-toggle-switch,
.theme-switch-option {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-light);
  cursor: pointer;
}

.display-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.15rem;
  border: 0;
  background: none;
}

/* A child switch while the master is off: readable, not operable. */
.display-toggle-switch:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.display-toggle-track {
  display: inline-block;
  position: relative;
  width: 1.85rem;
  height: 0.85rem;
  border: 1px solid var(--note-border);
  border-radius: 0.85rem;
  transition: background-color 0.15s ease;
}

.display-toggle-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.13rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--note-border);
  transform: translateY(-50%);
  transition: left 0.15s ease, background-color 0.15s ease;
}

.display-toggle-switch[aria-checked="true"] .display-toggle-track { background: var(--parchment); }

.display-toggle-switch[aria-checked="true"] .display-toggle-track::after {
  left: calc(100% - 0.68rem);
  background: var(--rust);
}

.display-toggle-state {
  min-width: 1.6rem;
  text-align: left;
}

/* Dark Mode: a three-way segmented control (System / Off / On). */
.theme-switch {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--note-border);
  border-radius: 0.85rem;
  overflow: hidden;
}

.theme-switch-option {
  padding: 0.2rem 0.5rem;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--note-border);
  line-height: 1.4;
}

.theme-switch-option:first-child { border-left: 0; }

.theme-switch-option[aria-checked="true"] {
  color: var(--parchment);
  background: var(--rust);
}

.display-toggle-switch:focus-visible,
.theme-switch-option:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

.toc-heading {
  margin: 0;
  color: var(--rust);
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
}

.toc-heading a {
  color: inherit;
  text-decoration: none;
}

.major-links {
  margin: 1.25rem 0 1.75rem;
  display: grid;
  gap: 0.55rem;
}

.major-links > a {
  padding: 0.65rem 0.75rem;
  font-size: var(--label-size);
  letter-spacing: 0.04em;
  text-align: center;
}

.major-links > .toc-group { margin-bottom: 1.1rem; }
.toc-group .toc-heading { margin-block: 1em; }

.chapter-links {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  list-style: none;
}

.chapter-links a {
  display: block;
  padding: 0.35rem 0.25rem;
  color: var(--ink-mid);
  border-bottom: 1px dotted var(--rule);
  text-align: center;
  text-decoration: none;
}

/* The word before each number is for screen readers only. */
.chapter-links span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (min-width: 901px) {
  .contents-open main,
  .contents-open .site-footer { margin-left: var(--panel-width); }
  .contents-open .section-bar { padding-left: var(--panel-width); }
  .site-footer { transition: margin-left 180ms ease; }
}

@media screen and (max-width: 900px) {
  body.contents-open { overflow: hidden; }
  .contents-open .contents-backdrop { display: block; }
}

/* ---- Narrow screens ---- */

@media (max-width: 720px) {
  :root { --ri: calc(1.25 * var(--text-size)); }
  html { scroll-padding-top: calc(8rem + var(--section-bar-height)); }
  .site-nav { gap: 0.75rem; }
  .nav-brand { padding-block: 0.38rem; }
  .nav-meta { font-size: 0.5rem; }
  .title-page { padding: 2.75rem 1rem var(--section-gap); }

  .title-page h1 {
    font-size: var(--title-size-narrow);
    line-height: 0.86;
  }

  .kicker {
    max-width: 23rem;
    letter-spacing: 0.24em;
  }

  .title-rule {
    width: 6rem;
    margin-block: 2.25rem 2.5rem;
  }

  .cover-figure { width: var(--cover-width-narrow); }

  :is(.document-section, .chapter) > p {
    text-align: left;
    text-indent: var(--para-indent-narrow);
  }

  .reference > p { text-indent: -2em; }

  .contents-page-list.two-col { columns: 1; }
  .note-box { margin-left: 0.55rem; }
  .source-note { padding: var(--box-pad-narrow); }
  .source-page-origin { scroll-margin-top: 9rem; }
}

/* ---- Print: the page follows whatever the reader chose on screen ---- */

@media print {
  @page {
    size: letter;
    margin: 0.65in 0.7in;
  }

  body {
    color: var(--print-ink);
    background: var(--print-paper);
    font-size: 11pt;
  }

  main { overflow-x: visible; }

  .site-header,
  .section-bar,
  .skip-link,
  .contents-backdrop,
  .contents-toggle,
  .contents-close,
  .display-controls,
  .site-footer a[href="#top"] { display: none; }

  a {
    color: var(--print-ink);
    text-decoration: none;
  }

  .title-page {
    min-height: 8.4in;
    padding: 0.5in 0;
    background: var(--print-paper);
  }

  .cover-figure,
  .cover-figure img {
    width: auto;
    max-width: 100%;
    max-height: 4in;
  }

  .document-section {
    width: 100%;
    break-before: page;
  }

  .contents-panel {
    position: static;
    width: 100%;
    padding: 0.35in 0;
    overflow: visible;
    border-right: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    break-before: page;
    break-after: page;
  }

  h2,
  h3,
  h4 { break-after: avoid; }

  .note-box,
  figure,
  tr { break-inside: avoid; }

  .table-scroll { overflow-x: visible; }
  .source-table tbody tr:nth-child(even) { background: transparent; }
  .source-table :is(th, td) { border-bottom: 1px solid var(--print-rule); }

  .source-note {
    background: none;
    border: 0;
    box-shadow: none;
  }

  .site-footer {
    margin-top: 0.3in;
    padding-top: 0.15in;
    color: var(--print-ink);
    background: none;
    border-top: 1px solid var(--print-rule);
  }

  /* An absolute box is lost where its container spans pages; a float fragments with the text. */
  .source-page-origin {
    position: static;
    float: right;
    width: auto;
    margin: 0 0 0.04in 0.14in;
  }

  .source-page-origin span { display: inline; }
  .source-page-origin span + span::before { content: " "; }
}

/* !important is unavoidable here: reduced motion must beat every transition, whatever its specificity.
   "none", not a 0.01ms duration: a tiny duration with the default transition-property "all"
   animates every property change on every element for one frame. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Build-specific rules (Lovecraft-mountains-madness) ---- */

/* The verse (Chapter 1) and the four dashed lines that frame the radio messages (Chapter 2) keep the
   layout the approved Basic HTML gave them: flush left, no first-line indent.  The kit indents and
   justifies every paragraph; the verse's lines end in a <br>, so an indent would set its first line
   alone to the right of the other four. */
.document-section > p:is(.verse, .dashes) {
  text-align: left;
  text-indent: 0;
}

/* The title is long and has no hard break in its text: let the browser balance its lines, so that
   "Madness" is not left alone on a second line at the widths where the title wraps in two. */
.title-page h1 { text-wrap: balance; }

/* The stamp is letter-spaced, and the browser adds that space after its last letter too, so its ink
   sits half a letter-space left of the centre line.  An equal space on the left puts the ink on it. */
.title-page .library-edition { padding-left: 0.14em; }

/* ---- Captain Review 2, first batch ---- */

/* The verse (Chapter 1) is set one indentation layer in: the paragraph-indent step as a left margin of the whole
   block, so that its lines keep their breaks and stay together, and its left edge stands where the first lines of the
   prose paragraphs start.  The step is the stylesheet's own: 2em, and 1.25em at 720px and below. */
.document-section > p.verse { margin-left: var(--para-indent); }

@media (max-width: 720px) {
  .document-section > p.verse { margin-left: var(--para-indent-narrow); }
}

/* The credit line in a picture's caption: its own line, upright (the caption itself is italic), so that the
   magazine's title, set in <i>, shows as a title.  A caption that is only the credit has no gap above it. */
.figure-credit {
  display: block;
  margin-top: 0.3rem;
  font-style: normal;
}

figcaption > .figure-credit:first-child { margin-top: 0; }

/* The title image spans the reading column: as wide as the rules of the sections below it (the column is the width of
   <main> less two gutters, up to the measure).  The title page's own side padding (1.5rem a side, 1rem at 720px and
   below) is taken back, so that the figure is that wide at every width, and nothing caps it. */
:root {
  --cover-width: min(100% + 3rem - 2 * var(--gutter), var(--measure));
  --cover-max: none;
}

@media (max-width: 720px) {
  :root { --cover-width-narrow: min(100% + 2rem - 2 * var(--gutter), var(--measure)); }
}

/* Its caption sits inside the frame, under the picture, as the other pictures' captions sit under theirs. */
.cover-figure figcaption {
  padding: 0.75rem 1rem 0.9rem;
  color: var(--ink-light);
  font-size: 0.83rem;
  font-style: italic;
}

/* In print the kit caps the picture at 4in; with a caption inside, the frame must not be capped with it, and (the caption
   making the frame as wide as the page) the picture stays centred in it. */
@media print {
  .cover-figure { max-height: none; }
  .cover-figure img { margin-inline: auto; }
}

/* Lake's wireless reports: layout A, the dispatch card — Captain's choice, Review 2. */
:root { --card-pad: 1.5rem; --card-edge: 1.5rem; --card-gap: 0.8rem; }

:is(p.report, p.report-rule) {
  margin: 0 var(--ri);
  padding: 0 var(--card-pad);
  background: var(--parchment-mid);
  border: 0 solid var(--rule);
  border-inline-width: 1px;
}

p.report { text-indent: var(--hang); }

p.report:not(.run-open) { padding-top: var(--card-gap); }

p.run-open {
  margin-top: var(--card-edge);
  padding-top: var(--card-pad);
  border-top-width: 1px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

p.run-close {
  margin-bottom: var(--card-edge);
  padding-bottom: var(--card-pad);
  border-bottom-width: 1px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

p.report-rule {
  padding-top: 1.05rem;
  padding-bottom: 0.15rem;
  color: var(--ink-light);
  font-size: 0.8em;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 720px) {
  :root { --card-pad: 0.95rem; --card-edge: 1.2rem; }
}