/* Page structure: container, notice bar, header, navigation, footer. */

.container {
	width: min(var(--container), 100%);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.site-main:focus {
	outline: none;
}

/* Basic inner pages until each gets its own design. */
.page-header {
	padding-block: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 3vw, 2.5rem);
}

.page-header h1 {
	font: 700 clamp(2.5rem, 6vw, 6rem)/0.94 var(--m);
	letter-spacing: -0.045em;
}

.page-header__meta {
	font: 500 0.7812rem/1.5 var(--g);
	letter-spacing: 0.06em;
	color: var(--mute);
}

/* Page text: from the editor, on ink (a room's page) or paper (plain pages,
   news, an activity's page). Links take --prose-link, cyan on ink. */
.prose {
	max-width: 46rem;
	padding-bottom: clamp(3rem, 6vw, 6rem);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.prose a {
	color: var(--prose-link, var(--cyan));
}

.prose :is(h2, h3, h4) {
	margin: 1.75em 0 0.5em;
	font-family: var(--m);
	font-weight: 700;
	line-height: 1.1;
}

.prose h2 {
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	letter-spacing: -0.03em;
}

.prose h3 {
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	letter-spacing: -0.02em;
}

.prose h4 {
	font-size: 1.0625rem;
	letter-spacing: -0.015em;
}

.prose > :first-child {
	margin-top: 0;
}

.prose :is(p, ul, ol, figure, blockquote, table) {
	margin: 0 0 1.1em;
}

.prose ul {
	padding-left: 1.25em;
	list-style: disc;
}

.prose ol {
	padding-left: 1.5em;
	list-style: decimal;
}

.prose li + li {
	margin-top: 0.375em;
}

.prose blockquote {
	padding-left: 1.25rem;
	border-left: 3px solid currentColor;
	font: italic 400 1.375rem/1.35 var(--n);
}

.prose figcaption {
	margin-top: 0.5rem;
	font: 500 0.75rem/1.5 var(--g);
	opacity: 0.75;
}

.prose hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.3;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.prose :is(th, td) {
	padding: 0.5rem 0.75rem 0.5rem 0;
	border-bottom: 1px solid currentColor;
	text-align: left;
	vertical-align: top;
}

/* ---------- News articles' blocks ----------
 * The blocks a news article can use (inc/news.php), in the site's look:
 * WordPress's own block styles are off (braw-core). Quotes, rules and tables
 * are the prose ones above.
 */
.prose figure {
	margin: 1.75em 0;
}

.prose img {
	max-width: 100%;
	height: auto;
}

.prose blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font: normal 500 0.875rem/1.5 var(--g);
}

.prose .has-text-align-center {
	text-align: center;
}

.prose .has-text-align-right {
	text-align: right;
}

.prose .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.prose .wp-block-table {
	overflow-x: auto;
}

/* A gallery: the photos in a grid, cropped to the same shape, its caption under them. */
.prose .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
	gap: 0.75rem;
}

.prose .wp-block-gallery figure {
	margin: 0;
}

.prose .wp-block-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.prose .wp-block-gallery > figcaption {
	grid-column: 1 / -1;
	margin-top: 0;
}

/* Buttons and a file to download: ink with cyan words, as the forms' Send. */
.prose .wp-block-buttons,
.prose .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 1.75em 0;
}

.prose :is(.wp-block-button__link, .wp-block-file__button) {
	display: inline-flex;
	align-items: center;
	min-height: 2.875rem;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: var(--cyan);
	font: 700 1rem/1 var(--m);
	text-decoration: none;
}

.prose :is(.wp-block-button__link, .wp-block-file__button):hover {
	background: var(--pink);
	color: var(--ink);
}

/* A video waits for a click (inc/news.php); another site's embed is a link. */
.prose .news-embed .video-facade {
	max-width: 100%;
}

.prose .news-embed__link {
	margin: 0;
	font-weight: 700;
}

/* Plain pages and news (page.php, single.php, index.php): paper, the reading
   surface, under the title (template-parts/page-head.php). */
