/* ==========================================================================
   91 SPORTING main stylesheet
   1. Tokens          6. Sections (home)
   2. Reset & base    7. Archives & singles
   3. Layout          8. Editorial / prose
   4. Typography      9. Forms & comments
   5. Components     10. Utilities & motion
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* --- Brand colour. Derived from the official logo gradient (#0038A0 →
	   #001648) and the existing site's navy + gold. --- */
	--c-ink:            #050B18;
	--c-ink-2:          #0A1226;
	--c-navy:           #001648;
	--c-navy-2:         #012C65;
	--c-blue:           #0038A0;
	--c-blue-lift:      #1B4DE4;
	--c-gold:           #E6C068;
	--c-gold-hi:        #F2D48A;
	--c-gold-deep:      #8C650F;   /* 5.3:1 on white, safe for small text */

	/* Timeline tracks. Brand hues lifted for legibility on the ink field:
	   91 Blue and the identity cyan, plus gold and paper. No new hues. */
	--c-track-facility:  #5C8BEE;
	--c-track-programme: #7FC7E4;
	--c-track-school:    #FFFFFF;
	--c-track-education: rgba(255, 255, 255, .48);

	--c-paper:          #FFFFFF;
	--c-paper-2:        #F4F6FA;
	--c-paper-3:        #EAEEF6;

	--c-line:           #DEE4EF;
	--c-line-strong:    #C6D0E2;
	--c-line-dark:      rgba(255, 255, 255, .16);
	--c-line-dark-2:    rgba(255, 255, 255, .28);

	--c-text:           #0A1020;
	--c-text-muted:     #5A6478;
	--c-text-invert:    #FFFFFF;
	--c-text-invert-muted: rgba(255, 255, 255, .68);

	/* --- Type --- */
	--f-display: "Anton", "Archivo", "Arial Narrow", system-ui, sans-serif;
	--f-head:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

	--fs-display-xl: clamp(2.75rem, 1.1rem + 7.2vw, 8.25rem);
	--fs-display-l:  clamp(2.25rem, 1.15rem + 4.6vw, 5.5rem);
	--fs-display-m:  clamp(1.75rem, 1.2rem + 2.3vw, 3.5rem);
	--fs-h3:         clamp(1.25rem, 1.08rem + .72vw, 1.75rem);
	--fs-h4:         clamp(1.0625rem, 1rem + .28vw, 1.25rem);
	--fs-body-l:     clamp(1.0625rem, 1rem + .38vw, 1.25rem);
	--fs-body:       clamp(1rem, .98rem + .1vw, 1.0625rem);
	--fs-small:      clamp(.875rem, .86rem + .08vw, .9375rem);
	--fs-label:      clamp(.6875rem, .67rem + .08vw, .75rem);

	/* --- Space (8px base) --- */
	--sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
	--sp-5: 24px;   --sp-6: 32px;   --sp-7: 48px;  --sp-8: 64px;
	--sp-9: 96px;   --sp-10:128px;  --sp-11:176px; --sp-12:240px;

	--section-y: clamp(4.5rem, 2.4rem + 8vw, 11rem);
	--gutter:    clamp(1rem, .55rem + 1.6vw, 2rem);
	--container: 1440px;
	--container-wide: 1680px;
	--measure:   68ch;

	/* --- Chrome --- */
	--header-h: 76px;
	--radius: 0;
	--radius-sm: 6px;    /* cards, chips, small media */
	--radius-md: 10px;   /* feature media, large cards */
	--radius-pill: 999px;
	--shadow-header: 0 1px 0 rgba(10, 16, 32, .08), 0 8px 32px -20px rgba(10, 16, 32, .5);

	/* --- Motion --- */
	--ease-out: cubic-bezier(.22, .61, .36, 1);
	--ease-in-out: cubic-bezier(.65, .05, .36, 1);
	--t-fast: 180ms;
	--t-base: 280ms;
	--t-slow: 600ms;
	--reveal-delay: 0ms;
}

@media (max-width: 899px) {
	:root { --header-h: 64px; }
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--c-paper);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.15; }
p, ul, ol, figure, blockquote, dl, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

a { color: inherit; text-decoration: none; }

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

button { background: none; border: 0; cursor: pointer; }

address { font-style: normal; }

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

/* Focus: always visible, never removed. */
:focus-visible {
	outline: 3px solid var(--c-blue-lift);
	outline-offset: 2px;
}
.section--ink :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.mobile-nav :focus-visible {
	outline-color: var(--c-gold);
}

::selection { background: var(--c-gold); color: var(--c-ink); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px; left: var(--sp-4);
	z-index: 999;
	padding: var(--sp-3) var(--sp-5);
	background: var(--c-gold);
	color: var(--c-ink);
	font-family: var(--f-head);
	font-weight: 700;
	transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-3); }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.container {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
}
.container--wide { max-width: var(--container-wide); width: min(100% - (var(--gutter) * 2), var(--container-wide)); }
.container--narrow { max-width: 820px; }

.site-main { display: block; min-height: 40vh; }

.section { padding-block: var(--section-y); position: relative; }
.section--paper { background: var(--c-paper); color: var(--c-text); }
.section--light { background: var(--c-paper-2); color: var(--c-text); }
.section--ink   { background: var(--c-ink); color: var(--c-text-invert); }
.section--navy  { background: var(--c-navy); color: var(--c-text-invert); }
.section--tight { padding-block: clamp(3rem, 1.6rem + 5vw, 6rem); }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.display {
	font-family: var(--f-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -.02em;
	line-height: .92;
	text-wrap: balance;
}

.eyebrow {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--c-blue);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px var(--sp-3);
	margin: 0 0 var(--sp-4);
}
@media (max-width: 599px) { .eyebrow { letter-spacing: .1em; } }
.eyebrow--invert { color: var(--c-gold-hi); }
.eyebrow__num { color: var(--c-text-muted); }
.eyebrow--invert .eyebrow__num { color: var(--c-text-invert-muted); }

.lead {
	font-size: var(--fs-body-l);
	line-height: 1.55;
	color: var(--c-text-muted);
	max-width: 56ch;
}
.section--ink .lead,
.hero .lead,
.cta-band .lead { color: var(--c-text-invert-muted); }

.mono {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* --- Section header --- */
.section-head { margin-bottom: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem); }
.section-head__title { font-size: var(--fs-display-l); }
.section-head--m .section-head__title { font-size: var(--fs-display-m); }
.section-head__title { max-width: 18ch; }
.section-head__lead { margin-top: var(--sp-5); }
.section-head__action { margin-top: var(--sp-5); }
.section-head.is-invert .section-head__title { color: var(--c-text-invert); }

.section-head--split {
	display: grid;
	gap: var(--sp-5) var(--sp-8);
	grid-template-columns: 1fr;
	align-items: end;
}
@media (min-width: 900px) {
	.section-head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
	.section-head--split .eyebrow { grid-column: 1 / -1; }
	.section-head--split .section-head__title { max-width: none; }
	.section-head--split .section-head__lead { max-width: 46ch; padding-bottom: .4em; margin-top: 0; }
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- Buttons --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 48px;
	padding: 0 var(--sp-5);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--f-head);
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--t-fast) var(--ease-out),
				color var(--t-fast) var(--ease-out),
				border-color var(--t-fast) var(--ease-out);
	white-space: nowrap;
}
.btn .icon { transition: transform var(--t-fast) var(--ease-out); flex: none; }
.btn:hover .icon { transform: translateX(4px); }

.btn--primary { background: var(--c-gold); color: var(--c-ink); }
.btn--primary:hover { background: var(--c-gold-hi); }

.btn--dark { background: var(--c-ink); color: var(--c-text-invert); }
.btn--dark:hover { background: var(--c-navy-2); }

.btn--invert { background: var(--c-paper); color: var(--c-ink); }
.btn--invert:hover { background: var(--c-paper-3); }

.btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-text-invert); }

