/*
Theme Name: HPerkins Tokens
Theme URI: https://hperkins.blog
Description: Imladris design system child theme for hperkins.blog — a Rivendell-inspired, parchment-and-evergreen serif editorial system with a mallorn-gold accent and a status-verified evidence layer (done/review/pending by rule-colour and a redundant word). Tokens in theme.json are the source of truth; the render is a consequence.
Author: Henry Perkins
Template: assembler
Version: 0.3.3
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: hperkins-tokens
*/

:root {
	/* Aliases onto the theme.json-generated presets so the tokens stay a
	   single source of truth (no parallel hex copies that can drift). */
	--hp-neutral-0: var(--wp--custom--surface--card);
	--hp-neutral-50: var(--wp--custom--surface--sunken);
	--hp-neutral-100: var(--wp--custom--border--hair);
	--hp-neutral-300: var(--wp--custom--border--strong);
	--hp-neutral-600: var(--wp--custom--text--muted);
	--hp-neutral-900: var(--wp--custom--text--strong);
	--hp-action: var(--wp--custom--text--link);
	--hp-status-merged: var(--wp--custom--status--done);
	--hp-status-review: var(--wp--custom--status--review);
	--hp-status-pending: var(--wp--custom--status--pending);
	--hp-surface-merged: var(--wp--custom--surface--done);
	--hp-surface-review: var(--wp--custom--surface--review);
	--hp-touch-min: 44px;
	/* Geometry, weight, and label-rhythm tokens follow the same single-source
	   rule as the colors above: the values live in theme.json (settings.custom)
	   and these aliases just give them short local names. The status-bearing
	   left rule is a fixed width PER component (chip/entry/evidence/quote) — the
	   anatomy is fixed, state only swaps its color. */
	--hp-rule-chip: 7px;
	--hp-rule-entry: 3px;
	--hp-rule-evidence: 5px;
	--hp-rule-quote: 3px;
	--hp-radius-chip: var(--wp--custom--radius--xs);
	--hp-radius-register: var(--wp--custom--radius--sm);
	--hp-radius-tile: var(--wp--custom--radius--sm);
	--hp-radius-panel: var(--wp--custom--radius--md);
	--hp-radius-card: var(--wp--custom--radius--md);
	--hp-radius-frame: var(--wp--custom--radius--lg);
	--hp-radius-phone: 30px;
	--hp-radius-pill: var(--wp--custom--radius--pill);
	--hp-weight-title: var(--wp--custom--weight--semibold);
	--hp-weight-strong: var(--wp--custom--weight--bold);
	--hp-gap-xs: var(--wp--preset--spacing--1);
	--hp-gap-sm: 0.375rem;
	--hp-grid-pitch: 32px;
	--hp-grid-action-tint: 8%;
	--hp-grid-status-tint: 7%;
	--hp-shadow-frame: var(--wp--custom--shadow--md);
	--hp-shadow-phone: var(--wp--custom--shadow--md);
	--hp-shadow-panel: var(--wp--custom--shadow--sm);
	--hp-shadow-mark: var(--wp--custom--shadow--gilt);
	--hp-shadow-mascot: var(--wp--custom--shadow--lg);
	--hp-tracking-label: 0.14em;
	--hp-leading-lead: var(--wp--custom--leading--relaxed);
	/* Browser chrome dots intentionally mirror familiar OS controls rather
	   than theme status tokens. */
	--hp-chrome-dot-close: #ec6a5e;
	--hp-chrome-dot-minimize: #f4bf4f;
	--hp-chrome-dot-zoom: #61c554;
}

a {
	transition: border-bottom-color 120ms ease, border-color 120ms ease;
}

button,
.wp-block-button__link {
	transition: background-color 120ms ease;
}

/* === case-study lead ===
   One shared opening-paragraph treatment: large scale, muted ink, a calmer 1.45
   leading (the single non-body line-height, tokenized), and the artifact-terminus
   space beneath. Promoted out of four hand-styled copies so the hub and demo
   leads stop drifting from the rest. */
.hp-lead {
	margin-bottom: var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--lg);
	line-height: var(--hp-leading-lead);
	color: var(--hp-neutral-600);
}

/* === status chips (box-ledger anatomy) === */
.hp-proof-bar {
	gap: var(--wp--preset--spacing--3);
	margin-block: var(--wp--preset--spacing--6);
	align-items: flex-start;
}

/* One anatomy for every line: same mono family, padding, weight, rule width,
   radius. State changes ONLY the rule color, the surface tint, and the dot
   fill. Mono lives on the base rule so a chip reads as a machine-set status
   label even where the block markup omits the mono font class (e.g. the Wapuu
   homepage hero signals). */
.hp-proof-bar .hp-chip {
	margin: 0;
	padding: 0.5rem 0.85rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	color: var(--hp-neutral-900);
	background: var(--hp-neutral-50);
	border: 1px solid var(--hp-neutral-100);
	border-left: var(--hp-rule-chip) solid var(--hp-neutral-300);
	border-radius: var(--hp-radius-chip);
}

.hp-proof-bar .hp-chip a {
	color: var(--hp-neutral-900);
	text-decoration: none;
	border-bottom: 1px solid var(--hp-neutral-300);
}

.hp-proof-bar .hp-chip::before {
	content: "\25CF";
	margin-right: 0.5em;
	color: var(--hp-neutral-300);
}

.hp-chip.is-status-merged {
	border-left-color: var(--hp-status-merged);
	background: var(--hp-surface-merged);
}
.hp-chip.is-status-merged::before { color: var(--hp-status-merged); }

.hp-chip.is-status-review {
	border-left-color: var(--hp-status-review);
	background: var(--hp-surface-review);
}
/* in-review reads as hollow, not filled: the state is not yet resolved. */
.hp-chip.is-status-review::before { content: "\25CB"; color: var(--hp-status-review); }

.hp-chip.is-status-pending {
	border-left-color: var(--hp-status-pending);
	background: var(--hp-neutral-50);
}
.hp-chip.is-status-pending::before { content: "\25CB"; color: var(--hp-status-pending); }
/* === artifact row === */
.hp-artifact-row {
	margin-top: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--5);
	border-top: 1px solid var(--hp-neutral-100);
}

.hp-artifact-row__legend {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: var(--hp-tracking-label);
	font-size: var(--wp--preset--font-size--2xs);
	color: var(--hp-neutral-600);
}

.hp-artifacts.wp-block-columns {
	gap: 0;
	margin: 0;
	border: 1px solid var(--hp-neutral-100);
	border-radius: var(--hp-radius-register);
	overflow: hidden;
}

.hp-artifacts .hp-artifact {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}

.hp-artifacts .hp-artifact + .hp-artifact {
	border-left: 1px solid var(--hp-neutral-100);
}

/* Core columns stack at ≤781px: turn the column divider into a stacked-row
   rule so it doesn't dangle as a left accent on a full-width row. */
@media (max-width: 781px) {
	.hp-artifacts .hp-artifact + .hp-artifact {
		border-left: 0;
		border-top: 1px solid var(--hp-neutral-100);
	}
}

.hp-artifact__verifies {
	margin: 0 0 var(--hp-gap-xs);
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: var(--hp-tracking-label);
	font-size: var(--wp--preset--font-size--2xs);
	color: var(--hp-neutral-600);
}

.hp-artifact__link {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
}

.hp-artifact__link a {
	color: var(--hp-action);
	text-decoration: none;
	border-bottom: 1px solid var(--hp-neutral-300);
	border-bottom-color: color-mix(in srgb, var(--hp-action) 35%, transparent);
}

.hp-artifact__link a:hover { border-bottom-color: var(--hp-action); }

/* A ledger line is owed. Two provisional conventions resolve to the same muted
   reading, so an unverified slot never looks finished: a truly empty slot shows
   an em-dash, and a written placeholder (e.g. <em>pre-tag</em>, <em>reserved</em>)
   renders as a deliberate muted mono marker — distinct from a real,
   action-colored artifact link. */
.hp-artifact__link:empty::after {
	content: "\2014";
	color: var(--hp-neutral-600);
}

.hp-artifact__link em {
	font-style: italic;
	color: var(--hp-neutral-600);
}
/* === work ledger === */
/* The Work list shares the artifact-row anatomy: one bordered register,
   each entry a row that opens with a mono status label, then the title
   link, then the consequence. State is the rule color, not decoration. */