.page-head,
.page-body {
	--prose-link: var(--ink);
	background: var(--paper);
	color: var(--ink);
}

.page-head {
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.page-head .section__label,
.page-head .section__head p {
	color: var(--ink-mute);
}

.page-body {
	padding-bottom: clamp(3rem, 6vw, 6rem);
}

.page-body .prose {
	padding-bottom: 0;
}

/* The 404 and search pages (404.php, search.php, searchform.php), on the
   same paper: the pages to go to as rows with an arrow, the search box in
   the contact form's look, and each result under what it is. */
.prose .page-list,
.prose .search-list {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ink-rule);
}

.prose .page-list li,
.prose .search-list li {
	margin: 0;
	border-bottom: 1px solid var(--ink-rule);
}

.prose .page-list a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 0;
	color: var(--ink);
	font: 700 clamp(1.125rem, 2vw, 1.375rem)/1.3 var(--m);
	letter-spacing: -0.015em;
	text-decoration: none;
}

.prose .page-list a:hover,
.prose .page-list a:focus-visible {
	text-decoration: underline;
}

.site-search {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	max-width: 40rem;
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.prose .search-list li {
	padding: 1rem 0;
}

.prose .search-list h2 {
	margin: 0 0 0.25rem;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.prose .search-list h2 a {
	color: var(--ink);
}

.prose .search-list p {
	margin: 0;
}

/* The words that matched, in green: the colour of "now". */
.prose .search-list mark {
	padding: 0 0.1em;
	background: var(--green);
	color: var(--ink);
}

.prose .search-list .search-list__kind {
	margin-bottom: 0.25rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

@media (max-width: 30rem) {
	.site-search {
		grid-template-columns: minmax(0, 1fr);
	}
}

.page-body__image {
	max-width: 60rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.page-body__empty {
	margin: 0;
	font: 600 clamp(1.25rem, 2.1vw, 1.875rem)/1.2 var(--m);
	letter-spacing: -0.025em;
}

/* ---------- Notice bar ---------- */
.notice-bar {
	background: var(--cyan);
	color: var(--ink);
	font: 500 0.8438rem/1.4 var(--g);
}

.notice-bar p {
	margin: 0;
	padding-block: 0.5625rem;
	text-align: center;
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ink);
	border-bottom: 1px solid var(--rule);
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* The whole width of the window, not the page's, as the menus under it are.
   Three groups in a row: the logo with open now, the menu, and the buttons
   at the far right. The menu sits in the room between, with the same space
   either side of it, and from 1800px in the middle of the page (below). */
.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 2.125rem);
	width: 100%;
	min-height: 4.25rem;
	padding-inline: clamp(1rem, 2vw, 1.75rem);
}

.site-header__start {
	display: flex;
	align-items: center;
	gap: inherit;
}

/* Brand: the logo mark beside the wordmark (first word large, the rest as a small caps line). */
.brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.brand__text {
	display: block;
	font: 700 1.875rem/0.9 var(--m);
	letter-spacing: -0.045em;
	white-space: nowrap;
}

.brand__text > span {
	display: block;
	margin-top: 0.25rem;
	font: 500 0.625rem/1.3 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}

.logo-mark {
	flex: none;
	width: auto;
	background: none;
}

.brand .logo-mark {
	height: 2.75rem;
}

.site-nav {
	margin-inline: auto;
}

/* The space between the links grows with the window from about 1400px, to
   twice the text's size, so two-word links ("Get involved") still read as one
   link each in a wide bar. */
.site-nav__menu {
	display: flex;
	align-items: center;
	gap: clamp(0.875rem, max(1.5vw, 3.2vw - 1.25rem), 2rem);
}

.site-nav__menu a {
	display: block;
	padding: 0.75rem 0;
	font: 600 0.9375rem/1 var(--m);
	color: var(--paper);
	text-decoration: none;
	white-space: nowrap;
}

.site-nav__menu a:hover {
	box-shadow: 0 1px 0 currentColor;
}

/* Where you are: the page itself, or the page it belongs to (an activity's
   page is part of What's on, a news article part of News). Cyan says this
   and nothing else in the bar. */
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current-menu-ancestor > a,
.site-nav__menu .current_page_parent > a {
	color: var(--cyan);
	box-shadow: 0 2px 0 var(--cyan);
}

.site-nav__menu .sub-menu {
	display: none;
}

/* Open now / Closed, beside the logo after a thin divider. "Closed, opens
   tomorrow at 7am" is longer than "Open now until 10pm", so it may take two
   lines rather than push the menu along. */
.open-state {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	max-width: calc(11.5em + clamp(0.75rem, 1.6vw, 1.375rem));
	/* A <p>: without this its bottom margin lifts it above the menu's line. */
	margin: 0;
	padding-left: clamp(0.75rem, 1.6vw, 1.375rem);
	border-left: 1px solid var(--rule-2);
	font: 500 0.7812rem/1.3 var(--g);
	color: var(--mute);
}

/* "Open" or "Closed", where there is no room for the whole line (main.js
   writes both; until it has, the whole line stays). */
.open-state__short {
	display: none;
}

.open-state .dot {
	flex: none;
}

.dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #5b6e6f;
}

[data-state="open"] .dot {
	background: var(--green);
	animation: beat 2.8s infinite;
}

@keyframes beat {
	0% { box-shadow: 0 0 0 0 rgb(187 239 101 / 0.5); }
	70% { box-shadow: 0 0 0 0.5625rem rgb(187 239 101 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(187 239 101 / 0); }
}

/* The header button and the Menu button, side by side at the far right. */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Pink and filled: the colour of space that could be yours, as everywhere
   else on the site, and nothing like the Menu button beside it. */
.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.6875rem 1.0625rem;
	background: var(--pink);
	border: 1px solid var(--pink);
	color: var(--ink);
	font: 700 0.875rem/1 var(--m);
	white-space: nowrap;
	text-decoration: none;
}

.header-cta:hover {
	background: var(--paper);
	border-color: var(--paper);
}

/* Two Menu buttons, one shown: --small up to 900px, --full from 901px. */
.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.875rem;
	background: none;
	border: 1px solid var(--paper);
	color: var(--paper);
	font: 600 0.875rem/1 var(--m);
	cursor: pointer;
}

