/*
 * KYISA 2026 design system
 *
 *  1. Tokens
 *  2. Base
 *  3. Typography
 *  4. Layout
 *  5. Decorative devices
 *  6. Components
 *  7. Sections
 *  8. Page systems
 *  9. Footer
 * 10. Utilities
 *
 * Color rule that governs the whole system: gold is bright, so it never
 * carries white text. Gold surfaces take ink; gold as text only appears on
 * deep or forest green. Every pairing used here is verified at AA.
 */

/* ------------------------------------------------------------- 1. Tokens */

:root {
	/* Brand */
	--deep: #073a26;
	--forest: #124732;
	--leaf: #a3d562;
	--gold: #f2a123;
	--cream: #f4f0e4;
	--warm-white: #faf9f5;
	--ink: #152019;

	/* Derived surfaces and lines */
	--deep-2: #0a4a30;
	--forest-hover: #0d3a29;
	--gold-hover: #dd8f16;
	--leaf-deep: #7fb043;
	--cream-2: #ece7d7;
	--white: #fff;

	--text: var(--ink);
	--text-muted: #4a5a4f;
	--text-on-dark: #f1efe6;
	--text-on-dark-muted: rgba(241, 239, 230, 0.76);

	--surface: var(--warm-white);
	--surface-raised: var(--white);
	--surface-cream: var(--cream);
	--surface-deep: var(--deep);
	--surface-forest: var(--forest);

	--line: #dcd6c5;
	--line-strong: #bfb8a3;
	--line-on-dark: rgba(163, 213, 98, 0.28);
	--focus: #0b5cff;

	/* Type */
	--font-sans: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-serif: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", serif;

	--step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
	--step--1: clamp(0.84rem, 0.81rem + 0.12vw, 0.9rem);
	--step-0: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
	--step-1: clamp(1.19rem, 1.13rem + 0.3vw, 1.38rem);
	--step-2: clamp(1.41rem, 1.31rem + 0.52vw, 1.75rem);
	--step-3: clamp(1.68rem, 1.5rem + 0.9vw, 2.22rem);
	--step-4: clamp(2rem, 1.7rem + 1.5vw, 2.81rem);
	--step-5: clamp(2.38rem, 1.9rem + 2.4vw, 3.58rem);
	--step-6: clamp(2.83rem, 2.06rem + 3.85vw, 4.55rem);
	--step-7: clamp(3.36rem, 2.1rem + 6.3vw, 5.78rem);

	/* Space */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 14px;

	--shadow-sm: 0 1px 2px rgba(7, 58, 38, 0.05), 0 2px 6px rgba(7, 58, 38, 0.05);
	--shadow: 0 4px 12px rgba(7, 58, 38, 0.07), 0 16px 40px rgba(7, 58, 38, 0.08);
	--shadow-lift: 0 8px 20px rgba(7, 58, 38, 0.1), 0 24px 56px rgba(7, 58, 38, 0.12);

	--wrap: 78rem;
	--wrap-wide: 88rem;
	--wrap-narrow: 42rem;
	--gutter: clamp(1.15rem, 4vw, 3rem);

	--header-h: 4.75rem;
	--site-header-height: var(--header-h);
	--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--t-fast: 150ms var(--ease);
	--t: 260ms var(--ease);
	--t-slow: 520ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 0ms;
		--t: 0ms;
		--t-slow: 0ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------- 2. Base */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--site-header-height) + var(--space-5));
}

body {
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video,
canvas {
	display: block;
	height: auto;
	max-width: 100%;
}

button,
input,
select,
textarea {
	color: inherit;
	font: inherit;
}

a {
	color: var(--forest);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--t-fast);
}

a:hover {
	color: var(--deep);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	border-radius: 3px;
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

::selection {
	background: var(--leaf);
	color: var(--deep);
}

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

/* --------------------------------------------------------- 3. Typography */

h1, h2, h3, h4, h5, h6 {
	color: var(--deep);
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.08;
	margin: 0 0 var(--space-4);
	text-wrap: balance;
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

h5, h6 {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

p, ul, ol, dl, figure, blockquote, pre, table {
	margin: 0 0 var(--space-4);
}

.display {
	font-size: var(--step-7);
	letter-spacing: -0.035em;
	line-height: 0.95;
}

.lead {
	color: var(--text-muted);
	font-size: var(--step-1);
	line-height: 1.5;
	max-width: 46ch;
}

/* Section eyebrow: the light-green label that opens most sections. */
.eyebrow {
	align-items: center;
	color: var(--forest);
	display: flex;
	font-size: var(--step--1);
	font-weight: 800;
	gap: var(--space-3);
	letter-spacing: 0.16em;
	margin: 0 0 var(--space-4);
	text-transform: uppercase;
}

.eyebrow::before {
	background: var(--leaf-deep);
	content: "";
	display: block;
	height: 2px;
	width: 2.25rem;
}

.on-dark .eyebrow,
.section--deep .eyebrow,
.section--forest .eyebrow {
	color: var(--leaf);
}

.on-dark .eyebrow::before,
.section--deep .eyebrow::before,
.section--forest .eyebrow::before {
	background: var(--gold);
}

blockquote {
	border-left: 3px solid var(--gold);
	font-family: var(--font-serif);
	font-size: var(--step-2);
	line-height: 1.35;
	margin-inline: 0;
	padding: var(--space-2) 0 var(--space-2) var(--space-5);
}

blockquote cite {
	color: var(--text-muted);
	display: block;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	font-style: normal;
	letter-spacing: 0.02em;
	margin-top: var(--space-3);
}

/* ------------------------------------------------------------- 4. Layout */

.wrap {
	margin-inline: auto;
	max-width: var(--wrap);
	padding-inline: var(--gutter);
	width: 100%;
}

.wrap--wide { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section {
	padding-block: clamp(var(--space-8), 7vw, var(--space-10));
	position: relative;
}

.section--tight { padding-block: clamp(var(--space-7), 5vw, var(--space-8)); }
.section--cream { background: var(--surface-cream); }

.section--deep,
.section--forest {
	color: var(--text-on-dark);
	overflow: hidden;
	position: relative;
}

.section--deep { background: var(--surface-deep); }
.section--forest { background: var(--surface-forest); }

.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4,
.section--forest h1, .section--forest h2, .section--forest h3, .section--forest h4 {
	color: var(--white);
}

.section--deep a:not(.button),
.section--forest a:not(.button) {
	color: var(--leaf);
}

.section--deep a:not(.button):hover,
.section--forest a:not(.button):hover {
	color: var(--gold);
}

.section--deep .lead,
.section--forest .lead {
	color: var(--text-on-dark-muted);
}

/* Asymmetric editorial grids. Deliberately not 1fr 1fr everywhere. */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.split {
	display: grid;
	gap: clamp(var(--space-6), 5vw, var(--space-9));
	grid-template-columns: 1fr;
}

@media (min-width: 62em) {
	.split { grid-template-columns: 1fr 1fr; align-items: center; }
	.split--7-5 { grid-template-columns: 7fr 5fr; }
	.split--5-7 { grid-template-columns: 5fr 7fr; }
	.split--top { align-items: start; }
}

.stack > * + * { margin-top: var(--space-4); }
.stack--loose > * + * { margin-top: var(--space-6); }

/* ------------------------------------------------ 5. Decorative devices */

/*
 * Tree rings and topographic lines, drawn as inline SVG data URIs so they
 * cost no request. Both are kept faint: texture, not pattern.
 */
.deco-rings::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23A3D562' stroke-width='1.1'%3E%3Ccircle cx='300' cy='300' r='60'/%3E%3Ccircle cx='300' cy='300' r='96'/%3E%3Ccircle cx='300' cy='300' r='140'/%3E%3Ccircle cx='300' cy='300' r='192'/%3E%3Ccircle cx='300' cy='300' r='250'/%3E%3Ccircle cx='300' cy='300' r='300'/%3E%3C/g%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	inset: 0;
	opacity: 0.1;
	pointer-events: none;
	position: absolute;
}

.deco-topo::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23A3D562' stroke-width='1'%3E%3Cpath d='M0 60 C 160 10 300 110 460 60 S 720 10 800 60'/%3E%3Cpath d='M0 120 C 160 70 300 170 460 120 S 720 70 800 120'/%3E%3Cpath d='M0 180 C 160 130 300 230 460 180 S 720 130 800 180'/%3E%3Cpath d='M0 240 C 160 190 300 290 460 240 S 720 190 800 240'/%3E%3Cpath d='M0 300 C 160 250 300 350 460 300 S 720 250 800 300'/%3E%3C/g%3E%3C/svg%3E");
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	content: "";
	inset: 0;
	opacity: 0.14;
	pointer-events: none;
	position: absolute;
}

.deco > * { position: relative; z-index: 1; }

/* A thin gold rule used to open or close a block. */
/* Oversized section numeral, set behind the heading. */
/* Vertical label used down the edge of feature panels. */
.vlabel {
	color: var(--leaf);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
}

@media (max-width: 61.99em) {
	.vlabel { display: none; }
}

/* --------------------------------------------------------- 6. Components */

/* Skip link and screen reader text */
.skip-link {
	background: var(--gold);
	border-radius: 0 0 var(--radius-sm) 0;
	color: var(--ink);
	font-weight: 700;
	left: 0;
	padding: var(--space-3) var(--space-5);
	position: absolute;
	top: 0;
	transform: translateY(-120%);
	z-index: 300;
}

.skip-link:focus {
	color: var(--ink);
	transform: translateY(0);
}

.screen-reader-text {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Buttons. Gold carries ink, never white. */
.button {
	align-items: center;
	background: var(--gold);
	border: 2px solid var(--gold);
	border-radius: 999px;
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--step-0);
	font-weight: 700;
	gap: var(--space-2);
	justify-content: center;
	letter-spacing: -0.005em;
	line-height: 1.15;
	min-height: 48px;
	padding: var(--space-3) var(--space-6);
	text-decoration: none;
	transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.button:hover {
	background: var(--gold-hover);
	border-color: var(--gold-hover);
	color: var(--ink);
	transform: translateY(-1px);
}

.button:active { transform: translateY(0); }

/* The arrow slides on hover. Pure CSS, respects reduced motion. */
.button::after {
	content: "";
	display: none;
}

.button--arrow::after {
	background: currentColor;
	display: block;
	height: 0.7em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.6 20.6 12l-7.4 7.4-1.4-1.42L16.77 13H3.5v-2h13.27l-5-5z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--t);
	width: 0.7em;
}

.button--arrow:hover::after { transform: translateX(4px); }

.button--outline {
	background: transparent;
	border-color: var(--forest);
	color: var(--forest);
}

.button--outline:hover {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--white);
}

.button--on-dark {
	background: transparent;
	border-color: rgba(241, 239, 230, 0.55);
	color: var(--text-on-dark);
}

.button--on-dark:hover {
	background: var(--white);
	border-color: var(--white);
	color: var(--deep);
}

.button--sm {
	font-size: var(--step--1);
	min-height: 44px;
	padding: var(--space-2) var(--space-5);
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Text link with an animated underline and optional arrow. */
.link-more {
	align-items: center;
	color: var(--forest);
	display: inline-flex;
	font-weight: 700;
	gap: var(--space-2);
	text-decoration: none;
	/* The label wraps; the arrow is a separate flex item, so it can never be
	   orphaned onto a line of its own the way a nowrap-then-break would. */
	white-space: normal;
}

.link-more span {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	padding-bottom: 2px;
	transition: background-size var(--t);
}

.link-more:hover span { background-size: 0 1px; }

.link-more::after {
	background: currentColor;
	content: "";
	display: block;
	height: 0.7em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.6 20.6 12l-7.4 7.4-1.4-1.42L16.77 13H3.5v-2h13.27l-5-5z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--t);
	width: 0.7em;
}

.link-more:hover::after { transform: translateX(4px); }

/* Long public email addresses must stay inside narrow contact cards. */
.link-more[href^="mailto:"] {
	display: inline;
	overflow-wrap: anywhere;
	white-space: normal;
}

.link-more[href^="mailto:"]::after { display: none; }

.section--deep .link-more,
.section--forest .link-more { color: var(--leaf); }

/* External link cue */
.link-out {
	background: currentColor;
	display: inline-block;
	height: 0.62em;
	margin-left: 0.35em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 0.62em;
}

/*
 * IMAGE SLOT
 * ----------
 * Every planned photograph renders through .media. When no image is attached
 * the slot still holds its exact aspect ratio, so layouts are final now and
 * dropping the photography in later changes nothing structural.
 * Ratios are set per use with --ratio. See wp-content/IMAGE-SLOTS.md.
 */
.media {
	aspect-ratio: var(--ratio, 4 / 3);
	background: var(--cream-2);
	border-radius: var(--radius);
	overflow: hidden;
	position: relative;
}

.media img {
	height: 100%;
	object-fit: cover;
	object-position: var(--focal, 50% 50%);
	width: 100%;
	transition: transform var(--t-slow);
}

.media--zoom:hover img { transform: scale(1.03); }

.media.is-empty {
	background:
		radial-gradient(circle at 18% 18%, rgba(163, 213, 98, 0.28), transparent 34%),
		linear-gradient(145deg, rgba(7, 58, 38, 0.08), rgba(7, 58, 38, 0.015)),
		var(--cream-2);
	display: grid;
	place-items: center;
}

.media__placeholder {
	align-content: center;
	display: grid;
	height: 100%;
	justify-items: center;
	padding: var(--space-5);
	position: relative;
	width: 100%;
}

.media.is-empty .media__placeholder-logo {
	height: auto;
	max-height: 62%;
	object-fit: contain;
	width: min(80%, 19rem);
}

.media--square { --ratio: 1; }
.media--portrait { --ratio: 4 / 5; }
.media--wide { --ratio: 16 / 9; }
.media--pano { --ratio: 2 / 1; }

/* Cards */
.card {
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: border-color var(--t-fast), box-shadow var(--t), transform var(--t);
}

.card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-lift);
	transform: translateY(-3px);
}