.btn--ghost-invert { background: transparent; color: var(--c-text-invert); border-color: var(--c-line-dark-2); }
.btn--ghost-invert:hover { background: var(--c-text-invert); color: var(--c-ink); border-color: var(--c-text-invert); }

.btn--link {
	min-height: 44px;
	padding: 0;
	background: none;
	color: var(--c-blue);
	border-bottom: 2px solid currentColor;
	border-radius: 0;
}
.section--ink .btn--link,
.is-invert + * .btn--link { color: var(--c-gold); }
.btn--link:hover { color: var(--c-blue-lift); }

.btn--lg { min-height: 56px; padding: 0 var(--sp-6); font-size: .9375rem; }
.btn--sm { min-height: 44px; padding: 0 var(--sp-4); font-size: .8125rem; }
.btn--block { display: flex; width: 100%; }

/* --- Media wrapper (hover zoom lives here) --- */
.media {
	position: relative;
	overflow: hidden;
	background: var(--c-paper-3);
	margin: 0;
}
.media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow) var(--ease-out);
}
.media__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5, 11, 24, .88) 0%, rgba(5, 11, 24, .34) 46%, rgba(5, 11, 24, 0) 78%);
	pointer-events: none;
}
.media__scrim--strong {
	background: linear-gradient(to top, rgba(5, 11, 24, .94) 4%, rgba(5, 11, 24, .55) 44%, rgba(5, 11, 24, .1) 100%);
}

/* --- Chips & flags --- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 6px 10px;
	border: 1px solid var(--c-line);
	color: var(--c-text-muted);
}
.chips--invert .chip { border-color: var(--c-line-dark-2); color: var(--c-text-invert-muted); }

.flag {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: .09em;
	padding: 4px 9px;
	border: 1px solid currentColor;
	line-height: 1.4;
}
.flag--play { color: var(--c-blue); }
.flag--academy { color: var(--c-gold-deep); }

/* --- Stat --- */
.stat-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--c-line-dark);
	border-block: 1px solid var(--c-line-dark);
}
@media (min-width: 900px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat {
	background: var(--c-ink);
	padding: var(--sp-5) var(--sp-4);
	display: flex;
	flex-direction: column-reverse;
	gap: var(--sp-2);
}
.stat__value {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
	line-height: .9;
	color: var(--c-gold);
	letter-spacing: -.01em;
}
.stat__label {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--c-text-invert-muted);
}

/* --- Breadcrumbs --- */
.crumbs { margin-bottom: var(--sp-5); }
.crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--c-text-muted);
}
.crumbs__item + .crumbs__item::before { content: "/"; margin-right: var(--sp-2); opacity: .5; }
.crumbs__item a:hover { color: var(--c-blue); }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: var(--c-paper);
	border-bottom: 1px solid var(--c-line);
	transition: background-color var(--t-base) var(--ease-out),
				border-color var(--t-base) var(--ease-out),
				box-shadow var(--t-base) var(--ease-out);
}
body:not(.has-immersive-header) { padding-top: var(--header-h); }

/* Transparent over an immersive hero, solid once scrolled. */
.has-immersive-header .site-header {
	background: transparent;
	border-bottom-color: transparent;
	color: var(--c-text-invert);
}
.has-immersive-header .site-header.is-stuck,
.site-header.is-stuck {
	background: var(--c-paper);
	color: var(--c-text);
	border-bottom-color: var(--c-line);
	box-shadow: var(--shadow-header);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	width: min(100% - (var(--gutter) * 2), var(--container-wide));
}

.site-header__brand { flex: none; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }

/* --- Logo --- */
.logo { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 44px; }
.logo__mark { width: auto; height: 34px; color: var(--c-navy); flex: none; transition: color var(--t-base) var(--ease-out); }
.has-immersive-header .site-header:not(.is-stuck) .logo__mark { color: var(--c-text-invert); }
.logo__name {
	font-family: var(--f-head);
	font-weight: 900;
	font-size: .9375rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1;
	white-space: nowrap;
}
.custom-logo { max-height: 46px; width: auto; transition: filter var(--t-base) var(--ease-out); }
.custom-logo-link { display: inline-flex; align-items: center; }
/* A dark client logo would disappear against the hero, so knock it to white
   while the header is transparent and restore it once the header goes solid. */
.has-immersive-header .site-header:not(.is-stuck) .custom-logo { filter: brightness(0) invert(1); }
@media (max-width: 599px) { .custom-logo { max-height: 36px; } }

@media (max-width: 599px) {
	.logo__mark { height: 28px; }
	.logo__name { font-size: .8125rem; }
}

/* --- Desktop nav --- */
.site-nav { display: none; }
@media (min-width: 1080px) {
	.site-nav { display: block; margin-left: var(--sp-6); }
	.site-nav__list { display: flex; align-items: center; gap: clamp(1.25rem, .4rem + 1.3vw, 2.25rem); }
	.site-nav__list > li > a {
		display: inline-flex;
		align-items: center;
		height: var(--header-h);
		font-family: var(--f-head);
		font-size: .8125rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .09em;
		position: relative;
		transition: color var(--t-fast) var(--ease-out);
	}
	.site-nav__list > li > a::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: 22px;
		height: 2px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--t-base) var(--ease-out);
	}
	.site-nav__list > li > a:hover::after,
	.site-nav__list > li.current-menu-item > a::after,
	.site-nav__list > li.current_page_item > a::after,
	.site-nav__list > li.current-menu-ancestor > a::after { transform: scaleX(1); }

	/* Submenus */
	.site-nav__list li { position: relative; }
	.site-nav__list .sub-menu {
		position: absolute;
		top: calc(var(--header-h) - 14px);
		left: -16px;
		min-width: 230px;
		background: var(--c-paper);
		border: 1px solid var(--c-line);
		box-shadow: 0 24px 48px -28px rgba(10, 16, 32, .5);
		padding: var(--sp-2) 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast);
		z-index: 10;
	}
	.site-nav__list li:hover > .sub-menu,
	.site-nav__list li:focus-within > .sub-menu {
		opacity: 1; visibility: visible; transform: translateY(0);
	}
	.site-nav__list .sub-menu a {
		display: block;
		padding: 10px var(--sp-4);
		color: var(--c-text);
		font-size: .9375rem;
	}
	.site-nav__list .sub-menu a:hover { background: var(--c-paper-2); color: var(--c-blue); }
}

/* --- Nav toggle --- */
.nav-toggle {
	width: 48px; height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor;
	color: inherit;
	background: transparent;
	transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
/* Over the hero the header is transparent, so a hairline button can vanish
   against bright photography. Give it a dark plate there. */
.has-immersive-header .site-header:not(.is-stuck) .nav-toggle {
	background: rgba(5, 11, 24, .55);
	border-color: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.nav-toggle:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
@media (min-width: 1080px) { .nav-toggle { display: none; } }

.nav-toggle__bars { display: block; width: 20px; }
.nav-toggle__bars span {
	display: block;
	height: 2px;
	background: currentColor;
	transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.nav-toggle__bars span:first-child { margin-bottom: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 599px) {
	.site-header__actions .btn--primary { display: none; }
}

/* --- Mobile nav --- */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--c-ink);
	color: var(--c-text-invert);
	padding-top: var(--header-h);
	opacity: 0;
	transition: opacity var(--t-base) var(--ease-out);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { opacity: 1; }

.mobile-nav__inner {
	min-height: calc(100dvh - var(--header-h));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-7);
	padding: var(--sp-6) var(--gutter) calc(var(--sp-7) + env(safe-area-inset-bottom));
	max-width: var(--container);
	margin-inline: auto;
	width: 100%;
}

.mobile-nav__list > li > a {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--c-line-dark);
	font-family: var(--f-display);
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	text-transform: uppercase;
	letter-spacing: -.01em;
	line-height: 1.1;
	opacity: 0;
	transform: translateY(14px);
}
.mobile-nav.is-open .mobile-nav__list > li > a {
	animation: nav-in 420ms var(--ease-out) forwards;
	animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes nav-in { to { opacity: 1; transform: none; } }

.mobile-nav__list .sub-menu {
	padding: var(--sp-2) 0 var(--sp-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
}
.mobile-nav__list .sub-menu a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	color: var(--c-text-invert-muted);
	font-size: 1rem;
}

.mobile-nav__foot { display: grid; gap: var(--sp-5); }
.mobile-nav__contact { display: grid; gap: var(--sp-1); }
.mobile-nav__contact a {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 48px;
	color: var(--c-text-invert-muted);
	font-size: .9375rem;
}
.mobile-nav__contact a:hover { color: var(--c-gold); }

/* ==========================================================================
   6. SECTIONS: HOMEPAGE
   ========================================================================== */

/* --- Hero --- */
.hero {
	position: relative;
	min-height: min(100svh, 900px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--c-text-invert);
	padding-top: calc(var(--header-h) + var(--sp-8));
	isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--c-ink); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(5, 11, 24, .94) 0%, rgba(5, 11, 24, .70) 34%, rgba(5, 11, 24, .34) 66%, rgba(5, 11, 24, .52) 100%),
		linear-gradient(to right, rgba(0, 22, 72, .60) 0%, rgba(0, 22, 72, .10) 58%, rgba(0, 22, 72, 0) 100%);
}

