/* The tokens the page is made of.
 *
 * Laid out on 20 August 2026. Until then they stood copied out in four
 * stylesheets — `--ink` four times, `--gold` four times, `--work` four times —
 * and copied values drift apart: the landing page had an `--ink-quiet` of its
 * own, and the same colour stood in the house in two spellings, with an umlaut
 * and without.
 *
 * `lib/head.php` loads this sheet before all the others, without a page having
 * to name it. Whoever wants another palette overwrites nothing here but sets his
 * token anew in his own sheet; the drafts `glass` and `plates` do exactly that,
 * and `home.css` keeps its two darker greys.
 *
 * Measures stay with the page: `--measure` (the width of the text), `--margin`,
 * `--air` and `--bar` are called the same everywhere and mean something
 * different everywhere, because a narrative is set differently from a register.
 * Only what should be the same on every page stands here: the fonts, the
 * colours, the width of the column.
 */
:root {
  /* The three fonts: the text of the work, the display line, the apparatus. */
  --work:        "Christ Charter", Charter, "Bitstream Charter", Georgia, serif;
  --display:       "Christ Charter", Charter, Georgia, serif;
  --apparatus:     "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Ink, from the statement down to the marginal note. */
  --ink:       #201c18;
  --ink-quiet: #635c52;
  --ink-far:  #8d8578;

  /* The surfaces: sheet, table, desk. */
  --sheet:       #f6f3ea;
  --table:       #d7cfbb;
  --desk:        #dbd2b8;

  /* Rules, and the two colours that bring something forward. */
  --rule:       #d8d1c0;
  --rule-fine:  #e3ddcd;
  --gold:        #8f6710;
  --verdigris:   #3d6b60;

  /* The width of the source column that runs alongside. */
  --column:      15rem;

  /* The page column, since 28 August 2026. Every page of the edition holds its
     content at this width and this distance from the edge: the bar at the head,
     the chapter bar under it, the title page, the two-column body, the foot.
     Before that day each sheet carried its own measure, and „Der Mann" set its
     text 222 px from the left where the landing page set it at 40.
     It stands here and not with the page, because it is the one measure that
     has to be the same everywhere, like the fonts and the colours. */
  /* Since 4 September 2026 it grows with the window instead of standing at
     1140 whatever the screen. The measure of a line of text is elsewhere and
     stays where it is (`--measure`, 660 px); what the extra width buys is the
     column beside the text — the source in the reading pages, the citations in
     the treatise — which had 330 px on a screen of 2400 as on one of 1400.
     Stefan on 4 September 2026: „ziehe alles nach."

     The upper bound of 1210 is his: a first version went to 1280 and gave the
     source column 470, „das war etwas zuviel - nimm die mitte." The lower one
     is the width the edition has held all along, so no screen gets narrower
     than it was. */
  --page:        clamp(1140px, 100vw - 5rem, 1210px);
  --page-edge:     40px;
}

/* Every consumer writes `var(--page)` without a fallback since 4 September
   2026. Twenty-five places carried `var(--page, 1140px)` or
   `var(--page-edge, 40px)`, a second copy of the number in eight files, and
   from the day the column began to grow with the window they all named a width
   the edition no longer uses. `data/lib/head.php` puts this sheet in front of
   every other one, so the token is always there to be read. */

/* The measure of a line, and the alley beside it. They stood in `reading.css`
   and in `treatise.css` with the same numbers, one page type each, and a change
   had to be made twice to stay true. Gathered here on 4 September 2026, on
   Stefan's question: „warum muss jede seite ihre eigenen definitionen haben?"
   What did NOT come along is `--air`: the reading pages breathe at 1.25 rem and
   the treatise at 1.02, and making them one is a decision about the design and
   not about the code. */
:root {
  --measure:   660px;
  --margin:   2.4rem;
  /* The height of the chapter bar out of `sectionbar.css`: 42 px of box and one
     pixel of rule. Every `scroll-margin-top` that clears it is the sum of this
     and the bar of the edition above it. It was called `--bar` in one file and
     `--sequence` in the other, the same 43 px under two names. */
  --bar:        43px;
}

