/* Idaho AEYC theme skin: the "regional review" world from DESIGN-DNA.md.
   The one non-obvious decision this file embodies: every visual property that a
   pending brand affiliation audit (RFP 6E) could change lives in the :root token
   block below and nowhere else, so a new brand is a token edit rather than a
   rebuild. Vertical rhythm is likewise derived from a single fluid --line unit
   computed off the body type, so space keeps its authored ratio to the type at
   every viewport instead of drifting between breakpoints. */

/* ---- Tokens ------------------------------------------------------------- */

:root {
	/* Palette. Serviceberry is brand and structure ONLY: it never carries a
	   warning, error, deadline, or closure state. --ochre owns every status
	   color, and status is never signalled by color alone. */
	--paper: #f6f2ea;
	--paper-2: #ece4d6;
	--ink: #23211e;
	--serviceberry: #823859;
	--basalt: #4a555c;
	--ochre: #8a5a13;
	--room: #2a2422;

	/* Serviceberry as an OKLCH ramp: one hue, evenly stepped lightness, chroma
	   fitted down into sRGB. Every pair used below is contrast-checked in
	   DESIGN-DNA.md (accent-700 8.5:1 on paper, accent-200 10:1 on room).
	   Hue moved 13.27 -> 354 (2026-08-03): the red-wine reading sat inside
	   the OKLab collision threshold of two sibling builds' accents at once,
	   and the ripe berry is the purple end of the same fencerow anyway. */
	--accent-50: oklch(0.972 0.0155 354);
	--accent-100: oklch(0.936 0.0366 354);
	--accent-200: oklch(0.868 0.0805 354);
	--accent-300: oklch(0.780 0.1252 354);
	--accent-400: oklch(0.688 0.1481 354);
	--accent-500: oklch(0.594 0.1552 354);
	--accent-600: oklch(0.500 0.1538 354);
	--accent-700: oklch(0.410 0.1341 354);
	--accent-800: oklch(0.322 0.1148 354);
	--accent-900: oklch(0.238 0.0963 354);

	--rule: color-mix(in srgb, var(--basalt) 28%, transparent);
	--rule-strong: color-mix(in srgb, var(--basalt) 55%, transparent);

	--display: "Petrona", Georgia, "Times New Roman", serif;
	--body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Fluid scale solved between a 360px and a 1280px anchor: one continuous
	   curve, tighter ratio small, bolder ratio large, fine print floored. */
	--fs-100: clamp(0.8125rem, 0.7908rem + 0.0966vw, 0.875rem);
	--fs-200: clamp(0.875rem, 0.8533rem + 0.0966vw, 0.9375rem);
	--fs-300: clamp(0.9375rem, 0.9158rem + 0.0966vw, 1rem);
	--fs-400: clamp(1rem, 0.9565rem + 0.1932vw, 1.125rem);
	--fs-500: clamp(1.125rem, 1.0598rem + 0.2899vw, 1.3125rem);
	--fs-600: clamp(1.3125rem, 1.1821rem + 0.5797vw, 1.6875rem);
	--fs-700: clamp(1.5rem, 1.2609rem + 1.0628vw, 2.1875rem);
	--fs-800: clamp(1.8125rem, 1.3777rem + 1.9324vw, 3.0625rem);
	--fs-900: clamp(2.125rem, 1.4076rem + 3.1884vw, 4.1875rem);

	--leading-body: 1.62;
	--line: calc(var(--fs-400) * var(--leading-body));

	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;

	--measure: 66ch;
	--wrap: 76rem;
	--wrap-tight: 46rem;
}

/* ---- Base ---------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--fs-400);
	line-height: var(--leading-body);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.012em;
	margin: 0 0 calc(var(--line) * 0.5);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-800);
}

h2 {
	font-size: var(--fs-700);
}

h3 {
	font-size: var(--fs-500);
	line-height: 1.24;
}

h4 {
	font-size: var(--fs-400);
	line-height: 1.3;
}

p,
ul,
ol,
dl {
	margin: 0 0 var(--line);
	max-width: var(--measure);
}

p:last-child,
ul:last-child,
ol:last-child {
	margin-bottom: 0;
}

a {
	color: var(--accent-700);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

a:hover {
	color: var(--accent-800);
	text-decoration-thickness: 2px;
}

/* Doctrine 6: link history state is never styled differently anywhere in the fleet. */

:focus-visible {
	outline: 2px solid var(--accent-700);
	outline-offset: 2px;
	border-radius: 1px;
}

.band--room :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--accent-200);
}

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

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: var(--line) 0;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: var(--sp-4);
	top: -4rem;
	z-index: 60;
	background: var(--ink);
	color: var(--paper);
	padding: var(--sp-3) var(--sp-4);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	top: var(--sp-2);
	color: var(--paper);
}

/* ---- Motif: the bracket -------------------------------------------------- */

/* The editorial mark. Two-sided corner rules in pure CSS borders (no SVG),
   recurring as section eyebrows, answer frames, list markers, empty states,
   the 404, and hover/focus affordances. */

.eyebrow {
	font-family: var(--body);
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--basalt);
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 calc(var(--line) * 0.75);
	max-width: none;
}

