/* The history book. The page around it is the site's own; the book is a
   deliberate contrast: parchment, ink, and old serif type. It stays
   parchment in dark mode, as a real book would on a dark desk. */
.history-main {
  --paper: #efe2c3;
  --paper-deep: #e3d0a6;
  --ink: #2a1d12;
  --ink-soft: #5b4631;
  --ink-faint: #8a7356;
  --leather: #3e2318;
  --gilt: #d2b468;
  --serif: "EB Garamond", Garamond, "Hoefler Text", "Times New Roman", serif;
  --fell: "IM Fell English", var(--serif);
  --fell-sc: "IM Fell English SC", var(--serif);
  /* Grain for the paper: fine noise, then broad blotches, both inline so the
     site stays free of image files for it. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='f' x='0' y='0' width='256' height='256' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8203125' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='f' x='0' y='0' width='512' height='512' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0078125' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .16 0 0 0 1.5 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --hide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='f' x='0' y='0' width='256' height='256' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.546875' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

.history-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px; padding-block: 22px 14px; }
.history-top h1 { font-size: clamp(2.4rem, 4vw, 3rem); }
.history-about { max-width: 52ch; color: var(--muted); font-size: 0.95rem; }
.history-about a { text-underline-offset: 3px; }

/* ---- the plates' sprite ---- */
.plates { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- shared by the list and the book ---- */
:is(.history, .book) { font-family: var(--serif); color: var(--ink); font-feature-settings: "liga", "onum"; }
:is(.history, .book) a { color: inherit; text-decoration-thickness: 0.5px; text-underline-offset: 0.18em; text-decoration-color: var(--ink-faint); }
:is(.history, .book) a:hover { text-decoration-color: currentColor; }
:is(.history, .book) a:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 1px; }
:is(.history, .book) :is(h2, h3, p, ul, ol) { margin: 0; }
/* Code is set in a typewriter face: the text face's caret and doubled
   hyphen are too slight to read `shared@^1` or `--offline` by. A flag or a
   path never breaks at its own hyphens; a code span of several words breaks
   only between them. */
:is(.history, .book) code {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.86em;
  font-style: normal;
  font-variant-ligatures: none;
  font-feature-settings: normal;
  color: #3b2a1a;
  background: none;
  border: 0;
  padding: 0;
  white-space: nowrap;
}
:is(.history, .book) code.words { white-space: normal; }
:is(.history, .book) code.words > span { white-space: nowrap; }
:is(.history, .book) strong { font-weight: 600; }

.chapters { counter-reset: chapter; }
.chapter { counter-increment: chapter; }
.chapter-head { text-align: center; }
.chapter-head::before {
  content: "Chapter " counter(chapter, upper-roman);
  display: block;
  font-family: var(--fell-sc);
  font-size: 0.92em;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
:is(.history, .book) .chapter-head h2 { font-family: var(--fell); font-weight: 400; font-size: 2.15em; line-height: 1.05; letter-spacing: 0.01em; }
.chapter-head h2 a { text-decoration: none; }
.chapter-head h2 a:hover { text-decoration: underline; }
.chapter-date { display: block; margin-top: 0.15em; font-family: var(--serif); font-style: italic; font-size: 0.42em; letter-spacing: 0.04em; color: var(--ink-soft); }
.chapter-head::after {
  content: "";
  display: block;
  width: 7em;
  height: 0.55em;
  margin: 0.45em auto 0;
  background:
    radial-gradient(circle, var(--ink) 0 1.6px, transparent 2px) center / 0.55em 0.55em no-repeat,
    linear-gradient(var(--ink), var(--ink)) left center / 2.9em 0.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right center / 2.9em 0.5px no-repeat;
}

.plate { margin: 0; text-align: center; }
.plate svg { display: block; width: 100%; height: auto; }
.plate::after {
  content: "Plate " counter(chapter, upper-roman);
  display: block;
  margin-top: 0.3em;
  font-family: var(--fell-sc);
  font-size: 0.78em;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.plate.ornament::after { content: none; }

.chapter-text { hyphens: auto; -webkit-hyphens: auto; }
.chapter-text p, .chapter-text li { text-align: justify; text-wrap: pretty; }
:is(.history, .book) .chapter-text h3 {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0.75em 0 0.35em;
  font-family: var(--fell-sc);
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.chapter-text h3::before, .chapter-text h3::after { content: ""; flex: 1; border-top: 0.5px solid var(--ink-faint); }
.chapter-text ul { list-style: none; padding: 0; }
.chapter-text li { position: relative; padding-left: 1.05em; margin-top: 0.28em; }
.chapter-text li::before { content: "¶"; position: absolute; left: 0; top: 0; color: var(--ink-faint); font-size: 0.9em; }
/* A boxed initial with a hatched ground, after the factotum initials of old
   printers. */
.incipit::first-letter {
  float: left;
  margin: 0.08em 0.14em 0 0;
  padding: 0.1em 0.12em 0.02em;
  font-family: var(--fell);
  font-size: 3.15em;
  line-height: 0.82;
  color: var(--ink);
  border: 0.5px solid var(--ink);
  background: repeating-linear-gradient(-45deg, rgb(42 29 18 / 0.22) 0 0.5px, transparent 0.5px 3px);
}
.incipit { font-size: 1.04em; display: flow-root; }

:is(.history, .book) :is(.contents, .preface) h2 {
  font-family: var(--fell-sc);
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: 0.14em;
  text-align: center;
}
.contents ol { list-style: none; padding: 0; margin-top: 1.1em; counter-reset: toc; }
.contents li { counter-increment: toc; margin-top: 0.75em; }
/* I.  0.1.0  (2026-08-22) . . . . . . 1
         The first release. */
.contents a { display: grid; grid-template-columns: 2.3em auto auto minmax(1em, 1fr) auto; align-items: baseline; column-gap: 0.45em; text-decoration: none; }
.contents a::before { content: counter(toc, upper-roman) "."; font-family: var(--fell-sc); color: var(--ink-soft); }
.contents a:hover .toc-version { text-decoration: underline; text-decoration-thickness: 0.5px; }
.toc-version { font-family: var(--fell); font-size: 1.12em; }
.toc-date { font-style: italic; color: var(--ink-soft); font-size: 0.92em; }
.toc-title { grid-column: 2 / -1; grid-row: 2; font-style: italic; font-size: 0.9em; line-height: 1.3; color: var(--ink-soft); }
.toc-title code { font-size: 0.92em; }
.contents a::after { content: ""; grid-column: 4; grid-row: 1; align-self: end; margin-bottom: 0.3em; border-bottom: 1.5px dotted var(--ink-faint); }
.toc-page { grid-column: 5; grid-row: 1; }
.history .contents a::after { display: none; }

.preface p { margin-top: 0.8em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-indent: 1.4em; }
.preface h2 + p { text-indent: 0; margin-top: 1.1em; }

.title-page { text-align: center; }
.tp-small { font-family: var(--fell-sc); letter-spacing: 0.3em; font-size: 1.1em; }
.tp-title { font-family: var(--fell); font-size: 2.6em; line-height: 1.02; margin-top: 0.1em !important; }
.tp-sub { font-style: italic; font-size: 1.02em; line-height: 1.35; max-width: 20em; margin: 0.9em auto 0 !important; color: var(--ink-soft); }
.tp-mark, .finis-mark { display: block; width: 7.5em; margin: 1.4em auto; color: var(--ink); }
.tp-imprint { font-family: var(--fell-sc); letter-spacing: 0.16em; line-height: 1.7; font-size: 0.95em; }
.finis { text-align: center; }
.finis-word { font-family: var(--fell); font-style: italic; font-size: 2.4em; }
.colophon { font-size: 0.86em; line-height: 1.45; font-style: italic; color: var(--ink-soft); max-width: 24em; margin: 0 auto !important; }
.half-title p { font-family: var(--fell-sc); letter-spacing: 0.22em; font-size: 1.15em; text-align: center; }

/* ---- the list: no JavaScript, or reduced motion ---- */
.history:not(.is-source) {
  max-width: 44rem;
  margin: 0 auto 96px;
  padding: 0 16px;
  font-size: 1.06rem;
  line-height: 1.5;
}
.history:not(.is-source) [data-book-only] { display: none; }
.history:not(.is-source) .sheet,
.history:not(.is-source) .chapter {
  padding: clamp(28px, 6vw, 56px) clamp(22px, 7vw, 64px);
  margin-top: 28px;
  background-color: var(--paper);
  background-image: radial-gradient(130% 100% at 50% 50%, transparent 55%, rgb(130 85 35 / 0.22)), var(--mottle), var(--grain);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 10px 28px -12px rgb(40 25 10 / 0.35);
}
.history:not(.is-source) .chapters { list-style: none; padding: 0; }
.history:not(.is-source) .plate { margin: 1.4em auto 1.2em; max-width: 30rem; }
.history:not(.is-source) .title-page { padding-block: 56px; }
.history:not(.is-source) .tp-imprint { margin-top: 0; }
.history.is-source { display: none; }
/* Until history.js has built the book, keep the list it is built from off
   screen; the stage holds the book's place. */
.book-pending .history { display: none; }

/* ---- the stage and its controls ---- */
/* The turn buttons stand either side of the book; on a phone, where there is
   no room beside it, they go under it, either side of the status line. */
.stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "prev book next" ". foot .";
  align-items: center;
  column-gap: 28px;
  padding: 4px 16px 64px;
  overflow-x: clip;
}
.stage[hidden] { display: none; }
.stage .book { grid-area: book; }
.turn-prev { grid-area: prev; justify-self: end; }
.turn-next { grid-area: next; justify-self: start; }
.book-foot { grid-area: foot; display: grid; justify-items: center; gap: 6px; margin-top: 22px; }
.turn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--canvas);
  border: 1.5px solid var(--strong);
  color: var(--fg);
  cursor: pointer;
}
.turn:hover:not(:disabled) { background: var(--fg); color: var(--canvas); }
.turn:disabled { opacity: 0.3; cursor: default; }
.book-status { text-align: center; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--muted); min-height: 1.5em; }
.book-hint { font-family: var(--mono); font-size: 0.6rem; color: var(--faint); text-align: center; }
.book-hint kbd { font-family: var(--mono); font-size: 0.6rem; padding: 2px 5px; border: 1px solid var(--line); }
@media (max-width: 820px) {
  .stage { grid-template-columns: auto 1fr auto; grid-template-areas: "book book book" "prev foot next"; column-gap: 12px; row-gap: 16px; }
  .stage .book { justify-self: center; }
  .turn-prev, .turn-next { justify-self: center; }
  .book-foot { margin-top: 0; }
  .book-hint { display: none; }
}

