/* Page sections, one block per template part in template-parts/sections/. */

/* ---------- Hero (sections/hero.php) ----------
 * Cyan, the colour of the welcome. Sizes lean on vh as well as vw so that on
 * a laptop the hero and the live band below it fit on the first screen.
 * --fold is everything else that shares that screen: the header and the band.
 */
.hero {
	--fold: calc(var(--header) + 3.125rem);
	--hero-interval: 6s;
	padding-top: clamp(1.25rem, min(5vw, 3.2vh), 4rem);
	background: var(--cyan);
	color: var(--ink);
}

.admin-bar .hero {
	--fold: calc(var(--header) + 3.125rem + var(--wp-admin--admin-bar--height, 32px));
}

.hero__title {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: clamp(1.5rem, 5vw, 4.375rem);
}

.hero__title h1 {
	font-size: clamp(3.625rem, min(9vw, 9.5vh), 9.25rem);
	letter-spacing: -0.05em;
	line-height: 0.92;
}

/* The name and welcome, large, over the introduction in small, set to the
   right-hand edge, even on the line below the headline. */
.hero__said {
	margin-left: auto;
	padding-bottom: 0.375rem;
	text-align: right;
}

.hero__name {
	margin: 0 0 0.875rem;
	font: 700 clamp(1.625rem, min(3vw, 4vh), 3rem)/0.98 var(--m);
	letter-spacing: -0.035em;
}

.hero__intro {
	max-width: 34ch;
	margin: 0 0 0 auto;
	font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
	line-height: 1.45;
	color: #2c4446;
}

/* The chooser. It moves on by itself every --hero-interval until a visitor
   picks a choice or presses Pause (main.js). Needs JS, so hidden without. */
.hero__intent {
	margin-top: clamp(1rem, min(4vw, 2.4vh), 3.5rem);
	border-top: 2px solid var(--ink);
}

html:not(.js) .hero__intent {
	display: none;
}

.hero__ask-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.hero__ask {
	margin: 0;
	padding: 0.75rem 0 0.5rem;
	font: 600 0.6875rem/1 var(--m);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #2c4446;
}

/* Pause / Play, in the question's voice. The icon is two bars while it
   moves on by itself, a triangle when stopped. */
.hero__play {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 0 0 0.75rem;
	background: none;
	border: 0;
	color: #2c4446;
	font: 600 0.6875rem/1 var(--m);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hero__play:hover {
	color: var(--ink);
}

.hero__play i {
	width: 0.5625rem;
	height: 0.625rem;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.hero.is-playing .hero__play i {
	background: none;
	border-inline: 0.1875rem solid currentColor;
	clip-path: none;
}

/* The words (tabs), then any choice that goes to a page of its own. The
   words and the button take 45-50em together, so 1.75vw keeps them on one
   line from about 1050px. Below that the words fill the line, and the button
   starts the next one on the left, under them, not alone at the far right. */
.hero__choices {
	--hero-word: clamp(1.1875rem, min(1.75vw, 3vh), 1.9375rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	padding-bottom: clamp(0.75rem, min(2.4vw, 2vh), 1.875rem);
}

.hero__verbs {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 0.25rem 0.625rem;
}

.hero__verbs button {
	padding: 0.375rem 0;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--ink);
	font: 700 var(--hero-word)/1.05 var(--m);
	letter-spacing: -0.03em;
	opacity: 0.55;
	transition: opacity 0.16s, border-color 0.16s;
}

.hero__verbs button:not(:last-child)::after {
	content: "·";
	margin-left: 0.6875rem;
	opacity: 0.4;
}

.hero__verbs button:hover,
.hero__verbs button[aria-selected="true"] {
	opacity: 1;
}

.hero__verbs button[aria-selected="true"] {
	border-bottom-color: currentColor;
}

/* Moving on by itself: the chosen word's underline is a faint track that
   fills over --hero-interval; when it is full, main.js picks the next word.
   It stops filling while held (someone reading the panel, or focus in it). */
.hero__verbs button {
	position: relative;
}

.hero.is-playing .hero__verbs button[aria-selected="true"] {
	border-bottom-color: rgb(17 28 29 / 0.2);
}

.hero.is-playing .hero__verbs button[aria-selected="true"]::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	background: currentColor;
	transform-origin: left;
	animation: hero-progress var(--hero-interval) linear both;
}

.hero.is-held .hero__verbs button[aria-selected="true"]::before {
	animation-play-state: paused;
}

@keyframes hero-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* A panel whose choice is a link has no word to fill, so its time runs out
   on this instead, unseen. main.js adds it and sets .is-counting. */
.hero__tick {
	position: absolute;
	width: 1px;
	height: 1px;
	visibility: hidden;
}

.hero.is-playing .hero__tick.is-counting {
	animation: hero-progress var(--hero-interval) linear both;
}

.hero.is-held .hero__tick.is-counting {
	animation-play-state: paused;
}

/* Pink means "this could be yours". Pink text on cyan is unreadable, so the
   choice is a pink block with ink letters, at full strength even when not chosen. */
.hero__verbs .is-space {
	padding-inline: 0.28em;
	background: var(--pink);
	opacity: 1;
}

/* A choice that goes to a page ("book a space", to the spaces): a button
   with the arrow of a link out, in the words' type so it still answers the
   question. Ink, or pink for space to hire, as the header's button. At the
   right-hand edge, in line with Pause, when it shares the words' line. */
.hero__go {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 2.75rem;
	padding: 0.25em 0.5em;
	background: var(--ink);
	color: var(--cyan);
	font: 700 var(--hero-word)/1.05 var(--m);
	letter-spacing: -0.03em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.16s, color 0.16s;
}

.hero__go.is-space {
	background: var(--pink);
	color: var(--ink);
}

.hero__go:hover {
	background: var(--paper);
	color: var(--ink);
}

/* The stage: a text panel beside a photo, as wide as the page's content
   (the container, less its padding), with the hero's cyan around it. */
.hero {
	padding-bottom: clamp(1rem, 2.2vw, 2rem);
}

.hero__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	align-items: stretch;
	width: calc(min(var(--container), 100%) - 2 * var(--pad));
	min-height: clamp(23.75rem, 42vw, 33.75rem);
	margin-inline: auto;
}

/* Every panel sits in the same cell, so the stage is always as tall as the
   longest one; only the chosen one is visible. */
.hero__reads {
	display: grid;
}

.hero__read {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, min(3.4vw, 3.8vh), 3rem);
	background: var(--ink);
	color: var(--paper);
}

.hero__read:not(.is-active) {
	visibility: hidden;
}

.hero__read .tag {
	margin: 0;
}

.hero__read h2 {
	font-size: clamp(2.125rem, min(3.7vw, 4.6vh), 3.625rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	/* Under 1, a descender (the p in "Pull up") meets the line below's i dot. */
	line-height: 1.05;
	color: var(--cyan);
}

.hero__blurb {
	max-width: 38ch;
	margin: clamp(0.625rem, 1.6vh, 1rem) 0 clamp(0.75rem, 2vh, 1.25rem);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #d3d9d4;
}

.hero__facts {
	width: 100%;
	margin: 0 0 clamp(0.875rem, 2.2vh, 1.375rem);
}

.hero__facts > div {
	display: grid;
	grid-template-columns: 4.75rem 1fr;
	gap: 0.75rem;
	padding: clamp(0.4375rem, 1vh, 0.625rem) 0;
	border-top: 1px solid var(--rule);
	font: 500 0.7812rem/1.4 var(--g);
}

.hero__facts dt {
	color: var(--mute);
}

.hero__facts dd {
	margin: 0;
}

.hero__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem 1.375rem;
	margin-top: auto;
}

.hero__act {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.625rem;
	min-width: min(17.5rem, 100%);
	padding: 0.9375rem 1.25rem;
	background: var(--cyan);
	color: var(--ink);
	font: 700 0.8438rem/1 var(--m);
	text-decoration: none;
	white-space: nowrap;
}

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

.hero__alt {
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cyan);
	white-space: nowrap;
}

.hero__reel {
	display: flex;
	gap: 0.375rem;
	margin-left: auto;
}

.hero__reel button {
	width: 2.75rem;
	height: 2.75rem;
	background: none;
	border: 1px solid var(--rule-2);
	color: var(--paper);
	font: 500 1.125rem/1 var(--g);
}

.hero__reel button:hover {
	background: var(--paper);
	color: var(--ink);
}

/* Space to hire: the panel turns pink. */
.hero__read.is-space {
	background: var(--pink);
	color: var(--ink);
}

.is-space h2,
.is-space .hero__alt {
	color: var(--ink);
}

.is-space .hero__blurb {
	color: #4a1030;
}

.is-space .hero__facts > div {
	border-top-color: rgb(17 28 29 / 0.3);
}

.is-space .hero__facts dt {
	color: #6d2148;
}

.is-space .hero__act {
	background: var(--ink);
	color: var(--pink);
}

.is-space .hero__act:hover {
	background: #000;
}

.is-space .hero__reel button {
	border-color: rgb(17 28 29 / 0.4);
	color: var(--ink);
}

.is-space .hero__reel button:hover {
	background: var(--ink);
	color: var(--pink);
}

.hero__shots {
	position: relative;
	min-width: 0;
	overflow: hidden;
	background: var(--ink-2);
}

.hero__shot img {
	width: 100%;
	height: 100%;
	min-height: clamp(18.75rem, 36vw, 33.75rem);
}

.hero__shot figcaption {
	position: absolute;
	left: 0.875rem;
	bottom: 0.875rem;
	max-width: calc(100% - 1.75rem);
	padding: 0.5rem 0.6875rem;
	background: var(--ink);
	color: var(--paper);
	font: 500 0.6562rem/1.5 var(--g);
	letter-spacing: 0.05em;
}

@media (max-width: 940px) {
	.hero__stage {
		grid-template-columns: 1fr;
	}

	.hero__shots {
		order: -1;
	}

	.hero__shot img {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

/* Desktop: the hero fills the screen down to the live band and the photo
   fills whatever the text leaves, so the band is in view on load. */
@media (min-width: 941px) {
	.hero {
		display: flex;
		flex-direction: column;
		min-height: calc(100svh - var(--fold));
	}

	.hero__stage {
		flex: 1 0 auto;
		min-height: 20rem;
	}

	.hero__shot img {
		position: absolute;
		inset: 0;
		min-height: 0;
	}

	/* A denser text panel: counter beside the label, details in a row. */
	.hero__read-top {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.25rem 1rem;
		margin-bottom: clamp(0.625rem, 1.8vh, 1.125rem);
	}

	.hero__blurb {
		max-width: 48ch;
	}

	.hero__facts {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 1rem;
	}

	.hero__facts > div {
		display: block;
	}

	.hero__facts dt {
		margin-bottom: 3px;
	}

	.hero__act {
		min-width: 0;
		gap: 1.125rem;
	}

	.hero__acts {
		flex-wrap: wrap;
		gap: 0.625rem 1.125rem;
	}
}

/* ---------- Numbered sections (template-parts/section-head.php) ----------
 * The space around them and their headings lean on vh as well as vw, as the
 * hero's do: a laptop is as wide as a desktop screen but much shorter, and
 * sized by width alone a page's opening fills its first screen.
 */
.section {
	padding-block: clamp(2.5rem, min(5.5vw, 9vh), 6rem);
}

.section__label {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid currentColor;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* At the top of a page: where you are (lcc_page_trail()), the pages above linked. */
.section__label a {
	text-decoration: none;
}

.section__label a:hover {
	text-decoration: underline;
}

/* The heading, with its introduction underneath. */
.section__head {
	display: grid;
	gap: clamp(1rem, min(1.8vw, 2.4vh), 1.5rem);
	margin-top: clamp(1.375rem, min(3vw, 4vh), 2.75rem);
}

/* The homepage has no label line above it (section-head.php): no gap to leave. */
.home .section__head:first-child {
	margin-top: 0;
}

.section__head h1,
.section__head h2 {
	font-size: clamp(2.375rem, min(5.2vw, 9vh), 5.375rem);
	letter-spacing: -0.045em;
	line-height: 0.93;
}

.section__head p {
	max-width: 42ch;
	margin: 0;
	font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
	line-height: 1.55;
}

/* ---------- The band under the hero (sections/now.php) ---------- */
.now-band {
	background: var(--ink);
	border-bottom: 1px solid var(--rule);
}

.now-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem clamp(1.125rem, 2.6vw, 2.75rem);
	padding-block: 0.875rem;
}

.now-band__bit {
	display: inline-flex;
	align-items: baseline;
	gap: 0.625rem;
	margin: 0;
	font: 500 0.8125rem/1.4 var(--g);
	color: var(--mute);
}

.now-band__bit b {
	font-weight: 600;
	color: var(--paper);
}

.now-band__bit.is-on b {
	color: var(--green);
}

.now-band__bit.is-today b {
	color: var(--pink);
}

.now-band__jump {
	margin-left: auto;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--cyan);
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cyan);
	text-decoration: none;
}

@media (max-width: 820px) {
	.now-band__jump {
		margin-left: 0;
	}
}

/* ---------- Today (sections/today.php): green, the colour of now ---------- */
.today {
	background: var(--green);
	color: var(--ink);
}

.today .section__label,
.today .section__head p {
	color: #33461a;
}

.today__run {
	margin-top: clamp(1.5rem, 3vw, 3rem);
	border-bottom: 1px solid #7ea342;
}

.today__run > li {
	border-top: 1px solid #7ea342;
}

.today__run > li > * {
	display: grid;
	grid-template-columns: 6rem 1fr auto;
	gap: 0.375rem 1.375rem;
	align-items: baseline;
	width: 100%;
	padding: 1.1875rem 0;
	background: none;
	border: 0;
	color: inherit;
	text-align: left;
	text-decoration: none;
}

.today__run time {
	font: 500 clamp(1.25rem, 1.9vw, 1.6875rem)/1 var(--g);
	letter-spacing: -0.025em;
}

.today__run strong {
	display: block;
	font: 600 clamp(1.25rem, 2.1vw, 1.875rem)/1.1 var(--m);
	letter-spacing: -0.03em;
}

.today__run small {
	display: block;
	margin-top: 0.375rem;
	font: 500 0.7812rem/1.5 var(--g);
	color: #3c5220;
}

.today__go {
	font: 500 1.375rem/1 var(--g);
}

.today__run button:hover strong,
.today__run a:hover strong {
	text-decoration: underline;
	text-underline-offset: 0.3125rem;
}

.today__flag {
	display: none;
	margin-bottom: 0.5rem;
	padding: 0.3125rem 0.5rem;
	background: var(--ink);
	font: 600 0.5938rem/1 var(--g);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.today__until,
.today__done {
	display: none;
}

.today__run .past {
	opacity: 0.45;
}

.today__run .past .today__done,
.today__run .live .today__until {
	display: inline;
}

.today__run .live {
	margin-inline: -0.875rem;
	padding-inline: 0.875rem;
	background: rgb(17 28 29 / 0.07);
}

.today__run .live .today__flag--live {
	display: inline-block;
	color: var(--green);
}

/* An empty hour is not a gap in the timetable, it is the offer. */
.today__run .spare {
	margin-inline: -0.875rem;
	padding-inline: 0.875rem;
	background: var(--pink);
	border-top-color: var(--pink);
}

.today__run .spare .today__flag {
	display: inline-block;
	color: var(--pink);
}

.today__run .spare small {
	color: #5c1338;
}

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

.today__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-top: clamp(1.375rem, 3vw, 2.5rem);
}

.today__first {
	flex: 1 1 32.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem 1.625rem;
	padding: 1.125rem 1.25rem;
	border: 2px solid var(--ink);
}

.today__first strong {
	font: 700 clamp(1.1875rem, 1.7vw, 1.5rem)/1.1 var(--m);
	letter-spacing: -0.025em;
}

.today__first p {
	max-width: 46ch;
	margin: 0;
	font-size: 0.9062rem;
}