.nav-toggle[aria-expanded="true"] {
	background: var(--paper);
	color: var(--ink);
}

/* Two lines that cross into an ✕ while the menu is open. */
.nav-toggle__bars {
	position: relative;
	width: 1rem;
	height: 0.625rem;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	background: currentColor;
	transition: top 0.2s, transform 0.2s;
}

.nav-toggle__bars::before {
	top: 0;
}

.nav-toggle__bars::after {
	top: calc(100% - 1.5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before,
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	top: calc(50% - 0.75px);
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: rotate(-45deg);
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: inline;
}

/* Space hire and the visit details: in the small-screen menu only. */
.site-nav__more {
	display: none;
}

/* The full menu: on wider screens only, and only with JS to open it. */
.full-menu {
	display: none;
}

/* The page behind an open menu stays where it is. */
.nav-open {
	overflow: hidden;
}

/* Wide screens: the menu in the middle of the page, over the content, as the
   two groups either side take half the rest each. The logo's side is the
   wider, so below 1800px this would push the menu up against open now. */
@media (min-width: 1800px) {
	.site-header__start,
	.site-header__actions {
		flex: 1 1 0;
		min-width: max-content;
	}

	.site-header__actions {
		justify-content: flex-end;
	}
}

/* Open now gives way in steps as the bar gets tighter: the whole line, then
   "Open" or "Closed", then nothing. The whole line is always in the menus.
   With seven links the whole line fits from 1500px. */
@media (max-width: 1499px) {
	.open-state[data-state] .open-state__long {
		display: none;
	}

	.open-state[data-state] .open-state__short {
		display: inline;
	}
}

@media (max-width: 1365px) {
	.open-state {
		display: none;
	}
}

/* Seven links and the two buttons need about 1200px, so below that (on a
   laptop at 150%) the links fold behind Menu, which opens the full menu with
   every section in it. Without JS there is no full menu, so they stay. */
@media (min-width: 901px) and (max-width: 1199px) {
	.js .site-nav {
		display: none;
	}

	.js .site-header__actions {
		margin-left: auto;
	}
}

/* Just above 900px the bar is at its tightest. */
@media (max-width: 1000px) {
	.site-nav__menu a {
		font-size: 0.875rem;
	}
}

/* ---------- The full menu (template-parts/full-menu.php) ---------- */
@media (min-width: 901px) {
	.js .nav-toggle--full {
		display: inline-flex;
	}

	/* From the header's bottom edge (--nav-top, set by main.js) to the bottom
	   of the screen, edge to edge as the header is. */
	.js .full-menu {
		position: fixed;
		inset: var(--nav-top, 4.25rem) 0 0;
		z-index: 59;
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--ink);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.375rem);
		transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
	}

	.js .full-menu.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s, transform 0.2s;
	}

	/* Three columns of groups, and the visit details down the right. */
	.full-menu__inner {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(17rem, 21rem);
		gap: 2.5rem clamp(1.75rem, 3vw, 3.5rem);
		padding: 2rem clamp(1rem, 2vw, 1.75rem) 3rem;
	}

	.full-menu__inner.is-wide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.full-menu__group {
		padding-top: 1rem;
		border-top: 1px solid var(--rule-2);
	}

	/* The group's heading goes to the section's main page. */
	.full-menu__head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		margin-bottom: 0.875rem;
		font: 700 clamp(1.75rem, 2.6vw, 2.5rem)/1.02 var(--m);
		letter-spacing: -0.035em;
		color: var(--paper);
		text-decoration: none;
		transition: color 0.15s;
	}

	.full-menu__head::after {
		content: "→";
		content: "→" / "";
		font: 500 1.125rem/1 var(--g);
		letter-spacing: 0;
		color: var(--mute);
		transition: color 0.15s, transform 0.15s;
	}

	.full-menu__head:hover::after,
	.full-menu__head:focus-visible::after {
		transform: translateX(0.1875rem);
	}

	/* Where you are: cyan, and "Here" on the page itself, as the phone menu. */
	.full-menu__head[aria-current],
	.full-menu__head.is-within {
		color: var(--cyan);
	}

	.full-menu__head[aria-current]::after {
		content: "Here";
		content: "Here" / "";
		font: 600 0.6875rem/1 var(--g);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--cyan);
		transform: none;
	}

	/* Pointed at: cyan, heading and arrow, except on the page itself. */
	.full-menu__head:not([aria-current]):is(:hover, :focus-visible),
	.full-menu__head:not([aria-current]):is(:hover, :focus-visible)::after {
		color: var(--cyan);
	}

	.full-menu__group li a {
		display: inline-block;
		padding: 0.3125rem 0;
		font: 500 0.9688rem/1.35 var(--m);
		color: var(--soft);
		text-decoration: none;
		text-underline-offset: 0.3125rem;
	}

	.full-menu__group li a:hover,
	.full-menu__group li a:focus-visible {
		color: var(--paper);
		text-decoration: underline;
		text-decoration-color: var(--cyan);
	}

	.full-menu__group li a[aria-current] {
		color: var(--cyan);
	}

	.full-menu__more {
		display: inline-block;
		margin-top: 0.625rem;
		font: 600 0.75rem/1 var(--g);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--cyan);
		text-decoration: none;
	}

	.full-menu__more:hover {
		text-decoration: underline;
		text-underline-offset: 0.3125rem;
	}

	/* The visit details, as in the phone menu. */
	.full-menu__visit {
		grid-column: 4;
		grid-row: 1 / span 2;
		align-self: start;
		display: grid;
		gap: 1.5rem;
		padding: 1.5rem;
		background: var(--ink-2);
		border: 1px solid var(--rule);
	}

	.full-menu__visit p {
		margin: 0;
	}

	.full-menu__label {
		font: 600 0.6875rem/1 var(--g);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--mute);
	}

	.full-menu__open {
		display: flex;
		align-items: center;
		gap: 0.5625rem;
		font: 500 0.875rem/1.3 var(--g);
		color: var(--paper);
	}

	.full-menu__visit address {
		font: 500 0.9375rem/1.5 var(--m);
		color: var(--soft);
	}

	.full-menu__quick {
		display: grid;
		gap: 0.25rem;
	}

	.full-menu__quick a {
		font: 600 0.875rem/2 var(--g);
		color: var(--paper);
		text-underline-offset: 0.3125rem;
		overflow-wrap: anywhere;
	}

	.full-menu__small {
		padding-top: 1.25rem;
		border-top: 1px solid var(--rule);
	}

	.full-menu__small .menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1rem;
	}

	.full-menu__small a {
		font: 500 0.75rem/1.6 var(--g);
		color: var(--mute);
		text-underline-offset: 0.25rem;
	}

	/* The groups rise in one after another. */
	.js .full-menu.is-open .full-menu__inner > * {
		animation: nav-rise 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.js .full-menu.is-open .full-menu__inner > :nth-child(2) { animation-delay: 0.03s; }
	.js .full-menu.is-open .full-menu__inner > :nth-child(3) { animation-delay: 0.06s; }
	.js .full-menu.is-open .full-menu__inner > :nth-child(4) { animation-delay: 0.09s; }
	.js .full-menu.is-open .full-menu__inner > :nth-child(5) { animation-delay: 0.12s; }
	.js .full-menu.is-open .full-menu__inner > :nth-child(6) { animation-delay: 0.15s; }
	.js .full-menu.is-open .full-menu__inner > :nth-child(n + 7) { animation-delay: 0.18s; }
}