.eyebrow::before {
	content: "";
	inline-size: 0.7em;
	block-size: 0.7em;
	border-left: 2px solid var(--serviceberry);
	border-top: 2px solid var(--serviceberry);
	flex: none;
	translate: 0 -0.12em;
}

.band--room .eyebrow {
	color: var(--accent-200);
}

.band--room .eyebrow::before {
	border-color: var(--accent-300);
}

.answer {
	position: relative;
	padding: calc(var(--line) * 0.9) 0 calc(var(--line) * 0.9) var(--sp-5);
	margin: 0 0 calc(var(--line) * 1.5);
	max-width: 54ch;
	font-size: var(--fs-500);
	line-height: 1.45;
}

.answer::before,
.answer::after {
	content: "";
	position: absolute;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	border: 0 solid var(--serviceberry);
}

.answer::before {
	inset-block-start: 0;
	inset-inline-start: 0;
	border-left-width: 2px;
	border-top-width: 2px;
}

.answer::after {
	inset-block-end: 0;
	inset-inline-start: 0;
	border-left-width: 2px;
	border-bottom-width: 2px;
}

.answer p {
	margin: 0;
	max-width: none;
}

.answer strong {
	font-weight: 600;
}

ul.bracket-list {
	list-style: none;
	padding: 0;
}

ul.bracket-list li {
	position: relative;
	padding-left: var(--sp-5);
	margin-bottom: calc(var(--line) * 0.4);
}

ul.bracket-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-left: 2px solid var(--serviceberry);
	border-top: 2px solid var(--serviceberry);
}

.band--room ul.bracket-list li::before {
	border-color: var(--accent-300);
}

.bracket-empty {
	position: relative;
	padding: var(--line) var(--sp-5);
	border-left: 2px solid var(--rule-strong);
	color: var(--basalt);
	font-size: var(--fs-300);
	max-width: 48ch;
}

.bracket-empty::before,
.bracket-empty::after {
	content: "";
	position: absolute;
	left: -2px;
	inline-size: 0.9rem;
	block-size: 0.9rem;
	border: 0 solid var(--serviceberry);
}

.bracket-empty::before {
	top: 0;
	border-left-width: 2px;
	border-top-width: 2px;
}

.bracket-empty::after {
	bottom: 0;
	border-left-width: 2px;
	border-bottom-width: 2px;
}

/* ---- Chrome: banner and masthead ---------------------------------------- */

.proto-banner {
	background: var(--room);
	color: var(--paper);
	font-size: var(--fs-100);
	letter-spacing: 0.04em;
	padding: var(--sp-2) var(--sp-4);
	text-align: center;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	container-type: scroll-state;
}

.site-header-inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: var(--sp-4);
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	flex-wrap: wrap;
}

.brand-lockup {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
	color: var(--ink);
	margin-right: auto;
	view-transition-name: brand-lockup;
}

.brand-mark img {
	inline-size: 2.75rem;
	block-size: auto;
}

.brand-wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.brand-wordmark strong {
	font-family: var(--display);
	font-size: var(--fs-600);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.brand-wordmark small {
	font-size: var(--fs-100);
	color: var(--basalt);
	letter-spacing: 0.03em;
	max-width: 22ch;
}

@container scroll-state(stuck: top) {
	.site-header {
		box-shadow: 0 1px 0 var(--rule), 0 8px 24px -18px rgb(35 33 30 / 0.5);
	}

	.brand-wordmark small {
		opacity: 0;
	}
}

/* ---- Chrome: omnibox ----------------------------------------------------- */

.omnibox {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0;
	flex: 1 1 20rem;
	max-width: 30rem;
	order: 3;
}

.omnibox input {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: var(--fs-300);
	padding: var(--sp-3) var(--sp-4);
	min-height: 2.75rem;
	border: 1px solid var(--rule-strong);
	border-right: 0;
	background: #fff;
	color: var(--ink);
}

.omnibox input::placeholder {
	color: var(--basalt);
	opacity: 1;
}

.omnibox button {
	font: inherit;
	font-size: var(--fs-200);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0 var(--sp-5);
	min-height: 2.75rem;
	border: 1px solid var(--accent-700);
	background: var(--accent-700);
	color: var(--paper);
	cursor: pointer;
}

.omnibox button:hover {
	background: var(--accent-800);
	border-color: var(--accent-800);
}

.omni-suggestions {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 2px);
	margin: 0;
	padding: 0;
	max-width: none;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--rule-strong);
	box-shadow: 0 18px 40px -28px rgb(35 33 30 / 0.75);
	max-height: 24rem;
	overflow-y: auto;
	z-index: 50;
	display: none;
}

.omni-suggestions:not(:empty) {
	display: block;
}

.omni-group {
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--basalt);
	padding: var(--sp-3) var(--sp-4) var(--sp-1);
	border-top: 1px solid var(--rule);
}

.omni-group:first-child {
	border-top: 0;
}

.omni-suggestions [role="option"] {
	padding: var(--sp-3) var(--sp-4);
	cursor: pointer;
	border-left: 2px solid transparent;
}

.omni-suggestions [role="option"]:hover,
.omni-suggestions [role="option"][aria-selected="true"] {
	background: var(--accent-50);
	border-left-color: var(--serviceberry);
}

.omni-opt-title {
	display: block;
	font-weight: 600;
	font-size: var(--fs-300);
}