.today__first a,
.today__to-rooms {
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.today__first a {
	margin-left: auto;
}

.today__to-rooms {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1.125rem 1.375rem;
	background: var(--ink);
	color: var(--pink);
	text-decoration: none;
}

.today__to-rooms b {
	font: 700 clamp(1.1875rem, 1.7vw, 1.5rem)/1.1 var(--m);
	letter-spacing: -0.025em;
	text-transform: none;
	color: var(--paper);
}

.today__to-rooms:hover b {
	text-decoration: underline;
	text-underline-offset: 0.3125rem;
}

@media (max-width: 760px) {
	.today__run > li > * {
		grid-template-columns: 1fr auto;
	}

	.today__go {
		grid-row: 1;
		grid-column: 2;
	}

	.today__session {
		grid-column: 1 / -1;
	}

	.today__first a {
		margin-left: 0;
	}

	.today__to-rooms {
		flex-basis: 100%;
		flex-wrap: wrap;
		white-space: normal;
	}
}

/* ---------- What's on (sections/week.php): paper, the reading surface ---------- */
.k-move { --c: var(--pink); --cdark: #a3145e; }
.k-make { --c: var(--cyan); --cdark: #14666a; }
.k-learn { --c: var(--green); --cdark: #4a6b16; }
.k-young { --c: #ffb347; --cdark: #8a5300; }
.k-together { --c: #c8a8ff; --cdark: #5b3b9e; }

.week {
	background: var(--paper);
	color: var(--ink);
}

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

.week__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-top: clamp(1.5rem, 3vw, 2.75rem);
	border-block: 2px solid var(--ink);
}

.week__days button {
	position: relative;
	min-width: 0;
	/* Big enough to tap on a phone, now that each is just the day's name. */
	min-height: 2.75rem;
	padding: clamp(0.75rem, 1.4vw, 1.25rem) 0.25rem;
	background: none;
	border: 0;
	border-left: 1px solid var(--ink-rule);
	color: var(--ink);
	text-align: center;
}

.week__days button:first-child {
	border-left: 0;
}

.week__d {
	display: block;
	font: 700 clamp(1.25rem, 3vw, 2.875rem)/0.9 var(--m);
	letter-spacing: -0.04em;
}

.week__today {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0.25rem 0.4375rem;
	background: var(--green);
	color: var(--ink);
	font: 700 0.5625rem/1 var(--g);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.week__days button:hover {
	background: var(--paper-2);
}

.week__days button[aria-selected="true"] {
	background: var(--ink);
	color: var(--paper);
}

@media (max-width: 560px) {
	.week__today {
		padding: 3px 0.25rem;
		font-size: 0.5rem;
	}
}

.week__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.25rem;
	margin-top: 0.375rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--ink-rule);
}

.week__filters button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0 0.3125rem;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font: 500 0.875rem/1 var(--m);
	color: #5c6663;
}

.week__filters button:hover {
	color: var(--ink);
}

.week__filters button[aria-pressed="true"] {
	color: var(--ink);
	border-bottom-color: currentColor;
}

.week__filters i {
	display: inline-block;
	width: 0.5625rem;
	height: 0.5625rem;
	background: var(--c);
}

/* The day tabs and filters need JS; without it every day is listed under its own heading. */
html:not(.js) .week__days,
html:not(.js) .week__filters {
	display: none;
}

.js .week__day:not(.is-active) {
	display: none;
}

.week__day-title {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	font: 700 clamp(1.375rem, 2vw, 1.875rem)/1.1 var(--m);
	letter-spacing: -0.03em;
}

.js .week__day-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.week__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr));
	gap: 2px;
	margin-top: clamp(1.125rem, 2.4vw, 1.875rem);
	background: var(--ink-rule);
	border: 2px solid var(--ink-rule);
}

.week__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 12.5rem;
	padding: 1rem 1.125rem 1.125rem;
	background: var(--paper);
	border: 0;
	border-top: 0.5rem solid var(--c, var(--ink-rule));
	color: var(--ink);
	text-align: left;
	transition: background 0.15s;
}

/* Hover floods the card with its colour, as the section bands do. */
.week__card:hover,
.week__card:focus-visible {
	background: var(--c, var(--paper-2));
}

.week__card:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: -3px;
}

.week__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.625rem;
}

.week__card time {
	font: 500 clamp(1.5rem, 2vw, 1.875rem)/1 var(--g);
	letter-spacing: -0.025em;
	white-space: nowrap;
}

/* The colour along the top says what kind of thing it is; the word is for screen readers. */
.week__kind {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.week__card strong {
	font: 700 clamp(1.25rem, 1.6vw, 1.5rem)/1.1 var(--m);
	letter-spacing: -0.03em;
}

.week__card small {
	margin-top: auto;
	font: 500 0.7812rem/1.45 var(--g);
	color: #5c6663;
}

.week__cost {
	font: 600 0.8125rem/1 var(--g);
}

.week__card:hover small,
.week__card:focus-visible small {
	color: var(--ink);
}

.week__card.past > * {
	opacity: 0.45;
}

/* The café's week (space-week.php): a day a card, green along the top when
   it opens, dimmed when it doesn't; a day with its own page links to it. */
.cafe-day {
	--c: var(--green);
	text-decoration: none;
}

.cafe-day.is-closed {
	--c: var(--ink-rule);
}

.cafe-day.is-closed > * {
	opacity: 0.45;
}

.cafe-week__note {
	margin: 0.875rem 0 0;
	font: 500 0.8125rem/1.45 var(--g);
	color: #5c6663;
}

.week__card.past time::after {
	content: " · finished";
	font-size: 0.75rem;
	letter-spacing: 0;
}

.week__card.now {
	background: var(--green);
}

/* On its own line above the time, so it never squeezes the time. */
.week__card.now::before {
	content: "Happening now";
	align-self: flex-start;
	padding: 0.3125rem 0.5rem;
	background: var(--ink);
	color: var(--green);
	font: 600 0.5938rem/1 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.week__empty {
	grid-column: 1 / -1;
	padding: clamp(1.375rem, 3vw, 2.75rem);
	background: var(--pink);
}

.week__empty h4 {
	margin-bottom: 0.75rem;
	font: 700 clamp(2rem, 4vw, 4rem)/0.95 var(--m);
	letter-spacing: -0.04em;
}

.week__empty p {
	max-width: 48ch;
	margin: 0 0 1.25rem;
}

.week__empty.is-quiet {
	background: var(--paper-2);
}

.week__go {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--ink);
	color: var(--pink);
	font: 700 0.9375rem/1 var(--m);
	text-align: left;
	text-decoration: none;
}

.week__go:hover {
	background: #000;
}

.week__foot {
	margin: 0;
	padding-top: 1rem;
	font: 500 0.6875rem/1.5 var(--g);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5c6663;
}

@media (max-width: 620px) {
	.week__card {
		min-height: 0;
	}

	.week__card small {
		margin-top: 0.25rem;
	}
}

/* ---------- Rooms (sections/rooms.php): pink, space that could be yours ---------- */
.rooms {
	background: var(--pink);
	color: var(--ink);
}

.rooms .section__label,
.rooms .section__head p {
	color: #4a1030;
}

.rooms__scale {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1.375rem;
	padding-block: clamp(1.25rem, 2.6vw, 2.375rem);
}

/* Each name is sized by --scale: the square root of its floor area against the biggest room's. */
.rooms__scale button {
	padding: 0 0.06em;
	background: none;
	border: 0;
	color: var(--ink);
	font-family: var(--m);
	font-size: max(1.5rem, calc(var(--scale, 0.3) * clamp(3rem, 10vw, 10.5rem)));
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	text-align: left;
}

.rooms__scale sup {
	position: relative;
	top: 0.3em;
	margin-left: 0.14em;
	font: 600 max(0.625rem, 0.12em)/1 var(--g);
	letter-spacing: 0.04em;
	vertical-align: top;
}

.rooms__scale button:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.05em;
	text-underline-offset: 0.08em;
}

.rooms__scale button[aria-selected="true"] {
	padding-inline: 0.14em;
	background: var(--ink);
	color: var(--pink);
}

/* Too small for your group: the name empties out but stays readable. */
.rooms__scale .too-small {
	-webkit-text-stroke: 1.5px var(--ink);
	color: transparent;
}

.rooms__scale .too-small sup {
	-webkit-text-stroke: 0;
	color: #6d2148;
}

.rooms__scale .too-small[aria-selected="true"] {
	-webkit-text-stroke: 1.5px var(--pink);
}

.rooms__status {
	margin: 0 0 clamp(1.25rem, 2.6vw, 2.125rem);
	font: 500 0.875rem/1.5 var(--g);
	color: #4a1030;
}

.rooms__status:empty {
	display: none;
}

/* Every room's panel sits in the same cell; only the chosen one is visible. */
.rooms__panels {
	display: grid;
}

.rooms__room {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	background: var(--ink);
	color: var(--paper);
}

.js .rooms__room:not(.is-active) {
	visibility: hidden;
}

/* Without JS, every room is listed. */
html:not(.js) .rooms__panels {
	gap: 2px;
}

html:not(.js) .rooms__room {
	grid-area: auto;
}

.rooms__photo {
	position: relative;
	min-height: clamp(16.25rem, 30vw, 28.75rem);
	background: var(--ink-2);
}

.rooms__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.rooms__nophoto {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: repeating-linear-gradient(135deg, var(--ink-2) 0 0.875rem, var(--ink-3) 0.875rem 1.75rem);
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mute);
}

.rooms__body {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2.6vw, 2.5rem);
}

.rooms__body h3 {
	font: 700 clamp(2rem, 3.6vw, 3.5rem)/0.95 var(--m);
	letter-spacing: -0.04em;
	color: var(--pink);
}

.rooms__good {
	margin: 0.625rem 0 1.125rem;
	font-size: 1rem;
	color: var(--soft);
}

.rooms__spec {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1.125rem;
	margin: 0 0 1.125rem;
	padding: 0.875rem 0;
	border-block: 1px solid var(--rule);
	font: 500 0.8438rem/1.4 var(--g);
}

.rooms__spec dt {
	padding-top: 2px;
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}

.rooms__spec dd {
	margin: 0;
}

/* The book and enquire buttons (.space-actions) sit at the foot of the panel. */
.rooms__body .space-actions {
	margin-top: auto;
	padding-top: 1.375rem;
}

.rooms__note {
	margin: 0.875rem 0 0;
	font: 500 0.75rem/1.5 var(--g);
	color: #4a1030;
}

@media (max-width: 860px) {
	.rooms__room {
		grid-template-columns: 1fr;
	}
}

/* The finder and the chosen room, half and half across the full width.
   The section is exactly as tall as the room's ink panel: no pink above or
   below it. The finder sits at the inner end of its half, so its content
   lines up with the page's left margin, with its own padding top and bottom;
   the rates note sits at the foot of the block. */
.rooms--split {
	padding-block: 0;
}

.rooms__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.rooms__finder {
	justify-self: end;
	display: flex;
	flex-direction: column;
	width: min(100%, calc(var(--container) / 2));
	padding: clamp(1.75rem, 3.4vw, 3.25rem) clamp(1.5rem, 4vw, 4rem) clamp(1.75rem, 3.4vw, 3.25rem) var(--pad);
}

/* The section heading, in half the width. */
.rooms__finder .section__head {
	margin-top: clamp(1rem, 2vw, 1.75rem);
}

.rooms__finder .section__head h1,
.rooms__finder .section__head h2 {
	font-size: clamp(2.125rem, 4vw, 4.25rem);
}

.rooms__finder .people {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Half the width, so the biggest name is drawn smaller than across the full page. */
.rooms__finder .rooms__scale {
	padding-block: clamp(1.5rem, 3vw, 2.75rem);
	align-content: flex-start;
}

.rooms__finder .rooms__scale button {
	font-size: max(1.375rem, calc(var(--scale, 0.3) * clamp(2.5rem, 6.4vw, 7.375rem)));
}

.rooms__finder .rooms__status {
	margin-bottom: 0;
}

.rooms__finder .rooms__note {
	margin-top: auto;
	padding-top: clamp(1rem, 2vw, 1.5rem);
}

.rooms__split .rooms__room {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
}

.rooms__split .rooms__photo {
	min-height: 0;
	aspect-ratio: 2 / 1;
}

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

	.rooms__finder {
		justify-self: stretch;
		width: auto;
		padding: clamp(1.75rem, 6vw, 2.5rem) var(--pad);
	}
}

/* ---------- The floor plan (sections/map.php) ----------
 * A drawing on a slightly darker paper: rooms outlined in ink, the chosen
 * room filled pink (space that could be yours), its details on an ink card
 * beside the drawing. Small screens get a list of the rooms instead.
 */
.map {
	background: var(--paper-2);
	color: var(--ink);
}

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

.map__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(20rem, 30vw, 26.25rem);
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: stretch;
	margin-top: clamp(1.75rem, 3.4vw, 3.25rem);
}

/* The drawing sits on a lighter panel as tall as the room card beside it,
   the plan centred in it, so both columns start and end on the same lines. */
.map__drawing {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1rem, 2vw, 1.75rem);
	background: var(--paper);
}