/* Two columns of groups, and the visit details underneath. */
@media (min-width: 901px) and (max-width: 1080px) {
	.full-menu__inner,
	.full-menu__inner.is-wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.full-menu__visit {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* Up to 900px the menu folds behind the small Menu button (and main.js),
   at the far right, and opens over the whole screen under the header. */
@media (max-width: 900px) {
	.site-header__start {
		margin-right: auto;
	}

	.nav-toggle--small {
		display: inline-flex;
		order: 3;
	}

	/* Without JS the links show as a row under the header; the .js class
	   is set inline in <head>. */
	.site-nav {
		order: 5;
		width: 100%;
		margin-inline: 0;
	}

	.site-nav__menu {
		flex-wrap: wrap;
		gap: 0.5rem 1.375rem;
		padding: 0.75rem 0;
		border-top: 1px solid var(--rule);
	}

	.site-nav__menu .sub-menu {
		display: block;
		padding-left: 1rem;
	}

	/* With JS: from the header's bottom edge (--nav-top, set by main.js) to
	   the bottom of the screen. */
	.js .site-nav {
		position: fixed;
		inset: var(--nav-top, 4.25rem) 0 0;
		z-index: 59;
		display: flex;
		flex-direction: column;
		gap: 1.75rem;
		width: auto;
		padding: 0.25rem clamp(1rem, 2vw, 1.75rem) 2rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--ink);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.375rem);
		transition: opacity 0.18s, transform 0.18s, visibility 0s 0.18s;
	}

	.js .site-nav.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.18s, transform 0.18s;
	}

	/* One big link per row; the whole row is the tap target. */
	.js .site-nav__menu {
		display: block;
		padding: 0;
		border: 0;
	}

	.js .site-nav__menu > li {
		border-bottom: 1px solid var(--rule);
	}

	.js .site-nav__menu a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: 1rem 0;
		font: 700 2rem/1.02 var(--m);
		letter-spacing: -0.035em;
		color: var(--paper);
		box-shadow: none;
	}

	.js .site-nav__menu a::after {
		content: "→";
		content: "→" / "";
		font: 500 1.25rem/1 var(--g);
		letter-spacing: 0;
		color: var(--mute);
		transition: color 0.15s, transform 0.15s;
	}

	.js .site-nav__menu a:hover::after,
	.js .site-nav__menu a:focus-visible::after {
		color: var(--cyan);
		transform: translateX(0.1875rem);
	}

	/* Where you are: cyan and "Here", as the cyan underline on wider screens. */
	.js .site-nav__menu .current-menu-item > a,
	.js .site-nav__menu .current-menu-ancestor > a,
	.js .site-nav__menu .current_page_parent > a {
		color: var(--cyan);
	}

	.js .site-nav__menu .current-menu-item > a::after,
	.js .site-nav__menu .current-menu-ancestor > a::after,
	.js .site-nav__menu .current_page_parent > a::after {
		content: "Here";
		content: "Here" / "";
		font: 600 0.6875rem/1 var(--g);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--cyan);
		transform: none;
	}

	.js .site-nav__menu .sub-menu {
		padding: 0 0 0.75rem 1rem;
	}

	.js .site-nav__menu .sub-menu a {
		padding: 0.5rem 0;
		font-size: 1.25rem;
	}

	/* The links rise in one after another. */
	.js .site-nav.is-open .site-nav__menu > li {
		animation: nav-rise 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.js .site-nav.is-open .site-nav__menu > li:nth-child(2) { animation-delay: 0.024s; }
	.js .site-nav.is-open .site-nav__menu > li:nth-child(3) { animation-delay: 0.048s; }
	.js .site-nav.is-open .site-nav__menu > li:nth-child(4) { animation-delay: 0.072s; }
	.js .site-nav.is-open .site-nav__menu > li:nth-child(5) { animation-delay: 0.096s; }
	.js .site-nav.is-open .site-nav__menu > li:nth-child(6) { animation-delay: 0.12s; }
	.js .site-nav.is-open .site-nav__menu > li:nth-child(n + 7) { animation-delay: 0.144s; }

	.js .site-nav__more {
		display: grid;
		gap: 1.75rem;
	}

	.site-nav__hire {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 3.5rem;
		padding: 0 1.125rem;
		background: var(--pink);
		color: var(--ink);
		font: 700 0.875rem/1 var(--m);
		text-decoration: none;
	}

	.site-nav__hire:hover {
		background: var(--paper);
	}

	.site-nav__visit {
		display: grid;
		gap: 1rem;
		padding-top: 1.25rem;
		border-top: 2px solid var(--paper);
	}

	.site-nav__open {
		display: flex;
		align-items: center;
		gap: 0.5625rem;
		margin: 0;
		font: 500 0.875rem/1.3 var(--g);
	}

	.site-nav__visit address {
		font: 500 0.9375rem/1.5 var(--m);
		color: var(--soft);
	}

	.site-nav__quick {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.375rem;
	}

	.site-nav__quick a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		font: 600 0.875rem/1 var(--g);
		color: var(--paper);
	}
}

