/*
 * socialmediamarketing.md: the ONE front-end stylesheet.
 *
 * DESIGN: "Signal Yellow". Every page opens on a flat yellow band holding one
 * oversized statement, left aligned; white reading bands alternate with
 * yellow statement bands; small bold labels sit over thin black rules. Two
 * colors and paper: yellow #ffd900 for grounds only (never as text or a thin
 * line on white, where it cannot be read), ink #0e0e10 for type, rules and
 * the action button, white for reading. No third hue, no gradients, no decorative
 * shadows, no condensed capitals, no boxes behind words. Components reference
 * tokens only: a raw color in a component rule is a bug.
 *
 * Yellow bands keep their yellow and their ink in dark mode: they are the
 * brand. They do it by redefining the semantic tokens for everything inside
 * them (section 5, "Yellow ground"), so a component never asks where it is.
 *
 * Functional rules that are not taste (keep them whatever the look):
 * field text at 17px (iOS zooms below 16px), labels above fields owning their
 * own gap, our own select arrow 16px in from the right, the red required
 * asterisk, example text in the gray of an unanswered select, 16px phone
 * gutters, spacing as ranges with 16px and 40px floors, visible focus, and
 * nothing that moves under the mouse: a hover changes an edge or a tint only.
 *
 *  1. Fonts (self-hosted Inter, two subsets) and tokens
 *  2. Dark mode (data-theme from the head boot script; no-JS fallback)
 *  3. Reset and base type
 *  4. Accessibility helpers
 *  5. Layout: container, bands, yellow ground
 *  6. Header and navigation
 *  7. Buttons and links
 *  8. Opening bands (home hero, page heroes)
 *  9. Content: statements, figures, ruled columns, lists, FAQ, closing band
 * 10. Forms (the audit form)
 * 11. Tables, legal pages, long reads
 * 12. Footer
 * 13. Audits list, maintenance page
 * 14. Poster system
 */

/* 1. Fonts and tokens -------------------------------------------------- */

/* Inter (OFL), built by _theme-dev/fonts.py: weight 400-900 and the optical
   size axis, so big type gets Inter Display and reading text Inter Text by
   itself. The ranges match the subsets exactly: change one, change both. */
@font-face {
	font-family: "Inter Web";
	src: url("../fonts/inter-latin.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0020-007E, U+00A0-00FF, U+0102-0103, U+015E-015F, U+0162-0163, U+0218-021B, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+202F, U+20AC, U+2116, U+2122;
}

@font-face {
	font-family: "Inter Web";
	src: url("../fonts/inter-cyrillic.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1;
}

/* Stand-ins while Inter is on its way (font-display: swap): the system's own
   Arial (Liberation Sans on Linux, where Google's speed test runs) and Roboto
   (Android), scaled to Inter's width on this site's first-screen text, in both
   alphabets, with Inter's line height, so the page does not rewrap when the
   real font lands. Measured 2026-10-08 with the fonts held back 2.5s: layout
   shift 0.0075 or less on every opening band at 412 and 1280. Re-measure after
   any change to the type sizes or the font. */
@font-face {
	font-family: "Inter Web Fallback";
	src: local("Liberation Sans"), local("LiberationSans"), local("Arial"), local("ArialMT");
	font-weight: 400 599;
	size-adjust: 104%;
	ascent-override: 93.15%;
	descent-override: 23.19%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Web Fallback";
	src: local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 900;
	size-adjust: 101.8%;
	ascent-override: 95.16%;
	descent-override: 23.69%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Web Roboto";
	src: local("Roboto"), local("Roboto-Regular");
	font-weight: 400 599;
	size-adjust: 104.5%;
	ascent-override: 92.7%;
	descent-override: 23.08%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Web Roboto";
	src: local("Roboto Bold"), local("Roboto-Bold");
	font-weight: 600 900;
	size-adjust: 106.5%;
	ascent-override: 90.96%;
	descent-override: 22.65%;
	line-gap-override: 0%;
}

:root {
	color-scheme: light dark;

	/* 1a. Brand: never overridden in dark mode. */
	--brand-accent: #ffd900;          /* signal yellow, grounds only. Pure: darker turns mustard, greener turns lime */
	--brand-accent-ink: #0e0e10;      /* words on the yellow */
	--brand-dark: #0e0e10;            /* ink: neutral, never the warm near-black of the reference */
	--brand-paper: #ffffff;

	/* 1b. Semantic: the only layer dark mode (and the yellow ground) overrides. */
	--color-bg: #ffffff;
	--color-bg-alt: #f4f4f5;
	--color-surface: #ffffff;         /* the cookie banner, fields */
	--color-text: #0e0e10;
	--color-text-soft: #2b2b31;
	--color-text-mute: #4b4b53;       /* 8.6:1 on white: small print is still for reading */
	--color-border: #d4d4d8;          /* hairlines between table rows */
	--color-rule: #0e0e10;            /* the thin black rules over labels */
	--color-field-border: #8c9093;    /* 3:1 on the surface (house rule) */
	--color-field-bg: #ffffff;
	--color-placeholder: #6b7280;     /* the gray of an unanswered select, 4.8:1 */
	--color-link: var(--brand-dark);
	--color-focus: var(--brand-dark);
	--color-required: #c62828;        /* the red asterisk */
	--color-error: #b3261e;
	--color-success: #1e7a3c;
	--color-overlay: rgba(14, 14, 16, 0.55);
	--color-action: var(--brand-dark);        /* the action button's fill */
	--color-action-ink: #ffffff;
	--color-action-ring: rgba(14, 14, 16, 0.22);
	--color-quiet: #ffffff;                   /* every other button: white on white */
	--color-quiet-ink: var(--brand-dark);
	--color-quiet-edge: var(--brand-dark);
	--shadow-raised: none;                    /* no decorative shadows: rules and edges instead */
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	/* 1c. Type */
	--font-body: "Inter Web", "Inter Web Fallback", "Inter Web Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-heading: var(--font-body);
	--fw-display: 900;
	--fs-body: 1.0625rem;             /* 17px running text (readability floor) */
	--fs-small: 1rem;                 /* 16px: small print, labels and notes stay readable */
	--fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);        /* 17 to 21 */
	--fs-display: clamp(2.625rem, 1.05rem + 6.75vw, 7.25rem);       /* the home statement, 42 to 116 */
	--fs-h1: clamp(2.375rem, 1.25rem + 4.3vw, 5rem);               /* every other page's statement, 38 to 80 */
	--fs-statement: clamp(2.125rem, 1.2rem + 3.75vw, 4.375rem);    /* a yellow band's statement, 34 to 70 */
	--fs-h2: clamp(1.75rem, 1.25rem + 2vw, 2.875rem);              /* a reading band's heading, 28 to 46 */
	--fs-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);           /* 19 to 22 */
	--fs-figure: clamp(3.5rem, 1.6rem + 8vw, 9.5rem);              /* the figures that stop a thumb, 56 to 152 */
	--ls-display: -0.035em;           /* smm_fit() is told the same values */
	--ls-statement: -0.03em;
	--ls-figure: -0.045em;
	--lh-body: 1.6;
	--lh-heading: 1.06;
	--lh-display: 0.98;

	/* 1d. Space: ranges, never one number per breakpoint. Floors are rules. */
	--gutter: clamp(16px, 4vw, 40px);         /* page side gutter, 16px floor */
	--gap: clamp(16px, 1.6vw, 22px);          /* between separate boxes */
	--stack: clamp(20px, 2vw, 28px);          /* between the parts of a section */
	--inset: clamp(16px, 2.4vw, 28px);        /* inside a box's own edge */
	--space-section: clamp(48px, 7vw, 112px); /* a reading band's padding */
	--space-statement: clamp(56px, 8.5vw, 136px); /* a yellow band's padding */
	--container: 1240px;
	--container-narrow: 760px;                /* a column of running text, left aligned */
	--measure: 40em;                          /* the longest comfortable line */
	--radius: 16px;                           /* panels: the menu's list */
	--radius-panel: 25px;                     /* the cookie banner: its 44px buttons come out as pills (radius minus 3) */
	--radius-sm: 10px;                        /* fields */
	--radius-pill: 999px;                     /* buttons, the pill buttons of the reference */
	--control-height: 54px;                   /* fields and buttons, one height */
	--field-font: 17px;
	--header-h: 84px;
	--rule: 2px;                              /* the rule over a label */
	--hairline: 1px;
}