.map__plan {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.map__outline {
	fill: none;
	stroke: var(--ink);
	stroke-width: 2.5;
}

.map__corridor {
	fill: none;
	stroke: var(--ink);
	stroke-width: 1;
	stroke-dasharray: 2 5;
	opacity: 0.55;
}

/* Where the corridor reaches each group of rooms, as on the wall map. */
.map__stops circle {
	fill: var(--paper);
	stroke: var(--ink);
	stroke-width: 1.5;
}

.map__label,
.map__dimtext,
.map__service text,
.map__entrance text {
	font: 500 11px var(--g);
	letter-spacing: 0.14em;
	fill: var(--ink-mute);
}

.map__dim {
	stroke: var(--ink);
	stroke-width: 1;
}

.map__dimtext {
	fill: var(--ink);
}

.map__service rect {
	fill: none;
	stroke: var(--ink);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	opacity: 0.5;
}

/* The line from the office by the entrance to its name under the building. */
.map__service path {
	fill: none;
	stroke: var(--ink);
	stroke-width: 1;
	opacity: 0.5;
}

/* The way in: an arrow up through the gap in the outside wall. */
.map__entrance path {
	fill: none;
	stroke: var(--ink);
	stroke-width: 2;
}

.map__entrance text {
	fill: var(--ink);
}

.map__room {
	cursor: pointer;
}

.map__room rect {
	fill: transparent;
	stroke: var(--ink);
	stroke-width: 1.5;
	transition: fill 0.15s;
}

.map__room:hover rect {
	fill: var(--paper-2);
}

/* "How many of you?": pale pink if it's big enough, grey stripes if it's
   too small, bright pink for the one chosen. */
.map__room.fits rect {
	fill: rgb(255 118 180 / 0.3);
}

.map__room.fits:hover rect {
	fill: rgb(255 118 180 / 0.55);
}

.map__room.too-small rect {
	fill: url(#map-stripes);
}

.map__room.too-small text {
	opacity: 0.55;
}

/* Not for hire (the café): plain grey, whatever "How many of you?" says. */
.map__room.not-for-hire rect,
.map__room.not-for-hire:hover rect {
	fill: rgb(17 28 29 / 0.09);
}

.map__room.not-for-hire text {
	opacity: 0.6;
}

.map__stripes-ground {
	fill: var(--paper-2);
}

.map__stripes-line {
	stroke: rgb(17 28 29 / 0.16);
	stroke-width: 5;
}

.map__room.is-active rect {
	fill: var(--pink);
	stroke-width: 2.5;
}

.map__room.is-active text {
	opacity: 1;
}

.map__room:focus {
	outline: none;
}

.map__room:focus-visible rect {
	stroke-width: 5;
}

/* A smaller room in a room's corner (its toilets, or a store) stays white
   whatever the room's shading. */
.map__plan .map__room rect.map__inner {
	fill: var(--paper);
	stroke-width: 1;
}

/* The access symbol on the accessible toilet. */
.map__access {
	fill: none;
	stroke: var(--ink);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.map__access circle {
	fill: var(--ink);
	stroke: none;
}

.map__name {
	font: 700 22px var(--m);
	letter-spacing: -0.02em;
	fill: var(--ink);
}

.map__sub {
	font: 500 12px var(--g);
	letter-spacing: 0.1em;
	fill: var(--ink-mute);
}

.map__room.is-active .map__sub {
	fill: #4a1030;
}

/* Small screens: the drawing is too small to read, so the rooms become a list. */
.map__list {
	display: none;
}

@media (max-width: 700px) {
	.map__plan {
		display: none;
	}

	.map__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px;
		background: var(--ink-rule);
		border: 2px solid var(--ink-rule);
	}

	.map__list button {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		padding: 0.8125rem 0.75rem;
		background: var(--paper);
		border: 0;
		color: var(--ink);
		text-align: left;
	}

	.map__list b {
		font: 700 1.0625rem/1.1 var(--m);
		letter-spacing: -0.025em;
	}

	.map__list small {
		font: 500 0.7188rem/1.35 var(--g);
		color: var(--ink-mute);
	}

	.map__list .fits {
		background: rgb(255 118 180 / 0.3);
	}

	.map__list .too-small {
		background: repeating-linear-gradient(135deg, var(--paper-2) 0 0.375rem, rgb(17 28 29 / 0.1) 0.375rem 0.5625rem);
		color: rgb(17 28 29 / 0.6);
	}

	.map__list .not-for-hire {
		background: rgb(17 28 29 / 0.09);
		color: rgb(17 28 29 / 0.6);
	}

	.map__list [aria-pressed="true"] {
		background: var(--pink);
		color: var(--ink);
	}
}

/* "How many of you?" at the top of the drawing's panel, the plan straight
   under it, and which spaces fit at the bottom. */
.map__drawing {
	justify-content: flex-start;
}

.map__drawing .people {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.map__foot {
	margin-top: auto;
}

.map__drawing .map__plan + .map__list + .map__foot {
	padding-top: 0.75rem;
}

/* The Spaces page, where the plan opens the page: a compact opening (the
   heading on one line, the introduction beside it) so the plan starts
   above the fold. */
.map--page {
	padding-top: clamp(1.5rem, 3vw, 2.75rem);
}

.map--page .section__head {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: end;
	margin-top: clamp(1rem, 2vw, 1.5rem);
}

.map--page .section__head h1 {
	font-size: clamp(2.125rem, 4.2vw, 3.75rem);
}

.map--page .section__head h1 br {
	display: none;
}

.map--page .map__layout {
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 900px) {
	.map--page .section__head {
		grid-template-columns: 1fr;
	}
}

.map__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	margin-top: clamp(1rem, 2vw, 1.5rem);
	padding-top: 0.75rem;
	border-top: 1px solid var(--ink-rule);
}

.map__status {
	flex: 1 1 22rem;
	margin: 0;
	font: 500 0.8125rem/1.45 var(--g);
	color: var(--ink-mute);
}

.map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1rem;
}

.map__legend li {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	font: 500 0.6875rem/1 var(--g);
	color: var(--ink-mute);
}

.map__legend i {
	width: 0.875rem;
	height: 0.875rem;
	border: 1px solid var(--ink);
}

.map__legend .fits i {
	background: rgb(255 118 180 / 0.3);
}

.map__legend .too-small i {
	background: repeating-linear-gradient(135deg, var(--paper-2) 0 2px, rgb(17 28 29 / 0.25) 2px 4px);
}

.map__legend .is-active i {
	background: var(--pink);
}

.map__legend .not-for-hire i {
	background: rgb(17 28 29 / 0.12);
}

html:not(.js) .map__foot {
	display: none;
}

/* The details: one card per room in the same cell; only the chosen one shows. */
.map__cards {
	display: grid;
}

.map__card {
	grid-area: 1 / 1;
	background: var(--ink);
	color: var(--paper);
}

.js .map__card:not(.is-active) {
	visibility: hidden;
}

html:not(.js) .map__card {
	grid-area: auto;
}

/* The space's photo (its featured image) across the top of its card. */
.map__photo {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ink-2);
}

.map__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.map__body {
	padding: clamp(1.125rem, 1.8vw, 1.625rem);
}

.map__body h3 {
	font: 700 clamp(1.625rem, 2.2vw, 2.125rem)/1 var(--m);
	letter-spacing: -0.035em;
	color: var(--pink);
}

.map__good {
	margin: 0.5rem 0 0.875rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--soft);
}

.map__spec {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.375rem 1rem;
	margin: 0 0 1rem;
	padding: 0.75rem 0;
	border-block: 1px solid var(--rule);
	font: 500 0.8125rem/1.4 var(--g);
}

.map__spec dt {
	padding-top: 2px;
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}

.map__spec dd {
	margin: 0;
}

/* ---------- What a space not for hire is instead (template-parts/space-facts.php) ----------
 * The Café page's at a glance on the café's card and page, on ink: each a
 * label over a line that links, underlined in pink.
 */
.space-facts {
	margin: 1.25rem 0 1.5rem;
	border-top: 1px solid var(--rule);
}

.space-facts > div {
	padding: 1rem 0;
	border-bottom: 1px solid var(--rule);
}

.space-facts dt {
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}

.space-facts dd {
	margin: 0.375rem 0 0;
	font: 600 1rem/1.4 var(--m);
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.space-facts a {
	color: var(--paper);
	text-decoration: underline;
	text-decoration-color: var(--pink);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.space-facts a:hover {
	color: var(--pink);
}

.map__body h4 {
	margin-bottom: 0.5rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mute);
}

/* What people use it for: the What's on colour of each, as a small square. */
.map__uses {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1rem;
	margin-bottom: 1rem;
}

.map__uses li {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	font: 600 0.875rem/1.3 var(--m);
	letter-spacing: -0.015em;
}

.map__uses i {
	flex: none;
	width: 0.5625rem;
	height: 0.5625rem;
	background: var(--c, var(--mute));
}

.map__none {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--soft);
}

/* Generally available: the week as a grid, pink where the room is usually free. */
.availability {
	padding: 0.75rem 0.75rem 0.625rem;
	border: 1.5px dashed var(--pink);
}

.availability h4 {
	margin-bottom: 0.5rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mute);
}

.rooms__body .availability {
	margin-top: 0.25rem;
}

.availability table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 3px;
	table-layout: fixed;
}

.availability thead th {
	font: 600 0.625rem/1 var(--g);
	letter-spacing: 0.1em;
	color: var(--mute);
	text-align: center;
}

.availability abbr {
	text-decoration: none;
}

.availability tbody th {
	padding-right: 0.25rem;
	font: 500 0.6562rem/1 var(--g);
	letter-spacing: 0.04em;
	color: var(--soft);
	text-align: left;
}

.availability td {
	height: 1rem;
	background: var(--ink-3);
}

.availability td.is-free {
	background: var(--pink);
}

.availability td.is-closed {
	background: none;
}

.availability thead td {
	width: 6.4em;
	background: none;
}

.availability__key {
	display: flex;
	align-items: center;
	gap: 0.4375rem;
	margin: 0.5rem 0 0;
	font: 500 0.6875rem/1.3 var(--g);
	color: var(--soft);
}

.availability__key i {
	width: 0.5625rem;
	height: 0.5625rem;
	background: var(--pink);
}

/* ---------- Book or enquire (template-parts/space-actions.php) ----------
 * On ink: booking is the pink button; enquiring first is a quieter
 * underlined link beside it; a space's own page, smaller still, below.
 */
.space-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: 1.125rem;
}

.space-actions__book {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 0.9375rem 1.125rem;
	background: var(--pink);
	color: var(--ink);
	font: 700 0.9375rem/1 var(--m);
	text-decoration: none;
}

.space-actions__book:hover {
	background: var(--paper);
}

.space-actions__ask {
	padding-block: 0.625rem;
	font: 600 0.9375rem/1.2 var(--m);
	color: var(--paper);
	text-decoration: underline;
	text-decoration-color: var(--pink);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.space-actions__ask:hover {
	color: var(--pink);
}

.space-actions__phone {
	flex-basis: 100%;
	color: var(--soft);
}

.space-actions__phone a {
	color: var(--paper);
}

.space-actions__more {
	flex-basis: 100%;
	font: 600 0.7188rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pink);
}

@media (max-width: 1080px) {
	.map__layout {
		grid-template-columns: 1fr;
	}
}

/* ---------- How booking works (sections/booking.php) ----------
 * Paper, straight after the pink rooms. The heading and button share a row;
 * below, the steps sit along one ink line and read left to right, like
 * today's timeline. Each number is an ink block with green figures, as the
 * "Now" tag and the picked-out sentence in today's line.
 */
.booking {
	padding-block: clamp(3rem, 7vw, 7.25rem);
	background: var(--paper);
	color: var(--ink);
}

.booking__lead {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.375rem clamp(1.5rem, 4vw, 4rem);
}

.booking__lead h2 {
	max-width: 17ch;
	font: 700 clamp(2.125rem, 4.4vw, 4.5rem)/0.96 var(--m);
	letter-spacing: -0.04em;
}

/* The number to phone, then the button to its right, together at the
   right-hand edge: beside the heading when they fit (the words wrap to make
   room), otherwise under it. On phones the button goes under the words. */
.booking__act {
	flex: 1 1 20rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.booking__act .phone-ask {
	flex: 0 1 auto;
	min-width: 9rem;
	max-width: 19ch;
}

.booking__go {
	flex: none;
}

@media (min-width: 700px) {
	.booking__act {
		flex-wrap: nowrap;
	}
}

@media (max-width: 699px) {
	.booking__act {
		justify-content: flex-start;
	}
}

.booking__go {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.125rem 1.375rem;
	background: var(--pink);
	color: var(--ink);
	font: 700 1rem/1 var(--m);
	text-decoration: none;
}

.booking__go:hover {
	background: var(--ink);
	color: var(--pink);
}

/* The steps: .line-steps (components.css). */
.booking .line-steps {
	margin-top: clamp(2.5rem, 5.5vw, 5rem);
}

/* ---------- Community (sections/community.php) ---------- */
.community {
	background: var(--ink);
}

.community .section__label {
	color: var(--mute);
}

.community .section__head p {
	color: var(--soft);
}

.community__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.375rem, 4vw, 4.5rem);
	margin-top: clamp(1.5rem, 3vw, 3.125rem);
}

/* The photo runs the height of the text beside it, so the two columns end together. */
.community__grid figure {
	display: flex;
	flex-direction: column;
}

.community__grid figure img {
	flex: 1;
	width: 100%;
	aspect-ratio: 4 / 3;
}

.community__grid figcaption {
	margin-top: 0.5625rem;
	font: 500 0.6875rem/1.6 var(--g);
	color: var(--mute);
}

.community__grid h3 {
	margin-bottom: 0.875rem;
	font: 700 clamp(1.4375rem, 2.2vw, 2.125rem)/1.04 var(--m);
	letter-spacing: -0.03em;
}

.community__grid p {
	max-width: 44ch;
	font-size: 1rem;
	color: #c1cac5;
}

.community__since {
	margin-top: clamp(1.25rem, 2.6vw, 2.25rem);
}

.community__since li {
	display: grid;
	grid-template-columns: 5.375rem 1fr;
	gap: 1rem;
	align-items: baseline;
	padding: 0.875rem 0;
	border-top: 1px solid var(--rule);
}

.community__year {
	font: 500 0.75rem/1.4 var(--g);
	color: var(--cyan);
}

.community__since h4 {
	font: 600 1.0938rem/1.2 var(--m);
	letter-spacing: -0.02em;
}

.community__since p {
	margin: 0.3125rem 0 0;
	font-size: 0.875rem;
	color: var(--mute);
}

/* The links sit at the foot of the text, their underline on the photo's bottom
   edge: their tap padding (0.625rem) hangs below it, plus a little for the
   underline's offset under the words. */
.community__grid > div {
	display: flex;
	flex-direction: column;
}

.community__grid .community__links {
	display: flex;
	flex-wrap: wrap;
	max-width: none;
	gap: 0.25rem 1.75rem;
	margin: auto 0 -0.75rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--rule);
}

.community__tally {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	margin: clamp(1.5rem, 3.4vw, 3.25rem) 0 0;
	background: var(--rule);
}

/* The figure reads first; the label is its term. */
.community__tally div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	padding: 1.125rem 1rem;
	background: var(--ink);
}

.community__tally dd {
	margin: 0;
	font: 700 clamp(1.625rem, 2.8vw, 2.75rem)/1 var(--m);
	letter-spacing: -0.04em;
}

.community__tally dt {
	margin-top: 0.5rem;
	font: 500 0.75rem/1.4 var(--g);
	color: var(--mute);
}

.community__tally div:nth-child(1) dd { color: var(--cyan); }
.community__tally div:nth-child(2) dd { color: var(--green); }
.community__tally div:nth-child(3) dd { color: var(--pink); }

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

	/* One column: no photo beside them to line up with, so a paragraph's usual space below. */
	.community__grid .community__links {
		margin-bottom: 1em;
	}

	.community__tally {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Who we are (sections/about.php): paper, the reading surface ----------
 * The story as years along the booking steps' line, then the purpose as a
 * pull-quote (Newsreader, as the concept's quotations) beside who runs it.
 */
.about {
	background: var(--paper);
	color: var(--ink);
}

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

.about__sub {
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.about__story {
	margin-top: clamp(2.5rem, 5.5vw, 5rem);
}

.timeline h4 {
	margin-bottom: 0.5rem;
	font: 700 clamp(1.125rem, 1.5vw, 1.375rem)/1.15 var(--m);
	letter-spacing: -0.02em;
}

.timeline p {
	max-width: 32ch;
	font-size: 0.9375rem;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--ink-mute);
}

.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 6rem);
	margin-top: clamp(3rem, 6vw, 6rem);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 2px solid var(--ink);
}

.about__purpose blockquote {
	margin: 0;
}

/* The opening mark hangs in the margin, so the words line up with the rule above. */
.about__purpose p {
	margin: 0;
	font: italic 400 clamp(1.75rem, 3.3vw, 3.375rem)/1.1 var(--n);
	letter-spacing: -0.02em;
	text-indent: -0.4em;
	text-wrap: balance;
}

.about__purpose p::before {
	content: "“";
}

.about__purpose p::after {
	content: "”";
}

.about__purpose figcaption {
	margin-top: 1.25rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.about__people li {
	padding: 0.875rem 0;
	border-top: 1px solid var(--ink-rule);
}

.about__people h4 {
	font: 700 1.1875rem/1.2 var(--m);
	letter-spacing: -0.02em;
}

.about__people p {
	margin: 0.3125rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ink-mute);
}