/* ---- the book ---- */
.book {
  --page-w: 480px;
  --page-h: 680px;
  --fs: 14px;
  --thick-l: 0px;
  --thick-r: 0px;
  position: relative;
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.36;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.book[data-mode="single"] { width: var(--page-w); }
.book-block {
  position: absolute;
  inset: 0;
  /* history.js places the turning leaf's shadow by this same distance. */
  perspective: calc(var(--page-w) * 7);
  transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.25, 1);
}
/* A closed book is one page wide; it slides to the middle of the spread's
   place so it doesn't sit off to one side. */
.book[data-closed="front"] .book-block { transform: translateX(-25%); }
.book[data-closed="back"] .book-block { transform: translateX(25%); }

/* The block of pages under the open leaves: its shadow on the desk, and the
   edges of the pages on either side, thicker where more pages lie. */
.under { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--paper-deep); }
.under-l { left: 0; }
.under-r { left: 50%; }
.book[data-mode="single"] .under-r { left: 0; width: 100%; }
.book[data-mode="single"] .under-l { display: none; }
.under { box-shadow: 0 2px 3px rgb(30 18 8 / 0.25), 0 18px 36px -14px rgb(30 18 8 / 0.5); }
.under::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: repeating-linear-gradient(90deg, #f3e9d0 0 1px, #cdb88c 1px 1.6px, #e9dcbc 1.6px 2.4px);
  box-shadow: 0 2px 3px rgb(30 18 8 / 0.2);
}
.under-l::after { right: 100%; width: var(--thick-l); }
.under-r::after { left: 100%; width: var(--thick-r); }
.under[hidden] { display: none; }

.leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}
.book[data-mode="single"] .leaf { left: 0; width: 100%; }
.leaf.turned { transform: rotateY(-180deg); }
.leaf.away { visibility: hidden; }
.face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }
.shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.face.front .shade { background: linear-gradient(90deg, rgb(25 14 4 / 0.28), rgb(25 14 4 / 0.62)); }
.face.back .shade { background: linear-gradient(270deg, rgb(25 14 4 / 0.28), rgb(25 14 4 / 0.62)); }
/* The shadow a turning leaf throws on the page beneath it, moved by
   history.js to follow the leaf's free edge. */
.cast-clip { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; pointer-events: none; z-index: 900; }
.cast-clip-r { left: 50%; }
.cast-clip-l { right: 50%; }
.book[data-mode="single"] .cast-clip-r { left: 0; width: 100%; }
.book[data-mode="single"] .cast-clip-l { display: none; }
.cast { position: absolute; inset: 0; opacity: 0; }
.cast-r { transform-origin: 0 50%; background: linear-gradient(90deg, rgb(25 14 4 / 0.62), rgb(25 14 4 / 0.24) 22%, transparent 60%); }
.cast-l { transform-origin: 100% 50%; background: linear-gradient(270deg, rgb(25 14 4 / 0.62), rgb(25 14 4 / 0.24) 22%, transparent 60%); }