/* 2. Dark mode -------------------------------------------------------- */

[data-theme="dark"] {
	--color-bg: #18181b;             /* reading bands; the poster's ink is darker (#0e0e10) */
	--color-bg-alt: #0e0e10;
	--color-surface: #1f1f23;
	--color-text: #f4f4f5;
	--color-text-soft: #dcdce0;
	--color-text-mute: #b4b4bc;       /* 8.5:1 on the surface, 9.3:1 on the page */
	--color-border: #3a3a41;
	--color-rule: #f4f4f5;
	--color-field-border: #84848e;
	--color-field-bg: #1f1f23;
	--color-placeholder: #9d9da7;
	--color-link: #f4f4f5;
	--color-focus: var(--brand-accent);
	--color-required: #ff8a80;
	--color-error: #ff8a80;
	--color-success: #7fd29a;
	--color-action: var(--brand-accent);      /* on the dark ground the action is yellow, with ink */
	--color-action-ink: var(--brand-dark);
	--color-action-ring: rgba(255, 217, 0, 0.32);
	--color-quiet: transparent;
	--color-quiet-ink: #f4f4f5;
	--color-quiet-edge: #f4f4f5;
	--color-overlay: rgba(0, 0, 0, 0.66);
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239d9da7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* No-JS fallback only: with JavaScript the boot script always sets data-theme. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--color-bg: #18181b;
		--color-bg-alt: #0e0e10;
		--color-surface: #1f1f23;
		--color-text: #f4f4f5;
		--color-text-soft: #dcdce0;
		--color-text-mute: #b4b4bc;
		--color-border: #3a3a41;
		--color-rule: #f4f4f5;
		--color-field-border: #84848e;
		--color-field-bg: #18181b;
		--color-placeholder: #9d9da7;
		--color-link: #f4f4f5;
		--color-focus: var(--brand-accent);
		--color-required: #ff8a80;
		--color-error: #ff8a80;
		--color-success: #7fd29a;
		--color-action: var(--brand-accent);
		--color-action-ink: var(--brand-dark);
		--color-action-ring: rgba(255, 217, 0, 0.32);
		--color-quiet: transparent;
		--color-quiet-ink: #f4f4f5;
		--color-quiet-edge: #f4f4f5;
		--color-overlay: rgba(0, 0, 0, 0.66);
		--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239d9da7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}

/* 3. Reset and base type ---------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 800;
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	text-wrap: balance;
	/* The last resort for a word longer than the screen; the big headings are
	   sized by smm_fit() so they never need it. */
	overflow-wrap: break-word;
	hyphens: manual;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.25; font-weight: 700; }

p,
ul,
ol,
figure,
blockquote {
	margin: 0;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-link);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 3px;
}

strong,
b {
	font-weight: 700;
}

::selection {
	background: var(--brand-accent);
	color: var(--brand-dark);
}

.icon {
	width: 1em;
	height: 1em;
	flex: none;
}

.nowrap {
	white-space: nowrap;
}

/* 4. Accessibility helpers ------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 16px;
	left: 16px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 12px 16px;
	clip: auto;
	background: var(--brand-dark);
	color: #ffffff;
	font-weight: 700;
}

:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
}

#main:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* 5. Layout: container, bands, yellow ground -------------------------- */

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* A narrow column stays on the page's left edge, level with the logo: only
   its lines are shorter. */
.container--narrow > * {
	max-width: var(--container-narrow);
}

.section {
	padding-block: var(--space-section);
}

.section > .container,
.legal,
.maintenance {
	display: flex;
	flex-direction: column;
	gap: var(--stack);
}

/* Two white bands in a row: one band's padding, then a rule, as the reference
   separates its rows. */
.section:not(.band--yellow):not(.section--cta):not(.poster):not(.band--ink) + .section:not(.band--yellow):not(.section--cta):not(.poster):not(.band--ink) {
	padding-top: 0;
}

.section:not(.band--yellow):not(.section--cta):not(.poster):not(.band--ink) + .section:not(.band--yellow):not(.section--cta):not(.poster):not(.band--ink) > .container::before {
	content: "";
	border-top: var(--hairline) solid var(--color-rule);
	padding-bottom: clamp(8px, 2vw, 24px);
}

.section__title {
	max-width: 17em;
}

.section__lead,
.page-hero__lead,
.hero__lead {
	max-width: var(--measure);
}

.section__lead {
	color: var(--color-text-soft);
}

.page-hero__meta,
.section__note,
.hero__note {
	max-width: var(--measure);
	font-size: var(--fs-small);
	color: var(--color-text-mute);
}

/* A label set over a thin rule: the reference poster's info rows. Plain type,
   never a box: it is not a button. */
.eyebrow {
	display: block;
	padding-top: 12px;
	border-top: var(--rule) solid var(--color-rule);
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.4;
}

.eyebrow a {
	color: inherit;
}

/* The yellow ground. Every band that carries it takes the poster tokens
   (section 14): yellow with ink in the light scheme, ink with yellow type in
   the dark one. A component inside never asks where it is. */
.hero,
.page-hero,
.band--yellow,
.section--cta,
.maintenance-page {
	--color-bg: var(--poster-bg);
	--color-surface: var(--poster-bg);
	--color-text: var(--poster-text);
	--color-text-soft: var(--poster-text);
	--color-text-mute: var(--poster-text);
	--color-border: var(--poster-rule);
	--color-rule: var(--poster-rule);
	--color-link: var(--poster-text);
	--color-focus: var(--poster-ink);
	--color-action: var(--poster-action);
	--color-action-ink: var(--poster-action-ink);
	--color-action-ring: var(--poster-action-ring);
	--color-quiet: transparent;
	--color-quiet-ink: var(--poster-text);
	--color-quiet-edge: var(--poster-quiet-edge);
	background-color: var(--poster-bg);
	color: var(--poster-text);
}

.hero ::selection,
.page-hero ::selection,
.band--yellow ::selection,
.section--cta ::selection {
	background: var(--poster-selection-bg);
	color: var(--poster-selection-ink);
}

.hero__title,
.page-hero__title,
.band--yellow .section__title,
.cta__title,
.maintenance__title {
	color: var(--poster-ink);
}

/* A yellow statement band: one oversized sentence, then what holds it up. */
.band--yellow {
	padding-block: var(--space-statement);
}

.band--yellow > .container {
	container-type: inline-size;
	gap: clamp(24px, 2.6vw, 36px);
}

.band--yellow .section__title {
	max-width: 13em;
	font-size: min(var(--fs-statement), 100cqi / var(--fit, 1));
	font-weight: var(--fw-display);
	line-height: 1;
	letter-spacing: var(--ls-statement);
}

.band--yellow .section__lead {
	max-width: 36em;
	font-size: var(--fs-lead);
}

/* 6. Header and navigation -------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	isolation: isolate;
}

/* The only change on scroll: a hairline fades in under the header, so text
   sliding under it on a yellow band has an edge. Nothing moves. */