/* Tablets keep Space hire in the header bar, so the menu leaves it out. */
@media (min-width: 601px) and (max-width: 900px) {
	.site-nav__hire {
		display: none;
	}
}

/* Phones: Space hire moves into the menu, keeping the header to one row. */
@media (max-width: 600px) {
	.js .header-cta {
		display: none;
	}
}

@keyframes nav-rise {
	from {
		opacity: 0;
		transform: translateY(0.625rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js .site-nav,
	.js .site-nav.is-open,
	.js .full-menu,
	.js .full-menu.is-open {
		transform: none;
		transition: none;
	}

	.js .site-nav.is-open .site-nav__menu > li,
	.js .full-menu.is-open .full-menu__inner > * {
		animation: none;
	}
}

@media (max-width: 520px) {
	.brand {
		gap: 0.5625rem;
	}

	.brand__text {
		font-size: 1.5rem;
	}

	.brand .logo-mark {
		height: 2.25rem;
	}

	.site-header__inner {
		gap: 0.625rem 0.75rem;
		min-height: 0;
		padding-block: 0.75rem;
	}

	.header-cta {
		padding: 0.625rem 0.8125rem;
		font-size: 0.7188rem;
	}

	.nav-toggle {
		padding: 0.5rem 0.6875rem;
		font-size: 0.8125rem;
	}
}

/* ---------- Footer ---------- */
.site-footer {
	padding-block: clamp(2.125rem, 4.5vw, 4.75rem) 2.75rem;
	background: var(--ink);
	border-top: 1px solid var(--rule);
}

.wordmark {
	display: flex;
	align-items: center;
	gap: clamp(0.875rem, 2vw, 2rem);
	padding-bottom: clamp(1.25rem, 2.6vw, 2.125rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
	border-bottom: 2px solid var(--paper);
}

.wordmark .logo-mark {
	height: clamp(1.75rem, 4.5vw, 4.6875rem);
}

.wordmark__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem 1.375rem;
	margin: 0;
	font: 700 clamp(1.75rem, 5vw, 5.25rem)/0.85 var(--m);
	letter-spacing: -0.05em;
}

.wordmark__text > span {
	font: 500 clamp(0.875rem, 1.4vw, 1.25rem)/1.2 var(--m);
	letter-spacing: -0.015em;
	color: var(--mute);
}

.site-footer__grid {
	display: grid;
	gap: clamp(1.125rem, 3vw, 3.5rem);
}

/* Five columns as wide as what is in them, the spare room shared between them. */
@media (min-width: 1321px) {
	.site-footer__grid {
		grid-template-columns: repeat(5, auto);
		justify-content: space-between;
		column-gap: clamp(1rem, 1.5vw, 3.5rem);
	}
}

.site-footer__heading {
	margin-bottom: 0.875rem;
	font: 700 clamp(1.5rem, 2.3vw, 2.125rem)/1.04 var(--m);
	letter-spacing: -0.035em;
}

.site-footer address {
	font-size: 0.9688rem;
	line-height: 1.6;
	color: var(--soft);
}

.site-footer__name {
	font-weight: 600;
	color: var(--paper);
}

.site-footer__registration {
	margin: 0.875rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--mute);
}

.site-footer .phone {
	display: inline-block;
	margin: 0.8125rem 0 0.5rem;
	font: 700 1.4375rem/1 var(--m);
	letter-spacing: -0.025em;
	color: var(--cyan);
	text-decoration: none;
}

.site-footer__col-title {
	margin-bottom: 0.75rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mute);
}

