/*
 * Web of Impact — theme stylesheet.
 *
 * Design layer for the Aug 2026 brand: Dark Indigo + Grey Azure, Rubik typeface, a soft
 * lavender canvas, an orbital "network" hero, and rounded cards. Template class hooks
 * (.site-header, .home-hero, .resource-grid, …) are shared with the markup — restyling here
 * does not touch the templates.
 */

/* ---------- Design tokens ---------- */
:root {
	/* Brand core */
	--woi-indigo: #1b1464; /* primary dark */
	--woi-indigo-600: #241a70; /* gradient / hover step */
	--woi-indigo-500: #2f2a86; /* button hover */
	--woi-gradient: linear-gradient(135deg, #544bb2, #1b1464); /* brand-kit gradient */
	--woi-button: var(--woi-gradient); /* dark button fill */
	--woi-button-hover: linear-gradient(135deg, #4a41a4, #150f52); /* dark button hover */
	--woi-violet: #4b3f9e; /* footer/hero glow, spheres */
	--woi-azure: #72a6b7; /* teal accent — points of connection */
	--woi-azure-200: #a9d4e0;
	--woi-periwinkle: #9db3e6; /* light kicker on the dark hero */

	/* Surfaces */
	--woi-canvas: #f2f5fd; /* page background below the hero */
	--woi-card: #ffffff;

	/* Ink */
	--woi-ink: #1f2233;
	--woi-white: #fff;

	--woi-heading: var(--woi-indigo);
	--woi-link: var(--woi-indigo);
	--woi-link-hover: var(--woi-azure);

	/* Shape */
	--woi-maxw: 1200px;
	--woi-radius: 16px;
	--woi-radius-lg: 22px;
	--woi-radius-pill: 999px;
	--woi-shadow-card: 0 20px 45px -26px rgba(27, 20, 100, 0.5);
	--woi-shadow-soft: 0 10px 30px -20px rgba(27, 20, 100, 0.55);

	--woi-font-body: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--woi-font-display: var(--woi-font-body);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--woi-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--woi-ink);
	background: var(--woi-canvas);
}

img {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--woi-font-display);
	font-weight: 700;
	line-height: 1.15;
	color: var(--woi-heading);
}

a {
	color: var(--woi-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	color: var(--woi-link-hover);
}

:focus-visible {
	outline: 3px solid var(--woi-azure);
	outline-offset: 2px;
}

/* ---------- Layout ---------- */
.container {
	width: 100%;
	max-width: var(--woi-maxw);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* Break a section out of the constrained page container to span the full viewport width,
   while its inner .container re-centres the content. */
.full-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.site-main {
	display: block;
	position: relative;
}

/* Section headings shared across bands. */
.section-title {
	margin: 0 0 1.75rem;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

/* ---------- Buttons ---------- */
.button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: 11px;
	background: var(--woi-button);
	color: var(--woi-white);
	font-family: var(--woi-font-display);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.button:hover,
.button:focus {
	background: var(--woi-button-hover);
	color: var(--woi-white);
	transform: translateY(-1px);
}

/* Inverse: light pill on a dark ground (hero). */
.button--inverse {
	background: var(--woi-white);
	color: var(--woi-indigo);
}

.button--inverse:hover,
.button--inverse:focus {
	background: var(--woi-azure-200);
	color: var(--woi-indigo);
}

/* ---------- Header ---------- */
.site-header {
	background: var(--woi-white);
	border-bottom: 1px solid rgba(27, 20, 100, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1rem;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.site-logo,
.site-partner-logo {
	display: block;
	width: auto;
	height: 52px;
}

.site-partner-logo {
	padding-left: 1rem;
	border-left: 1px solid rgba(27, 20, 100, 0.18);
}

.site-header__nav {
	display: flex;
	align-items: center;
}

.site-header__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
}

.site-header__top {
	display: flex;
	justify-content: flex-end;
}

.site-header__bottom {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* Language switcher — a compact EN | FR segmented toggle. */
.language-switcher ul {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--woi-canvas);
	border-radius: var(--woi-radius-pill);
}

.language-switcher li {
	margin: 0;
}

.language-switcher a {
	display: block;
	padding: 0.3rem 0.85rem;
	border-radius: var(--woi-radius-pill);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--woi-indigo);
}

.language-switcher .current-lang a,
.language-switcher a[aria-current] {
	background: var(--woi-indigo);
	color: var(--woi-white);
}

/* Primary navigation */
.primary-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu a {
	display: inline-block;
	padding: 0.35rem 0;
	font-weight: 500;
	font-size: 1rem;
	color: var(--woi-ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.primary-menu a:hover,
.primary-menu a:focus,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--woi-indigo);
	border-bottom-color: var(--woi-azure);
}

/* Header search disclosure */
.header-search {
	position: relative;
}

.header-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--woi-indigo);
	cursor: pointer;
	list-style: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.header-search__toggle::-webkit-details-marker {
	display: none;
}

.header-search__toggle:hover {
	background: var(--woi-canvas);
}

/* Open reads as the "current" nav control, like the active language pill. */
.header-search[open] > .header-search__toggle {
	background: var(--woi-indigo);
	color: var(--woi-white);
}

.header-search__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.65rem);
	z-index: 40;
	width: min(320px, 80vw);
	padding: 1rem;
	background: var(--woi-white);
	border: 1px solid rgba(114, 166, 183, 0.32);
	border-radius: var(--woi-radius);
	box-shadow: var(--woi-shadow-card);
}

/* Little arrow pointing back at the toggle. */
.header-search__panel::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 13px;
	width: 12px;
	height: 12px;
	background: var(--woi-white);
	border-top: 1px solid rgba(114, 166, 183, 0.32);
	border-left: 1px solid rgba(114, 166, 183, 0.32);
	transform: rotate(45deg);
}

/* Shared search form (header disclosure): icon + pill field, then a gradient submit. */
.search-form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.search-form__control {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding-inline: 0.85rem;
	background: var(--woi-canvas);
	border: 1px solid rgba(27, 20, 100, 0.14);
	border-radius: var(--woi-radius-pill);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-form__control:focus-within {
	border-color: var(--woi-azure);
	box-shadow: 0 0 0 3px rgba(114, 166, 183, 0.35);
}

.search-form__icon {
	flex: none;
	color: var(--woi-azure);
}

.search-form__field {
	flex: 1;
	min-width: 0;
	padding-block: 0.6rem;
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--woi-ink);
	appearance: none;
}

.search-form__field:focus {
	outline: none;
}

.search-form__field::-webkit-search-cancel-button {
	appearance: none;
}

.search-form__submit {
	justify-content: center;
	padding: 0.6rem 1.5rem;
	border-radius: var(--woi-radius-pill);
	font-size: 1rem;
}

/* Hamburger (mobile only, revealed by nav.js) */
.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--woi-indigo);
	transition: transform 0.2s ease;
}

.menu-toggle__bars {
	position: relative;
	margin: 0 auto;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__bars::before {
	top: -7px;
}

.menu-toggle__bars::after {
	top: 7px;
}

/* ---------- Home: hero ---------- */
.home-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Tied to width too, so on narrower screens the band stays shallower than the rings
	   and they're cropped top and bottom rather than shown whole. */
	min-height: min(82vh, 700px, 62vw);
	overflow: hidden;
	color: var(--woi-white);
	/* Base (Canva): teal core to indigo edge. */
	background: radial-gradient(circle at 50% 50%, #72a7b8 0%, #1c1567 100%);
}

/* Editor-chosen background image (Home Page box) in place of the orbit motif, under an
   indigo wash so the white copy keeps its contrast. */
.home-hero--image {
	background:
		linear-gradient(rgba(28, 21, 103, 0.55), rgba(28, 21, 103, 0.55)),
		var(--hero-image) center / cover no-repeat,
		#1c1567;
}

.home-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	padding-block: clamp(2.5rem, 1rem + 7vw, 6.5rem);
	text-align: center;
	/* Lift the copy off the ringed background. */
	text-shadow: 0 2px 12px rgba(12, 8, 54, 0.45);
}