.hero__body { padding-bottom: clamp(2.5rem, 1.2rem + 4vw, 5rem); }
.hero__eyebrow { margin-bottom: var(--sp-5); }
.hero__title {
	font-size: var(--fs-display-xl);
	max-width: 16ch;
	margin-bottom: var(--sp-5);
}
.hero__lead { max-width: 52ch; margin-bottom: var(--sp-6); color: var(--c-text-invert-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__stats { background: var(--c-ink); border-top: 1px solid var(--c-line-dark); }
.hero__stats .container { padding-inline: 0; }
.hero__stats .stat-row { border-block: 0; }

.hero__scroll {
	position: absolute;
	right: var(--gutter);
	bottom: calc(100% - 100%);
	display: none;
}
@media (min-width: 1080px) {
	.hero__scroll {
		display: grid;
		place-items: center;
		width: 52px; height: 52px;
		right: var(--gutter);
		top: calc(100svh - 200px);
		border: 1px solid var(--c-line-dark-2);
		color: var(--c-text-invert);
		animation: bob 2.6s var(--ease-in-out) infinite;
	}
	.hero__scroll:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (max-width: 599px) {
	.hero { min-height: min(94svh, 760px); }
	.hero__media img { object-position: center 62%; }
	.hero__actions .btn { flex: 1 1 100%; }
}

/* --- Experience --- */
.experience__grid {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .experience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .experience__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }

.xp-card { background: var(--c-paper); border: 1px solid var(--c-line); height: 100%; }
.xp-card__link { display: flex; flex-direction: column; height: 100%; }
.xp-card__media { aspect-ratio: 4 / 5; }
@media (min-width: 700px) and (max-width: 1179px) { .xp-card__media { aspect-ratio: 3 / 2; } }

.xp-card__body {
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	flex: 1;
}
.xp-card__num { color: var(--c-blue); }
.xp-card__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem); }
.xp-card__copy { color: var(--c-text-muted); font-size: var(--fs-small); line-height: 1.6; }
.xp-card__cta {
	margin-top: auto;
	padding-top: var(--sp-2);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--f-head);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--c-blue);
}
.xp-card__cta .icon { transition: transform var(--t-fast) var(--ease-out); }

/* --- Sports grid --- */
.sports__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 1000px) {
	.sports__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.35fr); align-items: stretch; }
}

.sport-card { position: relative; overflow: hidden; background: var(--c-ink); }
.sport-card__link { display: block; height: 100%; position: relative; }

.sport-card--feature .sport-card__media,
.sport-card--tile .sport-card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.sport-card--feature { min-height: 460px; }
@media (min-width: 1000px) { .sport-card--feature { min-height: 100%; } }

.sport-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: inherit;
	padding: var(--sp-5);
	color: var(--c-text-invert);
	gap: var(--sp-2);
}
.sport-card--feature .sport-card__body { padding: clamp(1.5rem, .8rem + 2.2vw, 2.75rem); }
.sport-card--feature .sport-card__title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem); }
.sport-card--feature .sport-card__copy {
	color: var(--c-text-invert-muted);
	max-width: 42ch;
	font-size: var(--fs-small);
}
.sport-card__cta {
	margin-top: var(--sp-3);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--f-head);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--c-gold);
}
.sport-card__cta .icon { transition: transform var(--t-fast) var(--ease-out); }

.sports__mosaic {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
}
@media (min-width: 620px) { .sports__mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sport-card--tile { min-height: 190px; }
@media (min-width: 1000px) {
	.sport-card--tile { min-height: 220px; }
	.sports__grid { align-items: stretch; }
	.sports__grid > .sport-card--feature { grid-row: 1; }
}
.sport-card--tile .sport-card__title {
	font-family: var(--f-head);
	font-size: var(--fs-h4);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.sport-card--tile .sport-card__meta { color: var(--c-text-invert-muted); }

/* --- Performance --- */
.performance__top { display: grid; gap: var(--sp-8); }
@media (min-width: 1000px) {
	.performance__top { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
}

.ladder { display: grid; gap: 0; border-top: 1px solid var(--c-line-dark); }
.ladder__step {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--c-line-dark);
	align-items: baseline;
}
.ladder__num { color: var(--c-gold); }
.ladder__body { display: grid; gap: 2px; }
.ladder__name {
	font-family: var(--f-head);
	font-weight: 800;
	font-size: var(--fs-h4);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.ladder__copy { color: var(--c-text-invert-muted); font-size: var(--fs-small); }

.performance__media { position: relative; display: grid; gap: var(--sp-4); }
.performance__media .media--tall { aspect-ratio: 4 / 5; }
.performance__media .media--offset { aspect-ratio: 3 / 2; }
@media (min-width: 1000px) {
	.performance__media .media--offset {
		position: absolute;
		bottom: calc(var(--sp-8) * -1);
		left: calc(var(--sp-8) * -1);
		width: 58%;
		border: 8px solid var(--c-ink);
		z-index: 2;
	}
	.performance__media { padding-bottom: var(--sp-8); }
}

.pathway {
	margin-top: clamp(3.5rem, 2rem + 6vw, 8rem);
	padding-top: var(--sp-7);
	border-top: 1px solid var(--c-line-dark);
}
.pathway__title { font-size: var(--fs-display-m); max-width: 20ch; margin-bottom: var(--sp-7); }

.pathway__rail {
	display: grid;
	gap: var(--sp-4);
	grid-auto-flow: column;
	grid-auto-columns: minmax(150px, 1fr);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: var(--sp-3);
	-webkit-overflow-scrolling: touch;
}
.pathway__stage {
	scroll-snap-align: start;
	display: grid;
	gap: var(--sp-2);
	padding-top: var(--sp-5);
	position: relative;
	border-top: 1px solid var(--c-line-dark-2);
}
.pathway__dot {
	position: absolute;
	top: -5px; left: 0;
	width: 9px; height: 9px;
	background: var(--c-gold);
}
.pathway__num { color: var(--c-gold); }
.pathway__name {
	font-family: var(--f-head);
	font-weight: 800;
	font-size: var(--fs-h4);
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* --- Community --- */
.community__mosaic {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.community__frame { aspect-ratio: 3 / 2; }

@media (min-width: 900px) {
	/* A deliberate six-row composition: the two gaps (top-centre, bottom-centre)
	   are the negative space that makes the block read as art-directed rather
	   than as a gallery. */
	.community__mosaic {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-auto-rows: clamp(64px, 8.2vw, 130px);
	}
	.community__frame { aspect-ratio: auto; }
	.community__frame--a { grid-column: 1 / 6;   grid-row: 1 / 4; }
	.community__frame--c { grid-column: 10 / 13; grid-row: 1 / 4; }
	.community__frame--b { grid-column: 6 / 10;  grid-row: 2 / 6; }
	.community__frame--d { grid-column: 1 / 6;   grid-row: 4 / 7; }
	.community__frame--e { grid-column: 10 / 13; grid-row: 4 / 7; }
}

.community__note {
	margin-top: clamp(2.5rem, 1.4rem + 4vw, 5rem);
	display: grid;
	gap: var(--sp-5);
	align-items: center;
}
@media (min-width: 900px) {
	.community__note { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); }
}
.community__quote {
	font-family: var(--f-display);
	text-transform: uppercase;
	font-size: var(--fs-display-m);
	line-height: 1;
	letter-spacing: -.015em;
	max-width: 22ch;
}

/* --- Events --- */
.events__list { display: grid; gap: var(--sp-4); }
@media (min-width: 780px)  { .events__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.event-card { border: 1px solid var(--c-line-dark); background: var(--c-ink-2); }
.event-card__link { display: block; height: 100%; }
.event-card__media { aspect-ratio: 16 / 9; }

.event-card__body {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--sp-4);
	padding: var(--sp-5);
	align-items: start;
}
.event-card__date {
	display: grid;
	place-items: center;
	min-width: 62px;
	padding: var(--sp-2);
	border: 1px solid var(--c-line-dark-2);
	color: var(--c-gold);
	line-height: 1.1;
}
.event-card__day { font-size: 1.5rem; font-weight: 600; }
.event-card__month { font-size: var(--fs-label); }
.event-card__when { font-size: var(--fs-label); text-align: center; }
.event-card__type { color: var(--c-text-invert-muted); margin-bottom: var(--sp-2); }
.event-card__title {
	font-family: var(--f-head);
	font-size: var(--fs-h3);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--c-text-invert);
}
.event-card__copy { margin-top: var(--sp-2); color: var(--c-text-invert-muted); font-size: var(--fs-small); }
.event-card__venue {
	margin-top: var(--sp-3);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--c-text-invert-muted);
	font-size: var(--fs-small);
}
.event-card__go { color: var(--c-gold); transition: transform var(--t-fast) var(--ease-out); }

@media (max-width: 519px) {
	.event-card__body { grid-template-columns: auto 1fr; }
	.event-card__go { display: none; }
}

/* --- The Space / flagship --- */
.flagship { position: relative; overflow: hidden; margin-bottom: var(--sp-5); background: var(--c-ink); }
.flagship__link { display: block; }
.flagship__media { position: absolute; inset: 0; aspect-ratio: auto; }
.flagship__media .media__scrim--strong {
	background:
		linear-gradient(to top, rgba(5, 11, 24, .95) 2%, rgba(5, 11, 24, .6) 46%, rgba(5, 11, 24, .12) 100%),
		linear-gradient(to right, rgba(5, 11, 24, .82) 0%, rgba(5, 11, 24, .28) 52%, rgba(5, 11, 24, 0) 82%);
}

.flagship__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: clamp(1.75rem, 1rem + 3vw, 4rem);
	padding-top: clamp(9rem, 5rem + 18vw, 17rem);
	color: var(--c-text-invert);
	max-width: 62ch;
}
.flagship__title { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); }
.flagship__locality { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-gold); font-family: var(--f-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; }
.flagship__copy { color: var(--c-text-invert-muted); font-size: var(--fs-small); }
.flagship__cta { margin-top: var(--sp-3); pointer-events: none; }

