/*
 * Component layer: the patterns and template parts of Direction C.
 *
 * Same rule as base.css - every value resolves to a token. No hex codes here.
 */

/* -------------------------------------------------------------- header ---- */

.site-header {
	position: relative;
	z-index: 30;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--band-ink) 12%, transparent);
}

/*
 * flex-wrap is load-bearing. Without it the three children - wordmark, nav and the
 * search control - cannot drop onto a second row, and once the tagline was filled in
 * and a seven-item menu existed the header pushed the search control past the right
 * edge of a 400px viewport. Found on the dev site, 2026-08-29.
 */
.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	min-height: 4.25rem;
}

.site-header__inner > * {
	min-width: 0;
}

.wordmark__text {
	min-width: 0;
}

.wordmark__name,
.wordmark__tagline {
	overflow-wrap: anywhere;
}

/* --- supplied logo -------------------------------------------------------- */
/*
 * The client's logo is a charcoal wordmark on a light ground. Measured against the
 * header band it is 1.07:1 - effectively invisible - so it sits on a light plate.
 *
 * band-ink is the right token for that plate: it is near-white and, unlike surface or
 * canvas, it is FIXED in both colour schemes. A plate that inverted in dark mode would
 * put charcoal back on a dark ground and undo the whole point.
 */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.6rem;
	background: var(--wp--preset--color--band-ink);
	border-radius: var(--radius-sm);
	line-height: 0;
}

.custom-logo {
	height: 2.6rem;
	width: auto;
	max-width: min(58vw, 14rem);
	object-fit: contain;
}

.custom-logo-link--text {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--band);
	text-decoration: none;
}

.wordmark__text--beside-logo {
	display: none;
}

@media (min-width: 48rem) {
	.wordmark__text--beside-logo {
		display: block;
		min-width: 0;
	}
}

/* --- mobile nav disclosure ------------------------------------------------ */

.nav-toggle {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-height: 2.75rem;
	margin-left: auto;
	padding-inline: var(--wp--preset--spacing--3);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--band-ink) 35%, transparent);
	border-radius: var(--radius-sm);
	color: var(--wp--preset--color--band-ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
}

.nav-toggle:hover {
	border-color: var(--wp--preset--color--band-accent);
	color: var(--wp--preset--color--band-accent);
}

@media (max-width: 61.99rem) {
	/*
	 * Only collapse the menu when scripts are running. Without .has-js the list stays
	 * visible - long, but every link reachable - rather than hiding behind a button
	 * that cannot open it.
	 */
	.has-js .nav-toggle {
		display: inline-flex;
	}

	.has-js .primary-nav {
		display: none;
	}

	.has-js .primary-nav.is-open {
		display: block;
	}

	.primary-nav {
		flex: 1 0 100%;
		margin-left: 0;
	}

	.site-header__utility {
		flex: 1 0 100%;
		justify-content: flex-start;
	}
}

.wordmark {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--band-ink);
	text-decoration: none;
}

.wordmark__mark {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	color: var(--wp--preset--color--band-accent);
}

.wordmark__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.wordmark__tagline {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--band-muted);
}

/* --------------------------------------------------------- primary nav ---- */

.primary-nav {
	margin-left: auto;
}

.primary-nav__list,
.primary-nav__list ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav__list > li {
	position: relative;
}

.primary-nav__list > li > a {
	display: block;
	padding: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--band-ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	opacity: 0.88;
}

.primary-nav__list > li > a:hover,
.primary-nav__list > li:focus-within > a {
	opacity: 1;
	color: var(--wp--preset--color--band-accent);
}

.primary-nav__list .current-menu-item > a,
.primary-nav__list .current-menu-ancestor > a {
	opacity: 1;
	color: var(--wp--preset--color--band-accent);
}

/* Sub-menus open on hover and on focus-within, so they work without scripts. */
.primary-nav__list ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: 16rem;
	flex-direction: column;
	align-items: stretch;
	padding: var(--wp--preset--spacing--2) 0;
	background: var(--wp--preset--color--band-2);
	border-top: 2px solid var(--wp--preset--color--band-accent);
}

.primary-nav__list li:hover > ul,
.primary-nav__list li:focus-within > ul,
.primary-nav__list li.is-open > ul {
	display: flex;
}

.primary-nav__list ul a {
	display: block;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--band-body);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.primary-nav__list ul a:hover {
	color: var(--wp--preset--color--band-accent);
}