.home-hero__kicker {
	margin: 0 0 0.25rem;
	font-size: clamp(1.65rem, 1.1rem + 2.6vw, 2.75rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #bcd6e2;
}

.home-hero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.25rem, 1.4rem + 4vw, 3.75rem);
	font-weight: 800;
	color: var(--woi-white);
}

.home-hero__copy {
	margin-inline: auto;
	max-width: 46ch;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
}

.home-hero__copy p {
	margin: 0;
}

.home-hero__cta {
	margin-top: 2rem;
	font-size: 1.35rem;
	padding: 0.6rem 1.9rem;
	text-shadow: none;
	box-shadow: 0 14px 30px -12px rgba(12, 8, 54, 0.6);
}

/* Concentric orbit rings; the network-node spheres ride on their circumference. The number
   of visible rings grows with the screen (2 → 5) and they're spaced evenly from the inner
   ring out to near the screen edges, so the band stays balanced at any width. */
.home-hero__orbits {
	--orbit-count: 2;
	--orbit-inner: 70vw;
	--orbit-outer: 98vw;
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.orbit {
	--step: calc((var(--i) - 1) / (var(--orbit-count) - 1));
	--d: calc(var(--orbit-inner) + (var(--orbit-outer) - var(--orbit-inner)) * var(--step));
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--d);
	height: var(--d);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	/* Fade from the bright inner ring to the faint outer one. */
	border: 2px solid rgba(255, 255, 255, calc(0.42 - 0.22 * var(--step)));
	background: rgba(255, 255, 255, 0.045);
}

.orbit--1 { --i: 1; }
.orbit--2 { --i: 2; }
.orbit--3 { --i: 3; }
.orbit--4 { --i: 4; }
.orbit--5 { --i: 5; }

.orbit--3,
.orbit--4,
.orbit--5 {
	display: none;
}

/* Phones: a taller band so both rings sit clear of the copy edges. */
@media (max-width: 599px) {
	.home-hero {
		min-height: 120vw;
	}
}

@media (min-width: 600px) {
	.home-hero__orbits {
		--orbit-count: 3;
		--orbit-inner: min(52vw, 620px);
		--orbit-outer: 94vw;
	}

	.orbit--3 {
		display: block;
	}
}

@media (min-width: 1100px) {
	.home-hero__orbits {
		--orbit-count: 4;
	}

	.orbit--4 {
		display: block;
	}
}

@media (min-width: 1500px) {
	.home-hero__orbits {
		--orbit-count: 5;
	}

	.orbit--5 {
		display: block;
	}
}

.orbit-sphere {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	box-shadow: 0 12px 26px -8px rgba(0, 0, 0, 0.5);
	/* Ride the parent orbit's circle at angle --a (measured clockwise from 3 o'clock). */
	transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateX(calc(var(--d) / 2)) rotate(calc(-1 * var(--a, 0deg)));
}

.orbit-sphere--indigo {
	background: radial-gradient(circle at 34% 30%, #7d76d4, #4136a0 58%, #2a2178);
}

.orbit-sphere--azure {
	width: 46px;
	height: 46px;
	background: radial-gradient(circle at 34% 30%, var(--woi-azure-200), var(--woi-azure) 60%, #5b8a99);
}

/* ---------- Home: welcome video ---------- */
.home-welcome {
	background: var(--woi-canvas);
	/* Keep the orbit ring's overshoot from spilling into the Learn band below. */
	overflow: hidden;
}

.home-welcome__inner {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
	padding-block: clamp(7.5rem, 6rem + 7.5vw, 13.5rem);
}

.home-welcome__media .video-embed,
.home-welcome__media {
	margin: 0;
}

.home-welcome__media {
	position: relative;
	/* Sit above the intro column so the connector line tucks behind the video. */
	z-index: 2;
}

.home-welcome__media .video-embed {
	position: relative;
	z-index: 1;
}

/* Orbital ring echoing the hero motif, with network-node spheres riding its edge. */
.home-welcome__orbits {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Centred on the video so the ring straddles it, peeking above and below. */
.welcome-orbit {
	--d: clamp(320px, 38vw, 500px);
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--d);
	height: var(--d);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(114, 166, 183, 0.4);
	background: rgba(114, 166, 183, 0.05);
}

/* Nested inner ring, echoing the hero's concentric orbits. */
.welcome-orbit__inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(114, 166, 183, 0.28);
}

.video-embed {
	position: relative;
	margin: 0;
	border-radius: var(--woi-radius-lg);
	overflow: hidden;
	box-shadow: var(--woi-shadow-card);
	aspect-ratio: 16 / 9;
	background: #000;
}

.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.home-welcome__intro {
	position: relative;
}

/* Connector accent — a short horizontal line reaching back toward the video,
   capped by a hollow node at the copy's edge, echoing the network motif. */
.home-welcome__copy {
	position: relative;
}

.home-welcome__copy::before {
	content: "";
	position: absolute;
	right: calc(100% + 22px);
	top: 0.7em;
	transform: translateY(-50%);
	/* Long enough to run under the video's edge (it sits behind), leaving no gap. */
	width: clamp(3.5rem, 6vw, 6rem);
	height: 3px;
	background: var(--woi-indigo);
}

.home-welcome__copy::after {
	content: "";
	position: absolute;
	right: calc(100% + 8px);
	top: 0.7em;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--woi-canvas);
	border: 3px solid var(--woi-indigo);
}

.home-welcome__kicker {
	margin: 0 0 0.35rem;
	font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--woi-azure);
}

.home-welcome__title {
	margin: 0 0 1rem;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
	font-weight: 800;
	color: var(--woi-indigo);
}

.home-welcome__copy {
	margin: 0 0 1.75rem;
	font-size: 1.1rem;
}

/* ---------- Home: learn cards ---------- */
.home-learn {
	background: var(--woi-canvas);
	padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(3.5rem, 2rem + 5vw, 6rem);
}

.section-title--learn {
	position: relative;
	padding-left: 1rem;
}

.section-title--learn::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	bottom: 0.1em;
	width: 5px;
	border-radius: 3px;
	background: var(--woi-azure);
}

.resource-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.resource-card {
	display: flex;
}

.resource-card > article {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--woi-card);
	border-radius: var(--woi-radius);
	overflow: hidden;
	box-shadow: var(--woi-shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.resource-card > article:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 50px -26px rgba(27, 20, 100, 0.6);
}

.resource-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: linear-gradient(135deg, var(--woi-azure-200), var(--woi-violet));
}

.resource-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Branded fallback when a resource has no featured image: the Web of Impact network mark,
   centred on a soft azure wash. Shared by the home band and the Learn cards. */
.resource-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		url("../images/web-impact-spark.png") center / 42% auto no-repeat,
		radial-gradient(120% 120% at 50% 30%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 62%),
		linear-gradient(135deg, #e4eff6, #cbd9f2);
}

.resource-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
	padding: 1.25rem 1.25rem 1.5rem;
}

.resource-card__title {
	order: 1;
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
}

.resource-card__title a {
	color: var(--woi-indigo);
	text-decoration: none;
}

.resource-card__title a:hover,
.resource-card__title a:focus {
	text-decoration: underline;
}

.resource-card__kicker {
	order: 2;
	margin: 0;
	font-size: 0.95rem;
	color: var(--woi-ink);
}