.centres-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .centres-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .centres-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.centre-card { background: var(--c-paper); border: 1px solid var(--c-line); height: 100%; }
.centre-card__link { display: flex; flex-direction: column; height: 100%; }
.centre-card__media { aspect-ratio: 3 / 2; }
.centre-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.centre-card__title { font-family: var(--f-head); font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; }
.centre-card__locality { color: var(--c-text-muted); }
.centre-card__flags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.centre-card__sports { font-size: var(--fs-small); color: var(--c-text-muted); }
.centre-card__more { color: var(--c-blue); white-space: nowrap; }
.centre-card__go {
	margin-top: auto;
	padding-top: var(--sp-3);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--f-head);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--c-blue);
}
.centre-card__go .icon { transition: transform var(--t-fast) var(--ease-out); }

/* --- Social proof --- */
.quotes { display: grid; gap: var(--sp-4); }
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quote {
	border: 1px solid var(--c-line);
	padding: var(--sp-6) var(--sp-5) var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	background: var(--c-paper);
}
.quote__mark { color: var(--c-gold-deep); }
.quote__body p { font-size: var(--fs-body-l); line-height: 1.5; }
.quote__meta { margin-top: auto; display: grid; gap: 2px; padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.quote__name { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .9375rem; }
.quote__role, .quote__source {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--c-text-muted);
}

/* --- Partner logo marquee -------------------------------------------------
   One track holding the logo list twice, translated exactly -50% on a linear
   loop, so the seam never shows. Paused on hover and on keyboard focus, and
   stopped entirely under prefers-reduced-motion, where it falls back to a
   static wrapped row.
   -------------------------------------------------------------------------- */

.logo-wall { margin-top: clamp(3rem, 1.6rem + 4.5vw, 6rem); }
.logo-wall__heading {
	justify-content: center;
	color: var(--c-text-muted);
	margin-bottom: var(--sp-5);
}
.logo-wall--invert .logo-wall__heading { color: var(--c-text-invert-muted); }

