:root {
	/* Club colours sampled directly from the crest artwork at full resolution,
	   not eyeballed: the hornet yellow is a tight cluster on #FECD15.

	   Contrast is what drives the whole design here. Yellow on near-black is
	   13.1:1 — comfortably AAA, so on dark grounds it can carry headings,
	   links and eyebrows. Yellow on white is 1.50:1, which fails every
	   threshold there is, so --hornet is NEVER text on a light ground. Where
	   a warm tone is genuinely needed on white, --hornet-ink is the only
	   permitted substitute at 5.5:1.

	   Hence the structure of the site: black chrome and hero where the crest
	   and the yellow can do the talking, white content pages where fixtures,
	   news and tariffs stay readable. */
	--ground: #FFFFFF;
	--ivory: #F7F6F2;
	--ink: #0B0A0B;

	/* The brand ground. Parkside used green here with white text on top; the
	   Hornets equivalent is black, so every surface that was "brand coloured
	   panel" becomes coal and white text keeps working (19.8:1). */
	--coal: #141313;
	--coal-dark: #0B0A0B;
	--coal-deep: #000000;

	--hornet: #FECD15;
	--hornet-soft: #FFE38A;
	--hornet-ink: #8A6200;

	--mid: #5C5A55;
	--hairline: #E2E0D9;

	/* Terrace: a poster face for headlines, a condensed grotesk for labels and
	   buttons, and Inter for anything anyone has to actually read. Bebas is
	   uppercase-only by design — never set body copy in it. */
	--font-display: "Bebas Neue", "Arial Narrow", sans-serif;
	--font-label: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	--step-1: clamp(1.2rem, 1.13rem + 0.36vw, 1.44rem);
	--step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.9rem);
	--step-3: clamp(1.73rem, 1.53rem + 0.98vw, 2.5rem);
	--step-4: clamp(2.07rem, 1.76rem + 1.56vw, 3.3rem);
	--step-5: clamp(2.3rem, 1.9rem + 2vw, 4.35rem);

	--space-xs: 0.5rem;
	--space-sm: 0.875rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 5rem;

	--radius: 10px;
	--radius-lg: 16px;

	--wrap: 1240px;
	--gutter: var(--space-md);
}

@media (min-width: 768px) {
	:root { --space-2xl: 6rem; }
}

/* The container grows on large displays so a 2560px monitor gets a designed
   layout rather than a 1240px column marooned in white space. */
@media (min-width: 1600px) {
	:root { --wrap: 1440px; --gutter: var(--space-lg); }
}
@media (min-width: 2000px) {
	:root { --wrap: 1660px; }
}
@media (min-width: 2560px) {
	:root { --wrap: 1880px; --space-2xl: 8rem; }
}