.site-header::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: var(--hairline);
	background: var(--poster-rule);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.site-header.is-scrolled::after,
.is-menu-open .site-header::after {
	opacity: 1;
}

/* Until the first wheel, touch, key or click (nav.js): a scroll then is the
   browser restoring a reload's position, never shown as an animation. */
.site-header.is-instant::after {
	transition: none;
}

body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: clamp(16px, 2.4vw, 40px);
	min-height: var(--header-h);
	padding-block: 12px;
}

/* The wordmark, two lines, the way the poster breaks its word. */
.site-logo {
	display: inline-flex;
	flex-direction: column;
	margin-right: auto;
	color: var(--poster-ink);
	font-size: 19px;
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: -0.035em;
	text-decoration: none;
}

.site-logo:hover {
	text-decoration: none;
}

.site-logo__line {
	display: block;
	white-space: nowrap;
}

.site-nav__list,
.nav-group__list,
.site-header__actions,
.lang-switch__list,
.site-footer__list,
.site-footer__legal,
.site-footer__social,
.link-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__actions {
	flex-wrap: nowrap;
	gap: clamp(8px, 1.6vw, 20px);
}

.site-nav__list {
	gap: 4px clamp(16px, 2vw, 32px);
}

.site-nav__list a,
.nav-group__toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-text);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

/* The current page (or its group) is underlined; the pointer thickens any
   underline, the current one included, so every link answers it. */
.site-nav__list__item.is-current > a,
.site-nav__list__item.is-current-section > a,
.site-nav__list__item.is-current-section > .nav-group__toggle {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.site-nav__list a:hover,
.site-nav__list .nav-group__toggle:hover {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.3em;
}

/* A menu group: a disclosure button and its list. nav.js collapses the list;
   without script it shows. */
.nav-group {
	position: relative;
}

.nav-group__toggle {
	gap: 8px;
	padding: 0;
	font-family: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.nav-group__toggle::after {
	content: "";
	width: 10px;
	height: 10px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.nav-group__toggle[aria-expanded="true"]::after {
	margin-top: 4px;
	transform: rotate(225deg);
}

.nav-group__list[hidden] {
	display: none;
}

.lang-switch__list {
	gap: 0;
}

.lang-switch a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 44px;
	color: var(--color-text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.lang-switch__item.is-active a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.lang-switch a:hover {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.3em;
}

.lang-switch__item.is-active a {
	font-weight: 800;
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 24px;
	color: var(--color-text);
	background: transparent;
	border: 1.5px solid var(--color-quiet-edge);
	border-radius: 50%;
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}

.nav-toggle:hover {
	box-shadow: inset 0 0 0 1.5px var(--color-quiet-edge);
}

.nav-toggle__icon {
	display: inline-flex;
}

.nav-toggle__icon--close,
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
	display: inline-flex;
}

/* The audit button inside the open phone menu; on wide screens the header's
   own button shows. */
.site-nav__cta {
	display: none;
}

@media (min-width: 960px) {
	.nav-group__list {
		position: absolute;
		top: calc(100% + 12px);
		left: -20px;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		min-width: 300px;
		padding: 8px 20px;
		background: var(--poster-bg);
		border: var(--rule) solid var(--poster-rule);
		border-radius: var(--radius);
	}

	.nav-group__list .site-nav__list__item + .site-nav__list__item {
		border-top: var(--hairline) solid var(--poster-rule);
	}

	.nav-group__list a {
		display: flex;
		width: 100%;
		min-height: 48px;
	}
}

@media (max-width: 959px) {
	:root {
		--header-h: 68px;
	}

	.site-logo {
		font-size: 17px;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		order: 3;
		flex-basis: 100%;
		max-height: calc(100vh - var(--header-h));
		max-height: calc(100dvh - var(--header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Hidden only when JavaScript can open it again (the boot script adds .js). */
	.js .site-nav:not(.is-open) {
		display: none;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-top: 8px;
	}

	.site-nav__list > .site-nav__list__item {
		border-top: var(--hairline) solid var(--poster-rule);
	}

	.site-nav__list a,
	.nav-group__toggle {
		width: 100%;
		min-height: 56px;
		font-size: 19px;
		font-weight: 800;
		letter-spacing: -0.01em;
	}

	.nav-group__toggle {
		justify-content: space-between;
	}

	.nav-group__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 0 12px 16px;
	}

	.nav-group__list a {
		min-height: 48px;
		font-size: 17px;
		font-weight: 600;
	}

	.site-nav__cta {
		display: block;
		padding: 16px 0 24px;
		border-top: var(--hairline) solid var(--poster-rule);
	}

	.site-nav__cta .btn {
		width: 100%;
	}
}

/* Narrow phones: the wordmark, the languages and the menu; the audit button
   lives in the menu and in every page's opening band. */
@media (max-width: 559px) {
	.site-header .site-header__cta {
		display: none;
	}
}

/* 7. Buttons and links ------------------------------------------------- */

/* One family. The action (ink, white label; yellow with ink on the dark
   ground) and the quiet one (no fill on yellow, white on white, an ink edge).
   One height, sentence case, one line, as wide as the words. A hover changes
   an edge, never a size or a position. */
.btn,
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--control-height);
	padding: 0 28px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: 1.5px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.btn--primary,
.wpcf7-submit {
	background: var(--color-action);
	color: var(--color-action-ink);
	border-color: var(--color-action);
}

.btn--primary:hover,
.wpcf7-submit:hover {
	box-shadow: 0 0 0 4px var(--color-action-ring);
}

.btn--secondary {
	background: var(--color-quiet);
	color: var(--color-quiet-ink);
	border-color: var(--color-quiet-edge);
}

.btn--secondary:hover {
	box-shadow: inset 0 0 0 1.5px var(--color-quiet-edge);
}

.btn:hover {
	text-decoration: none;
}

.hero__actions,
.page-hero__actions,
.section__actions,
.cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* Phones: every button the full width, stacked, the action first. */
@media (max-width: 599px) {
	.hero__actions,
	.page-hero__actions,
	.section__actions,
	.cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.btn,
	.wpcf7-submit {
		width: 100%;
		padding-inline: 16px;
		font-size: 16px;
	}

	.site-header__actions .btn {
		width: auto;
	}
}

/* A link that leads on ("Vezi calculul complet"): bold words, the underline. */
.section__more a,
.card__more a {
	font-weight: 700;
}

.section__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* 8. Opening bands ----------------------------------------------------- */

.hero,
.page-hero {
	padding-block: clamp(28px, 4.4vw, 64px) var(--space-section);
	overflow: hidden;
	overflow: clip;
}

.hero__inner,
.page-hero > .container:not(.page-hero__grid),
.page-hero__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.2vw, 30px);
	container-type: inline-size;
}

.hero__title,
.page-hero__title {
	font-weight: var(--fw-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
}

.hero__title {
	max-width: 11em;
	font-size: min(var(--fs-display), 100cqi / var(--fit, 1));
}

.page-hero__title {
	max-width: 12.5em;
	font-size: min(var(--fs-h1), 100cqi / var(--fit, 1));
}

.container--narrow > .page-hero__title {
	font-size: min(var(--fs-h1), min(100cqi, var(--container-narrow)) / var(--fit, 1));
}

.hero__lead,
.page-hero__lead {
	font-size: var(--fs-lead);
	line-height: 1.5;
}

/* 9. Content ------------------------------------------------------------- */

/* The figure that stops a thumb, with its label and source under thin rules. */
.stat {
	display: flex;
	flex-direction: column;
	gap: 16px;
	container-type: inline-size;
}

.stat__value {
	font-size: min(var(--fs-figure), 100cqi / var(--fit, 1));
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: var(--ls-figure);
	text-wrap: balance;
}

.page-hero .stat__value {
	font-size: min(var(--fs-figure) * 0.82, 100cqi / var(--fit, 1));
}

.stat__label {
	max-width: 34em;
	padding-top: 12px;
	border-top: var(--rule) solid var(--color-rule);
	font-weight: 700;
	line-height: 1.45;
}

/* Ruled columns: the team, the steps, a month's work. Each one a bold label
   over a thin rule; never a box. */
.cards,
.steps,
.post-grid {
	--cols: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps:has(> :nth-child(4)),
.cards:has(> :nth-child(8)) {
	--cols: 4;
}

.steps:has(> :nth-child(5)) {
	--cols: 5;
}

@media (min-width: 600px) {
	.cards,
	.steps,
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cards,
	.steps,
	.post-grid {
		grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	}
}

.card,
.step,
.post-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 14px;
	border-top: var(--rule) solid var(--color-rule);
}

.card__title,
.step__title {
	font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.card__text,
.step__text {
	color: var(--color-text-soft);
}

/* Step numbers: plain big type, never a circle or a box. */
.steps {
	counter-reset: step;
}

.step {
	counter-increment: step;
}

.step::before {
	content: counter(step);
	font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.75rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.05em;
}

/* Lists of statements: each row over a hairline. */
.checklist {
	display: flex;
	flex-direction: column;
	max-width: 46em;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: var(--hairline) solid var(--color-rule);
}

.checklist__item {
	position: relative;
	padding: 14px 0 14px 28px;
	border-top: var(--hairline) solid var(--color-rule);
}

.checklist__item::before {
	content: "";
	position: absolute;
	top: calc(14px + 0.8em - 5px);
	left: 2px;
	width: 10px;
	height: 10px;
	background: var(--color-rule);
}

.contact-list .checklist__item a {
	font-weight: 700;
}

.link-list {
	gap: 8px 28px;
}

.link-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
}

/* The questions: each one a row between rules; the summary is the only thing
   that answers the pointer. */
.faq {
	display: flex;
	flex-direction: column;
	border-bottom: 1.5px solid var(--color-rule);
}

.faq__item {
	border-top: 1.5px solid var(--color-rule);
}

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 64px;
	padding-block: 16px;
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	list-style: none;
	cursor: pointer;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M8 0h2v18H8zM0 8h18v2H0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M8 0h2v18H8zM0 8h18v2H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.faq__item[open] > .faq__q::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M0 8h18v2H0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M0 8h18v2H0z'/%3E%3C/svg%3E");
}

.faq__q:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.faq__a {
	max-width: var(--measure);
	padding-bottom: 24px;
	color: var(--color-text-soft);
}

/* The closing poster: the last statement, then the footer on the same ground. */
.section--cta {
	padding-block: var(--space-statement) clamp(40px, 5vw, 72px);
}

/* Two poster bands that meet (the 404 page, a page with its own yellow last
   section): a rule between them, and no double padding. */
.poster + .section--cta,
.page-hero + .section--cta,
.band--yellow + .section--cta {
	padding-top: 0;
}

.poster + .section--cta > .container,
.page-hero + .section--cta > .container,
.band--yellow + .section--cta > .container {
	padding-top: clamp(24px, 3vw, 40px);
	border-top: var(--rule) solid var(--poster-rule);
}

.section > .audit-layout,
.audit-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--gap) * 2);
	align-items: start;
}

