/* praemisse — colour, space and pages. Direction A, the edition: owner decision 2026-10-11
   (BOARD.md; the brief in INBOX.md). Type is in type.css (owner decision 2026-10-05) and is
   imported, not replaced. Every colour, size and spacing on the site is a property here; no
   template or stylesheet carries a hex value or a pixel size of its own. Binding under
   DESIGN.md, "Colour, space and pages" (owner decision 2026-10-19, after the comparison specimen). */
@import url("type.css");

:root {
  /* type scale: four sizes, no more (DESIGN.md P3) */
  /* fluid since 2026-10-19 (owner decision): the body grows with the viewport, from the
     type.css size on a phone (19px) through 19px at 1280 to 22px at 1920 and no further;
     the other three sizes keep their ratios to it, so the four-size rule holds at every width */
  --size-3: clamp(var(--body-size), 0.8125rem + 0.47vw, 1.4rem);  /* body, passages, statements */
  --size-1: calc(var(--size-3) * 2.105);   /* page title (was 2.5rem at 19px), line-height 1.15 */
  --size-2: calc(var(--size-3) * 1.347);   /* claim on a node page, comparison cell lead, wordmark (was 1.6rem), 1.3 */
  --size-4: calc(var(--size-3) * 0.758);   /* labels, status, apparatus, menu, colophon (was 0.9rem), 1.5 */
  --leading-1: 1.15;
  --leading-2: 1.3;
  --leading-3: var(--body-leading);
  --leading-4: 1.5;

  /* measure and space */
  --measure: 60ch;             /* 66ch until 2026-10-19; the owner asked for 68ch and 62–70 characters a line, and in Libertinus a ch (the zero) is wider than the average letter, so 60ch is what gives lines of 62–69 characters */
  --page: 1120px;              /* comparison grid and node page; reading pages use --measure */
  --gutter: 2rem;              /* 1.25rem under 640px */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 3.5rem; --s-6: 5rem;
  --hairline: 1px;
  --focus: 2px;                /* the focus outline and its offset */

  /* letterspacing */
  --track-caps: 0.07em;        /* small caps: status words, the wordmark (0.06–0.08em) */
  --track-label: 0.14em;       /* section labels, uppercase */
  --track-menu: 0.04em;        /* the menu */

  /* paper and ink */
  --paper: #F5EFE3; --ink: #1F1B16; --ink-2: #4A4238; --muted: #6B6257;
  --rule: #D8CDBB; --rule-strong: #1F1B16;
  --accent: #7A2E2B;           /* links in running text, the current menu word */
  --contested: #7A2E2B;        /* the one warning colour; always beside the word */
  --head-align: center;
  --head-rule: var(--hairline) solid var(--rule);

  /* the grid's own levers, kept separate so a firmer grid is a swap, not a rebuild */
  --grid-rule: var(--rule);
  --grid-name-weight: 400;
  --grid-name-family: var(--serif);
  --grid-gap: 1.25rem;

  /* print */
  --print-paper: #FFFFFF; --print-ink: #000000; --print-rule: #000000; --print-muted: #444444;
}
@media (prefers-color-scheme: dark) { :root {
  --paper: #1B1813; --ink: #EAE2D3; --ink-2: #C9BFAE; --muted: #9A9083;
  --rule: #3A342B; --rule-strong: #EAE2D3; --accent: #D08A86; --contested: #D08A86;
}}
@media (max-width: 640px) { :root { --gutter: 1.25rem; } }
@media (max-width: 720px) { :root { --size-1: calc(var(--size-3) * 1.684); } }  /* was 2rem at 19px */

/* If the owner asks for B's grid on A's page, this block and nothing else:
   :root { --grid-rule: var(--ink); --grid-name-weight: 700; --grid-name-family: var(--sans); --grid-gap: 1.5rem; } */