/* Site CSS, derived from the design tokens at build time (PROJECT.md §2).
   Do not hard-code brand values here — change src/_data/tokens.json instead. */
:root {
	--color-blue: #1B5091;
	--color-sky: #6EA1D4;
	--color-pink: #CE3375;
	--color-peach: #FFBE98;
	--color-paper: #FFFFFF;
	--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
	--font-base-size: 17px;
	--font-base-line: 1.55;
	--space-base: 1rem;
	--space-gutter: 2rem;
	--space-measure: 38rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
	background: var(--color-blue);
	color: var(--color-paper);
	font: var(--font-base-size)/var(--font-base-line) var(--font-sans);
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: var(--space-gutter);
}

main { max-width: var(--space-measure); width: 100%; }

h1 {
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-peach);
	margin: 0 0 0.4rem;
}

/* First paragraph after the heading reads as the role/strapline. */
h1 + p strong {
	display: inline-block;
	color: var(--color-pink);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.8rem;
}

p { margin: 0 0 var(--space-base); }

a {
	color: var(--color-peach);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
a:hover { color: var(--color-sky); }

em { color: var(--color-sky); font-style: normal; }

hr {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin: var(--space-gutter) 0;
}