.audit-layout__form,
.audit-layout__aside {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	min-width: 0; /* a 300px Turnstile box must never widen the column */
	/* The form is size-contained (.form's container-type), so it lends its
	   column no width: a column left to shrink-wrap collapsed it to one word
	   per line. */
	width: 100%;
	max-width: 880px;
}

/* 10. Forms -------------------------------------------------------------- */

.form {
	container-type: inline-size;
}

.form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--stack);
}

.form__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--stack) var(--gap);
}

/* Two columns only when the FORM itself is 600px or wider. */
@container (min-width: 600px) {
	.form__fields {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.form__field--wide,
	.form__note {
		grid-column: 1 / -1;
	}
}

/* The label owns the space under it: a password manager's icon must never
   claim a flex gap and move the field. */
.form__label {
	display: block;
	padding-bottom: 8px;
	font-weight: 700;
	line-height: 1.35;
}

.form__req {
	color: var(--color-required);
}

.form__optional {
	font-weight: 400;
	color: var(--color-text-mute);
}

.form__note,
.form__consent {
	font-size: var(--fs-small);
	color: var(--color-text-mute);
}

.form__help {
	padding-top: 8px;
}

.form .wpcf7-form-control-wrap {
	display: block;
}

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form select,
.form textarea {
	width: 100%;
	min-height: var(--control-height);
	padding: 0 16px;
	font: inherit;
	font-size: var(--field-font);
	color: var(--color-text);
	background-color: var(--color-field-bg);
	border: 1px solid var(--color-field-border);
	border-radius: var(--radius-sm);
	transition: border-color 0.15s ease;
}

.form textarea {
	min-height: 140px;
	padding-block: 14px;
	line-height: 1.5;
	resize: vertical;
}

.form input:hover,
.form select:hover,
.form textarea:hover {
	border-color: var(--color-text);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
	border-color: var(--color-text);
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* Our own select arrow, 16px in from the right edge (house rule): the
   browser's sits about 4px in and no padding moves it. */
select:not([multiple]):not([size]) {
	-webkit-appearance: none;
	appearance: none;
	background-image: var(--chevron);
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	padding-right: 40px;
	text-overflow: ellipsis;
	cursor: pointer;
}

/* Example text in the gray of an unanswered select, never as dark as an
   answer. Scoped and !important so no plugin rule can darken it. */
.form ::placeholder {
	color: var(--color-placeholder) !important;
	opacity: 1;
}

.form select:has(option[value=""]:checked) {
	color: var(--color-placeholder);
}

.form select option {
	color: var(--color-text);
}

.form .wpcf7-list-item {
	margin: 0;
}

.form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	cursor: pointer;
}

.form input[type="checkbox"] {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--brand-dark);
	cursor: pointer;
}

/* The button runs the width of the fields. Turnstile's box (interaction-only:
   usually never seen) and CF7's spinner are taken out of the row until the box
   really asks for a click, so neither leaves a gap before the button or a
   strip after it. */
.form__submit-row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.form__submit-row .wpcf7-submit {
	flex: 1 1 240px;
	width: 100%;
}

.form__submit-row .cf-turnstile:not(.is-interactive) {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 16px;
	margin: -12px 0 0;
}

.form .wpcf7-not-valid {
	border-color: var(--color-error);
}

.form .wpcf7-not-valid-tip {
	display: block;
	padding-top: 6px;
	font-size: var(--fs-small);
	color: var(--color-error);
}

.form .wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
}

.form__tick {
	font-size: var(--fs-small);
	color: var(--color-text);
}

/* 11. Tables, legal pages, long reads ------------------------------------- */

.table-wrap {
	overflow-x: auto;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
	padding: 14px 20px 14px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: var(--hairline) solid var(--color-rule);
}

.data-table th:last-child,
.data-table td:last-child {
	padding-right: 0;
}

.data-table thead th {
	padding-top: 0;
	font-size: var(--fs-small);
	font-weight: 700;
	border-bottom-width: var(--rule);
}

.data-table tbody th {
	font-weight: 400;
}

.data-table__num {
	text-align: right !important;
	white-space: nowrap;
}

.data-table__row--total th,
.data-table__row--total td {
	font-weight: 800;
	border-top: var(--rule) solid var(--color-rule);
	border-bottom: 0;
}

.legal {
	gap: clamp(36px, 4vw, 56px);
}