.omni-opt-sub {
	display: block;
	font-size: var(--fs-200);
	color: var(--basalt);
}

.omni-ask .omni-opt-title::before {
	content: "Ask Idaho AEYC: ";
	color: var(--accent-700);
	font-weight: 600;
}

.omni-empty {
	padding: var(--sp-4);
	color: var(--basalt);
	font-size: var(--fs-300);
}

/* ---- Chrome: navigation -------------------------------------------------- */

.menu-btn {
	display: none;
	font: inherit;
	font-size: var(--fs-200);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	min-height: 2.75rem;
	padding: 0 var(--sp-4);
	background: transparent;
	border: 1px solid var(--rule-strong);
	color: var(--ink);
	cursor: pointer;
	order: 2;
}

.site-nav {
	order: 4;
	flex: 1 0 100%;
}

/* The nav register: each destination states what it answers, the way the
   contents homepage and the 404 do. Entries sit in equal columns under one
   hairline so the masthead reads as a table of contents rather than a menu. */
.nav-register {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	border-top: 1px solid var(--rule);
}

.nav-entry + .nav-entry {
	border-left: 1px solid var(--rule);
}

.nav-register a {
	display: block;
	height: 100%;
	padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
	min-height: 2.75rem;
	color: var(--ink);
	text-decoration: none;
	border-top: 2px solid transparent;
	margin-top: -1px;
}

.nav-entry-name {
	display: block;
	font-size: var(--fs-300);
	font-weight: 500;
	line-height: 1.2;
}

.nav-entry-answer {
	display: block;
	margin-top: 0.2em;
	font-size: var(--fs-100);
	line-height: 1.3;
	color: var(--basalt);
	text-wrap: balance;
}

.nav-register a:hover {
	color: var(--accent-800);
	border-top-color: var(--rule-strong);
	background: color-mix(in srgb, var(--serviceberry) 5%, transparent);
}

.nav-register a:hover .nav-entry-answer {
	color: var(--accent-800);
}

.nav-register a[aria-current="page"] {
	border-top-color: var(--serviceberry);
	color: var(--accent-800);
}

.nav-register a[aria-current="page"] .nav-entry-name {
	font-weight: 600;
}

.omnibox--mobile {
	display: none;
}

@media (max-width: 60rem) {
	.menu-btn {
		display: block;
	}

	.omnibox--desktop {
		order: 5;
		flex: 1 0 100%;
		max-width: none;
	}

	.site-nav .nav-register {
		display: none;
		grid-template-columns: minmax(0, 1fr);
	}

	.site-nav.open .nav-register {
		display: grid;
	}

	.nav-entry + .nav-entry {
		border-left: 0;
		border-top: 1px solid var(--rule);
	}

	.nav-register a {
		border-top: 0;
		border-left: 2px solid transparent;
		padding-left: var(--sp-3);
	}

	.nav-register a[aria-current="page"],
	.nav-register a:hover {
		border-left-color: var(--serviceberry);
	}
}

/* ---- Layout primitives --------------------------------------------------- */

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding-inline: var(--sp-4);
}

.wrap-tight {
	max-width: var(--wrap-tight);
	margin: 0 auto;
	padding-inline: var(--sp-4);
}

.band {
	padding-block: calc(var(--line) * 3);
	border-top: 1px solid var(--rule);
}

.band:first-child {
	border-top: 0;
}

.band--paper2 {
	background: var(--paper-2);
	border-top-color: transparent;
}

.band--room {
	background: var(--room);
	color: var(--paper);
	border-top-color: transparent;
}

.band--room a {
	color: var(--accent-200);
}

.band--room a:hover {
	color: #fff;
}

.band--room h2,
.band--room h3 {
	color: var(--accent-200);
}

/* Dark-room component overrides. The room is a register change, not a separate
   component set: any list, entry, caption, or meta line the light pages use can
   land inside a `.band--room`. Without these, `--ink` on `--room` renders at
   1.05:1 (the /providers/ resource list shipped that way) and `--basalt` meta
   at 1.99:1. Every pair below is checked against `--room` #2a2422. */
.band--room .entry-title a {
	color: var(--paper);
}

.band--room .entry-title a:hover {
	color: #fff;
}

/* Body copy in the room reads as quiet warm light, not as brand pink: the
   accent stays the meta/eyebrow register so it keeps meaning something.
   #c9c5be on --room is 8.8:1. */
.band--room .entry-body,
.band--room .entry-where,
.band--room .lede,
.band--room .region-note,
.band--room .shot figcaption {
	color: color-mix(in srgb, var(--paper) 78%, var(--room));
}

.band--room .entry-meta,
.band--room .figure-source {
	color: var(--accent-200);
}

.band--room .entry,
.band--room .entries--split .entry {
	border-color: color-mix(in srgb, var(--accent-200) 34%, transparent);
}

.band-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-5);
	flex-wrap: wrap;
	margin-bottom: calc(var(--line) * 1.25);
}

.band-head h2 {
	margin: 0;
}

.lede {
	font-size: var(--fs-500);
	line-height: 1.45;
	max-width: 58ch;
	margin-bottom: calc(var(--line) * 1.5);
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 2.75rem;
	padding: var(--sp-3) var(--sp-5);
	font-size: var(--fs-300);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--accent-700);
	background: var(--accent-700);
	color: var(--paper);
	cursor: pointer;
}

