:root {
	color-scheme: light;
	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	background: #fbfaf8;
	color: #111111;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	background:
		linear-gradient(90deg, rgba(17, 17, 17, 0.035) 1px, transparent 1px),
		linear-gradient(180deg, rgba(17, 17, 17, 0.028) 1px, transparent 1px),
		#fbfaf8;
	background-size: 32px 32px;
	color: #111111;
}

.page {
	width: min(100% - 40px, 680px);
	margin: 0 auto;
	padding: clamp(52px, 11vh, 104px) 0 48px;
	opacity: 0;
	transform: translateY(10px);
}

.page.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 520ms ease,
		transform 520ms ease;
}

h1 {
	margin: 0 0 22px;
	font-size: clamp(1.75rem, 5vw, 3.15rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0;
}

p,
li {
	max-width: 560px;
	font-size: clamp(1rem, 1.9vw, 1.22rem);
	line-height: 1.55;
	letter-spacing: 0;
}

p {
	margin: 0 0 18px;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

a:hover {
	text-decoration-thickness: 2px;
}

::selection {
	background: #111111;
	color: #fbfaf8;
}

@media (prefers-reduced-motion: reduce) {
	.page,
	.page.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 520px) {
	.page {
		width: min(100% - 28px, 680px);
		padding-top: 48px;
	}

}