/* 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 {
	--stroke: var(--ink);
	--fold: calc(var(--header) + 3.125rem);
	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.075em;
	line-height: 0.92;
}

.hero__said {
	max-width: 34ch;
	padding-bottom: 0.375rem;
}

.hero__said p:not(.tag) {
	margin: 0 0 1rem;
	font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
	line-height: 1.38;
	letter-spacing: -0.02em;
}

.hero__said .tag {
	margin: 0;
	color: #2c4446;
}

/* The chooser: you drive it, it doesn't cycle at you. 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 {
	margin: 0;
	padding: 0.75rem 0 0.5rem;
	font: 600 0.6875rem/1 var(--g);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #2c4446;
}

.hero__verbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.625rem;
	padding-bottom: clamp(0.75rem, min(2.4vw, 2vh), 1.875rem);
}

.hero__verbs button {
	padding: 0.375rem 0;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--ink);
	font: 700 clamp(1.1875rem, min(2.1vw, 3vh), 1.9375rem)/1.05 var(--m);
	letter-spacing: -0.05em;
	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;
}

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

/* The stage: a text panel beside a photo. */
.hero__stage {
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	align-items: stretch;
	min-height: clamp(23.75rem, 42vw, 33.75rem);
}

/* 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.25rem, min(2.4vw, 2.6vh), 2.375rem);
	background: var(--ink);
	color: var(--paper);
}

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

.hero__read .tag {
	margin: 0;
}

.hero__pos {
	display: flex;
	align-items: baseline;
	gap: 0.6875rem;
	margin: clamp(0.25rem, 0.8vh, 0.5rem) 0 clamp(0.5rem, 1.6vh, 1rem);
	color: var(--cyan);
}

.hero__pos b {
	font: 500 1.625rem/1 var(--g);
}

.hero__pos small {
	font: 500 0.625rem/1 var(--g);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mute);
}

.hero__read h2 {
	font-size: clamp(2.125rem, min(3.7vw, 4.6vh), 3.625rem);
	font-weight: 700;
	letter-spacing: -0.065em;
	line-height: 0.96;
	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;
}

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

.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__pos,
.is-space .hero__pos small,
.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__read-top .hero__pos {
		margin: 0;
	}

	.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: nowrap;
		gap: 0.625rem 1.125rem;
	}
}

/* ---------- Numbered sections (template-parts/section-head.php) ---------- */
.section {
	padding-block: clamp(2.5rem, 5.5vw, 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;
}

.section__head {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(1.25rem, 4vw, 4.375rem);
	align-items: end;
	margin-top: clamp(1.375rem, 3vw, 2.75rem);
}

.section__head h1,
.section__head h2 {
	font-size: clamp(2.375rem, 5.2vw, 5.375rem);
	letter-spacing: -0.07em;
	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;
}

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

/* ---------- 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-spare 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.04em;
}

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

.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.04em;
}

.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.04em;
}

.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.04em;
	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;
	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.06em;
}

.week__n {
	display: block;
	margin-top: 0.4375rem;
	font: 600 0.625rem/1 var(--g);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5c6663;
}

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

.week__days button[aria-selected="true"] .week__n {
	color: var(--cyan);
}

@media (max-width: 560px) {
	.week__n {
		font-size: 0.5312rem;
		letter-spacing: 0.04em;
	}

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

.week__sep {
	align-self: stretch;
	width: 1px;
	background: var(--ink-rule);
}

/* 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.045em;
}

.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.04em;
	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.045em;
}

.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;
}

.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.06em;
}

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

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

.week__go,
.rooms__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__people {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.625rem clamp(1rem, 2.4vw, 2.25rem);
	margin-top: clamp(1.5rem, 3vw, 2.75rem);
	padding: 0.875rem 0;
	border-block: 2px solid var(--ink);
}

.rooms__people label {
	font: 600 0.6875rem/1.3 var(--g);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.rooms__people input {
	width: 100%;
	height: 2rem;
	accent-color: var(--ink);
}

.rooms__people output {
	min-width: 4.4ch;
	font: 700 clamp(2rem, 3.6vw, 3.5rem)/1 var(--m);
	letter-spacing: -0.06em;
	text-align: right;
}

.rooms__people output small {
	margin-left: 0.375rem;
	font: 500 0.8125rem/1 var(--g);
	letter-spacing: 0;
}

@media (max-width: 620px) {
	.rooms__people {
		grid-template-columns: 1fr auto;
	}

	.rooms__people input {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

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

.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.06em;
	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.06em;
	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;
}

.rooms__free {
	margin: 0;
	font: 500 0.875rem/1.45 var(--g);
}

.rooms__free b {
	display: block;
	font: 600 0.625rem/1.6 var(--g);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--green);
}

.rooms__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: auto;
	padding-top: 1.375rem;
}

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

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

.rooms__more {
	font: 600 0.75rem/1 var(--g);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pink);
}

.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 {
	grid-template-columns: 1fr;
	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 .rooms__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;
}

.map__label,
.map__dimtext,
.map__service 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;
}

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

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

.map__room:focus {
	outline: none;
}

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

.map__name {
	font: 700 22px var(--m);
	letter-spacing: -0.03em;
	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.04em;
	}

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

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

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

.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.055em;
	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;
}

.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.02em;
}

.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. */
.map__free {
	padding: 0.75rem 0.75rem 0.625rem;
	border: 1.5px dashed var(--pink);
}

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

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

.map__free abbr {
	text-decoration: none;
}

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

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

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

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

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

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

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

.map__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: 1.125rem;
}