.card__media { --ratio: 8 / 5; border-radius: 0; }

/* Live Google Calendar */
.calendar-showcase { overflow: hidden; }

.calendar-showcase__intro {
	align-items: end;
	display: grid;
	gap: var(--space-6);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-bottom: var(--space-7);
}

.calendar-showcase__intro h2 { margin-bottom: var(--space-3); }
.calendar-showcase__intro .lead { margin: 0; max-width: 50rem; }

.calendar-shell {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: calc(var(--radius-lg) + 6px);
	box-shadow: var(--shadow-lift);
	overflow: hidden;
	position: relative;
}

.calendar-shell::before {
	background: linear-gradient(90deg, var(--leaf), var(--gold));
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

.calendar-shell__masthead {
	align-items: center;
	background: var(--deep);
	color: var(--text-on-dark);
	display: flex;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
}

.calendar-shell__masthead img {
	background: var(--cream);
	border-radius: var(--radius-sm);
	height: 3.4rem;
	object-fit: contain;
	padding: 0.35rem;
	width: 5.75rem;
}

.calendar-shell__masthead strong,
.calendar-shell__masthead span { display: block; }

.calendar-shell__masthead strong {
	font-size: var(--step-1);
	line-height: 1.2;
}

.calendar-shell__masthead span {
	color: var(--text-on-dark-muted);
	font-size: var(--step--1);
	margin-top: 0.15rem;
}

.calendar-frame {
	background: var(--white);
	border: 0;
	display: block;
	height: min(52rem, 76vh);
	min-height: 42rem;
	width: 100%;
}

.calendar-frame--agenda { display: none; }

.event-detail-media { margin-bottom: var(--space-7); }

@media (max-width: 47.99rem) {
	.calendar-showcase__intro { align-items: start; grid-template-columns: 1fr; }
	.calendar-showcase__intro .button { justify-self: start; }
	.calendar-shell__masthead { padding: var(--space-4); }
	.calendar-shell__masthead img { height: 2.9rem; width: 4.85rem; }
	.calendar-frame--month { display: none; }
	.calendar-frame--agenda { display: block; }
	.calendar-frame { height: 38rem; min-height: 38rem; }
}

.card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-5) var(--space-6);
}

.card__title {
	font-size: var(--step-2);
	margin: 0;
}

.card__title a {
	color: var(--deep);
	text-decoration: none;
}

/* Whole-card click target without losing the real link semantics. */
.card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.card:hover .card__title a { color: var(--forest); }

.card__meta {
	align-items: center;
	color: var(--text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--step--1);
	gap: var(--space-2) var(--space-4);
	margin: 0;
}

.card__meta-item {
	align-items: center;
	display: inline-flex;
	gap: var(--space-2);
}

.card__excerpt { margin: 0; }

.card__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-3);
	position: relative;
	z-index: 2;
}

/* Event card: the gold date block is the anchor of the whole component. */
.card--event .card__body { padding-top: var(--space-4); }

.date-block {
	align-items: center;
	background: var(--gold);
	border-radius: var(--radius);
	color: var(--ink);
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	min-width: 4rem;
	padding: var(--space-3) var(--space-3) var(--space-2);
	text-align: center;
}