@media (max-width: 700px) {
  :root { --margin: 1.3rem; }
}

/* The ramp, on `html` and not on `body`, or every rem would be counted against
   16 px — recorded in CLAUDE.md as a measured error. Both page types carried
   the same line. */
html { font-size: clamp(100%, 0.92rem + 0.25vw, 118%); }

/* One smoothing for every page. Five sheets set it on their own body and
   `treatise.css` did not, so the same Charter at the same weight stood heavier
   in the registers of „Imkern ohne Rähmchen" and the gallery than beside them.
   Stefan on 6 September 2026: „top level stabilbau und galerie: bold font."
   The Mac's own smoothing draws the stems darker; the greyscale one is what
   the reading pages have always shown. */
body { -webkit-font-smoothing: antialiased; }

/* Text and margin in the page column. The block is the same on every page of
   the edition; how it splits in two above 1180 px is not, and that stays with
   each page type. */
.strata {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  box-sizing: border-box;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--page-edge);
}

/* Text and margin, side by side from 1180 px up: the measure for the line, the
   rest of the page column for what stands beside it, 70 px of air between them.
   Both page types wrote the same two declarations, and the comment in
   `reading.css` said so itself: „The same grid as in `treatise.css`". What each
   of them adds on top stays where it is. */
@media (min-width: 1180px) {
  .strata {
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
    column-gap: 70px;
  }
}

/* One grid for every page that carries a register, since 6 September 2026.
   „Die Deutung", „Der Obstpfarrer", „Imkern ohne Rähmchen" and the gallery had
   it under `.register-layout`; the reading edition had one of its own, a box of
   1210 px centred under the bar, and its reading column therefore stood 183 px
   right of the middle of the window at 1600 and 183 at 2000, while the treatise
   stood 60 and 104 left of it. Stefan: „wenn genug platz ist, sollte der view
   etwas nach links versetzt werden … selbe position, wie in beispielsweise
   ‚stabilbau'. das toc menu sollte auf allen pages an derselben stelle gezeigt
   werden."

   Four tracks: an alley, the register, the sheet, an alley. The pair holds 360
   and the page column together and stands above that; the reader looks at the
   text and not at the pair, so the left alley takes two fifths of the slack and
   the right one three, which carries the line towards the middle.

   The reading edition's box (lib/shell.php) carries the same class since the
   registers were unified; its two other drafts set `display: contents` on it
   and keep the grid they always had. */
.register-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1500px) {
  .register-layout {
    /* The register takes 360 and wants its alleys, so the sheet gets what is
       left of the window minus 400 — never less than the 1140 it always had. */
    --page: clamp(1140px, 100vw - 400px, 1210px);
    grid-template-columns:
      minmax(0, 2fr)
      360px
      minmax(0, var(--page))
      minmax(0, 3fr);
  }
  .register-layout > #index { grid-column: 2; }
  .register-layout > #work { grid-column: 3; }
}

/* On a phone the forty pixels are a fifth of the window. Every consumer of the
   token follows this one line: bar, chapter bar, title page, text column,
   plates, foot. Set per sheet it was set three times and forgotten twice, and
   the head of „Imkern ohne Rähmchen" stood at 20 px with its text at 40. */
@media (max-width: 46rem) {
  :root { --page-edge: 20px; }
}

/* Keep long content inside its assigned register grid track. */
.register-layout > #work { min-width: 0; }

/* Shared keyboard skip link and register list reset. */
.skip { position: absolute; left: -9999px; z-index: 30; }
.skip:focus {
  left: 1rem; top: 1rem;
  padding: .6rem 1rem;
  background: var(--gold); color: var(--sheet);
  font-family: var(--apparatus);
}
.index-list, .index-paragraphs { list-style: none; margin: 0; padding: 0; }

/* Published heading aliases share the position of their stable target. */
.anchor-alias { position: absolute; pointer-events: none; }

.anchor-alias, .section[id] {
  scroll-margin-top: calc(var(--masthead-height, 0px) + var(--bar, 0px) + 1rem);
}