/* A page that can be turned lifts a little at its corner under the pointer. */
@media (hover: hover) {
  .book.at-rest .leaf.can-lift { transition: transform 0.25s ease-out; }
  .book.at-rest .leaf.can-lift.lift { transform: rotateY(-7deg); }
  .book.at-rest .leaf.turned.can-lift.lift { transform: rotateY(-173deg); }
}
.book .face { cursor: pointer; }

/* ---- a page ---- */
.page {
  position: absolute;
  inset: 0;
  padding: 9.5% 8% 9% 9.5%;
  font-size: calc(var(--fs) * var(--fit, 1));
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 95% at 50% 46%, rgb(255 249 230 / 0.4), transparent 62%),
    radial-gradient(140% 120% at 50% 50%, transparent 60%, rgb(140 92 38 / 0.24)),
    var(--mottle),
    var(--grain);
  background-position: 0 0, 0 0, var(--mottle-at, 0 0), 0 0;
}
.face.back .page { padding: 9.5% 9.5% 9% 8%; }
/* The curve of the paper into the spine: darker toward the gutter. */
.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(70 42 14 / 0.3), rgb(70 42 14 / 0.08) 4%, transparent 11%);
}
.face.back .page::after { background: linear-gradient(270deg, rgb(70 42 14 / 0.3), rgb(70 42 14 / 0.08) 4%, transparent 11%); }
.page-inner { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.page-inner > * { flex: none; }
.runhead, .folio {
  position: absolute;
  left: 9.5%;
  right: 8%;
  font-family: var(--fell-sc);
  font-size: calc(var(--fs) * 0.78);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-align: center;
}
.face.back .runhead, .face.back .folio { left: 8%; right: 9.5%; }
.runhead { top: 4%; }
.runhead::after { content: ""; display: block; margin-top: 0.35em; border-top: 0.5px solid var(--ink-faint); }
.folio { bottom: 3.4%; font-family: var(--serif); letter-spacing: 0.04em; }

.page .chapter-head { margin-bottom: 0.3em; }
.page .plate { flex: 1 1 0; min-height: var(--plate-min, 9em); display: grid; place-items: center; container-type: size; margin-block: 0.2em 0.5em; }
.page .plate-box { width: min(100cqw, calc((100cqh - 1.5em) * 4 / 3)); }
.page .plate::after { display: none; }
.page .plate-box::after {
  content: "Plate " attr(data-plate);
  display: block;
  margin-top: 0.25em;
  font-family: var(--fell-sc);
  font-size: 0.78em;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  line-height: 1.2;
}
.page .plate.ornament .plate-box::after { content: none; }
.page .flow > * + * { margin-top: 0.42em; }
.page .flow > ul + ul { margin-top: 0.28em; }
.page .tail { display: block; width: 5.5em; margin: 1.1em auto 0; color: var(--ink-soft); }
/* A phone's measure is too short to justify: a long code span leaves rivers
   of space. */
.book[data-mode="single"] .chapter-text :is(p, li) { text-align: left; }

/* Front matter, set on its own pages. */
.page.title-page .page-inner, .page.half-title .page-inner, .page.finis .page-inner { justify-content: center; }
.page.title-page .tp-imprint { margin-top: 1.2em; }
.page.preface .page-inner { justify-content: flex-start; padding-top: 22%; }
.page.contents .page-inner { justify-content: flex-start; padding-top: 6%; }

.page.frontispiece { padding: 7% 8%; }
.page.frontispiece figure { margin: 0; height: 100%; display: grid; place-items: center; }
.page.frontispiece svg { width: 100%; height: 100%; }

/* Endpapers: a small printed fleuron in brown ink, repeated. */
.page.endpaper {
  background-color: #e8d7b1;
  background-image:
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgb(110 70 25 / 0.3)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%238f7048' stroke-width='.7' opacity='.75' stroke-linecap='round'%3E%3Cpath d='M22 9c4 4 4 9 0 13c-4-4-4-9 0-13zM22 35c4-4 4-9 0-13c-4 4-4 9 0 13zM9 22c4-4 9-4 13 0c-4 4-9 4-13 0zM35 22c-4-4-9-4-13 0c4 4 9 4 13 0z'/%3E%3Ccircle cx='22' cy='22' r='1.6' fill='%237a5a36'/%3E%3Cpath d='M0 0l4 4M44 0l-4 4M0 44l4-4M44 44l-4-4' /%3E%3C/g%3E%3C/svg%3E"),
    var(--grain);
  background-size: auto, 44px 44px, auto;
}

/* Covers: leather over boards, with a gilt frame. */
.page.cover {
  padding: 0;
  background-color: var(--leather);
  background-image:
    radial-gradient(90% 70% at 40% 35%, rgb(255 220 180 / 0.12), transparent 70%),
    radial-gradient(140% 110% at 50% 50%, transparent 50%, rgb(0 0 0 / 0.45)),
    var(--hide);
  color: var(--gilt);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.5);
}
.page.cover::after { background: linear-gradient(90deg, rgb(0 0 0 / 0.5), rgb(255 230 190 / 0.08) 3%, transparent 7%); }
.face.back .page.cover::after { background: linear-gradient(270deg, rgb(0 0 0 / 0.5), rgb(255 230 190 / 0.08) 3%, transparent 7%); }
.page.cover .page-inner { justify-content: center; align-items: center; text-align: center; }
/* The gilt: a double rule with a fleuron in each corner, sized to the page
   whatever its shape. The back board is blind-stamped, pressed but not
   gilded. */