.legal__section {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.legal__title {
	font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
}

.legal__section h3 {
	padding-top: 8px;
	font-size: var(--fs-h3);
}

.legal__list,
.rich-text ul,
.rich-text ol {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 1.4em;
}

.legal__list li::marker,
.rich-text li::marker {
	font-weight: 700;
}

.legal__num {
	color: var(--color-text-mute);
}

.legal__cookies {
	display: flex;
	flex-direction: column;
	gap: var(--stack);
}

.legal__cookies-cat {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.legal__cookies h3 {
	font-size: var(--fs-h3);
}

.legal__keep {
	white-space: nowrap;
}

/* The cookie table on the policy page: the consent bundle's own markup and
   stylesheet, given this page's colors and size. The bundle keeps every cell
   on one line, which pushed the Russian table 43px past a 760px column; here
   the cells wrap, the provider and the duration only at their own spaces.
   Under 481px the bundle stacks each row, and its layout stays. */
.legal .legal__cookies {
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.legal .legal__cookies table {
	font-size: var(--fs-small);
	color: var(--color-text-soft);
}

.legal .legal__cookies th {
	color: var(--color-text);
}

.legal .legal__cookies th,
.legal .legal__cookies td,
.legal .legal__cookies tr {
	border-color: var(--color-rule);
}

@media (min-width: 481px) {
	.legal .legal__cookies th,
	.legal .legal__cookies td {
		padding: 12px 16px 12px 0;
		white-space: normal;
	}

	.legal .legal__cookies td:first-child {
		overflow-wrap: break-word;
	}

	.legal .legal__cookies td:last-child {
		min-width: 0;
		padding-right: 0;
	}
}

/* Long reads: the guide, the research page, a hand-made page, an audit. */
.rich-text {
	display: block;
}

.rich-text > * + * {
	margin-top: 1em;
}

.rich-text > h2 {
	margin-top: clamp(40px, 5vw, 64px);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

.rich-text > h3 {
	margin-top: 1.6em;
}

.rich-text > .table-wrap {
	margin-top: 1.4em;
}

/* 12. Footer --------------------------------------------------------------- */

.site-footer {
	padding-block: clamp(8px, 1vw, 16px) 32px;
}

.site-footer > .container {
	display: flex;
	flex-direction: column;
	gap: clamp(36px, 4vw, 56px);
}

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px clamp(20px, 2.6vw, 40px);
}

@media (min-width: 640px) {
	.site-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1200px) {
	.site-footer__top {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
	}

	.site-footer__brand {
		grid-column: auto;
	}
}

.site-footer__brand,
.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
	border-top: var(--rule) solid var(--color-rule);
}

.site-logo--footer {
	align-self: flex-start;
	margin-right: 0;
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
}

.site-footer__pitch {
	max-width: 30em;
}

.site-footer__heading {
	font-size: var(--fs-small);
	font-weight: 800;
	letter-spacing: 0;
}

.site-footer__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.site-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	overflow-wrap: anywhere;
}

.site-footer__prefs,
.site-footer__bottom,
.theme-switch,
.lang-switch--footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.site-footer__prefs {
	column-gap: clamp(24px, 3vw, 48px);
	padding-top: 16px;
	border-top: var(--rule) solid var(--color-rule);
}

.theme-switch__label,
.lang-switch__label {
	font-size: var(--fs-small);
	font-weight: 700;
}

.theme-switch__item,
.back-to-top,
.site-footer__consent {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--control-height);
	padding: 0 22px;
	font-family: inherit;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--color-quiet-ink);
	background: var(--color-quiet);
	border: 1.5px solid var(--color-quiet-edge);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}

.theme-switch__item:hover,
.back-to-top:hover,
.site-footer__consent:hover {
	box-shadow: inset 0 0 0 1.5px var(--color-quiet-edge);
}

.theme-switch__item[aria-pressed="true"] {
	font-weight: 800;
	box-shadow: inset 0 0 0 1.5px var(--color-quiet-edge);
}

.theme-switch__item[aria-pressed="true"]:hover {
	box-shadow: inset 0 0 0 1.5px var(--color-quiet-edge), 0 0 0 4px var(--color-action-ring);
}

/* Phones: the label above, the three choices in one row where they fit. In
   Romanian they need 321px, more than a 320px screen holds inside its
   gutters, so there the third wraps under the first instead of pushing the
   page sideways. */
@media (max-width: 599px) {
	.theme-switch__label {
		flex-basis: 100%;
	}

	.theme-switch__item {
		padding-inline: 16px;
	}
}

.site-footer__bottom {
	padding-top: 16px;
	border-top: var(--hairline) solid var(--color-rule);
	font-size: var(--fs-small);
}

.site-footer__legal {
	gap: 4px 20px;
}

.site-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* 13. Audits list, maintenance page ------------------------------------- */

.audit-filters a[aria-current] {
	text-decoration: none;
	font-weight: 800;
}

.post-card__media {
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.post-card__title {
	font-size: var(--fs-h3);
}

.post-card__title a {
	text-decoration: none;
}

.post-card__title a:hover {
	text-decoration: underline;
}

.post-card__meta {
	font-size: var(--fs-small);
	color: var(--color-text-mute);
}

.audit__media {
	padding-block: var(--stack);
}

/* The breakdowns' pictures are the 4:5 slides of the post (1080 by 1350):
   the cover as the article's picture, five analysis slides as figures in the
   text. Portrait, so they get a height cap and sit on the left of the column
   instead of filling it; the caption reads under each one in the small size. */
.audit__media .audit__img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: min(70vh, 640px);
	height: auto;
}

.rich-text figure {
	margin: clamp(24px, 3vw, 40px) 0;
}

.rich-text figure img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: min(80vh, 720px);
	height: auto;
	border: var(--rule) solid var(--color-rule);
}

.rich-text figcaption {
	margin-top: 10px;
	font-size: var(--fs-small);
	color: var(--color-text-mute);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.maintenance-page {
	min-height: 100vh;
}

.maintenance {
	padding-block: var(--space-statement);
}

.maintenance__title {
	font-size: var(--fs-h1);
	font-weight: var(--fw-display);
	letter-spacing: var(--ls-display);
	line-height: var(--lh-display);
}

.maintenance__brand {
	font-weight: 900;
}

/* 14. Poster system --------------------------------------------------- */

/* The poster is how the brand speaks: one statement per screen, set as big as
   the screen allows, on a flat ground. In the light scheme the ground is
   yellow and the type ink; in the dark scheme the poster is its negative,
   ink with the statement in yellow and the small print in paper white. Every
   poster band redefines the semantic tokens for what it holds, so a button
   or a rule never asks where it is. */

:root {
	--poster-bg: var(--brand-accent);
	--poster-ink: var(--brand-dark);       /* the statement */
	--poster-text: var(--brand-dark);      /* the small print */
	--poster-rule: var(--brand-dark);
	--poster-action: var(--brand-dark);
	--poster-action-ink: #ffffff;
	--poster-action-ring: rgba(14, 14, 16, 0.28);
	--poster-quiet-edge: var(--brand-dark);
	--poster-selection-bg: var(--brand-dark);
	--poster-selection-ink: var(--brand-accent);
	/* The ink band: the page's one dark moment in the light scheme. */
	--ink-bg: var(--brand-dark);
	--ink-text: #f4f4f5;
	--ink-statement: var(--brand-accent);
	--ink-rule: #f4f4f5;
	--fs-poster: clamp(3rem, 1rem + 12.5vw, 13rem);       /* a hero statement, 48 to 208 */
	--fs-poster-mid: clamp(2.5rem, 1rem + 8.5vw, 8.75rem); /* a mid-page statement, 40 to 140 */
	--marquee-gap: clamp(32px, 4vw, 72px);
}

[data-theme="dark"] {
	--poster-bg: var(--brand-dark);
	--poster-ink: var(--brand-accent);
	--poster-text: #f4f4f5;
	--poster-rule: var(--brand-accent);
	--poster-action: var(--brand-accent);
	--poster-action-ink: var(--brand-dark);
	--poster-action-ring: rgba(255, 217, 0, 0.32);
	--poster-quiet-edge: #f4f4f5;
	--poster-selection-bg: var(--brand-accent);
	--poster-selection-ink: var(--brand-dark);
	--ink-bg: #0e0e10;
	--ink-deep-bg: #0e0e10;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--poster-bg: var(--brand-dark);
		--poster-ink: var(--brand-accent);
		--poster-text: #f4f4f5;
		--poster-rule: var(--brand-accent);
		--poster-action: var(--brand-accent);
		--poster-action-ink: var(--brand-dark);
		--poster-action-ring: rgba(255, 217, 0, 0.32);
		--poster-quiet-edge: #f4f4f5;
		--poster-selection-bg: var(--brand-accent);
		--poster-selection-ink: var(--brand-dark);
		--ink-bg: #0e0e10;
		--ink-deep-bg: #0e0e10;
	}
}