.btn:hover {
	background: var(--accent-800);
	border-color: var(--accent-800);
	color: var(--paper);
}

.btn--quiet {
	background: transparent;
	color: var(--accent-700);
	border-color: var(--rule-strong);
}

.btn--quiet:hover {
	background: var(--accent-50);
	color: var(--accent-800);
	border-color: var(--accent-700);
}

.band--room .btn {
	background: var(--accent-200);
	border-color: var(--accent-200);
	color: var(--room);
}

.band--room .btn:hover {
	background: #fff;
	border-color: #fff;
	color: var(--room);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--line);
}

/* ---- Photo system: wide and captioned ------------------------------------ */

/* One treatment site-wide: documentary photography at full column or full
   bleed, always captioned in the meta register, never tilted or framed and
   never a uniform thumbnail grid. */

.shot {
	margin: 0 0 var(--line);
}

.shot img {
	inline-size: 100%;
	object-fit: cover;
	background: var(--paper-2);
}

.shot figcaption {
	font-size: var(--fs-100);
	letter-spacing: 0.04em;
	color: var(--basalt);
	padding-top: var(--sp-2);
	border-top: 1px solid var(--rule);
	margin-top: var(--sp-2);
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

.shot figcaption .credit {
	color: var(--basalt);
	opacity: 0.85;
}

/* Frame ratios exist to MATCH the sources rather than to impose a house
   rectangle: Idaho AEYC's own photography is mostly panoramic banner crops
   between 2:1 and 4.5:1, so each frame below is picked to keep at least four
   fifths of its source rather than cropping a wide photo into a tall box. */

.shot--portrait img {
	aspect-ratio: 2 / 3;
}

.shot--wide img {
	aspect-ratio: 16 / 9;
}

.shot--half img {
	aspect-ratio: 3 / 2;
}

.shot--pan img {
	aspect-ratio: 21 / 9;
}

.shot--strip img {
	aspect-ratio: 3 / 1;
}

.shot--band img {
	aspect-ratio: 9 / 2;
}

.shot--bleed {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}

.shot--bleed img {
	aspect-ratio: 21 / 9;
}

.shot--bleed figcaption {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

/* Type over photography always sits on a scrim tuned to clear AA against the
   busiest region the words cross (doctrine 4). */
.shot--scrim {
	position: relative;
	isolation: isolate;
}

.shot--scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(35 33 30 / 0.86) 0%,
		rgb(35 33 30 / 0.62) 42%,
		rgb(35 33 30 / 0.12) 100%
	);
	pointer-events: none;
}

.shot--scrim .shot-caption-over {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--sp-5);
	color: #fff;
}

/* Embedded video (RFP 6D). Framed exactly like a photograph so the media
   system stays one system, and served from youtube-nocookie so a visitor is
   not tracked for watching an Idaho AEYC video on an Idaho AEYC page. */
.video {
	margin: 0 0 var(--line);
}

.video-frame {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sp-2);
	aspect-ratio: 16 / 8;
	padding: calc(var(--line) * 1.3) var(--sp-7);
	background: linear-gradient(150deg, var(--accent-900) 0%, var(--room) 58%);
	color: var(--paper);
}

/* The bracket, at video scale: the mark that says "the part that matters". */
.video-frame::before,
.video-frame::after {
	content: "";
	position: absolute;
	inline-size: 2rem;
	block-size: 2rem;
	border: 0 solid var(--accent-300);
}

.video-frame::before {
	inset-block-start: var(--sp-5);
	inset-inline-start: var(--sp-5);
	border-inline-start-width: 2px;
	border-block-start-width: 2px;
}

.video-frame::after {
	inset-block-end: var(--sp-5);
	inset-inline-end: var(--sp-5);
	border-inline-end-width: 2px;
	border-block-end-width: 2px;
}

.video-kicker {
	margin: 0;
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-200);
}

.video-title {
	margin: 0;
	font-family: var(--display);
	font-size: var(--fs-700);
	font-weight: 600;
	line-height: 1.1;
	max-width: 20ch;
	color: var(--paper);
}

.video-actions {
	margin: var(--sp-2) 0 0;
}

.video-note {
	margin: 0;
	font-size: var(--fs-100);
	letter-spacing: 0.04em;
	color: var(--accent-200);
}

.video iframe {
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	block-size: auto;
	border: 0;
	display: block;
	background: var(--room);
}

.video figcaption {
	font-size: var(--fs-100);
	letter-spacing: 0.04em;
	color: var(--basalt);
	padding-top: var(--sp-2);
	border-top: 1px solid var(--rule);
	margin-top: var(--sp-2);
}

/* ---- The contents spread (homepage signature structure) ------------------ */

.contents {
	padding-block: calc(var(--line) * 2.25) calc(var(--line) * 3);
}

.contents-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: calc(var(--line) * 1.5) var(--sp-7);
	align-items: start;
}

.contents-mission {
	font-family: var(--display);
	font-size: var(--fs-700);
	line-height: 1.18;
	letter-spacing: -0.014em;
	margin: 0 0 calc(var(--line) * 1.25);
	max-width: 22ch;
	text-wrap: balance;
}