/* The documents list: .docs (components.css). */
.about__people + .docs__title {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

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

/* Years are wider than step numbers. */
@media (max-width: 760px) {
	.timeline {
		--col: 6.5rem;
	}
}

/* ---------- Get involved (sections/involved.php): ink ----------
 * What's needed now in green, the colour of now, as the "happening now"
 * flags. Then the ways in as big rows; the whole row is the link, and cyan
 * (the colour of the welcome) floods it on hover, as the What's on cards do.
 */
.involved {
	background: var(--ink);
}

.involved .section__label {
	color: var(--mute);
}

.involved .section__head p {
	color: var(--soft);
}

.involved__now {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: clamp(1.75rem, 3.5vw, 3rem) 0 0;
	padding: 1rem 1.25rem;
	background: var(--green);
	color: var(--ink);
	font: 500 clamp(1.0625rem, 1.5vw, 1.375rem)/1.35 var(--m);
	letter-spacing: -0.015em;
}

.involved__now-tag {
	padding: 0.3125rem 0.5rem;
	background: var(--ink);
	color: var(--green);
	font: 600 0.625rem/1 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.involved__now-text {
	flex: 1 1 20rem;
}

.involved__now a {
	font-weight: 700;
	text-underline-offset: 0.25em;
}

/* The rows share one set of columns (subgrid), so the descriptions and
   buttons line up down the list whatever each row's wording. */
.involved__ways {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
	column-gap: clamp(1.5rem, 4vw, 4rem);
	margin-top: clamp(1.75rem, 3.5vw, 3rem);
	border-bottom: 1px solid var(--rule);
}

.involved__way {
	position: relative;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 13rem;
	grid-template-columns: subgrid;
	gap: 0.75rem clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding: clamp(1.25rem, 2.4vw, 2rem) clamp(0.75rem, 1.5vw, 1.25rem);
	border-top: 1px solid var(--rule);
	transition: background 0.15s, color 0.15s;
}

.involved__prompt {
	margin: 0 0 0.375rem;
	font: 500 0.75rem/1.4 var(--g);
	letter-spacing: 0.06em;
	color: var(--cyan);
}

.involved__way h3 {
	font: 700 clamp(2rem, 4.4vw, 4.25rem)/0.95 var(--m);
	letter-spacing: -0.04em;
}

.involved__text {
	max-width: 44ch;
	margin: 0;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	color: var(--soft);
}

.involved__go {
	justify-self: end;
	padding: 0.75rem 1rem;
	border: 1px solid var(--cyan);
	color: var(--cyan);
	font: 600 0.7812rem/1 var(--g);
	letter-spacing: 0.06em;
	white-space: nowrap;
	text-decoration: none;
}

/* The link covers the whole row. */
.involved__go::after {
	content: "";
	position: absolute;
	inset: 0;
}

.involved__way.has-link:hover,
.involved__way.has-link:focus-within {
	background: var(--cyan);
	color: var(--ink);
}

.involved__way.has-link:hover :is(.involved__prompt, .involved__text),
.involved__way.has-link:focus-within :is(.involved__prompt, .involved__text) {
	color: var(--ink);
}

.involved__way.has-link:hover .involved__go,
.involved__way.has-link:focus-within .involved__go {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cyan);
}

@media (max-width: 900px) {
	.involved__ways,
	.involved__way {
		grid-template-columns: 1fr;
	}

	.involved__go {
		justify-self: start;
		margin-top: 0.25rem;
	}
}

/* ---------- Visit (sections/visit.php): cyan, the colour of the welcome ----------
 * Four columns under ink rules, then the way in from the street to
 * reception on an ink panel: the booking steps' line, in cyan blocks.
 * --visit is its colour: cyan, or green, pink or lavender where it closes
 * another page (.visit--green…), so pages don't all end the same way.
 */
.visit {
	--visit: var(--cyan);
	background: var(--visit);
	color: var(--ink);
}

.visit--green { --visit: var(--green); }
.visit--pink { --visit: var(--pink); }
.visit--lavender { --visit: #c8a8ff; }

.visit__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	margin-top: clamp(2rem, 4.5vw, 4rem);
}

.visit__col {
	padding-top: 1rem;
	border-top: 2px solid var(--ink);
}

.visit__label {
	margin-bottom: 0.875rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.visit address {
	font: 600 clamp(1.0625rem, 1.3vw, 1.25rem)/1.4 var(--m);
	letter-spacing: -0.015em;
}

.visit__phone {
	display: block;
	width: fit-content;
	margin-top: 1rem;
	font: 700 clamp(1.5rem, 2.2vw, 2rem)/1 var(--m);
	letter-spacing: -0.03em;
	text-decoration: none;
}

.visit__phone:hover {
	text-decoration: underline;
}

.visit__email {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.visit__go {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	width: fit-content;
	margin-top: 1.25rem;
	padding: 0.875rem 1.125rem;
	background: var(--ink);
	color: var(--visit);
	font: 700 0.9375rem/1 var(--m);
	text-decoration: none;
}

.visit__go:hover {
	background: var(--paper);
	color: var(--ink);
}

/* "Open now" / "Closed", worked out in the browser (main.js), on an ink tag. */
.visit__open {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	margin: 0 0 0.75rem;
	padding: 0.4375rem 0.625rem;
	background: var(--ink);
	color: var(--paper);
	font: 500 0.75rem/1 var(--g);
}

.visit__times div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--ink-rule);
}

.visit__times dt {
	font-weight: 600;
}

.visit__times dd {
	margin: 0;
}

.visit__small {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

.visit__travel div + div {
	margin-top: 0.875rem;
}

.visit__travel dt {
	font-weight: 700;
}

.visit__travel dd {
	margin: 0.125rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.visit__access li {
	display: flex;
	gap: 0.625rem;
	padding: 0.4375rem 0;
	border-bottom: 1px solid var(--ink-rule);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.visit__access li::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.45em;
	background: var(--ink);
}

.visit__route {
	--steps-line: var(--rule-2);
	--steps-block: var(--visit);
	--steps-figure: var(--ink);
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
	padding: clamp(1.5rem, 3.5vw, 3rem);
	background: var(--ink);
	color: var(--paper);
}

.visit__route.has-photo {
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.visit__route .visit__label {
	margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
	color: var(--mute);
}

.visit__route figure img {
	width: 100%;
	aspect-ratio: 10 / 7;
}

.visit__route figcaption {
	margin-top: 0.5625rem;
	font: 500 0.6875rem/1.6 var(--g);
	color: var(--mute);
}

@media (max-width: 1000px) {
	.visit__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.visit__route.has-photo {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.visit__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Questions (sections/faq.php): paper, the reading surface ----------
 * The topics (and who to ask) stay in view beside the questions; each
 * question opens in place, its plus turning to a minus.
 */
.faq {
	background: var(--paper);
	color: var(--ink);
}

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

.faq__grid {
	display: grid;
	grid-template-columns: minmax(13rem, 1fr) minmax(0, 2.4fr);
	gap: clamp(1.5rem, 5vw, 6rem);
	align-items: start;
	margin-top: clamp(2rem, 4.5vw, 4rem);
}

.faq__side {
	position: sticky;
	top: calc(var(--header) + 1.5rem);
}

.faq__index li {
	border-top: 1px solid var(--ink);
}

.faq__index li:last-child {
	border-bottom: 1px solid var(--ink);
}

.faq__index a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.75rem 0;
	font: 600 1.0625rem/1.2 var(--m);
	letter-spacing: -0.02em;
	text-decoration: none;
}

.faq__index a:hover span {
	text-decoration: underline;
}

.faq__index small {
	font: 500 0.6875rem/1 var(--g);
	color: var(--ink-mute);
}

.faq__ask {
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	padding: 1.125rem 1.25rem;
	background: var(--ink);
	color: var(--paper);
}

.faq__ask p {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--soft);
}

.faq__phone {
	display: block;
	width: fit-content;
	font: 700 1.5rem/1.1 var(--m);
	letter-spacing: -0.03em;
	color: var(--cyan);
	text-decoration: none;
}

.faq__email {
	display: inline-block;
	margin-top: 0.375rem;
	font-size: 0.875rem;
	color: var(--cyan);
	overflow-wrap: anywhere;
}

.faq__group + .faq__group {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.faq__topic {
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--ink);
	font: 700 clamp(1.5rem, 2.4vw, 2.25rem)/1 var(--m);
	letter-spacing: -0.035em;
}

.faq__item {
	border-bottom: 1px solid var(--ink-rule);
}

.faq__item summary {
	position: relative;
	display: block;
	padding: 1.125rem 3rem 1.125rem 0;
	list-style: none;
	font: 600 clamp(1.0625rem, 1.4vw, 1.3125rem)/1.3 var(--m);
	letter-spacing: -0.015em;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* A plus, whose upright turns flat (a minus) when open. */
.faq__item summary::before,
.faq__item summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.5rem;
	width: 1rem;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s;
}

.faq__item summary::after {
	transform: rotate(90deg);
}

.faq__item[open] summary::after {
	transform: rotate(0deg);
}

.faq__answer {
	max-width: 62ch;
	padding: 0 3rem 1.375rem 0;
}

.faq__answer p {
	margin-bottom: 0.75em;
}

.faq__link {
	display: inline-block;
	font-weight: 700;
	text-underline-offset: 0.25em;
}

/* Narrow screens: the topics as a row of links above the questions, and
   who to ask after them. */
@media (max-width: 900px) {
	.faq__grid {
		grid-template-columns: 1fr;
	}

	.faq__side {
		display: contents;
	}

	.faq__index ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.faq__index li,
	.faq__index li:last-child {
		border: 1px solid var(--ink);
	}

	.faq__index a {
		padding: 0.5rem 0.75rem;
		font-size: 0.9375rem;
	}

	.faq__ask {
		order: 1;
		margin-top: 0;
	}
}

/* ---------- Closing call to action (sections/finale.php) ---------- */
.finale {
	padding-block: clamp(2.5rem, 6vw, 6.5rem);
	background: var(--cyan);
	color: var(--ink);
}

.finale__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(1.375rem, 4vw, 4.5rem);
	align-items: center;
}

.finale p {
	margin: 0;
	font: 700 clamp(2rem, 5vw, 5.125rem)/0.95 var(--m);
	letter-spacing: -0.045em;
}

.finale__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.375rem, 2.6vw, 2.375rem);
	background: var(--ink);
	color: var(--cyan);
	font: 700 clamp(1.4375rem, 2.4vw, 2.375rem)/1 var(--m);
	letter-spacing: -0.03em;
	text-decoration: none;
}

.finale__button:hover {
	background: var(--pink);
	color: var(--ink);
}

@media (max-width: 820px) {
	.finale__inner {
		grid-template-columns: 1fr;
	}
}

/* ---------- Activity details dialog (template-parts/activity-dialog.php) ---------- */
.modal {
	width: min(38.125rem, calc(100% - 2rem));
	max-height: 90vh;
	overflow: auto;
	padding: clamp(1.375rem, 3vw, 2.25rem);
	background: var(--paper);
	color: var(--ink);
	border: 0;
	border-top: 0.375rem solid var(--cyan);
	font: 1rem/1.55 var(--m);
}

.modal::backdrop {
	background: rgb(15 20 18 / 0.65);
}

.modal__close {
	float: right;
	min-height: 2.75rem;
	padding: 0.375rem 0.75rem;
	background: none;
	border: 1px solid var(--ink);
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.06em;
}

.modal__close:hover {
	background: var(--ink);
	color: var(--paper);
}

.modal__kind {
	margin: 0.75rem 0 0;
	color: var(--ink-mute);
}

.modal h2 {
	margin: 1.375rem 0 1rem;
	font: 700 clamp(1.75rem, 3vw, 2.5rem)/1 var(--m);
	letter-spacing: -0.035em;
}

.modal dl {
	display: grid;
	grid-template-columns: 6.875rem 1fr;
	gap: 0.5rem;
	padding: 1.25rem 0;
	border-block: 1px solid var(--ink-rule);
	font-size: 0.9062rem;
}

.modal dt {
	font: 600 0.625rem/1.9 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.modal dd {
	margin: 0;
}

.modal__fine {
	margin: 1rem 0 0;
	font: 500 0.7812rem/1.6 var(--g);
	color: var(--ink-mute);
}

/* An empty stretch that has ended is no longer an offer. */
.today__run .spare.past {
	display: none;
}

/* ---------- A room's own page (single-lcc_room.php) ---------- */
.room-page__panel {
	margin-top: clamp(1.5rem, 3vw, 2.75rem);
}

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

/* The heading, and the list of every space at the far right of its line.
   The list opens under the line, over what follows. */
.room-page__title {
	position: relative;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem 1.5rem;
}

/* ---------- Every space, from a space's page (template-parts/space-switch.php) ---------- */
.space-switch {
	margin-left: auto;
}

.space-switch__button {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.6875rem 1rem;
	border: 1px solid var(--ink);
	color: var(--ink);
	font: 700 0.875rem/1 var(--m);
	list-style: none;
	white-space: nowrap;
	user-select: none;
}

.space-switch__button::-webkit-details-marker {
	display: none;
}

/* A chevron that turns over when the list is open. */
.space-switch__button::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.25rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s, margin 0.15s;
}

.space-switch__button:hover {
	background: var(--ink);
	color: var(--paper);
}

/* Open, the button joins the list under it. */
.space-switch[open] .space-switch__button {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

.space-switch[open] .space-switch__button::after {
	margin-top: 0.25rem;
	transform: rotate(-135deg);
}

/* On cream, the site's reading surface: it lifts off both the pink and
   the dark details box it opens over. */
.space-switch__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	width: min(25rem, 100%);
	max-height: min(32rem, 70vh);
	overflow-y: auto;
	padding: 0.5rem 1.25rem 1.25rem;
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 1.25rem 3rem rgb(17 28 29 / 0.28);
}

.space-switch__panel li {
	border-bottom: 1px solid var(--ink-rule);
}

.space-switch__panel li a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.8125rem 0;
	color: var(--ink);
	text-decoration: none;
}

/* The name keeps to one line; a long note wraps instead. */
.space-switch__name {
	flex: none;
	font: 600 1.0625rem/1.2 var(--m);
	letter-spacing: -0.015em;
}

.space-switch__note {
	font: 500 0.75rem/1.3 var(--g);
	color: var(--ink-mute);
	text-align: right;
}

.space-switch__panel li a:hover .space-switch__name,
.space-switch__panel li a:focus-visible .space-switch__name {
	text-decoration: underline;
	text-underline-offset: 0.3125rem;
}

/* This space: a pink band (pink words would not read on cream). */
.space-switch__panel li:has(a[aria-current]) {
	margin-inline: -1.25rem;
	padding-inline: 1.25rem;
	background: var(--pink);
}

.space-switch__panel a[aria-current] .space-switch__note {
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.6875rem;
}

.space-switch__plan {
	display: inline-block;
	margin-top: 1rem;
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	text-underline-offset: 0.3125rem;
}

/* ---------- The next week in each space (template-parts/space-week.php) ----------
 * Every space as tabs, as the What's on days, and under them the chosen
 * space's bookings with a key to their colours. */
.space-week__tabs {
	display: none;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	margin: 0.875rem 0 clamp(2.5rem, 5vw, 4rem);
	border-block: 2px solid var(--ink);
}

.js .space-week__tabs {
	display: grid;
}

/* The tabs' own top edge is the line under this label. */
.js .space-week__head {
	padding-bottom: 0;
	border-bottom: 0;
}

.space-week__tabs button {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	min-width: 0;
	min-height: 5.25rem;
	padding: clamp(0.875rem, 1.3vw, 1.25rem) 0.5rem;
	background: none;
	border: 0;
	border-left: 1px solid var(--ink-rule);
	color: var(--ink);
	text-align: center;
}

.space-week__tabs button:first-child {
	border-left: 0;
}

.space-week__tabs button:hover {
	background: var(--paper-2);
}

.space-week__name {
	font: 700 clamp(1rem, 1.35vw, 1.3125rem)/1.05 var(--m);
	letter-spacing: -0.03em;
}

.space-week__note {
	font: 600 0.625rem/1.2 var(--g);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #5c6663;
}

.space-week__tabs button[aria-selected="true"] {
	background: var(--ink);
	color: var(--paper);
}

.space-week__tabs button[aria-selected="true"] .space-week__note {
	color: var(--pink);
}

/* This page's space, whichever is chosen: a pink tag on its top edge, as
   "Today" on the What's on days. */
