/* ===============================================================
   Tile Surrounds — Generic page (About, fallbacks, search, 404)
   =============================================================== */

.page-shell { padding-top: 72px; /* offset for sticky nav */ }

.page-header {
	padding: 96px 0 56px;
	border-bottom: 1px solid var(--hairline);
	background: var(--bg);
}
.page-header .eyebrow { display: block; margin-bottom: 24px; }
.page-header h1 {
	max-width: 18ch;
	text-wrap: balance;
}
.page-lede {
	max-width: 56ch;
	color: var(--muted);
	font-size: 18px;
	line-height: 1.65;
	margin-top: 28px;
}

.page-body { padding: 80px 0 120px; }
.page-body p,
.page-body li {
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-soft);
}
.page-body p { margin: 0 0 1.4em; }
.page-body h2 { margin: 2em 0 0.5em; font-size: 38px; }
.page-body h3 { margin: 1.5em 0 0.5em; font-size: 24px; }
.page-body a { color: var(--accent); border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.page-body a:hover { border-color: var(--accent); }
.page-body img,
.page-body picture { margin: 32px 0; }
.page-body blockquote {
	font-family: var(--serif);
	font-style: italic;
	font-size: 28px;
	line-height: 1.35;
	color: var(--ink);
	margin: 48px 0;
	padding-left: 32px;
	border-left: 2px solid var(--accent);
	max-width: 30ch;
}

/* 404 */
.four-oh-four { padding: 120px 0; text-align: center; }
.four-oh-four .eyebrow { display: block; margin-bottom: 28px; }
.four-oh-four h1 { max-width: 22ch; margin: 0 auto 28px; text-wrap: balance; }
.four-oh-four .page-lede { margin: 0 auto 40px; }
.four-oh-four .row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 820px) {
	.page-shell { padding-top: 64px; }
	.page-header { padding: 56px 0 32px; }
	.page-body { padding: 48px 0 72px; }
	.page-body p, .page-body li { font-size: 16px; }
	.page-body h2 { font-size: 28px; }
}