.contents-sub {
	font-size: var(--fs-400);
	color: var(--basalt);
	max-width: 46ch;
	margin-bottom: calc(var(--line) * 1.25);
}

.contents-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	border-top: 1px solid var(--rule);
}

.contents-list li {
	border-bottom: 1px solid var(--rule);
}

.contents-list a {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: var(--sp-2) var(--sp-5);
	align-items: baseline;
	padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
	text-decoration: none;
	color: var(--ink);
	border-left: 2px solid transparent;
	margin-left: -2px;
	min-height: 2.75rem;
}

.contents-list a:hover {
	border-left-color: var(--serviceberry);
	background: color-mix(in srgb, var(--paper-2) 55%, transparent);
	color: var(--ink);
}

.contents-name {
	font-family: var(--display);
	font-size: var(--fs-500);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.contents-list a:hover .contents-name {
	color: var(--accent-800);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.contents-answer {
	font-size: var(--fs-300);
	color: var(--basalt);
	line-height: 1.5;
}

.contents-figure {
	position: sticky;
	top: calc(var(--line) * 6);
}

.contents-count {
	font-size: var(--fs-200);
	color: var(--basalt);
	letter-spacing: 0.04em;
	margin: var(--line) 0 0;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--rule);
	max-width: 44ch;
}

@media (max-width: 60rem) {
	.contents-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.contents-figure {
		position: static;
		order: -1;
	}

	.contents-list a {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- The router: two questions ------------------------------------------- */

.router {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: var(--sp-7);
	align-items: start;
}

.router-form fieldset {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 0 0 var(--line);
	padding: var(--sp-4) 0 0;
}

.router-form legend {
	font-family: var(--display);
	font-size: var(--fs-500);
	font-weight: 600;
	padding: 0 var(--sp-3) 0 0;
	margin-bottom: var(--sp-2);
}

.router-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.router-options a,
.router-options button {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var(--sp-2) var(--sp-4);
	font: inherit;
	font-size: var(--fs-300);
	text-decoration: none;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--rule-strong);
	cursor: pointer;
}

.router-options a:hover,
.router-options button:hover {
	border-color: var(--accent-700);
	color: var(--accent-800);
	background: var(--accent-50);
}

.router-options [aria-current="true"],
.router-options [aria-pressed="true"] {
	background: var(--accent-700);
	border-color: var(--accent-700);
	color: var(--paper);
	font-weight: 600;
}

.router-options [aria-current="true"]:hover,
.router-options [aria-pressed="true"]:hover {
	background: var(--accent-800);
	border-color: var(--accent-800);
	color: var(--paper);
}

.router-answer {
	border-left: 2px solid var(--serviceberry);
	padding: 0 0 0 var(--sp-5);
	position: relative;
}

/* Consecutive answers need real air, or the closing bracket of one lands on
   the opening bracket of the next and the motif reads as noise. */
.router-answer + .router-answer,
.result-group + .router-answer {
	margin-top: calc(var(--line) * 2.25);
}

.router-answer::before,
.router-answer::after {
	content: "";
	position: absolute;
	left: -2px;
	inline-size: 1rem;
	block-size: 1rem;
	border: 0 solid var(--serviceberry);
}

.router-answer::before {
	top: 0;
	border-left-width: 2px;
	border-top-width: 2px;
}

.router-answer::after {
	bottom: 0;
	border-left-width: 2px;
	border-bottom-width: 2px;
}

.router-answer h3 {
	font-size: var(--fs-600);
	margin-bottom: calc(var(--line) * 0.4);
}

.router-answer .answer-body {
	font-size: var(--fs-450, var(--fs-400));
	max-width: 56ch;
}

.router-step {
	margin-top: var(--line);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--rule);
}

.router-step-label {
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--basalt);
	margin-bottom: var(--sp-2);
}

.router-contact {
	font-size: var(--fs-300);
	color: var(--basalt);
	margin-top: var(--sp-3);
}

.router-matrix {
	margin-top: calc(var(--line) * 2);
}

.router-matrix h2 {
	font-size: var(--fs-600);
}

@media (max-width: 60rem) {
	.router {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--line) * 1.5);
	}
}

/* ---- Editorial entries (events, news, resources, documents, people) ------ */

.entries {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	border-top: 1px solid var(--rule);
}

.entry {
	display: grid;
	grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
	gap: var(--sp-2) var(--sp-5);
	padding: var(--line) 0;
	border-bottom: 1px solid var(--rule);
	align-items: start;
}

.entry-meta {
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--basalt);
	padding-top: 0.3em;
}

.entry-meta .entry-day {
	display: block;
	font-family: var(--display);
	font-size: var(--fs-600);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--serviceberry);
	line-height: 1;
	margin-bottom: var(--sp-1);
}

.entry-title {
	font-family: var(--display);
	font-size: var(--fs-500);
	font-weight: 600;
	line-height: 1.22;
	margin: 0 0 var(--sp-2);
}

.entry-title a {
	color: var(--ink);
	text-decoration: none;
}