.resource-card__desc {
	order: 3;
	margin: 0;
	font-size: 0.95rem;
	color: rgba(31, 34, 51, 0.8);
}

.resource-card__cta {
	order: 4;
	margin-top: auto;
	align-self: flex-start;
	padding: 0.6rem 1.25rem;
	font-size: 0.95rem;
}

/* ---------- Learn landing ---------- */
.page-header--learn {
	padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem) 0;
}

.page-title--learn {
	margin: 0;
	font-size: clamp(2.25rem, 1.4rem + 4vw, 3.75rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

.learn-band {
	margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}

/* Learn shows three across (2 then 1 on narrower screens); the home band keeps its four. */
.learn-band .resource-grid {
	grid-template-columns: repeat(3, 1fr);
}

.learn-band:last-of-type {
	margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* Band heading: bold indigo with a short vertical bar accent, echoing the home "Learn"
   heading (which uses an azure bar) but keyed to the page's darker register. */
.learn-band__title {
	position: relative;
	margin: 0 0 1.5rem;
	padding-left: 1rem;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
	font-weight: 600;
	color: var(--woi-indigo);
}

.learn-band__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	bottom: 0.12em;
	width: 5px;
	border-radius: 3px;
	background: var(--woi-indigo);
}

/* Learn cards drop the home card's flex ordering so the DOM order — pill, title, date —
   reads top to bottom; the CTA still sinks to the bottom edge. */
.learn-card .resource-card__pill,
.learn-card .resource-card__title,
.learn-card .resource-card__kicker {
	order: 0;
}

.resource-card__pill {
	align-self: flex-start;
	margin: 0;
	padding: 0.32rem 0.9rem;
	border-radius: var(--woi-radius-pill);
	background: var(--woi-azure-200);
	color: var(--woi-indigo);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.learn-card .resource-card__body {
	gap: 0.55rem;
}

.learn-card .resource-card__kicker {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(31, 34, 51, 0.72);
}

/* Card face wrappers. In the default (flat) design these are transparent to layout — the
   front behaves exactly like the home card and the back is not rendered. The flip design
   below re-enables the back and the 3D rotation. */
.learn-card__flip {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
}

.learn-card__front {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.learn-card__back {
	display: none;
}

/* Preview toggle — a segmented Flat / Flip control; a design-review aid, revealed by JS. */
.learn-toolbar {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	margin-top: 1.35rem;
}

.learn-toolbar[hidden] {
	display: none;
}

.learn-toolbar__label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(31, 34, 51, 0.55);
}

.learn-toolbar__group {
	display: inline-flex;
	padding: 4px;
	background: var(--woi-card);
	border: 1px solid rgba(27, 20, 100, 0.14);
	border-radius: var(--woi-radius-pill);
	box-shadow: var(--woi-shadow-soft);
}

.learn-toolbar__btn {
	border: 0;
	background: transparent;
	padding: 0.4rem 1.05rem;
	border-radius: var(--woi-radius-pill);
	font-family: var(--woi-font-display);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--woi-indigo);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.learn-toolbar__btn:hover {
	background: rgba(27, 20, 100, 0.06);
}

.learn-toolbar__btn.is-active {
	background: var(--woi-button);
	color: var(--woi-white);
}

/* ---------- Learn cards: flip design (toggled by learn-cards.js) ---------- */
/* The article becomes the 3D stage; the two faces stack in one grid cell so the card
   auto-sizes to the taller face — no fixed height needed. */
.learn-cards--flip .learn-card > article {
	background: transparent;
	overflow: visible;
	box-shadow: none;
	perspective: 1400px;
}

.learn-cards--flip .learn-card > article:hover {
	transform: none;
	box-shadow: none;
}

.learn-cards--flip .learn-card__flip {
	display: grid;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.learn-cards--flip .learn-card:hover .learn-card__flip,
.learn-cards--flip .learn-card:focus-within .learn-card__flip {
	transform: rotateY(180deg);
}

.learn-cards--flip .learn-card__front,
.learn-cards--flip .learn-card__back {
	grid-area: 1 / 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border-radius: var(--woi-radius);
	overflow: hidden;
	box-shadow: var(--woi-shadow-card);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.learn-cards--flip .learn-card__front {
	background: var(--woi-card);
}

/* The CTA lives on the back face in this design. */
.learn-cards--flip .learn-card__front .resource-card__cta {
	display: none;
}

.learn-cards--flip .learn-card__back {
	transform: rotateY(180deg);
	background: var(--woi-gradient);
	color: var(--woi-white);
}

.learn-card__back-body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	height: 100%;
	padding: 1.5rem 1.5rem 1.6rem;
}

.learn-card__back-pill {
	align-self: flex-start;
	margin: 0;
	padding: 0.32rem 0.9rem;
	border-radius: var(--woi-radius-pill);
	background: rgba(255, 255, 255, 0.16);
	color: var(--woi-white);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.learn-card__back-title {
	margin: 0.15rem 0 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--woi-white);
}

.learn-card__back-date {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--woi-azure-200);
}

.learn-card__back-desc {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	/* Clamp so a long excerpt can't outgrow the front face and stretch the card. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.learn-card__back-cta {
	margin-top: auto;
	align-self: flex-start;
	padding: 0.6rem 1.25rem;
	font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
	.learn-cards--flip .learn-card__flip {
		transition-duration: 0.01ms;
	}
}

/* ---------- About page ---------- */
/* Shared with the body card so it can line up with the hero's columns. */
.page-about {
	--about-hero-gap: clamp(2rem, 1rem + 4vw, 4rem);
}

.about-hero {
	background: var(--woi-canvas);
	overflow: hidden;
}

.about-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--about-hero-gap);
	align-items: center;
	padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2rem, 1.25rem + 3.5vw, 4rem);
}

.about-hero__title {
	margin: 0 0 1.5rem;
	font-size: clamp(2.25rem, 1.4rem + 4vw, 3.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

.about-hero__title-line {
	display: block;
}

.about-hero__lead {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	color: var(--woi-ink);
}

.about-hero__lead p {
	margin: 0 0 1rem;
}

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

.about-hero__media {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}

/* The page's featured image — the network motif in the seeded content. Left unstyled
   beyond fitting the column so a transparent PNG and a photo both render honestly. */
.about-hero__image {
	display: block;
	width: 100%;
	height: auto;
}

/* Body prose set in a soft lavender card, wrapped in a decorative layer carrying the
   network motif: a node riding an orbit arc on the top edge, and faint concentric rings
   peeking from behind the corners. */
.about-body {
	background: var(--woi-canvas);
	padding-block: clamp(3rem, 2.5rem + 1vw, 3.5rem);
	overflow: hidden;
}

/* Left edge meets the hero lead; right edge meets the hero graphic's outermost ring,
   which sits 134/1440 in from the right of the image filling the 1.1fr column.
   The closing copy shares the same right edge. */
.about-card-wrap,
.about-together__copy {
	position: relative;
	margin-right: calc((100% - var(--about-hero-gap)) * 1.1 / 2.1 * 134 / 1440);
}

.about-card {
	position: relative;
	z-index: 1;
	padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 4vw, 5rem);
	background: linear-gradient(160deg, #eceffb, #e5e9f8);
	border: 1px solid rgba(114, 166, 183, 0.35);
	border-radius: var(--woi-radius-lg);
	box-shadow: var(--woi-shadow-soft);
}

/* A single wide, soft ring cresting past each of two opposite corners — one above
   the top-left (with the node perched at its peak), one below the bottom-right. */
.about-card__deco {
	position: absolute;
	z-index: 0;
	width: 360px;
	height: 360px;
	background: url("../images/about-rings.svg") center / contain no-repeat;
	pointer-events: none;
}

/* Rings keep their size and stay pinned to the card's left/right edges, so as the
   card narrows they slide inward with the edge rather than shrinking. */
.about-card__deco--tl {
	top: -45px;
	left: -14px;
}

.about-card__deco--br {
	bottom: -45px;
	right: -14px;
}

/* Azure network node perched at the peak of the top-left ring's arc, near the left
   edge. The crest sits low enough that the ball clears the section's top padding. */
.about-card__node {
	position: absolute;
	z-index: 2;
	top: -31px;
	left: 166px;
	width: 34px;
	height: 34px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, var(--woi-azure-200), var(--woi-azure) 60%, #5b8a99);
	box-shadow: 0 12px 24px -8px rgba(27, 20, 100, 0.45);
}

.about-card__prose {
	position: relative;
	z-index: 1;
	font-size: 1.1rem;
	color: var(--woi-ink);
}

.about-card__prose p {
	margin: 0 0 1.25rem;
}

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

.about-together {
	background: var(--woi-canvas);
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.about-together__title {
	margin-bottom: 1.25rem;
}

.about-together__copy {
	font-size: 1.1rem;
	color: var(--woi-ink);
}

.about-together__copy p {
	margin: 0 0 1rem;
}

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

.about-together__cta {
	margin-top: 2rem;
	padding: 0.9rem 1.1rem 0.9rem 1.75rem;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.button__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--woi-white);
	color: var(--woi-indigo);
	font-size: 0.85em;
	line-height: 1;
}

/* ---------- Footer ---------- */
.site-footer {
	position: relative;
	overflow: hidden;
	color: var(--woi-white);
	background: var(--woi-gradient);
}

/* Brand spark motif cut off in the top-right corner (clipped by the footer). */
.site-footer__spark {
	position: absolute;
	top: -4rem;
	right: -3rem;
	width: clamp(180px, 15vw, 220px);
	height: auto;
	opacity: 0.16;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.site-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.site-footer__heading {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--woi-white);
}

.site-footer__menu,
.site-footer__social-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__menu li {
	margin-bottom: 0.6rem;
}

.site-footer__menu a,
.site-footer__col--contact a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus {
	color: var(--woi-white);
	text-decoration: underline;
}

.site-footer__social-list {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.site-footer__social-list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--woi-white);
}

.site-footer__social-list a:hover,
.site-footer__social-list a:focus {
	background: rgba(255, 255, 255, 0.25);
}

.site-footer__logo img {
	display: block;
	max-height: 64px;
	max-width: 100%;
	width: auto;
}

/* Funder acknowledgement: a white band so the signature's own white ground blends in. */
.site-funder {
	position: relative;
	z-index: 1;
	padding-block: 1.5rem;
	background: var(--woi-white);
	color: var(--woi-indigo);
	text-align: center;
}

.site-funder p {
	margin: 0 0 0.75rem;
}

.site-funder__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2rem;
}

.site-funder img {
	max-height: 42px;
	max-width: 100%;
	width: auto;
}

/* The wordmark has more padding than the signature; size it up so the glyphs match. */
.site-funder .site-funder__wordmark {
	max-height: 52px;
}

/* ---------- Coming Soon ---------- */
.coming-soon .home-hero {
	min-height: min(72vh, 660px, 62vw);
}

.coming-soon .home-hero__inner {
	max-width: none;
}

.coming-soon__title {
	margin-bottom: 0.5rem;
	font-size: clamp(2.75rem, 1.6rem + 5.5vw, 5rem);
}

.coming-soon__subtitle {
	margin: 0;
	font-size: clamp(1.6rem, 1rem + 3vw, 3rem);
	font-weight: 800;
	font-style: italic;
	color: var(--woi-azure-200);
}

.coming-soon__welcome {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem);
	background: var(--woi-canvas);
}