.cover-frame { position: absolute; inset: 5.5%; border: 1.5px solid var(--gilt); filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.55)); }
.cover-frame::before { content: ""; position: absolute; inset: 5px; border: 0.75px solid var(--gilt); }
.cover-corner { position: absolute; width: 15%; max-width: 64px; color: var(--gilt); }
.cover-corner:nth-child(1) { top: 9px; left: 9px; }
.cover-corner:nth-child(2) { top: 9px; right: 9px; transform: scaleX(-1); }
.cover-corner:nth-child(3) { bottom: 9px; left: 9px; transform: scaleY(-1); }
.cover-corner:nth-child(4) { bottom: 9px; right: 9px; transform: scale(-1); }
.back-cover .cover-frame { border-color: rgb(0 0 0 / 0.38); filter: drop-shadow(0 1px 0 rgb(255 225 180 / 0.1)); }
.back-cover .cover-frame::before { border-color: rgb(0 0 0 / 0.3); }
.cover-rule, .cover-emblem { position: relative; display: block; color: var(--gilt); filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.55)); }
.cover-rule { width: 40%; margin-bottom: 1.4em; }
.cover-emblem { width: 22%; margin-top: 1.6em; }
.cover-title, .cover-sub { position: relative; text-shadow: 0 1px 0 rgb(0 0 0 / 0.65), 0 -1px 0 rgb(255 236 180 / 0.25); }
.cover-title { font-family: var(--fell-sc); font-size: calc(var(--fs) * 3.4); letter-spacing: 0.12em; line-height: 1; margin-right: -0.12em; }
.cover-sub { margin-top: 0.5em !important; font-family: var(--fell); font-style: italic; font-size: calc(var(--fs) * 1.5); letter-spacing: 0.06em; }

/* ---- the measuring room: pages are laid out here, unseen, to find where
   each one breaks ---- */
.meter { position: absolute; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }
.meter .face { position: relative; width: var(--page-w); height: var(--page-h); }

@media (max-width: 620px) {
  .history-top { padding-block: 24px 14px; }
  .history-top h1 { font-size: 2.4rem; }
  .history-about { font-size: 0.88rem; }
}