/**
 * Wandhaus — long-form prose register.
 *
 * Scoped to pages using `page-templates/wh-prose.php`. Implements §31 of
 * the design system (Content-pagina · long-form register).
 *
 * Stylesheet handle: scc-wandhaus-prose
 * Enqueued conditionally from functions.php when on the wh-prose template.
 */

:root {
	--prose-max: 68ch;
}

/* ── Page hero ───────────────────────────────────────────────────── */

.wh-prose__head {
	padding: clamp(var(--s-6), 5vw, var(--s-56)) 0 clamp(var(--s-20), 3vw, 28px);
	border-bottom: 1px solid var(--border);
}

.wh-prose__head-inner {
	max-width: var(--prose-max);
	margin-inline: auto;
	padding: 0 var(--page-pad);
}

.wh-prose__head .wh-breadcrumbs,
.wh-prose__head .wh-page__breadcrumbs {
	margin-bottom: var(--s-4);
}

.wh-prose__h1 {
	font-family: var(--font-display);
	font-size: clamp(36px, 5vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--ink);
	margin: 0;
}

.wh-prose__updated {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: var(--s-3) 0 0;
}

/* ── Body container ──────────────────────────────────────────────── */

.wh-prose__body {
	padding: clamp(var(--s-6), 5vw, var(--s-56)) 0 clamp(72px, 10vw, 144px);
}

.wh-prose {
	max-width: var(--prose-max);
	margin-inline: auto;
	padding: 0 var(--page-pad);
	color: var(--ink-2);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
}

.wh-prose > *:first-child { margin-top: 0; }

/* ── Headings (H2 Fraunces · H3 Inter medium · H4 mono caps) ────── */

.wh-prose h2 {
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 500;
	color: var(--ink);
	margin: var(--s-56) 0 var(--s-4);
	scroll-margin-top: 96px;
	position: relative;
}

.wh-prose h3 {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--ink);
	margin: var(--s-6) 0 var(--s-3);
	scroll-margin-top: 96px;
	position: relative;
}

.wh-prose h4 {
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: var(--s-5) 0 var(--s-2);
}

/* Heading deep-link anchors inject an `id` only; the visible link icon
 * was removed 2026-06-13 (cluttered prose titles, forced-visible on
 * mobile). No `.wh-prose__anchor` styling needed anymore. */

/* ── Paragraphs ──────────────────────────────────────────────────── */

.wh-prose p {
	color: var(--ink-2);
	margin: 0 0 1em;
}

.wh-prose p:last-child { margin-bottom: 0; }

/* ── Inline links — underline always, accent on hover ────────────── */

.wh-prose a:not(.wh-prose__anchor) {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: var(--border-strong);
	transition: color var(--transition), text-decoration-color var(--transition);
}

.wh-prose a:not(.wh-prose__anchor):hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

/* ── Lists — terracotta marker (ul) · Fraunces serif numerals (ol) ─ */

.wh-prose ul,
.wh-prose ol {
	margin: 1em 0;
	padding-left: 28px;
}

.wh-prose ul > li,
.wh-prose ol > li {
	padding-left: var(--s-1);
	margin-bottom: var(--s-2);
	color: var(--ink-2);
}

.wh-prose ul > li::marker {
	color: var(--accent);
	font-size: 1.1em;
}

.wh-prose ol {
	list-style: none;
	counter-reset: wh-prose-ol;
	padding-left: 0;
}

.wh-prose ol > li {
	counter-increment: wh-prose-ol;
	padding-left: 36px;
	position: relative;
}

.wh-prose ol > li::before {
	content: counter(wh-prose-ol) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1.65;
	color: var(--accent);
	font-feature-settings: 'lnum';
}

/* Nested lists keep simple disc/decimal so they don't fight visually. */
.wh-prose li ul > li::marker { color: var(--ink-faint); }
.wh-prose li ol { padding-left: 1.5em; list-style: decimal; }
.wh-prose li ol > li { padding-left: 0.25em; }
.wh-prose li ol > li::before { content: none; position: static; }

/* ── Tables (re-uses §17 data-display register) ──────────────────── */

.wh-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--s-5) 0;
	font-size: 14px;
}

.wh-prose th,
.wh-prose td {
	padding: var(--s-3) var(--s-4);
	text-align: left;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

.wh-prose th {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
	border-bottom: 1px solid var(--border-strong);
}

.wh-prose td { color: var(--ink-2); }

/* Gutenberg `.wp-block-table` wrapper — the figure adds its own
 * margin we don't want stacking with our 24px table margin. */
.wh-prose .wp-block-table {
	margin: var(--s-5) 0;
}
.wh-prose .wp-block-table table {
	margin: 0;
}
.wh-prose .wp-block-table figcaption {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-top: var(--s-2);
	text-align: left;
}

/* ── Images & figures ────────────────────────────────────────────── */

.wh-prose img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: var(--s-5) auto;
}

.wh-prose figure { margin: var(--s-5) 0; }

.wh-prose figcaption {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-top: var(--s-2);
	text-align: center;
}

/* ── Editor footer + page-links ──────────────────────────────────── */

.wh-pagelinks {
	margin-top: var(--s-6);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.wh-prose__edit {
	padding: 0 0 var(--s-7);
	font-size: 12px;
	color: var(--ink-muted);
}