/* ═══════════════════════════════════════════════════════════════════════════
   FAMILY — PLAIN
   Baptist · Presbyterian · Reformed · Free Church · rural and small-town

   These congregations do not keep the liturgical calendar, so there is no
   season engine here and liturgy.css is never loaded. What they do keep is a
   BOOK. They sing from a numbered hymnal, they preach through books of the
   Bible in order, and they print an order of service every single week. The
   book is the honest visual history of this tradition, and no church template
   anywhere is built on it.

   So this family is a bound page rather than a web page:

     · a RUNNING HEAD across the top instead of a navigation bar
     · a two-track GUTTER — marginal glosses beside the text, as a study Bible
       or a Geneva-notes psalter sets them
     · a TITLE PAGE facing a photographic FRONTISPIECE, which is how a book
       opens; not a full-bleed hero with a scrim over it
     · TIPPED-IN PLATES for photography — hairline-ruled, captioned below
     · hairline RULES and a musical STAVE as the only ornament
     · a real COLOPHON at the foot

   Colour is printing ink on wove paper: blue-black text, a prussian indigo for
   headings and links, an antique ochre for hymn numbers and verse references —
   the two-colour psalter, where the rubrics were printed in a second pass.

   Explicitly not: newsprint (that is Movement), plaster and the liturgical
   five (that is Liturgical), full-bleed heroes, scrims, cards, gradients,
   soft shadows, pill buttons, or a single rounded corner.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --font-display: "Vollkorn", Georgia, "Iowan Old Style", serif;
  --font-body:    "Vollkorn", Georgia, "Iowan Old Style", serif;

  /* Wove book paper. It is BLEACHED — that is the whole difference between
     book stock and the newsprint the Movement family is printed on, and the
     first version of this palette missed it: the ground came out at hue 45°
     against Movement's 40°, so two of the four families were the same sand at
     different lightnesses, and inside a page every band was that sand again
     one step darker. Paper white here, cool grey for the second surface,
     and the two are separated by TEMPERATURE rather than only by value. */
  --paper-100: #FFFFFF;   /* raised panels — true white                    */
  --paper-200: #FAFAF9;   /* the page — neutral, R−B +1                    */
  --paper-300: #ECEEF0;   /* the second surface — cool grey, R−B −4        */
  --paper-400: #D3D7DC;
  --ink:       #171A20;   /* blue-black printing ink, not neutral black    */

  /* The third surface, and the one that was missing entirely. A book prints a
     section opening solid; a page that only ever goes paper → slightly darker
     paper → paper has no rhythm at all, whatever the type is doing. */
  --bg-invert:    #14171D;
  --fg-invert:    #E9EAEC;
  --line-invert:  #333941;
  --muted-invert: #9DA3AC;
  /* The rubric on an inverted ground has to be the OTHER theme's ochre. Reusing
     the page's own #7A5A15 here gave 2.82:1 on the ink — invisible, and only on
     the one band where the verse is the whole point. */
  --rubric-invert: #C9A44E;

  /* Two inks, one press run each. Both verified against the paper ground:
     indigo 10.7:1, ochre 6.1:1 — AA at any size. */
  --indigo: #1F3B63;
  --ochre:  #7A5A15;

  --bg:          var(--paper-200);
  --bg-raised:   var(--paper-100);
  --bg-sunken:   var(--paper-300);
  --fg:          var(--ink);
  --fg-muted:    #5C5A54;
  --line:        var(--paper-400);
  --line-strong: var(--ink);

  --accent:      var(--indigo);
  --accent-fg:   #FEFDFB;
  --rubric:      var(--ochre);

  /* A book is set smaller, narrower and looser than a poster. */
  --t-xs:   0.75rem;
  --t-sm:   0.85rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   clamp(1.3rem,  1.1rem + 0.7vw, 1.5rem);
  --t-xl:   clamp(1.55rem, 1.3rem + 1.1vw, 1.95rem);
  --t-2xl:  clamp(1.9rem,  1.5rem + 1.8vw, 2.5rem);
  --t-3xl:  clamp(2.2rem,  1.6rem + 2.6vw, 3.4rem);

  --leading-tight: 1.16;
  --leading-snug:  1.4;
  --leading-body:  1.72;      /* book leading; there is room on the page */
  --tracking-label: 0.19em;   /* letterpress spaced caps, wider than the default */

  --measure:      33rem;      /* a book measure, ~62 characters */
  --measure-wide: 46rem;
  --leaf:         66rem;      /* the trimmed page */
  --gloss:        11.5rem;    /* the outer margin the glosses sit in */
  --gutter:       clamp(1.25rem, 5vw, 3.5rem);

  /* Nothing in a bindery is rounded, and nothing casts a shadow. */
  --radius:      0;
  --radius-arch: 0;
  --shadow:      none;

  --hair:   1px solid var(--line);
  --rule:   1px solid var(--ink);
  --border:        var(--hair);
  --border-strong: var(--rule);

  --focus: 2px solid var(--accent);
}

