/* Design tokens. Single source of truth for colour, type and rhythm. */
:root {
	--ink: #0A0A0A;
	--paper: #FFFFFF;
	/* Subdued body text on the light grounds: 5.38:1 on --paper,
	   4.93:1 on --wash. Both clear WCAG AA for normal text (4.5:1). */
	--muted: #646B76;
	--rule: #E5E5E5;
	--wash: #F5F5F4;
	--green: #0A5036;
	--green-hi: #0D6644;
	/* The brand green is unreadable on the dark ground -- #0A5036 on --ink
	   is 2.09:1 -- so the dark sections get a lightened sibling instead:
	   8.07:1 on --ink. The same split applies to --muted below. Never
	   collapse either pair into one token. */
	--green-on-ink: #4FB88A;
	/* --muted lightened for the dark ground, same hue (217deg) and roughly
	   the same saturation, because #646B76 on --ink is only 3.68:1 and
	   fails AA. This one is 6.39:1 on --ink. Used inside .section--ink. */
	--muted-on-ink: #8B93A0;

	/* A hairline on the dark ground. rgba on white rather than a flat grey,
	   so it keeps working over the photograph a dark section may carry. */
	--rule-on-ink: rgba(255, 255, 255, 0.14);

	--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Display face for headline type. It answers the wordmark, which is set
	   in a classical high-contrast serif -- the one piece of brand the site
	   already owned and the one thing the first redesign pass did not echo.
	   Requested only on the pages that use it (apollonia_uses_display_serif),
	   and the fallback stack is a real one: nothing here is laid out to a
	   metric only Newsreader has. */
	--font-display: "Newsreader", "Iowan Old Style", "Times New Roman", Georgia, serif;

	--step-hero: clamp(48px, 7vw, 112px);
	--step-h2: clamp(32px, 3.5vw, 56px);
	--step-h3: 24px;
	--step-body: 17px;
	--step-caption: 14px;
	--step-label: 13px;

	--space-section: clamp(80px, 10vw, 160px);
	/* Height of the sticky header bar. It lives here, not on .hdr, because
	   three separate rules now depend on it staying the same number: the
	   bar's own min-height, the mobile rule that holds that height when the
	   nav wraps below it, and the home hero, which is pulled up by exactly
	   this much so the photograph starts at the top of the screen. */
	--hdr-bar-h: 88px;
	--wrap-max: 1440px;
	--wrap-pad: 48px;
	--measure: 68ch;
}

@media (max-width: 768px) {
	:root {
		--wrap-pad: 20px;
	}
}