.marquee {
	position: relative;
	overflow: hidden;
	border-block: 1px solid var(--c-line);
	padding-block: var(--sp-5);
	/* Fade the two edges so logos resolve into the field instead of being
	   sliced by the container. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.logo-wall--invert .marquee { border-block-color: var(--c-line-dark); }

.marquee__track {
	display: flex;
	width: max-content;
	animation: ninetyone-marquee var(--marquee-duration, 45s) linear infinite;
	will-change: transform;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes ninetyone-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.marquee__set {
	display: flex;
	align-items: center;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.marquee__item {
	flex: none;
	width: clamp(170px, 16vw, 240px);
	height: 84px;
	padding: 0 var(--sp-4);
	display: grid;
	place-items: center;
}
.marquee__item img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .58;
	transition: filter var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
/* Optical balance, in explicit pixels.
   Two problems get solved here. Contain-fitting every mark into one box
   renders square crests at the full cell height and long wordmarks at barely
   half that, so the row stops reading as a line. And a percentage max-height
   does not reliably resolve against a grid item whose height comes from its
   parent, which let the crests render at 101px inside an 84px cell and hang
   below the line. Fixed caps solve both: every mark now lands between 56 and
   64px, with crests smallest because a solid badge reads heavier than spaced
   letterforms. */
.marquee__item--wide  img { max-height: 60px; }
.marquee__item--mid   img { max-height: 64px; }
.marquee__item--crest img { max-height: 64px; }
.marquee__item img:hover { filter: none; opacity: 1; }
.logo-wall--invert .marquee__item img { filter: grayscale(1) brightness(0) invert(1); opacity: .5; }
.logo-wall--invert .marquee__item img:hover { filter: none; opacity: 1; }

/* Items shrink on small screens, so the track gets shorter. Scale the
   duration by the same factor to keep the pixel speed identical at every
   breakpoint. */
@media (max-width: 719px) {
	.marquee__track { animation-duration: calc(var(--marquee-duration, 45s) * .74); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee {
		-webkit-mask-image: none;
		mask-image: none;
		overflow-x: auto;
	}
	.marquee__track { animation: none; }
	/* The repeat only exists to hide the loop seam; without motion it is noise. */
	.marquee__set[aria-hidden="true"] { display: none; }
	.marquee__set { flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   7. ARCHIVES & SINGLES
   ========================================================================== */

.page-hero {
	position: relative;
	background: var(--c-ink);
	color: var(--c-text-invert);
	padding-top: calc(var(--header-h) + clamp(3rem, 1.6rem + 5vw, 6.5rem));
	padding-bottom: clamp(2.5rem, 1.4rem + 4vw, 5rem);
	isolation: isolate;
	overflow: hidden;
}
.page-hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(5, 11, 24, .96) 6%, rgba(5, 11, 24, .72) 52%, rgba(5, 11, 24, .5) 100%);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__inner { max-width: min(100%, 1040px); }
.page-hero__title { font-size: var(--fs-display-l); max-width: 17ch; }
.page-hero__lead { max-width: 58ch; margin-top: var(--sp-5); }
.page-hero--l .page-hero__title { font-size: var(--fs-display-xl); max-width: 14ch; }
.page-hero--s { padding-bottom: clamp(2rem, 1.2rem + 2.4vw, 3rem); }
.page-hero--s .page-hero__title { font-size: var(--fs-display-m); max-width: 24ch; }
.page-hero .crumbs { color: var(--c-text-invert-muted); }
.page-hero .crumbs a:hover { color: var(--c-gold); }

.archive-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.archive-grid--4 { }
@media (min-width: 1280px) { .archive-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Generic media card used by sport / programme / institution archives */
.tile-card { background: var(--c-paper); border: 1px solid var(--c-line); height: 100%; }
.section--ink .tile-card,
.tile-card--dark { background: var(--c-ink-2); border-color: var(--c-line-dark); }
.tile-card__link { display: flex; flex-direction: column; height: 100%; }
.tile-card__media { aspect-ratio: 3 / 2; }
.tile-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.tile-card__title { font-family: var(--f-head); font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; }
.tile-card__copy { color: var(--c-text-muted); font-size: var(--fs-small); }
.tile-card--dark .tile-card__copy { color: var(--c-text-invert-muted); }
.tile-card__go {
	margin-top: auto;
	padding-top: var(--sp-3);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--f-head);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--c-blue);
}
.tile-card--dark .tile-card__go { color: var(--c-gold); }
.tile-card__go .icon { transition: transform var(--t-fast) var(--ease-out); }

/* --- Single: centre --- */
.centre-layout { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
@media (min-width: 1000px) { .centre-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

.offer-block + .offer-block { margin-top: var(--sp-8); }
.offer-block__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 2px solid var(--c-ink);
	margin-bottom: var(--sp-5);
	flex-wrap: wrap;
}
.offer-block__title {
	font-family: var(--f-display);
	text-transform: uppercase;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	letter-spacing: -.01em;
	line-height: 1;
}
.offer-block__count { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--c-text-muted); text-transform: uppercase; }

.offer-list { display: grid; gap: 0; }
.offer-list li {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--c-line);
	font-family: var(--f-head);
	font-weight: 600;
	font-size: var(--fs-h4);
}
.offer-list .icon { color: var(--c-blue); flex: none; }
.offer-block--academy .offer-list .icon { color: var(--c-gold-deep); }

.centre-aside {
	border: 1px solid var(--c-line);
	background: var(--c-paper-2);
	padding: var(--sp-5);
	display: grid;
	gap: var(--sp-4);
}
@media (min-width: 1000px) { .centre-aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }
.centre-aside__row { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); }
.centre-aside__row .icon { color: var(--c-blue); flex: none; margin-top: 2px; }
.centre-aside__row a:hover { color: var(--c-blue); text-decoration: underline; }
.centre-aside__actions { display: grid; gap: var(--sp-2); }

/* --- Single: event --- */
.event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-6);
	padding: var(--sp-4) 0;
	border-block: 1px solid var(--c-line);
	margin-bottom: var(--sp-7);
}
.event-meta__item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--c-text-muted);
}
.event-meta__item .icon { color: var(--c-blue); }

/* --- Related rail --- */
.related { border-top: 1px solid var(--c-line); }
.related__title { font-family: var(--f-display); text-transform: uppercase; font-size: var(--fs-display-m); margin-bottom: var(--sp-6); }

/* --- Pagination --- */
.pagination {
	margin-top: clamp(2.5rem, 1.4rem + 3.5vw, 4.5rem);
	display: flex;
	justify-content: center;
}
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 var(--sp-3);
	border: 1px solid var(--c-line);
	font-family: var(--f-mono);
	font-size: var(--fs-small);
	transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pagination .page-numbers:hover { border-color: var(--c-ink); }
.pagination .page-numbers.current { background: var(--c-ink); color: var(--c-text-invert); border-color: var(--c-ink); }

/* --- Empty state --- */
.empty-state {
	border: 1px dashed var(--c-line-strong);
	padding: clamp(2rem, 1.2rem + 3vw, 4rem);
	text-align: center;
	color: var(--c-text-muted);
}
.empty-state__title { font-family: var(--f-head); font-size: var(--fs-h3); font-weight: 800; color: var(--c-text); margin-bottom: var(--sp-3); }

/* ==========================================================================
   8. EDITORIAL / PROSE
   ========================================================================== */

.prose { max-width: var(--measure); font-size: var(--fs-body-l); line-height: 1.7; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
	font-family: var(--f-display);
	text-transform: uppercase;
	font-size: var(--fs-display-m);
	letter-spacing: -.015em;
	line-height: 1;
	margin-top: 2em;
}
.prose h3 {
	font-family: var(--f-head);
	font-size: var(--fs-h3);
	font-weight: 800;
	margin-top: 1.8em;
}
.prose h4 { font-family: var(--f-head); font-size: var(--fs-h4); font-weight: 700; margin-top: 1.6em; }
.prose a { color: var(--c-blue-lift); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--c-blue); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--c-blue); }
.prose blockquote {
	border-left: 3px solid var(--c-gold);
	padding-left: var(--sp-5);
	font-size: var(--fs-display-m);
	font-family: var(--f-head);
	font-weight: 600;
	line-height: 1.25;
	margin-block: 1.6em;
}
.prose img, .prose figure { margin-block: 1.8em; }
.prose figcaption { font-family: var(--f-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-muted); margin-top: var(--sp-3); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.prose th { font-family: var(--f-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; }
.prose code { font-family: var(--f-mono); font-size: .9em; background: var(--c-paper-2); padding: 2px 6px; }
.prose pre { background: var(--c-ink); color: var(--c-text-invert); padding: var(--sp-5); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }

.alignwide { width: min(100vw - (var(--gutter) * 2), var(--container)); margin-inline: auto; max-width: none; }
.alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }
.alignleft { float: left; margin: .3em var(--sp-5) var(--sp-4) 0; }
.alignright { float: right; margin: .3em 0 var(--sp-4) var(--sp-5); }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.sticky .entry-title::after { content: " ★"; color: var(--c-gold); }

/* ==========================================================================
   9. FORMS & COMMENTS
   ========================================================================== */

label { display: block; font-family: var(--f-head); font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--sp-2); }

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="number"], input[type="date"], textarea, select {
	width: 100%;
	min-height: 48px;
	padding: 12px var(--sp-4);
	background: var(--c-paper);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius);
	font-size: 1rem; /* 16px, prevents iOS zoom on focus */
	transition: border-color var(--t-fast) var(--ease-out);
}
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--c-blue-lift); }
::placeholder { color: #9AA4B6; opacity: 1; }

input[type="submit"], button[type="submit"], .wp-block-search__button {
	min-height: 48px;
	padding: 0 var(--sp-5);
	background: var(--c-gold);
	color: var(--c-ink);
	border: 0;
	font-family: var(--f-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .875rem;
	cursor: pointer;
	transition: background-color var(--t-fast) var(--ease-out);
	width: auto;
}
input[type="submit"]:hover, button[type="submit"]:hover { background: var(--c-gold-hi); }

.search-form { display: flex; gap: var(--sp-2); }
.search-form label { flex: 1; margin: 0; }

.comments-area { margin-top: clamp(3rem, 1.6rem + 4vw, 5rem); padding-top: var(--sp-7); border-top: 1px solid var(--c-line); }
.comments-title, .comment-reply-title { font-family: var(--f-head); font-size: var(--fs-h3); font-weight: 800; margin-bottom: var(--sp-5); }
.comment-list { display: grid; gap: var(--sp-5); }
.comment-list ol.children { margin-top: var(--sp-5); padding-left: var(--sp-5); border-left: 1px solid var(--c-line); display: grid; gap: var(--sp-5); }
.comment-body { display: grid; gap: var(--sp-2); }
.comment-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; font-family: var(--f-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-muted); }
.comment-author .avatar { border-radius: 50%; }
.comment-form { display: grid; gap: var(--sp-4); max-width: 640px; }
.comment-form .form-submit { margin: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
	background: var(--c-ink);
	color: var(--c-text-invert);
	padding-block: clamp(3rem, 1.8rem + 5vw, 6rem) var(--sp-6);
}
.site-footer__top {
	display: grid;
	gap: var(--sp-7);
	padding-bottom: var(--sp-7);
	border-bottom: 1px solid var(--c-line-dark);
}
@media (min-width: 700px)  { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--sp-6); } }