/* Dark: the ink and the paper swap places rather than the page being inverted.
   Both inks are lifted to hold their hue against a dark ground — indigo 8.2:1,
   ochre 7.8:1 — and --accent-fg goes to near-black so a filled button reads. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper-100: #1B1E24;
    --paper-200: #14161B;
    --paper-300: #101216;
    --paper-400: #333740;

    --bg:          var(--paper-200);
    --bg-raised:   var(--paper-100);
    --bg-sunken:   var(--paper-300);
    --fg:          #E6E3DA;
    --fg-muted:    #9B978C;
    --line:        var(--paper-400);
    --line-strong: #E6E3DA;

    --indigo: #93B0D8;
    --ochre:  #C9A44E;
    --accent-fg: #14161B;

    --bg-invert:    #F3F3F1;
    --fg-invert:    #171A20;
    --line-invert:  #CFD3D8;
    --muted-invert: #5C6169;
    --rubric-invert: #6E5112;

    --rule: 1px solid #E6E3DA;
  }
}

:root[data-theme="dark"] {
  --bg-invert:    #F3F3F1;
  --fg-invert:    #171A20;
  --line-invert:  #CFD3D8;
  --muted-invert: #5C6169;
  --rubric-invert: #6E5112;

  --paper-100: #1B1E24;
  --paper-200: #14161B;
  --paper-300: #101216;
  --paper-400: #333740;

  --bg:          var(--paper-200);
  --bg-raised:   var(--paper-100);
  --bg-sunken:   var(--paper-300);
  --fg:          #E6E3DA;
  --fg-muted:    #9B978C;
  --line:        var(--paper-400);
  --line-strong: #E6E3DA;

  --indigo: #93B0D8;
  --ochre:  #C9A44E;
  --accent-fg: #14161B;

  --rule: 1px solid #E6E3DA;
}

/* tokens.css declares :root[data-theme="light"], which outranks this file's
   plain :root. Without restating it here, an explicit switch to light would
   drop the whole family back to the default plaster palette. */
:root[data-theme="light"] {
  --bg-invert:    #14171D;
  --fg-invert:    #E9EAEC;
  --line-invert:  #333941;
  --muted-invert: #9DA3AC;
  --rubric-invert: #C9A44E;

  --paper-100: #FFFFFF;
  --paper-200: #FAFAF9;
  --paper-300: #ECEEF0;
  --paper-400: #D3D7DC;

  --bg:          var(--paper-200);
  --bg-raised:   var(--paper-100);
  --bg-sunken:   var(--paper-300);
  --fg:          var(--ink);
  --fg-muted:    #5C5A54;
  --line:        var(--paper-400);
  --line-strong: var(--ink);

  --indigo: #1F3B63;
  --ochre:  #7A5A15;
  --accent-fg: #FEFDFB;

  --rule: 1px solid var(--ink);
}

/* Vollkorn's old-style figures belong in running text; the tabular lining set
   belongs in hymn numbers and times. Both are in the variable font. */
body {
  font-variant-numeric: oldstyle-num;
  hyphens: auto;
}

/* ───────────────────────────────────────────────────────────────────────────
   THE LEAF — the trimmed page every band of content is measured against.
   base.css styles bare `section`, and it loads AFTER this file, so anything
   overriding it here has to be class-qualified to outrank it.
   ─────────────────────────────────────────────────────────────────────────── */
