:root {
	--bg: #f4f1e8;
	--bg-top: #f7f4ec;
	--surface: rgba(255, 255, 255, 0.72);
	--surface-strong: rgba(247, 244, 236, 0.78);
	--shadow-color: rgba(33, 38, 32, 0.08);
	--text: #1b1d1a;
	--muted: #575f57;
	--line: rgba(27, 29, 26, 0.12);
	--highlight: #1f5c4a;
	--highlight-hover: #2b735d;
	--highlight-tint: #edf4f0;
	--max-width: 1120px;
	--radius-pill: 999px;
	--space-1: 8px;
	--space-2: 12px;
	--space-3: 16px;
	--space-4: 20px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0 auto;
	min-height: 100vh;
	color: var(--text);
	background:
		radial-gradient(circle at top left, rgba(31, 92, 74, 0.14), transparent 34%),
		linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 100%);
	font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
	line-height: 1.6;
	width: min(calc(100% - 32px), var(--max-width));
	padding: var(--space-3) 0 var(--space-7);
}

a {
	color: inherit;
	text-decoration: none;
	transition:
		color 160ms ease,
		border-color 160ms ease,
		background-color 160ms ease;
}

a:hover {
	color: var(--highlight);
}

main p a,
main li a,
main h2 a,
main h3 a {
	color: var(--highlight);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.16em;
}

main p a:hover,
main li a:hover,
main h2 a:hover,
main h3 a:hover {
	color: var(--highlight-hover);
	text-decoration-thickness: 2px;
}

h1,
h2,
h3,
header > a {
	font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
}

h1,
h2,
h3,
p,
ul,
figure {
	margin: 0;
}

h1,
h2,
h3 {
	line-height: 1.08;
}

h1 {
	font-size: 56px;
}

h2 {
	font-size: 40px;
}

h3 {
	font-size: 24px;
	margin-bottom: var(--space-2);
}

p,
li,
nav a {
	color: var(--muted);
	font-size: 18px;
}

li + li {
	margin-top: var(--space-2);
}

header,
main > section,
footer,
aside,
article {
	border: 1px solid var(--line);
	background: var(--surface);
}

header,
main > section,
footer {
	border-radius: 24px;
	box-shadow: 0 20px 50px var(--shadow-color);
	backdrop-filter: blur(12px);
}

header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-1);
	padding: var(--space-3) var(--space-4);
	background: var(--surface-strong);
	border-radius: var(--radius-pill);
}

header > a {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

nav {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	gap: var(--space-3);
	justify-content: flex-end;
}

nav a {
	font-size: 16px;
}

header nav a[aria-current="page"] {
	color: var(--text);
}

header nav a[aria-current="page"]:hover {
	color: var(--highlight);
}

main {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

main > section {
	padding: var(--space-6);
}

.intro-section {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
	gap: var(--space-6);
	padding: var(--space-7);
}

.intro-section > .section-title,
.intro-section > h1 {
	grid-column: 1 / -1;
}

.intro > p:first-child {
	max-width: 672px;
	font-size: 18px;
}

.section-content {
	margin-top: var(--space-5);
}

.section-title {
	margin-bottom: var(--space-2);
	color: var(--highlight);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.actions {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: var(--space-3);
	margin-top: var(--space-6);
	justify-content: start;
}

.button {
	display: inline-grid;
	place-items: center;
	min-height: 48px;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	font-size: 17px;
	font-weight: 600;
	border: 1px solid var(--line);
	background: var(--surface);
}

.button:hover {
	color: var(--highlight);
	border-color: var(--highlight);
	background: var(--highlight-tint);
}

.primary {
	background: var(--highlight);
	color: #f7f7f2;
}

.primary:hover {
	color: #f7f7f2;
	border-color: var(--highlight-hover);
	background: var(--highlight-hover);
}

aside,
article {
	border-radius: 20px;
	padding: var(--space-5);
}

aside {
	align-self: end;
}

ul {
	padding-left: var(--space-4);
}

.cards {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.columns {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
	align-items: start;
}

.flow > * + * {
	margin-top: var(--space-3);
}

.stacked-card {
	display: flex;
	flex-direction: column;
}

.stacked-card p {
	flex: 1;
}

.media-frame {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--surface-strong);
}

.media-cover {
	display: block;
	width: 100%;
	/* aspect-ratio: 4 / 5; */
	object-fit: cover;
}

.media-inline {
	display: block;
	width: auto;
	max-width: min(100%, 220px);
	height: 50px;
	object-fit: contain;
	margin-top: var(--space-3);
}

.inline-link {
	display: inline-block;
	margin-top: var(--space-3);
	color: var(--highlight);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.16em;
}

.inline-link:hover {
	color: var(--highlight-hover);
	text-decoration-thickness: 2px;
}

.plain-list {
	list-style: none;
	padding-left: 0;
}

.plain-list li {
	margin: 0;
}

.plain-list li + li {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--line);
}

.plain-list strong {
	display: block;
	color: var(--text);
	font-size: 18px;
	font-weight: 600;
}

.section-content > li > ul {
	list-style: none;
	padding-left: 0;
}

.section-content > li > ul > li {
	margin: 0;
}

.section-content > li > ul > li + li {
	margin-top: var(--space-2);
}

.entry-item,
.entry-details {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--line);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.42);
}

.entry-details[open] {
	background: var(--surface-strong);
}

.entry-details summary {
	cursor: pointer;
	color: var(--muted);
}

.entry-details summary:hover {
	color: var(--highlight);
}

.entry-details summary::marker {
	color: var(--highlight);
}

.entry-details[open] summary {
	margin-bottom: var(--space-3);
}

.entry-title {
	color: var(--text);
	font-size: 19px;
}

.entry-details-body {
	display: grid;
	gap: var(--space-2);
	padding-top: var(--space-1);
}

.entry-details-body p {
	font-size: 16px;
}

.entry-details-body strong {
	color: var(--text);
}

.item-meta {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}

footer {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
	gap: var(--space-4);
	align-items: start;
	margin-top: var(--space-4);
	padding: var(--space-6);
}

footer aside {
	align-self: start;
}

@media (max-width: 900px) {
	header,
	.intro-section,
	.cards,
	.columns,
	footer {
		grid-template-columns: 1fr;
	}

	header {
		border-radius: 28px;
		grid-template-columns: 1fr;
	}

	.intro-section {
		padding: var(--space-6);
	}

	h1 {
		font-size: 48px;
	}
}

@media (max-width: 640px) {
	body {
		width: min(calc(100% - 16px), var(--max-width));
		padding-bottom: var(--space-3);
	}

	header,
	main > section,
	footer {
		padding: var(--space-4);
	}

	.actions {
		grid-template-columns: 1fr;
	}

	h1 {
		font-size: 40px;
	}

	nav {
		gap: var(--space-2);
	}
}