.space-week__here {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0.25rem 0.4375rem;
	background: var(--pink);
	color: var(--ink);
	font: 700 0.5625rem/1 var(--g);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Without JS every space's week shows, one after another. */
.space-week__panel + .space-week__panel {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.js .space-week__panel {
	margin-top: 0;
}

.js .space-week__panel:not(.is-active) {
	display: none;
}

.space-week__label h2 {
	font: inherit;
	letter-spacing: inherit;
}

/* What the colours along the top of the bookings mean. */
.space-week__key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.25rem;
	margin-top: 0.875rem;
	font: 500 0.875rem/1.3 var(--m);
	color: #5c6663;
}

.space-week__key li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.space-week__key i {
	flex: none;
	width: 0.75rem;
	height: 0.5rem;
	background: var(--c, var(--ink-rule));
}

.space-week__go {
	display: inline-block;
	margin-top: 1.25rem;
	font: 700 1rem/1.3 var(--m);
	color: var(--ink);
	text-underline-offset: 0.3125rem;
}

@media (max-width: 1199px) {
	.space-week__tabs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.space-week__tabs button:nth-child(4n + 1) {
		border-left: 0;
	}

	.space-week__tabs button:nth-child(n + 5) {
		border-top: 1px solid var(--ink-rule);
	}
}

@media (max-width: 600px) {
	.space-week__tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.space-week__tabs button {
		min-height: 4.25rem;
		border-top: 0;
		border-left: 1px solid var(--ink-rule);
	}

	.space-week__tabs button:nth-child(odd) {
		border-left: 0;
	}

	.space-week__tabs button:nth-child(n + 3) {
		border-top: 1px solid var(--ink-rule);
	}
}

/* Phones: the button under the heading, and the list the width of the page. */
@media (max-width: 600px) {
	.space-switch {
		margin-left: 0;
	}

	.space-switch__panel {
		left: 0;
		width: auto;
	}
}

/* ---------- Today in one line (sections/dayline.php): green, the colour of today ----------
 * The opening hours as a line with "now" on it, then the introduction and
 * where to go next. From the "seven till ten" concept's opening.
 */
.dayline {
	padding-block: clamp(3.5rem, 8vw, 7.75rem) clamp(2.5rem, 5vw, 4.5rem);
	background: var(--green);
	color: var(--ink);
}

.dayline__heading {
	margin-bottom: clamp(1rem, 2.4vw, 2rem);
	font-size: clamp(2rem, 4vw, 3.75rem);
	letter-spacing: -0.04em;
}

.dayline__hours {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(0.875rem, 2.5vw, 2rem);
}

.dayline__t {
	font-size: clamp(2.125rem, 5vw, 5rem);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.05em;
}

/* --half is how many blocks the tallest stack has on each side (set in the
   template); --reach is how far the blocks and the "now" line reach from it. */
.dayline__track {
	--block: 0.625rem;
	--reach: calc(var(--half, 1) * (var(--block) + 2px) + 0.5rem);
	position: relative;
	height: 2px;
	margin-block: calc(var(--reach) + 1.375rem) var(--reach);
	background: var(--ink);
}

.dayline__tick {
	position: absolute;
	top: -0.3125rem;
	z-index: 1;
	width: 1px;
	height: 0.75rem;
	background: var(--ink);
}

/* The bookings: one bar each, from start to end, in lane --row above (is-up)
   or below (is-down) the line. The template trims 2px off each bar's width
   so back-to-back bookings in the same lane stay apart. */
.dayline__bar {
	--offset: calc(0.3125rem + var(--row, 0) * (var(--block) + 2px));
	position: absolute;
	height: var(--block);
	background: var(--c);
	transition: opacity 0.15s;
}

.dayline__bar.is-up {
	bottom: calc(100% + var(--offset));
}

.dayline__bar.is-down {
	top: calc(100% + var(--offset));
}

.dayline__bar.is-past {
	opacity: 0.4;
}

/* Pointing at a bar: it stays bright, everything else steps back. */
.dayline__track.is-pointing .dayline__bar {
	opacity: 0.3;
}

.dayline__track.is-pointing .dayline__bar.is-lit {
	opacity: 1;
	outline: 1.5px solid var(--ink);
	outline-offset: -1.5px;
}

/* The booking's name, above the block being pointed at (placed by main.js). */
.dayline__tip {
	position: absolute;
	z-index: 3;
	padding: 0.375rem 0.5625rem;
	background: var(--ink);
	color: var(--paper);
	font: 600 0.7812rem/1.2 var(--m);
	letter-spacing: -0.01em;
	white-space: nowrap;
	transform: translate(-50%, calc(-100% - 0.375rem));
	pointer-events: none;
}

/* On green, "learn" (green) would vanish: paper with a fine edge instead.
   Private and unnamed bookings are a darker green, busy but quiet. */
.dayline .k-learn {
	--c: var(--paper);
	box-shadow: inset 0 0 0 1px rgb(17 28 29 / 0.3);
}

.dayline .k-private {
	--c: #7ea342;
}

.dayline__now {
	position: absolute;
	top: calc(var(--reach) * -1);
	bottom: calc(var(--reach) * -1);
	z-index: 2;
	transform: translateX(-50%);
}

.dayline__now i {
	display: block;
	width: 3px;
	height: 100%;
	margin: 0 auto;
	background: var(--ink);
}

.dayline__now em {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	margin-bottom: 0.25rem;
	padding: 0.3125rem 0.5rem;
	background: var(--ink);
	color: var(--green);
	font: 600 0.625rem/1 var(--g);
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dayline__closed {
	margin: 0;
	font: 500 clamp(2.125rem, 7.6vw, 7rem)/0.9 var(--g);
	letter-spacing: -0.035em;
}

.dayline__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(1.25rem, 4vw, 4rem);
	margin-top: clamp(2.5rem, 6vw, 5.5rem);
}

.dayline__lede {
	grid-column: 1 / span 7;
	margin: 0;
	font: 500 clamp(1.4375rem, 2.5vw, 2.25rem)/1.24 var(--m);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* The picked-out part: ink on green, like the "happening now" flags. */
.dayline__lede em {
	padding: 0 0.12em;
	background: var(--ink);
	color: var(--green);
	font-style: normal;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.dayline__index {
	grid-column: 9 / span 4;
	align-self: end;
}

.dayline__index li {
	border-top: 1px solid var(--ink);
}

.dayline__index li:last-child {
	border-bottom: 1px solid var(--ink);
}

.dayline__index a {
	display: grid;
	grid-template-columns: 2.6em 1fr auto;
	gap: 0.875rem;
	align-items: baseline;
	padding: 0.9375rem 0;
	text-decoration: none;
}

.dayline__no,
.dayline__ex {
	font: 500 0.6875rem/1.4 var(--g);
	letter-spacing: 0.08em;
	color: #33461a;
}

.dayline__ex {
	text-align: right;
	text-transform: uppercase;
}

.dayline__nm {
	font: 600 clamp(1.125rem, 1.5vw, 1.3125rem)/1.2 var(--m);
	letter-spacing: -0.02em;
}

.dayline__index a:hover .dayline__nm {
	text-decoration: underline;
	text-underline-offset: 0.3125rem;
}

@media (max-width: 1000px) {
	.dayline__lede,
	.dayline__index {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.dayline__hours {
		grid-template-columns: 1fr 1fr;
	}

	/* The times sit side by side, with the line full width beneath them. */
	.dayline__track {
		--block: 0.375rem;
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.dayline__t {
		font-size: clamp(2.5rem, 14vw, 4rem);
	}

	.dayline__t:last-child {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
	}
}

/* ---------- Coming up (sections/coming-up.php): ink ----------
 * One-offs as What's on cards, dated. The name is the link and covers the card.
 */
.coming-up {
	background: var(--ink);
}

.coming-up .section__label {
	color: var(--mute);
}

.coming-up .section__head p {
	color: var(--soft);
}

.coming-up .week__cards {
	margin-top: clamp(1.5rem, 3vw, 2.75rem);
	background: var(--rule);
	border-color: var(--rule);
}

.coming-up .week__card {
	min-height: 10rem;
}

.coming-up__link {
	text-decoration: none;
}

.coming-up__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.coming-up .week__card:focus-within {
	background: var(--c, var(--paper-2));
	outline: 3px solid var(--cyan);
	outline-offset: -3px;
}

.coming-up__link:focus-visible {
	outline: none;
}

/* ---------- Every week (sections/regulars.php): cyan, "come in" ----------
 * The regulars A to Z by kind, flowing down newspaper columns (so a long
 * kind carries on in the next column); each row is its activity's link.
 * The kind's colour is a small square; on cyan, "make" (cyan) needs its ink edge.
 */
.regulars {
	background: var(--cyan);
	color: var(--ink);
}

.regulars .section__label,
.regulars .section__head p {
	color: #2c4446;
}

.regulars__groups {
	columns: 3 16rem;
	column-gap: clamp(1.5rem, 4vw, 4rem);
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.regulars__group + .regulars__group {
	margin-top: clamp(1.75rem, 3.5vw, 3rem);
}

.regulars__kind {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--ink);
	font: 700 clamp(1.5rem, 2.4vw, 2.125rem)/1 var(--m);
	letter-spacing: -0.035em;
	break-after: avoid;
}

.regulars li {
	break-inside: avoid;
}

.regulars__kind i {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	/* "Other": grey, as a booking with no kind. */
	background: var(--c, var(--ink-rule));
	box-shadow: inset 0 0 0 1px var(--ink);
}

.regulars__kind small {
	margin-left: auto;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
	color: #2c4446;
}

.regulars li {
	border-bottom: 1px solid rgb(17 28 29 / 0.28);
}

.regulars a {
	display: grid;
	gap: 0.25rem;
	padding: 0.75rem 0;
	text-decoration: none;
}

.regulars strong {
	font: 700 1.0625rem/1.25 var(--m);
	letter-spacing: -0.015em;
}

.regulars__when {
	font: 500 0.75rem/1.5 var(--g);
}

.regulars a small {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #2c4446;
}

.regulars a:hover strong {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.regulars a:focus-visible {
	outline-offset: 0.125rem;
}

/* ---------- The top of Space hire (sections/hire.php): pink, space that could be yours ---------- */
.hire {
	background: var(--pink);
	color: var(--ink);
}

.hire .section__label,
.hire .section__head p {
	color: #4a1030;
}

/* The button and the link beside it close up on small screens, so they stay
   side by side down to 320px rather than the link dropping underneath. */
.hire__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem clamp(0.875rem, 6vw - 0.5rem, 2rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hire__go {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.5rem, 6vw - 0.75rem, 1.5rem);
	padding: 1.125rem clamp(0.75rem, 4vw - 0.125rem, 1.375rem);
	background: var(--ink);
	color: var(--pink);
	font: 700 1rem/1 var(--m);
	white-space: nowrap;
	text-decoration: none;
}

.hire__go:hover {
	background: var(--paper);
	color: var(--ink);
}

/* On pink, the number underlined in ink; on a line of its own under the buttons. */
.hire__phone {
	--phone-line: var(--ink);
	flex-basis: 100%;
	color: #4a1030;
}

.hire__phone a {
	color: var(--ink);
}

.hire__rooms {
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-underline-offset: 0.3em;
}

/* ---------- What it costs (sections/rates.php): ink ----------
 * A table of the rooms; on small screens each room is a block of its own,
 * each value under its column's name.
 */
.rates {
	--docs-rule: var(--rule);
	--docs-mute: var(--mute);
	background: var(--ink);
}

.rates .section__label {
	color: var(--mute);
}

.rates .section__head p {
	color: var(--soft);
}

.rates__table {
	width: 100%;
	margin-top: clamp(1.5rem, 3vw, 2.75rem);
	border-collapse: collapse;
	border-top: 2px solid var(--paper);
}

.rates__table thead th {
	padding: 0.875rem 1rem 0.75rem 0;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-align: left;
	text-transform: uppercase;
	color: var(--mute);
}

.rates__table tbody :is(th, td) {
	padding: 1rem 1rem 1rem 0;
	border-top: 1px solid var(--rule);
	text-align: left;
	vertical-align: baseline;
}

.rates__table tbody th {
	font: 700 clamp(1.25rem, 1.8vw, 1.625rem)/1.1 var(--m);
	letter-spacing: -0.03em;
}

.rates__table tbody th a {
	text-decoration: none;
}

.rates__table tbody th a:hover {
	color: var(--pink);
	text-decoration: underline;
}

.rates__table td {
	font: 500 0.875rem/1.45 var(--g);
	color: var(--soft);
}

.rates__table .rates__size {
	white-space: nowrap;
}

.rates__table .rates__good-for {
	font-family: var(--m);
	font-size: 0.9375rem;
}

/* The prices: the standard rate in pink, the community rate in paper. */
.rates__table :is(.rates__commercial, .rates__community) {
	font: 700 1.125rem/1.2 var(--m);
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--pink);
}

.rates__table .rates__community {
	padding-right: 0;
	color: var(--paper);
}

/* A note on the price under the space's name, e.g. "space only". */
.rates__price-note {
	display: block;
	margin-top: 0.375rem;
	font: 500 0.6875rem/1.4 var(--g);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
}

.rates__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.rates__note {
	max-width: 48ch;
	margin: 0;
	font: 500 0.8125rem/1.55 var(--g);
	color: var(--soft);
}

@media (max-width: 760px) {
	.rates__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.rates__table tbody tr {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.375rem 1rem;
		padding: 1rem 0;
		border-top: 1px solid var(--rule);
	}

	.rates__table tbody :is(th, td) {
		padding: 0;
		border: 0;
	}

	.rates__table tbody th {
		grid-column: 1 / -1;
	}

	.rates__table td::before {
		content: attr(data-label);
		display: block;
		font: 600 0.625rem/1.5 var(--g);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--mute);
	}

	.rates__table .rates__good-for {
		grid-column: 1 / -1;
	}

	.rates__foot {
		grid-template-columns: 1fr;
	}
}

/* ---------- Not sure? (sections/ask.php): cyan, the colour of the welcome ---------- */
.ask {
	padding-block: clamp(1.75rem, 3.5vw, 3rem);
	background: var(--cyan);
	color: var(--ink);
}

.ask__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem 3rem;
}

.ask p {
	max-width: 36ch;
	margin: 0;
	font: 700 clamp(1.375rem, 2.6vw, 2.375rem)/1.1 var(--m);
	letter-spacing: -0.03em;
}

.ask__go {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.125rem 1.375rem;
	background: var(--ink);
	color: var(--cyan);
	font: 700 1rem/1 var(--m);
	text-decoration: none;
}

.ask__go:hover {
	background: var(--pink);
	color: var(--ink);
}

/* ---------- Contact (sections/contact.php): paper, with the other ways in on ink ---------- */
.contact {
	background: var(--paper);
	color: var(--ink);
}

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

.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);
	gap: clamp(1.5rem, 5vw, 6rem);
	align-items: start;
	margin-top: clamp(2rem, 4.5vw, 4rem);
}

.contact__main {
	scroll-margin-top: calc(var(--header) + 1.5rem);
}

.contact__thanks {
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background: var(--green);
}

.contact__thanks h2 {
	margin-bottom: 0.75rem;
	font: 700 clamp(1.75rem, 3.4vw, 3rem)/1 var(--m);
	letter-spacing: -0.04em;
}

.contact__thanks p {
	max-width: 44ch;
}

.contact__thanks a {
	font-weight: 700;
}

.contact__other {
	position: sticky;
	top: calc(var(--header) + 1.5rem);
	display: grid;
	justify-items: start;
	gap: 0.75rem;
	padding: clamp(1.125rem, 2.4vw, 1.75rem);
	background: var(--ink);
	color: var(--paper);
}

.contact__sub {
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}

.contact__phone {
	font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--m);
	letter-spacing: -0.03em;
	color: var(--cyan);
	text-decoration: none;
}

.contact__email {
	color: var(--cyan);
	overflow-wrap: anywhere;
}

.contact__open {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	margin: 0.25rem 0 0;
	font: 500 0.8125rem/1.4 var(--g);
	color: var(--soft);
}

.contact__other address {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--soft);
}

.contact__visit {
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cyan);
	text-underline-offset: 0.3em;
}

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

	.contact__other {
		position: static;
	}
}

/* ---------- Your bookings (sections/my-bookings.php) ----------
 * The Contact page's layout and ink panel; on the left, the sign-in steps
 * in a box like the contact form's thank-you, then the hirer's bookings
 * and invoices as white cards, each with its reference and where it stands.
 */