.hp-work {
	margin-top: var(--wp--preset--spacing--5);
	border: 1px solid var(--hp-neutral-100);
	border-radius: var(--hp-radius-register);
	overflow: hidden;
}

.hp-work__entry {
	margin: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border-left: var(--hp-rule-entry) solid var(--hp-neutral-300);
}

.hp-work__entry + .hp-work__entry {
	border-top: 1px solid var(--hp-neutral-100);
}

.hp-work__entry.is-status-merged { border-left-color: var(--hp-status-merged); }
.hp-work__entry.is-status-review { border-left-color: var(--hp-status-review); }
.hp-work__entry.is-status-pending { border-left-color: var(--hp-status-pending); }

.hp-work__label {
	margin: 0 0 var(--hp-gap-sm);
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: var(--hp-tracking-label);
	font-size: var(--wp--preset--font-size--2xs);
	color: var(--hp-neutral-600);
}

.hp-work__title {
	margin: 0 0 var(--hp-gap-xs);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--hp-weight-title);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.hp-work__title a {
	color: var(--hp-neutral-900);
	text-decoration: none;
	border-bottom: 1px solid var(--hp-action);
	border-bottom-color: color-mix(in srgb, var(--hp-action) 70%, transparent);
}

.hp-work__title a:hover { border-bottom-color: var(--hp-action); }

.hp-work__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
	color: var(--hp-neutral-600);
}

.hp-work__footer {
	margin-top: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--hp-neutral-600);
}

/* === skills (capability register) ===
   Neutral proof-bar chips as capability tags (no status), grouped under mono
   legends that share the kicker-label rule. The legend needs its own bottom
   margin because that shared rule sets margin:0. */
.hp-skills {
	margin-top: var(--wp--preset--spacing--5);
}

.hp-skill-group + .hp-skill-group {
	margin-top: var(--wp--preset--spacing--4);
}

.hp-skill-group__legend {
	margin-bottom: var(--wp--preset--spacing--3);
}

.hp-skills .hp-proof-bar {
	margin-block: 0;
	gap: var(--wp--preset--spacing--2);
}

/* === quote block === */
.hp-quote.wp-block-quote {
	margin-block: var(--wp--preset--spacing--5);
	padding-left: var(--wp--preset--spacing--4);
	border-left: var(--hp-rule-quote) solid var(--hp-neutral-300);
}

/* The ceiling: body scale, regular weight, no accent color, no italic
   display treatment. Nothing the client says renders larger than the work. */
.hp-quote.wp-block-quote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	color: var(--hp-neutral-900);
}

/* A reserved quote slot reads as visibly provisional, not finished content. */
.hp-quote.is-reserved {
	border-left-style: dashed;
	border-left-color: var(--hp-neutral-300);
}

.hp-quote.is-reserved p,
.hp-quote.is-reserved cite {
	color: var(--hp-neutral-600);
	font-style: italic;
}

.hp-quote.wp-block-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-style: normal;
	color: var(--hp-neutral-600);
}
/* === product screenshots: device frames === */
.hp-shot {
	margin-block: var(--wp--preset--spacing--6);
}

.hp-shot img {
	display: block;
	width: 100%;
	height: auto;
}

.hp-shot .wp-element-caption,
.hp-shot .wp-block-image__caption {
	margin-top: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--hp-neutral-600);
}

.hp-shot .wp-element-caption a,
.hp-shot .wp-block-image__caption a {
	color: var(--hp-action);
	text-decoration: none;
	border-bottom: 1px solid var(--hp-neutral-300);
	border-bottom-color: color-mix(in srgb, var(--hp-action) 35%, transparent);
}

.hp-shot .wp-element-caption a:hover,
.hp-shot .wp-block-image__caption a:hover {
	border-bottom-color: var(--hp-action);
}

/* --- browser frame (desktop homepage shot) --- */
.hp-shot--browser {
	border: 1px solid var(--hp-neutral-100);
	border-radius: var(--hp-radius-frame);
	overflow: hidden;
	background: var(--hp-neutral-50);
	box-shadow: var(--hp-shadow-frame);
}

/* chrome bar with traffic-light dots, drawn with a gradient so no extra markup is needed */
.hp-shot--browser::before {
	content: "";
	display: block;
	height: 32px;
	border-bottom: 1px solid var(--hp-neutral-100);
	background:
		radial-gradient(circle 5px at 18px 50%, var(--hp-chrome-dot-close) 98%, transparent) ,
		radial-gradient(circle 5px at 38px 50%, var(--hp-chrome-dot-minimize) 98%, transparent),
		radial-gradient(circle 5px at 58px 50%, var(--hp-chrome-dot-zoom) 98%, transparent),
		var(--hp-neutral-50);
	background-repeat: no-repeat;
}

.hp-shot--browser img {
	border-radius: 0;
}

/* the caption sits outside the framed surface */
.hp-shot--browser .wp-element-caption,
.hp-shot--browser .wp-block-image__caption {
	padding: 0 var(--wp--preset--spacing--4) var(--wp--preset--spacing--3);
	background: var(--hp-neutral-0);
}

/* --- phone frame (booking funnel shot) --- */
.hp-shot--phone {
	width: min(100%, 300px);
}

.hp-shot--phone img {
	box-sizing: border-box;
	width: 100%;
	max-width: 300px;
	padding: 12px;
	border: 1px solid var(--hp-neutral-100);
	border-radius: var(--hp-radius-phone);
	background: var(--hp-neutral-0);
	box-shadow: var(--hp-shadow-phone);
}

/* === portfolio operations art === */
.hp-evidence-board {
	position: relative;
	margin-block: var(--wp--preset--spacing--6);
	border: 1px solid var(--hp-neutral-100);
	border-radius: var(--hp-radius-card);
	overflow: hidden;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--hp-action) var(--hp-grid-action-tint), transparent) 1px, transparent 1px),
		linear-gradient(color-mix(in srgb, var(--hp-status-merged) var(--hp-grid-status-tint), transparent) 1px, transparent 1px),
		var(--hp-neutral-0);
	background-size: var(--hp-grid-pitch) var(--hp-grid-pitch);
	box-shadow: var(--hp-shadow-panel);
}

.hp-evidence-board::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--hp-neutral-0) 88%, transparent), color-mix(in srgb, var(--hp-neutral-0) 96%, transparent));
	pointer-events: none;
}

.hp-evidence-board > * {
	position: relative;
}

.hp-evidence-board__header {
	margin: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border-bottom: 1px solid var(--hp-neutral-100);
	background: color-mix(in srgb, var(--hp-neutral-0) 88%, var(--hp-neutral-50));
}

.hp-evidence-board__kicker,
.hp-evidence-row__label,
.hp-signal__label,
.hp-operational-story__kicker,
.hp-skill-group__legend {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: var(--hp-tracking-label);
	font-size: var(--wp--preset--font-size--2xs);
	line-height: 1.4;
	color: var(--hp-neutral-600);
}

.hp-evidence-board__title {
	margin: var(--hp-gap-sm) 0 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--hp-weight-title);
	line-height: 1.25;
	color: var(--hp-neutral-900);
}

.hp-evidence-board__summary {
	margin: var(--wp--preset--spacing--2) 0 0;
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
	color: var(--hp-neutral-600);
}

.hp-evidence-board__rows {
	margin: 0;
}

.hp-evidence-row {
	margin: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border-top: 1px solid var(--hp-neutral-100);
	border-left: var(--hp-rule-evidence) solid var(--hp-neutral-300);
	background: color-mix(in srgb, var(--hp-neutral-0) 88%, var(--hp-neutral-50));
}

.hp-evidence-row:first-child {
	border-top: 0;
}

.hp-evidence-row.is-status-merged {
	border-left-color: var(--hp-status-merged);
}

.hp-evidence-row.is-status-review {
	border-left-color: var(--hp-status-review);
}

.hp-evidence-row.is-status-pending {
	border-left-color: var(--hp-status-pending);
}

/* Carry the proof-bar chip's filled-vs-hollow status dot onto evidence rows so
   resolved (merged, filled) reads differently from unresolved (review /
   pending, hollow) by shape, not the left-rule color alone. */
.hp-evidence-row__label::before {
	content: "\25CF";
	margin-right: 0.5em;
	color: var(--hp-neutral-300);
}

.hp-evidence-row.is-status-merged .hp-evidence-row__label::before {
	color: var(--hp-status-merged);
}

.hp-evidence-row.is-status-review .hp-evidence-row__label::before {
	content: "\25CB";
	color: var(--hp-status-review);
}