.date-block__month {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.date-block__day {
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-block: 2px;
}

.date-block__year {
	/* 12px floor on micro-labels: small, but never microscopic. */
	font-size: 0.75rem;
	font-weight: 700;
	opacity: 0.78;
}

.date-block--on-dark {
	background: var(--gold);
	color: var(--ink);
}

/* Status badges */
.badge {
	border-radius: 999px;
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 0.3rem 0.75rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.badge--open { background: #dcefc6; color: #34521a; }
.badge--live { background: var(--gold); color: var(--ink); }
.badge--caution { background: #f7e7c4; color: #6c4a05; }
.badge--closed { background: #ecdcd9; color: #7c2b20; }
.badge--muted { background: var(--cream-2); color: var(--text-muted); }

/* Action path: the three homepage audiences. Editorial, not bordered boxes. */
.path {
	background: var(--surface-raised);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	height: 100%;
	padding: var(--space-6) var(--space-6) var(--space-7);
	position: relative;
	transition: box-shadow var(--t), transform var(--t);
}

.path::before {
	background: var(--gold);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: height var(--t);
}

.path:nth-child(2)::before { background: var(--leaf-deep); }
.path:nth-child(3)::before { background: var(--forest); }

.path:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY(-4px);
}

.path:hover::before { height: 7px; }

/* Keep the three pathways on one clean baseline at desktop sizes. */
.path-row { align-items: stretch; }

.path__index {
	color: var(--leaf-deep);
	font-size: var(--step-1);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.path h3 { margin: 0; }

.path p {
	color: var(--text-muted);
	margin: 0;
}

.path .link-more { margin-top: auto; }

.path__link::after {
	background: none;
	content: "";
	height: auto;
	inset: 0;
	mask: none;
	position: absolute;
	transition: none;
	width: auto;
}

/* Person card */
.person {
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: border-color var(--t-fast), box-shadow var(--t), transform var(--t);
}

.person:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.person__media { --ratio: 4 / 5; border-radius: 0; }

.person__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-5);
}

.person__name {
	font-size: var(--step-1);
	margin: 0;
}

.person__role {
	color: var(--forest);
	font-weight: 700;
	margin: 0;
}

.person__secondary,
.person__org {
	color: var(--text-muted);
	font-size: var(--step--1);
	margin: 0;
}

.person__contact { margin-top: var(--space-4); }

/* Document / resource card */
.doc {
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-left: 4px solid var(--gold);
	border-radius: var(--radius);
	display: flex;
	gap: var(--space-4);
	padding: var(--space-5);
	position: relative;
	transition: border-color var(--t-fast), box-shadow var(--t), transform var(--t);
}

.doc:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.doc__type {
	background: var(--cream);
	border-radius: var(--radius-sm);
	color: var(--deep);
	flex-shrink: 0;
	/* 12px floor: the file-type chip is small but it is still read. */
	font-size: 0.75rem;
	font-weight: 800;
	height: fit-content;
	letter-spacing: 0.08em;
	padding: var(--space-3) var(--space-2);
	min-width: 3.5rem;
	text-align: center;
}

.doc__body { flex: 1; min-width: 0; }

.doc__title {
	font-size: var(--step-1);
	margin: 0 0 var(--space-2);
}

.doc__title a { color: var(--deep); text-decoration: none; }

.doc__title a::after { content: ""; inset: 0; position: absolute; }

.doc__meta {
	color: var(--text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--step--1);
	gap: var(--space-1) var(--space-4);
	margin: 0 0 var(--space-3);
}

/* Sponsor tile */
.sponsor-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.sponsor {
	align-items: center;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	justify-content: center;
	min-height: 6.5rem;
	padding: var(--space-4);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--t-fast), box-shadow var(--t), transform var(--t);
}

.sponsor:hover {
	border-color: var(--leaf-deep);
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
}

.sponsor img {
	filter: grayscale(1);
	max-height: 3.25rem;
	object-fit: contain;
	opacity: 0.8;
	transition: filter var(--t), opacity var(--t);
	width: auto;
}

.sponsor:hover img { filter: grayscale(0); opacity: 1; }

.sponsor__name {
	color: var(--deep);
	font-size: var(--step--1);
	font-weight: 700;
	line-height: 1.25;
}

/* Homepage supporter wall: equal prominence, no invented sponsorship tiers. */
.sponsor-showcase {
	background:
		radial-gradient(circle at 92% 12%, rgba(242, 161, 35, 0.13), transparent 24rem),
		linear-gradient(145deg, var(--deep) 0%, #0a442f 58%, #123f31 100%);
	color: var(--text-on-dark);
	overflow: hidden;
	position: relative;
}

.sponsor-showcase::after {
	border: 1px solid rgba(163, 213, 98, 0.22);
	border-radius: 50%;
	content: "";
	height: clamp(18rem, 34vw, 34rem);
	pointer-events: none;
	position: absolute;
	right: clamp(-15rem, -10vw, -7rem);
	top: clamp(-17rem, -13vw, -8rem);
	width: clamp(18rem, 34vw, 34rem);
}

.sponsor-showcase__intro {
	align-items: end;
	display: grid;
	gap: var(--space-6) var(--space-9);
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: var(--space-7);
}

@media (min-width: 62em) {
	.sponsor-showcase__intro {
		grid-template-columns: minmax(0, 1.65fr) minmax(15rem, 0.6fr);
	}
}

.sponsor-showcase .eyebrow { color: var(--leaf); }
.sponsor-showcase .eyebrow::before { background: var(--gold); }

.sponsor-showcase__copy h2 {
	color: var(--white);
	font-size: clamp(2.4rem, 5vw, 5.4rem);
	letter-spacing: -0.045em;
	line-height: 0.94;
	margin-bottom: var(--space-5);
	max-width: 13ch;
}

.sponsor-showcase__copy .lead {
	color: var(--text-on-dark-muted);
	font-size: var(--step-1);
	max-width: 47rem;
}

.sponsor-showcase__count {
	align-items: center;
	border-left: 1px solid rgba(163, 213, 98, 0.4);
	display: flex;
	gap: var(--space-4);
	padding: var(--space-3) 0 var(--space-3) var(--space-5);
}

.sponsor-showcase__count strong {
	color: var(--gold);
	font-family: var(--font-serif);
	font-size: clamp(3.5rem, 6vw, 6rem);
	font-weight: 400;
	letter-spacing: -0.06em;
	line-height: 0.8;
}

.sponsor-showcase__count span {
	color: var(--text-on-dark-muted);
	font-size: var(--step--1);
	font-weight: 700;
	line-height: 1.35;
	max-width: 11rem;
	text-transform: uppercase;
}

.sponsor-showcase__levels {
	display: grid;
	gap: var(--space-5);
}

.sponsor-showcase__level-title {
	align-items: center;
	color: var(--leaf);
	display: flex;
	font-size: var(--step--1);
	font-weight: 800;
	gap: var(--space-4);
	letter-spacing: 0.14em;
	margin: 0 0 var(--space-3);
	text-transform: uppercase;
}

.sponsor-showcase__level-title::after {
	background: rgba(163, 213, 98, 0.28);
	content: "";
	flex: 1;
	height: 1px;
}

.sponsor-showcase__grid {
	gap: 1px;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	overflow: hidden;
	border: 1px solid rgba(163, 213, 98, 0.24);
	border-radius: var(--radius-lg);
	background: rgba(7, 58, 38, 0.94);
}

@media (min-width: 23em) and (max-width: 47.99em) {
	.sponsor-showcase__level--silver .sponsor-showcase__grid,
	.sponsor-showcase__level--bronze .sponsor-showcase__grid,
	.sponsor-showcase__level--exhibitor .sponsor-showcase__grid,
	.sponsor-showcase__level--contributing-partner .sponsor-showcase__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48em) and (max-width: 74.99em) {
	.sponsor-showcase__level--gold .sponsor-showcase__grid,
	.sponsor-showcase__level--bronze .sponsor-showcase__grid,
	.sponsor-showcase__level--contributing-partner .sponsor-showcase__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sponsor-showcase__level--silver .sponsor-showcase__grid,
	.sponsor-showcase__level--exhibitor .sponsor-showcase__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 75em) {
	.sponsor-showcase__level--gold .sponsor-showcase__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 52rem;
	}

	.sponsor-showcase__level--silver .sponsor-showcase__grid,
	.sponsor-showcase__level--exhibitor .sponsor-showcase__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sponsor-showcase__level--bronze .sponsor-showcase__grid,
	.sponsor-showcase__level--contributing-partner .sponsor-showcase__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 38rem;
	}
}

.sponsor--showcase {
	align-items: center;
	background: rgba(7, 58, 38, 0.94);
	border: 1px solid rgba(163, 213, 98, 0.18);
	border-radius: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	min-height: 6.5rem;
	padding: var(--space-4);
	position: relative;
	text-align: center;
	transition: background var(--t), transform var(--t), color var(--t);
}

.sponsor--showcase::before {
	background: var(--gold);
	content: "";
	height: 3px;
	left: var(--space-4);
	position: absolute;
	top: 0;
	transition: width var(--t);
	width: 2.25rem;
}

.sponsor-showcase__level--silver .sponsor--showcase::before { background: rgba(255, 255, 255, 0.72); }
.sponsor-showcase__level--bronze .sponsor--showcase::before { background: #cf8b4a; }
.sponsor-showcase__level--exhibitor .sponsor--showcase::before { background: var(--leaf); }
.sponsor-showcase__level--contributing-partner .sponsor--showcase::before { background: rgba(163, 213, 98, 0.58); }

.sponsor-showcase__level--gold .sponsor--showcase {
	background: rgba(12, 70, 45, 0.98);
	min-height: 7.5rem;
}

.sponsor-showcase__level--gold .sponsor--showcase .sponsor__name {
	font-size: var(--step-1);
}

.sponsor-showcase__level--exhibitor .sponsor--showcase,
.sponsor-showcase__level--contributing-partner .sponsor--showcase {
	min-height: 5.75rem;
}

.sponsor--showcase:hover {
	background: var(--forest);
	border-color: rgba(163, 213, 98, 0.45);
	box-shadow: none;
	transform: none;
}

.sponsor--showcase:hover::before { width: calc(100% - var(--space-4) * 2); }

.sponsor__number {
	display: none;
}

.sponsor__identity {
	align-items: center;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.sponsor__monogram {
	display: none;
}

.sponsor--showcase img {
	filter: brightness(0) invert(1);
	height: 3.35rem;
	max-width: 9rem;
	opacity: 0.92;
}

.sponsor--showcase:hover img { filter: brightness(0) invert(1); }

.sponsor--showcase .sponsor__name {
	color: var(--white);
	font-size: var(--step-0);
	font-weight: 700;
	line-height: 1.25;
	max-width: 15rem;
}

.sponsor__arrow {
	display: none;
}

.sponsor-showcase__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5) var(--space-7);
	justify-content: space-between;
	margin-top: var(--space-6);
}

.sponsor-showcase__footer p {
	color: var(--text-on-dark-muted);
	margin: 0;
	max-width: 50rem;
}

/* Event pages use the supporter-wall language at a compact article scale. */
.sponsor-showcase--compact {
	border-radius: var(--radius-lg);
	margin-top: var(--space-7);
	padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.sponsor-showcase--compact > * {
	position: relative;
	z-index: 1;
}

.entry-content .sponsor-showcase--compact__title {
	color: var(--white);
	font-size: var(--step-3);
	margin: 0 0 var(--space-5);
}

.sponsor-showcase--compact .sponsor-showcase__levels { gap: var(--space-4); }
.entry-content .sponsor-showcase--compact .sponsor-showcase__level-title { margin: 0 0 var(--space-2); }

.sponsor-showcase--compact .sponsor-showcase__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	max-width: 36rem;
}

.sponsor-showcase--compact .sponsor-showcase__level--gold .sponsor-showcase__grid,
.sponsor-showcase--compact .sponsor-showcase__level--bronze .sponsor-showcase__grid,
.sponsor-showcase--compact .sponsor-showcase__level--contributing-partner .sponsor-showcase__grid {
	max-width: 24rem;
}

.sponsor-showcase--compact .sponsor--showcase,
.sponsor-showcase--compact .sponsor-showcase__level--gold .sponsor--showcase,
.sponsor-showcase--compact .sponsor-showcase__level--exhibitor .sponsor--showcase,
.sponsor-showcase--compact .sponsor-showcase__level--contributing-partner .sponsor--showcase {
	min-height: 4.5rem;
	padding: var(--space-3);
}

.sponsor-showcase--compact .sponsor--showcase .sponsor__name,
.sponsor-showcase--compact .sponsor-showcase__level--gold .sponsor--showcase .sponsor__name {
	font-size: var(--step--1);
}

.sponsor-showcase--compact .sponsor--showcase::before {
	height: 2px;
	left: var(--space-3);
	width: 1.75rem;
}

.sponsor-showcase--compact .sponsor--showcase:hover::before {
	width: calc(100% - var(--space-3) * 2);
}

.sponsor-group + .sponsor-group { margin-top: var(--space-7); }

.sponsor-group__title {
	align-items: center;
	color: var(--forest);
	display: flex;
	font-size: var(--step--1);
	font-weight: 800;
	gap: var(--space-4);
	letter-spacing: 0.16em;
	margin-bottom: var(--space-4);
	text-transform: uppercase;
}

.sponsor-group__title::after {
	background: var(--line);
	content: "";
	flex: 1;
	height: 1px;
}

/* Announcement bar */
.announcement {
	background: var(--deep);
	color: var(--text-on-dark);
	font-size: var(--step--1);
}

.announcement__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	justify-content: center;
	padding-block: var(--space-3);
	text-align: center;
}