.logo--footer .logo__mark { height: 40px; color: var(--c-text-invert); }
.site-footer__tagline { margin-top: var(--sp-4); color: var(--c-text-invert-muted); font-size: var(--fs-small); max-width: 34ch; }
.site-footer__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.site-footer__social a {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 1px solid var(--c-line-dark-2);
	color: var(--c-text-invert-muted);
	transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.site-footer__social a:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }

.footer__heading {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--c-gold);
	margin-bottom: var(--sp-4);
}
.footer__list { display: grid; gap: 0; }
.footer__list a {
	display: block;
	padding: 7px 0;
	color: var(--c-text-invert-muted);
	font-size: var(--fs-small);
	transition: color var(--t-fast) var(--ease-out);
}
.footer__list a:hover { color: var(--c-text-invert); }
.footer__note { color: var(--c-text-invert-muted); font-size: var(--fs-small); }

.footer__external { margin-top: var(--sp-4); }
.footer__external a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	color: var(--c-gold);
	font-family: var(--f-head);
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.footer__address { display: grid; gap: var(--sp-3); }
.footer__address-line { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); color: var(--c-text-invert-muted); }
.footer__address-line .icon { color: var(--c-gold); flex: none; margin-top: 3px; }
.footer__address-line a:hover { color: var(--c-text-invert); }

.site-footer__bottom {
	padding-top: var(--sp-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-6);
	align-items: center;
	justify-content: space-between;
	font-size: var(--fs-small);
	color: var(--c-text-invert-muted);
}
.footer__legal-list { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__legal-list a:hover, .site-footer__credit a:hover { color: var(--c-text-invert); }
.site-footer__credit a { color: var(--c-gold); }
.site-footer__widgets { margin-top: var(--sp-6); display: grid; gap: var(--sp-5); }
.site-footer__widgets h2,
.site-footer__widgets h3,
.site-footer__widgets .wp-block-heading {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--c-gold);
	margin-bottom: var(--sp-3);
}
.site-footer__widgets ul { display: grid; gap: 0; }
.site-footer__widgets li a,
.site-footer__widgets p {
	display: block;
	padding: 5px 0;
	color: var(--c-text-invert-muted);
	font-size: var(--fs-small);
}
.site-footer__widgets li a:hover { color: var(--c-text-invert); }

/* --- Filter bar (archives) --- */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
	padding-bottom: var(--sp-5);
	margin-bottom: var(--sp-6);
	border-bottom: 1px solid var(--c-line);
}
.filter-bar__label { color: var(--c-text-muted); }
.filter-bar__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 40px;
	padding: 0 var(--sp-4);
	border: 1px solid var(--c-line-strong);
	font-family: var(--f-head);
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	transition: background-color var(--t-fast) var(--ease-out),
				color var(--t-fast) var(--ease-out),
				border-color var(--t-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--c-ink); }
.filter-chip.is-active { background: var(--c-ink); color: var(--c-text-invert); border-color: var(--c-ink); }
.filter-chip__count { font-family: var(--f-mono); font-weight: 500; opacity: .6; }

/* --- Small layout helpers used by templates --- */
.search-page__form { max-width: 520px; margin-bottom: var(--sp-7); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.post-taxonomy { margin-top: var(--sp-6); color: var(--c-text-muted); }
.post-taxonomy a:hover { color: var(--c-blue); }
.event-single__cta { margin-top: var(--sp-7); }
.centre-intro { margin-bottom: var(--sp-8); }
.tile-card__kind { color: var(--c-blue); }
.tile-card--dark .tile-card__kind { color: var(--c-gold); }
.centre-aside__terms-label { color: var(--c-text-muted); margin-bottom: var(--sp-3); }
.centre-aside__terms { display: grid; }
.offer-list--compact li {
	padding: var(--sp-2) 0;
	font-size: var(--fs-small);
	font-weight: 500;
	border-bottom: 1px solid var(--c-line);
}
.offer-list--compact li:last-child { border-bottom: 0; }
.centre-aside a.chip:hover { border-color: var(--c-blue); color: var(--c-blue); }

.page-links {
	margin-top: var(--sp-6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	font-family: var(--f-mono);
	font-size: var(--fs-small);
}
.page-links a {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	border: 1px solid var(--c-line);
}
.page-links a:hover { border-color: var(--c-ink); }

/* Sticky header offset for anchor targets inside prose */
.prose :target { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ==========================================================================
   JOURNEY: branching vertical timeline (About)
   A spine runs down the centre; each year's entries branch left or right.
   Track colour is supplementary, every entry also prints its track name.
   ========================================================================== */

.journey__key {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-5);
	margin-bottom: var(--sp-8);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-line-dark);
}
.journey__key-item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-text-invert-muted);
}
.journey__key-dot { width: 9px; height: 9px; flex: none; background: currentColor; border-radius: 2px; }
.journey__key-item--milestone .journey__key-dot { color: var(--c-gold); }
.journey__key-item--facility  .journey__key-dot { color: var(--c-track-facility); }
.journey__key-item--programme .journey__key-dot { color: var(--c-track-programme); }
.journey__key-item--school    .journey__key-dot { color: var(--c-track-school); }
.journey__key-item--education .journey__key-dot { color: var(--c-track-education); }

/* --- The spine --------------------------------------------------------- */
.journey__spine {
	position: relative;
	display: grid;
	gap: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
	margin: 0 auto;
	padding: var(--sp-4) 0;
}
.journey__spine::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 7px;
	width: 2px;
	background: linear-gradient(to bottom,
		transparent 0,
		var(--c-line-dark-2) 4%,
		var(--c-line-dark-2) 96%,
		transparent 100%);
}

.journey__year {
	position: relative;
	padding-left: calc(var(--sp-6) + var(--sp-2));
	display: grid;
	gap: var(--sp-3);
	align-content: start;
}

.journey__marker {
	position: absolute;
	top: 9px;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: var(--c-ink);
	border: 2px solid var(--c-gold);
	z-index: 2;
}
.journey__year--left .journey__marker { border-color: var(--c-track-facility); }

.journey__label {
	font-family: var(--f-display);
	font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--c-gold);
	font-weight: 400;
}

.journey__branches { display: grid; gap: var(--sp-3); }

.journey__branch {
	position: relative;
	border: 1px solid var(--c-line-dark);
	border-left: 3px solid var(--c-line-dark-2);
	border-radius: var(--radius-sm);
	background: var(--c-ink-2);
	padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
	display: grid;
	gap: 5px;
	transition: border-color var(--t-base) var(--ease-out),
				background-color var(--t-base) var(--ease-out),
				transform var(--t-base) var(--ease-out);
}
.journey__branch:hover { transform: translateX(4px); background: #10192E; }

.journey__branch--milestone { border-left-color: var(--c-gold); }
.journey__branch--facility  { border-left-color: var(--c-track-facility); }
.journey__branch--programme { border-left-color: var(--c-track-programme); }
.journey__branch--school    { border-left-color: var(--c-track-school); }
.journey__branch--education { border-left-color: var(--c-track-education); }

.journey__track { color: var(--c-text-invert-muted); font-size: 10.5px; }
.journey__branch--milestone .journey__track { color: var(--c-gold); }
.journey__what {
	font-family: var(--f-head);
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--c-text-invert);
}