.entry-title a:hover {
	color: var(--accent-800);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.entry-body {
	color: var(--basalt);
	font-size: var(--fs-300);
	max-width: 62ch;
	margin: 0;
}

.entry-where {
	font-size: var(--fs-200);
	color: var(--basalt);
	margin: var(--sp-2) 0 0;
}

/* Lists whose rail carries a category word rather than a date: a single long
   label ("Collaboratives") has no break opportunity and overruns the 7rem
   date rail into the body column. */
.entries--label .entry {
	grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
}

.entry--photo {
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
}

.entry--photo .shot,
.entry--portrait .shot {
	margin: 0;
}

.entry--portrait {
	grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
	align-items: center;
}

@media (max-width: 44rem) {
	.entry,
	.entry--photo {
		grid-template-columns: minmax(0, 1fr);
	}

	.entry-meta .entry-day {
		display: inline;
		margin-right: var(--sp-2);
	}
}

/* Two-column reading list used for resource pages: still rows, not cards. */
.entries--split {
	columns: 2;
	column-gap: var(--sp-7);
	border-top: 0;
}

.entries--split .entry {
	break-inside: avoid;
	grid-template-columns: minmax(0, 1fr);
	border-top: 1px solid var(--rule);
	border-bottom: 0;
	padding-block: calc(var(--line) * 0.75);
}

@media (max-width: 52rem) {
	.entries--split {
		columns: 1;
	}
}

/* ---- Figures (the case, stats) ------------------------------------------- */

.figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: calc(var(--line) * 1.25) var(--sp-6);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.figure-num {
	display: block;
	font-family: var(--display);
	font-size: var(--fs-800);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--accent-200);
	margin-bottom: calc(var(--line) * 0.45);
}

.band--room .figure-label {
	color: var(--paper);
}

.figure-label {
	font-size: var(--fs-300);
	line-height: 1.4;
	color: var(--basalt);
	max-width: 26ch;
}

.band:not(.band--room) .figure-num {
	color: var(--serviceberry);
}

.figure-source {
	font-size: var(--fs-100);
	letter-spacing: 0.04em;
	opacity: 0.8;
	margin-top: var(--line);
}

/* ---- Collaboratives, map, regions ---------------------------------------- */

.map-shell {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--sp-7);
	align-items: start;
}

.map-figure {
	background: var(--paper-2);
	border: 1px solid var(--rule);
	padding: var(--sp-4);
}

.map-stage {
	position: relative;
}

.map-figure canvas {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

.map-marker-layer {
	position: absolute;
	inset: 0;
}

/* Markers are the bracket motif at map scale: a corner mark rather than a pin,
   so the map reads as part of the same editorial system. 44px hit area, well
   past the 24px clearance floor, because these sit close together. */
.map-marker {
	position: absolute;
	translate: -50% -50%;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.map-marker::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	inline-size: 0.85rem;
	block-size: 0.85rem;
	/* An actual corner bracket, not a filled square. The comment above claimed
	   the motif for years while the rule drew a box; the 2026-08-03 critique
	   saw the box. Selection fills it, so pressed state still reads at a
	   glance against the county fill. */
	border: 0 solid var(--serviceberry);
	border-left-width: 2.5px;
	border-top-width: 2.5px;
	background: transparent;
}

.map-marker:hover::before,
.map-marker[aria-pressed="true"]::before {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	border-width: 2.5px;
	background: var(--serviceberry);
}

/* No nested scroller: the region panel is the map's twin, and a second
   scrollbar inside the page is exactly the wayfinding problem this build is
   supposed to be fixing. */
.region-panel > :last-child {
	margin-bottom: 0;
}

.directory {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	border-top: 1px solid var(--rule);
}

.directory li {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.9fr);
	gap: var(--sp-2) var(--sp-5);
	align-items: baseline;
	padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--rule);
	border-left: 2px solid transparent;
	margin-left: -2px;
	font-size: var(--fs-300);
}

.directory li:hover {
	border-left-color: var(--serviceberry);
	background: color-mix(in srgb, var(--paper-2) 50%, transparent);
}

.directory .dir-name {
	font-family: var(--display);
	font-size: var(--fs-400);
	font-weight: 600;
	line-height: 1.25;
}

.directory .dir-where,
.directory .dir-extra {
	color: var(--basalt);
	font-size: var(--fs-200);
}

@media (max-width: 44rem) {
	.directory li {
		grid-template-columns: minmax(0, 1fr);
	}
}

.region-group {
	margin-bottom: var(--line);
}

.region-heading {
	font-size: var(--fs-500);
	margin-bottom: var(--sp-1);
}

.region-note {
	font-size: var(--fs-200);
	color: var(--basalt);
	margin-bottom: var(--sp-3);
}

.region-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.region-list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--fs-200);
	text-decoration: none;
	color: var(--ink);
	border: 1px solid var(--rule);
}

.region-list a:hover,
.region-list a[aria-current="true"] {
	border-color: var(--serviceberry);
	color: var(--accent-800);
	background: var(--accent-50);
}

.map-legend {
	font-size: var(--fs-200);
	color: var(--basalt);
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--rule);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.map-legend::before {
	content: "";
	inline-size: 0.55rem;
	block-size: 0.55rem;
	border-left: 2px solid var(--serviceberry);
	border-top: 2px solid var(--serviceberry);
	flex: none;
}

.region-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0 0 var(--line);
	padding: 0;
	max-width: none;
}

.region-filters a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 2.75rem;
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-300);
	text-decoration: none;
	color: var(--ink);
	border: 1px solid var(--rule-strong);
}