.announcement a {
	color: var(--leaf);
	font-weight: 700;
}

/* Header */
.site-header {
	background: rgba(250, 249, 245, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	transition: box-shadow var(--t);
	z-index: 100;
}

.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header__inner {
	align-items: center;
	display: flex;
	gap: var(--space-5);
	justify-content: space-between;
	min-height: var(--header-h);
	padding-block: var(--space-3);
}

.site-brand {
	align-items: center;
	color: var(--deep);
	display: flex;
	flex-shrink: 0;
	gap: var(--space-3);
	text-decoration: none;
}

/* The supplied lockup includes a small name line beneath the KAA monogram.
   The header pairs the exact vector mark with live, readable site text, so the
   crop keeps the leaf details crisp without shrinking that line to a blur. */
.brand-logo-crop {
	display: block;
	overflow: hidden;
}

.brand-logo {
	display: block;
	height: auto;
	max-width: none;
	width: 100%;
}

.site-brand__logo-crop {
	flex: 0 0 auto;
	height: 3.15rem;
	width: 7.9rem;
}

.site-brand__mark {
	align-items: center;
	background: var(--forest);
	border-radius: 10px;
	color: var(--leaf);
	display: flex;
	flex-shrink: 0;
	font-size: 1.05rem;
	font-weight: 800;
	height: 2.75rem;
	justify-content: center;
	letter-spacing: -0.03em;
	width: 2.75rem;
}

.site-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	min-width: 0;
}