.map__go {
	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.9062rem/1 var(--m);
	text-decoration: none;
}

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

.map__more {
	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: 18ch;
	font: 700 clamp(2.125rem, 4.4vw, 4.5rem)/0.96 var(--m);
	letter-spacing: -0.065em;
}

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

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

/* --n is the figures' size and --pad-y the block's padding: the line runs
   through the middle of the blocks. */
.booking__steps {
	--n: clamp(1.5rem, 2.2vw, 2.125rem);
	--pad-y: 0.625rem;
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0 clamp(1.25rem, 3vw, 3rem);
	margin-top: clamp(2.5rem, 5.5vw, 5rem);
}

.booking__steps::before {
	content: "";
	position: absolute;
	top: calc(var(--n) / 2 + var(--pad-y) - 1px);
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ink);
}

.booking__steps b {
	position: relative;
	display: inline-block;
	margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
	padding: var(--pad-y) 0.875rem;
	background: var(--ink);
	color: var(--green);
	font: 700 var(--n)/1 var(--m);
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.booking__steps p {
	max-width: 26ch;
	margin: 0;
	font-size: clamp(1rem, 1.3vw, 1.1875rem);
	line-height: 1.4;
	letter-spacing: -0.01em;
}

/* Narrow screens: a list, each number beside its step, the line running down
   through the middle of the blocks. */
@media (max-width: 760px) {
	.booking__steps {
		--n: 1.625rem;
		--col: 4rem;
		grid-auto-flow: row;
		gap: 1.25rem;
	}

	.booking__steps::before {
		top: calc(var(--n) / 2 + var(--pad-y));
		bottom: calc(var(--n) / 2 + var(--pad-y));
		left: calc(var(--col) / 2 - 1px);
		right: auto;
		width: 2px;
		height: auto;
	}

	.booking__steps li {
		display: grid;
		grid-template-columns: var(--col) 1fr;
		gap: 1rem;
		align-items: center;
	}

	.booking__steps b {
		justify-self: center;
		margin: 0;
	}
}

/* ---------- Community (sections/community.php) ---------- */
.community {
	--stroke: var(--paper);
	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);
	align-items: start;
	margin-top: clamp(1.5rem, 3vw, 3.125rem);
}

.community__grid figure img {
	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.05em;
}

.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.035em;
}

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

.community__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.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.06em;
}

.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;
	}

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

/* ---------- 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.07em;
}

.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.05em;
	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.055em;
}

.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 .section__label a {
	text-decoration: none;
}

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

.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.04em;
}

/* ---------- 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.065em;
}

.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.05em;
}

.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.03em;
	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.03em;
}

.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;
	}
}