/**
 * Typography.
 *
 * Sizes come from theme.json presets so the editor and the front end cannot drift apart.
 * What lives here is what presets cannot express: the width axis of the display face,
 * tabular figures on technical values, and the measure that keeps body text readable.
 */

h1,
h2,
h3,
h4,
.alt-display-xl,
.alt-display-l {
	font-family: var(--alt-font-display);
	font-weight: var(--h2-weight);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	/* Archivo carries a width axis; the design system assigns a width per heading role. */
	font-stretch: var(--alt-width-h2);
	text-wrap: balance;
}

/**
 * Display roles.
 *
 * font-stretch drives the Archivo wdth axis. Without the variable font loaded the browser
 * falls back to Arial Narrow, which is why the fallback stack is narrow too - a sudden jump
 * to a wide face would reflow the hero.
 */
.alt-display-xl {
	font-size: var(--text-display-xl);
	font-stretch: var(--display-xl-stretch);
	font-weight: var(--display-xl-weight);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
}

.alt-display-l,
h1 {
	font-size: var(--text-display-l);
	font-stretch: var(--display-l-stretch);
	font-weight: var(--display-l-weight);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
}

h2 {
	font-size: var(--text-h2);
}

/* h3 returns to normal width: the width axis belongs to the display roles, not to every heading. */
h3 {
	font-size: var(--text-h3);
	line-height: var(--leading-h3);
	font-stretch: 100%;
}

@media (max-width: 767px) {
	h3 {
		font-size: var(--text-h3-mobile);
	}
}

h4 {
	font-size: var(--text-body-l);
	font-stretch: 100%;
}

/* Paragraph rhythm. Stacked text gets space between, never before the first item. */
p + p,
p + ul,
p + ol,
ul + p,
ol + p {
	margin-top: var(--alt-space-3);
}

/**
 * Measure.
 *
 * 68ch is the upper end of the brand system's 55-68 character target; 72 is the hard
 * maximum, so this leaves no room to drift past it.
 */
.alt-measure {
	max-width: var(--alt-measure);
}

.alt-measure--wide {
	max-width: var(--alt-measure-max);
}

.alt-measure--technical {
	max-width: var(--alt-measure-technical);
}

/**
 * Eyebrow: a short uppercase label above a heading. Upper case is applied in CSS, so the
 * stored content stays normally capitalized and remains readable to a screen reader that
 * spells out all-caps words.
 */
.alt-eyebrow {
	display: block;
	margin: 0 0 var(--alt-space-2);
	color: var(--alt-steel-700);
	font-family: var(--alt-font-mono);
	font-size: var(--text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.alt-section--dark .alt-eyebrow,
.alt-on-dark .alt-eyebrow {
	color: var(--alt-steel-500);
}

/**
 * Technical and numeric values.
 *
 * Tabular figures keep columns of measurements aligned; without them a table of values
 * visibly wobbles. Applies to every measurement, not only tables.
 */
.alt-mono,
.alt-spec-value,
code,
kbd,
samp,
pre {
	font-family: var(--alt-font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: var(--tracking-mono);
}

.alt-spec-value {
	display: block;
	font-size: var(--text-spec-value);
	font-weight: 500;
	line-height: 1;
}

/* The unit belongs with its value: a non-breaking space in the markup plus no wrap here. */
.alt-unit {
	white-space: nowrap;
}

.alt-lead {
	font-size: var(--text-body-l);
}

.alt-small {
	font-size: var(--text-small);
}

.alt-muted {
	color: var(--alt-steel-700);
}

.alt-section--dark .alt-muted,
.alt-on-dark .alt-muted {
	color: var(--alt-steel-500);
}

/**
 * A measurement condition is part of the claim, never decoration. It is styled quietly but
 * never hidden: 07_CONTENT_AND_CLAIMS_RULES.md forbids context-free numbers.
 */
.alt-condition {
	display: block;
	margin-top: var(--alt-space-1);
	color: var(--alt-text-muted);
	font-family: var(--alt-font-mono);
	font-size: var(--text-small);
	line-height: var(--leading-mono);
	letter-spacing: var(--tracking-mono);
}

.alt-section--dark .alt-condition,
.alt-on-dark .alt-condition {
	color: var(--alt-steel-500);
}