.mine__main {
	display: grid;
	gap: 1.25rem;
}

.mine__notice {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background: var(--green);
}

.mine__notice--pink {
	background: var(--pink);
}

.mine__notice h2 {
	font: 700 clamp(1.75rem, 3.4vw, 3rem)/1 var(--m);
	letter-spacing: -0.04em;
}

.mine__notice p {
	max-width: 46ch;
	margin: 0;
}

.mine__notice a {
	font-weight: 700;
}

.mine__hint {
	max-width: 52ch;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ink-mute);
}

.mine__sub {
	margin-top: 0.75rem;
	font: 700 clamp(1.5rem, 2.6vw, 2.25rem)/1.05 var(--m);
	letter-spacing: -0.03em;
}

.mine__sub:first-child {
	margin-top: 0;
}

.mine__list {
	display: grid;
	gap: 0.75rem;
}

.mine__item {
	display: grid;
	gap: 0.625rem;
	padding: 1.125rem 1.25rem;
	background: #fff;
	border: 1px solid var(--ink-rule);
}

.mine__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0;
}

.mine__ref {
	font: 600 0.75rem/1.4 var(--g);
	letter-spacing: 0.06em;
	color: var(--ink-mute);
}

.mine__chip {
	padding: 0.25rem 0.5rem;
	background: var(--paper-2);
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mine__chip--ok,
.mine__chip--paid {
	background: var(--green);
}

.mine__chip--waiting,
.mine__chip--part {
	background: var(--cyan);
}

.mine__chip--overdue {
	background: var(--pink);
}

.mine__title {
	font: 700 1.25rem/1.2 var(--m);
	letter-spacing: -0.02em;
}

.mine__facts {
	display: grid;
	grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
	gap: 0.25rem 1rem;
	margin: 0;
	font-size: 0.9375rem;
}

.mine__facts dt {
	font: 600 0.625rem/1.9 var(--g);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.mine__facts dd {
	min-width: 0;
	margin: 0;
}

.mine__dates summary {
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.mine__dates p {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
}

.mine__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0.25rem 0 0;
}

.mine__acts .form__submit {
	text-decoration: none;
}

.mine__link {
	justify-self: start;
	font-size: 0.875rem;
	font-weight: 700;
	text-underline-offset: 0.25em;
}

.mine__empty {
	margin: 0;
	color: var(--ink-mute);
}

.mine__empty a {
	font-weight: 700;
	color: var(--ink);
}

/* On the ink panel: the terms as a cyan button, quiet until they exist. */
.mine__terms {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	padding: 0.875rem 1.125rem;
	background: var(--cyan);
	color: var(--ink);
	font: 700 1rem/1.2 var(--m);
	text-decoration: none;
}

.mine__terms:hover {
	background: var(--pink);
}

.mine__terms.is-soon {
	background: transparent;
	border: 1px dashed var(--soft);
	color: var(--soft);
	cursor: default;
}

.mine__terms small {
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mine__ask {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--soft);
}

.mine__out {
	display: grid;
	justify-items: start;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
}

.mine__out p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--soft);
	overflow-wrap: anywhere;
}

.mine__outbtn {
	padding: 0;
	background: none;
	border: 0;
	color: var(--cyan);
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	cursor: pointer;
}

/* ---------- An activity's own page (single-lcc_activity.php) ----------
 * Paper, with the colour of its kind (--c, from .k-…) as a band along the
 * top and, with no photo, a block in the photo's place.
 */
.activity {
	background: var(--paper);
	color: var(--ink);
	border-top: 0.75rem solid var(--c, var(--cyan));
}

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

.activity__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: start;
	margin-top: clamp(1.75rem, 3.5vw, 3rem);
}

.activity__spec {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.625rem 1.5rem;
	margin: 0;
	padding: 1rem 0;
	border-block: 2px solid var(--ink);
	font-size: 1.0625rem;
	line-height: 1.45;
}

.activity__spec dt {
	padding-top: 0.25rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.activity__spec dd {
	margin: 0;
	font-weight: 600;
}

.activity__join {
	margin-top: 1.5rem;
}

.activity__join p {
	max-width: 40ch;
	margin: 1rem 0 0;
	color: var(--ink-mute);
}

.activity__join p a {
	font-weight: 700;
	color: var(--ink);
}

.activity__go {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.125rem 1.375rem;
	background: var(--ink);
	color: var(--c, var(--cyan));
	font: 700 1rem/1 var(--m);
	text-decoration: none;
}

.activity__go:hover {
	background: var(--c, var(--cyan));
	color: var(--ink);
}

.activity__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--c, var(--cyan));
}

.activity__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* No photo: the kind's name, huge, cropped by the block's edge. */
.activity__block {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: clamp(0.75rem, 2vw, 1.5rem);
	overflow: hidden;
	font: 700 clamp(4rem, 11vw, 10rem)/0.8 var(--m);
	letter-spacing: -0.05em;
	color: var(--ink);
	opacity: 0.9;
}

.activity-more {
	--prose-link: var(--ink);
	padding-top: 0;
	background: var(--paper);
	color: var(--ink);
}

.activity-dates {
	border-top: 1px solid var(--ink-rule);
}

.activity-dates .week__cards {
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.activity-dates .week__card {
	min-height: 0;
}

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

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

	.activity__photo {
		aspect-ratio: 16 / 9;
	}
}

/* The dialog's link to the activity's page. */
.modal__more {
	display: inline-block;
	margin-top: 1rem;
	font-weight: 700;
	text-underline-offset: 0.25em;
}

/* ---------- Stories (sections/stories.php, template-parts/story-card.php) ----------
 * A few stories on ink beside a decision; on the Stories page, all of them on
 * paper. Each kind of story has its colour (--c): started a group, green;
 * hired a space, pink; came along, cyan; volunteers, lavender.
 */
.s-group { --c: var(--green); }
.s-hire { --c: var(--pink); }
.s-came { --c: var(--cyan); }
.s-volunteer { --c: #c8a8ff; }

.stories {
	background: var(--ink);
}

.stories .section__label {
	color: var(--mute);
}

.stories .section__head p {
	color: var(--soft);
}

.stories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.story-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	color: var(--ink);
	border-top: 0.5rem solid var(--c);
	transition: background 0.15s;
}

.story-card:hover,
.story-card:focus-within {
	background: var(--c);
}

.story-card__photo {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--c);
	overflow: hidden;
}

.story-card__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* No photo: the story's number, huge, on its colour. */
.story-card__figure {
	position: absolute;
	inset: auto 0 -0.12em 0.75rem;
	font: 700 clamp(4.5rem, 9vw, 7.5rem)/1 var(--m);
	letter-spacing: -0.045em;
	color: var(--ink);
}

.story-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 1.125rem 1.25rem;
}

.story-card__kind {
	margin: 0;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.story-card__headline {
	font: 700 clamp(1.25rem, 1.7vw, 1.5rem)/1.1 var(--m);
	letter-spacing: -0.03em;
}

.story-card__headline a {
	text-decoration: none;
}

/* The link covers the whole card. */
.story-card__headline a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.story-card__headline a:focus-visible {
	outline: none;
}

.story-card:focus-within {
	outline: 3px solid var(--cyan);
	outline-offset: 2px;
}

.story-card__who {
	margin: auto 0 0;
	font: 500 0.75rem/1.45 var(--g);
	color: var(--ink-mute);
}

.story-card:hover :is(.story-card__kind, .story-card__who) {
	color: var(--ink);
}

.stories__all {
	display: inline-block;
	margin-top: 1.5rem;
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cyan);
	text-underline-offset: 0.3em;
}

/* The Stories page: all of them on paper, the kinds to choose from on top. */
.stories--page {
	background: var(--paper);
	color: var(--ink);
}

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

.stories--page .story-card {
	outline: 1px solid var(--ink-rule);
}

.stories__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.25rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--ink-rule);
}

.stories__filters button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0 0.3125rem;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font: 500 0.875rem/1 var(--m);
	color: #5c6663;
}

.stories__filters button:hover,
.stories__filters button[aria-pressed="true"] {
	color: var(--ink);
}

.stories__filters button[aria-pressed="true"] {
	border-bottom-color: currentColor;
}

.stories__filters i {
	width: 0.5625rem;
	height: 0.5625rem;
	background: var(--c);
}

html:not(.js) .stories__filters {
	display: none;
}

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

/* ---------- A story's own page (single-lcc_story.php) ----------
 * Paper, a band of its colour along the top; the headline beside the photo
 * (or its number), then Then / Here / Now along the steps' line.
 */
.story {
	background: var(--paper);
	color: var(--ink);
	border-top: 0.75rem solid var(--c);
}

.story .section__label {
	color: var(--ink-mute);
}

.story__top {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: start;
}

.story__who {
	font-weight: 600;
	color: var(--ink-mute);
}

.story__photo {
	position: relative;
	margin-top: clamp(1.375rem, 3vw, 2.75rem);
	aspect-ratio: 4 / 3;
	background: var(--c);
}

.story__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.story__figure {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	padding: 0.75rem 1rem;
	background: var(--ink);
	color: var(--paper);
	font: 500 0.8125rem/1.3 var(--g);
}

.story__figure b {
	font: 700 clamp(2rem, 4vw, 3.5rem)/1 var(--m);
	letter-spacing: -0.04em;
	color: var(--c);
}

.story__steps {
	--col: 5.5rem;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.story__steps p {
	max-width: 36ch;
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	letter-spacing: 0;
}

.story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 2px solid var(--ink);
}

.story__quote blockquote {
	margin: 0;
}

.story__quote p {
	margin: 0;
	font: italic 400 clamp(1.625rem, 3vw, 2.75rem)/1.12 var(--n);
	letter-spacing: -0.02em;
	text-indent: -0.4em;
}

.story__quote p::before { content: "“"; }
.story__quote p::after { content: "”"; }

.story__quote figcaption {
	margin-top: 1rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.story__where {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1.25rem;
	align-content: start;
	margin: 0;
	font-size: 1.0625rem;
}

.story__where dt {
	padding-top: 0.25rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.story__where dd {
	margin: 0;
	font-weight: 600;
}

@media (max-width: 900px) {
	.story__top,
	.story__grid {
		grid-template-columns: 1fr;
	}

	.story__photo {
		margin-top: 0;
	}
}

/* ---------- Our people (sections/people.php): paper ---------- */
.people-section {
	background: var(--paper);
	color: var(--ink);
}

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

.people-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: start;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.people-section__group + .people-section__group {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.people-section__sub {
	margin-bottom: 0.75rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.people-section__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 0 clamp(1.25rem, 3vw, 2.5rem);
}

.person {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.875rem;
	align-items: start;
	padding: 0.875rem 0;
	border-top: 1px solid var(--ink-rule);
}

.person__photo {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
}

.person__name {
	font: 700 1.1875rem/1.2 var(--m);
	letter-spacing: -0.02em;
}

.person__role {
	margin: 0.125rem 0 0;
	font: 500 0.75rem/1.4 var(--g);
	letter-spacing: 0.06em;
	color: var(--ink-mute);
}

.person__bio {
	margin: 0.375rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ink-mute);
}

.people-section__how {
	padding: clamp(1.125rem, 2.4vw, 1.75rem);
	background: var(--ink);
	color: var(--soft);
	font-size: 0.9375rem;
}

.people-section__how .people-section__sub {
	color: var(--mute);
}

.people-section__go {
	font-weight: 700;
	color: var(--cyan);
}

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

/* ---------- One way to get involved (sections/way.php) ----------
 * The top on ink, as Get involved (.involved); the facts at a glance on one
 * line with the button; then what's involved and what you get on paper, and
 * how to, along the booking steps' line (.booking).
 */
.way__glance {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.25rem 2.5rem;
	margin-top: clamp(1.75rem, 3.5vw, 3rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
}

.way__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
	margin: 0;
}

.way__facts dt {
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}

.way__facts dd {
	margin: 0.25rem 0 0;
	font: 700 clamp(1.125rem, 1.6vw, 1.375rem)/1.2 var(--m);
	letter-spacing: -0.02em;
}

.way__go {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.125rem 1.375rem;
	background: var(--cyan);
	color: var(--ink);
	font: 700 1rem/1 var(--m);
	text-decoration: none;
}

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

.way-detail {
	background: var(--paper);
	color: var(--ink);
}

.way-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: start;
}

.way-detail__sub {
	margin-bottom: 0.75rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.way-detail__points li {
	padding: 1rem 0;
	border-top: 1px solid var(--ink-rule);
}

.way-detail__points h3 {
	font: 700 clamp(1.25rem, 1.8vw, 1.625rem)/1.15 var(--m);
	letter-spacing: -0.03em;
}

.way-detail__points p {
	max-width: 52ch;
	margin: 0.375rem 0 0;
	color: var(--ink-mute);
}

/* What you get: each point after a green tick. */
.way-detail__gets {
	padding: clamp(1.125rem, 2.4vw, 1.75rem);
	background: var(--green);
}

.way-detail__gets .way-detail__sub {
	color: #33461a;
}

.way-detail__gets li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.75rem;
	font-weight: 600;
	line-height: 1.4;
}

.way-detail__gets li::before {
	content: "";
	position: absolute;
	top: 0.8em;
	left: 0.125rem;
	width: 0.75rem;
	height: 0.375rem;
	border-left: 2.5px solid var(--ink);
	border-bottom: 2.5px solid var(--ink);
	transform: rotate(-45deg);
}

.way-steps {
	border-top: 1px solid var(--ink-rule);
}

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

/* ---------- One kind of hire (sections/hire-for.php) and space cards ---------- */
.hire-for {
	background: var(--paper);
	color: var(--ink);
}

.hire-for .section__label {
	color: var(--ink-mute);
}

.hire-for__grid {
	display: grid;
	grid-template-columns: minmax(0, 2.4fr) minmax(14rem, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hire-for__spaces {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.hire-for__sub {
	margin-bottom: 0.75rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #4a1030;
}

.hire-for__included {
	padding: clamp(1.125rem, 2.4vw, 1.75rem);
	background: var(--pink);
}

.hire-for__included li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.75rem;
	font-weight: 600;
	line-height: 1.4;
}

.hire-for__included li::before {
	content: "";
	position: absolute;
	top: 0.8em;
	left: 0.125rem;
	width: 0.75rem;
	height: 0.375rem;
	border-left: 2.5px solid var(--ink);
	border-bottom: 2.5px solid var(--ink);
	transform: rotate(-45deg);
}

/* Cards in a row are the same height; the size, holds and rate sit at the
   foot of each, so they line up whatever the line above runs to. */
.space-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ink);
	color: var(--paper);
}

.space-card__photo {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--ink-2);
}

.space-card__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.space-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1rem 1.125rem 1.25rem;
}

.space-card__name {
	font: 700 clamp(1.375rem, 2vw, 1.75rem)/1 var(--m);
	letter-spacing: -0.03em;
	color: var(--pink);
}

.space-card__name a {
	text-decoration: none;
}

.space-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.space-card:hover .space-card__name a {
	text-decoration: underline;
}

.space-card__good {
	margin: 0.5rem 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--soft);
}

.space-card__spec {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: auto 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--rule);
}

.space-card__spec dt {
	font: 600 0.5625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}

.space-card__spec dd {
	margin: 0;
	font: 500 0.8125rem/1.3 var(--g);
}

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

/* ---------- The pages under this one (sections/page-links.php) ----------
 * Big rows on paper, each the link: the name, a line about it, a note and an
 * arrow. The colour of where they lead floods the row on hover: pink for
 * kinds of hire, cyan for ways in and audiences, lavender for the café.
 */
.page-links {
	--c: var(--pink);
	background: var(--paper-2);
	color: var(--ink);
}

.page-links--cyan {
	--c: var(--cyan);
}

.page-links--lavender {
	--c: var(--lavender);
}

.page-links .section__label {
	color: var(--ink-mute);
}