/* --- Two-sided branching from a centre spine, once there is room ------- */
@media (min-width: 900px) {
	.journey__spine {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: start;
		gap: clamp(2.5rem, 1.4rem + 3vw, 4.5rem) 0;
		max-width: 1120px;
	}
	.journey__spine::before { left: 50%; transform: translateX(-1px); }

	.journey__year { padding-left: 0; }

	/* right-hand years sit in column 3, left-hand in column 1 */
	.journey__year--right { grid-column: 3; padding-left: clamp(2rem, 3vw, 3.25rem); text-align: left; }
	.journey__year--left  { grid-column: 1; padding-right: clamp(2rem, 3vw, 3.25rem); text-align: right; }

	/* Absolute offsets resolve against the padding box, which starts at the
	   column edge, i.e. already on the spine. Offset by half the marker only. */
	.journey__marker { top: 12px; left: auto; }
	.journey__year--right .journey__marker { left: -8px; }
	.journey__year--left  .journey__marker { right: -8px; left: auto; }

	/* the little arm from the spine out to the year */
	.journey__year::before {
		content: "";
		position: absolute;
		top: 19px;
		height: 2px;
		width: clamp(2rem, 3vw, 3.25rem);
		background: var(--c-line-dark-2);
	}
	.journey__year--right::before { left: 0; }
	.journey__year--left::before  { right: 0; }

	.journey__year--left .journey__branch {
		border-left: 1px solid var(--c-line-dark);
		border-right: 3px solid var(--c-line-dark-2);
		padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4);
	}
	.journey__year--left .journey__branch:hover { transform: translateX(-4px); }
	.journey__year--left .journey__branch--milestone { border-right-color: var(--c-gold); }
	.journey__year--left .journey__branch--facility  { border-right-color: var(--c-track-facility); }
	.journey__year--left .journey__branch--programme { border-right-color: var(--c-track-programme); }
	.journey__year--left .journey__branch--school    { border-right-color: var(--c-track-school); }
	.journey__year--left .journey__branch--education { border-right-color: var(--c-track-education); }

	/* pull each side up so the two columns interleave rather than sitting
	   in strict rows, which is what makes it read as a branch */
	.journey__year--left { margin-top: clamp(3rem, 5vw, 5.5rem); }
}

@media (prefers-reduced-motion: reduce) {
	.journey__branch:hover,
	.journey__year--left .journey__branch:hover { transform: none; }
}

/* ==========================================================================
   FOUNDER + LEADERSHIP (About)
   ========================================================================== */

.founder__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
	.founder__grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
}

.founder__media { position: relative; }
.founder__media .media__img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.founder__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: grid;
	gap: 2px;
	padding: var(--sp-6) var(--sp-4) var(--sp-4);
	color: var(--c-text-invert);
	background: linear-gradient(to top, rgba(5, 11, 24, .92) 12%, rgba(5, 11, 24, 0) 100%);
}
.founder__name { font-family: var(--f-head); font-weight: 900; font-size: 1.125rem; text-transform: uppercase; letter-spacing: .04em; }
.founder__role { color: var(--c-gold-hi); }

.founder__body { display: grid; gap: var(--sp-5); }
.founder__quote {
	margin: 0;
	border-left: 3px solid var(--c-gold);
	padding-left: var(--sp-5);
}
.founder__quote p {
	font-family: var(--f-head);
	font-weight: 600;
	font-size: clamp(1.125rem, 1rem + .8vw, 1.625rem);
	line-height: 1.32;
	letter-spacing: -.01em;
}
.founder__bio { max-width: 60ch; }
.founder__bio p + p { margin-top: 1em; }

/* --- People grid --- */
.people-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 560px)  { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.person { border: 1px solid var(--c-line); background: var(--c-paper); display: flex; flex-direction: column; }
.person__media { aspect-ratio: 4 / 5; }
.person__monogram {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--c-paper-3);
	color: var(--c-navy);
	font-family: var(--f-display);
	font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
	letter-spacing: .02em;
	opacity: .45;
}
.person__body { padding: var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; flex: 1; }
.person__name { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-h3); letter-spacing: -.01em; }
.person__role { color: var(--c-blue); }
.person__cred { font-size: var(--fs-small); color: var(--c-text-muted); }

.person__more { margin-top: var(--sp-2); }
.person__more summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-family: var(--f-head);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--c-blue);
	border-bottom: 2px solid currentColor;
	align-self: start;
	width: fit-content;
}
.person__more summary::-webkit-details-marker { display: none; }
.person__more summary:hover { color: var(--c-blue-lift); }
.person__more .person__more-close { display: none; }
.person__more[open] .person__more-open { display: none; }
.person__more[open] .person__more-close { display: inline; }
.person__bio { padding-top: var(--sp-3); font-size: var(--fs-small); line-height: 1.6; color: var(--c-text-muted); }
.person__bio p + p { margin-top: .8em; }

/* --- About page prose: the h2s become display markers ------------------- */
.page-template-page-about .prose h2,
.about-prose h2 {
	font-family: var(--f-display);
	text-transform: uppercase;
	font-size: clamp(1.75rem, 1.2rem + 2.1vw, 3rem);
	letter-spacing: -.018em;
	line-height: .98;
	margin-top: 1.6em;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
}
.page-template-page-about .prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* Vision / mission lists read as a set of statements, not a bulleted list. */
.page-template-page-about .prose ul {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 0;
	margin-top: 1.2em;
}
@media (min-width: 760px) {
	.page-template-page-about .prose ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-6); }
}
.page-template-page-about .prose ul li {
	position: relative;
	margin: 0;
	padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--c-line);
	font-family: var(--f-head);
	font-weight: 500;
	font-size: 1.0625rem;
	line-height: 1.45;
}
.page-template-page-about .prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.55em;
	width: 12px;
	height: 2px;
	background: var(--c-blue);
}

/* ==========================================================================
   ABOUT: gallery wall
   Nine frames on an explicit six-column grid. Every slot is placed by hand so
   the wall tiles completely, with one upright, one wide banner, two medium and
   five small frames carrying the rhythm.
   ========================================================================== */

.gallery__head {
	display: grid;
	gap: var(--sp-5);
	margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
}
@media (min-width: 900px) {
	.gallery__head {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: end;
		gap: var(--sp-8);
	}
}
.gallery__title {
	font-size: var(--fs-display-l);
	max-width: 15ch;
	color: var(--c-text-invert);
}
.gallery__note {
	color: var(--c-text-invert-muted);
	font-size: var(--fs-small);
	max-width: 40ch;
	padding-bottom: .5em;
}

.gallery__wall {
	display: grid;
	gap: clamp(8px, .8vw, 16px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: clamp(96px, 22vw, 190px);
}

.gallery__frame {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--radius-md);
	background: var(--c-ink-2);
}
.gallery__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Two-column phone layout: the upright and the banner keep their character. */
.gallery__frame--a { grid-column: span 1; grid-row: span 2; }
.gallery__frame--d { grid-column: span 2; grid-row: span 1; }

@media (min-width: 760px) {
	.gallery__wall {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: clamp(70px, 7.4vw, 122px);
	}

	/* row 1-4 */
	.gallery__frame--a { grid-column: 1 / 3; grid-row: 1 / 5; }
	.gallery__frame--b { grid-column: 3 / 5; grid-row: 1 / 3; }
	.gallery__frame--c { grid-column: 5 / 7; grid-row: 1 / 3; }
	.gallery__frame--d { grid-column: 3 / 7; grid-row: 3 / 5; }

	/* row 5-7 */
	.gallery__frame--e { grid-column: 1 / 4; grid-row: 5 / 8; }
	.gallery__frame--f { grid-column: 4 / 7; grid-row: 5 / 8; }

	/* row 8-9 */
	.gallery__frame--g { grid-column: 1 / 3; grid-row: 8 / 10; }
	.gallery__frame--h { grid-column: 3 / 5; grid-row: 8 / 10; }
	.gallery__frame--i { grid-column: 5 / 7; grid-row: 8 / 10; }
}