.region-filters a:hover {
	border-color: var(--accent-700);
	color: var(--accent-800);
	background: var(--accent-50);
}

.region-filters a[aria-current="true"] {
	background: var(--accent-700);
	border-color: var(--accent-700);
	color: var(--paper);
	font-weight: 600;
}

.region-filters .count {
	font-size: var(--fs-100);
	opacity: 0.75;
}

.collab-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	border-top: 1px solid var(--rule);
}

.collab-card {
	border-bottom: 1px solid var(--rule);
	padding: var(--line) 0 var(--line) var(--sp-4);
	border-left: 2px solid transparent;
	margin-left: -2px;
}

/* The map's selection has to be visible on BOTH collaborative surfaces. The
   all-regions view renders `.directory` rows, not `.collab-card`s, so styling
   only the card left the signature interaction with no persistent feedback
   there: pressing a marker scrolled to the row and then looked like nothing
   had happened. */
.directory li.is-selected {
	border-left-color: var(--serviceberry);
	background: color-mix(in srgb, var(--paper-2) 60%, transparent);
}

.collab-card.is-selected {
	border-left-color: var(--serviceberry);
	background: color-mix(in srgb, var(--paper-2) 60%, transparent);
}

.collab-card h3 {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-500);
}

.collab-card .collab-region {
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--basalt);
	display: block;
	margin-bottom: var(--sp-2);
}

.collab-card p {
	color: var(--basalt);
	font-size: var(--fs-300);
	max-width: 60ch;
}

@media (max-width: 60rem) {
	.map-shell {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Search page --------------------------------------------------------- */

.search-intro {
	color: var(--basalt);
	font-size: var(--fs-300);
	margin-bottom: var(--line);
}

.result-group {
	font-family: var(--display);
	font-size: var(--fs-500);
	font-weight: 600;
	margin: calc(var(--line) * 1.5) 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--rule);
}

.result-row {
	display: block;
	padding: var(--sp-4) 0 var(--sp-4) var(--sp-4);
	border-bottom: 1px solid var(--rule);
	border-left: 2px solid transparent;
	margin-left: -2px;
	text-decoration: none;
	color: var(--ink);
}

.result-row:hover {
	border-left-color: var(--serviceberry);
	background: color-mix(in srgb, var(--paper-2) 55%, transparent);
	color: var(--ink);
}

.result-row strong {
	font-family: var(--display);
	font-size: var(--fs-500);
	font-weight: 600;
	display: block;
	margin-bottom: var(--sp-1);
}

.r-kind {
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--basalt);
	display: block;
	margin-bottom: var(--sp-1);
}

.ask-answer {
	border-left: 2px solid var(--serviceberry);
	padding-left: var(--sp-5);
	margin-bottom: calc(var(--line) * 1.5);
	max-width: 62ch;
}

.ask-answer h2 {
	font-size: var(--fs-600);
}

.ask-sources {
	list-style: none;
	padding: 0;
	margin: var(--line) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	max-width: none;
}

.ask-sources a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-200);
	border: 1px solid var(--rule-strong);
	text-decoration: none;
	color: var(--accent-700);
}

.ask-sources a:hover {
	border-color: var(--accent-700);
	background: var(--accent-50);
}

/* ---- Forms --------------------------------------------------------------- */

.form-grid {
	display: grid;
	gap: var(--sp-4);
	max-width: 34rem;
}

label {
	font-size: var(--fs-300);
	font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
	font: inherit;
	font-size: var(--fs-300);
	width: 100%;
	min-height: 2.75rem;
	padding: var(--sp-3);
	border: 1px solid var(--rule-strong);
	background: #fff;
	color: var(--ink);
}

.field-note {
	font-size: var(--fs-200);
	color: var(--basalt);
}

.form-status {
	margin-top: var(--sp-4);
	padding: var(--sp-4);
	border-left: 3px solid var(--ochre);
	background: color-mix(in srgb, var(--ochre) 10%, transparent);
	font-size: var(--fs-300);
	display: none;
}

.form-status.is-shown {
	display: block;
}

/* A paragraph, not a bare div: this carries buyer-facing prose, so it has to
   read as text to assistive tech and to the layout-rhythm edge walk alike. */
.notice {
	border-left: 3px solid var(--ochre);
	padding: var(--sp-3) var(--sp-4);
	background: color-mix(in srgb, var(--ochre) 10%, transparent);
	font-size: var(--fs-300);
	max-width: 60ch;
	margin: var(--sp-5) 0 0;
}

/* ---- 404 ----------------------------------------------------------------- */

/* The bracket carries its own 1.5-line inset below the lede, so the section's
   bottom padding is shorter than its top — otherwise the two stack into a
   runaway gap before the contents list. */
.page-404 {
	padding-block: calc(var(--line) * 4) calc(var(--line) * 2);
}

.big-bracket {
	position: relative;
	padding: calc(var(--line) * 1.5) 0 calc(var(--line) * 1.5) var(--sp-7);
	max-width: 40ch;
}

.big-bracket::before,
.big-bracket::after {
	content: "";
	position: absolute;
	left: 0;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border: 0 solid var(--serviceberry);
}

.big-bracket::before {
	top: 0;
	border-left-width: 3px;
	border-top-width: 3px;
}

