/**
 * Base — font face, reset, and the typographic scale.
 *
 * The production site loads six separate Parkinsans TTFs with a broken weight map
 * (Medium declared as 300, SemiBold as 500, Light as 100). Parkinsans is a variable
 * font with a 300..800 weight axis, so two woff2 subsets replace all six files and
 * the weight map becomes correct. Visual output is unchanged.
 */

@font-face {
	font-family: "Parkinsans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/parkinsans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Parkinsans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/parkinsans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Reset ------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Offset for the fixed header when jumping to an in-page anchor. */
	scroll-padding-top: 120px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--sfx-bg);
	color: var(--sfx-text);
	font-family: var(--sfx-font);
	font-size: var(--sfx-fs-body);
	font-weight: var(--sfx-w-regular);
	line-height: var(--sfx-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* The production site sets overflow-x: hidden !important on html and body to
	   paper over a horizontal overflow bug. This theme fixes the overflow at source
	   (see layout.css), so scroll containment is not needed and sticky positioning
	   keeps working. */
}

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

/* ---- Headings ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--sfx-font);
	font-weight: var(--sfx-w-regular);
	line-height: var(--sfx-lh-heading);
	color: var(--sfx-text);
	text-wrap: balance;
}

h1 { font-size: var(--sfx-fs-h1); }
h2 { font-size: var(--sfx-fs-h2); }
h3 { font-size: var(--sfx-fs-h3); font-weight: var(--sfx-w-medium); }
h4 { font-size: var(--sfx-fs-h4); font-weight: var(--sfx-w-medium); }
h5, h6 { font-size: var(--sfx-fs-body); font-weight: var(--sfx-w-semibold); }

p, ul, ol, dl, blockquote, table, figure { margin: 0 0 var(--sfx-stack); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

/* Carried over from the production kit: green emphasis inside a headline. */
.highlight { color: var(--sfx-green); }
.bold { font-weight: var(--sfx-w-semibold); }

/* Display type — the hero headline treatment. */
.sfx-display {
	font-size: var(--sfx-fs-display);
	line-height: var(--sfx-lh-display);
	font-weight: var(--sfx-w-regular);
}

/* Eyebrow — uppercase letterspaced label ("UNMATCHED SCALE"). Always paired with a
   real heading; never used as a heading itself, to keep the outline clean. */
.sfx-eyebrow {
	display: block;
	margin: 0 0 var(--sfx-gutter-sm);
	font-size: var(--sfx-fs-eyebrow);
	font-weight: var(--sfx-w-light);
	line-height: var(--sfx-lh-tight);
	letter-spacing: var(--sfx-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sfx-text-muted);
}

.sfx-lede { font-size: 18px; line-height: var(--sfx-lh-body); color: var(--sfx-text-muted); }
.sfx-small { font-size: var(--sfx-fs-small); }
.sfx-fine  { font-size: var(--sfx-fs-fine); color: var(--sfx-text-muted); }

/* ---- Links ------------------------------------------------------------- */

a {
	color: var(--sfx-green-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--sfx-dur) var(--sfx-ease);
}

a:hover { color: var(--sfx-ink); }

/* Arrow-link affordance carried over from the production site. */
.sfx-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-weight: var(--sfx-w-medium);
}

.sfx-arrow-link::after {
	content: "\2197"; /* ↗ */
	color: var(--sfx-green);
	transition: transform var(--sfx-dur) var(--sfx-ease);
}

.sfx-arrow-link:hover::after { transform: translate(2px, -2px); }

/* ---- Focus ------------------------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--sfx-green);
	outline-offset: 2px;
	border-radius: var(--sfx-radius-sm);
}

.sfx-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--sfx-ink);
	color: var(--sfx-white);
	text-decoration: none;
}

.sfx-skip-link:focus {
	left: 0;
	color: var(--sfx-white);
}

.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;
}

/* ---- Inverted context -------------------------------------------------- */

.sfx-invert,
.sfx-invert h1, .sfx-invert h2, .sfx-invert h3, .sfx-invert h4 {
	color: var(--sfx-text-invert);
}

.sfx-invert .sfx-eyebrow { color: var(--sfx-white); }
.sfx-invert .sfx-lede,
.sfx-invert .sfx-fine { color: var(--sfx-text-invert-muted); }
/* On a dark ground #06D565 clears AA, so the brand green is used directly. */
.sfx-invert a { color: var(--sfx-green); }
.sfx-invert a:hover { color: var(--sfx-green-soft); }