/* Base: reset, typography, layout primitives */

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

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

html, body { overflow-x: clip; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-400);
	line-height: 1.6;
	color: var(--ink-700);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ink-900);
	margin: 0 0 var(--sp-4);
	text-wrap: balance;
}

h1 { font-size: var(--fs-900); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-800); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-600); font-weight: 600; }
h4 { font-size: var(--fs-500); font-weight: 600; }

p, ul, ol { margin: 0 0 var(--sp-4); }
li { margin-bottom: var(--sp-2); }

a { color: var(--pulse); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pulse-d); }

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

strong { color: var(--ink-900); font-weight: 600; }

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

::selection { background: var(--pulse-tint); color: var(--ink-900); }

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

.prose { max-width: var(--prose); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }

section { padding-block: var(--sp-section); }
.section--tint { background: var(--paper-2); }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink-900);
	color: #fff;
	padding: var(--sp-3) var(--sp-5);
	z-index: 100;
	border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Type helpers */
.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-200);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pulse);
	margin-bottom: var(--sp-3);
}
.lede { font-size: var(--fs-500); color: var(--ink-500); max-width: 640px; }

.section-head { margin-bottom: var(--sp-7); }
.section-head--center { text-align: center; }
.section-head--center .lede { margin-inline: auto; }

/* Reveal-on-scroll (JS adds .is-visible; motion-safe only) */
@media (prefers-reduced-motion: no-preference) {
	.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
	.reveal.is-visible { opacity: 1; transform: none; }
}

/* Grid helpers */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}