.hp-evidence-row.is-status-pending .hp-evidence-row__label::before {
	content: "\25CB";
	color: var(--hp-status-pending);
}

.hp-evidence-row__title {
	margin: var(--hp-gap-xs) 0 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--hp-weight-title);
	line-height: 1.35;
	color: var(--hp-neutral-900);
}

.hp-evidence-row__title a {
	color: var(--hp-neutral-900);
	text-decoration: none;
	border-bottom: 1px solid var(--hp-action);
	border-bottom-color: color-mix(in srgb, var(--hp-action) 70%, transparent);
}

.hp-evidence-row__title a:hover {
	border-bottom-color: var(--hp-action);
}

.hp-evidence-row__meta {
	margin: var(--hp-gap-sm) 0 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--hp-neutral-600);
}

.hp-evidence-board--compact .hp-evidence-board__header,
.hp-evidence-board--compact .hp-evidence-row {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}

.hp-evidence-board--compact .hp-evidence-board__title {
	font-size: var(--wp--preset--font-size--base);
}

.hp-signal-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	margin-block: var(--wp--preset--spacing--5);
	border: 1px solid var(--hp-neutral-100);
	border-radius: var(--hp-radius-panel);
	overflow: hidden;
	background: var(--hp-neutral-0);
}

.hp-signal {
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-left: 1px solid var(--hp-neutral-100);
}

.hp-signal:first-child {
	border-left: 0;
}

.hp-signal__value {
	margin: 0 0 var(--hp-gap-xs);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--hp-weight-strong);
	line-height: 1.2;
	color: var(--hp-neutral-900);
}

.hp-signal__label {
	display: block;
}

.hp-proof-product.wp-block-columns {
	gap: var(--wp--preset--spacing--6);
	align-items: flex-start;
	margin-block: var(--wp--preset--spacing--6);
}

.hp-proof-product .wp-block-column {
	min-width: 0;
}

.hp-shot-stack {
	display: grid;
	gap: var(--wp--preset--spacing--4);
}

.hp-shot-note {
	margin-block: 0;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--hp-neutral-100);
	border-style: dashed;
	border-radius: var(--hp-radius-card);
	background: var(--hp-neutral-50);
}

.hp-shot-note p {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--hp-neutral-600);
}

.hp-operational-story {
	margin-block: var(--wp--preset--spacing--9);
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--hp-neutral-100);
	border-radius: var(--hp-radius-card);
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--hp-action) var(--hp-grid-action-tint), transparent) 1px, transparent 1px),
		linear-gradient(color-mix(in srgb, var(--hp-status-merged) var(--hp-grid-status-tint), transparent) 1px, transparent 1px),
		var(--hp-neutral-50);
	background-size: var(--hp-grid-pitch) var(--hp-grid-pitch);
}

.hp-operational-story__grid.wp-block-columns {
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	align-items: stretch;
}

.hp-operational-story__panel {
	margin: 0;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--hp-neutral-100);
	border-radius: var(--hp-radius-panel);
	background: color-mix(in srgb, var(--hp-neutral-0) 92%, var(--hp-neutral-50));
}

.hp-operational-story__title {
	margin: var(--hp-gap-sm) 0 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--hp-weight-title);
	line-height: 1.2;
	color: var(--hp-neutral-900);
}

.hp-operational-story__text {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
	color: var(--hp-neutral-600);
}

.hp-mini-diagram {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.35rem;
	align-items: end;
	min-height: 8rem;
	margin-top: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--hp-neutral-100);
}

.hp-mini-diagram span {
	display: block;
	min-height: 2rem;
	border-radius: var(--hp-radius-chip) var(--hp-radius-chip) 0 0;
	background: var(--hp-action);
	opacity: 0.76;
}

.hp-mini-diagram span:nth-child(1) { height: 40%; }
.hp-mini-diagram span:nth-child(2) { height: 72%; background: var(--hp-status-merged); }
.hp-mini-diagram span:nth-child(3) { height: 56%; }
.hp-mini-diagram span:nth-child(4) { height: 88%; background: var(--hp-status-review); }
.hp-mini-diagram span:nth-child(5) { height: 64%; }

@media (max-width: 781px) {
	.hp-signal-strip {
		grid-template-columns: 1fr;
	}

	.hp-signal {
		border-left: 0;
		border-top: 1px solid var(--hp-neutral-100);
	}

	.hp-signal:first-child {
		border-top: 0;
	}

	.hp-operational-story {
		padding: var(--wp--preset--spacing--4);
	}
}

/* === Site header ===
   Two tiers, one system. Inner pages get a compact utility bar (wordmark +
   small Wapuu mark + nav). The home page promotes the same bar into the hero:
   the bar loses its own background/border and shares the hero's grid band, the
   small mark steps aside, and the full Wapuu in the hero carries the brand. So
   the mascot appears exactly once per page — big on home, a quiet chip
   elsewhere — instead of competing with itself. */
.hp-site-header {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid var(--hp-neutral-100);
	background: color-mix(in srgb, var(--hp-neutral-0) 94%, var(--hp-neutral-50));
}

.hp-site-header__inner {
	gap: var(--wp--preset--spacing--4);
}

.hp-site-brand {
	min-width: 0;
	align-items: center;
}

/* Compact brand mark: a crisp, pre-cropped transparent head of the signature
   Wapuu sat on a clean disc. No zoom-crop of the busy full figure and no baked
   white box — the source art's white field is gone, so the disc edge stays
   clean and the linework reads at avatar scale. */
.hp-site-brand__wapuu {
	display: block;
	width: 2.125rem;
	aspect-ratio: 1;
	flex: 0 0 auto;
	border-radius: var(--hp-radius-pill);
	background:
		var(--hp-wapuu-mark-url, url("assets/wapuu/wapuu-mark.png")) 50% 36% / 116% auto no-repeat,
		var(--hp-neutral-0);
	box-shadow: var(--hp-shadow-mark);
}

.hp-site-brand .wp-block-site-title {
	margin: 0;
	font-weight: var(--hp-weight-strong);
	line-height: 1.1;
	letter-spacing: 0;
}

.hp-site-brand .wp-block-site-title a {
	color: var(--hp-neutral-900);
	text-decoration: none;
}

.hp-site-brand .wp-block-site-title a:hover {
	border-bottom: 1px solid var(--hp-action);
}

.hp-site-nav {
	min-width: 0;
}

.hp-site-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.3;
}

.hp-site-header .wp-block-navigation a {
	text-decoration: none;
}

.hp-site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: color-mix(in srgb, var(--hp-neutral-0) 94%, transparent);
}

.hp-site-header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	color: var(--wp--preset--color--contrast, var(--wp--custom--text--body));
}

.hp-site-header .wp-block-navigation__responsive-container-open,
.hp-site-header .wp-block-navigation__responsive-container-close {
	min-inline-size: var(--hp-touch-min);
	min-block-size: var(--hp-touch-min);
	align-items: center;
	justify-content: center;
}

/* --- Home: promote the bar into the hero band ---
   Drop the bar's own surface and divider and lay down the SAME grid as the
   hero so the two read as one continuous header; retire the small mark since
   the full Wapuu is about to appear right below it. The grid's vertical lines
   share the viewport origin with the hero's, so the seam is invisible. */
body.home .hp-site-header {
	border-bottom: 0;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--hp-action) var(--hp-grid-action-tint), transparent) 1px, transparent 1px),
		linear-gradient(color-mix(in srgb, var(--hp-status-merged) var(--hp-grid-status-tint), transparent) 1px, transparent 1px),
		var(--hp-neutral-0);
	background-size: var(--hp-grid-pitch) var(--hp-grid-pitch);
}

body.home .hp-site-brand__wapuu {
	display: none;
}

.hp-wapuu-hero-wrap {
	/* abut the header so the grid band is continuous through the nav */
	margin-block: 0 var(--wp--preset--spacing--9);
	padding-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--9);
	border-bottom: 1px solid var(--hp-neutral-100);
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--hp-action) var(--hp-grid-action-tint), transparent) 1px, transparent 1px),
		linear-gradient(color-mix(in srgb, var(--hp-status-merged) var(--hp-grid-status-tint), transparent) 1px, transparent 1px),
		var(--hp-neutral-0);
	background-size: var(--hp-grid-pitch) var(--hp-grid-pitch);
}

.hp-wapuu-hero.wp-block-columns {
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	margin-block: 0;
}

.hp-wapuu-hero .wp-block-column {
	min-width: 0;
}