.page-links__list {
	margin-top: clamp(1rem, 2vw, 1.5rem);
	border-bottom: 1px solid var(--ink-rule);
}

/* Fractions, not auto, so every row's columns line up down the list. */
.page-links__list a {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.6fr) 1.5rem;
	gap: 0.5rem clamp(1rem, 3vw, 2.5rem);
	align-items: baseline;
	padding: 1rem clamp(0.5rem, 1.2vw, 1rem);
	border-top: 1px solid var(--ink-rule);
	text-decoration: none;
	transition: background 0.15s;
}

.page-links__list a:hover,
.page-links__list a:focus-visible {
	background: var(--c);
}

.page-links__list strong {
	font: 700 clamp(1.375rem, 2.2vw, 2rem)/1.05 var(--m);
	letter-spacing: -0.03em;
}

/* Each part keeps its own column, so a row without a line or a note
 * doesn't slide the rest along. */
.page-links__text {
	grid-column: 2;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--ink-mute);
}

.page-links__list small {
	grid-column: 3;
	font: 500 0.75rem/1.4 var(--g);
	color: var(--ink-mute);
	text-align: right;
}

.page-links__arrow {
	grid-column: 4;
	font-size: 1.25rem;
}

/* Without notes, the line about each page takes their space. */
@media (min-width: 761px) {
	.page-links--no-notes .page-links__list a {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.9fr) 1.5rem;
	}

	.page-links--no-notes .page-links__arrow {
		grid-column: 3;
	}
}

.page-links__list a:hover :is(.page-links__text, small) {
	color: var(--ink);
}

@media (max-width: 760px) {
	.page-links__list a {
		grid-template-columns: 1fr auto;
	}

	.page-links__text,
	.page-links__list small {
		grid-column: 1;
		text-align: left;
	}

	.page-links__arrow {
		grid-row: 1;
		grid-column: 2;
	}
}

/* ---------- Good to know (sections/tips.php) ----------
 * Tips in columns under an ink rule, each a sentence and an optional link.
 * The page picks the colour, so pages don't all end the same way: green
 * (now), lavender (together), pink (space) or paper.
 */
.tips {
	--tips-mute: #33461a;
	background: var(--green);
	color: var(--ink);
}

.tips--lavender {
	--tips-mute: #3d2a6b;
	background: #c8a8ff;
}

.tips--pink {
	--tips-mute: #4a1030;
	background: var(--pink);
}

.tips--paper {
	--tips-mute: var(--ink-mute);
	background: var(--paper-2);
}

.tips .section__label {
	color: var(--tips-mute);
}

.tips__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 3rem);
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.tips__list li {
	padding-top: 0.875rem;
	border-top: 2px solid var(--ink);
}

.tips__list p {
	margin: 0;
	font: 600 clamp(1.0625rem, 1.4vw, 1.25rem)/1.35 var(--m);
	letter-spacing: -0.015em;
}

.tips__list a {
	display: inline-block;
	margin-top: 0.5rem;
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-underline-offset: 0.3em;
}

/* ---------- Our history (sections/history.php) ----------
 * The slightly darker paper, as the floor plan, between the stories and the
 * people; the years along the line (.timeline).
 */
.history {
	background: var(--paper-2);
	color: var(--ink);
}

.history .section__label {
	color: var(--ink-mute);
}

.history__line {
	margin-top: clamp(2rem, 4.5vw, 4rem);
}

.history__more {
	display: inline-block;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-underline-offset: 0.3em;
}

/* ---------- The café (sections/cafe.php): lavender, the colour of together ----------
 * The heading, then the photo beside when it's open ("Open now", worked
 * out in the browser from the café's own times), a few facts and where to
 * go next. Also the top of each "at the café" page (sections/cafe-part.php),
 * where the facts sit on one line with the button, as a way in does.
 */
.cafe {
	--cafe-mute: #3d2a6b;
	background: var(--lavender);
	color: var(--ink);
}

.cafe .section__label,
.cafe .section__head p {
	color: var(--cafe-mute);
}

.cafe__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.375rem, 4vw, 4.5rem);
	margin-top: clamp(1.5rem, 3vw, 3.125rem);
}

.cafe__grid.no-photo {
	grid-template-columns: 1fr;
}

/* The photo runs the height of the details beside it, so the two columns end together. */
.cafe__grid figure {
	display: flex;
	flex-direction: column;
}

.cafe__grid figure img {
	flex: 1;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cafe__grid figcaption {
	margin-top: 0.5625rem;
	font: 500 0.6875rem/1.6 var(--g);
	color: var(--cafe-mute);
}

/* Where the photo is the taller of the two, the menu button still sits
   level with its foot. */
.cafe__details {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.cafe__details .cafe__acts {
	margin-top: auto;
}

.cafe__label {
	margin-bottom: 0.75rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cafe-mute);
}

/* "Open now" / "Closed", worked out in the browser (main.js), on an ink tag. */
.cafe__open {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	margin: 0 0 0.75rem;
	padding: 0.4375rem 0.625rem;
	background: var(--ink);
	color: var(--paper);
	font: 500 0.75rem/1 var(--g);
}

.cafe__times div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--ink-rule);
}

.cafe__times dt {
	font-weight: 600;
}

.cafe__times dd {
	margin: 0;
}

.cafe__small {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--cafe-mute);
}

.cafe__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.875rem 1.5rem;
	margin: 0;
}

.cafe__facts dt {
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cafe-mute);
}

.cafe__facts dd {
	margin: 0.25rem 0 0;
	font: 700 clamp(1.0625rem, 1.4vw, 1.25rem)/1.2 var(--m);
	letter-spacing: -0.02em;
}

/* No word left on a line of its own, where the browser can help (the
   templates also tie the last two words together, for browsers that can't). */
.cafe__facts dd,
.cafe__grid figcaption,
.cafe__small,
.cafe-menu__items li,
.cafe-about__points li,
.cafe-about__side figcaption,
.page-links__text,
.page-links__list small {
	text-wrap: pretty;
}

/* A fact that goes somewhere (who runs it, on its page): underlined in ink. */
.cafe__facts a {
	color: inherit;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.cafe__facts a:hover {
	text-decoration-color: var(--paper);
}

/* In the café section the facts are where to go next: the day is the
   heading, the link under it smaller. */
.cafe__details .cafe__facts dt {
	font: 700 clamp(1.0625rem, 1.4vw, 1.25rem)/1.2 var(--m);
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--ink);
}

.cafe__details .cafe__facts dd {
	margin-top: 0.375rem;
	font: 500 0.875rem/1.45 var(--g);
	letter-spacing: 0;
}

.cafe__details .cafe__facts a {
	text-decoration-thickness: 1px;
}

.cafe__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}

.cafe__go {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.125rem 1.375rem;
	background: var(--ink);
	color: var(--lavender);
	font: 700 1rem/1 var(--m);
	text-decoration: none;
}

.cafe__go:hover {
	background: var(--paper);
	color: var(--ink);
}

.cafe__more {
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-underline-offset: 0.3em;
}

/* One thing at the café: the facts along one line with the button (.way__glance). */
.cafe__glance {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.25rem 2.5rem;
	margin-top: clamp(1.75rem, 3.5vw, 3rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--ink-rule);
}

.cafe__glance .cafe__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
}

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

@media (max-width: 480px) {
	.cafe__facts {
		grid-template-columns: 1fr;
	}
}

/* ---------- About one thing at the café (sections/cafe-part.php): paper ----------
 * The photo, and how to get in touch on lavender, beside the text and
 * what to expect. On phones the photo comes first and the contact last.
 */
.cafe-about {
	background: var(--paper);
	color: var(--ink);
}

.cafe-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: start;
}

.cafe-about__side {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.cafe-about__side figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cafe-about__side figcaption {
	margin-top: 0.5625rem;
	font: 500 0.6875rem/1.6 var(--g);
	color: var(--ink-mute);
}

.cafe-about__sub {
	margin-bottom: 0.75rem;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* The first paragraph large, as the lead, over a short lavender rule; the rest
   in a narrower column under it. */
.cafe-about__text > p {
	max-width: 56ch;
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.cafe-about__text > p + p {
	margin-top: 1em;
}

.cafe-about__text > .cafe-about__lead {
	max-width: 32ch;
	font: 600 clamp(1.25rem, 2vw, 1.75rem)/1.25 var(--m);
	letter-spacing: -0.02em;
}

.cafe-about__lead::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 0.375rem;
	margin: clamp(1.25rem, 2.4vw, 1.75rem) 0;
	background: var(--lavender);
}

.cafe-about__text > .cafe-about__lead + p {
	margin-top: 0;
}

.cafe-about__expect {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* What to expect: numbered, side by side, each under an ink rule. */
.cafe-about__points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 1.25rem clamp(1.25rem, 2.5vw, 2rem);
}

.cafe-about__points li {
	padding-top: 1rem;
	border-top: 2px solid var(--ink);
}

.cafe-about__points .num {
	display: block;
	margin-bottom: 0.875rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ink-mute);
}

.cafe-about__points h3 {
	font: 700 clamp(1.25rem, 1.8vw, 1.625rem)/1.15 var(--m);
	letter-spacing: -0.03em;
}

.cafe-about__points p {
	max-width: 52ch;
	margin: 0.375rem 0 0;
	color: var(--ink-mute);
}

.cafe-about__contact {
	padding: clamp(1.125rem, 2.4vw, 1.75rem);
	background: var(--lavender);
}

.cafe-about__contact .cafe-about__sub {
	color: #3d2a6b;
}

.cafe-about__contact li {
	border-top: 1px solid var(--ink-rule);
}

.cafe-about__contact a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.625rem 0;
	font-weight: 600;
	text-decoration: none;
}

.cafe-about__contact a:hover span:first-child {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

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

	.cafe-about__side {
		display: contents;
	}

	.cafe-about__contact {
		order: 1;
	}
}

/* ---------- On the menu (sections/cafe-menu.php): paper, as a board ----------
 * The groups in columns, each item with its price along the right; a note
 * and the menu to download under them.
 */
.cafe-menu {
	background: var(--paper);
	color: var(--ink);
}

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

.cafe-menu__board {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 4vw, 4rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.cafe-menu__sub {
	padding-bottom: 0.625rem;
	border-bottom: 2px solid var(--ink);
	font: 700 clamp(1.125rem, 1.6vw, 1.375rem)/1.2 var(--m);
	letter-spacing: -0.02em;
}

.cafe-menu__items li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--ink-rule);
}

.cafe-menu__items strong {
	display: block;
	font-weight: 600;
}

.cafe-menu__items small {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--ink-mute);
}

.cafe-menu__price {
	flex: none;
	font-weight: 500;
}

/* A note under a group's items, as one more row in the list. */
.cafe-menu__group-note {
	margin: 0;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--ink-rule);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ink-mute);
	text-wrap: pretty;
}

.cafe-menu__foot {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--ink-rule);
}

.cafe-menu__note {
	max-width: 52ch;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ink-mute);
}

@media (max-width: 760px) {
	.cafe-menu__foot {
		grid-template-columns: 1fr;
	}
}

/* ---------- Room checker (sections/room-checker.php): paper ----------
 * A working screen for staff, meant to fit one desktop screen: small type,
 * the checker on the left and the rate card on the right. A slim row for
 * each space, its answer as a green (free) or pink (booked) tag and, when
 * booked, its other free times in a box beside it. Stacked on a phone.
 */
.checker {
	padding-block: 0.75rem 2rem;
	background: var(--paper);
	color: var(--ink);
	font-size: 0.875rem;
}

.checker__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
	align-items: start;
	gap: 1.25rem 2rem;
}

.checker__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
}

.checker__head h1 {
	font: 700 1.5rem/1.1 var(--m);
	letter-spacing: -0.03em;
}

.checker__intro {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--ink-mute);
}