.big-bracket::after {
	bottom: 0;
	border-left-width: 3px;
	border-bottom-width: 3px;
}

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
	background: var(--room);
	color: var(--paper);
	padding-block: calc(var(--line) * 2.5) calc(var(--line) * 1.5);
	margin-top: calc(var(--line) * 2);
}

.site-footer h2 {
	font-size: var(--fs-600);
	color: var(--accent-200);
}

.site-footer h3 {
	font-size: var(--fs-200);
	font-family: var(--body);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-200);
	margin-bottom: var(--sp-3);
}

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: calc(var(--line) * 1.25) var(--sp-6);
}

.site-footer p {
	font-size: var(--fs-300);
	color: color-mix(in srgb, var(--paper) 82%, var(--room));
	max-width: 34ch;
}

/* The footer is a dark room, so it re-points link color at the light end of
   the ramp; the default accent-700 would land near 1.6:1 down here. */
.site-footer a {
	color: var(--accent-200);
}

.site-footer a:hover {
	color: #fff;
}

.footer-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.footer-nav li {
	margin-bottom: var(--sp-1);
}

.footer-nav a {
	display: inline-block;
	padding: var(--sp-1) 0;
	min-height: 1.75rem;
	font-size: var(--fs-300);
	text-decoration: none;
}

.footer-nav a:hover {
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.footer-signup {
	display: flex;
	gap: 0;
	max-width: 20rem;
}

.footer-signup input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.75rem;
	border-right: 0;
}

.footer-signup button {
	font: inherit;
	font-size: var(--fs-200);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	min-height: 2.75rem;
	padding: 0 var(--sp-4);
	border: 1px solid var(--accent-200);
	background: var(--accent-200);
	color: var(--room);
	cursor: pointer;
}

.footer-signup button:hover {
	background: #fff;
	border-color: #fff;
}

.footer-fine {
	margin-top: calc(var(--line) * 1.5);
	padding-top: var(--sp-4);
	border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
	display: flex;
	justify-content: space-between;
	gap: var(--sp-5);
	flex-wrap: wrap;
	font-size: var(--fs-100);
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--paper) 74%, var(--room));
}

@media (max-width: 60rem) {
	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 36rem) {
	.footer-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Motion -------------------------------------------------------------- */

/* Every animated rule lives inside the no-preference query, so the still
   version is the default and motion is the opt-in (doctrine constant 5). */

@media (prefers-reduced-motion: no-preference) {
	:root {
		--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	}

	.nav-register a,
	.contents-list a,
	.result-row,
	.collab-card,
	.entry-title a,
	.btn,
	.omnibox button,
	.router-options a,
	.router-options button,
	.region-filters a {
		transition:
			background-color 160ms var(--ease),
			border-color 160ms var(--ease),
			color 160ms var(--ease);
	}

	.brand-wordmark small,
	.site-header {
		transition:
			opacity 180ms var(--ease),
			box-shadow 180ms var(--ease);
	}

	.eyebrow::before,
	ul.bracket-list li::before {
		transition:
			inline-size 160ms var(--ease),
			block-size 160ms var(--ease);
	}

	.contents-list a:hover .contents-name {
		letter-spacing: -0.006em;
	}

	@view-transition {
		navigation: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none;
	}
}

/* ---- Print --------------------------------------------------------------- */

@media print {
	.proto-banner,
	.site-header,
	.site-footer,
	.skip-link,
	.omnibox,
	.region-filters,
	.router-form {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.band {
		padding-block: 0.75rem;
	}

	.band--room {
		background: #fff;
		color: #000;
	}

	.band--room h2,
	.band--room h3,
	.figure-num {
		color: #000;
	}

	a {
		color: #000;
	}
}


/* ---- Corrections from the 2026-08-03 independent critique ---------------- */

/* At 390px the masthead placeholder measured 263px into 214px of usable field
   and truncated to "Search child care, training,". The string is the one the
   DESIGN-DNA commits to, so the type gives way instead of the copy. */
@media (max-width: 26rem) {
	.omnibox input {
		font-size: 0.8rem;
		padding-inline: 0.62rem;
	}
}

/* The last band on /collaboratives/ is a dark room and the footer is the same
   warm dark, so the 58px of paper between them read as a seam rather than a
   register change. Butt them together when they meet. */
main:has(> .band--room:last-child) + .site-footer {
	margin-top: 0;
}

/* The masthead was the one surface the motif never reached, which is exactly
   what "bones versus skin" is meant to catch: the nav sentence described any
   civic template. Rather than bolt a mark onto the client's own logo, the
   current-page indicator becomes a real corner bracket — the nav already drew
   the top rule, so it only ever needed its left arm. */
.nav-register a {
	border-left: 2px solid transparent;
}

.nav-register a[aria-current="page"] {
	border-left-color: var(--serviceberry);
}



/* A band's own bottom padding already sets the distance to the next band, so a
   last child that also carries a bottom margin doubles it. On the opening
   wrap-tight band the .answer block did exactly that: 83px of padding plus
   42px of margin read as 125px of dead space at 960px, which the rendered
   layout-rhythm probe flags as a runaway section gap on most routes. */
.band > :last-child,
.band > .wrap > :last-child,
.band > .wrap-tight > :last-child {
	margin-block-end: 0;
}