@media (max-width: 61.99rem) {
	/* Below the mega-menu breakpoint the nav is a plain nested list: no traps. */
	.primary-nav__list {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.primary-nav__list ul {
		display: flex;
		position: static;
		min-width: 0;
		border-top: 0;
		background: transparent;
		padding-left: var(--wp--preset--spacing--4);
	}
}

/* -------------------------------------------------------------- search ---- */

.site-header__utility {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

/*
 * wp_nav_menu emits ul.utility-nav, and nothing styled it. That went unnoticed for
 * five releases because no utility menu had ever been assigned - has_nav_menu()
 * returned false and the whole block was skipped. The first time someone actually
 * filled the location, the header grew a second row of disc bullets indented 40px.
 */
.utility-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility-nav li {
	margin: 0;
}

.utility-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--wp--preset--color--band-ink);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.utility-nav a:hover,
.utility-nav a:focus-visible {
	text-decoration: underline;
}

.search-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-height: 2.75rem;
	padding-inline: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--band-ink);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.search-toggle:hover {
	color: var(--wp--preset--color--band-accent);
}

.site-search {
	padding-block: var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--band-2);
}

.search-form__label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.search-form__row {
	display: flex;
	gap: var(--wp--preset--spacing--2);
}

/* ---------------------------------------------------------------- hero ---- */

.hero {
	position: relative;
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0.42;
}

.hero__media .image-slot,
.hero__media img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}

/*
 * In the hero the placeholder is a background, and the scrim fades out to the right,
 * so a centred caption showed straight through the headline. Pin the label to the
 * bottom-right, clear of the text column. The full subject stays in the aria-label
 * and in 06-images/manifest.json, so nothing is lost.
 */
.hero__media .image-slot {
	align-items: flex-end;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--4);
}

.hero__media .image-slot__subject {
	display: none;
}

/*
 * The warning stays visible in the hero even though the subject is hidden - a bare
 * slot id told a reviewer nothing about why the banner was blank.
 */
.hero__media .image-slot__warn {
	padding: 0.2rem 0.5rem;
	background: var(--wp--preset--color--band);
	border-radius: var(--radius-sm);
	color: var(--wp--preset--color--band-accent);
	font-size: var(--wp--preset--font-size--xs);
}

.hero__media .image-slot__id {
	padding: 0.2rem 0.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--band) 78%, transparent);
	border-radius: var(--radius-sm);
	color: var(--wp--preset--color--band-muted);
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--band) 12%,
		color-mix(in srgb, var(--wp--preset--color--band) 62%, transparent) 62%,
		color-mix(in srgb, var(--wp--preset--color--band) 28%, transparent)
	);
}

.hero__inner {
	position: relative;
	z-index: 2;
	max-width: 46rem;
	padding-block: var(--wp--preset--spacing--7);
}

.hero--compact .hero__inner {
	padding-block: var(--wp--preset--spacing--6);
}

.hero__title {
	color: var(--wp--preset--color--band-ink);
}

.hero--compact .hero__title {
	font-size: var(--wp--preset--font-size--xxl);
}

.hero__lede {
	max-width: 34rem;
	color: var(--wp--preset--color--band-body);
	font-size: var(--wp--preset--font-size--lg);
}

.hero__meta {
	color: var(--wp--preset--color--band-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--5);
}

.eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--band-accent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* --------------------------------------------------------- breadcrumb ----- */

.breadcrumb {
	margin-bottom: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--band-muted);
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb li + li::before {
	content: "/";
	margin-right: var(--wp--preset--spacing--2);
}

/* ------------------------------------------------------------- figures ---- */

.band--figures {
	padding-block: var(--wp--preset--spacing--6);
}

.figures {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.figures {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 62rem) {
	.figures {
		grid-template-columns: repeat(4, 1fr);
	}
}

.figures__value {
	display: block;
	color: var(--wp--preset--color--band-accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
}

.figures__label {
	display: block;
	max-width: 22ch;
	margin-top: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--band-ink);
}

.figures__note {
	display: block;
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--band-muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* --------------------------------------------------------------- cards ---- */

.card-grid {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 44rem) {
	.card-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 68rem) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: var(--border-width) solid var(--wp--preset--color--line);
	border-radius: var(--radius-md);
	box-shadow: var(--wp--preset--shadow--sm);
}

.card:hover {
	box-shadow: var(--wp--preset--shadow--md);
}

.card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--4);
}

.card__title {
	margin: 0;
}

.card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.card:hover .card__title a {
	color: var(--wp--preset--color--accent);
}

.card__parent,
.card__meta {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

.card__meta {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--3);
	border-top: var(--border-width) solid var(--wp--preset--color--line);
}

.card__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

.card__figure {
	margin: 0;
}