.hp-wapuu-hero__copy {
	max-width: 39rem;
}

.hp-wapuu-hero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--2xs);
	line-height: 1.4;
	letter-spacing: var(--hp-tracking-label);
	text-transform: uppercase;
	color: var(--hp-neutral-600);
}

.hp-wapuu-hero__title {
	max-width: 13ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: var(--hp-weight-strong);
	line-height: 1.08;
	letter-spacing: 0;
	color: var(--hp-neutral-900);
}

.hp-wapuu-hero__text {
	max-width: 58ch;
	margin: var(--wp--preset--spacing--4) 0 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	color: var(--hp-neutral-600);
}

.hp-wapuu-hero__signals {
	margin-top: var(--wp--preset--spacing--5);
}

.hp-wapuu-hero__art {
	display: flex;
	justify-content: flex-end;
}

.hp-wapuu-hero__figure {
	margin: 0;
	width: min(100%, 26rem);
}

.hp-wapuu-hero__figure img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(var(--hp-shadow-mascot));
}

@media (max-width: 781px) {
	.hp-site-header__inner {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--3);
	}

	.hp-site-brand__wapuu {
		width: 2rem;
	}

	.hp-site-nav {
		width: 100%;
	}

	.hp-site-header .wp-block-navigation {
		width: 100%;
	}

		.hp-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
			top: calc(var(--hp-touch-min) + var(--wp--preset--spacing--9) + var(--wp--preset--spacing--5));
			right: var(--wp--preset--spacing--3);
			bottom: auto;
			left: var(--wp--preset--spacing--3);
			box-sizing: border-box;
			width: auto;
			max-height: calc(100svh - var(--hp-touch-min) - var(--wp--preset--spacing--9) - var(--wp--preset--spacing--5) - var(--wp--preset--spacing--3));
			padding: var(--wp--preset--spacing--3);
			overflow: auto;
			border: 1px solid var(--hp-neutral-100);
			border-radius: var(--hp-radius-frame);
			background-image:
				linear-gradient(180deg, color-mix(in srgb, var(--hp-neutral-0) 96%, transparent), color-mix(in srgb, var(--hp-neutral-50) 92%, transparent)),
				linear-gradient(90deg, color-mix(in srgb, var(--hp-action) 4%, transparent) 1px, transparent 1px),
				linear-gradient(color-mix(in srgb, var(--hp-status-merged) 3%, transparent) 1px, transparent 1px);
			background-size: auto, var(--hp-grid-pitch) var(--hp-grid-pitch), var(--hp-grid-pitch) var(--hp-grid-pitch);
			box-shadow:
				0 1px 2px color-mix(in srgb, var(--hp-neutral-900) 8%, transparent),
				0 18px 46px -22px color-mix(in srgb, var(--hp-neutral-900) 38%, transparent),
				0 0 0 100vmax color-mix(in srgb, var(--hp-neutral-900) 9%, transparent);
			backdrop-filter: blur(2px);
		}

		.hp-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
			padding-top: calc(var(--hp-touch-min) + var(--wp--preset--spacing--3));
		}

		.hp-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container,
		.hp-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-page-list {
			width: 100%;
			gap: 0;
			align-items: stretch;
		}

		.hp-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item {
			width: 100%;
		}

		.hp-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			min-height: var(--hp-touch-min);
			padding: 0 var(--wp--preset--spacing--3);
			border-bottom: 1px solid color-mix(in srgb, var(--hp-neutral-100) 72%, transparent);
			font-weight: var(--hp-weight-strong);
			line-height: 1.35;
		}

		.hp-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__submenu-container {
			margin: 0;
			padding: 0 0 0 var(--wp--preset--spacing--3);
			border-left: 1px solid var(--hp-neutral-100);
		}

		.hp-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
			color: var(--hp-neutral-600);
			font-weight: var(--hp-weight-title);
		}

		.hp-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
			top: var(--wp--preset--spacing--3);
		right: var(--wp--preset--spacing--3);
	}

	.hp-wapuu-hero-wrap {
		padding-block: var(--wp--preset--spacing--5);
	}

	.hp-wapuu-hero.wp-block-columns {
		display: grid !important;
		gap: var(--wp--preset--spacing--5);
		grid-template-columns: minmax(0, 1fr);
	}

	.hp-wapuu-hero .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}

	.hp-wapuu-hero__copy,
	.hp-wapuu-hero__text {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.hp-wapuu-hero__signals {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
	}

	.hp-wapuu-hero__signals .hp-chip {
		box-sizing: border-box;
		width: 100%;
	}

	/* The full Wapuu becomes a centered accent BELOW the copy, capped small so it
	   never dominates the fold or bleeds past the column the way the old
	   white-boxed image did. */
	.hp-wapuu-hero__art {
		justify-content: center;
	}

	.hp-wapuu-hero__figure {
		width: auto;
		max-width: 100%;
		margin-inline: auto;
	}

	.hp-wapuu-hero__figure img {
		width: auto;
		max-width: 100%;
		max-height: 12rem;
	}
}

@media (min-width: 600px) and (max-width: 781px) {
	.hp-site-header .hp-site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.hp-site-header .hp-site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* === case-study cross-link (hub & spoke) === */
/* The spoke line under a case-study h1 that points back to the hub and across
   to its sibling page. Mono/xs come from the block; this rule owns the link
   affordance and the space below it, matching the site's other inline links. */
.hp-spoke-nav {
	margin: 0 0 var(--wp--preset--spacing--5);
	color: var(--hp-neutral-600);
}

.hp-spoke-nav a {
	color: var(--hp-action);
	text-decoration: none;
	border-bottom: 1px solid var(--hp-neutral-300);
	border-bottom-color: color-mix(in srgb, var(--hp-action) 35%, transparent);
}

.hp-spoke-nav a:hover { border-bottom-color: var(--hp-action); }

/* === footer (Imladris twilight plate) === */
.hp-footer { position: relative; overflow: hidden; background: var(--wp--custom--surface--inverse); color: var(--wp--preset--color--parchment-100); border-top: 1px solid var(--hp-gold); }
.hp-footer__backdrop { position: absolute; inset: 0; pointer-events: none; background: var(--hp-footer-backdrop-url) center / cover no-repeat; opacity: 0.22; }
.hp-footer__backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,24,0.72), rgba(20,28,24,0.92)); }
.hp-footer__inner { position: relative; }
.hp-footer__top { align-items: center; }
.hp-footer__identity { display: flex; align-items: center; gap: var(--wp--preset--spacing--3); }
.hp-footer__star { width: 22px; height: 22px; flex: 0 0 auto; color: var(--wp--preset--color--gold-400); }
.hp-footer__name { margin: 0; font-family: var(--hp-font-display); font-size: var(--wp--preset--font-size--2xl); font-weight: var(--wp--custom--weight--semibold); letter-spacing: 0; color: var(--wp--preset--color--parchment-50); }
.hp-footer__meta { margin: var(--wp--preset--spacing--3) 0 0; font-family: var(--hp-font-label); font-size: var(--wp--preset--font-size--xs); letter-spacing: var(--wp--custom--tracking--wide); text-transform: uppercase; color: var(--wp--preset--color--parchment-300); }
.hp-footer__meta span { color: var(--wp--preset--color--gold-400); }
.hp-footer__social { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); margin: 0; padding: 0; list-style: none; }
.hp-footer__social a { display: inline-flex; align-items: center; gap: 0.55em; padding: 9px 16px; border-radius: var(--hp-radius-pill); border: 1px solid color-mix(in srgb, var(--wp--preset--color--parchment-50) 18%, transparent); color: var(--wp--preset--color--parchment-100); font-family: var(--hp-font-label); font-size: var(--wp--preset--font-size--sm); text-decoration: none; transition: border-color 140ms var(--wp--custom--ease--out), color 140ms var(--wp--custom--ease--out); }
.hp-footer__social a:hover { border-color: var(--wp--preset--color--gold-400); color: var(--wp--preset--color--gold-400); }
.hp-footer__social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-footer__social a[href*="github.com"] svg { fill: none; }
.hp-footer__nav { margin: var(--wp--preset--spacing--4) 0 0; font-family: var(--hp-font-mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--parchment-300); }
.hp-footer__nav a { color: var(--wp--preset--color--parchment-100); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--hp-gold) 45%, transparent); }
.hp-footer__nav a:hover { border-bottom-color: var(--hp-gold); color: var(--wp--preset--color--gold-400); }
.hp-footer__colophon { margin: var(--wp--preset--spacing--6) 0 0; padding-top: var(--wp--preset--spacing--5); border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--parchment-50) 14%, transparent); font-family: var(--hp-font-mono); font-size: var(--wp--preset--font-size--2xs); color: var(--wp--preset--color--parchment-300); }