.coming-soon__copy {
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
	line-height: 1.6;
}

.coming-soon__unlock {
	margin-top: 2.5rem;
	color: var(--woi-indigo);
}

.coming-soon__unlock summary {
	cursor: pointer;
	font-weight: 500;
}

.coming-soon__unlock form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.coming-soon__unlock input {
	padding: 0.55rem 1rem;
	border: 1px solid rgba(27, 20, 100, 0.25);
	border-radius: var(--woi-radius-pill);
	font: inherit;
}

.coming-soon__error {
	margin: 0.75rem 0 0;
	color: #b3261e;
}

.coming-soon__footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2.5rem;
}

.coming-soon__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2.5rem;
	margin: 0;
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
}

.coming-soon__footer .site-footer__social-list {
	margin: 0;
}

.coming-soon__western {
	max-height: 72px;
	width: auto;
	margin-left: auto;
}

@media (max-width: 780px) {
	.coming-soon__western {
		margin-left: 0;
	}
}

/* ---------- Project archive: "Our Projects" ---------- */
.project-archive-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem) 0;
}

.project-archive-title {
	margin: 0;
	font-size: clamp(2.25rem, 1.4rem + 4vw, 3.75rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

/* Concentric orbit rings + node cresting the page's top-right corner (below the nav),
   echoing the site's network motif. Anchored to the top-right of <main> and clipped there
   so the rings bleed off the corner and are cut flat at the nav's lower edge; sits behind
   the content (z-index -1). */
.project-archive-deco {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: min(720px, 64vw);
	height: 460px;
	overflow: hidden;
	opacity: 0.8;
	pointer-events: none;
}

.project-archive-deco__ring {
	position: absolute;
	border-radius: 50%;
	border: 2px solid rgba(114, 166, 183, 0.4);
	background: transparent;
}

/* Concentric — same centre (right: 60px, top: -40px from the corner), off the top-right. */
.project-archive-deco__ring--1 {
	width: 600px;
	height: 600px;
	top: -340px;
	right: -240px;
}

.project-archive-deco__ring--2 {
	width: 380px;
	height: 380px;
	top: -230px;
	right: -130px;
}

/* Azure network node riding the outer ring's upper-left arc, a little below the top. */
.project-archive-deco__node {
	position: absolute;
	top: 50px;
	right: 320px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, var(--woi-azure-200), var(--woi-azure) 60%, #5b8a99);
	box-shadow: 0 12px 24px -8px rgba(27, 20, 100, 0.35);
}

/* Faceted-filter band: a soft azure panel. Background is opaque (not a tint) so the
   decorative corner rings, which sit behind it, are covered where they overlap the well
   rather than showing through. Note it must NOT clip its overflow — open dropdowns escape
   past its bottom edge. */
.project-filters {
	position: relative;
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.5rem, 1rem + 3vw, 2.75rem);
	background: #dfecf5;
	border: 1px solid rgba(114, 166, 183, 0.32);
	border-radius: var(--woi-radius-lg);
}

.project-filters-heading {
	position: relative;
	z-index: 1;
	margin: 0 0 1.1rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

.project-filters-controls {
	position: relative;
	/* Above the chips row (z-index 1) so an open dropdown overlays the pips, not vice versa. */
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}

.project-filter {
	position: relative;
}

/* Dropdown toggle (revealed by filter.js): a white field with a rotating caret. */
.project-filter__toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.85rem 1.1rem;
	background: var(--woi-white);
	border: 1px solid rgba(27, 20, 100, 0.18);
	border-radius: 12px;
	color: var(--woi-indigo);
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 6px 16px -12px rgba(27, 20, 100, 0.5);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.project-filter__toggle:hover {
	border-color: var(--woi-azure);
}

.project-filter.is-open .project-filter__toggle,
.project-filter.has-selection .project-filter__toggle {
	border-color: var(--woi-indigo);
}

.project-filter__label {
	flex: 1;
}

.project-filter__count {
	font-weight: 700;
	color: var(--woi-azure);
}

.project-filter__caret {
	flex: none;
	width: 0.62em;
	height: 0.62em;
	margin-right: 0.15rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.18s ease;
}

.project-filter.is-open .project-filter__caret {
	transform: translateY(1px) rotate(-135deg);
}

/* Fieldset of checkboxes. Without JS it renders inline as a small white card; when
   filter.js enhances the form it becomes a dropdown anchored under the toggle. */
.project-filter__panel {
	margin: 0.5rem 0 0;
	padding: 0.6rem 0.9rem 0.75rem;
	background: var(--woi-white);
	border: 1px solid rgba(27, 20, 100, 0.14);
	border-radius: 12px;
}

.project-filter__panel legend {
	padding: 0 0 0.35rem;
	font-weight: 600;
	color: var(--woi-indigo);
}

.project-filter__panel ul {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 264px;
	overflow-y: auto;
}

.project-filter__panel li {
	margin: 0;
}

.project-filter__panel label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.55rem;
	border-radius: 8px;
	font-size: 0.98rem;
	color: var(--woi-ink);
	cursor: pointer;
}

.project-filter__panel label:hover {
	background: var(--woi-canvas);
}

.project-filter__panel input[type="checkbox"] {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--woi-indigo);
}