.site-brand__name {
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.site-brand__tagline {
	color: var(--text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.site-header__actions {
	align-items: center;
	display: flex;
	gap: var(--space-2);
}

/*
 * Give the full navigation an intentional row of its own on desktop. The
 * association name, utility links and five primary sections cannot share a
 * single line at common laptop widths without wrapping unpredictably. This
 * two-tier lockup keeps every destination visible and the header balanced.
 */
@media (min-width: 64em) {
	.site-header__inner {
		display: grid;
		gap: var(--space-2) var(--space-6);
		grid-template-columns: minmax(0, 1fr) auto;
		padding-block: var(--space-3) var(--space-2);
	}

	.site-brand {
		grid-column: 1;
		grid-row: 1;
	}

	.site-header__actions {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.primary-nav {
		border-top: 1px solid var(--line);
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
	}

	.primary-nav > ul {
		flex-wrap: nowrap;
		justify-content: center;
	}

	.primary-nav > ul > li {
		align-items: center;
		display: flex;
	}
}

.icon-button {
	align-items: center;
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--deep);
	cursor: pointer;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	text-decoration: none;
	transition: background var(--t-fast), border-color var(--t-fast);
	width: 44px;
}

.icon-button:hover {
	background: var(--cream);
	border-color: var(--forest);
}

.icon-button__glyph {
	background: currentColor;
	height: 1.05rem;
	width: 1.05rem;
}

.icon-search {
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.32l5.39 5.39 1.42-1.42-5.39-5.39A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Primary navigation */
.primary-nav > ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav li { position: relative; }

.primary-nav .menu-link {
	border-radius: var(--radius-sm);
	color: var(--deep);
	display: inline-block;
	font-size: 0.93rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: var(--space-3);
	position: relative;
	text-decoration: none;
}

.primary-nav > ul > li > .menu-link::after {
	background: var(--gold);
	bottom: 4px;
	content: "";
	height: 2px;
	left: var(--space-3);
	position: absolute;
	right: var(--space-3);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t);
}

.primary-nav > ul > li:hover > .menu-link::after,
.primary-nav .current-menu-item > .menu-link::after,
.primary-nav .current-menu-ancestor > .menu-link::after,
.primary-nav .current-page-ancestor > .menu-link::after {
	transform: scaleX(1);
}

.submenu-toggle {
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--deep);
	cursor: pointer;
	line-height: 0;
	min-height: 1.5rem;
	min-width: 1.5rem;
	padding: var(--space-2);
}

.submenu-toggle__icon {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	display: inline-block;
	height: 0.42rem;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--t);
	width: 0.42rem;
}

.submenu-toggle[aria-expanded="true"] .submenu-toggle__icon {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.submenu {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-top: 3px solid var(--gold);
	box-shadow: var(--shadow);
	display: none;
	flex-direction: column;
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 15.5rem;
	padding: var(--space-2);
	position: absolute;
	/* Overlap the trigger row by one pixel so the pointer never crosses a
	   dead zone on its way into the dropdown. */
	top: calc(100% - 1px);
	z-index: 20;
}

.submenu.is-open { display: flex; }

/* Desktop pointer and keyboard users can discover the complete menu without
   having to hit the small disclosure button. Click-to-open remains available
   everywhere, including touch devices. */
@media (min-width: 64em) {
	.primary-nav .has-submenu:hover > .submenu,
	.primary-nav .has-submenu:focus-within > .submenu {
		display: flex;
	}
}

.submenu .menu-link {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	width: 100%;
}

.submenu .menu-link:hover { background: var(--cream); }

.nav-toggle {
	align-items: center;
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--deep);
	cursor: pointer;
	display: none;
	font-size: var(--step--1);
	font-weight: 700;
	gap: var(--space-2);
	letter-spacing: 0.04em;
	min-height: 44px;
	padding: var(--space-2) var(--space-4);
	text-transform: uppercase;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	background: currentColor;
	border-radius: 2px;
	content: "";
	display: block;
	height: 2px;
	transition: transform var(--t), opacity var(--t-fast);
	width: 1.1rem;
}

.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 63.99em) {
	.site-header__inner {
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.nav-toggle { display: inline-flex; }

	.primary-nav {
		display: none;
		flex-basis: 100%;
		order: 10;
	}

	.primary-nav.is-open {
		border-top: 1px solid var(--line);
		display: block;
		padding-block: var(--space-3) var(--space-5);
	}

	.primary-nav > ul {
		flex-direction: column;
		gap: 0;
	}

	.primary-nav > ul > li {
		border-bottom: 1px solid var(--line);
	}

	.primary-nav .has-submenu {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.primary-nav .menu-link {
		display: block;
		font-size: 1.02rem;
		padding-block: var(--space-4);
	}

	.primary-nav > ul > li > .menu-link::after { display: none; }

	.submenu {
		border: 0;
		border-left: 2px solid var(--leaf);
		border-radius: 0;
		box-shadow: none;
		flex-basis: 100%;
		margin-bottom: var(--space-3);
		margin-left: var(--space-3);
		padding: 0 0 0 var(--space-3);
		position: static;
	}

	.submenu .menu-link { padding-block: var(--space-3); }

	/* In the drawer the disclosure sits beside a full-width link, so it needs
	   a finger-sized target of its own rather than the 24px desktop affordance. */
	.submenu-toggle {
		align-items: center;
		display: flex;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}
}

/* Below the one-line header range, give the brand and controls deliberate
   rows instead of allowing the search and join actions to wrap beneath the
   logo on their own. This keeps the tablet header visually balanced while
   preserving the compact mobile arrangement. */
@media (max-width: 59.99em) {
	.site-brand { flex-basis: 100%; }
	.site-header__actions { margin-left: auto; }
}

@media (max-width: 30em) {
	.site-brand__tagline { display: none; }
	.site-header__actions .button { padding-inline: var(--space-4); }

	/* The full association name is long. Let the lockup shrink rather than
	   push the header one pixel past the viewport. */
	.site-brand {
		flex-shrink: 1;
		gap: var(--space-2);
		min-width: 0;
	}

	.site-brand__name {
		font-size: 0.82rem;
		overflow-wrap: anywhere;
	}

	.site-brand__logo-crop {
		height: 2.2rem;
		width: 5.5rem;
	}

	.site-brand__mark {
		font-size: 0.85rem;
		height: 2.25rem;
		width: 2.25rem;
	}
}

/* Accordion */
.accordion { border-top: 1px solid var(--line); }

.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__trigger {
	align-items: center;
	background: none;
	border: 0;
	color: var(--deep);
	cursor: pointer;
	display: flex;
	font-size: var(--step-1);
	font-weight: 700;
	gap: var(--space-4);
	justify-content: space-between;
	padding: var(--space-5) 0;
	text-align: left;
	width: 100%;
}

.accordion__trigger:hover { color: var(--forest); }

.accordion__icon {
	border: 2px solid var(--gold);
	border-radius: 999px;
	flex-shrink: 0;
	height: 1.75rem;
	position: relative;
	transition: background var(--t);
	width: 1.75rem;
}

.accordion__icon::before,
.accordion__icon::after {
	background: var(--forest);
	content: "";
	inset: 50% 25%;
	position: absolute;
	transform: translateY(-50%);
	height: 2px;
}

.accordion__icon::after {
	inset: 25% 50%;
	transform: translateX(-50%);
	height: auto;
	width: 2px;
	transition: opacity var(--t);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon { background: var(--gold); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { opacity: 0; }

.accordion__panel { padding-bottom: var(--space-5); max-width: 62ch; }
.accordion__panel[hidden] { display: none; }

/* Callouts, alerts, empty states */
.callout {
	background: var(--surface-cream);
	border-radius: var(--radius);
	border-left: 4px solid var(--forest);
	padding: var(--space-6);
}

.callout--gold { border-left-color: var(--gold); }
.callout--spaced { margin-top: var(--space-7); }
.callout > :last-child { margin-bottom: 0; }

.alert {
	border-radius: var(--radius);
	margin-bottom: var(--space-5);
	padding: var(--space-4) var(--space-5);
}

.alert--success { background: #dcefc6; border-left: 4px solid #34521a; color: #2b4416; }
.alert--error { background: #ecdcd9; border-left: 4px solid #7c2b20; color: #6b241a; }

/*
 * Designed empty state. Never a dashed grey box: it holds its own as a
 * finished piece of the page when there is nothing to list.
 */
.empty {
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	display: grid;
	gap: var(--space-4);
	justify-items: start;
	padding: clamp(var(--space-6), 5vw, var(--space-8));
	position: relative;
	overflow: hidden;
}

.empty::before {
	background: var(--gold);
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	width: 4px;
}

.empty__title {
	font-size: var(--step-2);
	margin: 0;
}

.empty__message {
	color: var(--text-muted);
	margin: 0;
	max-width: 54ch;
}

.section--deep .empty,
.section--forest .empty {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--line-on-dark);
}

.section--deep .empty__title,
.section--forest .empty__title { color: var(--white); }

.section--deep .empty__message,
.section--forest .empty__message { color: var(--text-on-dark-muted); }

/*
 * Admin-only note. The public never sees it; an editor sees exactly which
 * verified value is still missing. Keeps unknown facts out of the page
 * without leaving a silent hole for staff.
 */
.pending {
	background: repeating-linear-gradient(45deg, #fff6e3, #fff6e3 10px, #fdf0d6 10px, #fdf0d6 20px);
	border: 1px dashed #b8860b;
	border-radius: var(--radius-sm);
	color: #6c4a05;
	font-size: var(--step--1);
	margin-bottom: var(--space-4);
	padding: var(--space-3) var(--space-4);
}

.pending strong { display: block; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; }

/* Forms */
.form__row { margin-bottom: var(--space-5); }

.form__label {
	color: var(--deep);
	display: block;
	font-weight: 700;
	margin-bottom: var(--space-2);
}

.form__required {
	color: var(--text-muted);
	font-size: var(--step--1);
	font-weight: 400;
}

.form__control {
	background: var(--white);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
	width: 100%;
}

.form__control:focus {
	border-color: var(--forest);
	box-shadow: 0 0 0 3px rgba(163, 213, 98, 0.35);
}

textarea.form__control { min-height: 9.5rem; resize: vertical; }

.form__honeypot {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.search-form { display: flex; gap: var(--space-2); }

.search-form input[type="search"] {
	background: var(--white);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	flex: 1;
	min-height: 48px;
	min-width: 0;
	padding: var(--space-3) var(--space-4);
}

/* Filter bar */
.filters {
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-7);
	padding: var(--space-5);
}

.filters__group {
	display: flex;
	flex: 1 1 11rem;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.filters__label {
	color: var(--forest);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.filters select,
.filters input {
	background: var(--white);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	min-height: 48px;
	padding: var(--space-2) var(--space-3);
	width: 100%;
}

.filters__actions {
	align-items: flex-end;
	display: flex;
	flex: 0 0 auto;
	gap: var(--space-2);
}

/* Tables */
table { border-collapse: collapse; width: 100%; }

th, td {
	border-bottom: 1px solid var(--line);
	padding: var(--space-4);
	text-align: left;
	vertical-align: top;
}

thead th {
	border-bottom: 2px solid var(--forest);
	color: var(--deep);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.table-scroll { overflow-x: auto; }

.schedule th:first-child,
.schedule td:first-child { white-space: nowrap; width: 9rem; }

/* Tables become stacked cards on small screens. */
@media (max-width: 40em) {
	.table-stack thead { display: none; }

	.table-stack tr {
		border: 1px solid var(--line);
		border-radius: var(--radius);
		display: block;
		margin-bottom: var(--space-4);
		padding: var(--space-3);
	}

	.table-stack td,
	.table-stack th {
		border: 0;
		display: block;
		padding: var(--space-2) var(--space-2);
	}

	.table-stack td::before {
		color: var(--forest);
		content: attr(data-label) ": ";
		font-size: var(--step--2);
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
}

/* Gallery and lightbox */
.gallery-grid {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.gallery-grid button {
	background: none;
	border: 0;
	cursor: zoom-in;
	display: block;
	padding: 0;
	width: 100%;
}

.gallery-grid .media { --ratio: 4 / 3; }

.lightbox {
	align-items: center;
	background: rgba(7, 58, 38, 0.95);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: var(--space-6);
	position: fixed;
	z-index: 300;
}

.lightbox[hidden] { display: none; }

.lightbox__figure { margin: 0; max-height: 100%; text-align: center; }
.lightbox__figure img { margin-inline: auto; max-height: 78vh; width: auto; }

.lightbox__caption {
	color: var(--text-on-dark);
	font-size: var(--step--1);
	margin-top: var(--space-3);
}

.lightbox__control {
	background: rgba(255, 255, 255, 0.12);
	border: 2px solid transparent;
	border-radius: 999px;
	color: var(--white);
	cursor: pointer;
	height: 48px;
	position: absolute;
	width: 48px;
}

.lightbox__control:hover { background: var(--gold); color: var(--ink); }

.lightbox__close { right: var(--space-5); top: var(--space-5); }
.lightbox__prev { left: var(--space-5); top: 50%; }
.lightbox__next { right: var(--space-5); top: 50%; }

/* Pagination */
.pagination { margin-top: var(--space-8); }

.pagination .page-numbers {
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	display: inline-block;
	margin-right: var(--space-2);
	min-width: 48px;
	padding: var(--space-3);
	text-align: center;
	text-decoration: none;
}

.pagination .page-numbers:hover { border-color: var(--forest); }

.pagination .current {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--white);
}

/* ------------------------------------------------------------ 7. Sections */

/*
 * HOMEPAGE HERO
 * Asymmetric: copy sits in a deep-green column, the photograph occupies the
 * right. On small screens the image stacks above the copy rather than sitting
 * behind text, so the headline is never laid over busy foliage.
 */
.hero {
	background: var(--deep);
	color: var(--text-on-dark);
	overflow: hidden;
	position: relative;
}

.hero__grid {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
}

.hero__content {
	padding-block: clamp(var(--space-8), 8vw, var(--space-10));
	position: relative;
	z-index: 2;
}

.hero__inner { max-width: 34rem; }

.hero h1 {
	color: var(--white);
	font-size: var(--step-7);
	letter-spacing: -0.035em;
	line-height: 0.98;
	margin-bottom: var(--space-5);
}

.hero h1 em {
	color: var(--leaf);
	display: block;
	font-style: normal;
	margin-top: 0.08em;
}

/* Keep the longest headline word inside the narrowest supported viewports. */
@media (max-width: 30em) {
	.hero h1 { font-size: clamp(2.6rem, 13vw, 3.36rem); }
}

.hero__lead {
	color: var(--text-on-dark-muted);
	font-size: var(--step-1);
	margin-bottom: var(--space-6);
	max-width: 34rem;
}

.hero__actions { margin-bottom: var(--space-5); }

.hero__tertiary { font-size: var(--step-0); }

/* Thin gold rule that ties the hero to the section below it. */
.hero__rule {
	background: var(--gold);
	height: 4px;
	inset: auto 0 0 0;
	position: absolute;
	z-index: 3;
}

.hero__media {
	--ratio: 4 / 3;
	border-radius: 0;
	min-height: 16rem;
}

.hero__media.is-empty {
	background: linear-gradient(150deg, var(--deep-2), var(--forest) 60%, #16593c);
}

.hero__media.is-empty::after {
	background: var(--leaf);
	opacity: 0.22;
	height: 4rem;
	width: 4rem;
}

@media (min-width: 62em) {
	.hero__grid { grid-template-columns: 1.02fr 1fr; align-items: stretch; }

	.hero__content {
		display: flex;
		align-items: center;
		padding-block: clamp(3rem, 3.5vw, 4rem);
		padding-right: var(--space-8);
	}

	.hero__media {
		--ratio: auto;
		height: 100%;
		min-height: 34rem;
	}

	/* Keep the climbers visible across the narrower desktop crop. */
	.hero__media img { object-position: 58% 45%; }

	/* Gradient joins the photo to the green column so the seam is soft. */
	.hero__media::before {
		background: linear-gradient(90deg, var(--deep) 0%, rgba(7, 58, 38, 0.34) 10%, rgba(7, 58, 38, 0) 30%);
		content: "";
		inset: 0;
		position: absolute;
		z-index: 1;
	}
}

@media (min-width: 75em) {
	.hero__grid { grid-template-columns: minmax(40rem, 0.8fr) minmax(0, 1.2fr); }
}

/* Hero stat strip */

/* Section head shared by most sections */
.section__head {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-6);
	justify-content: space-between;
	margin-bottom: var(--space-7);
}

.section__head-text { max-width: 46rem; }
.section__title { margin: 0; }

.section__lead {
	color: var(--text-muted);
	margin: var(--space-4) 0 0;
	max-width: 54ch;
}

.section--deep .section__lead,
.section--forest .section__lead { color: var(--text-on-dark-muted); }

/*
 * MISSION BAND
 * Cream background, oversized editorial heading, image slot to one side and
 * a numeral watermark behind the copy.
 */
.mission__figure { --ratio: 5 / 6; }

/*
 * KYTCC FEATURE
 * The loudest block on the site: full-bleed dark, big type, gold accents,
 * diagonal rope-inspired rhythm.
 */
.feature {
	background: var(--deep);
	color: var(--text-on-dark);
	overflow: hidden;
	position: relative;
}

.feature__media {
	border-radius: 0;
	inset: 0;
	position: absolute;
}

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

.feature__scrim {
	background:
		linear-gradient(180deg, rgba(7, 58, 38, 0.72) 0%, rgba(7, 58, 38, 0.9) 100%),
		linear-gradient(80deg, rgba(7, 58, 38, 0.95) 10%, rgba(7, 58, 38, 0.35) 70%);
	inset: 0;
	position: absolute;
}

.feature__inner {
	padding-block: clamp(var(--space-8), 8vw, var(--space-10));
	position: relative;
	z-index: 2;
}

.feature__layout {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 62em) {
	.feature__layout { grid-template-columns: auto 1fr; gap: var(--space-8); }
}

.feature__content { max-width: 42rem; }

.feature h2 {
	color: var(--white);
	font-size: var(--step-6);
	letter-spacing: -0.03em;
	line-height: 0.98;
}

.feature__when {
	align-items: center;
	color: var(--leaf);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--step-1);
	font-weight: 700;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-6);
}

.feature__when .badge { color: var(--ink); }

/*
 * SPLIT PANELS: Certification / Education
 * Two tall editorial panels rather than a flat two-column text block.
 */
.panel {
	background: var(--surface-raised);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	height: 100%;
	overflow: hidden;
	padding: clamp(var(--space-6), 4vw, var(--space-8));
	position: relative;
	transition: box-shadow var(--t), transform var(--t);
}

.panel:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

.panel--dark {
	background: var(--forest);
	color: var(--text-on-dark);
}

.panel--dark h3 { color: var(--white); }
.panel--dark p { color: var(--text-on-dark-muted); }
.panel--dark .eyebrow { color: var(--leaf); }
.panel--dark .eyebrow::before { background: var(--gold); }

.panel h3 { font-size: var(--step-3); margin: 0; }
.panel p { color: var(--text-muted); margin: 0; }
.panel .link-more { margin-top: auto; }

.panel__number {
	color: var(--leaf);
	font-size: var(--step-6);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.8;
	opacity: 0.2;
	position: absolute;
	right: var(--space-5);
	top: var(--space-4);
}

.panel--dark .panel__number { color: var(--gold); opacity: 0.28; }

/* Homepage learning feature: the championship photograph now supports the
   certification and continuing-education paths instead of appearing as a
   separate promotional block. */
.learning-feature {
	background: var(--deep);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.learning-feature::before {
	background-image:
		linear-gradient(90deg, rgba(0, 49, 36, 0.94) 0%, rgba(0, 62, 45, 0.78) 48%, rgba(0, 45, 34, 0.72) 100%),
		var(--learning-background, none);
	background-position: center 44%;
	background-size: cover;
	content: "";
	inset: 0;
	position: absolute;
	z-index: -2;
}

.learning-feature::after {
	background: linear-gradient(180deg, rgba(0, 31, 24, 0.08), rgba(0, 31, 24, 0.34));
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

.learning-feature__inner { position: relative; }
.learning-feature .split { align-items: stretch; }

.learning-feature__panel {
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 1.25rem 3.5rem rgba(0, 26, 19, 0.22);
	min-height: 24rem;
}

.learning-feature .panel--dark {
	background: rgba(0, 63, 46, 0.86);
}

.learning-feature__panel--light {
	background: rgba(250, 248, 242, 0.94);
}

@media (max-width: 47.99rem) {
	.learning-feature::before { background-position: 60% center; }
	.learning-feature__panel { min-height: 0; }
}

/* Membership CTA */
.cta-panel {
	background: var(--deep);
	border-radius: var(--radius-lg);
	color: var(--text-on-dark);
	overflow: hidden;
	padding: clamp(var(--space-7), 6vw, var(--space-9));
	position: relative;
}

.cta-panel h2 {
	color: var(--white);
	font-size: var(--step-5);
	max-width: 20ch;
}

.cta-panel h2 em { color: var(--leaf); font-style: normal; }

.cta-panel p {
	color: var(--text-on-dark-muted);
	max-width: 52ch;
}

/* ------------------------------------------------------- 8. Page systems */

/*
 * PAGE HERO
 * Shared by every inner page. Dark green band, breadcrumb, eyebrow, title,
 * standfirst. Optional image slot on the right for feature pages.
 */
.page-hero {
	background: var(--deep);
	color: var(--text-on-dark);
	overflow: hidden;
	position: relative;
}

.page-hero__inner {
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 26rem;
	padding-block: var(--space-5);
	position: relative;
	z-index: 2;
}

.page-hero__breadcrumbs {
	min-height: 1.82rem;
}

.page-hero__breadcrumbs .breadcrumbs__list { margin-bottom: 0; }

.page-hero h1 {
	color: var(--white);
	font-size: var(--step-5);
	margin-bottom: var(--space-4);
	max-width: 20ch;
}

.page-hero .lead {
	color: var(--text-on-dark-muted);
	margin-bottom: 0;
	max-width: 56ch;
}

.page-hero__grid {
	align-content: start;
	align-items: start;
	align-self: stretch;
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	padding-block: var(--space-7) 0;
	width: 100%;
}

.page-hero__content { max-width: 58rem; }

@media (min-width: 62em) {
	.page-hero { height: 30rem; }
	.page-hero__inner { height: 100%; min-height: 0; }
	.page-hero__grid--media { grid-template-columns: 7fr 5fr; gap: var(--space-8); }
}

.page-hero__media { --ratio: 3 / 2; }

.page-hero__actions { margin-top: var(--space-6); }

/* Breadcrumbs */
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--step--1);
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
}

.breadcrumbs__item {
	align-items: baseline;
	display: inline-flex;
	min-width: 0;
}

.breadcrumbs__item a { color: var(--leaf); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--gold); text-decoration: underline; }

.breadcrumbs__item + .breadcrumbs__item::before {
	color: rgba(241, 239, 230, 0.5);
	content: "/";
	margin-right: var(--space-2);
}

.breadcrumbs__item [aria-current="page"] {
	color: var(--text-on-dark-muted);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Editorial article body */
.entry-content > * + * { margin-top: var(--space-5); }
.entry-content h2 { font-size: var(--step-3); margin-top: var(--space-8); }
.entry-content h3 { font-size: var(--step-2); margin-top: var(--space-7); }
.entry-content > h2:first-child,
.entry-content > h3:first-child { margin-top: 0; }

.entry-content ul,
.entry-content ol { padding-left: var(--space-5); }
.entry-content li + li { margin-top: var(--space-2); }
.entry-content li::marker { color: var(--leaf-deep); }
.entry-content img { border-radius: var(--radius); }
.entry-content a { font-weight: 600; }

.entry-content--spaced { margin-top: var(--space-6); }

/* Two-column editorial page: sticky sub-nav or aside beside the article. */
.page-layout {
	display: grid;
	gap: clamp(var(--space-6), 4vw, var(--space-8));
	grid-template-columns: 1fr;
}

@media (min-width: 62em) {
	.page-layout { grid-template-columns: minmax(0, 1fr) minmax(22rem, 23rem); align-items: start; }
	.page-layout--aside-left { grid-template-columns: minmax(22rem, 23rem) minmax(0, 1fr); }
	.page-layout__aside { position: sticky; top: calc(var(--site-header-height) + var(--space-5)); }
	.page-layout__aside--flow { position: static; }
}

.aside-card {
	background: linear-gradient(155deg, var(--surface-raised), var(--surface-cream));
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	padding: var(--space-6);
	position: relative;
}

.aside-card::before {
	background: linear-gradient(90deg, var(--gold) 0 28%, var(--leaf-deep) 28% 60%, var(--forest) 60%);
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.aside-card h2,
.aside-card h3 {
	color: var(--deep);
	font-family: var(--font-serif);
	font-size: var(--step-2);
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin-top: var(--space-2);
}

.aside-card ul { padding-left: 1.2rem; }
.aside-card li + li { margin-top: var(--space-3); }
.aside-card li::marker { color: var(--gold); }
.aside-card .button { width: 100%; }

.aside-card > :last-child { margin-bottom: 0; }

/* Facts list used on event and job details */
.facts {
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.facts dl {
	display: grid;
	gap: var(--space-4);
	margin: 0;
}

.facts dt {
	color: var(--forest);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.facts dd { margin: var(--space-1) 0 0; }

/* Event planning panel: one clear hierarchy for registration, logistics and contact. */
.event-panel {
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: var(--shadow);
	overflow: hidden;
}

.event-panel__masthead {
	background:
		radial-gradient(circle at 106% -8%, rgba(163, 213, 98, 0.18) 0 5rem, transparent 5.1rem),
		linear-gradient(145deg, var(--deep), var(--forest));
	color: var(--text-on-dark);
	padding: var(--space-6) var(--space-6) var(--space-5);
	position: relative;
}

.event-panel__kicker,
.event-panel__section-label {
	align-items: center;
	color: var(--leaf);
	display: flex;
	font-size: var(--step--2);
	font-weight: 800;
	gap: var(--space-3);
	letter-spacing: 0.13em;
	line-height: 1.3;
	margin: 0;
	text-transform: uppercase;
}

.event-panel__kicker::before {
	background: var(--gold);
	content: "";
	flex: 0 0 1.75rem;
	height: 2px;
}

.event-panel__masthead h2 {
	color: var(--white);
	font-family: var(--font-serif);
	font-size: var(--step-3);
	letter-spacing: -0.035em;
	line-height: 1;
	margin: var(--space-3) 0 0;
}

.event-panel__masthead > p:last-child {
	color: var(--text-on-dark-muted);
	font-size: var(--step--1);
	margin: var(--space-2) 0 0;
}

.event-panel__body { padding: var(--space-5); }

.event-panel__primary,
.event-panel__secondary-action .button {
	width: 100%;
}

.event-panel__primary {
	box-shadow: 0 8px 20px rgba(242, 161, 35, 0.2);
	min-height: 54px;
}

.event-panel__secondary-action { margin-top: var(--space-3); }

.event-panel__notice {
	background: var(--surface-cream);
	border-left: 3px solid var(--gold);
	font-size: var(--step--1);
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4);
}

.event-panel__facts {
	display: grid;
	margin: var(--space-5) 0 0;
}

.event-panel__fact {
	border-top: 1px solid var(--line);
	padding: var(--space-4) 0;
}

.event-panel__fact:last-child { padding-bottom: 0; }

.event-panel__fact dt {
	align-items: center;
	color: var(--forest);
	display: flex;
	font-size: var(--step--2);
	font-weight: 800;
	gap: var(--space-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.event-panel__fact dt::before {
	background: var(--gold);
	border-radius: 99px;
	content: "";
	flex: 0 0 1.3rem;
	height: 3px;
}

.event-panel__fact dd {
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.6;
	margin: var(--space-2) 0 0 calc(1.3rem + var(--space-3));
}

.event-panel__fact--pricing dd { color: var(--text-muted); }

.event-panel__inline-link {
	align-items: center;
	color: var(--forest);
	display: flex;
	font-size: var(--step--1);
	font-weight: 750;
	margin-top: var(--space-2);
	text-decoration-thickness: 1px;
	width: fit-content;
}

.event-panel__section {
	border-top: 1px solid var(--line);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
}

.event-panel__section-label { color: var(--forest); }

.event-panel__actions {
	display: grid;
	gap: var(--space-2);
	grid-template-columns: 1fr;
	margin-top: var(--space-3);
}

.event-panel__actions .button {
	font-size: 0.84rem;
	padding-inline: var(--space-3);
	width: 100%;
}

.event-panel__contact {
	background: var(--surface-cream);
	border-radius: var(--radius);
	margin-top: var(--space-5);
	padding: var(--space-4);
}

.event-panel__contact-name {
	color: var(--deep);
	font-family: var(--font-serif);
	font-size: var(--step-1);
	font-weight: 750;
	line-height: 1.15;
	margin: var(--space-3) 0 0;
}

.event-panel__contact-links {
	display: flex;
	flex-direction: column;
	font-size: var(--step--1);
	gap: var(--space-1);
	margin-top: var(--space-2);
}

.event-panel__contact-links a {
	overflow-wrap: anywhere;
	width: fit-content;
}

@media (min-width: 28em) and (max-width: 61.99em) {
	.event-panel__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Steps / numbered process */
.steps {
	counter-reset: step;
	display: grid;
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.steps li {
	border-top: 1px solid var(--line);
	counter-increment: step;
	display: grid;
	gap: var(--space-2) var(--space-5);
	grid-template-columns: auto 1fr;
	padding-top: var(--space-5);
}

.steps li::before {
	color: var(--gold);
	content: counter(step, decimal-leading-zero);
	font-size: var(--step-2);
	font-weight: 800;
	grid-row: span 2;
	letter-spacing: -0.02em;
	line-height: 1;
}

.steps h3 { font-size: var(--step-1); margin: 0; }
.steps p { color: var(--text-muted); margin: 0; }

/* ------------------------------------------------------------- 9. Footer */

.site-footer {
	background: var(--deep);
	color: var(--text-on-dark-muted);
	overflow: hidden;
	padding-block: clamp(var(--space-8), 6vw, var(--space-9)) var(--space-6);
	position: relative;
}

.site-footer a {
	color: var(--text-on-dark);
	text-decoration: none;
}

.site-footer a:hover { color: var(--leaf); text-decoration: underline; }

.footer__columns {
	display: grid;
	gap: var(--space-7) var(--space-6);
	grid-template-columns: 1fr;
	position: relative;
	z-index: 1;
}

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

@media (min-width: 68em) {
	.footer__columns { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.footer__brand { max-width: 26rem; }

.footer__logo {
	display: inline-block;
	margin-bottom: var(--space-4);
}

.footer__logo-crop {
	height: 5.15rem;
	width: 12.9rem;
}

.footer__logo .brand-logo {
	filter: brightness(0) invert(1);
}

.footer__mark {
	align-items: center;
	background: var(--forest);
	border-radius: 10px;
	color: var(--leaf);
	display: flex;
	font-size: 1.05rem;
	font-weight: 800;
	height: 2.75rem;
	justify-content: center;
	margin-bottom: var(--space-4);
	width: 2.75rem;
}

.footer__mission { color: var(--text-on-dark-muted); }

.footer__heading {
	color: var(--white);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: 0.16em;
	margin-bottom: var(--space-4);
	text-transform: uppercase;
}

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

.footer__columns li + li { margin-top: var(--space-3); }

.footer__address {
	font-style: normal;
	line-height: 1.8;
}

.footer__social {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: 0;
}

.footer__social li,
.footer__social li + li {
	display: flex;
	margin: 0;
}

.footer__social a {
	border: 1px solid var(--line-on-dark);
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	font-size: var(--step--1);
	font-weight: 600;
	padding: var(--space-2) var(--space-4);
	transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.footer__social a:hover {
	background: var(--leaf);
	border-color: var(--leaf);
	color: var(--deep);
	text-decoration: none;
}

.footer__bottom {
	align-items: center;
	border-top: 1px solid var(--line-on-dark);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--step--1);
	gap: var(--space-3) var(--space-5);
	justify-content: space-between;
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	position: relative;
	z-index: 1;
}

.footer__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------- 10. Utilities */

.mb-0 { margin-bottom: 0; }
.measure { max-width: 66ch; }
.flow > * + * { margin-top: var(--space-4); }

/* Keep a standalone primary action separate from secondary text links. */
.measure > .button + p { margin-top: var(--space-4); }

.alignwide { margin-inline: auto; max-width: var(--wrap); }

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

figcaption,
.wp-caption-text {
	color: var(--text-muted);
	font-size: var(--step--1);
	margin-top: var(--space-2);
}

/*
 * Gentle section entrance. Opt-in per element and never delays content:
 * without JS, or with reduced motion, everything is simply visible.
 */
.reveals-armed .reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--t-slow), transform var(--t-slow);
}

.reveals-armed .reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveals-armed .reveal { opacity: 1; transform: none; }
}

@media print {
	.site-header,
	.site-footer,
	.announcement,
	.breadcrumbs,
	.button,
	.filters { display: none !important; }

	body { background: #fff; color: #000; }
	.page-hero { background: #fff; color: #000; }
	.page-hero h1 { color: #000; }
}

/* Inline fact list used beside editorial copy. */
.factline {
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5) var(--space-8);
	margin: var(--space-6) 0 0;
	padding-top: var(--space-5);
}

.factline dt {
	color: var(--forest);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.factline dd {
	color: var(--ink);
	font-size: var(--step-2);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: var(--space-1) 0 0;
}

.mission__action { margin-top: var(--space-6); }

.aside-card__action { margin-top: var(--space-5); }

.postal {
	font-style: normal;
	line-height: 1.8;
	margin: 0;
}

.intro-block { margin-bottom: var(--space-8); }
.leadership-group + .leadership-group { margin-top: var(--space-8); }

/* Keep portrait frames consistent when a leadership group has an incomplete row. */
.leadership-group .grid--4 { grid-template-columns: 1fr; }

@media (min-width: 36em) {
	.leadership-group .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
	.leadership-group .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.media__img-rounded { border-radius: var(--radius); }

/* wp_link_pages output */
.page-links {
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-7);
	padding-top: var(--space-4);
}

/* Names the current archive view and keeps the heading order valid. */
.results-heading {
	align-items: center;
	color: var(--forest);
	display: flex;
	font-size: var(--step--1);
	font-weight: 800;
	gap: var(--space-4);
	letter-spacing: 0.16em;
	margin-bottom: var(--space-5);
	text-transform: uppercase;
}

.results-heading::after {
	background: var(--line);
	content: "";
	flex: 1;
	height: 1px;
}

/*
 * ON-DARK OVERRIDES
 * -----------------
 * Consolidated and placed last so nothing later in the cascade can quietly
 * undo them. Any surface painted deep or forest green routes its text,
 * eyebrows, leads and inline links through these rules. Verified at AA:
 * leaf on deep 7.46:1, leaf on forest 6.21:1, cream on deep 11.22:1,
 * cream on forest 9.34:1.
 */

.hero,
.feature,
.cta-panel,
.panel--dark,
.page-hero,
.section--deep,
.section--forest,
.site-footer {
	color: var(--text-on-dark);
}

.hero .eyebrow,
.feature .eyebrow,
.cta-panel .eyebrow,
.panel--dark .eyebrow,
.page-hero .eyebrow,
.section--deep .eyebrow,
.section--forest .eyebrow {
	color: var(--leaf);
}

.hero .eyebrow::before,
.feature .eyebrow::before,
.cta-panel .eyebrow::before,
.panel--dark .eyebrow::before,
.page-hero .eyebrow::before,
.section--deep .eyebrow::before,
.section--forest .eyebrow::before {
	background: var(--gold);
}

.hero .lead,
.hero p,
.feature .lead,
.feature p,
.cta-panel .lead,
.cta-panel p,
.panel--dark p,
.page-hero .lead,
.page-hero p,
.section--deep .lead,
.section--forest .lead,
.section--deep .section__lead,
.section--forest .section__lead {
	color: var(--text-on-dark-muted);
}

.hero h1, .hero h2, .hero h3,
.feature h1, .feature h2, .feature h3,
.cta-panel h1, .cta-panel h2, .cta-panel h3,
.panel--dark h1, .panel--dark h2, .panel--dark h3,
.page-hero h1, .page-hero h2, .page-hero h3,
.section--deep h1, .section--deep h2, .section--deep h3,
.section--forest h1, .section--forest h2, .section--forest h3 {
	color: var(--white);
}

.hero .link-more,
.feature .link-more,
.cta-panel .link-more,
.panel--dark .link-more,
.page-hero .link-more,
.section--deep .link-more,
.section--forest .link-more {
	color: var(--leaf);
}

.hero .link-more:hover,
.feature .link-more:hover,
.cta-panel .link-more:hover,
.panel--dark .link-more:hover,
.page-hero .link-more:hover,
.section--deep .link-more:hover,
.section--forest .link-more:hover {
	color: var(--gold);
}

.hero a:not(.button),
.feature a:not(.button),
.cta-panel a:not(.button),
.panel--dark a:not(.button),
.page-hero a:not(.button):not(.breadcrumbs__item a),
.section--deep a:not(.button),
.section--forest a:not(.button) {
	color: var(--leaf);
}

.hero a:not(.button):hover,
.feature a:not(.button):hover,
.cta-panel a:not(.button):hover,
.panel--dark a:not(.button):hover,
.section--deep a:not(.button):hover,
.section--forest a:not(.button):hover {
	color: var(--gold);
}

/* Focus rings need to clear a dark ground too. */
.hero :focus-visible,
.feature :focus-visible,
.cta-panel :focus-visible,
.panel--dark :focus-visible,
.page-hero :focus-visible,
.section--deep :focus-visible,
.section--forest :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--leaf);
}

/*
 * Sponsor tiers.
 *
 * Logos arrive in every shape imaginable. Each tile is a fixed box and the
 * logo is contained inside it, so a wide banner and a square mark occupy the
 * same footprint and neither is distorted. Tile size steps down with the tier
 * rather than the logos being resized by hand.
 */
.sponsor-grid--lead {
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.sponsor-grid--lead .sponsor {
	min-height: 9rem;
	padding: var(--space-5);
}

.sponsor-grid--lead .sponsor img { max-height: 4.5rem; }
.sponsor-grid--lead .sponsor__name { font-size: var(--step-0); }

.sponsor-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.sponsor-grid--compact .sponsor {
	min-height: 5.25rem;
	padding: var(--space-3);
}

.sponsor-grid--compact .sponsor img { max-height: 2.5rem; }
.sponsor-grid--compact .sponsor__name { font-size: var(--step--2); }

/* Recognition */
.award {
	border-top: 1px solid var(--line);
	display: grid;
	gap: var(--space-2) var(--space-6);
	grid-template-columns: 1fr;
	padding-block: var(--space-5);
}

@media (min-width: 48em) {
	.award { grid-template-columns: 7rem 1fr; }
}

.award__year {
	color: var(--gold);
	font-size: var(--step-2);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.award__name {
	font-size: var(--step-1);
	margin: 0 0 var(--space-1);
}

.award__meta {
	color: var(--text-muted);
	font-size: var(--step--1);
	margin: 0;
}

.award__citation {
	margin: var(--space-3) 0 0;
	max-width: 62ch;
}

.award-group + .award-group { margin-top: var(--space-8); }

.calendar-actions {
	border-top: 1px solid var(--line);
	padding-top: var(--space-4);
}

.calendar-actions__label {
	color: var(--forest);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: 0.12em;
	margin: 0 0 var(--space-3);
	text-transform: uppercase;
}

/* Curated entry points into the document library. */
.quick-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-7);
}

.quick-link {
	align-items: center;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--deep);
	display: inline-flex;
	font-size: var(--step--1);
	font-weight: 700;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
	transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.quick-link:hover {
	background: var(--cream);
	border-color: var(--forest);
	color: var(--deep);
}

.quick-link.is-current {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--white);
}

.quick-link__count {
	background: var(--cream);
	border-radius: 999px;
	color: var(--forest);
	font-size: 0.7rem;
	font-weight: 800;
	padding: 0.1rem 0.5rem;
}

.quick-link.is-current .quick-link__count {
	background: var(--leaf);
	color: var(--deep);
}

/* Compact reference lists used on the homepage band. */
.resource-list,
.job-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.resource-list li {
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	justify-content: space-between;
	padding-block: var(--space-4);
}

.resource-list a {
	font-weight: 700;
	text-decoration: none;
}

.resource-list a:hover { text-decoration: underline; }

.resource-list__meta {
	color: var(--text-muted);
	font-size: var(--step--1);
	white-space: nowrap;
}

.job-list li {
	border-top: 1px solid var(--line-on-dark);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-block: var(--space-3);
}

.job-list a {
	font-weight: 700;
	text-decoration: none;
}

.job-list span {
	color: var(--text-on-dark-muted);
	font-size: var(--step--1);
}

.panel--dark .job-list a { color: var(--leaf); }

/* Header utility strip. Hidden on small screens where space is scarce; every
   destination it carries is also reachable from the footer. */
.utility-nav__list {
	display: flex;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.utility-nav a {
	color: var(--text-muted);
	font-size: var(--step--1);
	font-weight: 600;
	text-decoration: none;
}

.utility-nav a:hover {
	color: var(--forest);
	text-decoration: underline;
}

@media (max-width: 74.99em) {
	.utility-nav { display: none; }
}

/*
 * Target size.
 *
 * WCAG 2.2 AA asks for 24x24 CSS pixels on standalone controls; buttons and
 * form fields here are already 44-48px. These rules lift the remaining
 * standalone links, in the footer and the breadcrumb trail, over that line
 * without turning tight lists into loose ones.
 */
.footer__columns li a,
.footer__bottom li a {
	display: inline-block;
	padding-block: 2px;
	min-height: 24px;
}

.breadcrumbs__item a,
.breadcrumbs__item [aria-current="page"] {
	display: inline-block;
	min-height: 24px;
	padding-block: 3px;
}

.resource-list a,
.job-list a {
	display: inline-block;
	min-height: 24px;
}

/* The honeypot must not read as a control to anything, including auditors. */
.form__honeypot input {
	height: 1px;
	width: 1px;
}