.eyebrow {
	font-family: var(--font-ui);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--coal);
}

/* Gold fails contrast on light grounds, so the motto only goes gold where it
   sits on a dark surface. On white or ivory it takes the club green. */
.motto {
	font-family: var(--font-display);
	font-style: italic;
	letter-spacing: 0.08em;
	color: var(--coal);
}
.site-footer .motto,
.bento__cell--feature .motto { color: var(--hornet); }

.rule-cross {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--hornet);
}
.rule-cross::before,
.rule-cross::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--hornet);
	opacity: 0.5;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.85em 1.6em;
	font-family: var(--font-ui);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: var(--radius);
	border: 1px solid transparent;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	cursor: pointer;
}
/* Yellow is the call to action. It reads on both grounds because the label is
   always coal on top of it (12.6:1), never the other way round — the one thing
   this palette will not do is yellow text on white. */
.btn--primary { background: var(--hornet); color: var(--coal-deep); }
.btn--primary:hover { background: var(--hornet-soft); color: var(--coal-deep); }
.btn--ghost { border-color: var(--hairline); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

/* On a dark ground the ghost button's hairline and ink label both disappear. */
.site-header .btn--ghost,
.hero-terrace .btn--ghost,
.page-head--dark .btn--ghost,
.bento__cell--overlay .btn--ghost,
.bento__cell--dark .btn--ghost,
.band .btn--ghost,
.site-footer .btn--ghost {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}
.site-header .btn--ghost:hover,
.hero-terrace .btn--ghost:hover,
.page-head--dark .btn--ghost:hover,
.bento__cell--overlay .btn--ghost:hover,
.bento__cell--dark .btn--ghost:hover,
.band .btn--ghost:hover,
.site-footer .btn--ghost:hover {
	border-color: var(--hornet);
	color: var(--hornet);
}
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }

/* ── Bento grid: single column on phones, up to four at desktop ── */
.bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
}
.bento__cell {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--ivory);
	border: 1px solid var(--hairline);
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-md);
}
.bento__cell--feature {
	min-height: 380px;
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}
.bento__cell--feature h1,
.bento__cell--feature h2 { color: #fff; }
.bento__cell--accent { background: var(--coal); border-color: var(--coal); color: #fff; }
.bento__cell--accent .eyebrow { color: rgba(255, 255, 255, 0.75); }

.bento__media { position: absolute; inset: 0; z-index: 0; }
.bento__media img { width: 100%; height: 100%; object-fit: cover; }
.bento__cell > *:not(.bento__media) { position: relative; z-index: 1; }
.bento__cell--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to top, rgba(11, 10, 11, 0.9) 0%, rgba(11, 10, 11, 0.22) 65%, transparent 100%);
}

.stat { display: flex; flex-direction: column; gap: 0.2em; }
.stat__value { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.stat__label { font-size: var(--step--1); color: var(--mid); }
.bento__cell--accent .stat__label { color: rgba(255, 255, 255, 0.8); }

.card {
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	padding: var(--space-md);
	background: var(--ground);
}

/* The club has supplied no photography yet, so a slot with no file behind it
   is the normal case rather than an error state. It is drawn as a deliberate
   black-and-yellow chevron panel — the site has to look finished on day one
   and still take real photographs later without a redesign. */
.img-placeholder {
	display: grid;
	place-items: center;
	align-content: center;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: var(--coal);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(254, 205, 21, 0.14) 0 14px,
		rgba(254, 205, 21, 0) 14px 34px
	);
	border: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--step--1);
	text-align: center;
	padding: var(--space-md);
	gap: 0.4em;
}
.img-placeholder__slot {
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-size: 0.78em;
	color: var(--hornet);
	opacity: 0.85;
}

/* Inside an overlay cell the placeholder IS the backdrop, exactly as a
   photograph would be. Left in flow it stacked its own caption on top of the
   heading and both became unreadable. */
.bento__media .img-placeholder,
.band__bg .img-placeholder,
.section--photo .img-placeholder {
	position: absolute;
	inset: 0;
	min-height: 0;
}
.bento__media .img-placeholder > span,
.band__bg .img-placeholder > span,
.section--photo .img-placeholder > span {
	display: none;
}

.hero { padding-top: var(--space-lg); }
.hero__lede {
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.85);
	margin-block: 0.6rem 1rem;
}

.sections-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--space-md);
	margin-top: var(--space-lg);
}
.section-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 0; overflow: hidden; }

/* Square tiles. The section badges are 1:1 so they sit edge to edge with no
   crop, and the 16:9 rugby photograph centre-crops onto the ball carrier.
   Black ground because the badge artwork is drawn on black. */
.section-card__media {
	aspect-ratio: 1 / 1;
	background: var(--ink);
}
.section-card__media img,
.section-card__media .img-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 0;
	border: 0;
}
.section-card h3,
.section-card p { padding-inline: var(--space-md); }
.section-card p:last-child { padding-bottom: var(--space-md); }

.page-head {
	padding-block: var(--space-xl) var(--space-md);
	border-bottom: 1px solid var(--hairline);
}
.page-head h1 { margin-top: 0.2em; }
.page-body { max-width: 72ch; }
.page-body h2 { margin-block: var(--space-lg) var(--space-sm); }
.page-body p + p { margin-top: 1em; }

/* ── Header ── */
/*
 * The frosted backdrop lives on a pseudo-element, NOT on the header itself.
 *
 * backdrop-filter (like filter and transform) makes an element the containing
 * block for any position:fixed descendant. With it on .site-header, the mobile
 * nav drawer — a fixed child of the header — was trapped inside the header's
 * 97px box instead of filling the viewport, so the hamburger opened a sliver
 * nobody could see or tap. Moving the effect down one level fixes it without
 * losing the look.
 */
/* Black chrome. The crest is drawn for a dark ground, and the club yellow only
   reaches usable contrast on one — 13.1:1 against coal, 1.5:1 against white. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(254, 205, 21, 0.28);
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(11, 10, 11, 0.96);
	backdrop-filter: saturate(180%) blur(12px);
}
.site-header__name-main { color: #fff; }
.site-header .primary-nav__list > li > a { color: rgba(255, 255, 255, 0.86); }
.site-header .primary-nav__list > li > a:hover,
.site-header .primary-nav__list > li > a:focus-visible { color: var(--hornet); }
.site-header .nav-toggle__bar { background: #fff; }
.site-header__inner { display: flex; align-items: center; gap: var(--space-sm); min-height: 68px; }
.site-header__brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; min-width: 0; }
.site-header__crest { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.site-header__name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.site-header__name-main { font-family: var(--font-display); font-size: var(--step-0); }
.site-header__name-sub {
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hornet);
}

/* Mobile first: the nav IS a drawer. Desktop opts out at 1080. */
.primary-nav {
	position: fixed;
	inset: 68px 0 0 0;
	z-index: 40;
	background: var(--ground);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: var(--space-lg) var(--gutter);
	transform: translateX(100%);
	transition: transform 0.28s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}
body.nav-open { overflow: hidden; }
body.nav-open .primary-nav { transform: translateX(0); }

.primary-nav__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.primary-nav__list li { border-bottom: 1px solid var(--hairline); }
.primary-nav__list a {
	display: block;
	padding: 0.9rem 0;
	font-family: var(--font-display);
	font-size: var(--step-1);
}
.primary-nav__list .current-menu-item > a { color: var(--coal); }

.primary-nav__commercial {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-top: var(--space-lg);
}

.nav-toggle {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	order: 3;
}
.nav-toggle__bar { display: block; width: 24px; height: 2px; background: var(--ink); }