.is-enhanced .project-filter__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	z-index: 30;
	margin: 0;
	box-shadow: var(--woi-shadow-card);
}

/* The visible label lives on the toggle once enhanced — keep the legend for AT only. */
.is-enhanced .project-filter__panel legend {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Active-selection chips below the controls. */
.project-filter-chips {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.project-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.5rem 0.35rem 0.85rem;
	background: var(--woi-white);
	border: 1px solid rgba(27, 20, 100, 0.18);
	border-radius: var(--woi-radius-pill);
	color: var(--woi-indigo);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.18s ease;
}

.project-chip:hover,
.project-chip:focus {
	border-color: var(--woi-indigo);
}

.project-chip__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background: var(--woi-canvas);
	font-size: 1em;
	line-height: 1;
}

.project-chip--clear {
	padding-inline: 0.9rem;
	background: transparent;
	border-style: dashed;
}

.project-count {
	margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 1.5rem;
	font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 0.75rem + 2vw, 2rem);
	margin: 0 0 clamp(3rem, 2rem + 4vw, 5rem);
	padding: 0;
	list-style: none;
}

.project-card {
	display: flex;
}

/* filter.js toggles [hidden] on cards, the chip row and the enhanced toggles; the
   display rules above/below would otherwise defeat the attribute's display:none. */
.project-card[hidden],
.project-filter-chips[hidden],
.project-filter__toggle[hidden] {
	display: none;
}

.project-card > article {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
	background: var(--woi-card);
	border-radius: var(--woi-radius-lg);
	box-shadow: var(--woi-shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.project-card > article:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 50px -26px rgba(27, 20, 100, 0.6);
}

/* Brand-gradient network sphere popping out of a corner, alternating diagonally down the
   grid: odd cards carry it bottom-right, even cards top-left. Using opposite corners means
   two spheres never stack on the same side, so the pattern stays collision-free at any
   column count (3 / 2 / 1). */
.project-card > article::after {
	content: "";
	position: absolute;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--woi-gradient);
	box-shadow: 0 12px 24px -8px rgba(27, 20, 100, 0.45);
	opacity: 0.8;
	pointer-events: none;
	z-index: 2;
}

.project-card:nth-child(odd) > article::after {
	right: -12px;
	bottom: -12px;
}

.project-card:nth-child(even) > article::after {
	left: -12px;
	top: -12px;
}

.project-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 1rem;
}

.project-card-title {
	margin: 0;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
	font-weight: 500;
	line-height: 1.2;
}

.project-card-title a {
	color: var(--woi-indigo);
	text-decoration: none;
}

.project-card-title a:hover,
.project-card-title a:focus {
	color: var(--woi-azure);
}

.project-card-excerpt {
	flex: 1;
	color: rgba(31, 34, 51, 0.85);
	font-size: 1.05rem;
}

.project-card-excerpt p {
	margin: 0;
}

.project-card-more {
	align-self: flex-start;
	margin-top: 0.25rem;
	padding: 0.7rem 0.7rem 0.7rem 1.5rem;
	font-size: 1rem;
}

.project-no-results {
	margin: 2rem 0 clamp(3rem, 2rem + 4vw, 5rem);
	font-size: 1.1rem;
	color: var(--woi-ink);
}

/* ---------- Project profile (single project) ---------- */
.project-profile {
	padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 4vw, 5rem);
}

/* Hero: the back control sits in the left gutter beside the kicker / title / subtext stack. */
.project-hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1rem, 0.5rem + 2vw, 2.25rem);
	align-items: center;
}

.project-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--woi-button);
	color: var(--woi-white);
	box-shadow: var(--woi-shadow-soft);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.project-back svg {
	width: 1.3rem;
	height: 1.3rem;
}

.project-back:hover,
.project-back:focus {
	background: var(--woi-button-hover);
	color: var(--woi-white);
	transform: translateY(-1px);
}

.project-hero__kicker {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--woi-azure);
}

.project-hero__title {
	margin: 0;
	max-width: 22ch;
	font-size: clamp(2rem, 1.3rem + 3.2vw, 3.25rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--woi-indigo);
}

.project-hero__subtext {
	margin: 1rem 0 0;
	max-width: 68ch;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	color: var(--woi-ink);
}

/* Quick actions: a row of gradient pills under the hero. */
.project-actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* The pills share the full width of the row, each sized in proportion to its label. */
.project-action {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.5rem;
	border-radius: 11px;
	background: var(--woi-button);
	color: var(--woi-white);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.project-action:hover,
.project-action:focus {
	background: var(--woi-button-hover);
	color: var(--woi-white);
	transform: translateY(-1px);
}

.project-section {
	margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.project-section-title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: 800;
	color: var(--woi-indigo);
}

/* About: a white card carrying the network motif — an orbit arc cresting its top-right
   corner with a node riding the peak. The card sits above the arc, so only the crest shows. */
.project-about {
	position: relative;
}

/* Only the crest of the ring is wanted, so the element is a short window onto the top of
   a 520px circle — a wide, shallow arc rising out of the card's top edge. */
.project-about__orbit {
	position: absolute;
	z-index: 0;
	top: -52px;
	right: -20px;
	width: 520px;
	height: 52px;
	overflow: hidden;
	background: url("../images/about-rings.svg") top center / 520px 520px no-repeat;
	pointer-events: none;
}

/* Riding the peak of that arc: ring centre is 260px in from the card's right edge. */
.project-about__node {
	position: absolute;
	z-index: 2;
	top: -31px;
	right: 240px;
	width: 34px;
	height: 34px;
	transform: translate(50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, var(--woi-azure-200), var(--woi-azure) 60%, #5b8a99);
	box-shadow: 0 12px 24px -8px rgba(27, 20, 100, 0.45);
}

.project-about__card {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
	align-items: start;
	padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) clamp(1.5rem, 1rem + 2.5vw, 3rem);
	background: var(--woi-card);
	border: 2px solid rgba(114, 166, 183, 0.45);
	border-radius: var(--woi-radius-lg);
	box-shadow: var(--woi-shadow-card);
}

/* Without a logo the prose takes the full card width. */
.project-about__card--text {
	grid-template-columns: minmax(0, 1fr);
}

.project-about__media {
	width: clamp(120px, 14vw, 180px);
}

.project-about__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* A rule under the heading runs the width of the prose column, per the mockup. */
.project-about__title {
	padding-bottom: 0.9rem;
	border-bottom: 2px solid rgba(114, 166, 183, 0.5);
}

.project-description {
	font-size: 1.05rem;
	color: var(--woi-ink);
}

.project-description > :first-child {
	margin-top: 0;
}

.project-description > :last-child {
	margin-bottom: 0;
}

/* Resources: an icon tile beside the resource name, format and "View resource" cue,
   each row a single link, separated by hairlines. */
.project-resources__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.project-resource + .project-resource {
	border-top: 1px solid rgba(27, 20, 100, 0.18);
}

.project-resource__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
	align-items: center;
	padding: clamp(1rem, 0.75rem + 1vw, 1.5rem) 0;
	text-decoration: none;
}