/* === design-tokens reference page === */
.hp-token-swatches {
	gap: var(--wp--preset--spacing--3);
	margin-block: var(--wp--preset--spacing--5);
}

/* Uniform tiles with a hairline edge, so the near-white tokens (base, surface,
   hairline) stay visible on the page background instead of disappearing. */
.hp-swatch {
	display: flex;
	flex: 1 1 8.5rem;
	min-width: 8.5rem;
	min-height: 4.5rem;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--3);
	border: 1px solid var(--hp-neutral-100);
	border-radius: var(--hp-radius-tile);
}

.hp-swatch p {
	margin: 0;
}

/* The type scale as a spec sheet: one sample per row, divided by hairlines. */
.hp-type-samples {
	margin-block: var(--wp--preset--spacing--5);
	border: 1px solid var(--hp-neutral-100);
	border-radius: var(--hp-radius-tile);
	overflow: hidden;
}

.hp-type-samples p {
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-top: 1px solid var(--hp-neutral-100);
}

.hp-type-samples p:first-child {
	border-top: 0;
}

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* === mobile overlay: close-on-tap collapse ===
   nav-close-delight.js adds .is-hp-closing to the open overlay container and
   .is-hp-chosen to the tapped link while the overlay carries .is-menu-open.
   The panel lifts toward the hamburger and fades; navigation remains owned by
   the Interactivity Router or browser. The JS closes through core's close
   control on a short schedule so the closed state survives the router swap.
   Reduced motion skips the cosmetic classes and closes immediately; the global
   prefers-reduced-motion block above keeps the stylesheet side neutral. */
@keyframes hp-menu-collapse {
	to {
		opacity: 0;
		transform: translateY(-6px) scale(0.97);
	}
}

@keyframes hp-tap-echo {
	from { background-color: color-mix(in srgb, var(--hp-action) 12%, transparent); }
	to   { background-color: transparent; }
}

/* (0,4,0): overrides core's fade-in animation (0,2,0); the theme's open rule
   at the .is-menu-open positioning block sets no `animation`, and this rule is
   appended after it. */
.hp-site-header .wp-block-navigation__responsive-container.is-menu-open.is-hp-closing {
	animation: hp-menu-collapse 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
	transform-origin: 0 0;
	pointer-events: none;
}

.hp-site-header .wp-block-navigation__responsive-container.is-menu-open.is-hp-closing .is-hp-chosen {
	animation: hp-tap-echo 140ms ease-out both;
	box-shadow: inset 0 -2px 0 0 var(--hp-action);
}

/* =====================================================================
   IMLADRIS RE-SKIN LAYER
   The block above re-points the --hp-* tokens onto the Imladris theme.json
   scales; this layer applies the Imladris look on top: serif display,
   Marcellus eyebrows, mallorn-gold rules, river artifact links, the gold
   focus ring, and the button vocabulary. Status still reads by rule-colour
   AND a redundant word (the filled/hollow dot conventions above are kept).
   ===================================================================== */
:root {
	--hp-artifact:     var(--wp--custom--artifact-link);   /* river — openable proof refs */
	--hp-gold:         var(--wp--custom--rule--gold);      /* mallorn accent */
	--hp-font-display: var(--wp--preset--font-family--display);
	--hp-font-label:   var(--wp--preset--font-family--label);
	--hp-font-body:    var(--wp--preset--font-family--body);
	--hp-font-mono:    var(--wp--preset--font-family--mono);
}

/* Headlines balance; prose wraps pretty. */
h1, h2, h3, .hp-wapuu-hero__title { text-wrap: balance; }
.wp-block-post-content p, .entry-content p { text-wrap: pretty; }

/* Brand eyebrow -> Marcellus lapidary caps (register/status labels stay mono). */
.hp-wapuu-hero__eyebrow,
.hp-eyebrow {
	font-family: var(--hp-font-label);
	letter-spacing: var(--wp--custom--tracking--caps);
	color: var(--wp--custom--text--muted);
}

/* Hero title sings in Cormorant. */
.hp-wapuu-hero__title {
	font-family: var(--hp-font-display);
	font-weight: var(--wp--custom--weight--medium);
	letter-spacing: -0.01em;
}

/* Card / ledger titles keep the grounded reading serif (inherited EB Garamond);
   a hair of negative tracking for the parchment register. */
.hp-work__title, .hp-evidence-row__title, .hp-evidence-board__title,
.hp-operational-story__title { letter-spacing: -0.005em; }

/* Openable references read in Bruinen river-blue, distinct from evergreen nav. */
.hp-proof-bar .hp-chip a,
.hp-artifact__link a,
.hp-shot .wp-element-caption a,
.hp-shot .wp-block-image__caption a {
	color: var(--hp-artifact);
	border-bottom-color: color-mix(in srgb, var(--hp-artifact) 35%, transparent);
}
.hp-proof-bar .hp-chip a:hover,
.hp-artifact__link a:hover,
.hp-shot .wp-element-caption a:hover,
.hp-shot .wp-block-image__caption a:hover {
	border-bottom-color: var(--hp-artifact);
}

/* PullQuote / quote: gold left rule, italic — capped at body scale so
   testimony never outranks the work. */
.hp-quote.wp-block-quote,
.wp-block-quote.is-style-imladris { border-left-color: var(--hp-gold); }
.hp-quote.wp-block-quote p,
.wp-block-quote.is-style-imladris p { font-style: italic; }

/* Content links: translucent-gold underline warming to gold. */
.wp-block-post-content a, .entry-content a, .hp-prose a {
	text-decoration-color: color-mix(in srgb, var(--hp-gold) 55%, transparent);
	text-underline-offset: 0.14em;
}
.wp-block-post-content a:hover, .entry-content a:hover, .hp-prose a:hover {
	text-decoration-color: var(--hp-gold);
}

/* Gold focus ring (3px translucent gold, 2px offset) — re-added after the
   theme.json swap dropped the previous styles.css focus rule. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--hp-gold) 70%, transparent);
	outline-offset: 2px;
}

/* Inline code / data. */
code, kbd, samp {
	font-family: var(--hp-font-mono);
	font-size: 0.92em;
	background: var(--wp--custom--surface--sunken);
	padding: 0.1em 0.35em;
	border-radius: var(--hp-radius-chip);
}

/* === Buttons — the Imladris control vocabulary ===
   Marcellus label, evergreen primary, gold accent. Variants are core block
   styles registered in functions.php (secondary / ghost / accent / link). */
.wp-block-button__link {
	font-family: var(--hp-font-label);
	font-weight: var(--wp--custom--weight--regular);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--hp-radius-card);
	padding: 0.72em 1.5em;
	background-color: var(--wp--custom--brand--default);
	color: var(--wp--custom--text--inverse);
	box-shadow: var(--wp--custom--shadow--xs);
	transition: background-color 140ms var(--wp--custom--ease--calm), transform 140ms var(--wp--custom--ease--calm);
}
.wp-block-button__link:hover { background-color: var(--wp--custom--brand--hover); }
.wp-block-button__link:active { transform: translateY(0.5px) scale(0.99); }

.wp-block-button.is-style-secondary > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--custom--text--link);
	box-shadow: inset 0 0 0 1px var(--wp--custom--border--brand);
}
.wp-block-button.is-style-secondary > .wp-block-button__link:hover { background-color: var(--wp--custom--brand--subtle); }
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--custom--text--link);
	box-shadow: none;
}
.wp-block-button.is-style-ghost > .wp-block-button__link:hover { background-color: var(--wp--custom--brand--subtle); }
.wp-block-button.is-style-accent > .wp-block-button__link {
	background-color: var(--wp--custom--accent--default);
	color: var(--wp--custom--text--strong);
}
.wp-block-button.is-style-accent > .wp-block-button__link:hover { background-color: var(--wp--custom--accent--hover); }
.wp-block-button.is-style-link > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--custom--text--link);
	box-shadow: none;
	padding-inline: 0;
	border-radius: 0;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--hp-font-body);
}

/* === Imladris primitive patterns === */
.hp-button-set,
.hp-icon-button-set,
.hp-tag-row,
.hp-badge-row,
.hp-avatar-row {
	gap: var(--wp--preset--spacing--3);
	align-items: center;
}