/* ── Footer ── */
.site-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.78);
	padding-block: var(--space-xl) var(--space-lg);
	margin-top: var(--space-2xl);
}
.site-footer a:hover { color: var(--hornet); }
.site-footer h4 {
	font-family: var(--font-ui);
	font-size: var(--step--1);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: var(--space-sm);
}
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.site-footer__grid ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; font-size: var(--step--1); }
.site-footer__brand .motto { font-size: var(--step-2); display: block; margin-bottom: var(--space-sm); }
.site-footer__blurb { font-size: var(--step--1); max-width: 34ch; }
.site-footer__pending {
	border-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--step--1);
	padding: var(--space-sm);
}
.site-footer__base {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.8rem;
}
.site-footer__credit a { color: #fff; border-bottom: 1px solid var(--hornet); }

/* ══ 480 ══ */
@media (min-width: 480px) {
	.site-header__crest { width: 48px; height: 48px; }
	.site-header__name-main { font-size: var(--step-1); }
	.site-header__name-sub { font-size: 0.7rem; }
	.primary-nav__commercial { flex-direction: row; }
	.primary-nav__commercial .btn { flex: 1; }
}

/* ══ 600 ══ */
@media (min-width: 600px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ══ 768 ══ */
/* Two columns: feature spans the row, four small cells pair up, sponsorship
   closes the grid full-width. Every row tiles exactly — no stranded cells. */
@media (min-width: 768px) {
	.bento { grid-template-columns: repeat(2, 1fr); }
	.bento__cell--feature { grid-column: 1 / -1; min-height: 420px; }
	.bento__cell--full { grid-column: 1 / -1; }
}

/* Four columns: feature occupies a 2x2 block on the left, the four small
   cells fill the 2x2 block to its right, sponsorship spans all four. */
@media (min-width: 1024px) {
	.bento { grid-template-columns: repeat(4, 1fr); }
	.bento__cell--feature { grid-column: span 2; grid-row: span 2; min-height: 460px; }
	.bento__cell--full { grid-column: 1 / -1; }
	.site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

/* ══ 1080 — desktop navigation ══ */
@media (min-width: 1080px) {
	.site-header__inner { min-height: 84px; gap: var(--space-md); }
	.site-header__crest { width: 56px; height: 56px; }
	.nav-toggle { display: none; }
	body.nav-open { overflow: auto; }
	.primary-nav {
		position: static;
		inset: auto;
		flex-direction: row;
		align-items: center;
		gap: var(--space-md);
		padding: 0;
		transform: none;
		overflow: visible;
		background: transparent;
	}
	.primary-nav__list { flex-direction: row; align-items: center; gap: var(--space-md); }
	.primary-nav__list li { border-bottom: 0; }
	.primary-nav__list a {
		padding: 0;
		font-family: var(--font-ui);
		font-size: var(--step--1);
		font-weight: 500;
	}
	.primary-nav__commercial {
		flex-direction: row;
		padding: 0 0 0 var(--space-md);
		border-left: 1px solid var(--hairline);
	}
	.primary-nav__commercial .btn { flex: none; }
}

/* ══ 1600 ══ */
@media (min-width: 1600px) {
	.site-header__inner { min-height: 96px; }
	.primary-nav__list { gap: var(--space-lg); }
	.bento { gap: var(--space-md); }
	.bento__cell { min-height: 240px; padding: var(--space-lg); }
	.bento__cell--feature { min-height: 560px; }
	.site-footer__grid { gap: var(--space-xl); }
}

/* ══ 2000 ══ */
@media (min-width: 2000px) {
	.bento__cell--feature { min-height: 640px; }
}

/* ── Team contact cards ── */
.page-head__lede { max-width: 56ch; margin-top: var(--space-sm); color: var(--mid); }

.team-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.team-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--space-md);
	background: var(--ground);
	border: 1px solid var(--hairline);
	border-top: 3px solid var(--coal);
	border-radius: var(--radius);
}


.team-card__name {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.1;
}
.team-card__person { font-size: var(--step--1); color: var(--mid); }

.team-card__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 600;
	font-size: var(--step-0);
	color: var(--coal);
	margin-top: 0.15rem;
	/* Big enough to be a comfortable thumb target on a phone. */
	min-height: 44px;
}
.team-card__tel:hover { color: var(--coal-dark); }
.team-card__tel i { font-size: 0.85em; }

.team-card__contact--social {
	font-size: var(--step--1);
	color: var(--mid);
	font-style: italic;
	min-height: 44px;
	display: flex;
	align-items: center;
}


@media (min-width: 560px) {
	.team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
	.team-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 2000px) {
	.team-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }
}

/* ── Page head with kit artwork ── */
.page-head--kit { padding-bottom: 0; }

.page-head__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	align-items: end;
}

.page-head__meta {
	font-size: var(--step--1);
	color: var(--mid);
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--hairline);
	display: inline-block;
}

/* The kit is a cutout on white, so it must never be cropped by object-fit:
   cover the way a photograph would be. */
.page-head__kit {
	max-width: 260px;
	margin-inline: auto;
	margin-bottom: calc(var(--space-md) * -1);
}
.page-head__kit img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.page-head__kit .img-placeholder { min-height: 220px; }

@media (min-width: 768px) {
	.page-head__split { grid-template-columns: 1fr auto; gap: var(--space-lg); }
	.page-head__kit { max-width: 300px; margin-inline: 0; }
}
@media (min-width: 1280px) {
	.page-head__kit { max-width: 380px; }
}
@media (min-width: 2000px) {
	.page-head__kit { max-width: 440px; }
}

/* ── Per-team Facebook link ── */
.team-card__fb {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--step--1);
	margin-top: 0.35rem;
	min-height: 40px;
	color: var(--mid);
}
a.team-card__fb { color: var(--coal); }
a.team-card__fb:hover { color: var(--coal-dark); text-decoration: underline; text-underline-offset: 3px; }
.team-card__fb i { font-size: 1.05em; }

/* Awaiting a URL from the club — visibly incomplete rather than silently absent,
   so nobody assumes the link was simply forgotten. */
.team-card__fb--pending {
	color: var(--mid);
	opacity: 0.72;
	font-style: italic;
}

