/* Secondary pages: About, Contact, 404, /subscribed, construction.
   Loaded via `extraCss: ["pages"]`. */

/* ---------- About ---------- */
.about-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--s-8);
	align-items: start;
}

.prose > * + * { margin-top: var(--s-4); }

.prose h2 {
	font-size: var(--fs-2xl);
	margin-top: var(--s-7);
}

.prose h2:first-child { margin-top: 0; }

.prose p { max-width: 62ch; }

.about-aside {
	position: sticky;
	top: calc(var(--header-h) + var(--s-4));
	padding: var(--s-5);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line);
	background: var(--c-surface);
}

.about-aside h2 {
	font-size: var(--fs-lg);
	margin-bottom: var(--s-4);
}

.find-list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--s-1);
}

.find-list a {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) 0;
	color: var(--c-text);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--fs-sm);
}

.find-list a:hover { color: var(--c-heading); }

.find-list svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--c-text-muted);
}

.find-list a:hover svg:not(.brand) { color: var(--c-heading); }

.about-byline { margin-top: var(--s-7); }

/* ---------- Contact (the email cards are .contact-grid, components.css) ---------- */
.contact-more {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s-8);
	align-items: start;
}

.contact-more h2 {
	font-size: var(--fs-2xl);
	margin-bottom: var(--s-4);
}

.company {
	font-style: normal;
	color: var(--c-text);
	line-height: 1.7;
}

.company strong { color: var(--c-heading); }

/* ---------- Centred status pages (404, subscribed, construction) ---------- */
.status {
	padding: var(--s-9) 0;
	background-image: var(--glow-elements);
	text-align: center;
}

.status .container { max-width: 720px; }

.status h1 {
	font-size: var(--fs-4xl);
	margin-bottom: var(--s-4);
}

.status .lede { color: var(--c-text-muted); }

.status .btn-row { justify-content: center; }

.status__code {
	/* Only as wide as the digits, so they show all four forces. */
	width: fit-content;
	margin-inline: auto;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(5rem, 18vw, 9rem);
	line-height: 1;
	margin-bottom: var(--s-3);
	background: var(--grad-elements);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.status__steps {
	margin-top: var(--s-7);
	padding-top: var(--s-6);
	border-top: 1px solid var(--c-line);
}

.status__steps h2 {
	font-size: var(--fs-xl);
	margin-bottom: var(--s-3);
}

.status__steps p { color: var(--c-text-muted); margin-bottom: var(--s-5); }

@media (max-width: 960px) {
	.about-layout,
	.contact-more { grid-template-columns: 1fr; gap: var(--s-6); }

	/* Stacked, the company and Elsewhere blocks need more air between them
	   than a heading has above its own content. */
	.contact-more { gap: var(--s-7); }

	.about-aside { position: static; }

	/* The full-width aside: the links two to a row. */
	.find-list {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--s-5);
	}
}

@media (max-width: 768px) {
	.status { padding: var(--s-8) 0; }
}

@media (max-width: 480px) {
	.find-list { grid-template-columns: 1fr; }
}