/* ============================================================
   PAGE — the frame every page of the new site is built in.
   Requires: tokens.css

   Structure (the Webflow section → container → row → col paradigm,
   on a CSS grid):
     <section class="section">            space above: --section-space
       <div class="container">            max width + side padding
         <div class="grid">               12 columns: .col-N / .start-N
   One lever for the space between blocks: --section-space in tokens.css
   (or overridden on a page root).

   Theme: Base.astro puts .theme-light / .theme-dark on <body>; a block
   with its own theme (the dark final CTA) carries the class itself.
   --ink is the text colour of the current theme — components read it
   instead of hard-wiring white or black, so they work on both.
   Not .is-light/.is-dark: the menu and the footer already use those
   names for their own scoped styles.
   ============================================================ */

.theme-light {
  --ink: var(--color-text-inverted);
  background: var(--color-bg-white);
  color: var(--ink);
}
.theme-dark {
  --ink: var(--color-text);
  background: var(--color-bg);
  color: var(--ink);
}

body { margin: 0; font-family: var(--font); }

/* Slant pinned through the font's own axis, on every element (docs/typography-fonts.md): without it iOS Safari
   renders TT Commons Pro slanted everywhere (seen on an iPhone 02.10.2026). Italic only by tag or .u-italic. */
*, *::before, *::after { font-variation-settings: "slnt" var(--slnt, 0); }
em, i, cite, .u-italic { --slnt: 10; }

/* One offset per gap: only the top. Two neighbours with top and bottom padding would add up to twice
   --section-space between them. A block with its own fill (the dark final CTA) sets its own padding
   and keeps the gap above it with a margin. */
.section { padding-top: var(--section-space); }
/* No bottom offset on the last section: the footer opens with one --section-space itself (no doubled gap). */
/* Page content is 80rem wide, as every page of the live site (measured 02.10.2026: 1536px at 1920,
   1408px at 1440). The design-system default .container (100rem) stays for wider layouts. */
.section .container { max-width: var(--container-md); }

/* Headings never leave one word on the last line (docs/layout-rules.md).
   :where() keeps these resets at zero specificity, so any block class can set its own margins. */
:where(.section) :where(h1, h2, h3) { text-wrap: balance; }
/* Phones: no balancing (it left headings visibly narrower than the column), but no single word left alone on the
   last line either — text-wrap: pretty, for headings and paragraphs (02.10.2026). Browsers without it wrap plainly. */
@media (max-width: 47.9375rem) { :where(.section) :where(h1, h2, h3, p, li) { text-wrap: pretty; } }
:where(.section) :where(h1, h2, h3, h4, h5, p, ul) { margin: 0; }

/* Half a grid column of air on each side of a grid item. Computed from the grid: the item spans --span columns
   (default 6), so half a column = (its width − (span − 1) gaps) / (2 × span). */
.inset-half { padding-inline: calc((100% - (var(--span, 6) - 1) * var(--grid-gap)) / (2 * var(--span, 6))); }

/* Secondary text of either theme. */
.text-grey { color: var(--color-text-grey); }
.theme-light .text-grey { color: var(--color-text-grey-inverted); } /* contrast on light backgrounds (02.10.2026) */