:root {
	--bg: #ffffff;
	--body: oklch(37.3% 0.034 259.733);   /* paragraph text  */
	--ink: oklch(21% 0.034 264.665);      /* headings, links, bold, nav */
	--muted: oklch(55.1% 0.027 264.364);  /* dates, captions */
	--rule: oklch(92.8% 0.006 264.531);   /* hr, blockquote border */
	--bullet: oklch(87.2% 0.01 258.338);  /* list markers, selection */
	--code-bg: oklch(27.8% 0.033 256.848);
	--code-fg: oklch(92.8% 0.006 264.531);
	--target: oklch(92.4% 0.12 95.746);   /* :target heading highlight */
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: oklch(21% 0.006 285.885);   /* zinc-900 */
		--body: oklch(87.2% 0.01 258.338);
		--ink: #ffffff;
		--muted: oklch(70.7% 0.022 261.325);
		--rule: oklch(37.3% 0.034 259.733);
		--bullet: oklch(44.6% 0.03 256.802);
		--code-bg: oklch(0% 0 0 / 0.5);
		--code-fg: oklch(87.2% 0.01 258.338);
		--target: oklch(28.6% 0.066 53.813);
	}
}

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

html {
	scroll-behavior: smooth;
}

body {
	box-sizing: content-box;
	max-width: 48rem;
	min-height: 100dvh;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--body);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.75;
	cursor: default;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@media (min-width: 48rem) {
	body {
		padding: 0 2rem;
	}
}

/* ---- nav (wordmark top-left, section links top-right) ---- */

nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: 1.5rem 0;
	margin-bottom: 1.5rem;
}

@media (min-width: 48rem) {
	nav {
		margin-bottom: 4rem;
	}
}

nav .wordmark {
	font-weight: 700;
}

nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

nav a {
	color: var(--ink);
	text-decoration: none;
}

nav a.current {
	font-weight: 700;
}

nav a:hover,
footer a:hover {
	text-decoration: underline;
}

/* ---- main content column ---- */

main {
	flex: 1 0 auto;
	width: 100%;
	max-width: 65ch;
	margin: 0 auto;
}

main > :first-child {
	margin-top: 0;
}

main p {
	margin: 1.25em 0;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.75;
}

main h1 {
	font-weight: 800;
	margin: 0 0 0.889em;
}

main h2 {
	font-weight: 700;
	margin: 2em 0 1em;
}

main h3 {
	font-weight: 600;
	margin: 1.6em 0 0.6em;
}

main h4 {
	font-weight: 600;
	margin: 1.5em 0 0.5em;
}

main :is(h1, h2, h3, h4, h5, h6):target {
	background: var(--target);
}

main a {
	color: var(--ink);
	font-weight: 500;
	text-decoration: underline;
}

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

main ul,
main ol {
	margin: 1.25em 0;
	padding-inline-start: 1.625em;
}

main li {
	margin: 0.5em 0;
}

main ul {
	list-style: disc;
}

main ul li::marker {
	color: var(--bullet);
}

main ol li::marker {
	color: var(--muted);
}

main time,
main .post-meta {
	color: var(--muted);
}

main .post-meta {
	margin-top: -0.75em;
}

main hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 3em 0;
}

main blockquote {
	margin: 1.6em 0;
	padding-inline-start: 1em;
	border-inline-start: 0.25rem solid var(--rule);
	font-style: italic;
	font-weight: 500;
	color: var(--ink);
}

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

main :is(code, kbd, samp) {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.875em;
}

main code {
	color: var(--ink);
	font-weight: 600;
}

main pre {
	margin: 1.714em 0;
	padding: 0.857em 1.143em;
	border-radius: 0.375rem;
	background: var(--code-bg);
	color: var(--code-fg);
	font-size: 0.875em;
	line-height: 1.714;
	overflow-x: auto;
}

main pre code {
	color: inherit;
	font-weight: 400;
	font-size: 1em;
}

/* ---- footer ---- */

footer {
	margin-top: 4rem;
	padding: 2rem 0;
	font-size: 0.75rem;
	color: var(--ink);
}

@media (min-width: 48rem) {
	footer {
		margin-top: 8rem;
	}
}

footer > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	gap: 0.75rem;
}

@media (min-width: 48rem) {
	footer > div {
		flex-direction: row;
	}
}

footer ul {
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

footer a {
	color: var(--ink);
	text-decoration: none;
}

::selection {
	background: var(--bullet);
	color: var(--ink);
}