.leaf {
  inline-size: 100%;
  max-inline-size: var(--leaf);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.leaf-section { padding-block: var(--s-8); }

/* Sections that carry their own ground. */
.leaf-section--sunk {
  background: var(--bg-sunken);
  border-block: var(--hair);
}

/* ── The spacing rule, stated once ──────────────────────────────────────────
   Two PLAIN sections in a row share one gap: the first one's bottom padding is
   already the space between them. Any section carrying its own ground keeps its
   own padding, at both ends — a tint or an ink band has a visible edge, and a
   heading must not sit on it.

   This was written as a collapse rule plus a chain of exceptions, and the chain
   fought its own specificity twice: first `.leaf-section--sunk` (0,1,0) lost to
   `.leaf-section + .leaf-section` (0,2,0) and a heading ended up on the tint's
   border, then fixing that end collapsed the gap at the other. One :not() pair
   matches only plain-after-plain, so there is nothing left to lose a fight to. */
.leaf-section:not(.leaf-section--sunk):not(.leaf-section--ink)
  + .leaf-section:not(.leaf-section--sunk):not(.leaf-section--ink) {
  padding-block-start: 0;
}

/* ── The inked band ─────────────────────────────────────────────────────────
   One per page at most. It is the page turned over — solid ink, paper-coloured
   type, the ochre rubric still doing its job. Under the dark theme the tokens
   flip, so this band becomes the pale one and the rhythm survives inversion
   instead of disappearing into the ground. */
.leaf-section--ink {
  background: var(--bg-invert);
  color: var(--fg-invert);
  border-block: 0;
  padding-block: var(--s-9);
}

.leaf-section--ink .rubric,
.leaf-section--ink cite { color: var(--rubric-invert); }
.leaf-section--ink .section-title { border-block-end-color: var(--line-invert); }
.leaf-section--ink .stave { color: var(--fg-invert); }
.leaf-section--ink a { color: inherit; text-decoration-color: var(--line-invert); }
.leaf-section--ink a:hover { text-decoration-color: currentColor; }

/* ───────────────────────────────────────────────────────────────────────────
   RUNNING HEAD — what sits at the top of a printed page, not a nav bar.
   Two hairlines and a line of spaced small caps. It is 3rem tall and it stays
   that way; there is no logo lockup and no drop shadow.
   ─────────────────────────────────────────────────────────────────────────── */
.running-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--bg);
  border-block-end: var(--rule);
}
.running-head__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-block-size: 3.25rem;
}

.running-head__title {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  white-space: nowrap;
  /* A flex item will not shrink below its content unless told it may. Churches
     with long names — "Providence Chapel" is already 17 characters — otherwise
     push the whole header past the right edge of a phone. */
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.running-head__title:hover { color: var(--accent); }

.running-head__tools { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* ── Contents: the navigation, set as a table of contents ────────────────── */
.contents { margin-inline-start: auto; }
.contents ul {
  display: flex;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.contents a {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--fg-muted);
  padding-block: var(--s-2);
  border-block-end: 2px solid transparent;
}
.contents a:hover { color: var(--fg); }
.contents a[aria-current="page"] {
  color: var(--fg);
  border-block-end-color: var(--rubric);
}

/* The leader and the folio belong to the table-of-contents form the navigation
   takes when it opens on a small screen. Left visible on desktop they render
   glued to the label — "PREACHINGiii" — and force the row to wrap. */
.contents__leader,
.contents__folio { display: none; }

.contents-toggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 2.75rem;
  padding-inline: var(--s-3);
  background: transparent;
  border: var(--hair);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* On a phone the toggle is the icon alone. Its label stays in the DOM — hidden
   visually, not removed — so the accessible name still matches what the button
   does and still flips to "Close" when it opens. An aria-label would have gone
   stale against the visible text the moment it expanded. */
@media (max-width: 30rem) {
  .contents-toggle {
    inline-size: 2.75rem;
    padding-inline: 0;
    justify-content: center;
  }
  .contents-toggle [data-toggle-label] {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
}

@media (max-width: 61.99rem) {
  .contents-toggle { display: inline-flex; }

  /* Open, the contents becomes what it is actually named after: a real table
     of contents, one entry per line, with dotted leaders running out to the
     folio. This is the shape the metaphor was waiting for. */
  .contents {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    display: none;
    background: var(--bg-raised);
    border-block-end: var(--rule);
    padding: var(--s-5) var(--gutter) var(--s-6);
  }
  .contents[data-open] { display: block; }
  .contents ul { flex-direction: column; gap: 0; }
  .contents li { border-block-end: 1px dotted var(--line); }
  .contents a {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fg);
    padding-block: var(--s-3);
    border-block-end: 0;
  }
  .contents a[aria-current="page"] { color: var(--rubric); font-style: italic; }
  .contents a { white-space: normal; }
  .contents__leader {
    display: block;
    flex: 1;
    border-block-end: 1px dotted var(--line);
    transform: translateY(-0.25em);
  }
  .contents__folio {
    display: block;
    flex: none;
    font-family: var(--font-ui);
    font-size: var(--t-xs);
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
  }
}

/* The running head has to be the positioning context for the mobile panel. */
.running-head { position: sticky; }
.running-head__inner { position: static; }
@media (max-width: 61.99rem) {
  .running-head { position: sticky; }
  .running-head > .leaf { position: static; }
}

/* ───────────────────────────────────────────────────────────────────────────
   THE OPENING — a frontispiece facing a title page, which is how a book opens.
   Not a hero. There is no photograph behind the type and no scrim over it;
   the picture is on the left-hand leaf and the words are on the right.
   ─────────────────────────────────────────────────────────────────────────── */
.opening-spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding-block: var(--s-7) var(--s-8);
}
@media (min-width: 52rem) {
  .opening-spread {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    padding-block: var(--s-8) var(--s-9);
  }
  /* The spine: one hairline down the fold. */
  .opening-spread > * + * {
    border-inline-start: var(--hair);
    padding-inline-start: clamp(var(--s-5), 4vw, var(--s-8));
  }
  .opening-spread > *:first-child { padding-inline-end: clamp(var(--s-5), 4vw, var(--s-8)); }
}

.titlepage { text-align: center; }
.titlepage__place {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}
.titlepage__name {
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-block: var(--s-4) 0;
}
.titlepage__line {
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--fg-muted);
  max-inline-size: 26rem;
  margin: var(--s-4) auto 0;
  text-wrap: balance;
}
.titlepage__est {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin-block-start: var(--s-5);
}
.titlepage .row { justify-content: center; }

