/**
 * Font loading and element defaults.
 */

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/*
 * Inter-Variable.woff2 is in fact static Regular: it has no weight axis, so
 * every bold weight above renders at 400, which is the look the site was
 * approved in. This is the real variable Inter (@fontsource-variable/inter
 * 5.1.0, latin), under its own name so only what asks for it turns bold:
 * the mega menu's column headings (Alan, 2026-10-19).
 */
@font-face {
	font-family: 'Inter Bold Axis';
	src: url('../fonts/InterVariable-wght.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Noto Serif';
	src: url('../fonts/NotoSerif-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--ink);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 var(--sp-4); line-height: var(--lh-tight); font-weight: 700; }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }

:focus-visible {
	outline: 2px solid var(--brand-navy);
	outline-offset: 2px;
}

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

.skip-link:focus {
	position: fixed;
	top: var(--sp-2); left: var(--sp-2);
	z-index: 999;
	width: auto; height: auto;
	clip: auto;
	padding: var(--sp-3) var(--sp-4);
	background: var(--brand-navy);
	color: var(--ink-invert);
}

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