/* Page shell for everything that does not open with a hero block.
   .site-main--no-hero clears the absolute header; .page-head is the title area of
   template pages (plain pages, legal, blog) and pulls the band back up behind the header. */
.site-main--no-hero {
	--main-top: calc(var(--header-h, 0px) + clamp(48px, 5vw, 80px));
	padding-top: var(--main-top);
}

.page-head {
	position: relative;
	overflow: hidden;
	margin-top: calc(var(--main-top, 0px) * -1);
	padding-top: max(calc(var(--header-h, 0px) + 56px), clamp(200px, 19vw, 280px));
	padding-bottom: clamp(56px, 6vw, 96px);
	--bl: 52%;
	--bw: 34%;
}
.page-head .split { align-items: end; }
.page-head h1 { max-width: 13em; }
.page-head-side {
	display: grid;
	gap: 14px;
	align-content: end;
	justify-items: start;
	padding-bottom: 0.45em;
}
.page-head-side p { max-width: 21em; }
.page-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	color: var(--ink-soft);
	font-size: var(--fs-small);
}

.page-media { margin: 0 0 var(--sp-block); }
.page-media img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border-radius: var(--radius);
}

.page-body { padding-bottom: var(--sp-section); }
.page-links { margin-top: 2em; }

@media (max-width: 900px) {
	.page-head {
		padding-top: max(calc(var(--header-h, 0px) + 64px), 156px);
		padding-bottom: 48px;
		--bl: 48%;
		--bw: 52%;
	}
	.page-head .split { row-gap: 20px; }
	.page-media img { aspect-ratio: 4 / 3; }
}

/* Legal pages: prose left, table of contents in the right column (lines up with the nav). */
.legal-body { align-items: start; }
.legal-body .legal-toc { grid-column: 2; grid-row: 1; }
.legal-body .prose { grid-column: 1; grid-row: 1; min-width: 0; }
.legal-toc {
	position: sticky;
	top: 32px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: var(--fs-small);
}
.legal-toc-title { color: var(--ink-soft); margin-bottom: 10px; }
.legal-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.legal-toc a { text-decoration: none; line-height: 1.35; display: inline-block; }
.legal-toc a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 900px) {
	.legal-body .legal-toc,
	.legal-body .prose { grid-column: auto; grid-row: auto; }
	.legal-toc { position: static; margin-bottom: 16px; }
}
.page-meta > * + *::before { content: "·"; margin-right: 14px; }