/* ── The stave: four hairlines, the one piece of ornament in the family ──── */
.stave {
  block-size: 9px;
  border: 0;
  margin-inline: auto;
  inline-size: min(9rem, 40%);
  background-image: repeating-linear-gradient(
    to bottom,
    currentColor 0 1px,
    transparent 1px 4px
  );
  color: var(--line-strong);
  opacity: 0.5;
}
.stave--wide { inline-size: 100%; }
.stave--start { margin-inline: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   THE GUTTER — text with its glosses in the outer margin.

   Auto-placement does the pairing: with two explicit tracks, a .marginal and
   the block after it land on the same row. That only holds while every text
   block is preceded by exactly one .marginal, so the generator emits an empty
   one where there is no note. An empty gloss is invisible but still occupies
   its cell, which is what keeps the rest of the column in register.
   ─────────────────────────────────────────────────────────────────────────── */
.gutter { display: block; }
.gutter > * { max-inline-size: var(--measure); }
.gutter > * + * { margin-block-start: var(--s-4); }

.marginal {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--fg-muted);
}
.marginal:empty { display: none; }
.marginal cite { font-style: normal; color: var(--rubric); font-weight: 600; }

/* Whether there is room for a margin is a question about the CONTAINER, not
   about the viewport. A viewport media query put the glosses beside the text
   inside a half-width column on a 1440px screen, squeezing the text to five
   words a line. These layout wrappers are the containers that answer it. */
main .leaf,
.two-col > *,
.sermon-page > * { container-type: inline-size; }

/* Not the header's leaf: inline-size containment also brings layout
   containment, which would re-anchor the absolutely positioned mobile contents
   panel to the leaf instead of to the full-width running head. */
.running-head .leaf { container-type: normal; }

@container (min-width: 42rem) {
  .gutter {
    display: grid;
    grid-template-columns: var(--gloss) minmax(0, var(--measure));
    column-gap: var(--s-6);
    row-gap: var(--s-4);
  }
  .gutter > * { grid-column: 2; margin-block-start: 0; }
  .gutter > .marginal {
    grid-column: 1;
    text-align: end;
    padding-block-start: 0.35em;   /* optical alignment to the first baseline */
    border-inline-end: var(--hair);
    padding-inline-end: var(--s-3);
  }
  .marginal:empty { display: block; border-inline-end-color: transparent; }
}

/* ───────────────────────────────────────────────────────────────────────────
   PAGE HEADS — a rubric, a title, a rule. Interior pages open with type, and
   the photograph comes further down as a plate.
   ─────────────────────────────────────────────────────────────────────────── */
.opening-head {
  padding-block: var(--s-8) var(--s-6);
  border-block-end: var(--rule);
}
.rubric {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--rubric);
}
.opening-head h1 {
  font-size: var(--t-3xl);
  margin-block-start: var(--s-3);
  max-inline-size: 22ch;
}
.opening-head__lede {
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--fg-muted);
  max-inline-size: var(--measure-wide);
  margin-block-start: var(--s-4);
}

.section-title {
  font-size: var(--t-xl);
  padding-block-end: var(--s-3);
  border-block-end: var(--hair);
  margin-block-end: var(--s-5);
}
.section-title .rubric { display: block; margin-block-end: var(--s-2); }

/* ───────────────────────────────────────────────────────────────────────────
   TIPPED-IN PLATES — how photography appears in a book: a hairline rule round
   the image and a caption set beneath it in small type. Never full-bleed,
   never behind text, never with a scrim.
   ─────────────────────────────────────────────────────────────────────────── */
