/* Reset + typography + layout primitives. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--ink);
	background: var(--paper);
	overflow-x: clip;
}

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

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

button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

input, textarea, select { font: inherit; color: inherit; background: none; border: 0; outline: none; }

::selection { background: var(--navy); color: var(--paper); }

:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 3px;
	border-radius: 6px;
}

.skip-link {
	position: absolute; top: -40px; left: 12px; background: var(--ink); color: var(--paper);
	padding: 8px 14px; border-radius: 6px; z-index: 999; font-size: var(--fs-small);
}
.skip-link:focus { top: 12px; }

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--container-px);
}

/* Display + lede typography. */
.display {
	font-family: var(--font-display);
	font-weight: 360;
	font-size: var(--fs-display);
	line-height: 0.98;
	letter-spacing: -0.035em;
	font-variation-settings: "opsz" 144, "SOFT" 30;
	text-wrap: balance;
}
.display em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; color: var(--navy); }
.display--md { font-size: var(--fs-display-md); line-height: 1.04; letter-spacing: -0.028em; }

.lede {
	font-size: var(--fs-lede);
	line-height: 1.5;
	color: var(--mute);
	max-width: 60ch;
	text-wrap: pretty;
}

.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
}
.eyebrow__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 4px var(--gold-soft);
}
.eyebrow--light { color: rgba(248,245,240,0.7); }
.eyebrow--light .eyebrow__dot { background: var(--gold); box-shadow: 0 0 0 4px rgba(200,153,61,0.18); }

/* Section heads. */
.section-head {
	display: flex; flex-direction: column; gap: 18px;
	max-width: 30ch;
	margin-bottom: clamp(48px, 7vw, 88px);
}
.section-head--center { max-width: 32ch; margin-inline: auto; align-items: center; text-align: center; }
.section-head--wide   { max-width: 40ch; }

/* Reveal on scroll. */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity var(--dur-slow) var(--ease),
		transform var(--dur-slow) var(--ease);
	transition-delay: calc(var(--reveal-stagger, 0) * 90ms);
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1; transform: none; }
}