.project-resource__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 14px;
	background: #dfecf5;
	color: var(--woi-azure);
	transition: background-color 0.18s ease;
}

.project-resource__icon svg {
	width: 3rem;
	height: 3rem;
}

.project-resource__link:hover .project-resource__icon,
.project-resource__link:focus .project-resource__icon {
	background: var(--woi-azure-200);
}

.project-resource__body {
	display: flex;
	flex-direction: column;
}

.project-resource__label {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--woi-indigo);
}

.project-resource__type {
	color: var(--woi-ink);
}

.project-resource__cue {
	color: var(--woi-azure);
}

.project-resource__link:hover .project-resource__label,
.project-resource__link:focus .project-resource__label {
	color: var(--woi-azure);
}

/* Tags: a soft azure bar of term pills closing the profile. */
.project-tags {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	padding: 1rem clamp(1.25rem, 1rem + 1.5vw, 2rem);
	background: #dfecf5;
	border-radius: var(--woi-radius);
}

.project-tags__label {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

.project-tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.project-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.1rem;
	border-radius: var(--woi-radius-pill);
	background: var(--woi-white);
	color: var(--woi-indigo);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.project-tag:hover,
.project-tag:focus {
	background: var(--woi-indigo);
	color: var(--woi-white);
}

.project-tag__icon {
	width: 1.1rem;
	height: 1.1rem;
}

/* ---------- Responsive ---------- */
/* ---------- Meet the Team ---------- */
.page-team {
	padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 4vw, 5rem);
}

.team-header {
	margin-bottom: clamp(2rem, 1.5rem + 3vw, 3.5rem);
}

.team-title {
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

.team-intro {
	max-width: 68ch;
	margin-top: 1.25rem;
	font-size: 1.1rem;
	color: var(--woi-ink);
}

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

.team-list__item {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3rem);
	align-items: start;
}

/* Avatar: a light-blue "bubble" ringed by a thin azure band, holding a bottom-anchored
   cut-out portrait (transparent PNG). The head rises slightly above the bubble's top edge
   while the body stays clipped to the circle. Members without a photo get the silhouette. */
.team-avatar {
	position: relative;
	display: block;
	width: 150px;
	height: 150px;
}

/* The bubble disc and its azure ring, painted behind the portrait. */
.team-avatar::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #d3e6ee;
	box-shadow: 0 0 0 3px #eef5f8, 0 0 0 5px var(--woi-azure-200), var(--woi-shadow-soft);
	z-index: 0;
}

/* Deterministic mask box, taller than the bubble so the head can pop out the top. The mask
   is the bubble circle (clipping the body/sides) unioned with a narrow upright ellipse that
   opens a channel for the head above the circle. */