.hp-icon-button-set,
.hp-tag-row,
.hp-badge-row,
.hp-avatar-row {
	display: flex;
	flex-wrap: wrap;
}

.hp-icon-button {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--hp-radius-card);
	background: transparent;
	color: var(--wp--custom--text--link);
	box-shadow: none;
	cursor: pointer;
}

.hp-icon-button svg,
.hp-callout__icon svg,
.hp-input__control svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hp-icon-button.is-style-outline {
	box-shadow: inset 0 0 0 1px var(--wp--custom--border--brand);
}

.hp-icon-button.is-style-solid {
	background: var(--wp--custom--brand--default);
	color: var(--wp--custom--text--inverse);
	box-shadow: var(--wp--custom--shadow--xs);
}

.hp-icon-button:hover {
	background: var(--wp--custom--brand--subtle);
}

.hp-icon-button.is-style-solid:hover {
	background: var(--wp--custom--brand--hover);
}

.hp-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 4px 12px;
	border: 1px solid var(--wp--custom--border--soft);
	border-radius: var(--hp-radius-pill);
	color: var(--wp--custom--text--link);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.hp-tag span {
	color: var(--wp--custom--text--accent);
}

.hp-tag:hover {
	background: var(--wp--custom--brand--subtle);
	border-color: var(--wp--preset--color--green-200);
}

.hp-tag.is-active {
	background: var(--wp--custom--brand--default);
	border-color: var(--wp--custom--brand--default);
	color: var(--wp--custom--text--inverse);
}

.hp-tag.is-active span {
	color: var(--wp--preset--color--gold-200);
}

.hp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 2px 10px;
	border: 1px solid var(--wp--custom--border--hair);
	border-radius: var(--hp-radius-pill);
	background: var(--wp--custom--surface--sunken);
	color: var(--wp--custom--text--muted);
	font-family: var(--hp-font-label);
	font-size: var(--wp--preset--font-size--2xs);
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-transform: uppercase;
	white-space: nowrap;
}

.hp-badge::before {
	content: "";
	display: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.hp-badge.has-dot::before { display: inline-block; }
.hp-badge.is-tone-brand { background: var(--wp--custom--brand--subtle); border-color: var(--wp--preset--color--green-200); color: var(--wp--preset--color--green-800); }
.hp-badge.is-tone-accent { background: var(--wp--custom--accent--subtle); border-color: var(--wp--preset--color--gold-200); color: var(--wp--preset--color--gold-700); }
.hp-badge.is-tone-success { background: var(--wp--preset--color--green-050); border-color: var(--wp--preset--color--green-200); color: var(--wp--custom--feedback--success); }
.hp-badge.is-tone-warning { background: var(--wp--preset--color--gold-100); border-color: var(--wp--preset--color--gold-200); color: var(--wp--custom--feedback--warning); }
.hp-badge.is-tone-danger { background: color-mix(in srgb, var(--wp--custom--feedback--danger) 12%, var(--wp--preset--color--parchment-50)); border-color: color-mix(in srgb, var(--wp--custom--feedback--danger) 30%, transparent); color: var(--wp--custom--feedback--danger); }

.hp-avatar {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--custom--brand--subtle);
	color: var(--wp--preset--color--green-800);
	box-shadow: var(--wp--custom--shadow--xs);
}

.hp-avatar.is-ring {
	box-shadow: var(--wp--custom--shadow--xs), var(--wp--custom--shadow--gilt);
}

.hp-avatar.is-small {
	width: 32px;
	height: 32px;
}

.hp-avatar__initials {
	font-family: var(--hp-font-label);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hp-callout {
	display: flex;
	gap: var(--wp--preset--spacing--4);
	margin-block: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--5);
	border-left: 3px solid var(--wp--custom--rule--gold);
	border-radius: var(--hp-radius-card);
	background: var(--wp--preset--color--gold-100);
}

.hp-callout__icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--wp--preset--color--gold-700);
}

.hp-callout__body > * {
	margin: 0;
}

.hp-callout__body > * + * {
	margin-top: var(--wp--preset--spacing--2);
}

.hp-callout__title {
	font-family: var(--hp-font-label);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-700);
}

.hp-callout.is-tone-insight { background: var(--wp--preset--color--green-050); border-left-color: var(--wp--preset--color--green-600); }
.hp-callout.is-tone-insight .hp-callout__icon,
.hp-callout.is-tone-insight .hp-callout__title { color: var(--wp--preset--color--green-800); }
.hp-callout.is-tone-caution { background: var(--wp--preset--color--gold-100); border-left-color: var(--wp--preset--color--amber); }
.hp-callout.is-tone-caution .hp-callout__icon,
.hp-callout.is-tone-caution .hp-callout__title { color: var(--wp--preset--color--amber); }
.hp-callout.is-tone-risk { background: color-mix(in srgb, var(--wp--preset--color--rust) 8%, var(--wp--preset--color--parchment-50)); border-left-color: var(--wp--preset--color--rust); }
.hp-callout.is-tone-risk .hp-callout__icon,
.hp-callout.is-tone-risk .hp-callout__title { color: var(--wp--preset--color--rust); }

.hp-input-stack {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	max-width: var(--wp--custom--measure--narrow);
}

.hp-input {
	display: grid;
	gap: var(--wp--preset--spacing--2);
}

.hp-input__label {
	font-family: var(--hp-font-label);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--custom--text--muted);
}

.hp-input__control {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: 0 var(--wp--preset--spacing--3);
	border: 1.5px solid var(--wp--custom--border--strong);
	border-radius: var(--hp-radius-card);
	background: var(--wp--custom--surface--card);
	box-shadow: var(--wp--custom--shadow--inset);
	color: var(--wp--custom--text--faint);
}

.hp-input__control input {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--wp--custom--text--strong);
	font: var(--wp--custom--type--ui);
}

.hp-input__control:focus-within {
	border-color: var(--wp--custom--accent--default);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-gold) 35%, transparent);
}

.hp-input.has-error .hp-input__control {
	border-color: var(--wp--custom--feedback--danger);
}

.hp-input__helper {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--text--faint);
}

.hp-input.has-error .hp-input__helper {
	color: var(--wp--custom--feedback--danger);
}

.hp-subscribe {
	padding: var(--wp--preset--spacing--7);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--custom--surface--inverse);
	color: var(--wp--custom--text--inverse);
	box-shadow: var(--wp--custom--shadow--gilt);
}

.hp-subscribe__kicker {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--hp-font-label);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-400);
}

.hp-subscribe__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--parchment-50);
	font-family: var(--hp-font-display);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: var(--wp--custom--weight--medium);
	line-height: var(--wp--custom--leading--snug);
}

.hp-subscribe__blurb {
	max-width: 46ch;
	margin: 0 0 var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--green-200);
}

.hp-subscribe__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.hp-subscribe__form input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 11px 14px;
	border: 1.5px solid var(--wp--preset--color--twilight-700);
	border-radius: var(--hp-radius-card);
	background: var(--wp--preset--color--twilight-900);
	color: var(--wp--preset--color--parchment-50);
	font: var(--wp--custom--type--ui);
}

.hp-subscribe__form button {
	padding: 0.72em 1.5em;
	border: 0;
	border-radius: var(--hp-radius-card);
	background: var(--wp--custom--accent--default);
	color: var(--wp--custom--text--strong);
	font-family: var(--hp-font-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.hp-subscribe__form button:hover {
	background: var(--wp--custom--accent--hover);
}

.hp-ring-framework {
	margin-block: var(--wp--preset--spacing--7);
}

.hp-ring-grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	align-items: stretch;
}

.hp-ring-grid.wp-block-columns > .wp-block-column {
	margin: 0;
	min-width: 0;
	flex-basis: auto;
}

@media (max-width: 920px) {
	.hp-ring-grid.wp-block-columns {
		grid-template-columns: 1fr;
	}
}

.hp-ring-card {
	--hp-ring-tint: var(--wp--preset--color--river-400);
	--hp-ring-base: var(--wp--preset--color--twilight-900);
	--hp-ring-scrim: #141c24;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background: var(--wp--custom--surface--inverse);
	color: var(--wp--preset--color--parchment-50);
	box-shadow: var(--wp--custom--shadow--md), var(--wp--custom--shadow--gilt);
}

.hp-ring-card.is-fire {
	--hp-ring-tint: var(--wp--preset--color--gold-400);
	--hp-ring-base: var(--wp--preset--color--rust);
	--hp-ring-scrim: #1e1512;
}

.hp-ring-card.is-water {
	--hp-ring-tint: var(--wp--preset--color--green-200);
	--hp-ring-base: var(--wp--preset--color--green-700);
	--hp-ring-scrim: #16261d;
}

.hp-ring-card__plate {
	position: relative;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--5);
	background:
		radial-gradient(130% 130% at 70% -10%, color-mix(in srgb, var(--hp-ring-tint) 44%, var(--hp-ring-base)), var(--hp-ring-base));
	overflow: hidden;
}

