@font-face {
	font-family: "Season Mix";
	font-style: normal;
	font-weight: 450;
	font-display: swap;
	src: url("../fonts/Season-Mix450.woff2") format("woff2");
}

:root {
	color-scheme: light;

	--color-ink: #09290a;
	--color-ink-muted: rgb(9 41 10 / 0.55);
	--color-rule: rgb(9 41 10 / 0.1);
	--color-link-hover: #228827;
	--color-link-active: #29a32f;
	--color-bg-top: #fdfffe;
	--color-bg-bottom: #f2faf6;

	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 0 0 0 -1.2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	--font-text: "Season Mix", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--quote-hang: 0.326em; /* advance width of Season Mix’s “ */
	--text-body: 0.9375rem;
	--text-intro: 1.1875rem;
	--leading-text: 1.3;

	--gutter: 2rem;
	--measure: 37.6875rem;
	--quote-width: 30.125rem;
	--aside-width: 17.25rem;
	--column-gap: 3rem;
	--rule-width: 6rem;

	--space-page-top: 4rem;
	--space-page-bottom: 4rem;
	--space-intro-paragraph: 1rem;
	--space-intro-rule: 4rem;
	--space-rule-quotes: 2.5rem;
	--space-testimonial: 2rem;
	--space-quote-attribution: 1rem;
	--space-colophon: 4rem;
}

/* Not shipped yet: opt in with data-theme="dark" on <html>. */
:root[data-theme="dark"] {
	color-scheme: dark;

	--color-ink: #fff;
	--color-ink-muted: rgb(255 255 255 / 0.6);
	--color-rule: rgb(255 255 255 / 0.1);
	--color-bg-top: #1a3220;
	--color-bg-bottom: #0d1b10;
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3 0 0 0 -1.2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 36em) {
	:root {
		--text-body: 1rem;
		--text-intro: 1.5rem;
		--gutter: 2.5rem;
		--space-page-top: 9.25rem;
		--space-intro-paragraph: 1.5rem;
		--space-intro-rule: 5.5rem;
		--space-testimonial: 3rem;
		--space-quote-attribution: 0.5rem;
	}
}

/* The narrowest width that fits quote, gap, attribution and gutters, plus a classic scrollbar. */
@media (min-width: 57em) {
	:root {
		--space-colophon: 5rem;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	min-height: 100%;
	background-color: var(--color-bg-top);
	background-image: var(--grain), linear-gradient(var(--color-bg-top), var(--color-bg-bottom));
}

/* Overscroll shows only the root's background-color; see scripts/overscroll.js. */
html.is-near-end {
	background-color: var(--color-bg-bottom);
}

body {
	margin: 0;
	padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
	color: var(--color-ink);
	font-family: var(--font-text);
	font-size: var(--text-body);
	font-weight: 450;
	font-kerning: normal;
	font-synthesis: none;
	line-height: var(--leading-text);
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p,
figure,
blockquote {
	margin: 0;
}

h1,
h2 {
	font-weight: inherit;
	font-size: inherit;
}

ul[role="list"] {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration-thickness: from-font;
	text-underline-position: from-font;
}

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

a:active {
	color: var(--color-link-active);
}

a:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.page {
	max-width: calc(var(--measure) + 2 * var(--gutter));
	margin-inline: auto;
	padding: var(--space-page-top) var(--gutter) var(--space-page-bottom);
}

@media (min-width: 57em) {
	.page {
		max-width: calc(var(--quote-width) + var(--column-gap) + var(--aside-width) + 2 * var(--gutter));
	}
}

.intro {
	max-width: var(--measure);
	font-size: var(--text-intro);
}

.intro__bio {
	margin-block-start: var(--space-intro-paragraph);
}

.testimonials::before {
	content: "";
	display: block;
	width: var(--rule-width);
	height: 1px;
	margin-block: var(--space-intro-rule) var(--space-rule-quotes);
	background-color: var(--color-rule);
}

.testimonials__list {
	display: grid;
	gap: var(--space-testimonial);
}

.testimonial {
	display: grid;
	gap: var(--space-quote-attribution);
	color: var(--color-ink-muted);
}

.testimonial__quote {
	text-indent: calc(-1 * var(--quote-hang));
}

@supports (hanging-punctuation: first) {
	.testimonial__quote {
		text-indent: 0;
		hanging-punctuation: first;
	}
}

.testimonial__quote strong {
	font-weight: inherit;
	color: var(--color-ink);
}

.testimonial__name,
.testimonial__role {
	display: block;
}

@media (min-width: 57em) {
	.testimonial {
		grid-template-columns: var(--quote-width) var(--aside-width);
		column-gap: var(--column-gap);
	}
}

.colophon {
	max-width: var(--aside-width);
	margin-block-start: var(--space-colophon);
	color: var(--color-ink-muted);
}