/* ==========================================================================
   CLOSING CTA BAND
   A framed band rather than text floating on a photograph: hairline rules top
   and bottom, the statement held left, the actions in their own column, and
   the monogram sitting behind as a compositional anchor.
   ========================================================================== */

.cta-band {
	position: relative;
	isolation: isolate;
	padding-block: clamp(4.5rem, 2.4rem + 7.5vw, 10rem);
	color: var(--c-text-invert);
	background: var(--c-ink);
	overflow: hidden;
	border-top: 1px solid var(--c-line-dark);
}
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.cta-band__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(5, 11, 24, .96) 0%, rgba(5, 11, 24, .88) 38%, rgba(5, 11, 24, .58) 72%, rgba(5, 11, 24, .70) 100%),
		linear-gradient(to top, rgba(0, 22, 72, .60) 0%, rgba(0, 22, 72, 0) 55%);
}

/* The monogram, very quiet, anchoring the right-hand side. */
.cta-band__watermark {
	position: absolute;
	z-index: -1;
	right: calc(var(--gutter) * -1);
	top: 50%;
	transform: translateY(-50%);
	width: clamp(280px, 34vw, 560px);
	color: var(--c-text-invert);
	opacity: .07;
	pointer-events: none;
	display: none;
}
@media (min-width: 1000px) { .cta-band__watermark { display: block; } }
.cta-band__watermark .logo__mark { width: 100%; height: auto; }

.cta-band__inner {
	display: grid;
	gap: clamp(2.25rem, 1.4rem + 3vw, 4rem);
	padding-block: clamp(1.75rem, 1rem + 2.4vw, 3rem);
	border-block: 1px solid var(--c-line-dark-2);
}
@media (min-width: 900px) {
	.cta-band__inner {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
		align-items: center;
	}
}

.cta-band__statement { min-width: 0; }
.cta-band__title {
	font-size: clamp(2.25rem, 1.3rem + 3.9vw, 4.75rem);
	max-width: 14ch;
	margin-bottom: var(--sp-5);
	text-wrap: balance;
}
.cta-band__lead { max-width: 46ch; margin: 0; }

.cta-band__actions { display: grid; gap: var(--sp-3); align-content: center; }

.cta-band__contact {
	margin-top: var(--sp-3);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line-dark);
	display: grid;
	gap: var(--sp-1);
}
.cta-band__contact a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 40px;
	color: var(--c-text-invert-muted);
	font-size: var(--fs-small);
	transition: color var(--t-fast) var(--ease-out);
}
.cta-band__contact a:hover { color: var(--c-gold); }

@media (max-width: 899px) {
	.cta-band__title { max-width: 16ch; }
	.cta-band__actions { max-width: 360px; }
}

/* ==========================================================================
   CARD POLISH
   Softened corners, and one shared hover language across every card:
   the image pushes in slightly, the card lifts, an accent rule wipes across
   the top edge, and the arrow steps forward. All of it transform/opacity
   only, and all of it off under reduced motion.
   ========================================================================== */

.media { border-radius: var(--radius-sm); }
.xp-card__media,
.centre-card__media,
.tile-card__media,
.event-card__media,
.person__media,
.sport-card,
.flagship,
.founder__media { border-radius: var(--radius-md); overflow: hidden; }

.xp-card,
.centre-card,
.tile-card,
.event-card,
.person,
.quote,
.centre-aside,
.empty-state { border-radius: var(--radius-md); }

.btn { border-radius: var(--radius-sm); }
.btn--link { border-radius: 0; }
.chip,
.flag,
.filter-chip { border-radius: var(--radius-sm); }
.marquee { border-radius: var(--radius-md); }

/* Media inside a rounded card needs its own clipping or the corners square
   off on zoom. */
.xp-card__media,
.centre-card__media,
.tile-card__media,
.event-card__media,
.person__media { border-radius: 0; }
.xp-card,
.centre-card,
.tile-card,
.event-card,
.person { overflow: hidden; }

/* ==========================================================================
   ABOUT: milestone numbers
   Scale contrast carries this: an enormous figure against a small sentence,
   held in a narrow column with a lot of open space to its left. It slows the
   page down between the written story and the photography.
   ========================================================================== */

.milestones { padding-block: clamp(4rem, 2.2rem + 7vw, 9rem); }
.milestones__eyebrow { margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }

.milestones__list {
	display: grid;
	gap: clamp(2.75rem, 1.6rem + 4vw, 6rem);
}

.milestones__item {
	display: grid;
	gap: var(--sp-3);
	max-width: 34ch;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
}

/* Offset each row further right so the column steps across the page, which is
   what keeps a stack of four numbers from reading as a list. */
@media (min-width: 900px) {
	.milestones__list { gap: clamp(3rem, 1.6rem + 4.5vw, 6.5rem); }
	.milestones__item { margin-left: calc(var(--step, 0) * 9%); }
	.milestones__item:nth-child(1) { --step: 0; }
	.milestones__item:nth-child(2) { --step: 2; }
	.milestones__item:nth-child(3) { --step: 4; }
	.milestones__item:nth-child(4) { --step: 6; }
}

.milestones__figure {
	font-family: var(--f-display);
	font-size: clamp(3.5rem, 1.6rem + 8vw, 9rem);
	line-height: .86;
	letter-spacing: -.03em;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}

.milestones__caption {
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--c-text-muted);
	max-width: 40ch;
}

/* ==========================================================================
   IMAGE HOVER
   The card itself stays put: no lift, no shadow, no accent rule. Only the
   photograph responds, easing in and lifting its exposure a touch, so the
   poster reads as interactive without the frame moving under the cursor.
   ========================================================================== */

.media__img,
.gallery__frame img {
	transition: transform 620ms var(--ease-out), filter 620ms var(--ease-out);
	will-change: transform;
}

.xp-card:hover .media__img,
.xp-card:focus-within .media__img,
.centre-card:hover .media__img,
.centre-card:focus-within .media__img,
.tile-card:hover .media__img,
.tile-card:focus-within .media__img,
.event-card:hover .media__img,
.event-card:focus-within .media__img,
.sport-card:hover .media__img,
.sport-card:focus-within .media__img,
.flagship:hover .media__img,
.flagship:focus-within .media__img,
.person:hover .media__img,
.community__frame:hover .media__img,
.gallery__frame:hover img {
	transform: scale(1.055);
	filter: brightness(1.06);
}

/* Cards whose type sits on the photograph need the scrim to hold as the
   image brightens. */
.sport-card:hover .media__scrim,
.sport-card:focus-within .media__scrim,
.flagship:hover .media__scrim,
.flagship:focus-within .media__scrim { opacity: .94; }
.media__scrim { transition: opacity 620ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
	.media__img,
	.gallery__frame img,
	.media__scrim { transition: none; }
	.xp-card:hover .media__img,
	.centre-card:hover .media__img,
	.tile-card:hover .media__img,
	.event-card:hover .media__img,
	.sport-card:hover .media__img,
	.flagship:hover .media__img,
	.person:hover .media__img,
	.community__frame:hover .media__img,
	.gallery__frame:hover img { transform: none; filter: none; }
}

/* ==========================================================================
   10. UTILITIES & MOTION
   ========================================================================== */

.u-mt-0 { margin-top: 0 !important; }
.u-center { text-align: center; }
.u-hide { display: none !important; }

[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
/* main.js removes data-reveal once the reveal has settled, so the element
   keeps its own hover transition instead of inheriting the 700ms one. */
.is-revealed { opacity: 1; }

/* Anything JS never got to: show it. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.media__img { transform: none !important; }
	.hero__scroll { animation: none; }
}

@media print {
	.site-header, .mobile-nav, .cta-band, .hero__scroll, .site-footer__social { display: none !important; }
	body { color: #000; background: #fff; }
	.section { padding-block: 1.5rem; }
}