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

/* 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(--green);
}
.site-footer .motto,
.bento__cell--feature .motto { color: var(--gold); }

.rule-cross {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--gold);
}
.rule-cross::before,
.rule-cross::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gold);
	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;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); color: #fff; }
.btn--ghost { border-color: var(--hairline); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.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(--green); border-color: var(--green); 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);
}

.img-placeholder {
	display: grid;
	place-items: center;
	align-content: center;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: var(--ivory);
	background-image: repeating-linear-gradient(45deg, rgba(200, 160, 74, 0.07) 0 12px, transparent 12px 24px);
	border: 1px dashed var(--hairline);
	color: var(--mid);
	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;
	opacity: 0.75;
}

.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.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--hairline);
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(180%) blur(12px);
}
.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(--mid);
}

/* 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(--green); }

.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(--gold); }
.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(--gold); }

/* ══ 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(--green);
	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(--green);
	margin-top: 0.15rem;
	/* Big enough to be a comfortable thumb target on a phone. */
	min-height: 44px;
}
.team-card__tel:hover { color: var(--green-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(--green); }
a.team-card__fb:hover { color: var(--green-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(--gold);
	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(--green);
}
.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(--gold); 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(--green); box-shadow: 0 0 0 1px var(--green); }
.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(--green);
}
.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(--green); border-color: var(--green); 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(--green); border-color: var(--green); }

/* 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(--green); 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(--green); }
.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(--green); outline: 2px solid var(--green); 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(--green); color: var(--green-dark); }
.form-notice--ok i { color: var(--green); }
.form-notice--warn { background: #FDF3E0; border: 1px solid var(--gold); 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(9, 58, 33, 0.92) 0%, rgba(9, 58, 33, 0.55) 42%, rgba(9, 58, 33, 0.05) 78%, transparent 100%);
}
.bento__cell--accent.bento__cell--overlay .eyebrow { color: var(--gold); }

/* 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(--gold); }
.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(9, 58, 33, 0.9) 0%, rgba(11, 10, 11, 0.82) 100%);
}
.section--photo > .container > h2 { color: #fff; }
.section--photo .team-card { border-top-color: var(--gold); }

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

/* ── 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(--green);
	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(--gold); 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(--gold); }
.newsbar__date { color: var(--gold); 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(--gold);
	border-bottom: 1px solid transparent;
}
.newsbar__all:hover { color: #fff; border-bottom-color: var(--gold); }
@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(--green); 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(--green); 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(--green); }
.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(--gold); }

.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(--green); border-color: var(--green); 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(--green); }
.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(--green); 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(--gold); 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(--green);
	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(--green); 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(--gold); 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(--gold); 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(--green); 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(--green); }
.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(--green); }
.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(--gold);
	font-size: var(--step--1); display: flex; align-items: flex-start; gap: 0.7em;
}
.tariff-note i { color: var(--gold); 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(--green); 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(--gold); 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(--green); 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(--green); }
.pk__flag {
	position: absolute; top: -12px; left: var(--space-md);
	background: var(--green); 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(--green); }
.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(--green); 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(--green); color: var(--green); background: #EAF4EE; }
a.bm__pos.is-available:hover { background: var(--green); color: #fff; }
.bm__pos.is-reserved { background: var(--gold); border-color: var(--gold); 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(--gold); }

.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(--green); }
.bm__swatch.is-reserved { background: var(--gold); border-color: var(--gold); }
.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(--gold); }

/* ── 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(--green); 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(--green); }
.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(--green); 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(--green);
	margin-top: 0.4rem; min-height: 44px;
}
.partner__link:hover { color: var(--green-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(--gold); }
.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(--gold);
}

/* ── 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(--green); 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(--green);
	border-radius: var(--radius);
}
.eco i { color: var(--green); 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(--green); 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(9, 58, 33, 0.95) 0%, rgba(9, 58, 33, 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(--gold); }
.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(--gold); }

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

@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(--green);
}
.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(--green);
	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(--green); }
.bf-items input:checked + label { border-color: var(--green); background: #EAF4EE; box-shadow: inset 0 0 0 1px var(--green); }
.bf-items input:focus-visible + label { outline: 2px solid var(--green); 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(--green); 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(--green); margin-top: 0.15em; }

.bf-summary {
	margin-top: var(--space-lg); padding: var(--space-md);
	background: #EAF4EE; border-left: 3px solid var(--green); 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(--green); font-weight: 600; }

.mg-file { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8rem; color: var(--green); 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(--green); 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(--green); 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(--gold); }

.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(--green); }
.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(--gold); 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(--gold); 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; }