:root {
	/* Color scheme */
	--color-light-shades-1: #f6f5ee;
	--color-light-shades-2: #dadad3;
	--color-light-shades-3: #bfbfb9;
	--color-light-shades-4: #a5a5a0;
	--color-light-shades-5: #8c8b87;
	--color-light-accent-1: #c38f3c;
	--color-light-accent-2: #ae8037;
	--color-light-accent-3: #997132;
	--color-light-accent-4: #85622d;
	--color-light-accent-5: #715427;
	--color-main-brand-1: #7da4aa;
	--color-main-brand-2: #709297;
	--color-main-brand-3: #638185;
	--color-main-brand-4: #577074;
	--color-main-brand-5: #4a5f63;
	--color-dark-accent-1: #975644;
	--color-dark-accent-2: #874d3d;
	--color-dark-accent-3: #774537;
	--color-dark-accent-4: #683d31;
	--color-dark-accent-5: #59352b;
	--color-dark-shades-1: #2a2c3c;
	--color-dark-shades-2: #262836;
	--color-dark-shades-3: #232431;
	--color-dark-shades-4: #20212b;
	--color-dark-shades-5: #1c1d26;

	/* Font sizes and line height (heading sizes via https://typescale.com/; Minor Third) */
	--body-font-size: 1rem;
	--body-line-height: 1.65;
	--heading-line-height: 1.35;
	--h1-font-size: 2.986rem;

	/* Fonts (for system fonts, see https://systemfontstack.com) */
	--font-body:
		400 var(--body-font-size) / var(--body-line-height) -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
	;
	--font-heading:
		600 var(--body-font-size) / var(--heading-line-height) Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

	/* Site colors */
	--body-background-color: light-dark(var(--color-light-shades-1), var(--color-dark-shades-3));
	--body-text-color: light-dark(var(--color-dark-shades-5), var(--color-light-shades-1));
	--shadow-color: light-dark(hsl(60deg 5.9% 80%), hsl(234deg 19.2% 10.2%));

}

@media screen and (prefers-reduced-motion: reduce),
(update: slow) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

html {
	box-sizing: border-box;
	color-scheme: light dark;
	text-size-adjust: none;

	@media screen and (prefers-reduced-motion: no-preference) {
		scroll-behavior: smooth;
	}
}

body {
	background-color: var(--body-background-color);
	color: var(--body-text-color);
	font: var(--font-body);
	margin: 0;
	min-block-size: 100svh;
	padding: 0;
}

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

:target {
	scroll-margin-block: 5ex;
}

.page-outline {
	padding-block: max(1rem, 4vh);
	padding-inline: max(1rem, 3vw);
}

main {
	inline-size: 100%;
	justify-self: center;
	max-inline-size: 80ch;
	text-align: center;
}

hgroup {
	& * {
		margin: 0;
	}

	& h1 {
		font: var(--font-heading);
		font-size: var(--h1-font-size);
	}

	& p {
		font-style: italic;
	}
}

hr {
	border: 0;
	border-block-start: 0.375rem dotted light-dark(var(--color-dark-accent-1), var(--color-light-accent-1));
	margin-block: 2rem;
}

ul {
	align-items: center;
	display: flex;
	flex-direction: column;
	font-size: 1.25rem;
	gap: 1em;
	list-style-type: '';
	margin: 0;
	padding: 0;

	& li {
		inline-size: 100%;
		position: relative;
	}

	& a {
		--background-color: light-dark(var(--color-light-accent-1), var(--color-dark-accent-1));
		--border-color: light-dark(var(--color-light-accent-3), var(--color-dark-accent-3));
		--text-color: light-dark(#000, #fff);
		--marker-color: transparent;

		background-color: var(--background-color);
		border: 0.0625rem solid var(--border-color);
		border-radius: 2rem;
		box-shadow: 0 0 0.75rem 0 var(--shadow-color);
		color: var(--text-color);
		display: block;
		padding: 0.5em 1.5em;
		text-decoration: none;
		transition-duration: 0.2s;
		transition-property: background-color, border-color, color;
		transition-timing-function: ease;

		&::before,
		&::after {
			aspect-ratio: 1 / 1;
			border: 0.1875rem solid var(--marker-color);
			block-size: 1em;
			border-radius: 100%;
			content: '';
			inset-block-start: 50%;
			opacity: 75%;
			position: absolute;
			transform: translateY(-50%);
			transition: inherit;
		}

		&::before {
			inset-inline-start: 1rem;
		}

		&::after {
			inset-inline-end: 1rem;
		}

		&:hover,
		&:active,
		&:focus {
			--background-color: light-dark(var(--color-main-brand-1), var(--color-main-brand-5));
			--border-color: light-dark(var(--color-main-brand-3), var(--color-main-brand-3));
			--text-color: light-dark(#000, #fff);
			--marker-color: currentColor;
		}
	}
}