:root {
	color-scheme: light;
	--inverse: #202321;
	--inverse-text: #ffffff;
	--featured-muted: #c7cbc5;
	--newsletter-muted: #586259;
	--input-border: #bcc8ba;
	--input-background: #f8faf5;
	--button-text: #ffffff;
	--accent: var(--color-500);
	--accent-dark: var(--color-100);
	--serif: "Inter", Arial, sans-serif;
	--sans: "Inter", Arial, sans-serif;
	--type-base: 1rem;
	--type-h3: 1.953rem;
	--type-h2: 2.441rem;
	--type-h1: 3.052rem;
	--line-height-h3: 2.344rem;
	--line-height-h2: 2.929rem;
	--line-height-h1: 3.662rem;
	--color-50: oklch(0.83 0.075 282.966);
	--color-100: oklch(0.73 0.124 282.966);
	--color-200: oklch(0.63 0.176 282.966);
	--color-300: oklch(0.53 0.233 282.966);
	--color-500: oklch(0.43 0.218 282.966);
	--color-700: oklch(0.335 0.17 282.966);
	--color-800: oklch(0.24 0.122 282.966);
	--color-900: oklch(0.145 0.074 282.966);
	--color-950: oklch(0.05 0.025 282.966);
}

a:hover,
.primary-nav a:hover {
	--color-50: oklch(0.83 0.075 282.966);
	transition: color 0.2s ease-in-out;
}

.section-heading a:hover,
.post-card h3 a:hover,
.footer-nav a:hover,
.read-link:hover,
.read-link:hover span {
	color: var(--color-100) !important;
}

button,
.nav-cta,
.signup button {
	color: var(--button-text);
	background: var(--color-500);
}

button:hover,
.nav-cta:hover,
.signup button:hover {
	color: var(--color-950) !important;
	background: var(--color-100);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--ink: #f2f4f0;
		--muted: #b8c0b9;
		--paper: #17191a;
		--surface: #1e2322;
		--line: #3b4541;
		--accent: #ff8f78;
		--accent-dark: #ffb09d;
		--sage: #28332f;
		--inverse: #0b0e0d;
		--inverse-text: #f7faf6;
		--featured-muted: #d1d9d2;
		--newsletter-muted: #c2cec4;
		--input-border: #617268;
		--input-background: #1b2420;
		--button-text: #ffffff;
		--accent: var(--color-500);
		--accent-dark: var(--color-100);
	}

	.featured {
		background: var(--inverse);
		color: var(--inverse-text);
	}

	.featured p {
		color: var(--featured-muted);
	}

	.newsletter p {
		color: var(--newsletter-muted);
	}

	.signup input {
		border-color: var(--input-border);
		background: var(--input-background);
		color: var(--ink);
	}

	.nav-cta,
	.skip-link {
		color: var(--inverse-text);
	}

	a:focus-visible,
	button:focus-visible,
	input:focus-visible {
		outline-color: var(--accent);
	}
}

h1 {
	font-size: var(--type-h1);
	line-height: var(--line-height-h1);
	color: var(--inverse-text)
}

h2 {
	font-size: var(--type-h2);
	line-height: var(--line-height-h2);
}

h3 {
	font-size: var(--type-h3);
	line-height: var(--line-height-h3);
}

.featured h2,
.section-heading h2,
.newsletter h2 {
	font-size: var(--type-h2);
	line-height: var(--line-height-h2);
}

.post-card h3 {
	font-size: var(--type-h3);
	line-height: var(--line-height-h3);
	margin-bottom: 1.75rem;
}

.archive h1,
.article-header h1 {
	font-size: var(--type-h1);
	line-height: var(--line-height-h1);
}

.footer-nav h3 {
	line-height: .9rem;
}

.featured {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.archive-list {
	display: grid;
	gap: 3rem;
}

.archive-list .post-card {
	display: flex;
	gap: 2rem;
	min-width: 0;
}

.archive-list .post-card-image {
	flex: 0 0 40%;
	min-width: 0;
	margin-bottom: 0;
	aspect-ratio: 1.35 / 1;
}

.archive-list .post-card-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.archive-list .post-card-image img {
	height: 100%;
	object-fit: cover;
}

.archive-list .post-meta {
	gap: 1rem;
	min-width: 0;
	flex-wrap: wrap;
}

.archive-list .post-card h3,
.archive-list .post-card > p,
.archive-list .post-card .author {
	min-width: 0;
}

@media (max-width: 760px) {
	.featured {
		display: block;
	}

	.archive-list {
		gap: 3rem;
	}

	.archive-list .post-card {
		display: block;
	}

	.archive-list .post-card-content {
		display: block;
	}

	.archive-list .post-card-image {
		margin-bottom: 1.1rem;
		aspect-ratio: 1.55 / 1;
	}

	.archive-list .post-meta {
		gap: 1rem;
	}
}

.profile-picture {
	border-radius: 50%;
	object-fit: cover;
	width: 60px;
	height: 60px;
}