/* =========================================================
   page.css — Pages with the contour-map hero.
   ========================================================= */

.page-hero {
	position: relative;
	overflow: hidden;
}
.page-hero__art {
	position: absolute; inset: 0;
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	opacity: .9;
}
.page-hero::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.92) 100%);
	pointer-events: none;
}
.page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--space-8) var(--space-4) var(--space-6);
}
.page-hero__title {
	font-family: var(--font-prose);
	font-size: clamp(2rem, 5vw, 3rem);
	color: var(--text-strong);
	margin: var(--space-3) 0;
}
.page-hero__lede {
	font-size: 1.15rem;
	color: var(--text-muted);
	max-width: 60ch;
}

.page-wrap {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--space-6) var(--space-4);
}
.page-content {
	font-family: var(--font-prose);
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--text-default);
}
.page-content h2 { font-family: var(--font-prose); font-size: 1.75rem; margin: var(--space-6) 0 var(--space-3); }
.page-content h3 { font-family: var(--font-prose); font-size: 1.35rem; margin: var(--space-5) 0 var(--space-3); }
.page-content p, .page-content ul, .page-content ol { margin-bottom: var(--space-4); }
.page-content ul, .page-content ol { padding-left: 1.3em; list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content a { color: var(--sonix-blue); }