.poster,
.site-header,
.site-footer {
	--color-bg: var(--poster-bg);
	--color-surface: var(--poster-bg);
	--color-text: var(--poster-text);
	--color-text-soft: var(--poster-text);
	--color-text-mute: var(--poster-text);
	--color-border: var(--poster-rule);
	--color-rule: var(--poster-rule);
	--color-link: var(--poster-text);
	--color-focus: var(--poster-ink);
	--color-action: var(--poster-action);
	--color-action-ink: var(--poster-action-ink);
	--color-action-ring: var(--poster-action-ring);
	--color-quiet: transparent;
	--color-quiet-ink: var(--poster-text);
	--color-quiet-edge: var(--poster-quiet-edge);
	background-color: var(--poster-bg);
	color: var(--poster-text);
}

.poster ::selection,
.site-header ::selection,
.site-footer ::selection {
	background: var(--poster-selection-bg);
	color: var(--poster-selection-ink);
}

.poster {
	padding-block: var(--space-statement);
}

.poster > .container {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 44px);
	container-type: inline-size;
}

/* The statement: lines set by hand (smm_poster()), sized to fill the width
   with the widest line on a wide screen, by the widest word on a phone. */
/* Leading 1 on a phone, where the browser picks the line breaks and a
   descender can land on the next line's ascender; 0.94 once the lines are
   set by hand and checked (line-collide.py, see CLAUDE.md). */
.poster__title {
	max-width: none;
	color: var(--poster-ink);
	font-size: min(var(--fs-poster-mid), 100cqi / var(--fit-word, 1));
	font-weight: var(--fw-display);
	line-height: 1;
	letter-spacing: var(--ls-display);
	text-wrap: balance;
}

.poster--hero .poster__title {
	font-size: min(var(--fs-poster), 100cqi / var(--fit-word, 1));
}

@media (min-width: 720px) {
	.poster__title {
		font-size: min(var(--fs-poster-mid), 100cqi / var(--fit, 1));
		line-height: 0.94;
		text-wrap: initial;
	}

	.poster--hero .poster__title {
		font-size: min(var(--fs-poster), 100cqi / var(--fit, 1));
	}

	.poster__line {
		display: block;
	}
}

/* The hero: the header sits on the same ground; the statement fills the
   first screen; the words and buttons sit bottom left, the proof bottom right. */
.poster--hero {
	padding-block: clamp(24px, 4vw, 72px) var(--space-section);
}

.poster__foot {
	display: grid;
	gap: clamp(28px, 4vw, 64px);
	align-items: end;
}

.poster__copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 34em;
}

.poster__lead {
	font-size: var(--fs-lead);
	line-height: 1.45;
}

.poster__note {
	font-size: var(--fs-small);
	max-width: 36em;
}

