/* ==========================================================================
   tokens.css — design tokens, reset, type scale
   The palette is unchanged from the original site; it is only promoted from
   ~45 hardcoded `darkgreen` literals into named custom properties.
   ========================================================================== */

:root {
	/* --- palette ------------------------------------------------------ */
	--ink: #006400;
	/* darkgreen: headings, links, brand */
	--ink-deep: #004d00;
	/* hover / pressed */
	--ink-muted: rgba(0, 100, 0, .62);
	/* secondary copy */
	--ink-faint: rgba(0, 100, 0, .45);
	/* captions, meta */
	--mint: #cafcee;
	/* accent surface */
	--mint-soft: #eafcf6;
	/* derived tint for hovers */
	--paper: #f8f8ff;
	/* ghostwhite page ground */
	--surface: #ffffff;
	/* card ground */
	--line: rgba(0, 100, 0, .13);
	--line-strong: rgba(0, 100, 0, .26);
	--danger: #9e2a2b;
	--accent: #e0263c;
	/* the red dot in the logo */

	/* --- elevation ----------------------------------------------------
	   Shadows are tinted with the brand green rather than neutral black,
	   so soft surfaces still read as part of this palette. */
	--shadow-sm: 0 1px 2px rgba(0, 100, 0, .05), 0 2px 8px rgba(0, 100, 0, .06);
	--shadow-md: 0 2px 4px rgba(0, 100, 0, .05), 0 8px 20px rgba(0, 100, 0, .09);
	--shadow-lg: 0 4px 8px rgba(0, 100, 0, .07), 0 14px 32px rgba(0, 100, 0, .14);

	/* --- shape --------------------------------------------------------- */
	--r-sm: .5rem;
	--r-md: .875rem;
	--r-lg: 1.25rem;
	--r-pill: 999px;

	/* --- spacing ------------------------------------------------------- */
	--s-1: .25rem;
	--s-2: .5rem;
	--s-3: .75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4.5rem;

	/* --- type ---------------------------------------------------------- */
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Berkshire Swash", Georgia, serif;

	--t-xs: .75rem;
	--t-sm: .8125rem;
	--t-md: .9375rem;
	--t-base: 1.0625rem;
	--t-lg: 1.1875rem;
	--t-xl: clamp(1.25rem, 1.13rem + .5vw, 1.5rem);
	--t-2xl: clamp(1.5rem, 1.28rem + .95vw, 2.0625rem);
	--t-3xl: clamp(1.875rem, 1.44rem + 1.9vw, 2.875rem);

	--lh-tight: 1.15;
	--lh-snug: 1.35;
	--lh-body: 1.65;

	--track-wide: .09em;
	--track-caps: .12em;

	/* --- layout -------------------------------------------------------- */
	--page-max: 1240px;
	--measure: 68ch;

	/* --- motion -------------------------------------------------------- */
	--ease: cubic-bezier(.2, .7, .3, 1);
	--dur: 180ms;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	min-height: 100%;
	font-family: var(--font-body);
	font-size: var(--t-base);
	font-optical-sizing: auto;
	line-height: var(--lh-body);
	color: var(--ink);
	background-color: var(--paper);
	background-image: repeating-radial-gradient(circle, #f5f5f5, #f5f5f5 1px, transparent 1px, transparent 100%);
	background-size: 20px 20px;
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}

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

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

ul[class],
ol[class] {
	list-style: none;
}

/* ==========================================================================
   Type scale
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--ink);
	line-height: var(--lh-tight);
	font-weight: 700;
	letter-spacing: -.015em;
	text-wrap: balance;
}

h1 {
	font-size: var(--t-3xl);
}

h2 {
	font-size: var(--t-2xl);
}

h3 {
	font-size: var(--t-xl);
}

h4 {
	font-size: var(--t-lg);
	letter-spacing: -.005em;
}

h5 {
	font-size: var(--t-md);
	letter-spacing: 0;
}

h6 {
	font-size: var(--t-sm);
	font-weight: 600;
	letter-spacing: 0;
}

p {
	text-wrap: pretty;
}

/* Small uppercase label used for eyebrows, meta rows and captions. */
.eyebrow {
	display: block;
	font-size: var(--t-xs);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* ==========================================================================
   Focus + motion floor
   ========================================================================== */

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

:focus:not(:focus-visible) {
	outline: none;
}

.skip-link {
	position: absolute;
	left: var(--s-4);
	top: var(--s-4);
	z-index: 200;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-pill);
	background: var(--ink);
	color: var(--surface);
	font-size: var(--t-md);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
	transform: translateY(0);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}