.hp-ring-card__figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

.hp-ring-card__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
}

.hp-ring-card__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--hp-ring-scrim) 82%, transparent) 0%,
			color-mix(in srgb, var(--hp-ring-scrim) 12%, transparent) 30%,
			color-mix(in srgb, var(--hp-ring-scrim) 14%, transparent) 52%,
			color-mix(in srgb, var(--hp-ring-scrim) 88%, transparent) 88%,
			color-mix(in srgb, var(--hp-ring-scrim) 96%, transparent) 100%);
}

.hp-ring-card__header,
.hp-ring-card__virtues,
.hp-ring-card__body {
	position: relative;
}

.hp-ring-card__header {
	gap: var(--wp--preset--spacing--3);
	margin: 0;
}

.hp-ring-card__badge {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--parchment-50) 18%, transparent);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--sm), var(--wp--custom--shadow--gilt);
}

.hp-ring-card__badge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-ring-card__ring,
.hp-ring-card__element,
.hp-ring-card__virtues,
.hp-ring-card__description {
	margin: 0;
}

.hp-ring-card__ring {
	font-family: var(--hp-font-display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--wp--custom--weight--semibold);
	line-height: 1.15;
	color: var(--wp--preset--color--parchment-50);
	text-shadow: 0 1px 8px color-mix(in srgb, var(--hp-ring-scrim) 82%, transparent);
}

.hp-ring-card__element,
.hp-ring-card__virtues {
	font-family: var(--hp-font-label);
	font-size: var(--wp--preset--font-size--2xs);
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: var(--hp-ring-tint);
	text-shadow: 0 1px 8px color-mix(in srgb, var(--hp-ring-scrim) 86%, transparent);
}

.hp-ring-card__virtues {
	color: var(--wp--preset--color--parchment-100);
}

.hp-ring-card__virtues span {
	color: var(--hp-ring-tint);
}

.hp-ring-card__body {
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
}

.hp-ring-card__action {
	margin: 0;
	color: var(--hp-ring-tint);
	font-family: var(--hp-font-display);
	font-size: var(--wp--preset--font-size--3xl);
	font-weight: var(--wp--custom--weight--medium);
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: uppercase;
}

.hp-ring-card__description {
	margin-top: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--green-200);
	line-height: var(--wp--custom--leading--relaxed);
}

/* === Imladris page templates === */
.hp-front-template,
.hp-about-template,
.hp-case-study-template {
	background: var(--wp--custom--surface--page);
	color: var(--wp--custom--text--body);
}

.hp-front-template > .wp-block-post-content {
	margin-top: 0;
}

.hp-template-hero {
	padding-block: var(--wp--preset--spacing--8);
}

.hp-template-hero__kicker,
.hp-template-hero__lead {
	margin: 0;
}

.hp-template-hero__kicker {
	font-family: var(--hp-font-label);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: var(--wp--custom--text--accent);
}

.hp-template-hero__title {
	margin: var(--wp--preset--spacing--3) 0 0;
	color: var(--wp--custom--text--strong);
	font-family: var(--hp-font-display);
	font-size: var(--wp--preset--font-size--3xl);
	font-weight: var(--wp--custom--weight--medium);
	letter-spacing: var(--wp--custom--tracking--tight);
	line-height: var(--wp--custom--leading--snug);
}

.hp-template-hero__lead {
	max-width: var(--wp--custom--measure--narrow);
	margin-top: var(--wp--preset--spacing--4);
	color: var(--wp--custom--text--muted);
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--leading--relaxed);
}

.hp-front-template__rings {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 72rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--5);
	border-top: 1px solid var(--wp--custom--border--hair);
}

.hp-front-template__rings .hp-ring-framework {
	margin-top: var(--wp--preset--spacing--6);
}

.hp-about-template__content {
	padding-block: var(--wp--preset--spacing--7);
}

/* About — break the register/grid sections out of the 44rem reading column to the
   wide measure on desktop (the impact strip, capability register, and work ledger
   read as dashboards, not prose). Narrative, lead, headings, and quotes stay at the
   reading width. Scoped to .hp-about-template so the same classes used in the hero
   and operational-story are untouched. The section is pulled symmetrically around
   the column's centre, so it stays centred in the viewport; min() clamps it to the
   viewport (minus gutters) on smaller screens. */
@media (min-width: 56rem) {
	.hp-about-template :is(.hp-signal-strip, .hp-skills, .hp-work) {
		--hp-about-wide: min(var(--wp--custom--container--wide, 72rem), 100vw - 2 * var(--wp--preset--spacing--6, 2rem));
		width: var(--hp-about-wide);
		max-width: none;
		margin-inline: calc(50% - var(--hp-about-wide) / 2) !important;
		box-sizing: border-box;
	}

	/* Use the new width: flow the capability groups into a responsive grid
	   instead of a single stacked column. */
	.hp-about-template .hp-skills {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
		gap: var(--wp--preset--spacing--5);
		align-items: start;
	}

	.hp-about-template .hp-skill-group + .hp-skill-group {
		margin-top: 0; /* the grid gap owns the spacing now */
	}
}

.hp-case-study-template__article {
	padding-block: var(--wp--preset--spacing--8);
}

.hp-case-study-template__hero {
	margin-bottom: var(--wp--preset--spacing--7);
	padding-bottom: var(--wp--preset--spacing--7);
	border-bottom: 1px solid var(--wp--custom--border--hair);
}

.hp-case-study-template__hero .hp-proof-bar {
	margin-top: var(--wp--preset--spacing--5);
}

/* === Imladris About — full-composition rebuild (hero, capabilities, skills+education, projects) === */
/* =====================================================================
   ABOUT TEMPLATE — composition layer (NEW)
   Scoped under .hp-about-template so it only affects the About page and
   never leaks onto the shared hp-* primitives used elsewhere. Append to
   the end of the theme's style.css. All values resolve to existing
   theme.json tokens (no raw hex). Reuses the established anatomy:
   parchment cards, mallorn-gold rules, Cormorant display, Marcellus
   labels, mono register text.

   Sections styled here that the base theme has no class for:
     · hero band (copy + gilt circular portrait, role-tag pills, CTAs)
     · the 5-cell impact strip widening (reuses .hp-signal-strip)
     · "What I do" 3-up capability cards (gold top-rule)
     · Skills + Education 2-column split (+ neutralising the base
       wide-pull/grid rules that target .hp-skills)
     · Education cards
     · Selected-projects 3-up cards
   ===================================================================== */

/* ---- HERO ------------------------------------------------------------ */
.hp-about-template .hp-about-hero {
	margin-top: var(--wp--preset--spacing--7);
	margin-bottom: var(--wp--preset--spacing--7);
}

.hp-about-template .hp-about-hero__top {
	gap: var(--wp--preset--spacing--8);
}

.hp-about-template .hp-about-hero__copy {
	flex: 1 1 28rem;
	min-width: min(100%, 18rem);
}

.hp-about-template .hp-about-hero__kicker {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
}

/* Serif positioning headline — the page's single h1. Cormorant display,
   medium weight, tight tracking, balanced wrap (h1 balance already set in
   base, repeated scale/family here for the larger hero reading). */
.hp-about-template .hp-about-hero__title {
	margin: var(--wp--preset--spacing--4) 0 0;
	max-width: 22ch;
	font-family: var(--hp-font-display);
	font-size: var(--wp--preset--font-size--4xl);
	font-weight: var(--wp--custom--weight--medium);
	letter-spacing: var(--wp--custom--tracking--tight);
	line-height: var(--wp--custom--leading--snug);
	color: var(--wp--custom--text--strong);
}

.hp-about-template .hp-about-hero__lead {
	margin: var(--wp--preset--spacing--5) 0 0;
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--lg);
	line-height: var(--wp--custom--leading--relaxed);
	color: var(--wp--custom--text--strong);
}

