:root {
	--primary-dark: #3C525F;
	--primary-mid: #4a90e2;
	--primary-light: #B3C2CB;
	--primary-lightest: #B3C2CB;
	--section-separator: #EEF2F4;

	/* Nav strip (sits under the banner) */
	--nav-bg: #C04C18;
	--nav-link: #FFFFFF;

	/* What's On section surface. Same hex as --heading-color but a SEPARATE
	   variable on purpose: this is a section background, not a heading colour,
	   and the two must be free to diverge. White text/borders on it = 6.07:1. */
	--whatson-bg: #616454;

	/* About Us text-block surface (the .about-content panel only — NOT the whole
	   #about-us section, which stays on the white page background). Same hex as
	   --heading-color and --whatson-bg but, per the same reasoning, a SEPARATE
	   variable: this is a component background, and a future heading-colour or
	   What's On retune must not silently repaint this panel. White text on it
	   = 6.07:1, passing AA for normal and large text. */
	--about-bg: #616454;

	/* Single source of truth for ALL heading colours (h1-h6 and any heading
	   styled inside a partial) that sit on a light surface. 6.07:1 on #ffffff
	   and 5.39:1 on #EEF2F4 (both pass WCAG AA for normal text); 3.32:1 on
	   #B3C2CB, which passes AA Large only — every heading on that surface is
	   40px+ so it clears the large-text threshold. Headings that sit on a dark
	   or photographic surface (banner, #whatson, #book-table-section, #awards,
	   #hours .leftbox, .footer-heading) deliberately keep their light colour
	   and are NOT pointed at this variable. */
	--heading-color: #616454;

	/* Adobe Typekit kit eag5qkx — loaded in layouts/partials/head.html.
	   rubik: 400/700, normal + italic. grappa-two-variable: variable wght 100-900, normal only. */
	--font-family-base: "rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-family-heading: "grappa-two-variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	--font-weight-light: 400;
	--font-weight-heavy: 700;

	/* Single source of truth for ALL heading weights (h1-h6 and any
	   heading styled inside a partial). grappa-two-variable is a variable
	   font with a wght axis of 100-900, so any value in that range is valid. */
	--font-weight-heading: 400;

	--font-size-base: 16px;
	--font-size-large: 23px;
	--font-size-heading: 3.5rem;

	--font-size-h1: 40px;
	--font-size-h2: 40px;
	--font-size-h3: 30px;
	--font-size-h4: 28px;
	--font-size-h5: 26px;
	--font-size-h6: 20px;

	--font-weight-h1: var(--font-weight-heading);
	--font-weight-h2: var(--font-weight-heading);
	--font-weight-h3: var(--font-weight-heading);
	--font-weight-h4: var(--font-weight-heading);
	--font-weight-h5: var(--font-weight-heading);
	--font-weight-h6: var(--font-weight-heading);

	--border-radius: 10px;
	--button-radius: 8px;

	/* Heading tracking, tuned for grappa-two-variable at wght 400.
	   Scales inversely with size: the large display levels carry their own
	   presence and read scattered with positive tracking at a light weight,
	   so h1/h2 sit slightly negative; the small levels stay positive because
	   they are text-transform: uppercase and caps need the gap to stay
	   legible (h6 in particular drops to 17px on mobile against 16px body).
	   Values are in em so they scale with the mobile font-size step below. */
	--letter-spacing-h1: -0.01em;
	--letter-spacing-h2: -0.01em;
	--letter-spacing-h3: 0.005em;
	--letter-spacing-h4: 0.006em;
	--letter-spacing-h5: 0.008em;
	--letter-spacing-h6: 0.01em;
}

body {
	font-family: var(--font-family-base);
	font-optical-sizing: auto;
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-base);
	font-style: normal;
}

/* Form controls and buttons do not inherit font-family by default */
button,
input,
optgroup,
select,
textarea,
.btn,
.form-control,
.form-select {
	font-family: var(--font-family-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-heading);
	font-optical-sizing: auto;
	font-weight: var(--font-weight-heading);
	color: var(--heading-color);
	text-transform: uppercase;
}

h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-h1);
	letter-spacing: var(--letter-spacing-h1);
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	letter-spacing: var(--letter-spacing-h2);
}

h3 {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-h3);
	letter-spacing: var(--letter-spacing-h3);
}

h4 {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-h4);
	letter-spacing: var(--letter-spacing-h4);
}

h5 {
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-h5);
	letter-spacing: var(--letter-spacing-h5);
}

h6 {
	font-size: var(--font-size-h6);
	font-weight: var(--font-weight-h6);
	letter-spacing: var(--letter-spacing-h6);
}

@media (max-width: 768px) {
	:root {
		--font-size-h1: 30px;
		--font-size-h2: 30px;
		--font-size-h3: 25px;
		--font-size-h4: 20px;
		--font-size-h5: 18px;
		--font-size-h6: 17px;
	}
}

.section-separator {
	width: min(100%, 1320px);
	height: 8px;
	background: var(--section-separator);
	border-radius: 4px;
	margin: 1.25rem auto;
}

button,
.btn,
a[class*="btn"],
[role="button"] {
	border-radius: var(--button-radius);
}