.team-avatar__stage {
	position: absolute;
	left: 0;
	right: 0;
	top: -38px;
	height: 188px;
	z-index: 1;
	-webkit-mask:
		radial-gradient(circle 75px at 50% 113px, #000 98%, transparent 100%) 0 0 / 100% 100% no-repeat,
		radial-gradient(62px 82px at 50% 66px, #000 98%, transparent 100%) 0 0 / 100% 100% no-repeat;
	mask:
		radial-gradient(circle 75px at 50% 113px, #000 98%, transparent 100%) 0 0 / 100% 100% no-repeat,
		radial-gradient(62px 82px at 50% 66px, #000 98%, transparent 100%) 0 0 / 100% 100% no-repeat;
}

/* Scale the cut-out up and let its cropped waist drop below the bubble's clip, so the body
   fills to the rounded bottom (no flat edge) while the head rises out of the top. */
.team-avatar__img {
	position: absolute;
	left: 50%;
	bottom: -16%;
	transform: translateX(-50%);
	height: 128%;
	width: auto;
	max-width: none;
}

.team-avatar__placeholder {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	overflow: hidden;
	color: var(--woi-azure);
}

.team-avatar__placeholder svg {
	width: 58%;
	height: 58%;
}

.team-member__name {
	margin: 0 0 0.35rem;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 800;
	color: var(--woi-indigo);
}

.team-member__position {
	margin: 0 0 0.85rem;
	font-style: italic;
	font-size: 1.05rem;
	color: rgba(31, 35, 51, 0.72);
}

.team-member__desc {
	margin: 0 0 1.35rem;
	line-height: 1.55;
	color: var(--woi-ink);
}

.team-member__more {
	margin-top: 0.25rem;
}

/* Outline pill on the light canvas, with the double-chevron riding in a filled node. */
.button--secondary {
	padding: 0.7rem 0.7rem 0.7rem 1.4rem;
	background: var(--woi-white);
	color: var(--woi-indigo);
	border: 2px solid var(--woi-indigo);
	font-size: 1rem;
}

.button--secondary:hover,
.button--secondary:focus {
	background: var(--woi-indigo);
	color: var(--woi-white);
}

.button--secondary .button__chevron {
	background: var(--woi-indigo);
	color: var(--woi-white);
}

.button--secondary:hover .button__chevron,
.button--secondary:focus .button__chevron {
	background: var(--woi-white);
	color: var(--woi-indigo);
}

/* Orbit connector between rows: a hairline that fades toward the far end, with a node
   perched at one end — large indigo on the right of even rows, small azure on the left of
   odd rows — carrying the network motif down the list. */
.team-sep {
	position: relative;
	height: 2px;
	margin-block: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
	list-style: none;
}

.team-sep::before {
	content: "";
	position: absolute;
	inset: 0;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	border-radius: 2px;
	background: #75a5b6;
}

.team-sep::after {
	content: "";
	position: absolute;
	top: 50%;
	border-radius: 50%;
	transform: translateY(-50%);
}

.team-sep--right::after {
	right: 0;
	width: 28px;
	height: 28px;
	background: var(--woi-gradient);
	box-shadow: 0 12px 24px -8px rgba(27, 20, 100, 0.45);
}

.team-sep--left::after {
	left: 0;
	width: 28px;
	height: 28px;
	background: radial-gradient(circle at 0% 0%, #b7e3f1, #72a6b7);
	box-shadow: 0 8px 18px -8px rgba(27, 20, 100, 0.4);
}

/* ---------- Contact ("Let's connect") ---------- */
.page-contact {
	max-width: 880px;
	padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}

.contact-hero__kicker {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--woi-azure);
}

.contact-hero__title {
	margin: 0;
	font-size: clamp(2.25rem, 1.4rem + 4vw, 3.5rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--woi-indigo);
}

/* Inline status banner after a submit (success/error), driven by the redirect flag. */
.contact-status {
	margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	padding: 0.95rem 1.25rem;
	border-radius: 14px;
	border: 1px solid transparent;
	font-size: 1.05rem;
	font-weight: 600;
}

.contact-status:focus {
	outline: 3px solid var(--woi-azure);
	outline-offset: 2px;
}

.contact-status--success {
	color: #14532d;
	background: #e6f6ec;
	border-color: #b7e2c6;
}

.contact-status--error {
	color: #7f1d1d;
	background: #fdecec;
	border-color: #f3c2c2;
}

/* The contact banner sits between the note and the form; tighten its top gap there. */
.contact-message .contact-status {
	margin-top: clamp(1rem, 0.75rem + 1vw, 1.5rem);
	margin-bottom: 0;
}

/* Inside the sign-up band (a flex row) the banner takes its own full-width line. */
.contact-signup .contact-status {
	flex-basis: 100%;
	margin-top: 0;
}

/* Per-field validation: a red message under the field and a red border on the input. */
.contact-form__error {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #b42318;
}

.contact-form__field--error input,
.contact-form__field--error textarea,
.email-signup-form--error input[type="email"] {
	border-color: #d9534f;
}

.contact-form__field--error input:focus,
.contact-form__field--error textarea:focus,
.email-signup-form--error input[type="email"]:focus {
	border-color: #d9534f;
	box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.28);
}

/* The sign-up error sits on its own row under the inline input + button. */
.email-signup-form__error {
	flex-basis: 100%;
}

/* Honeypot: kept in the DOM for bots but removed from view and the a11y tree. */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-message {
	margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

.contact-message__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: 800;
	color: var(--woi-indigo);
}

.contact-message__note {
	margin: 0.4rem 0 0;
	font-size: 1.1rem;
	color: var(--woi-ink);
}

/* Form: stacked fields with bold navy labels over rounded, tinted-border inputs. */
.contact-form {
	margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.contact-form__field {
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.contact-form__field label {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--woi-indigo);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: 0.9rem 1.1rem;
	font-family: inherit;
	font-size: 1.05rem;
	color: var(--woi-ink);
	background: var(--woi-white);
	border: 2px solid var(--woi-azure-200);
	border-radius: 14px;
	box-shadow: var(--woi-shadow-soft);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.contact-form textarea {
	min-height: 170px;
	resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--woi-azure);
	box-shadow: 0 0 0 3px rgba(114, 166, 183, 0.35);
}

.contact-form__actions {
	margin: 0.5rem 0 0;
}

/* Stay-connected band: tinted rounded card, copy left, inline sign-up form right. */
.contact-signup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	margin-top: clamp(2.5rem, 1.75rem + 3vw, 4rem);
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: rgba(169, 212, 224, 0.22);
	border: 1px solid rgba(114, 166, 183, 0.35);
	border-radius: var(--woi-radius-lg);
}

.contact-signup__copy {
	flex: 1 1 15rem;
}

.contact-signup__kicker {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

.contact-signup__lead {
	margin: 0.15rem 0 0;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 700;
	color: var(--woi-indigo);
}

.email-signup-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
}

.email-signup-form input[type="email"] {
	flex: 1 1 16rem;
	min-width: 0;
	padding: 0.95rem 1.25rem;
	font-family: inherit;
	font-size: 1.05rem;
	color: var(--woi-ink);
	background: var(--woi-white);
	border: 1px solid rgba(114, 166, 183, 0.4);
	border-radius: 16px;
	box-shadow: var(--woi-shadow-soft);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.email-signup-form input[type="email"]::placeholder {
	color: #8a90a8;
}

.email-signup-form input[type="email"]:focus {
	outline: none;
	border-color: var(--woi-azure);
	box-shadow: 0 0 0 3px rgba(114, 166, 183, 0.35);
}

/* Solid, generously rounded indigo pill to match the sign-up mock. */
.email-signup-form__submit {
	padding: 0.95rem 2rem;
	border-radius: 16px;
}

/* ---------- Search results ---------- */
/* Same page furniture as the project archive: corner rings, an uppercase indigo title,
   then white result cards. The search box itself repeats the pill control used by the
   header disclosure and the sign-up form. */
.search .site-main > .container {
	padding-block-end: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.search-header {
	padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem) 0;
}

.search-header__kicker {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--woi-azure);
}

.search-header__title {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(2.25rem, 1.4rem + 4vw, 3.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

/* The query is the visitor's own text — keep its casing and tint it azure. */
.search-header__title span {
	text-transform: none;
	color: var(--woi-azure);
}

.search-header__count {
	margin: 0.85rem 0 0;
	font-size: 1.05rem;
	color: rgba(31, 34, 51, 0.75);
}

.search-header__count strong {
	color: var(--woi-indigo);
}

/* Refine field: one white pill holding the glyph, the input and the submit. */
.search-page-form {
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	max-width: 640px;
}

.search-page-form__control {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.4rem 0.4rem 0.4rem 1.15rem;
	background: var(--woi-card);
	border: 1px solid rgba(114, 166, 183, 0.32);
	border-radius: var(--woi-radius-pill);
	box-shadow: var(--woi-shadow-soft);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-page-form__control:focus-within {
	border-color: var(--woi-azure);
	box-shadow: 0 0 0 3px rgba(114, 166, 183, 0.35);
}

.search-page-form__icon {
	flex: none;
	color: var(--woi-azure);
}

.search-page-form__field {
	flex: 1;
	min-width: 0;
	padding-block: 0.75rem;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1.05rem;
	color: var(--woi-ink);
	appearance: none;
}

.search-page-form__field:focus {
	outline: none;
}

.search-page-form__field::-webkit-search-cancel-button {
	appearance: none;
}

.search-page-form__submit {
	flex: none;
	padding: 0.75rem 1.75rem;
	border-radius: var(--woi-radius-pill);
	font-size: 1rem;
}

/* Result cards: thumbnail rail on the left, badge + title + excerpt on the right. */
.search-results {
	display: grid;
	gap: 1.25rem;
	margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
}

.search-result {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	overflow: hidden;
	background: var(--woi-card);
	border-radius: var(--woi-radius);
	box-shadow: var(--woi-shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.search-result:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 50px -26px rgba(27, 20, 100, 0.6);
}

.search-result__media {
	display: block;
	min-height: 160px;
	background: linear-gradient(135deg, var(--woi-azure-200), var(--woi-violet));
}

.search-result__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Project marks are logos, not photography — show them whole on a plain ground. */
.search-result__media--contain {
	background: var(--woi-canvas);
}

.search-result__media--contain img {
	object-fit: contain;
	padding: 1rem;
}

/* Same branded fallback as the resource cards. */
.search-result__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		url("../images/web-impact-spark.png") center / 42% auto no-repeat,
		radial-gradient(120% 120% at 50% 30%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 62%),
		linear-gradient(135deg, #e4eff6, #cbd9f2);
}

.search-result__body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1.4rem 1.6rem 1.5rem;
}

.search-result__type {
	align-self: flex-start;
	padding: 0.2rem 0.8rem;
	border-radius: var(--woi-radius-pill);
	background: rgba(114, 166, 183, 0.18);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

.search-result__title {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 700;
}

.search-result__title a {
	color: var(--woi-indigo);
	text-decoration: none;
}

.search-result__title a:hover,
.search-result__title a:focus {
	text-decoration: underline;
}

.search-result__meta {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--woi-azure);
}

.search-result__excerpt {
	margin: 0;
	font-size: 0.98rem;
	color: rgba(31, 34, 51, 0.8);
}

.search-result__excerpt mark {
	padding: 0 0.15em;
	border-radius: 3px;
	background: rgba(169, 212, 224, 0.55);
	color: inherit;
	font-weight: 600;
}

/* Empty state: the azure well from the project filters, with pill shortcuts. */
.search-empty {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
	background: #dfecf5;
	border: 1px solid rgba(114, 166, 183, 0.32);
	border-radius: var(--woi-radius-lg);
}

.search-empty__lead {
	margin: 0 0 1.25rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--woi-indigo);
}

.search-empty__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-empty__links a {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.25rem;
	background: var(--woi-white);
	border: 1px solid rgba(27, 20, 100, 0.12);
	border-radius: var(--woi-radius-pill);
	font-weight: 600;
	color: var(--woi-indigo);
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.search-empty__links a:hover,
.search-empty__links a:focus {
	background: var(--woi-indigo);
	color: var(--woi-white);
}

/* ---------- Pagination (search results, archives) ---------- */
.pagination {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 0.9rem;
	background: var(--woi-card);
	border-radius: var(--woi-radius-pill);
	box-shadow: var(--woi-shadow-soft);
	font-weight: 600;
	color: var(--woi-indigo);
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus {
	background: var(--woi-azure-200);
	color: var(--woi-indigo);
}

.pagination .page-numbers.current {
	background: var(--woi-button);
	color: var(--woi-white);
}

.pagination .page-numbers.dots {
	background: transparent;
	box-shadow: none;
}

/* ---------- 404: page not found ---------- */
/* Same page furniture as search: the corner rings behind, an uppercase indigo title and
   the refine pill, plus shortcuts to the main sections. */
.error-404 {
	padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
	max-width: 720px;
}

/* Shrink-wrapped so the brand gradient sweeps the digits rather than the whole column. */
.error-404__numeral {
	display: inline-block;
	margin: 0 0 clamp(1rem, 0.5rem + 2vw, 1.75rem);
	font-family: var(--woi-font-display);
	font-size: clamp(5rem, 2rem + 16vw, 11rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	background: var(--woi-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	user-select: none;
}

.error-404__kicker {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--woi-azure);
}

.error-404__title {
	margin: 0;
	font-size: clamp(2.25rem, 1.4rem + 4vw, 3.75rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--woi-indigo);
}

.error-404__lead {
	margin: 1rem 0 0;
	max-width: 52ch;
	font-size: 1.1rem;
	color: rgba(31, 34, 51, 0.78);
}

.error-404__search {
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

/* Section shortcuts, matching the search empty state's pills. */
.error-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: clamp(1.5rem, 1rem + 2vw, 2.25rem) 0 0;
	padding: 0;
	list-style: none;
}

.error-404__links a {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.25rem;
	background: var(--woi-card);
	border: 1px solid rgba(27, 20, 100, 0.12);
	border-radius: var(--woi-radius-pill);
	box-shadow: var(--woi-shadow-soft);
	font-weight: 600;
	color: var(--woi-indigo);
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.error-404__links a:hover,
.error-404__links a:focus {
	background: var(--woi-indigo);
	color: var(--woi-white);
}

/* Result cards stack thumbnail-over-copy once the rail would squeeze the excerpt. */
@media (max-width: 780px) {
	.search-result {
		grid-template-columns: minmax(0, 1fr);
	}

	.search-result__media {
		min-height: 0;
		aspect-ratio: 16 / 7;
	}

	.search-result__media--contain {
		aspect-ratio: 16 / 6;
	}
}

@media (max-width: 520px) {
	.search-page-form__control {
		flex-wrap: wrap;
		padding: 0.5rem 0.5rem 0.5rem 1rem;
		border-radius: var(--woi-radius);
	}

	.search-page-form__submit {
		flex-basis: 100%;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.email-signup-form {
		flex-direction: column;
		align-items: stretch;
	}

	.email-signup-form__submit {
		justify-content: center;
	}
}

@media (max-width: 1199px) {
	.site-header__inner {
		flex-wrap: wrap;
	}

	/* Dissolve the nav wrapper so the toggle and panel become direct children of
	   the header row: the hamburger stays inline top-right with the logo, and the
	   panel wraps onto its own full-width row when opened. */
	.has-js-nav .site-header__nav {
		display: contents;
	}

	.has-js-nav .menu-toggle {
		display: block;
		margin-left: auto;
	}

	/* Collapse the panel behind the hamburger when JS is present. */
	.has-js-nav .site-header__panel {
		display: none;
		flex-basis: 100%;
		width: 100%;
		align-items: stretch;
		padding-top: 1rem;
	}

	.has-js-nav .is-nav-open .site-header__panel {
		display: flex;
	}

	.has-js-nav .site-header__top {
		justify-content: flex-start;
	}

	.has-js-nav .site-header__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.has-js-nav .primary-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	/* The dropdown is anchored to a toggle that now sits at the left edge, so its
	   panel would hang off-canvas — drop it into the menu flow instead. */
	.has-js-nav .header-search {
		width: 100%;
	}

	.has-js-nav .header-search__panel {
		position: static;
		width: 100%;
		padding: 0.75rem 0 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.has-js-nav .header-search__panel::before {
		display: none;
	}
}

@media (max-width: 900px) {
	.resource-grid,
	.project-grid,
	.learn-band .resource-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.project-filters-controls {
		grid-template-columns: 1fr;
	}

	.home-welcome__inner {
		grid-template-columns: 1fr;
		/* No orbit ring to clear once stacked, so drop the tall desktop padding. */
		padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	}

	/* The connector and orbit ring only read on the two-column layout. */
	.home-welcome__copy::before,
	.home-welcome__copy::after,
	.home-welcome__orbits {
		display: none;
	}

	.site-footer__cols {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-hero__inner {
		grid-template-columns: 1fr;
	}

	/* The featured image is an illustration beside the intro — drop it once the
	   hero stacks rather than pushing the copy down a full-width graphic. */
	.about-hero__media {
		display: none;
	}

	.about-card-wrap,
	.about-together__copy {
		margin-right: 0;
	}
}

@media (max-width: 540px) {
	.resource-grid,
	.project-grid,
	.learn-band .resource-grid {
		grid-template-columns: 1fr;
	}

	/* Decorative corner rings — drop them once the header/well stack tightly. */
	.project-archive-deco {
		display: none;
	}

	.site-footer__cols {
		grid-template-columns: 1fr;
	}

	.site-partner-logo {
		height: 40px;
	}

	.site-logo {
		height: 42px;
	}
}

/* Narrow phones: shrink the logo lockup and tighten its gaps so the branding and
   hamburger stay on one row rather than the toggle wrapping below. */
@media (max-width: 460px) {
	.site-header__inner {
		gap: 0.75rem;
		/* Tighter gutter than the page container so the lockup keeps its row. */
		padding-inline: 16px;
	}

	.site-branding {
		gap: 0.5rem;
	}

	.site-partner-logo {
		height: 26px;
		padding-left: 0.5rem;
	}

	.site-logo {
		height: 30px;
	}
}

/* Project profile stacks: logo above the prose, the two lists in one column, and the
   decorative orbit drops once the card has no room for a crest. */
@media (max-width: 700px) {
	/* The back control moves above the title rather than eating a column of it. */
	.project-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
		justify-items: start;
	}

	.project-hero__title {
		max-width: none;
	}

	.project-about__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-about__orbit,
	.project-about__node {
		display: none;
	}

	.project-resource__icon {
		width: 4rem;
		height: 4rem;
	}

	.project-resource__icon svg {
		width: 2rem;
		height: 2rem;
	}
}

/* Team rows stack and centre on narrow screens; the connector node re-centres too. */
@media (max-width: 640px) {
	.team-list__item {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 1.25rem;
		text-align: center;
	}

	/* Stacked rows are taller and the head pops up, so give the connectors more room. */
	.team-sep {
		margin-block: 4.75rem;
	}

	.team-sep--left::after,
	.team-sep--right::after {
		left: 50%;
		right: auto;
		transform: translate(-50%, -50%);
	}
}

/* ---------- Accessibility utilities ---------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
}

.skip-link:focus {
	left: 0;
	padding: 0.5rem 1rem;
	background: var(--woi-white);
	color: var(--woi-indigo);
	z-index: 1000;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}