@media (min-width: 1024px) {
	.poster__foot {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.poster__foot--proof {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	/* Words only, nothing in the corner (the service pages, the audit page):
	   the words keep their own 34em measure instead of the 7fr column. */
	.poster__foot--solo {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The proof corner: the newest breakdown's slide as a 4:5 card with its caption,
   the reference's showreel thumbnail. */
.proof {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(100%, 300px);
	text-decoration: none;
}

.proof__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: var(--rule) solid var(--poster-rule);
}

.proof__caption {
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
}

.proof:hover .proof__caption {
	text-decoration-thickness: 3px;
}

/* A figure that fills the width, with its ledger under thin rules. */
.figure {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.4vw, 32px);
	container-type: inline-size;
}

.figure__value {
	font-size: min(var(--fs-poster), 100cqi / var(--fit, 1));
	white-space: nowrap;
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: var(--ls-figure);
	font-variant-numeric: tabular-nums;
}

.figure__claim {
	max-width: 18em;
	font-size: var(--fs-h2);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.ledger {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 24px;
	max-width: 46em;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.ledger > dt,
.ledger > dd {
	margin: 0;
	padding-block: 12px;
	border-top: var(--hairline) solid var(--color-rule);
}

.ledger > dd {
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
}

.ledger > dt.ledger__total,
.ledger > dd.ledger__total {
	border-top-width: var(--rule);
	font-weight: 800;
}

.ledger > dd.ledger__total {
	font-size: var(--fs-h3);
}

/* A marquee: one continuous line of the six jobs at display size. Content is
   printed twice (the copy aria-hidden) for a seamless loop. It never answers
   the pointer; reduced motion shows it as a wrapped list. */
.marquee {
	overflow: hidden;
	margin-block: clamp(24px, 3vw, 44px);
	padding-block: clamp(20px, 2.6vw, 36px);
	white-space: nowrap;
	background: var(--ink-bg);
	color: var(--ink-statement);
}

.marquee__track {
	display: inline-flex;
	gap: var(--marquee-gap);
	padding-left: var(--marquee-gap);
	animation: marquee 48s linear infinite;
	will-change: transform;
}

.marquee__list {
	display: inline-flex;
	gap: var(--marquee-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.marquee__list li {
	flex: none;
	font-size: clamp(2.25rem, 1rem + 5.5vw, 6.5rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.035em;
}

.marquee__list li::after {
	content: "";
	display: inline-block;
	width: 0.22em;
	height: 0.22em;
	margin-left: var(--marquee-gap);
	vertical-align: middle;
	background: currentColor;
	border-radius: 50%;
}

@keyframes marquee {
	to {
		transform: translateX(calc(-50% - var(--marquee-gap) / 2));
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee {
		white-space: normal;
	}

	.marquee__track {
		display: block;
		padding-left: 0;
		animation: none;
	}

	.marquee__list {
		flex-wrap: wrap;
		gap: 12px var(--marquee-gap);
		padding-inline: var(--gutter);
	}

	.marquee__list[aria-hidden="true"] {
		display: none;
	}
}

/* The ink band: the page's dark moment (the breakdowns strip). */
.band--ink {
	--color-bg: var(--ink-bg);
	--color-surface: var(--ink-bg);
	--color-text: var(--ink-text);
	--color-text-soft: var(--ink-text);
	--color-text-mute: var(--ink-text);
	--color-border: var(--ink-rule);
	--color-rule: var(--ink-rule);
	--color-link: var(--ink-text);
	--color-focus: var(--ink-statement);
	--color-action: var(--brand-accent);
	--color-action-ink: var(--brand-dark);
	--color-action-ring: rgba(255, 217, 0, 0.32);
	--color-quiet: transparent;
	--color-quiet-ink: var(--ink-text);
	--color-quiet-edge: var(--ink-text);
	background-color: var(--ink-bg);
	color: var(--ink-text);
}

.band--ink .poster__title,
.band--ink .section__title {
	color: var(--ink-statement);
}

.band--ink ::selection {
	background: var(--brand-accent);
	color: var(--brand-dark);
}

/* A strip: a row of 4:5 slides that scrolls sideways, bleeding to the screen's
   edges with the same room at both ends as the page's gutter; arrows only for
   a mouse, each only while there is more that way. */
.strip {
	position: relative;
	width: 100%;
}

.strip__track {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--strip-edge);
	padding-inline: var(--strip-edge);
	padding-block: 4px;
	scrollbar-width: none;
	--strip-edge: max(var(--gutter), (100vw - var(--container)) / 2);
}

.strip__track::-webkit-scrollbar {
	display: none;
}

.strip__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

.strip__item {
	flex: none;
	width: clamp(240px, 24vw, 330px);
	scroll-snap-align: start;
}

.strip__link {
	display: block;
	text-decoration: none;
}

.strip__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: var(--rule) solid var(--color-rule);
}

.strip__caption {
	display: block;
	padding-top: 12px;
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.35;
}

.strip__link:hover .strip__caption {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.18em;
}

.strip__arrow {
	position: absolute;
	top: calc(50% - 60px);
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	color: var(--brand-dark);
	background: #ffffff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.strip__arrow .icon {
	width: 22px;
	height: 22px;
}

.strip__arrow--prev {
	left: max(16px, calc(var(--strip-edge, 16px) - 28px));
}

.strip__arrow--next {
	right: max(16px, calc(var(--strip-edge, 16px) - 28px));
}

/* :not(:disabled), because a plain "disabled: none" loses to this longer
   selector and left the back arrow up at the start of every strip. */
.strip.has-mouse.has-more .strip__arrow:not(:disabled) {
	display: inline-flex;
}

.strip__arrow:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(14, 14, 16, 0.22);
}

/* A timeline: the steps as giant numerals over one rule. */
.timeline {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tl;
}

@media (min-width: 640px) {
	.timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.timeline {
		grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	}
}

.timeline__step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 16px;
	border-top: var(--rule) solid var(--color-rule);
	counter-increment: tl;
}

.timeline__step::before {
	content: "0" counter(tl);
	font-size: clamp(3.5rem, 2rem + 4.5vw, 7rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}

.timeline__title {
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: 1.2;
}

.timeline__text {
	color: var(--color-text-soft);
}

/* A lineup: the services as a festival poster, the headliners at poster size,
   the rest smaller, each over its rule with its one line in small type. */
.lineup {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	container-type: inline-size;
}

.lineup__item {
	display: grid;
	gap: 8px clamp(20px, 3vw, 48px);
	padding-block: clamp(16px, 2vw, 28px);
	border-top: var(--rule) solid var(--color-rule);
}

.lineup__item:last-child {
	border-bottom: var(--rule) solid var(--color-rule);
}

@media (min-width: 900px) {
	.lineup__item {
		grid-template-columns: minmax(0, 1fr) minmax(0, 26em);
		align-items: end;
	}
}

.lineup__name {
	font-size: min(clamp(2rem, 1rem + 4.2vw, 5rem), 100cqi / var(--fit, 1));
	font-weight: 900;
	line-height: 0.96;
	letter-spacing: -0.035em;
}

.lineup__item--head .lineup__name {
	font-size: min(clamp(2.75rem, 1rem + 7vw, 8rem), 100cqi / var(--fit, 1));
}

.lineup__name a {
	text-decoration: none;
}

.lineup__name a:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.12em;
}

.lineup__text {
	color: var(--color-text-soft);
}

/* A reveal: a statement that fades in once it is in view. Opacity only: nothing
   on this site moves. Without script it is simply visible. */
.js [data-reveal] {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.js [data-reveal].is-in {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] {
		opacity: 1;
		transition: none;
	}
}

.poster--page {
	padding-bottom: var(--space-section);
}

/* The ink band's grounds in the dark scheme: a reading band's dark for the
   ledger, the deep ink for the strip, so neighbors still change ground. */
[data-theme="dark"] .band--ink:not(.band--ink-deep) {
	--ink-bg: #18181b;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .band--ink:not(.band--ink-deep) {
		--ink-bg: #18181b;
	}
}

/* The closing poster keeps its yellow ground in the dark scheme: the one band
   that stays, so every page still ends on the brand's own color. */
[data-theme="dark"] .section--cta,
[data-theme="dark"] .maintenance-page {
	--poster-bg: var(--brand-accent);
	--poster-ink: var(--brand-dark);
	--poster-text: var(--brand-dark);
	--poster-rule: var(--brand-dark);
	--poster-action: var(--brand-dark);
	--poster-action-ink: #ffffff;
	--poster-action-ring: rgba(14, 14, 16, 0.28);
	--poster-quiet-edge: var(--brand-dark);
	--poster-selection-bg: var(--brand-dark);
	--poster-selection-ink: var(--brand-accent);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .section--cta,
	:root:not([data-theme]) .maintenance-page {
		--poster-bg: var(--brand-accent);
		--poster-ink: var(--brand-dark);
		--poster-text: var(--brand-dark);
		--poster-rule: var(--brand-dark);
		--poster-action: var(--brand-dark);
		--poster-action-ink: #ffffff;
		--poster-action-ring: rgba(14, 14, 16, 0.28);
		--poster-quiet-edge: var(--brand-dark);
		--poster-selection-bg: var(--brand-dark);
		--poster-selection-ink: var(--brand-accent);
	}
}

/* The footer sits on ink in both schemes, so the closing poster's yellow ends
   before it and the page does not close on one slab. */
.site-footer {
	--poster-bg: var(--brand-dark);
	--poster-ink: var(--brand-accent);
	--poster-text: #f4f4f5;
	--poster-rule: #f4f4f5;
	--poster-action: var(--brand-accent);
	--poster-action-ink: var(--brand-dark);
	--poster-action-ring: rgba(255, 217, 0, 0.32);
	--poster-quiet-edge: #f4f4f5;
	--poster-selection-bg: var(--brand-accent);
	--poster-selection-ink: var(--brand-dark);
	padding-top: clamp(40px, 5vw, 72px);
}

.site-footer .site-logo {
	color: var(--brand-accent);
}

/* The row: three real slides of one breakdown standing on the band's bottom
   edge, cut by a quarter at most (the reference's phones on the band edge). */
.poster--row {
	padding-bottom: 0;
	overflow: clip;
}

.poster__kicker {
	max-width: 36em;
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.4;
}

.poster__kicker a {
	font-weight: 400;
}

.slide-row {
	display: flex;
	gap: var(--gap);
	align-items: flex-start;
	/* Three slides across: a quarter of a slide's height is about a tenth of
	   the row's width (a percentage margin follows the width). Two across on
	   a phone: about 15%. */
	margin-bottom: -10%;
	padding-top: clamp(8px, 1vw, 16px);
}

@media (max-width: 599px) {
	.slide-row {
		margin-bottom: -15%;
	}
}

.slide-row__item {
	flex: 1 1 0;
	min-width: 0;
	display: block;
}

.slide-row__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: var(--rule) solid var(--poster-rule);
}

@media (max-width: 599px) {
	.slide-row__item:nth-child(n + 3) {
		display: none;
	}
}

/* The ledger: one person against the team, rows between hairlines. */
.compare {
	width: 100%;
	max-width: 62em;
	border-collapse: collapse;
}

.compare th,
.compare td {
	padding: 14px 24px 14px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: var(--hairline) solid var(--color-rule);
}

.compare th:last-child,
.compare td:last-child {
	padding-right: 0;
}

.compare thead th {
	padding-top: 0;
	font-size: var(--fs-small);
	font-weight: 700;
	border-bottom-width: var(--rule);
}

.compare tbody th {
	width: 22%;
	font-weight: 800;
}

.compare td:nth-child(2) {
	color: var(--color-text-mute);
}

.compare td:nth-child(3) {
	font-weight: 700;
}

.band--ink .compare td:nth-child(2) {
	color: #b4b4bc;
}

@media (max-width: 639px) {
	.compare thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.compare tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		padding-block: 14px;
		border-bottom: var(--hairline) solid var(--color-rule);
	}

	.compare th,
	.compare td {
		padding: 0;
		border: 0;
	}

	.compare tbody th {
		width: auto;
	}

	.compare td:nth-child(2)::before {
		content: attr(data-one) " ";
	}

	.compare td:nth-child(3)::before {
		content: attr(data-team) " ";
	}
}

/* The marquee is a poster band of its own: yellow with ink type in the light
   scheme, ink with yellow in the dark one (the neon sign). */
.marquee.poster {
	margin-block: 0;
	padding-block: clamp(24px, 3vw, 44px);
	background: var(--poster-bg);
	color: var(--poster-ink);
}

/* A timeline stop that is the point: "48 de ore" at figure size. */
.timeline__step--big .timeline__title {
	font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: -0.035em;
	font-weight: 900;
}

.timeline__step--big::before {
	color: var(--brand-accent);
}

.band--ink .timeline__step--big::before,
.poster .timeline__step--big::before {
	color: inherit;
}

/* A manifesto: one statement per row between rules, its one line under it. */
.manifesto {
	display: flex;
	flex-direction: column;
	max-width: 30em;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: var(--rule) solid var(--color-rule);
}

.manifesto__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block: clamp(20px, 2.4vw, 32px);
	border-top: var(--rule) solid var(--color-rule);
}

