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

[hidden] {
	display: none !important;
}

html {
	text-size-adjust: 100%;
	tab-size: 4;
}

body {
	margin: 0;
	background: var(--page-bg);
	color: var(--text-default);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--primary-color);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-3) 0;
	font-weight: var(--weight-semibold);
}

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

h2 {
	font-size: var(--text-xl);
	margin-top: var(--space-6);
}

h3 {
	font-size: var(--text-lg);
	margin-top: var(--space-5);
}

h4 {
	font-size: var(--text-md);
	margin-top: var(--space-5);
}

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

a {
	color: var(--primary-light);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--primary-dark);
}

a:focus-visible {
	outline: 2px solid var(--primary-light);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

code {
	font-family: var(--font-mono);
	font-size: 0.92em;
	background: var(--light-bg);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}

pre {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: 1.65;
	background: var(--light-bg);
	color: var(--text-default);
	padding: var(--space-4);
	border-radius: var(--radius);
	border: 1px solid var(--border-color);
	overflow-x: auto;
	margin: 0 0 var(--space-4) 0;
}

pre code {
	background: transparent;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

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

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-3);
	background: var(--primary-color);
	color: var(--paper);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-sm);
	font-weight: var(--weight-semibold);
	z-index: 1000;
}

.skip-link:focus {
	top: var(--space-3);
	color: var(--paper);
}

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

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

/* Sub-pages: page.njk wraps content in <div class="container"> directly under
 * <main>. Give that wrapper the same top breathing room the homepage carousel
 * provides. Doesn't apply to homepage (first child is the carousel section). */
main > .container:first-child {
	padding-top: var(--space-7);
	padding-bottom: var(--space-7);
}

.container--wide {
	max-width: 1500px;
}

.container--prose {
	max-width: 72ch;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 var(--space-2) 0;
}

.lede {
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--text-default);
	max-width: 72ch;
}

.hero {
	padding-top: var(--space-7);
	padding-bottom: var(--space-7);
}

.hero h1 {
	font-size: var(--text-4xl);
	margin-bottom: var(--space-4);
	max-width: 18ch;
}

.hero-actions {
	margin-top: var(--space-5);
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.hero-actions--center {
	justify-content: center;
}

@media (width <= 720px) {
	.hero {
		padding-top: var(--space-5);
		padding-bottom: var(--space-5);
	}

	.hero h1 {
		font-size: var(--text-2xl);
	}
}