.site-footer__col li {
	padding: 0.25rem 0;
	font-size: 0.9375rem;
	color: #c1cac5;
}

.site-footer__col a {
	text-decoration: none;
}

.site-footer__col a:hover {
	color: var(--cyan);
}

/* Visit us column: open now (the green dot beats while open), the hours,
   phone, email and the Contact page. */
.site-footer__open {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
	margin: 0;
	font: 500 0.875rem/1.3 var(--g);
	color: var(--soft);
}

.site-footer__hours {
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--mute);
}

.site-footer__line {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.625rem 1.625rem;
	margin-top: clamp(1.625rem, 4vw, 3.25rem);
	padding-top: 1.125rem;
	border-top: 1px solid var(--rule);
	font: 500 0.7188rem/1.5 var(--g);
	letter-spacing: 0.1em;
	color: var(--mute);
}

.site-footer__line p {
	margin: 0;
	line-height: 1.5;
}

.site-footer__line ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.25rem;
}

.site-footer__line a,
.site-footer__line .braw-consent-link {
	text-decoration: none;
}

.site-footer__line a:hover,
.site-footer__line .braw-consent-link:hover {
	color: var(--cyan);
}

/* "Built by braw": braw's own yellow, underlined on hover. */
.site-footer__line .site-footer__credit a {
	color: #f8da2f;
}

.site-footer__line .site-footer__credit a:hover {
	color: #f8da2f;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Three columns once five would squeeze the address and the email
   (the type grows 20% from 1280px, so 1280–1320 is the tightest). */
@media (max-width: 1320px) {
	.site-footer__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 540px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}