.manifesto__title {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.875rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.band--ink .manifesto__title {
	color: var(--ink-statement);
}

.manifesto__text {
	max-width: 36em;
	color: var(--color-text-soft);
}

/* The footer on a phone: the three link lists become one ruled list, so the
   footer is not the longest band on the page. */
@media (max-width: 639px) {
	.site-footer__top {
		gap: 0;
	}

	.site-footer__brand {
		padding-bottom: 24px;
	}

	.site-footer__col {
		padding-block: 16px;
	}

	.site-footer__col + .site-footer__col {
		border-top: var(--hairline) solid var(--color-rule);
	}

	.site-footer__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 20px;
	}
}

/* The figure as a page's opening (the hire-cost page): the question small
   above it, the number filling the width. */
.poster--figure .poster__kicker {
	font-size: var(--fs-h2);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.poster--figure .figure__value {
	color: var(--poster-ink);
}

/* A sum ledger with the euro beside each amount, and the contact ledger. */
.ledger__eur {
	display: inline-block;
	min-width: 5.5em;
	margin-left: 12px;
	font-weight: 400;
	color: var(--color-text-mute);
	text-align: right;
}

.ledger--contact > dd {
	min-width: 0;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
}

.ledger--contact > dt {
	font-weight: 700;
}

@media (min-width: 640px) {
	.ledger--contact {
		grid-template-columns: 11em minmax(0, 1fr);
	}
}

/* Narrow screens: a ledger stacks each label over its amount, so an email or
   a Russian amount never pushes the page sideways. */
@media (max-width: 479px) {
	.ledger {
		grid-template-columns: minmax(0, 1fr);
	}

	.ledger > dt {
		padding-bottom: 0;
	}

	.ledger > dd {
		padding-top: 4px;
		text-align: left;
		border-top: 0;
	}

	.ledger > dd.ledger__total {
		border-top: 0;
	}

	.ledger__eur {
		min-width: 0;
		text-align: left;
	}
}

/* A row of figures: the evidence, four numbers over their labels. */
.facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 14px;
	border-top: var(--rule) solid var(--color-rule);
}

.fact__value {
	font-size: clamp(2.75rem, 1.6rem + 4vw, 5.5rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
}

.band--ink .fact__value {
	color: var(--ink-statement);
}

.fact__label {
	font-size: var(--fs-small);
	color: var(--color-text-soft);
}

/* The form's sidebar on the audit page: ruled labels and short answers. */
.audit-layout__aside .eyebrow {
	margin-top: 8px;
}

.audit-layout__aside .eyebrow:first-child {
	margin-top: 0;
}

.aside__text {
	max-width: 30em;
	color: var(--color-text-soft);
}

@media (min-width: 1024px) {
	.audit-layout {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		gap: clamp(32px, 5vw, 80px);
	}

	.audit-layout__aside {
		position: sticky;
		top: calc(var(--header-h) + 24px);
	}
}

/* An article's opening: the title at statement size (not poster size, it is
   nine words), the excerpt as its line, the figures slide as the corner. */
.poster--hero .poster__title--article {
	max-width: 14em;
	font-size: min(var(--fs-poster-mid), 100cqi / var(--fit-word, 1));
}

@media (min-width: 720px) {
	.poster--hero .poster__title--article {
		font-size: min(var(--fs-poster-mid), 100cqi / var(--fit, 1));
	}
}

.proof--static {
	cursor: default;
}

.poster--article .eyebrow {
	max-width: 30em;
}

/* An article's slides, each on its own ink band, no larger than the column. */
.audit__figure .rich-text figure {
	margin: 0;
}

.audit__figure .rich-text figure img {
	border-color: var(--ink-rule);
}

.audit__figure .rich-text figcaption {
	color: var(--ink-text);
}

.audit__text + .audit__text {
	padding-top: 0;
}

/* ==========================================================================
   16. Examples: real breakdown slides as a wall, a strip or brand tabs
   (parts/examples.php). The band stacks its parts with the section's own
   rhythm, so the strip never sits on the lead's last line.
   ========================================================================== */
.examples {
	display: flex;
	flex-direction: column;
	gap: var(--stack);
}

/* The wall: every slide at once, three across, two on a phone. */
.wall {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.wall {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wall__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
}

.wall__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: var(--rule) solid var(--color-rule);
}

.wall__caption {
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.35;
}

.wall__link:hover .wall__caption {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.18em;
}

/* Tabs: one per brand, plain heavy type; the chosen one in the band's
   statement color over a thick rule. A tab is a control, so it answers the
   pointer with the rule, and nothing moves. */
.tabs {
	--tabs-on: var(--color-text);
	display: flex;
	flex-wrap: wrap;
	gap: 4px clamp(16px, 2.4vw, 32px);
}

.band--ink .tabs {
	--tabs-on: var(--ink-statement);
}

.tabs__tab {
	min-height: 48px;
	padding: 8px 0;
	font: inherit;
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-text);
	background: none;
	border: 0;
	border-bottom: 4px solid transparent;
	border-radius: 0;
	cursor: pointer;
}

.tabs__tab:hover {
	border-bottom-color: currentColor;
}

.tabs__tab[aria-selected="true"] {
	color: var(--tabs-on);
	border-bottom-color: currentColor;
}

.tabs__tab:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 4px;
}

.examples__panel {
	display: flex;
	flex-direction: column;
	gap: var(--stack);
}

.examples__panel[hidden] {
	display: none;
}

/* With script the tab names label the panels, so the panels' own headings
   are for screen readers only (a <noscript> rule shows them again). The
   wrapper leaves the panel's flow, or its gap would double the room above
   the strip. */
.examples--tabs .examples__brand-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.examples__more {
	max-width: var(--measure);
	font-weight: 700;
}