/* ==========================================================================
   Variant: Saol hybrid — v2, 2026-10-21 (David: "revert to aeonik version, only replace the two biggest font sizes with saol").
   = variant-aeonik.css + Saol Display for the two biggest sizes only: the fitted hero word and the 144 px chapter number/heading
   (incl. the Manifest opener). Everything else exactly as the Aeonik-only page. Smaller widths break lines at the soft hyphens
   set in the text (Karto|graphie, Design|sprache, Trans|formation); Saol never shrinks.
   ========================================================================== */
:root {
  --font-display: "Aeonik Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ls-hero: -0.045em;  /* Saol at the two biggest sizes */
  --ls-h1: -0.04em;     /* Aeonik at 72 px */
  --display-tracking: -0.04em;
}
/* one weight for every display and title role (Aeonik) */
.t-hero, .t-h1, .t-display, .t-h2, .tools .tool h3, .theses .thesis h3, .hero__sub { font-weight: 400; font-style: normal; }
.theses .n { font-variant-numeric: lining-nums tabular-nums; }
.theses .thesis h3 { text-transform: none; letter-spacing: var(--ls-h2); }

/* the two biggest sizes in Saol: hero word (fitted) + chapter number and heading at 144 px */
.hero__word, .principle__num.t-display, .principle__head.t-display { font-family: "Saol Display", Georgia, "Times New Roman", serif; letter-spacing: var(--ls-hero); }

/* smaller widths: lines break at the soft hyphens in the text, never shrink */
.hero__word, .principle__head.t-display, .hero__sub, .specimen .big, .outro__statement { hyphens: manual; -webkit-hyphens: manual; }

/* chapter text field: 4 columns (9–12) instead of 3 (David 06:35); heading 3–8 */
.principle__body { grid-column: 9 / -1; }
.principle__body.measure { max-width: 60ch; }
.principle__head { grid-column: 3 / span 6; }
.principle__kicker { grid-column: 1 / span 8; }
.principle__kicker .k-txt { grid-column: 3 / span 6; }
@media (max-width: 1024px) { .principle__head, .principle__kicker, .principle__body { grid-column: 2 / -1; } .principle__kicker .k-txt { grid-column: 2 / -1; } }
@media (max-width: 640px)  { .principle__head, .principle__kicker, .principle__body, .principle__kicker .k-txt { grid-column: 1 / -1; } }

/* ---- block classes rebuilt against their functions (David 06:50) ----
   Section header = one row, one shared first baseline: number · heading (Saol 144, baseline row 8) · body (Aeonik 16, first line on that baseline).
   Hero = the giant word margin to margin, the rule under it, the subline a label hanging from the rule; nothing of a middle size touches the word.
   Rows (tools, theses) = title and text share the first baseline. Spec/list rows = 2 base units high so their rules land on the baseline grid. */
.principle__body { grid-row: 2; align-self: start; padding-top: calc(var(--base) * 6 - var(--body-bl, 15px)); }
.hero__word { grid-column: 1 / -1; border-bottom: 1px solid currentColor; padding-bottom: 10px; }
.hero__title { border-bottom: 0; padding-bottom: 0; align-items: end; grid-template-rows: auto auto; }
.hero__title .hero__sub { grid-row: 2; grid-column: 1 / span 6; text-align: left; font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; padding-top: 8px; }
.tools .tool, .theses .thesis { align-items: baseline; }
.rows li, .map .caption .specs > div, .table .row { padding-block: 10px 9px; }
.rows li:first-child { padding-top: 9px; }
@media (max-width: 1024px) { .principle__body { grid-row: auto; padding-top: 0; margin-top: var(--s2); } }
:root { --body-bl: 32px; } /* measured: body first baseline 17 px below the heading baseline at 15 → 32 */
.rows li, .map .caption .specs > div, .table .row { line-height: var(--base); } /* label rows = 2 base units incl. rule */

/* ── fixed Saol sizes, line breaks (David: Saol never scales; it breaks lines) ── */
:root { --u: 1px; }
.hero__word, .hero__title--full .hero__word { font-size: 240px; line-height: 220px; white-space: normal; letter-spacing: var(--ls-hero); text-wrap: balance; }
.principle__num.t-display, .principle__head.t-display { font-size: 144px; }
@media (max-width: 1024px) { .hero__word, .hero__title--full .hero__word { font-size: 144px; line-height: 140px; } }
@media (max-width: 640px) {
  .hero__word, .hero__title--full .hero__word { font-size: 64px; line-height: 60px; }
  .principle__num.t-display, .principle__head.t-display { font-size: 72px; line-height: 80px; }
}