.card__figure-value {
	display: block;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.card__figure-label {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* --------------------------------------------------------------- pills ---- */

.pill {
	display: inline-block;
	align-self: flex-start;
	padding: 0.15rem 0.6rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

.pill--completed { color: var(--wp--preset--color--positive); }
.pill--ongoing { color: var(--wp--preset--color--accent); }
.pill--pending { color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------- filters ---- */

.filters {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--5);
}

.filters__legend {
	margin: 0 0 var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pill-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.4rem 1.1rem;
	background: transparent;
	border: 1px solid var(--wp--preset--color--control);
	border-radius: 999px;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

.pill-link.is-active {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

.result-count {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

[aria-busy="true"] .card-grid {
	opacity: 0.5;
}

/* ----------------------------------------------------------- bar list ----- */

.bar-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bar-list__row {
	padding-block: var(--wp--preset--spacing--3);
	border-bottom: var(--border-width) solid var(--wp--preset--color--line);
}

.bar-list__head {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
}

.bar-list__value {
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

.bar-list__track {
	display: block;
	height: 0.6rem;
	background: var(--wp--preset--color--surface-2);
	border-radius: 999px;
}

.bar-list__fill {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
}

/* ---------------------------------------------------------- documents ----- */

.document-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.document-list__item {
	border-bottom: var(--border-width) solid var(--wp--preset--color--line);
}

.document-list__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	min-height: 2.75rem;
	padding-block: var(--wp--preset--spacing--3);
	text-decoration: none;
}

.document-list__link:hover .document-list__title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.document-list__title {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.document-list__title--pending {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.document-list__meta {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: tabular-nums;
}

.todo-flag {
	display: inline-block;
	margin-left: var(--wp--preset--spacing--2);
	padding: 0.1rem 0.45rem;
	background: var(--wp--preset--color--warning);
	border-radius: var(--radius-sm);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

/* ------------------------------------------------------- empty section ---- */

.empty-section {
	padding: var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--surface-2);
	border-left: 4px solid var(--wp--preset--color--warning);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.empty-section__title {
	margin: 0 0 var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* -------------------------------------------------------------- search ---- */

.result-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.result {
	padding-block: var(--wp--preset--spacing--4);
	border-bottom: var(--border-width) solid var(--wp--preset--color--line);
}

.result__type {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.result__title {
	margin: 0.2rem 0;
	font-size: var(--wp--preset--font-size--lg);
}

.result__excerpt,
.result__url {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

.result__url {
	color: var(--wp--preset--color--muted);
}

.helpful-links,
.inline-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------- footer ---- */

.site-footer {
	padding-block: var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--sm);
}

.footer-nav__list {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.footer-nav__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62rem) {
	.footer-nav__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.footer-nav__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav__list > li > a {
	font-weight: 700;
}

.registration-block {
	margin-top: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--band-ink) 20%, transparent);
}

.registration-block__heading {
	margin-bottom: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--band-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.registration-block__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
}

.registration-block__list > div {
	display: flex;
	gap: 0.4rem;
}

.registration-block__list dt {
	color: var(--wp--preset--color--band-muted);
}

.registration-block__list dd {
	margin: 0;
	color: var(--wp--preset--color--band-ink);
	font-variant-numeric: tabular-nums;
}

.colophon {
	margin-top: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--band-ink) 20%, transparent);
	color: var(--wp--preset--color--band-muted);
	font-size: var(--wp--preset--font-size--xs);
}

.colophon__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------ big list ---- */

.big-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--band-ink) 18%, transparent);
}

.big-list li {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--band-ink) 18%, transparent);
}

.big-list a {
	display: grid;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	grid-template-columns: 1fr;
	padding-block: var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--band-body);
	text-decoration: none;
}

@media (min-width: 52rem) {
	.big-list a {
		grid-template-columns: 20rem 1fr auto;
		align-items: baseline;
	}
}

.big-list__title {
	color: var(--wp--preset--color--band-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.big-list a:hover .big-list__title {
	color: var(--wp--preset--color--band-accent);
}

.big-list__go {
	color: var(--wp--preset--color--band-accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	white-space: nowrap;
}

/* -------------------------------------------------------- partner wall ---- */

.partner-wall {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 44rem) {
	.partner-wall {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 68rem) {
	.partner-wall {
		grid-template-columns: repeat(6, 1fr);
	}
}

.partner-wall__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5.5rem;
	padding: var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--surface);
	border: var(--border-width) solid var(--wp--preset--color--line);
	border-radius: var(--radius-md);
	color: var(--wp--preset--color--body);
	text-align: center;
	text-decoration: none;
}

a.partner-wall__link:hover {
	border-color: var(--wp--preset--color--accent);
}

.partner-wall__name {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.3;
}

.partner-wall__logo {
	max-height: 3.5rem;
	width: auto;
	object-fit: contain;
}

.more-link {
	margin-top: var(--wp--preset--spacing--5);
}

/* ------------------------------------------------------- gallery strip ---- */

.gallery-strip {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------- people ---- */

.card-grid--people {
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.person {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: var(--border-width) solid var(--wp--preset--color--line);
	border-radius: var(--radius-md);
}

.person__portrait {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--accent-soft);
	overflow: hidden;
}

.person__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * No portraits have been supplied for any of the twelve people. Initials on the
 * accent ground read as a decision; a grey silhouette reads as a broken image.
 */
.person__initials {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.person__portrait--large {
	aspect-ratio: auto;
	border-radius: var(--radius-md);
}

.person__body {
	padding: var(--wp--preset--spacing--4);
}

.person__name {
	margin: 0 0 0.2rem;
	font-size: var(--wp--preset--font-size--base);
}

.person__name a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.person__role {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.person__lifespan {
	margin: 0.2rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

.in-memoriam {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- contact ---- */

.contact-details {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
}

.contact-details dt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-details dd {
	margin: 0.2rem 0 0;
	color: var(--wp--preset--color--ink);
}

.location-list th[scope="row"] {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* ----------------------------------------------------------------- faq ---- */

.faq__item {
	margin-bottom: var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--surface);
	border: var(--border-width) solid var(--wp--preset--color--line);
	border-radius: var(--radius-md);
}

.faq__item > summary,
.faq__question {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	cursor: pointer;
}

.faq__item[open] > summary,
.faq__item[open] .faq__question {
	border-bottom: var(--border-width) solid var(--wp--preset--color--line);
}

.faq__answer,
.faq__item > *:not(summary) {
	padding: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm);
}

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

/* ------------------------------------------------------------ timeline ---- */

.timeline {
	position: relative;
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: 0 0 0 var(--wp--preset--spacing--5);
	list-style: none;
	border-left: 2px solid var(--wp--preset--color--line);
}

.timeline__item {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--6);
}

.timeline__marker {
	position: absolute;
	left: calc(-1 * var(--wp--preset--spacing--5) - 7px);
	top: 0.45rem;
	width: 12px;
	height: 12px;
	background: var(--wp--preset--color--accent);
	border: 2px solid var(--wp--preset--color--canvas);
	border-radius: 50%;
}

.timeline__date {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.timeline__title {
	margin: 0.2rem 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--lg);
}

/* ---------------------------------------------------------- rate table ---- */

.rate-note {
	color: var(--wp--preset--color--warning);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.rate-table table {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- block style variations ---- */
/*
 * These are the classes WordPress emits for the styles registered in inc/editor.php.
 * Every one is implemented here; a registered style with no CSS is a control that
 * silently does nothing, which teaches the client that the controls do not work.
 */

.wp-block-group.is-style-band {
	padding-block: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--band);
	color: var(--wp--preset--color--band-body);
}

.wp-block-group.is-style-band-quiet {
	padding-block: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--band-2);
	color: var(--wp--preset--color--band-body);
}

.wp-block-group.is-style-band :where(h1, h2, h3, h4),
.wp-block-group.is-style-band-quiet :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--band-ink);
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--accent);
}

.wp-block-table.is-style-rate-table table {
	font-variant-numeric: tabular-nums;
}

.wp-block-table.is-style-rate-table th {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-quote.is-style-pull {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.wp-block-quote.is-style-pull cite {
	display: block;
	margin-top: var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
}

.wp-block-details.is-style-faq {
	margin-bottom: var(--wp--preset--spacing--3);
	padding: 0;
	background: var(--wp--preset--color--surface);
	border: var(--border-width) solid var(--wp--preset--color--line);
	border-radius: var(--radius-md);
}

.wp-block-details.is-style-faq > summary {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	cursor: pointer;
}

.wp-block-details.is-style-faq[open] > summary {
	border-bottom: var(--border-width) solid var(--wp--preset--color--line);
}

.wp-block-details.is-style-faq > *:not(summary) {
	padding-inline: var(--wp--preset--spacing--4);
}

/* -------------------------------------------------------------- polish ------ */
/*
 * Step 8 of the conversion order, kept deliberately small. Everything here is a
 * state change on something the visitor is already interacting with - no scroll
 * effects, no entrance animation, nothing that moves on its own. All of it is
 * suppressed by the prefers-reduced-motion block in base.css.
 */

.card,
.person,
.partner-wall__link,
.pill-link,
.button,
.document-list__link {
	transition: border-color 120ms ease, background-color 120ms ease,
		box-shadow 160ms ease, transform 160ms ease;
}

.card:hover,
.person:hover {
	transform: translateY(-2px);
}

.big-list a .big-list__go {
	display: inline-block;
	transition: transform 140ms ease;
}

.big-list a:hover .big-list__go {
	transform: translateX(3px);
}