.checker__form {
	grid-template-columns: minmax(10rem, 1.4fr) minmax(9rem, 1fr) repeat(2, minmax(6rem, 0.7fr)) auto;
	align-items: end;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.checker__form :is(input, select) {
	min-height: 2.25rem;
	padding-block: 0.25rem;
	font-size: 0.9375rem;
}

.checker__form .form__submit {
	min-height: 2.25rem;
	padding: 0.5rem 1rem;
	gap: 0.75rem;
}

.checker__source {
	margin: 0;
	font: 500 0.75rem/1.5 var(--g);
	color: var(--ink-mute);
}

.checker__answer {
	margin-top: 0.5rem;
}

.checker__answer .form__error {
	font-size: 0.875rem;
}

.checker__when {
	font: 700 1rem/1.2 var(--m);
	letter-spacing: -0.02em;
}

.checker__list {
	display: grid;
	gap: 0.25rem;
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
}

/* One space: its name and answer, what that means and the cost, then any other free times. */
.checker__row {
	display: grid;
	grid-template-columns: 11.5rem max-content minmax(0, 1fr);
	align-items: center;
	gap: 0.25rem 1rem;
	padding: 0.25rem 0.625rem;
	background: #fff;
	border-left: 4px solid var(--ink-rule);
}

.checker__row--free {
	border-left-color: var(--green);
}

.checker__row--booked {
	border-left-color: var(--pink);
}

.checker__row--enquiry {
	border-left-color: var(--cyan);
}

.checker__row p {
	margin: 0;
	line-height: 1.3;
}

.checker__who {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.125rem 0.5rem;
}

.checker__who .checker__cost {
	grid-column: 1 / -1;
}

.checker__name {
	font: 700 0.9375rem/1.2 var(--m);
	letter-spacing: -0.015em;
}

.checker__state {
	padding: 0 0.375rem;
	background: var(--paper-2);
	font: 700 0.5625rem/1.6 var(--g);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.checker__row--free .checker__state {
	background: var(--green);
}

.checker__row--booked .checker__state {
	background: var(--pink);
}

/* An enquiry for that time: blue, its own colour, and dashed, since it doesn't hold the space. */
.checker__row--enquiry .checker__state,
.checker__row .checker__state--enquiry {
	background: var(--cyan);
	outline: 1px dashed var(--ink);
	outline-offset: -1px;
}

/* Beside Booked, under it. */
.checker__row .checker__state--enquiry {
	grid-column: 2;
	justify-self: end;
}

.checker__enquiries {
	margin-top: 0.375rem;
}

.checker__warn {
	font-weight: 700;
}

.checker__row .checker__cost {
	font: 600 0.6875rem/1.4 var(--g);
	color: var(--ink-mute);
}

/* The other free times, in a paper box beside a booked space. */
.checker__alts {
	display: grid;
	gap: 0;
	padding: 0.125rem 0.5rem;
	background: var(--paper);
}

.checker__alts-title {
	font: 700 0.625rem/1.5 var(--g);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.checker__alts ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.checker__alt {
	font-size: 0.8125rem;
	line-height: 1.3;
	white-space: nowrap;
}

.checker__alt span {
	margin-left: 0.125rem;
	font: 500 0.625rem/1.3 var(--g);
	color: var(--ink-mute);
}

/* The rate card. */
.checker__rates {
	padding: 1rem;
	background: #fff;
	border-top: 4px solid var(--ink);
}

.checker__rates h2 {
	font: 700 1.125rem/1.2 var(--m);
	letter-spacing: -0.02em;
}

.checker__rates table {
	width: 100%;
	font-size: 0.8125rem;
	margin-top: 0.5rem;
	border-collapse: collapse;
}

.checker__rates :is(th, td) {
	padding: 0.375rem 0.375rem 0.375rem 0;
	border-top: 1px solid var(--ink-rule);
	text-align: left;
	vertical-align: baseline;
}

.checker__rates :is(th, td):last-child {
	padding-right: 0;
}

.checker__rates thead th {
	border-top: 0;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.checker__rates tbody th {
	font-weight: 700;
	white-space: nowrap;
}

.checker__rates tbody th small {
	display: block;
	font: 500 0.6875rem/1.4 var(--g);
	color: var(--ink-mute);
}

.checker__price {
	font-weight: 700;
	white-space: nowrap;
}

.checker__rates-note {
	margin: 0.5rem 0 0;
	font: 500 0.75rem/1.5 var(--g);
	color: var(--ink-mute);
}

/* Who has a booked space, to staff signed in: their name, what for, when. */
.checker__clashes {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.3;
}

.checker__for,
.checker__times {
	margin-left: 0.375rem;
	font: 500 0.75rem/1.3 var(--g);
	color: var(--ink-mute);
}

.checker__times {
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}

/* Check repeats: a link on each space, or a small form under one space. */
/* A free space: Book, at the end of its row. */
.checker__book {
	grid-column: -2;
	justify-self: end;
	min-height: 2rem;
	padding: 0.375rem 0.875rem;
	gap: 0.625rem;
	font-size: 0.875rem;
	text-decoration: none;
}

.checker__repeat-link {
	grid-column: 1 / -1;
	font: 600 0.6875rem/1.4 var(--g);
	color: var(--ink);
}

.checker__repeat {
	grid-template-columns: minmax(12rem, max-content) minmax(7rem, max-content) auto;
	justify-content: start;
	align-items: end;
	gap: 0.75rem;
	margin-top: 0.625rem;
}

.checker__repeat select {
	min-height: 2.25rem;
	padding-block: 0.25rem;
	font-size: 0.9375rem;
}

.checker__repeat .form__submit {
	min-height: 2.25rem;
	padding: 0.5rem 1rem;
	gap: 0.75rem;
}

/* Each date it repeats on: a slim tile, edged and tagged green or pink as the rows above. */
.checker__repeats {
	margin-top: 0.75rem;
}

.checker__tally,
.checker__repeats > .checker__cost {
	margin: 0.125rem 0 0;
	font: 600 0.75rem/1.4 var(--g);
}

.checker__repeats > .checker__cost {
	color: var(--ink-mute);
}

.checker__dates {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.25rem;
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
}

.checker__date {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.5rem;
	padding: 0.25rem 0.5rem;
	background: #fff;
	border-left: 4px solid var(--ink-rule);
	line-height: 1.3;
}

.checker__date.checker__row--free {
	border-left-color: var(--green);
}

.checker__date.checker__row--booked {
	border-left-color: var(--pink);
}

.checker__date.checker__row--enquiry {
	border-left-color: var(--cyan);
}

.checker__day {
	font-size: 0.8125rem;
	white-space: nowrap;
}

.checker__by {
	flex-basis: 100%;
	font: 500 0.6875rem/1.3 var(--g);
	color: var(--ink-mute);
}

.checker__by--enquiry {
	font-style: italic;
}

@media (max-width: 1100px) {
	.checker__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.checker__rates {
		max-width: 32rem;
	}
}

@media (max-width: 760px) {
	.checker__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.checker__form .form__field:first-child {
		grid-column: 1 / -1;
	}

	.checker__repeat {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* After the hidden fields, so the first of its kind rather than the first child. */
	.checker__repeat .form__field:first-of-type {
		grid-column: 1 / -1;
	}

	.checker__repeat .form__submit {
		white-space: nowrap;
	}

	.checker__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.checker__book {
		justify-self: start;
	}
}

/* ---------- Day sheet (sections/room-day.php): paper, under the checker ----------
 * One day for the desk: the day's heading and its tools (the day, the view,
 * Print), then every space as a row with the hours across and each booking a
 * block, or the same day as a list. Activities on What's on are green, the
 * rest hatched; today a pink line marks now and what has finished fades.
 * Printing: assets/css/print.css.
 */
.daysheet {
	padding-block: 1.25rem 2.5rem;
	background: var(--paper);
	color: var(--ink);
	font-size: 0.875rem;
	border-top: 1px solid var(--ink-rule);
}

.daysheet__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.75rem 1.5rem;
}

.daysheet__title h2 {
	font: 700 1.5rem/1.1 var(--m);
	letter-spacing: -0.03em;
}

.daysheet__title p {
	margin: 0.25rem 0 0;
	font: 500 0.75rem/1.5 var(--g);
	color: var(--ink-mute);
}

.daysheet__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.75rem;
	margin-left: auto;
}

/* Today / Tomorrow, and Timeline / List: joined buttons, the chosen one ink. */
.daysheet__seg {
	display: inline-flex;
	border: 1px solid var(--ink);
}

.daysheet__seg[hidden] {
	display: none;
}

.daysheet__seg :is(a, button) {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.25rem 0.75rem;
	border: 0;
	background: #fff;
	color: var(--ink);
	font: 600 0.8125rem/1 var(--m);
	text-decoration: none;
	cursor: pointer;
}

.daysheet__seg > * + * {
	border-left: 1px solid var(--ink);
}

.daysheet__seg [aria-current="page"],
.daysheet__seg [aria-pressed="true"] {
	background: var(--ink);
	color: var(--paper);
}

.daysheet__form {
	display: flex;
	align-items: end;
	gap: 0.5rem;
}

.daysheet__form input {
	width: 10rem;
	min-height: 2.25rem;
	padding-block: 0.25rem;
	font-size: 0.9375rem;
}

.daysheet__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	padding: 0.5rem 1rem;
	border: 0;
	background: var(--ink);
	color: var(--paper);
	font: 700 0.875rem/1 var(--m);
	cursor: pointer;
}

.daysheet__print {
	background: var(--pink);
	color: var(--ink);
}

.daysheet__print[hidden] {
	display: none;
}

.daysheet__empty {
	margin: 1rem 0 0;
	padding: 1rem;
	background: #fff;
	font-weight: 600;
}

/* The key, and how many bookings. */
.daysheet__key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0.75rem 0 0;
	font: 600 0.75rem/1.5 var(--g);
}

.daysheet__key span::before,
.daysheet__dot {
	content: "";
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	margin-right: 0.375rem;
	vertical-align: -1px;
	border: 1px solid var(--ink);
	background: repeating-linear-gradient(135deg, var(--paper-2) 0 2px, #fff 2px 4px);
}

.daysheet__key .daysheet__key-public::before,
.is-public .daysheet__dot {
	background: var(--green);
}

.daysheet__key .daysheet__key-enquiry::before,
.is-enquiry .daysheet__dot {
	border-style: dashed;
	background: #fff;
}

/* The timeline: the space's name, then its hours, an hour line each. */
.daysheet__timeline {
	margin-top: 0.75rem;
	overflow-x: auto;
	background: #fff;
	border-top: 4px solid var(--ink);
}

.daysheet__hours,
.daysheet__row {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	min-width: 56rem;
}

.daysheet__hours {
	border-bottom: 1px solid var(--ink);
}

.daysheet__hours ol {
	position: relative;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.daysheet__hours li {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font: 600 0.625rem/1.5rem var(--g);
	color: var(--ink-mute);
}

.daysheet__hours li:first-child {
	transform: none;
}

.daysheet__corner {
	padding: 0 0.625rem;
	font: 600 0.625rem/1.5rem var(--g);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.daysheet__rows {
	position: relative;
	min-width: 56rem;
}

.daysheet__row {
	min-height: 3.75rem;
	border-bottom: 1px solid var(--ink-rule);
}

.daysheet__row:last-of-type {
	border-bottom: 0;
}

.daysheet__space {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.375rem 0.625rem;
	border-right: 1px solid var(--ink);
	font: 700 0.875rem/1.2 var(--m);
	letter-spacing: -0.015em;
}

.daysheet__space small {
	font: 500 0.625rem/1.4 var(--g);
	letter-spacing: 0;
	color: var(--ink-mute);
}

.daysheet__track,
.daysheet__free {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	background-image: repeating-linear-gradient(90deg, var(--ink-rule) 0 1px, transparent 1px calc(100% / var(--hours)));
}

.daysheet__free {
	display: flex;
	align-items: center;
	padding-left: 0.75rem;
	font: 600 0.6875rem/1.4 var(--g);
	color: var(--ink-mute);
}

/* One booking: who (or what), what for, when. */
.daysheet__block {
	position: absolute;
	top: 0.25rem;
	bottom: 0.25rem;
	overflow: hidden;
	padding: 0.125rem 0.375rem;
	border: 1px solid var(--ink);
	background: repeating-linear-gradient(135deg, var(--paper-2) 0 4px, #fff 4px 8px);
	line-height: 1.2;
}

.daysheet__block--public {
	background: var(--green);
}

/* An enquiry: white, dashed, in the lower half of the row, over any booking at the same time but leaving its name showing. */
.daysheet__block--enquiry {
	top: auto;
	z-index: 1;
	height: calc(50% - 0.25rem);
	border-style: dashed;
	background: #fff;
}

.daysheet__block--done {
	opacity: 0.45;
}

.daysheet__block :is(b, span) {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.daysheet__block b {
	font: 700 0.75rem/1.2 var(--m);
}

.daysheet__block span {
	font: 500 0.625rem/1.3 var(--g);
}

.daysheet__block .daysheet__times {
	font-weight: 700;
}

/* Now: a pink line down the hours, with the time at its top. */
.daysheet__now {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(9.5rem + (100% - 9.5rem) * var(--at));
	width: 2px;
	margin-left: -1px;
	background: var(--pink);
	pointer-events: none;
}

.daysheet__now span {
	position: absolute;
	top: 0.125rem;
	left: 4px;
	padding: 0 0.25rem;
	background: var(--pink);
	font: 700 0.5625rem/1.5 var(--g);
	white-space: nowrap;
}

/* The list: the day in time order, a heavier line at each new hour. */
.daysheet__list {
	margin-top: 0.75rem;
	background: #fff;
	border-top: 4px solid var(--ink);
}

.daysheet__list[hidden],
.daysheet__timeline[hidden] {
	display: none;
}

.daysheet__list table {
	width: 100%;
	border-collapse: collapse;
}

.daysheet__list :is(th, td) {
	padding: 0.4rem 0.625rem;
	border-top: 1px solid var(--ink-rule);
	text-align: left;
	vertical-align: baseline;
}

.daysheet__list thead th {
	border-top: 0;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.daysheet__list td:first-child {
	width: 7.5rem;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.daysheet__list .is-hour td {
	border-top-color: var(--ink);
}

.daysheet__list .is-done {
	opacity: 0.45;
}

.daysheet__list .is-free td,
.daysheet__list .is-enquiry td {
	color: var(--ink-mute);
}

/* Setup and notes, for staff: smaller, and on as many lines as they were written. */
.daysheet__list .daysheet__note {
	min-width: 12rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	white-space: pre-line;
}

/* On paper only (print.css). */
.daysheet__printed {
	display: none;
}

@media (max-width: 760px) {
	.daysheet__tools {
		margin-left: 0;
	}

	.daysheet__list :is(th, td) {
		padding-inline: 0.375rem;
	}

	.daysheet__list td:nth-child(2) {
		white-space: nowrap;
	}
}

/* Weekend staff needs (sections/room-weekend.php), under the day sheet: the
 * coming Saturday and Sunday side by side, each with the first start to the
 * last end in large type, and which bookings those are. Not printed. */
.weekend {
	padding-block: 0 2.5rem;
	background: var(--paper);
	color: var(--ink);
	font-size: 0.875rem;
}

.weekend__days {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.weekend__day {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	background: #fff;
	border-top: 2px solid var(--ink);
}

.weekend__day h3 {
	font: 700 1rem/1.2 var(--m);
}

.weekend__span {
	margin: 0;
	font: 700 1.75rem/1 var(--m);
	letter-spacing: -0.025em;
}

.weekend__ends {
	display: grid;
	gap: 0.375rem;
	margin: 0;
}

.weekend__ends dt {
	font: 600 0.6875rem/1.4 var(--g);
	color: var(--ink-mute);
}

.weekend__ends dd {
	margin: 0;
}

.weekend__none,
.weekend__facts {
	margin: 0;
	font: 500 0.75rem/1.5 var(--g);
	color: var(--ink-mute);
}

.weekend__none {
	font-weight: 600;
	color: var(--ink);
}

.weekend__link {
	margin-top: auto;
	font: 600 0.6875rem/1.4 var(--g);
	color: var(--ink);
}

/* ---------- Information for hirers (sections/hirers.php) ----------
 * The top on ink, styled as Get involved (it has the .involved class): the
 * main thing picked out along a cyan edge, then Your bookings and Print.
 * Then, on paper, the groups flowing in two columns, each numbered, with
 * the things not allowed in an ink box and how to reach us in cyan, and at
 * the end the full terms (cyan, the primary interaction), so the points are
 * read before anyone leaves for them. print.css lays the same out as an A4
 * sheet.
 */
.hirers__key {
	max-width: 46rem;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--cyan);
	background: var(--ink-2);
	font: 600 clamp(1rem, 1.3vw, 1.1875rem)/1.5 var(--m);
	letter-spacing: -0.01em;
}

.hirers__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
}

.hirers__go,
.hirers__link {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1rem 1.25rem;
	font: 700 1rem/1 var(--m);
	text-decoration: none;
}

.hirers__go {
	background: var(--cyan);
	color: var(--ink);
}

.hirers__go:hover {
	background: var(--ink);
	color: var(--paper);
}

.hirers__link {
	border: 1px solid var(--rule-2);
	background: transparent;
	color: var(--paper);
	cursor: pointer;
}

.hirers__link:hover {
	background: var(--paper);
	color: var(--ink);
}

/* The full document's link, printed with the others here (print.css). */
.hirers__print-only {
	display: none;
}

.hirers-detail {
	background: var(--paper);
	color: var(--ink);
}

/* Two columns where there is room; each group stays whole. */
.hirers-detail__grid {
	columns: 2 24rem;
	column-gap: clamp(1.5rem, 5vw, 5rem);
}

.hirers__group,
.hirers__not,
.hirers__contact {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	break-inside: avoid;
}

.hirers__sub {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid currentColor;
	font: 700 clamp(1.25rem, 1.8vw, 1.625rem)/1.15 var(--m);
	letter-spacing: -0.03em;
}

.hirers__sub span {
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.16em;
	color: var(--ink-mute);
}

.hirers__items li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--ink-rule);
	line-height: 1.5;
}

.hirers__items strong {
	font-weight: 700;
}

.hirers__not {
	padding: clamp(1.125rem, 2.4vw, 1.75rem);
	background: var(--ink);
	color: var(--paper);
}

.hirers__not ul {
	margin-top: 0.5rem;
}

.hirers__not li {
	position: relative;
	padding: 0.4375rem 0 0.4375rem 1.75rem;
	line-height: 1.45;
}

/* A cross before each, drawn as two lines. */
.hirers__not li::before,
.hirers__not li::after {
	content: "";
	position: absolute;
	top: 0.95em;
	left: 0.125rem;
	width: 0.875rem;
	height: 2px;
	background: currentColor;
	transform: rotate(45deg);
}

.hirers__not li::after {
	transform: rotate(-45deg);
}

.hirers__contact {
	padding: clamp(1.125rem, 2.4vw, 1.75rem);
	background: var(--cyan);
}

.hirers__contact a {
	display: block;
	color: var(--ink);
	text-decoration: none;
}

.hirers__contact a:hover {
	text-decoration: underline;
}

.hirers__phone {
	margin-top: 1rem;
	font: 700 clamp(1.625rem, 2.6vw, 2.25rem)/1.1 var(--m);
	letter-spacing: -0.03em;
}

.hirers__email {
	margin-top: 0.375rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.hirers__contact address,
.hirers__open {
	margin: 0.75rem 0 0;
	font-style: normal;
	line-height: 1.5;
}

.hirers__footnote {
	margin: 1rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ink-rule);
	font-weight: 700;
}

/* The full terms, at the end: a line and the button, across the page. */
.hirers__end {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem 3rem;
	padding-top: clamp(1.25rem, 2.4vw, 1.75rem);
	border-top: 2px solid var(--ink);
}

.hirers__end p {
	max-width: 40ch;
	margin: 0;
	font: 700 clamp(1.125rem, 1.8vw, 1.5rem)/1.2 var(--m);
	letter-spacing: -0.025em;
}