/* ── Footer address ── */
.site-footer__address {
	display: grid;
	gap: 0.15rem;
	font-style: normal;
	font-size: var(--step--1);
	line-height: 1.5;
}
.site-footer__directions,
.site-footer__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: 0.7rem;
	font-size: var(--step--1);
	color: var(--hornet);
	min-height: 40px;
}
.site-footer__directions:hover,
.site-footer__phone:hover { color: #fff; }
.site-footer__phone { font-weight: 600; }
.site-footer__pending-inline {
	margin-top: 0.7rem;
	font-size: var(--step--1);
	font-style: italic;
	color: rgba(255, 255, 255, 0.55);
}

/* ── About page ── */
.stat-band {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	padding: var(--space-lg) 0;
	border-block: 1px solid var(--hairline);
}
.stat-band__item { display: flex; flex-direction: column; gap: 0.2rem; }
.stat-band__value {
	font-family: var(--font-display);
	font-size: var(--step-4);
	line-height: 1;
	color: var(--coal);
}
.stat-band__label { font-size: var(--step--1); color: var(--mid); max-width: 22ch; }

.about-split { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; }
.about-split__text p + p { margin-top: 1em; }
.about-split__text h2 { margin-bottom: var(--space-sm); }
.about-split__media { border-radius: var(--radius-lg); overflow: hidden; }
.about-split__media img,
.about-split__media .img-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.about-values { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.about-values h3 { margin-bottom: 0.4rem; }
.about-values p { font-size: var(--step--1); color: var(--mid); }

.about-lede { max-width: 60ch; color: var(--mid); margin-top: var(--space-sm); }

.accreditations {
	list-style: none;
	padding: 0;
	margin-top: var(--space-lg);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
}
.accreditations li {
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding: var(--space-sm) var(--space-md);
	background: var(--ground);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	font-size: var(--step--1);
	font-weight: 500;
}
.accreditations i { color: var(--hornet-ink); font-size: 1.15em; }

.about-find { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.about-address {
	display: grid;
	gap: 0.15rem;
	font-style: normal;
	margin-block: var(--space-sm) var(--space-md);
	font-size: var(--step-0);
}
.about-find__cta {
	padding: var(--space-md);
	background: var(--ivory);
	border-radius: var(--radius-lg);
	border: 1px solid var(--hairline);
}
.about-find__cta p { font-size: var(--step--1); color: var(--mid); margin-block: 0.5rem 1rem; }

@media (min-width: 600px) {
	.accreditations { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.stat-band { grid-template-columns: repeat(4, 1fr); }
	.about-values { grid-template-columns: repeat(3, 1fr); }
	.about-find { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
@media (min-width: 1024px) {
	.about-split { grid-template-columns: 1.2fr 1fr; gap: var(--space-xl); }
	.accreditations { grid-template-columns: repeat(4, 1fr); }
}

/* ── Cross-fading hero rotator ── */
.rotator { position: absolute; inset: 0; }
.rotator__frame {
	position: absolute;
	inset: 0;
	opacity: 1;
	animation-duration: var(--rotator-cycle);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: var(--rotator-delay);
	animation-fill-mode: both;
}
.rotator__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Every frame shares one keyframe set and is staggered by a NEGATIVE delay,
   so the sequence is already mid-cycle at load and there is never a moment
   with no frame showing. Each frame holds for its 1/count share, with the
   fade overlapping its neighbour rather than falling between them.
   Percentages are per-count because CSS cannot compute keyframe stops. */
.rotator--2 .rotator__frame { animation-name: gps-rotate-2; }
@keyframes gps-rotate-2 {
	0%   { opacity: 1; }
	45%  { opacity: 1; }
	50%  { opacity: 0; }
	95%  { opacity: 0; }
	100% { opacity: 1; }
}

.rotator--3 .rotator__frame { animation-name: gps-rotate-3; }
@keyframes gps-rotate-3 {
	0%    { opacity: 1; }
	28%   { opacity: 1; }
	33.3% { opacity: 0; }
	95%   { opacity: 0; }
	100%  { opacity: 1; }
}

.rotator--4 .rotator__frame { animation-name: gps-rotate-4; }
@keyframes gps-rotate-4 {
	0%   { opacity: 1; }
	20%  { opacity: 1; }
	25%  { opacity: 0; }
	95%  { opacity: 0; }
	100% { opacity: 1; }
}

/* Motion is decorative here — the headline never changes — so under reduced
   motion we simply hold the first image and stop animating entirely. */
@media (prefers-reduced-motion: reduce) {
	.rotator__frame { animation: none; opacity: 0; }
	.rotator__frame:first-child { opacity: 1; }
}

/* About page uses the same rotator inside a bordered, rounded panel. */
.about-split__media .rotator { position: relative; aspect-ratio: 4 / 3; }
.about-split__media .rotator__frame img { position: absolute; inset: 0; }

/* ── Venue hire: rooms ── */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.room-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.room-card {
	display: flex; flex-direction: column;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--ground);
}
.room-card--active { border-color: var(--coal); box-shadow: 0 0 0 1px var(--coal); }
.room-card__media { aspect-ratio: 4 / 3; background: var(--ivory); }
.room-card__media img, .room-card__media .img-placeholder {
	width: 100%; height: 100%; object-fit: cover; min-height: 0; border: 0;
}
.room-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.5rem; }
.room-card__capacity {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-size: var(--step--1); font-weight: 600; color: var(--coal);
}
.room-card__desc { font-size: var(--step--1); color: var(--mid); flex: 1; }

/* ── Availability calendar ── */
.cal-controls {
	display: flex; flex-direction: column; gap: var(--space-md);
	margin-top: var(--space-lg);
}
.cal-rooms { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cal-rooms__tab {
	padding: 0.6em 1.1em;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	font-size: var(--step--1);
	font-weight: 500;
	background: var(--ground);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.cal-rooms__tab.is-active { background: var(--coal); border-color: var(--coal); color: #fff; }
.cal-rooms__tab.is-active:hover { color: #fff; }

.cal-nav { display: flex; align-items: center; gap: var(--space-sm); }
.cal-nav .btn { padding: 0.7em 1em; min-height: 44px; }
.cal-nav__label { font-weight: 600; font-size: var(--step--1); }

.cal-key { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); font-size: var(--step--1); color: var(--mid); }
.cal-key__item { display: inline-flex; align-items: center; gap: 0.45em; }
.cal-key__swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--hairline); }
.cal-key__swatch--free { background: var(--ground); }
.cal-key__swatch--taken { background: var(--coal); border-color: var(--coal); }

/* The grid is genuinely wide on a phone — scroll it inside its own box
   rather than letting the whole page scroll sideways. */
.cal-scroll { overflow-x: auto; margin-top: var(--space-md); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--ground); }
.cal { border-collapse: collapse; width: 100%; min-width: 560px; }
.cal__day, .cal__hour, .cal__cell { border: 1px solid var(--hairline); }
.cal__day {
	padding: 0.5rem 0.3rem; text-align: center; font-size: 0.72rem; line-height: 1.2;
	background: var(--ivory); position: sticky; top: 0; z-index: 1;
}
.cal__day--today { background: var(--coal); color: #fff; }
.cal__dow { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.cal__date { display: block; opacity: 0.75; }
.cal__hour-head { width: 58px; background: var(--ivory); }
.cal__hour {
	width: 58px; padding: 0 0.5rem; text-align: right;
	font-size: 0.72rem; color: var(--mid); font-weight: 500;
	background: var(--ivory); white-space: nowrap;
}
.cal__cell { height: 30px; }
.cal__cell--free { background: var(--ground); }
.cal__cell--taken { background: var(--coal); }
.cal__cell--past { background: repeating-linear-gradient(45deg, #F2F2EF 0 4px, #EAEAE6 4px 8px); }

.cal-note { margin-top: var(--space-sm); font-size: var(--step--1); color: var(--mid); }

/* ── Booking form ── */
.booking-form { margin-top: var(--space-lg); }
.booking-form__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: var(--step--1); font-weight: 600; }
.field input, .field select, .field textarea {
	font: inherit; font-size: var(--step-0);
	padding: 0.7em 0.8em;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	background: var(--ground);
	color: var(--ink);
	min-height: 48px;
	width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--coal); outline: 2px solid var(--coal); outline-offset: 1px; }

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

.booking-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.booking-form__note { font-size: var(--step--1); color: var(--mid); }

.form-notice {
	display: flex; gap: 0.8rem; align-items: flex-start;
	padding: var(--space-md);
	border-radius: var(--radius);
	margin-bottom: var(--space-lg);
	font-size: var(--step--1);
}
.form-notice p { margin-top: 0.25rem; }
.form-notice i { font-size: 1.2em; margin-top: 0.1em; }
.form-notice--ok { background: #EAF4EE; border: 1px solid var(--coal); color: var(--coal-dark); }
.form-notice--ok i { color: var(--coal); }
.form-notice--warn { background: #FDF3E0; border: 1px solid var(--hornet); color: #7A5312; }
.form-notice--warn i { color: #B57F17; }

@media (min-width: 640px) {
	.booking-form__grid { grid-template-columns: repeat(2, 1fr); }
	.field--wide { grid-column: 1 / -1; }
	.cal-controls { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 768px) {
	.room-grid { grid-template-columns: repeat(3, 1fr); }
	.cal__cell { height: 34px; }
}
@media (min-width: 1024px) {
	.booking-form__grid { grid-template-columns: repeat(3, 1fr); }
	.cal__hour, .cal__hour-head { width: 76px; font-size: 0.78rem; }
	.cal__day { font-size: 0.8rem; }
}

/* A photograph behind the venue cell needs a stronger scrim than the hero —
   the room shot is bright and the text sits on top of it. */
/* Enough scrim to read white text at the foot of the cell, and no more —
   the room shot is the selling point and must stay visible. */
.bento__cell--accent.bento__cell--overlay::after {
	background: linear-gradient(to top, rgba(11, 10, 11, 0.92) 0%, rgba(11, 10, 11, 0.55) 42%, rgba(11, 10, 11, 0.05) 78%, transparent 100%);
}
.bento__cell--accent.bento__cell--overlay .eyebrow { color: var(--hornet); }

/* Photo-backed cell on the neutral ground — needs its own scrim and light text. */
.bento__cell--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.bento__cell--dark h3 { color: #fff; }
.bento__cell--dark .eyebrow { color: var(--hornet); }
.bento__cell--dark.bento__cell--overlay::after {
	background: linear-gradient(to top, rgba(11, 10, 11, 0.92) 0%, rgba(11, 10, 11, 0.55) 42%, rgba(11, 10, 11, 0.05) 78%, transparent 100%);
}

/* ── Section with a photographic background ── */
.section--photo { position: relative; isolation: isolate; }
.section--photo .section__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.section--photo .section__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

/* The cards on top are opaque white, so the scrim exists to darken the photo
   enough for the heading and to stop the picture fighting the content. */
.section--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(11, 10, 11, 0.9) 0%, rgba(11, 10, 11, 0.82) 100%);
}
.section--photo > .container > h2 { color: #fff; }
.section--photo .team-card { border-top-color: var(--hornet); }

/* Green eyebrow is unreadable on a dark photographic cell — go gold there. */
.bento__cell--feature .eyebrow { color: var(--hornet); }

/* ── Enquiry modal ── */
.modal {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min(760px, calc(100vw - 2rem));
	width: 100%;
}
.modal::backdrop { background: rgba(11, 10, 11, 0.66); backdrop-filter: blur(3px); }
.modal__panel {
	background: var(--ground);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	max-height: min(86vh, 900px);
	overflow-y: auto;
}
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.modal__head h2 { font-size: var(--step-2); }
.modal__close {
	flex-shrink: 0;
	background: none;
	border: 1px solid var(--hairline);
	border-radius: 50%;
	width: 44px; height: 44px;
	font-size: 1.1rem;
	color: var(--mid);
	cursor: pointer;
	display: grid;
	place-items: center;
}
.modal__close:hover { border-color: var(--ink); color: var(--ink); }
.modal__lede { font-size: var(--step--1); color: var(--mid); margin-top: 0.4rem; }
.cal-cta { margin-top: var(--space-lg); }

/* ── Rolling news bar ── */
.newsbar {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: var(--ink);
	color: #fff;
	padding: 0 var(--gutter) 0 0;
	overflow: hidden;
}
.newsbar__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	flex-shrink: 0;
	background: var(--coal);
	color: #fff;
	padding: 0.9rem var(--gutter);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	align-self: stretch;
}
.newsbar__viewport { flex: 1; overflow: hidden; min-width: 0; }
.newsbar__track { display: flex; width: max-content; animation: news-roll var(--news-duration) linear infinite; }
.newsbar__list { display: flex; list-style: none; padding: 0; margin: 0; }
.newsbar__item { display: flex; align-items: center; white-space: nowrap; }
.newsbar__item::after { content: "•"; color: var(--hornet); padding-inline: 1.4rem; }
.newsbar__item a { font-size: var(--step--1); display: inline-flex; align-items: center; gap: 0.6em; }
.newsbar__item a:hover { color: var(--hornet); }
.newsbar__date { color: var(--hornet); font-weight: 600; font-size: 0.78em; letter-spacing: 0.05em; text-transform: uppercase; }
/* Hidden on the narrowest screens where the strip needs every pixel;
   min-width so the rule stays mobile-first. */
.newsbar__all {
	display: none;
	flex-shrink: 0;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--hornet);
	border-bottom: 1px solid transparent;
}
.newsbar__all:hover { color: #fff; border-bottom-color: var(--hornet); }
@media (min-width: 560px) {
	.newsbar__all { display: inline-block; }
}

/* Two identical copies sit side by side; shifting exactly -50% lands the
   second copy where the first began, so the loop has no visible seam. */
@keyframes news-roll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause on hover and on keyboard focus so a headline can actually be read
   and clicked rather than chased across the screen. */
.newsbar:hover .newsbar__track,
.newsbar:focus-within .newsbar__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.newsbar__track { animation: none; }
	.newsbar__viewport { overflow-x: auto; }
}


/* ── News archive ── */
.news-lead { display: grid; grid-template-columns: 1fr; gap: var(--space-md); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--ground); }
.news-lead:hover { border-color: var(--coal); color: inherit; }
.news-lead__media { aspect-ratio: 16 / 9; background: var(--ivory); }
.news-lead__media img, .news-lead__media .img-placeholder { width: 100%; height: 100%; object-fit: cover; min-height: 0; border: 0; }
.news-lead__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.news-lead__body h2 { font-size: var(--step-2); }
.news-lead__excerpt { color: var(--mid); }
.news-meta { font-size: var(--step--1); color: var(--mid); letter-spacing: 0.03em; }

.news-pair { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.news-card { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--ground); }
.news-card:hover { border-color: var(--coal); color: inherit; }
.news-card__media { aspect-ratio: 3 / 2; background: var(--ivory); }
.news-card__media img, .news-card__media .img-placeholder { width: 100%; height: 100%; object-fit: cover; min-height: 0; border: 0; }
.news-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.4rem; }
.news-card__excerpt { font-size: var(--step--1); color: var(--mid); }

.news-list { list-style: none; padding: 0; margin-top: var(--space-lg); border-top: 1px solid var(--hairline); }
.news-list__item { border-bottom: 1px solid var(--hairline); }
.news-list__item a { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem var(--space-md); align-items: center; padding: var(--space-md) 0; }
.news-list__item a:hover { color: var(--coal); }
.news-list__date { grid-column: 1; font-size: var(--step--1); color: var(--mid); letter-spacing: 0.05em; text-transform: uppercase; }
.news-list__title { grid-column: 1; font-family: var(--font-display); font-size: var(--step-1); }
.news-list__item i { grid-column: 2; grid-row: 1 / span 2; color: var(--hornet-ink); }

.pagination { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0 0.9em; border: 1px solid var(--hairline); border-radius: var(--radius); font-size: var(--step--1); font-weight: 500; }
.pagination .page-numbers.current { background: var(--coal); border-color: var(--coal); color: #fff; }
.pagination .page-numbers:hover:not(.current) { border-color: var(--ink); }

/* ── Contact ── */
.contact-routes { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.contact-route { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.contact-route i { font-size: 1.5rem; color: var(--coal); }
.contact-route p { font-size: var(--step--1); color: var(--mid); flex: 1; }

.contact-split { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; }
.contact-media { border-radius: var(--radius-lg); overflow: hidden; }
.contact-media .rotator { position: relative; aspect-ratio: 4 / 3; }
.contact-media .rotator__frame img { position: absolute; inset: 0; }
.contact-media img, .contact-media .img-placeholder { width: 100%; height: 100%; object-fit: cover; }

.contact-details { list-style: none; padding: 0; display: grid; gap: 0.7rem; margin-block: var(--space-md); }
.contact-details li { display: flex; align-items: center; gap: 0.7em; font-size: var(--step-0); min-height: 44px; }
.contact-details i { color: var(--coal); width: 1.2em; }
.contact-details .is-pending { color: var(--mid); font-style: italic; font-size: var(--step--1); }
.contact-details .is-pending i { color: var(--mid); }

@media (min-width: 640px) {
	.news-pair { grid-template-columns: repeat(2, 1fr); }
	.news-list__item a { grid-template-columns: 130px 1fr auto; }
	.news-list__date { grid-column: 1; }
	.news-list__title { grid-column: 2; }
	.news-list__item i { grid-column: 3; grid-row: 1; }
}
@media (min-width: 768px) {
	.contact-routes { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.news-lead { grid-template-columns: 1.35fr 1fr; gap: 0; align-items: stretch; }
	.news-lead__media { aspect-ratio: auto; height: 100%; min-height: 380px; }
	.news-lead__body { padding: var(--space-lg); justify-content: center; }
	.news-lead__body h2 { font-size: var(--step-3); }
	.contact-split { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}

/* Community credentials in the footer — what the club is for, not just what it does. */
.site-footer__brand .site-footer__blurb + .site-footer__blurb { margin-top: 0.7rem; max-width: 42ch; }
.site-footer__community {
	list-style: none;
	padding: 0;
	margin-top: var(--space-md);
	display: grid;
	gap: 0.55rem;
	font-size: var(--step--1);
}
.site-footer__community li { display: flex; align-items: flex-start; gap: 0.7em; }
.site-footer__community i { color: var(--hornet); width: 1.15em; flex-shrink: 0; margin-top: 0.15em; }

/* ── Editorial prose blocks ── */


/* ── Fixtures ── */
.fx-heading { margin-top: var(--space-lg); }
.fx-list { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-md); }
.fx {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hairline);
	border-left: 4px solid var(--coal);
	border-radius: var(--radius);
	background: var(--ground);
	overflow: hidden;
}
.fx__media { aspect-ratio: 16 / 9; background: var(--ivory); }
.fx__media img { width: 100%; height: 100%; object-fit: cover; }
.fx__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.4rem; }
.fx__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.fx__section { color: var(--coal); font-weight: 600; }
.fx__comp, .fx__ha { color: var(--mid); }
.fx__teams { font-size: var(--step-1); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.fx__v { color: var(--hornet); font-family: var(--font-ui); font-weight: 700; font-size: 0.9em; }
.fx__when, .fx__venue, .fx__motm { font-size: var(--step--1); color: var(--mid); display: flex; align-items: center; gap: 0.5em; }
.fx__motm strong { color: var(--ink); }
.fx__status {
	align-self: flex-start;
	font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
	background: var(--hornet); color: #3A2A05; padding: 0.25em 0.7em; border-radius: 999px;
}

/* ── Events ── */
.ev-month {
	font-size: var(--step-1);
	margin-top: var(--space-xl);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--hairline);
}
.ev-list { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.ev {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-md);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	background: var(--ground);
	padding: var(--space-md);
	align-items: start;
}
.ev__date {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--coal); color: #fff;
	border-radius: var(--radius);
	width: 62px; padding: 0.6rem 0;
}
.ev__day { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; }
.ev__dow { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }
.ev__media { display: none; border-radius: var(--radius); overflow: hidden; }
.ev__media img, .ev__media .img-placeholder { width: 100%; height: 100%; object-fit: cover; min-height: 0; border: 0; }
.ev__body { display: flex; flex-direction: column; gap: 0.4rem; }
.ev__meta { font-size: var(--step--1); color: var(--mid); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; }
.ev__desc { font-size: var(--step--1); color: var(--mid); }

/* ── Matchday ── */
.md-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.md-card { display: flex; flex-direction: column; gap: 0.5rem; }
.md-card i { font-size: 1.4rem; color: var(--coal); }
.md-card p { font-size: var(--step--1); color: var(--mid); }
.md-card .about-address { margin-block: 0.3rem 0.6rem; font-size: var(--step--1); }

@media (min-width: 640px) {
	.ev { grid-template-columns: auto 200px 1fr; }
	.ev__media { display: block; aspect-ratio: 4 / 3; }
}
@media (min-width: 768px) {
	.md-grid { grid-template-columns: repeat(2, 1fr); }
	.fx--has-image { flex-direction: row; }
	.fx--has-image .fx__media { width: 280px; aspect-ratio: auto; flex-shrink: 0; }
	.fx--has-image .fx__body { flex: 1; }
}
@media (min-width: 1024px) {
	.md-grid { grid-template-columns: repeat(3, 1fr); }
	.fx-list { grid-template-columns: repeat(2, 1fr); }
	.fx--has-image { grid-column: 1 / -1; }
}

/* ── Hire tariffs ── */
.tariff-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.tariff h3 { font-size: var(--step-1); margin-bottom: var(--space-sm); }
.tariff__rates { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
.tariff__rates li {
	display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md);
	padding: 0.65rem 0; border-bottom: 1px solid var(--hairline); font-size: var(--step--1);
}
.tariff__rates li:last-child { border-bottom: 0; }
.tariff__rates strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--coal); }
.tariff__unit { font-family: var(--font-ui); font-size: 0.62em; color: var(--mid); font-weight: 400; }
.tariff-extras { margin-top: var(--space-lg); max-width: 480px; }
.tariff-extras h3 { font-size: var(--step-1); margin-bottom: var(--space-sm); }
.tariff-note {
	margin-top: var(--space-lg); padding: var(--space-md);
	background: var(--ivory); border-radius: var(--radius); border-left: 3px solid var(--hornet-ink);
	font-size: var(--step--1); display: flex; align-items: flex-start; gap: 0.7em;
}
.tariff-note i { color: var(--hornet-ink); margin-top: 0.15em; }

/* ── Programme archive ── */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.pg { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--ground); }
.pg:hover { border-color: var(--coal); color: inherit; }
.pg__cover { aspect-ratio: 3 / 4; background: var(--ink); display: grid; place-items: center; }
.pg__cover img { width: 100%; height: 100%; object-fit: cover; }
.pg__placeholder { color: var(--hornet); font-size: 2rem; }
.pg__body { padding: var(--space-sm) var(--space-md) var(--space-md); display: flex; flex-direction: column; gap: 0.25rem; }
.pg__body strong { font-size: var(--step--1); line-height: 1.3; }
.pg__meta { font-size: 0.72rem; color: var(--mid); }
.pg__cta { font-size: 0.72rem; font-weight: 600; color: var(--coal); margin-top: 0.3rem; display: inline-flex; align-items: center; gap: 0.4em; }


@media (min-width: 768px) {
	.tariff-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Room photos may rotate; the frames need to fill the fixed-ratio tile. */
.room-card__media .rotator { position: relative; width: 100%; height: 100%; }
.room-card__media .rotator__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Sponsorship packages ── */
.pk-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.pk { position: relative; display: flex; flex-direction: column; gap: 0.6rem; }
.pk--featured { border: 2px solid var(--coal); }
.pk__flag {
	position: absolute; top: -12px; left: var(--space-md);
	background: var(--coal); color: #fff;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 0.3em 0.8em; border-radius: 999px;
}
.pk h3 { font-size: var(--step-1); }
.pk__price { display: flex; align-items: baseline; gap: 0.4em; }
.pk__price strong { font-family: var(--font-display); font-size: var(--step-2); color: var(--coal); }
.pk__price span { font-size: var(--step--1); color: var(--mid); }
.pk__poa { font-size: var(--step-1) !important; color: var(--mid) !important; font-style: italic; }
.pk__desc { font-size: var(--step--1); color: var(--mid); }
.pk__includes { list-style: none; padding: 0; display: grid; gap: 0.4rem; font-size: var(--step--1); flex: 1; }
.pk__includes li { display: flex; align-items: flex-start; gap: 0.5em; }
.pk__includes i { color: var(--coal); margin-top: 0.25em; font-size: 0.8em; }

/* ── Board map ── */
.bm { margin-top: var(--space-lg); display: grid; gap: 0.4rem; }
.bm__pitch {
	background: linear-gradient(180deg, #2F8B4E 0%, #1E6B39 100%);
	border-radius: var(--radius);
	min-height: 120px;
	display: grid; place-items: center;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase;
	order: 2;
}
.bm__run { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }
.bm__run--0 { order: 1; }
.bm__run--1 { order: 3; }
.bm__run--2 { order: 4; }
.bm__pos {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 6px;
	font-size: 0.72rem; font-weight: 700;
	border: 1px solid var(--hairline);
	background: var(--ground);
	color: var(--mid);
}
a.bm__pos.is-available { border-color: var(--coal); color: var(--coal); background: #EAF4EE; }
a.bm__pos.is-available:hover { background: var(--coal); color: #fff; }
.bm__pos.is-reserved { background: var(--hornet); border-color: var(--hornet); color: #3A2A05; }
.bm__pos.is-sold { background: var(--mid); border-color: var(--mid); color: #fff; }
.bm__pos.is-premium { box-shadow: inset 0 0 0 2px var(--hornet); }

.bm__key { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); font-size: var(--step--1); color: var(--mid); }
.bm__key span { display: inline-flex; align-items: center; gap: 0.45em; }
.bm__swatch { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--hairline); }
.bm__swatch.is-available { background: #EAF4EE; border-color: var(--coal); }
.bm__swatch.is-reserved { background: var(--hornet); border-color: var(--hornet); }
.bm__swatch.is-sold { background: var(--mid); border-color: var(--mid); }
.bm__swatch.is-premium { background: var(--ground); box-shadow: inset 0 0 0 2px var(--hornet); }

/* ── Partner directory ── */

@media (min-width: 640px) {
	.pk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.pk-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Partner logo scroller (above the footer, sitewide) ── */
.pscroll { background: var(--ivory); border-top: 1px solid var(--hairline); padding-block: var(--space-md); overflow: hidden; }
.pscroll__inner { display: flex; flex-direction: column; gap: var(--space-sm); }
.pscroll__label {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
	font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid);
}
.pscroll__label a { color: var(--coal); font-weight: 600; }
.pscroll__viewport { overflow: hidden; }
.pscroll__track { display: flex; width: max-content; animation: pscroll-roll var(--pscroll-duration) linear infinite; }
.pscroll__list { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; }
.pscroll__list li { display: grid; place-items: center; padding-inline: var(--space-lg); }
.pscroll__list img { height: 46px; width: auto; max-width: 190px; object-fit: contain; }

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

.pscroll:hover .pscroll__track,
.pscroll:focus-within .pscroll__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.pscroll__track { animation: none; }
	.pscroll__viewport { overflow-x: auto; }
}

@media (min-width: 768px) {
	.pscroll__list img { height: 56px; max-width: 220px; }
}

/* ── Partner directory: logo, blurb, link ── */
.partner-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.partner {
	display: flex; flex-direction: column;
	background: var(--ground); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
	overflow: hidden;
}
.partner:hover { border-color: var(--coal); }
.partner__logo {
	display: grid; place-items: center;
	padding: var(--space-lg) var(--space-md);
	background: #fff;
	border-bottom: 1px solid var(--hairline);
	min-height: 130px;
}
.partner__logo img { max-height: 76px; max-width: 100%; width: auto; object-fit: contain; }
.partner__name { font-family: var(--font-display); font-size: var(--step-1); }
.partner__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.partner__body h3 { font-size: var(--step-1); }
.partner__sector {
	font-size: 0.7rem; color: var(--coal); font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.08em;
}
.partner__blurb { font-size: var(--step--1); color: var(--mid); flex: 1; }
.partner__link {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-size: var(--step--1); font-weight: 600; color: var(--coal);
	margin-top: 0.4rem; min-height: 44px;
}
.partner__link:hover { color: var(--coal-dark); text-decoration: underline; text-underline-offset: 3px; }
.partner__link i { font-size: 0.8em; }

@media (min-width: 640px) {
	.partner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.partner-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Page head over a photograph ── */
.page-head--photo {
	position: relative;
	isolation: isolate;
	border-bottom: 0;
	padding-block: var(--space-2xl) var(--space-xl);
	color: #fff;
}
.page-head--photo .page-head__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-head--photo .page-head__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.page-head--photo::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgba(11, 10, 11, 0.9) 0%, rgba(11, 10, 11, 0.62) 55%, rgba(11, 10, 11, 0.45) 100%);
}
.page-head--photo h1 { color: #fff; }
.page-head--photo .eyebrow { color: var(--hornet); }
.page-head--photo .page-head__lede { color: rgba(255, 255, 255, 0.85); }

/* ── Sponsor board illustration ── */
.boards-visual { margin: var(--space-lg) 0 var(--space-md); }
.boards-visual img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--hairline);
}
/* The disclaimer is load-bearing, not decoration — the mockup names real
   businesses that do not sponsor the club. It must never be mistaken for a
   caption that can be skipped. */
.boards-visual figcaption {
	margin-top: var(--space-sm);
	font-size: var(--step--1);
	color: var(--mid);
	font-style: italic;
	padding-left: var(--space-sm);
	border-left: 2px solid var(--hornet);
}

/* ── Matchday: next fixture ── */
.md-next { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; }
.md-next__media { border-radius: var(--radius-lg); overflow: hidden; }
.md-next__media img, .md-next__media .img-placeholder { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.md-next__body { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.md-next__vs { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; }
.md-next__when { font-size: var(--step-0); color: var(--coal); font-weight: 600; display: flex; align-items: center; gap: 0.5em; }
.md-next__meta { font-size: var(--step--1); color: var(--mid); }

/* ── Environmental note ── */
.eco {
	display: flex;
	gap: var(--space-md);
	margin-top: var(--space-xl);
	padding: var(--space-md);
	background: #EAF4EE;
	border-left: 3px solid var(--coal);
	border-radius: var(--radius);
}
.eco i { color: var(--coal); font-size: 1.4rem; margin-top: 0.15em; flex-shrink: 0; }
.eco h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.eco p { font-size: var(--step--1); color: var(--mid); max-width: 68ch; }
.eco p + p { margin-top: 0.7rem; }

@media (min-width: 900px) {
	.md-next { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}

/* ── Feature: photograph beside prose, alternating down the page ── */
.feature { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; }
.feature__media { border-radius: var(--radius-lg); overflow: hidden; }
.feature__media img,
.feature__media .img-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; min-height: 0; border: 0; }
.feature__media .rotator { position: relative; aspect-ratio: 4 / 3; }
.feature__media .rotator__frame img { position: absolute; inset: 0; height: 100%; }
.feature__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.feature__body h2 { font-size: var(--step-3); }
.feature__body p { max-width: 60ch; }
.feature__body .btn { margin-top: 0.4rem; margin-right: 0.5rem; }

.feature__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	width: 100%;
	padding-block: var(--space-md);
	border-block: 1px solid var(--hairline);
	margin-block: 0.5rem;
}
.feature__stats div { display: flex; flex-direction: column; gap: 0.1rem; }
.feature__stats strong { font-family: var(--font-display); font-size: var(--step-2); color: var(--coal); line-height: 1; }
.feature__stats span { font-size: 0.72rem; color: var(--mid); }

/* ── Full-bleed band over a photograph ── */
.band {
	position: relative;
	isolation: isolate;
	padding-block: var(--space-2xl);
	color: #fff;
	overflow: hidden;
}
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band__bg .rotator,
.band__bg .rotator__frame { position: absolute; inset: 0; }
.band::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, rgba(11, 10, 11, 0.95) 0%, rgba(11, 10, 11, 0.86) 46%, rgba(11, 10, 11, 0.6) 100%);
}
.band__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; max-width: 62ch; }
.band__inner h2 { color: #fff; font-size: var(--step-3); }
.band__inner p { color: rgba(255, 255, 255, 0.86); }
.band__inner .eyebrow { color: var(--hornet); }
.band__actions { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: 0.5rem; }
.band__price { font-size: var(--step--1); color: rgba(255, 255, 255, 0.8); }
.band__price strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--hornet); }

.feature .band__price { color: var(--mid); }
.feature .band__price strong { color: var(--coal); }

@media (min-width: 900px) {
	.feature { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
	.feature--reverse .feature__media { order: 2; }
}

/* Still used by Partners, What's On and the programme viewer for a plain
   centred column of prose with no accompanying image. */
.prose-lead { max-width: 74ch; }
.prose-lead p { margin-top: 1em; }
.prose-lead h2 + p { margin-top: var(--space-sm); }
.prose-lead .btn { margin-top: 0.5rem; margin-right: 0.5rem; }

/* The clubhouse sits low in a 16:9 frame; a centre crop into 4:3 fills with
   sky. Pull the focal point down so the building is what you see. */
.feature__media--low img { object-position: center 72% !important; }

/* A wide informational graphic with text running to both edges. Cropping it
   to 4:3 cuts the board sizes and prices off, so contain it and let the panel
   take the natural shape instead. */
.feature__media--wide { background: var(--ivory); border: 1px solid var(--hairline); }
.feature__media--wide img {
	aspect-ratio: 16 / 9;
	object-fit: contain !important;
}

/* ── Booking builder: collapsible sections with pictures ── */
.modal--wide { max-width: min(920px, calc(100vw - 2rem)); }

.bf-step {
	font-size: var(--step-1);
	margin-top: var(--space-lg);
	padding-bottom: var(--space-xs);
	border-bottom: 2px solid var(--coal);
}
.bf-hint { font-size: var(--step--1); color: var(--mid); margin-top: 0.5rem; }

.bf-group { border: 1px solid var(--hairline); border-radius: var(--radius); margin-top: 0.6rem; background: var(--ground); }
.bf-group summary {
	display: flex; align-items: center; gap: 0.7rem;
	padding: var(--space-sm) var(--space-md);
	cursor: pointer; list-style: none; min-height: 56px;
	font-weight: 600;
}
.bf-group summary::-webkit-details-marker { display: none; }
.bf-group summary:hover { background: var(--ivory); }
.bf-group__title { flex: 1; }
.bf-group__count {
	font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--coal);
	border-radius: 999px; padding: 0.15em 0.6em; display: none;
}
.bf-group__count.is-on { display: inline-block; }
.bf-group summary i { color: var(--mid); transition: transform 0.2s ease; }
.bf-group[open] summary i { transform: rotate(180deg); }
.bf-group[open] summary { border-bottom: 1px solid var(--hairline); }
.bf-group__body { padding: var(--space-md); }

.bf-items { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-top: var(--space-sm); }
.bf-items input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bf-items label {
	display: flex; gap: var(--space-sm); align-items: flex-start;
	border: 1px solid var(--hairline); border-radius: var(--radius);
	padding: 0.6rem; cursor: pointer; height: 100%;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.bf-items label:hover { border-color: var(--coal); }
.bf-items input:checked + label { border-color: var(--coal); background: #EAF4EE; box-shadow: inset 0 0 0 1px var(--coal); }
.bf-items input:focus-visible + label { outline: 2px solid var(--coal); outline-offset: 2px; }

.bf-item__media { flex-shrink: 0; width: 96px; border-radius: 6px; overflow: hidden; background: var(--ivory); }
.bf-item__media img,
.bf-item__media .img-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; min-height: 0; border: 0; }
.bf-item__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.bf-item__name { font-weight: 600; font-size: var(--step--1); }
.bf-item__price { font-family: var(--font-display); color: var(--coal); font-size: var(--step-1); line-height: 1.1; }
.bf-item__price small { font-family: var(--font-ui); font-size: 0.6em; color: var(--mid); font-weight: 400; }
.bf-item__desc { font-size: 0.75rem; color: var(--mid); }
.bf-item__code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.68rem; color: var(--mid); opacity: 0.7; }

.bf-note {
	display: flex; gap: 0.6em; align-items: flex-start;
	margin-top: var(--space-md); padding: var(--space-sm);
	background: var(--ivory); border-radius: var(--radius);
	font-size: 0.78rem; color: var(--mid);
}
.bf-note i { color: var(--coal); margin-top: 0.15em; }

.bf-summary {
	margin-top: var(--space-lg); padding: var(--space-md);
	background: #EAF4EE; border-left: 3px solid var(--coal); border-radius: var(--radius);
}
.bf-summary ul { list-style: none; padding: 0; margin-top: 0.5rem; display: grid; gap: 0.3rem; font-size: var(--step--1); }
.bf-summary li { display: flex; justify-content: space-between; gap: var(--space-md); }
.bf-summary li span:last-child { color: var(--coal); font-weight: 600; }

.mg-file { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8rem; color: var(--coal); margin-top: 0.4rem; }

@media (min-width: 600px) {
	.bf-items { grid-template-columns: repeat(2, 1fr); }
	.bf-item__media { width: 110px; }
}
@media (min-width: 900px) {
	.bf-items { grid-template-columns: repeat(3, 1fr); }
	.bf-items label { flex-direction: column; }
	.bf-item__media { width: 100%; }
}

/* ══ Programme viewer — full-screen, no site chrome ══
   A programme is something you read, not a page you browse. It takes the whole
   viewport on a phone at the ground and on a desktop alike. */
body.pv {
	height: 100dvh;
	margin: 0;
	background: #0B0A0B;
	color: #fff;
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
	overscroll-behavior: none;
}

.pv-bar {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem var(--space-md);
	padding-top: max(0.6rem, env(safe-area-inset-top));
	background: rgba(11, 10, 11, 0.9);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.pv-bar__back {
	width: 44px; height: 44px; flex-shrink: 0;
	display: grid; place-items: center;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}
.pv-bar__back:hover { background: var(--coal); color: #fff; }
.pv-bar__crest { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.pv-bar__title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.pv-bar__title strong {
	font-family: var(--font-display);
	font-size: var(--step-0);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-bar__title span { font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); }
.pv-bar__tools { display: flex; gap: 0.4rem; flex-shrink: 0; }
.pv-tool {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff; cursor: pointer;
	font-size: 0.95rem;
}
.pv-tool:hover { background: var(--coal); color: #fff; }

.pv-stage {
	position: relative;
	display: grid;
	place-items: center;
	padding: var(--space-sm);
	min-height: 0;
	overflow: hidden;
}
.pv-loading { text-align: center; display: grid; gap: 0.8rem; color: rgba(255, 255, 255, 0.7); font-size: var(--step--1); }
.pv-loading i { font-size: 2.2rem; color: var(--hornet); }

.pv-book { margin-inline: auto; }
.pv-page-el { background: #fff; }
.pv-page-el canvas { display: block; width: 100%; height: 100%; }

.pv-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px; height: 48px;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff; cursor: pointer;
	display: grid; place-items: center;
	z-index: 3;
	transition: background 0.15s ease, opacity 0.25s ease;
}
.pv-arrow:hover { background: var(--coal); }
.pv-arrow--prev { left: 0.4rem; }
.pv-arrow--next { right: 0.4rem; }

.pv-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 0.7rem var(--space-md);
	padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
	background: rgba(11, 10, 11, 0.9);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--step--1);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.pv-page { color: rgba(255, 255, 255, 0.75); font-weight: 600; }
.pv-foot__link { color: var(--hornet); font-weight: 600; }
.pv-foot__link:hover { color: #fff; }

/* Tap the page to strip everything back to the programme itself. */
body.pv.is-bare .pv-bar,
body.pv.is-bare .pv-foot { opacity: 0; pointer-events: none; }
body.pv.is-bare .pv-bar { transform: translateY(-100%); }
body.pv.is-bare .pv-foot { transform: translateY(100%); }
body.pv.is-bare .pv-arrow { opacity: 0.25; }

.pv-fallback { color: rgba(255, 255, 255, 0.8); text-align: center; font-size: var(--step--1); }
.pv-fallback a { color: var(--hornet); text-decoration: underline; }

@media (min-width: 820px) {
	.pv-stage { padding: var(--space-md); }
	.pv-arrow { width: 56px; height: 56px; }
	.pv-arrow--prev { left: 1.2rem; }
	.pv-arrow--next { right: 1.2rem; }
	.pv-bar__title strong { font-size: var(--step-1); }
}

/* A `display` rule beats the `hidden` attribute, so every element in the
   viewer that sets display must opt back out when hidden — otherwise the
   loading state never disappears and its space pushes the book off centre. */
body.pv [hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   TERRACE
   The club's design language: jersey banding through dark sections,
   Bebas for headlines, Barlow Condensed for labels and buttons, and a
   hard yellow tab on the corner of every tile. Everything below is an
   override layered on the base components, so removing this block
   returns the site to the plain skin underneath.
   ══════════════════════════════════════════════════════════════════ */

h1, h2, h3,
.hero h1, .page-head h1 {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: 0.015em;
	line-height: 0.9;
}
h1 { font-size: clamp(2.8rem, 2rem + 4vw, 6.5rem); }
h2 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }

.eyebrow, .btn, .site-header__name-sub, .newsbar__date,
.stat-band__label, .page-head__meta, nav a {
	font-family: var(--font-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.btn { font-size: 1.05rem; border-radius: 0; }
.eyebrow {
	display: inline-block;
	background: var(--hornet);
	color: var(--coal-deep);
	padding: 4px 12px;
	font-size: 0.9rem;
}
/* On a dark ground the filled eyebrow competes with the headline, so it
   reverts to plain yellow text there. */
.bento__cell--overlay .eyebrow,
.bento__cell--dark .eyebrow,
.band .eyebrow,
.hero .eyebrow {
	background: none;
	color: var(--hornet);
	padding: 0;
}

/* Jersey banding. Pure CSS, so it costs nothing to serve and scales to any
   section height without an image. */
.terrace-bands {
	position: absolute;
	inset: -30% -12%;
	transform: rotate(-14deg);
	background: repeating-linear-gradient(to bottom, var(--hornet) 0 26px, transparent 26px 96px);
	opacity: 0.13;
	pointer-events: none;
}

/* The fixture numeral — the loudest thing on the homepage, because the
   question most visitors arrive with is "when do we next play". */
.matchnum { text-align: center; }
.matchnum__n {
	font-family: var(--font-display);
	font-size: clamp(7rem, 4rem + 10vw, 12rem);
	line-height: 0.78;
	color: var(--hornet);
}
.matchnum__l {
	font-family: var(--font-label);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
	margin-top: 0.4rem;
}

/* Square tiles with a yellow corner tab, replacing the rounded cards. */
.card, .tile {
	border-radius: 0;
	border: 2px solid var(--ink);
	position: relative;
	background: var(--ground);
}
.card::after, .tile::after {
	content: "";
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 46px;
	height: 8px;
	background: var(--hornet);
}
.section--ivory .card { background: var(--ground); }

/* Ticker strip, full-bleed yellow. */
.terrace-ticker { background: var(--hornet); color: var(--coal-deep); }
.terrace-ticker .container {
	display: flex;
	flex-wrap: wrap;
	gap: 2.6rem;
	padding-block: 0.75rem;
	font-family: var(--font-label);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.terrace-ticker a { color: inherit; }

/* Terrace hero layout. */
.hero-terrace {
	position: relative;
	overflow: hidden;
	background: var(--coal-dark);
	color: #fff;
	padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
}
.hero-terrace__inner {
	position: relative;
	display: grid;
	gap: var(--space-lg);
	align-items: center;
}
.hero-terrace h1 { color: #fff; }
.hero-terrace h1 span { color: var(--hornet); }
.hero-terrace .hero__lede { max-width: 40ch; margin-top: var(--space-sm); }
.hero-terrace__btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-md); }
@media (min-width: 900px) {
	.hero-terrace__inner { grid-template-columns: 1.5fr 1fr; }
}

/* ── Board members ── */
.board-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-md);
	margin-top: var(--space-lg);
}
.board-member { text-align: center; }
.board-member__photo {
	width: 132px;
	height: 132px;
	margin: 0 auto var(--space-sm);
	background: var(--coal);
	display: grid;
	place-items: center;
	overflow: hidden;
}
.board-member__photo img { width: 100%; height: 100%; object-fit: cover; }
.board-member__initials {
	font-family: var(--font-display);
	font-size: 2.6rem;
	color: var(--hornet);
}
.board-member h3 { font-size: 1.35rem; }
.board-member__role {
	font-family: var(--font-label);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mid);
}

/* ── Club shop ── */
.page-head--dark {
	position: relative;
	overflow: hidden;
	background: var(--coal-dark);
	color: #fff;
}
.page-head--dark h1 { color: #fff; }
.page-head--dark .page-head__lede { color: rgba(255, 255, 255, 0.76); }
.shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-md);
	margin-top: var(--space-lg);
}
.shop-card { padding: var(--space-md); text-align: center; }
.shop-card__media { aspect-ratio: 1; margin-bottom: var(--space-sm); }
.shop-split { display: grid; gap: var(--space-lg); }
@media (min-width: 800px) { .shop-split { grid-template-columns: 1fr 1fr; } }
.shop-open { display: flex; align-items: center; gap: 0.6em; font-weight: 600; }
.shop-open__dot { width: 10px; height: 10px; border-radius: 50%; background: #1c8a4b; }

/* ── Kit ordering ── */
.kit-closed { text-align: center; padding: var(--space-xl) var(--space-md); border: 2px dashed var(--hairline); }
.kit-closed i { font-size: 2rem; color: var(--hornet-ink); margin-bottom: var(--space-sm); display: block; text-align: center; }
.kit-items { display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.kit-item { border: 2px solid var(--ink); padding: var(--space-md); }
.kit-item__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.kit-item__price { font-family: var(--font-label); font-weight: 700; font-size: 1.2rem; }
.kit-item__desc { color: var(--mid); font-size: var(--step--1); margin-top: 0.3rem; }
.kit-item__controls { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm); }
.kit-item__controls label { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--font-label); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
.kit-item__controls select, .kit-item__controls input { min-height: 44px; padding: 0.4em 0.6em; border: 1px solid var(--hairline); font-family: var(--font-ui); font-size: 1rem; }
.kit-item__controls input[type="number"] { width: 90px; }
.kit-who { border: 0; padding: 0; margin: 0 0 var(--space-md); display: grid; gap: var(--space-sm); }
@media (min-width: 700px) { .kit-who { grid-template-columns: 1fr 1fr; } .kit-who__wide { grid-column: 1 / -1; } }
.kit-who legend { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: var(--space-sm); }
.kit-who label { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--font-label); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
.kit-who input, .kit-who textarea { min-height: 44px; padding: 0.5em 0.7em; border: 1px solid var(--hairline); font-family: var(--font-ui); font-size: 1rem; }
.kit-form__note { color: var(--mid); font-size: var(--step--1); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Intro splash ── */
html.splash-locked, html.splash-locked body { overflow: hidden; }
/* [hidden] alone is not enough: a display rule on the same element beats the
   user-agent [hidden] { display: none }, so the splash stayed on screen for
   visitors who had already seen it. */
.splash[hidden] { display: none; }
.splash {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--coal-deep);
	display: grid;
	place-items: center;
	opacity: 1;
	transition: opacity 0.4s ease;
}
.splash.is-leaving { opacity: 0; pointer-events: none; }
.splash__video { width: 100%; height: 100%; object-fit: cover; }
.splash__skip {
	position: absolute;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	min-height: 44px;
	padding: 0.7em 1.6em;
	background: rgba(11, 10, 11, 0.72);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
	font-family: var(--font-label);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}
.splash__skip:hover, .splash__skip:focus-visible { background: var(--hornet); color: var(--coal-deep); border-color: var(--hornet); }