---
---

*,
*::before,
*::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
:root {
	--color-dark: #2b2b2b;
	--color-light: #d9d9d9;
	--color-anchor-dark: #20323d;
	--color-anchor-light: #c0dbed;
	--color-maple: #e0151f;
	--color-aspen: #ffd700;
	--font-size--1: clamp(0.8333rem, 0.7289rem + 0.3341vi, 0.9377rem);
	--font-size-0: clamp(1rem, 0.75rem + 0.8vi, 1.25rem);
	--font-size-1: clamp(1.2rem, 0.7338rem + 1.492vi, 1.6663rem);
	--font-size-2: clamp(1.44rem, 0.6589rem + 2.4996vi, 2.2211rem);
	--font-size-3: clamp(1.728rem, 0.4953rem + 3.9448vi, 2.9607rem);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
	line-height: 1.5;
}
@media (prefers-reduced-motion: no-preference) {
	:where(html:focus-within) {
		scroll-behavior: smooth;
	}
}
@supports not (min-block-size: 100dvb) {
	:where(html) {
		block-size: 100%;
	}
}
:where(body) {
	inline-size: 100%;
	min-block-size: 100vb;
	min-block-size: 100dvb;
	-webkit-font-smoothing: antialiased;
}
:where(:focus-visible, :target) {
	scroll-margin-block: max(8vb, 1rem);
}
:where(.visually-hidden:not(:focus, :focus-within, :active)) {
	inline-size: 1px !important;
	block-size: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	white-space: nowrap !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(100%) !important;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		background-attachment: initial !important;
		animation-delay: 0s !important;
		animation-duration: 0s !important;
		animation-iteration-count: 1 !important;
		transition: none !important;
	}
}
body {
	background-color: var(--color-light);
	color: var(--color-dark);
	font-size: var(--font-size-0);
}
@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--color-dark);
		color: var(--color-light);
	}
}
:is(header, main, footer) {
	max-inline-size: 800px;
	margin-inline: auto;
	padding-inline: 1em;
}
:is(header, footer) {
	padding-block: 3rem;
}
header {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 2rem;
	border-block-end: 2px solid currentColor;
	margin-block-end: 3rem;

	img {
		image-rendering: pixelated;
	}
}
main {
	padding-block-end: 3rem;
}
footer {
	margin-block-start: 3rem;
	border-block-start: 2px solid currentColor;
	text-align: center;

	p {
		max-inline-size: initial;
	}
}
.flow > * + * {
	margin-block-start: 1em;
}
h1 {
	font-size: var(--font-size-3);
}
h2 {
	font-size: var(--font-size-2);

	* + & {
		margin-block-start: 3rem;
	}
}
p {
	max-inline-size: clamp(21em, 100vi, 30em);
	text-wrap: pretty;
}
a {
	color: var(--color-anchor-dark);
	text-decoration-skip-ink: auto;
	text-underline-offset: 0.125em;
	transition: all 0.2s ease;

	&:is(:hover, :focus, :active) {
		text-decoration-thickness: 2px;
	}

	&:focus-visible {
		outline-color: var(--color-maple);
	}
}
@media (prefers-color-scheme: dark) {
	a {
		color: var(--color-anchor-light);
	}
}
:is(abbr, dfn) {
	font-style: italic;
	text-decoration: underline;
	text-decoration-style: dotted;
}
blockquote {
	inline-size: fit-content;
	background-color: color-mix(in oklab, black, transparent 90%);
	padding: 1em;
	border-radius: 2px;

	p::before {
		content: open-quote;
	}

	p:not(:last-of-type)::after {
		opacity: 0;
	}

	p::after {
		content: close-quote;
	}
}
hr {
	background-color: currentColor;
	inline-size: 100%;
	max-inline-size: 20ch;
	block-size: 2px;
	display: block;
	border: 0;
	margin: 2.5rem auto !important;
	overflow: visible;
}
pre {
	background-color: color-mix(in oklab, black, transparent 90%);
	max-inline-size: clamp(21em, 100vi, 30em);
	border-radius: 2px;

	code {
		display: block;
		padding: 1em;
		white-space: pre-wrap;
		word-break: normal;
		word-spacing: normal;
		word-wrap: normal;
		font-size: 1rem;
		user-select: all;

		&:focus {
			animation: selectall 0.2s step-end forwards;

			@at-root {
				@keyframes selectall {
					to {
						user-select: text;
					}
				}
			}
		}
	}
}
code {
	font-size: 0.85em;
}
:is(ol, ul) {
	padding-inline-start: 1em;

	li {
		padding-inline-start: 1em;

		&::marker {
			font-weight: bold;
		}
	}
}
ol {
	counter-reset: ordered-list;

	li {
		counter-increment: ordered-list;

		&::marker {
			content: counter(ordered-list) ".";
		}
	}
}
ul {
	li {
		&::marker {
			content: "·";
		}
	}
}
svg {
	max-inline-size: 0.85em;
	max-block-size: 0.85em;
	fill: currentColor;
}
.people-list {
	list-style: "";
	display: grid;
	grid-template-columns: [image-start] 48px [image-end name-start] auto [name-end page-start] 1fr [page-end];
	align-items: center;
	column-gap: 1rem;
	row-gap: 1.5rem;
	padding: 0;
	margin-block: 2.5rem;
	word-wrap: anywhere;

	li {
		display: contents;

		.image {
			max-inline-size: 100%;
			height: auto;
			grid-column: image;
			display: grid;
			place-items: center;
			font-size: 2em;
		}

		.name {
			max-inline-size: min(25ch, 30vi);
			grid-column: name;
			font-weight: bold;
		}

		.page {
			grid-column: page;
		}

		.cta {
			grid-column: name / page;
		}
	}
}
::selection {
	background-color: var(--color-maple);
	color: var(--color-light);
}
:target {
	animation: 2s ease target;

	@at-root {
		@keyframes target {
			0%, 33% {
				background-color: var(--color-aspen);
				color: var(--color-dark);
			}
		}
	}
}