.tip-in { margin: 0; }
.tip-in img {
  inline-size: 100%;
  border: var(--hair);
}
.tip-in figcaption {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--fg-muted);
  padding-block-start: var(--s-3);
  border-block-start: var(--hair);
  margin-block-start: var(--s-3);
}
.tip-in figcaption b {
  color: var(--rubric);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--t-xs);
}

/* ── The full-bleed plate ───────────────────────────────────────────────────
   A book's answer to scale is the plate that runs to the trim edge — the one
   illustration given a whole opening to itself. Every photograph in this
   template used to be a modest column-width figure, which is most of why the
   page read as quiet to the point of being uneventful.

   It is emitted as a SIBLING of .leaf rather than inside one. The usual
   `margin-inline: calc(50% - 50vw)` trick works until a scrollbar is present,
   at which point 100vw is wider than the page and the whole document scrolls
   sideways. Putting it outside the constrained wrapper needs no viewport maths
   at all, so there is nothing to get wrong. */
.plate-bleed {
  margin: 0;
  margin-block: var(--s-8);
  background: var(--bg-sunken);
}
.plate-bleed picture { display: block; }
.plate-bleed img {
  inline-size: 100%;
  block-size: clamp(20rem, 56vh, 34rem);
  object-fit: cover;
  border: 0;
  border-block: var(--hair);
}
.plate-bleed figcaption {
  padding-block: var(--s-4);
  border: 0;
  margin: 0;
}
.plate-bleed figcaption > span {
  display: block;
  max-inline-size: var(--measure-wide);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--fg-muted);
}
.plate-bleed b {
  color: var(--rubric);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* The title page's rule draws from the middle out, because it is centred. */
.titlepage .stave { transform-origin: center; }

/* A pair of plates, as a book sets them facing each other. */
.plates {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 46rem) {
  .plates { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  /* Plates of different depths hang from a common baseline, the way a book
     sets two facing illustrations. Left to stretch, the shorter one leaves a
     tall empty column that reads as a mistake. */
  .plates--weighted { grid-template-columns: 3fr 2fr; align-items: end; }
}

/* ── Epigraph: a verse, centred, with a hanging attribution ─────────────── */
.epigraph {
  max-inline-size: 40rem;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--s-7);
}
.epigraph p {
  font-size: var(--t-xl);
  font-style: italic;
  line-height: 1.42;
  text-wrap: balance;
}
.epigraph cite {
  display: block;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--rubric);
  margin-block-start: var(--s-4);
}

/* ───────────────────────────────────────────────────────────────────────────
   BUTTONS — the family flattens the primitive. A printed page has no filled
   pill; it has a ruled box. The primary keeps the indigo ground because a
   giving link has to be findable, but it loses its radius and its transition
   into a colour wash.
   ─────────────────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 0;
  padding: var(--s-3) var(--s-5);
}
.btn--ghost {
  border: var(--rule);
  background: transparent;
}
.btn--ghost:hover { background: var(--fg); color: var(--bg); }

/* ───────────────────────────────────────────────────────────────────────────
   COLOPHON — the note at the back of a book saying how it was made.
   ─────────────────────────────────────────────────────────────────────────── */
.colophon {
  border-block-start: var(--rule);
  margin-block-start: var(--s-8);
  padding-block: var(--s-7) var(--s-6);
  background: var(--bg-sunken);
}
.colophon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s-6);
}
.colophon h2 {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--rubric);
  margin-block-end: var(--s-3);
}
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li + li { margin-block-start: var(--s-2); }
.colophon a { color: inherit; text-decoration-color: var(--line); }
.colophon a:hover { color: var(--accent); }
.colophon p, .colophon li { font-size: var(--t-sm); }

.colophon__note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-4);
  border-block-start: var(--hair);
  font-size: var(--t-xs);
  font-style: italic;
  color: var(--fg-muted);
}

/* The folio — a page number at the foot, in the ochre. Purely typographic and
   entirely honest: it counts the pages of the site. */
.folio {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: var(--rubric);
  font-style: normal;
}

/* ───────────────────────────────────────────────────────────────────────────
   PRINT — this family more than any other. These churches print.
   ─────────────────────────────────────────────────────────────────────────── */
@media print {
  .running-head, .contents, .contents-toggle, .theme-toggle,
  .colophon__grid, .skip-link { display: none !important; }
  .leaf { max-inline-size: none; padding-inline: 0; }
  .gutter { display: block; }
  .marginal { color: #444; font-size: 8.5pt; }
  .tip-in { break-inside: avoid; }
  .colophon { background: none; border-block-start: 1px solid #000; }
}