:root {
	--bg: #fdfdfc;
	--fg: #1a1a1a;
	--muted: #666;
	--accent: #0b5fa5;
	--rule: #e5e5e2;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #131417;
		--fg: #e8e8e6;
		--muted: #9a9a97;
		--accent: #6db3e8;
		--rule: #2a2b2f;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 18px/1.65 ui-serif, Georgia, "Times New Roman", serif;
	-webkit-font-smoothing: antialiased;
}

main {
	max-width: 42rem;
	margin: 0 auto;
	padding: 4rem 1.5rem 3rem;
}

header { margin-bottom: 3rem; }

h1 {
	font-size: 2.2rem;
	margin: 0 0 0.4rem;
	letter-spacing: -0.01em;
}

.tagline {
	color: var(--muted);
	margin: 0;
	font-style: italic;
}

h2 {
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 2.5rem 0 0.6rem;
	border-bottom: 1px solid var(--rule);
	padding-bottom: 0.4rem;
}

p { margin: 0.6rem 0; }

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

footer {
	margin-top: 4rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
	color: var(--muted);
	font-size: 0.9rem;
}