/* Role-tag pills — outlined parchment chips in the Marcellus label voice.
   Distinct from .hp-tag (taxonomy) and .hp-chip (status); these are plain
   role labels, no link, no status. */
.hp-about-template .hp-role-tags {
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--5);
}

.hp-about-template .hp-role-tag {
	margin: 0;
	padding: 5px 14px;
	border: 1px solid var(--wp--custom--border--soft);
	border-radius: var(--hp-radius-pill);
	background: var(--wp--custom--surface--card);
	color: var(--wp--custom--text--link);
	font-family: var(--hp-font-label);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: var(--wp--custom--tracking--wide);
	line-height: 1.5;
}

.hp-about-template .hp-about-hero__cta {
	margin-top: var(--wp--preset--spacing--6);
}

/* Gilt circular portrait. The frame is the inset gold ring token plus a
   soft drop shadow; the image itself carries a gold border and is forced
   to a circle. Larger than the old 150px thumbnail. */
.hp-about-template .hp-about-hero__portrait {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
}

.hp-about-template .hp-about-avatar {
	margin: 0;
	width: 188px;
	max-width: 188px;
	border-radius: 50%;
	box-shadow: var(--wp--custom--shadow--md), var(--wp--custom--shadow--gilt);
}

.hp-about-template .hp-about-avatar img {
	display: block;
	width: 188px;
	height: 188px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--wp--preset--color--gold-400);
}

/* Impact strip: it already widens via the base
   .hp-about-template :is(.hp-signal-strip, …) rule and lays out as an
   auto-fit grid. Only add the top breathing room beneath the hero band. */
.hp-about-template .hp-about-impact {
	margin-top: var(--wp--preset--spacing--7);
}

/* ---- CAPABILITIES (3-up cards) -------------------------------------- */
.hp-about-template .hp-about-capabilities {
	margin-top: var(--wp--preset--spacing--8);
}

.hp-about-template .hp-about-capabilities .hp-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
}

.hp-about-template .hp-about-capabilities > h2 {
	margin: var(--wp--preset--spacing--3) 0 var(--wp--preset--spacing--6);
}

/* Turn the WP columns block into a responsive card grid (mirrors how the
   theme treats .hp-ring-grid) so 3 cards reflow to 1 on narrow screens
   instead of squeezing. */
.hp-about-template .hp-capability-grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--5);
	margin-block: 0;
	align-items: stretch;
}

.hp-about-template .hp-capability-grid.wp-block-columns > .wp-block-column {
	margin: 0;
	min-width: 0;
	flex-basis: auto;
}

.hp-about-template .hp-capability {
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--custom--border--hair);
	border-top: 3px solid var(--wp--custom--rule--gold);
	border-radius: var(--hp-radius-card);
	background: var(--wp--custom--surface--card);
	box-shadow: var(--wp--custom--shadow--sm);
}

.hp-about-template .hp-capability__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--hp-weight-title);
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--wp--custom--text--strong);
}

.hp-about-template .hp-capability__text {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--relaxed);
	color: var(--wp--custom--text--muted);
}

.hp-about-template .hp-capability__text:last-child {
	margin-bottom: 0;
}

/* ---- SKILLS + EDUCATION (2-column) ---------------------------------- */
/* The base theme widens AND grid-flows any .hp-skills inside
   .hp-about-template (style.css lines ~1877 & ~1887). Inside this 2-col
   split that would yank the left column to viewport width and re-grid the
   skill groups. Re-assert normal flow at higher specificity so .hp-skills
   behaves as an ordinary stacked block within its column. */
.hp-about-template .hp-about-skills-edu.wp-block-columns {
	gap: var(--wp--preset--spacing--8);
	margin-top: var(--wp--preset--spacing--8);
	align-items: start;
}

.hp-about-template .hp-about-skills-edu__col {
	min-width: 0;
}

.hp-about-template .hp-about-skills-edu__col > h2 {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--5);
}

.hp-about-template .hp-about-skills-edu .hp-skills {
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
}

.hp-about-template .hp-about-skills-edu .hp-skill-group + .hp-skill-group {
	margin-top: var(--wp--preset--spacing--4);
}

/* Education cards — parchment tiles in the same register as the work
   ledger rows, minus the status rule. */
.hp-about-template .hp-edu-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.hp-about-template .hp-edu-card {
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--custom--border--hair);
	border-radius: var(--hp-radius-card);
	background: var(--wp--custom--surface--card);
	box-shadow: var(--wp--custom--shadow--xs);
}

.hp-about-template .hp-edu-card__degree {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--hp-weight-title);
	line-height: 1.3;
	color: var(--wp--custom--text--strong);
}

.hp-about-template .hp-edu-card__meta {
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--hp-gap-xs);
}

.hp-about-template .hp-edu-card__school,
.hp-about-template .hp-edu-card__period {
	margin: 0;
	font-family: var(--hp-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--text--faint);
}

/* ---- SELECTED PROJECTS (3-up cards) --------------------------------- */
.hp-about-template .hp-about-projects {
	margin-top: var(--wp--preset--spacing--8);
	margin-bottom: var(--wp--preset--spacing--8);
}

.hp-about-template .hp-about-projects .hp-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
}

.hp-about-template .hp-about-projects > h2 {
	margin: var(--wp--preset--spacing--3) 0 var(--wp--preset--spacing--6);
}

.hp-about-template .hp-project-grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--5);
	margin-block: 0;
	align-items: stretch;
}

.hp-about-template .hp-project-grid.wp-block-columns > .wp-block-column {
	margin: 0;
	min-width: 0;
	flex-basis: auto;
}

.hp-about-template .hp-project {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--custom--border--hair);
	border-radius: var(--hp-radius-card);
	background: var(--wp--custom--surface--card);
	box-shadow: var(--wp--custom--shadow--sm);
}

.hp-about-template .hp-project__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--hp-weight-title);
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--wp--custom--text--strong);
}

.hp-about-template .hp-project__name a {
	color: var(--wp--custom--text--strong);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--hp-artifact) 55%, transparent);
}

.hp-about-template .hp-project__name a:hover {
	border-bottom-color: var(--hp-artifact);
}

.hp-about-template .hp-project__impact {
	flex: 1;
	margin: var(--wp--preset--spacing--3) 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--relaxed);
	color: var(--wp--custom--text--muted);
}

/* Stack chips — mono, hairline-bordered, artifact-blue ink, matching the
   reference's tech tags. */
.hp-about-template .hp-project__stack {
	gap: var(--hp-gap-xs);
	margin-top: auto;
}

.hp-about-template .hp-project__tech {
	margin: 0;
	padding: 3px 8px;
	border: 1px solid var(--wp--custom--border--hair);
	border-radius: var(--hp-radius-chip);
	background: var(--wp--custom--surface--sunken);
	color: var(--hp-artifact);
	font-family: var(--hp-font-mono);
	font-size: var(--wp--preset--font-size--2xs);
	line-height: 1.5;
}

/* ---- RESPONSIVE COLLAPSE ------------------------------------------- */
/* Below the wide-pull breakpoint, collapse the new card grids and the
   2-col split to a single column. (The base theme already stacks the
   signal strip and re-flows .hp-skills at its own breakpoints; these
   rules own only the NEW grids.) */
@media (max-width: 55.99rem) {
	.hp-about-template .hp-capability-grid.wp-block-columns,
	.hp-about-template .hp-project-grid.wp-block-columns {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px) {
	.hp-about-template .hp-about-hero__top {
		gap: var(--wp--preset--spacing--6);
	}

	.hp-about-template .hp-about-hero__portrait {
		width: 100%;
	}

	/* WP stacks the skills/education columns here; restore vertical rhythm
	   between the two stacked halves. */
	.hp-about-template .hp-about-skills-edu.wp-block-columns {
		gap: var(--wp--preset--spacing--7);
	}
}

/* About — the new wide rows (capabilities, skills+education, projects) break out
   explicitly like the impact strip / work ledger, because alignwide does not
   resolve to wideSize inside page-about.html's explicitly-constrained post-content. */
@media (min-width: 56rem) {
	.hp-about-template :is(.hp-capability-grid, .hp-about-skills-edu, .hp-project-grid) {
		--hp-about-wide: min(var(--wp--custom--container--wide, 72rem), 100vw - 2 * var(--wp--preset--spacing--6, 2rem));
		width: var(--hp-about-wide);
		max-width: none;
		margin-inline: calc(50% - var(--hp-about-wide) / 2) !important;
		box-sizing: border-box;
	}
}