/*
Theme Name: RESET
Theme URI: https://reset.balliante.test
Author: Balliante
Description: Bespoke theme for RESET, Manvers. Cormorant Garamond for titles, Jost for everything else.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reset
*/

/* ==========================================================================
   Tokens - sampled from RESET - Home - Design.pdf
   ========================================================================== */

:root {
	/* Grounds */
	--sand:        #EFE8DF; /* page + header */
	--sand-card:   #E6DFD4; /* class cards */
	--sand-deep:   #DDD4C6; /* studio two band + footer */

	/* Ink */
	--ink:         #181818; /* headings + body */
	--ink-muted:   #5E5E5E; /* footer links */
	--ink-quiet:   #6B6A69; /* footer addresses */
	--ink-nav:     #7E7E7E; /* nav + arrow links */
	--dark:        #494438; /* buttons, outlines */
	--on-dark:     #E7E7E7; /* text on dark buttons */
	--clay:        #A8836B; /* waitlist / accent */
	--line:        #7E7E7E; /* hairlines */
	--header-h:    131px;                    /* 130px bar + the 1px rule */
	--header-line: rgba(0, 0, 0, 0.1);       /* the header rule, from the design */
	--sand-veil:   rgba(239, 232, 223, 0.8); /* the header once it is scrolled */

	/* Type */
	--display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
	--body:    "Jost", "Futura", "Century Gothic", -apple-system, "Segoe UI", sans-serif;

	/* Layout */
	--radius: 5px; /* brand guidelines: cards, panels and images */
	--policy-line: #B1AA9C; /* hairline between the policy cards */
	--tt-panel-line: #D6CDBF; /* the timetable panel and its dividers */
	--hours-line:    #9A958C; /* the rules between opening-hours rows */
	--faq-line:      #D6D0C6; /* the rules between questions */
	--container: 1400px;
	--gutter: clamp(20px, 4vw, 40px);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/*
 * The hidden attribute is only a user-agent level display: none, so any class
 * that sets display of its own quietly beats it - which is how the enlarged
 * menu came to stay on screen after Close. Making it stick means hidden can be
 * trusted anywhere in the theme.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--sand);
	color: var(--ink);
	font-family: var(--body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.44;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Anchor jumps land below the sticky header, not behind it. */
[id] { scroll-margin-top: clamp(96px, 8vw, 150px); }

h1, h2, h3, h4, p, ul, ol, dl, dt, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--dark);
	outline-offset: 3px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--dark);
	color: var(--on-dark);
	font-size: 14px;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Page loader
   ========================================================================== */

/*
 * A brief cover while the page's own images and fonts settle - purely
 * decorative, fixed so it never affects the layout underneath, and gone as
 * soon as header.php's own script sees the page has finished loading.
 */
.page-loader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(239, 232, 223, 0.88);
	backdrop-filter: blur(14px);
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease, visibility 0s linear 0s;
}

.page-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .4s ease, visibility 0s linear .4s;
}

@supports not (backdrop-filter: blur(14px)) {
	.page-loader { background: rgba(239, 232, 223, 0.97); }
}

.page-loader__spinner {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 3px solid rgba(24, 24, 24, 0.15);
	border-top-color: var(--ink);
	animation: page-loader-spin .8s linear infinite;
}

@keyframes page-loader-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   Shared primitives
   ========================================================================== */

/* The design's content measures 1400px, with the gutter outside it. */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Titles - Cormorant Garamond throughout */
.h1, .h2, .h3 { font-family: var(--display); font-weight: 400; color: var(--ink); }

.h1 {
	font-size: clamp(36px, 1.6rem + 2.2vw, 64px);
	line-height: 1.22;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.h2 {
	font-size: clamp(28px, 1.1rem + 1.7vw, 48px);
	line-height: 1.21; /* 58px on 48px, as drawn */
	text-wrap: balance;
}

.h3 {
	font-size: clamp(23px, 0.9rem + 1.1vw, 32px);
	line-height: 1.25;
}

/* Small uppercase label - the design's recurring eyebrow */
.eyebrow {
	font-family: var(--body);
	font-size: clamp(13px, 0.84vw, 16px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
}

.lede {
	font-size: clamp(15px, 0.84vw, 16px);
	line-height: 1.44;
	color: var(--ink);
}

/* Pill buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	padding: 0 38px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--body);
	font-size: clamp(14px, 0.94vw, 18px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

.btn--solid  { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.btn--solid:hover  { background: #383429; border-color: #383429; }

.btn--outline { background: transparent; color: var(--dark); border-color: var(--dark); }
.btn--outline:hover { background: var(--dark); color: var(--on-dark); }

.btn--sm {
	height: 44px;
	padding: 0 22px;
	font-size: clamp(13px, 0.84vw, 16px);
	letter-spacing: 0.1em;
}

/* Text link with a trailing arrow */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: clamp(14px, 0.94vw, 18px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-nav);
	transition: color .22s ease, gap .22s ease;
}
.arrow-link svg { width: 22px; height: 10px; flex: none; }
.arrow-link:hover { color: var(--dark); gap: 20px; }

/* ==========================================================================
   Header
   ========================================================================== */

/* Fixed, and it contracts once the page moves so it costs less of the
   screen. Fixed rather than sticky on purpose: a sticky header occupies flow
   space, so shrinking it shortened the document and the browser's scroll
   anchoring compensated by moving the scroll position - which bounced it back
   over the threshold and made the header flicker open and shut. Out of the
   flow, its height cannot move the page at all.
   The panel the plugin opens is z-index 9999, well clear of this. */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--sand);
	border-bottom: 1px solid var(--header-line);
	transition: background-color .3s ease, box-shadow .3s ease;
}

/* Clear the WordPress toolbar for signed-in users. Below 600px the toolbar
   scrolls away, so the header goes back to the top. */
/* Never changes height, whatever the header is doing. */
.header-spacer { height: var(--header-h); }

body.admin-bar .site-header { top: 32px; }
@media screen and (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar .site-header { top: 0; }
}

.site-header.is-stuck {
	background: var(--sand-veil);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 1px 28px -14px rgba(24, 24, 24, 0.4);
}

/* Without backdrop-filter, translucency alone would muddy the copy behind. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header.is-stuck { background: rgba(239, 232, 223, 0.97); }
}

.site-header.is-stuck .header__inner { min-height: 84px; }
.site-header.is-stuck .logo svg,
.site-header.is-stuck .logo img { width: 112px; }

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: calc(var(--header-h) - 1px);
	transition: min-height .3s ease;
}

.logo { display: block; flex: none; }
.logo svg, .logo img { width: 132px; height: auto; transition: width .3s ease; }

.header__nav {
	display: flex;
	align-items: center;
	gap: clamp(24px, 2.4vw, 46px);
}

.nav-list {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.1vw, 40px);
}

.nav-list a {
	font-size: clamp(13px, 0.84vw, 16px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-nav);
	transition: color .22s ease;
}
.nav-list a:hover,
.nav-list .current-menu-item > a { color: var(--dark); }

.header__actions { display: flex; align-items: center; gap: 19px; }

/* Burger - hidden until the nav collapses */
.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	align-items: center;
	justify-content: center;
}
.nav-toggle span {
	position: relative;
	display: block;
	width: 22px;
	height: 1px;
	background: var(--dark);
	transition: transform .25s ease, background-color .25s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 1px;
	background: var(--dark);
	transition: transform .25s ease;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--sand);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* The wash. Measured off the design: ~0.85 alpha to 43%, easing to ~0.30 by 80%. */
.hero__wash {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to right,
		rgba(239, 232, 223, 0.88) 0%,
		rgba(239, 232, 223, 0.85) 43%,
		rgba(239, 232, 223, 0.64) 53%,
		rgba(239, 232, 223, 0.52) 73%,
		rgba(239, 232, 223, 0.30) 80%,
		rgba(239, 232, 223, 0.30) 100%
	);
}

.hero__inner {
	/* Design: hero band 745px tall, copy starting 196px down from the top. */
	min-height: clamp(520px, 38.8vw, 745px);
	padding-block: clamp(72px, 10.2vw, 196px) clamp(56px, 5vw, 96px);
}

.hero .h1 { margin-top: 0; }
.hero__lede { margin-top: 38px; max-width: 400px; }

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 19px;
	margin-top: 32px;
}

/* ==========================================================================
   Why choose RESET
   ========================================================================== */

.why { padding-top: clamp(72px, 9.1vw, 175px); }

.why__head { max-width: 640px; }
.why__intro { margin-top: 16px; }

/* A two-column grid of hairlines, the same trick as the brand guidelines'
   own "We are / We are not" page: a coloured grid gap standing in for
   dividers, so the list fills the row instead of one narrow column adrift
   in the middle of it. */
.why__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
	border-block: 1px solid var(--line);
	margin-top: clamp(36px, 3.4vw, 64px);
}

.why__item {
	background: var(--sand);
	padding: clamp(28px, 2.8vw, 46px) clamp(20px, 2.8vw, 44px);
}

/* The odd one out, spanning both columns - title and wording sit side by
   side rather than stacked, so the row does not just look like a single
   half-width cell adrift in a full-width one. */
.why__item--wide {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: clamp(20px, 3vw, 56px);
	align-items: baseline;
}
.why__item--wide .why__title { margin-bottom: 0; }

.why__title { margin-bottom: clamp(10px, 1vw, 16px); }
.why__text { max-width: 625px; }

.why__closing {
	margin-top: clamp(40px, 4.4vw, 80px);
	text-align: center;
}

/* ==========================================================================
   Class cards
   ========================================================================== */

.classes { padding-top: clamp(72px, 10vw, 193px); }

.class-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.class-card {
	display: flex;
	flex-direction: column;
	background: var(--sand-card);
	border-radius: var(--radius);
	overflow: hidden;
}

.class-card__media { aspect-ratio: 453 / 260; overflow: hidden; }
.class-card__media img { width: 100%; height: 100%; object-fit: cover; }

.class-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 20px 23px;
}

.class-card__title { margin-bottom: 0; }
.class-card__text { margin-top: 24px; color: var(--ink); }

.class-card__meta {
	margin-top: auto;
	padding-top: 65px;
	font-size: clamp(13px, 0.84vw, 16px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}

/* ==========================================================================
   This week at RESET
   ========================================================================== */

.week { padding-top: clamp(72px, 9.1vw, 175px); }

.week__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: clamp(28px, 2.6vw, 50px);
}

.week__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--line);
}

.week__card {
	min-height: 208px;
	display: flex;
	/* Stack regardless: if the link wrapper is ever missing from the markup,
	   the card still reads as a card rather than a row of loose text. */
	flex-direction: column;
}

/* The link normally carries the padding; without it, the card does. */
.week__card:not(:has(.week__link)) { padding: 35px 30px 34px; }
.week__card + .week__card { border-left: 1px solid var(--line); }

.week__when,
.week__meta,
.week__status {
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.week__when { color: var(--ink); }

.week__class {
	margin-top: 14px;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(20px, 1.25vw, 24px);
	line-height: 1.2;
	letter-spacing: 0.07em;
	color: var(--ink);
}

.week__meta { margin-top: 15px; color: var(--ink); }

/* Status is words first, colour second - the plugin's own rule. */
.week__status { margin-top: auto; padding-top: 30px; color: var(--ink-nav); }
.week__status--full,
.week__status--low { color: var(--clay); }
.week__status--cancelled,
.week__status--past { color: var(--ink-nav); }

.week__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 35px 30px 34px;
	transition: opacity .22s ease;
}
.week__link:hover { opacity: .68; }

.week__empty { color: var(--ink-nav); padding-top: 8px; }

/* ==========================================================================
   Cafe
   ========================================================================== */

.cafe { padding-top: clamp(72px, 8.3vw, 160px); }

.cafe__inner {
	display: grid;
	grid-template-columns: 649fr 711fr;
	gap: 40px;
	align-items: center;
}

.cafe__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); }
.cafe__media img { width: 100%; height: 100%; object-fit: cover; }

.cafe .h2 { margin-top: 16px; }
.cafe__text { margin-top: 10px; max-width: 470px; }
.cafe__body .btn { margin-top: 40px; }

/* ==========================================================================
   Studio Two
   ========================================================================== */

.hire { padding-top: clamp(72px, 10vw, 191px); padding-bottom: clamp(72px, 6.9vw, 133px); }

.hire__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: clamp(36px, 3.65vw, 70px);
	background: var(--sand-deep);
	border-radius: var(--radius);
}

.hire__body { max-width: 625px; }
.hire .h2 { margin-top: 16px; }
.hire__text { margin-top: 10px; }

/* ==========================================================================
   Follow us
   ========================================================================== */

/*
 * A full-bleed band rather than a card sitting inside the page, like Studio
 * Two just above it - two bands the same shape back to back would read as
 * one repeated pattern rather than two different things.
 */
.social {
	padding-block: clamp(48px, 5.5vw, 106px);
	background: var(--sand-card);
}

.social__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.social__body { max-width: 560px; }
.social .h2 { margin-top: 16px; }
.social__text { margin-top: 10px; }
.social__btn { flex: none; }

.site-footer { background: var(--sand-deep); }

/*
 * The band's padding sits on the inner container rather than the footer, so
 * the credit ribbon underneath can reach the bottom edge of the page. The
 * space around the footer grid is exactly as it was.
 */
.site-footer > .container { padding-block: clamp(56px, 5.2vw, 100px); }

.footer__grid {
	display: grid;
	grid-template-columns: 481fr 362fr 362fr 195fr;
	gap: 40px 24px;
}

.footer__logo svg, .footer__logo img { width: 132px; height: auto; }

.footer__tagline {
	margin-top: 13px;
	font-size: 9px;
	line-height: 1.3;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--ink);
}

.footer__address {
	margin-top: 26px;
	font-size: 12px;
	line-height: 1.42;
	color: var(--ink-quiet);
	font-style: normal;
}
.footer__address + .footer__address { margin-top: 28px; }
.footer__address a { color: inherit; }
.footer__address a:hover { color: var(--dark); }

.footer__heading {
	font-size: clamp(13px, 0.84vw, 16px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}

.footer__links { margin-top: 18px; display: grid; gap: 15px; }
.footer__links a {
	font-size: clamp(14px, 0.84vw, 16px);
	line-height: 1.25;
	color: var(--ink-muted);
	transition: color .22s ease;
}
.footer__links a:hover { color: var(--dark); }

/* ==========================================================================
   Interior pages - plain, readable fallback so the rest of the site works
   ========================================================================== */

.page-shell { padding-block: clamp(48px, 6vw, 96px); }
.page-shell .entry-title { margin-bottom: 32px; }
.entry-content { max-width: 68ch; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2, .entry-content h3 {
	font-family: var(--display);
	font-weight: 400;
	margin-top: 1.8em;
}
.entry-content h2 { font-size: 34px; }
.entry-content h3 { font-size: 26px; }
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }
.entry-content ul { list-style: disc; padding-left: 1.2em; }
.entry-content ol { list-style: decimal; padding-left: 1.2em; }
.entry-content li + li { margin-top: .4em; }

.post-list { display: grid; gap: 40px; }
.post-list__item { padding-bottom: 32px; border-bottom: 1px solid rgba(73, 68, 56, .18); }
.post-list__title { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.2; }
.post-list__meta { margin-top: 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-nav); }
.post-list__excerpt { margin-top: 14px; }

/* --- The credit ribbon --------------------------------------------------- */

.footer__ribbon {
	padding-block: 11px;
	background: var(--ink);
	text-align: center;
}

.footer__built {
	font-size: 12px;
	letter-spacing: 0.04em;
	color: rgba(231, 231, 231, 0.75);
}

.footer__built a {
	color: var(--on-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .22s ease;
}

.footer__built a:hover,
.footer__built a:focus-visible { color: var(--clay); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.hero__lede { max-width: 360px; }
}

/* Nav collapses */
@media (max-width: 1080px) {
	:root { --header-h: 97px; } /* 96px bar + the 1px rule */

	.nav-toggle { display: flex; }

	.header__inner { gap: 16px; }
	.site-header.is-stuck .header__inner { min-height: 72px; }

	.header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--gutter) 32px;
		background: var(--sand);
		border-top: 1px solid rgba(73, 68, 56, .16);
		box-shadow: 0 24px 40px -24px rgba(73, 68, 56, .35);
		display: none;
	}
	.header__nav.is-open { display: flex; }

	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-list a {
		display: block;
		padding: 16px 0;
		font-size: 15px;
		border-bottom: 1px solid rgba(73, 68, 56, .12);
	}

	.header__actions { margin-top: 24px; gap: 12px; }
	.header__actions .btn { flex: 1; }

	/* The primary action stays on the bar itself, so the panel only needs
	   Login - no point offering "Book a class" twice on one screen. */
	.header__cta { display: inline-flex; }
	.header__actions .btn--solid { display: none; }
}

@media (min-width: 1081px) {
	.header__cta { display: none; }
}

@media (max-width: 900px) {
	.why__list { grid-template-columns: 1fr; }
	.why__item--wide {
		grid-column: auto;
		display: block;
	}
	.why__item--wide .why__title { margin-bottom: clamp(10px, 1vw, 16px); }

	.class-grid { grid-template-columns: 1fr; gap: 16px; }
	.class-card__media { aspect-ratio: 16 / 9; }
	.class-card__meta { padding-top: 28px; }

	.week__grid { grid-template-columns: 1fr; border-top: 0; }
	.week__card {
		min-height: 0;
		border-top: 1px solid var(--line);
	}
	.week__link { padding: 26px 0; }
	.week__card:not(:has(.week__link)) { padding: 26px 0; }
	.week__card + .week__card { border-left: 0; }
	.week__status { padding-top: 18px; }

	.cafe__inner { grid-template-columns: 1fr; gap: 32px; }
	.cafe__media { aspect-ratio: 4 / 3; }
	.cafe__text { max-width: none; }

	.hire__band { flex-direction: column; align-items: flex-start; gap: 32px; }
	.hire__body { max-width: none; }

	.social__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
	.social__body { max-width: none; }

	.footer__grid { grid-template-columns: 1fr 1fr; gap: 44px 24px; }
	.footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
	.hero {
		/* The left-to-right wash cannot carry the text once the crop tightens,
		   so it becomes a top-down wash on small screens. */
		text-align: left;
	}
	.hero__wash {
		background: linear-gradient(
			to bottom,
			rgba(239, 232, 223, 0.94) 0%,
			rgba(239, 232, 223, 0.88) 45%,
			rgba(239, 232, 223, 0.66) 75%,
			rgba(239, 232, 223, 0.5) 100%
		);
	}
	.hero__media img { object-position: 62% center; }
	.hero__lede { max-width: none; }
	.hero .h1 { margin-top: 18px; }
	.hero__lede { margin-top: 24px; }
	.hero__actions { margin-top: 30px; gap: 12px; }
	.hero__actions .btn { flex: 1 1 auto; min-width: 0; }

	.btn { height: 52px; padding: 0 26px; }

	/*
	 * The header keeps its small button even on a narrow screen - .btn--sm's
	 * own height and padding would otherwise lose to the rule above, which
	 * is what made it look full-size next to the logo.
	 */
	.header__cta.btn--sm { height: 40px; padding: 0 18px; }

	.week__head { flex-direction: column; align-items: flex-start; gap: 18px; }

	.footer__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 420px) {
	.header__cta.btn--sm { height: 38px; padding: 0 16px; font-size: 12px; letter-spacing: .08em; }
	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Timetable & booking page
   Built to "RESET - Booking - Design.pdf". The grid, chips and booking panel
   come from the plugin and are skinned in assets/css/plugin-skin.css.
   ========================================================================== */

/* A tighter label than the homepage eyebrow - the booking design uses 12px */
.eyebrow--sm {
	font-size: clamp(11px, 0.63vw, 12px);
	letter-spacing: 0.18em;
}

.booking-intro { padding-top: clamp(56px, 6.2vw, 119px); }

.booking-intro__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.booking-intro .h2 { margin-top: 8px; }

.booking-grid { padding-top: clamp(40px, 3.44vw, 66px); }

/* --- Ways to pay --------------------------------------------------------- */

.pay { padding-top: clamp(64px, 9.4vw, 180px); }

.pay__heading { margin-bottom: clamp(32px, 2.9vw, 56px); }

.pay__grid {
	display: grid;
	grid-template-columns: repeat(var(--pay-cols, 4), 1fr);
	gap: 20px;
}

.pay-card {
	display: flex;
	flex-direction: column;
	min-height: 325px;
	padding: 28px 30px 30px;
	background: var(--sand-card);
	border: 1px solid transparent;
	border-radius: var(--radius);
}

.pay-card__name {
	margin-top: 10px;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(20px, 1.25vw, 24px);
	line-height: 1.2;
	color: var(--ink);
}

.pay-card__price {
	margin-top: 12px;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(30px, 1.88vw, 36px);
	line-height: 1.15;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.pay-card__meta {
	margin-top: 18px;
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.pay-card__body {
	margin-top: 14px;
	font-size: 12px;
	line-height: 1.42;
	color: var(--ink);
}

.pay-card__choose {
	margin-top: auto;
	padding-top: 34px;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--clay);
	transition: color .22s ease;
}
.pay-card__choose:hover { color: var(--dark); }

.pay__note {
	margin-top: 26px;
	max-width: 118ch;
	font-size: clamp(14px, 0.84vw, 16px);
	line-height: 1.5;
	color: var(--ink);
}
.pay__note a { text-decoration: underline; text-underline-offset: 2px; }
.pay__note a:hover { color: var(--dark); }

/* --- Cancellation policy ------------------------------------------------- */

.policy {
	padding-top: clamp(64px, 10.3vw, 198px);
	padding-bottom: clamp(64px, 9.6vw, 184px);
}

.policy__panel {
	padding: clamp(36px, 3.65vw, 70px);
	background: var(--sand-deep);
	border-radius: var(--radius);
}

.policy__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: clamp(32px, 1.6vw, 31px);
}

.policy__head .h2 { margin-top: 14px; }

.policy__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--policy-line);
	border-radius: var(--radius);
	overflow: hidden;
}

.policy-card {
	display: flex;
	flex-direction: column;
	min-height: 294px;
	padding: 30px;
	background: var(--sand-card);
}
.policy-card + .policy-card { border-left: 1px solid var(--policy-line); }

.policy-card__title {
	margin-top: 12px;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(24px, 1.67vw, 32px);
	line-height: 1.15;
	color: var(--ink);
}

.policy-card__body {
	margin-top: 16px;
	font-size: clamp(14px, 0.84vw, 16px);
	line-height: 1.44;
	color: var(--ink);
}

.policy-card__meta {
	margin-top: auto;
	padding-top: 30px;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.policy__notes {
	display: grid;
	grid-template-columns: 700fr 513fr;
	gap: 47px;
	margin-top: 30px;
}
.policy__notes p {
	font-size: clamp(14px, 0.84vw, 16px);
	line-height: 1.44;
	color: var(--ink);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1180px) {
	.pay__grid { --pay-cols: 2 !important; }
}

@media (max-width: 900px) {
	.booking-intro__inner { flex-direction: column; align-items: flex-start; gap: 18px; }

	.policy__head { flex-direction: column; align-items: flex-start; gap: 18px; }

	.policy__grid { grid-template-columns: 1fr; }
	.policy-card { min-height: 0; }
	.policy-card + .policy-card { border-left: 0; border-top: 1px solid var(--policy-line); }

	.policy__notes { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 560px) {
	.pay__grid { --pay-cols: 1 !important; }
	.pay-card { min-height: 0; padding: 24px 24px 26px; }
	.policy-card { padding: 24px; }
}


/* ==========================================================================
   Café page
   Built to "RESET - Cafe Page.pdf". The menu PDF comes from RESET -> Cafe
   menus; the hours from Settings -> Rooms, add-ons & hours.
   ========================================================================== */

.cafe-page { padding-top: clamp(52px, 5.2vw, 100px); padding-bottom: clamp(64px, 6.1vw, 117px); }

.cafe-page__lede { margin-top: 6px; max-width: 480px; }

.cafe-page h1 { margin-top: 6px; }

.cafe-page__rule {
	height: 0;
	margin: clamp(22px, 1.6vw, 30px) 0 clamp(16px, 1.1vw, 21px);
	border: 0;
	border-top: 1px solid var(--line);
}

/* --- The menu, previewed in place ---------------------------------------- */

/*
 * Food, Drinks, or however many the studio has uploaded - one pill-shaped
 * switcher in the site's own button language, rather than a row of plain
 * tabs that would look borrowed from somewhere else.
 */
.menu-tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 20px;
	background: var(--sand-card);
	border-radius: 999px;
}

.menu-tabs__btn {
	padding: 11px 26px;
	border-radius: 999px;
	font-family: var(--body);
	font-size: clamp(13px, 0.84vw, 16px);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-nav);
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease;
}

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

.menu-tabs__btn[aria-selected="true"] {
	background: var(--dark);
	color: var(--on-dark);
}

.menu-tabs__btn:focus-visible {
	outline: 2px solid var(--dark);
	outline-offset: 2px;
}

.menu-panel__updated--alone { margin-bottom: 22px; }

.menu-panel {
	padding: 30px;
	background: var(--sand-card);
	border-radius: var(--radius);
}

.menu-panel + .menu-panel { margin-top: 20px; }

/*
 * A tabbed panel is never actually stacked under another one - only one is
 * ever shown - but the rule above still matches it by its place in the
 * markup, since a hidden sibling still counts as a sibling. Left alone, that
 * put a 20px gap above every tab except the first.
 */
.menu-panel[role="tabpanel"] { margin-top: 0; }

.menu-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin-bottom: 22px;
}

.menu-panel__name {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(22px, 1.67vw, 32px);
	line-height: 1.15;
	color: var(--ink);
}

.menu-panel__updated {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-nav);
}

/*
 * The design's preview window: a wide white sheet inside the sand panel.
 *
 * At the design width this is 1340x485. The height is fixed rather than a
 * ratio so a portrait page stays the same readable size on a laptop or tablet
 * instead of shrinking with the window - and since the panel is capped at the
 * design width, a wider screen gets those same 485px anyway.
 */
.menu-panel__viewer {
	height: 485px;
	overflow: hidden;
	background: #FFFFFF;
	border-radius: 3px;
}

/*
 * The pages are drawn side by side and centred, so a wide window holds two or
 * three sheets of a portrait menu rather than letterboxing one.
 */
.menu-sheet {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	width: 100%;
	height: 100%;
	padding: 1px;
	overflow: auto;
	overscroll-behavior-inline: contain;
}

/*
 * No shadow or border: menu PDFs are nearly always white, so bare pages on the
 * white sheet read as the one clean sheet the design shows. A drop shadow put
 * a visible seam down the middle of that.
 */
.menu-sheet__page {
	display: block;
}

/* Each page is a button that opens it enlarged. Nothing about it should look
   like a button, though - it should look like the page it is. */
.menu-sheet__open {
	display: block;
	flex: none;
	max-width: 100%;
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 2px;
	cursor: zoom-in;
}

.menu-sheet__open:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 2px;
}

/* Shown until the pages are drawn, and if the script cannot run at all. */
.menu-sheet__fallback {
	margin: 0;
	font-size: clamp(14px, 0.84vw, 16px);
	color: var(--ink);
}
.menu-sheet__fallback a { text-decoration: underline; text-underline-offset: 3px; }
.menu-sheet__fallback a:hover { color: var(--clay); }

.menu-panel__actions {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-top: 28px;
}

/*
 * Hidden until the preview has actually drawn: with no JavaScript the pages
 * never appear, and there would be nothing to click.
 */
.menu-panel__hint { display: none; }

.menu-panel__viewer.is-rendered ~ .menu-panel__actions .menu-panel__hint {
	display: block;
	font-size: clamp(13px, 0.73vw, 14px);
	color: var(--ink-nav);
}

/* Touch screens are tapped, not clicked. */
.menu-panel__hint--tap { display: none; }

@media (hover: none) {
	.menu-panel__hint--click { display: none; }
	.menu-panel__hint--tap { display: inline; }
}

/* Plain in the design; the underline arrives on hover and focus. */
.menu-panel__download {
	font-size: clamp(14px, 0.84vw, 16px);
	color: var(--ink);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color .22s ease;
}
.menu-panel__download:hover,
.menu-panel__download:focus-visible { color: var(--clay); text-decoration: underline; }

.menu-panel--empty { padding: clamp(40px, 4vw, 70px) 30px; text-align: center; }
.menu-panel__none { color: var(--ink-nav); font-size: clamp(15px, 0.84vw, 16px); }

/* --- The enlarged menu --------------------------------------------------- */

/*
 * Clicking a page opens it here. Every zoom step redraws the page from the PDF
 * rather than scaling a picture, so the small print stays sharp.
 */
.menu-zoom {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	background: rgba(24, 24, 24, 0.92);
	backdrop-filter: blur(10px);
}

@supports not (backdrop-filter: blur(10px)) {
	.menu-zoom { background: rgba(24, 24, 24, 0.97); }
}

.menu-zoom__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex: none;
	padding: 14px clamp(16px, 2vw, 30px);
	border-bottom: 1px solid rgba(231, 231, 231, 0.16);
}

.menu-zoom__title {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(18px, 1.25vw, 24px);
	line-height: 1.2;
	color: var(--on-dark);
}

.menu-zoom__tools {
	display: flex;
	align-items: center;
	gap: 10px;
}

.menu-zoom__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-family: var(--body);
	font-size: 19px;
	line-height: 1;
	color: var(--on-dark);
	background: none;
	border: 1px solid rgba(231, 231, 231, 0.3);
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.menu-zoom__btn:hover:not(:disabled) {
	background: rgba(231, 231, 231, 0.14);
	border-color: rgba(231, 231, 231, 0.5);
}

.menu-zoom__btn:disabled { opacity: .35; cursor: default; }

/* The width holds steady as the label goes from "Fit" to "300%". */
.menu-zoom__level {
	min-width: 52px;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--on-dark);
	font-variant-numeric: tabular-nums;
}

.menu-zoom__download,
.menu-zoom__close {
	font-family: var(--body);
	font-size: 14px;
	color: var(--on-dark);
	background: none;
	border: 1px solid rgba(231, 231, 231, 0.3);
	border-radius: var(--radius);
	padding: 9px 16px;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.menu-zoom__download:hover,
.menu-zoom__close:hover {
	background: rgba(231, 231, 231, 0.14);
	border-color: rgba(231, 231, 231, 0.5);
	color: var(--on-dark);
}

.menu-zoom__btn:focus-visible,
.menu-zoom__download:focus-visible,
.menu-zoom__close:focus-visible,
.menu-zoom__stage:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 2px;
}

.menu-zoom__stage {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/*
 * Centred with auto margins rather than justify-content: a page bigger than
 * the stage would otherwise overflow equally in both directions and put its
 * top-left corner out of reach of the scrollbars. Auto margins collapse to
 * nothing once there is no room spare, so the page scrolls from its corner.
 */
.menu-zoom__reel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: max-content;
	min-width: 100%;
	margin: auto;
	padding: 12px;
}

.menu-zoom__page {
	display: block;
	flex: none;
	background: #FFFFFF;
	box-shadow: 0 18px 60px -30px rgba(0, 0, 0, 0.9);
}

/* Hold the page behind still while the menu is open. */
html.has-menu-zoom,
html.has-menu-zoom body { overflow: hidden; }

/*
 * The admin bar sits above everything on the page, so the enlarged menu stops
 * below it rather than having its title bar covered. The studio are signed in
 * whenever they check their own menu, so this is the view they get.
 */
body.admin-bar .menu-zoom { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .menu-zoom { top: 46px; }
}

@media (max-width: 560px) {
	.menu-zoom__bar { flex-wrap: wrap; gap: 10px; }
	.menu-zoom__title { width: 100%; }
	.menu-zoom__tools { width: 100%; gap: 8px; justify-content: space-between; }

	/* The download is the way out if the zoom still is not enough, so it
	   stays - it just gives up some padding to fit the row. */
	.menu-zoom__download,
	.menu-zoom__close { padding: 9px 11px; }
}

/* --- Opening hours ------------------------------------------------------- */

.hours {
	margin-top: 20px;
	padding: 30px;
	background: var(--sand-card);
	border-radius: var(--radius);
}

.hours__title {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(24px, 1.67vw, 32px);
	line-height: 1.15;
	color: var(--ink);
}

.hours__list { margin-top: clamp(24px, 2.1vw, 40px); }

.hours__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-block: 9px;
	border-bottom: 1px solid var(--hours-line);
}

.hours__label,
.hours__value {
	margin: 0;
	font-size: clamp(14px, 0.84vw, 16px);
	line-height: 1.44;
	color: var(--ink);
}

.hours__value { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
	.menu-panel, .hours { padding: 24px; }

	/*
	 * A wide window would shrink an A4 page to nothing on a phone. The pages
	 * stack at full width instead and the panel grows to hold them, so the
	 * whole menu is read by scrolling the page - not by scrolling a small box
	 * inside it, which hides later pages and fights the page's own scroll.
	 */
	.menu-panel__viewer { height: auto; }

	.menu-sheet {
		flex-direction: column;
		justify-content: flex-start;
		gap: 14px;
		height: auto;
		overflow: visible;
	}

	.menu-panel__actions { justify-content: flex-start; }

	.hours__row { align-items: flex-start; }
}

@media (max-width: 560px) {
	.menu-panel, .hours { padding: 20px; }
	.hours__row { flex-direction: column; gap: 2px; padding-block: 11px; }
	.hours__value { text-align: left; color: var(--ink-muted); }
}


/* ==========================================================================
   About & FAQ - "RESET - About and FAQ.pdf"
   ========================================================================== */

/* --- About us ------------------------------------------------------------ */

.about-intro { padding-top: clamp(56px, 8.3vw, 160px); }

.about-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 574px);
	gap: clamp(32px, 2.1vw, 40px);
	/* The wording sits against the middle of the photograph, as drawn. */
	align-items: center;
}

/*
 * 615px is what reproduces the design's line breaks. Its own text measures
 * 595px, but this Jost renders about 1.6% wider, so matching the measurement
 * would break a word earlier than drawn.
 */
.about-intro__body { max-width: 615px; }

.about-intro__title { margin-top: 6px; }

.about-intro__text { margin-top: clamp(18px, 1.3vw, 25px); }

.about-intro__text p + p { margin-top: clamp(18px, 1.2vw, 23px); }

.about-intro__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius);
}

.about-intro__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- The team ------------------------------------------------------------ */

.team { padding-top: clamp(56px, 6.1vw, 118px); }

.team__title { text-align: center; }

/*
 * Flex rather than grid. A grid leaves a part-filled last row hard against the
 * left edge, and however many people there are the row should sit centred
 * under the centred heading. Three across still measure the design's 453px.
 */
.team__grid {
	margin-top: clamp(30px, 3.3vw, 63px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 20px;
	row-gap: clamp(40px, 4.4vw, 64px);
}

.team__member {
	display: flex;
	flex-direction: column;
	/* Three across, and never stretched wider to fill a short row. */
	flex: 0 1 calc((100% - 40px) / 3);
	min-width: 0;
}

.team__media {
	position: relative;
	aspect-ratio: 453 / 319;
	overflow: hidden;
	border-radius: var(--radius);
}

.team__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * A light wash over every photo. Some come in with a white or near-white
 * border of their own, which otherwise disappears against the sand card
 * behind it and leaves the frame with no visible edge.
 */
.team__media:not(.team__media--empty)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(34, 34, 34, 0.1);
	pointer-events: none;
}

/* Until a photograph is added, the space is held rather than left ragged. */
.team__media--empty { background: var(--sand-card); }

/* The wording is inset from the photograph's edge in the design. */
.team__body { padding: 0 20px; }

.team__name {
	margin-top: clamp(16px, 1.15vw, 22px);
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(23px, 0.9rem + 1.1vw, 32px);
	line-height: 1.25;
	color: var(--ink);
}

.team__role { margin-top: clamp(7px, 0.47vw, 9px); }

.team__more { margin-top: clamp(10px, 0.7vw, 14px); }

/* --- Questions, answered ------------------------------------------------- */

.faq {
	padding-top: clamp(72px, 12.8vw, 247px);
	padding-bottom: clamp(72px, 6.6vw, 127px);
}

.faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 930px);
	gap: clamp(32px, 2.1vw, 40px);
	align-items: start;
}

.faq__note {
	font-size: clamp(11px, 0.63vw, 12px);
	line-height: 1.5;
	color: var(--ink);
}

.faq__item { border-top: 1px solid var(--faq-line); }

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* 79 plus the rule above it makes the design's 80px row. */
	min-height: 79px;
	padding-block: 12px;
	font-size: clamp(15px, 0.84vw, 16px);
	line-height: 1.4;
	color: var(--ink);
	cursor: pointer;
	list-style: none; /* Firefox */
}

.faq__q::-webkit-details-marker { display: none; } /* Safari */

.faq__q:hover .faq__text { color: var(--clay); }

.faq__q:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 3px;
}

.faq__text { transition: color .2s ease; }

/*
 * The plus is drawn rather than typed, so it can lose its upright and become
 * a minus when the answer is open.
 */
.faq__mark {
	position: relative;
	flex: none;
	width: 10px;
	height: 10px;
}

.faq__mark::before,
.faq__mark::after {
	content: "";
	position: absolute;
	background: var(--ink);
}

.faq__mark::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateY(-50%);
}

.faq__mark::after {
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
	transform: translateX(-50%);
	transition: transform .22s ease;
}

.faq__item[open] .faq__mark::after { transform: translateX(-50%) scaleY(0); }

.faq__a {
	max-width: 760px;
	padding-bottom: clamp(20px, 1.5vw, 28px);
	font-size: clamp(15px, 0.84vw, 16px);
	line-height: 1.6;
	color: var(--ink-muted);
}

.faq__a p + p { margin-top: 0.9em; }

/* --- Team popup ----------------------------------------------------------- */

/*
 * A native <dialog> - Escape, a focus trap and a backdrop all come from the
 * browser rather than being built by hand. It sizes to its content and the
 * browser centres it, so it only needs a width, not a position.
 *
 * Styled as [open] rather than plain .team-modal: the browser's own
 * stylesheet hides a closed dialog with "dialog:not([open]) { display:
 * none }", and an unconditional display here would beat that rule and leave
 * the closed dialog sitting in normal flow - as the last thing in <body>,
 * meaning below the footer.
 */
.team-modal[open] {
	display: flex;
	flex-direction: column;
	width: min(600px, calc(100% - 40px));
	max-height: min(680px, calc(100% - 40px));
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--sand);
	color: var(--ink);
}

.team-modal::backdrop {
	background: rgba(24, 24, 24, 0.55);
	backdrop-filter: blur(6px);
}

@supports not (backdrop-filter: blur(6px)) {
	.team-modal::backdrop { background: rgba(24, 24, 24, 0.7); }
}

/* Hold the page behind still while the popup is open. */
html.has-team-modal,
html.has-team-modal body { overflow: hidden; }

.team-modal__close {
	position: absolute;
	top: clamp(14px, 1.4vw, 20px);
	right: clamp(14px, 1.4vw, 20px);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--sand);
	border-radius: 999px;
	color: var(--ink);
	cursor: pointer;
}

.team-modal__close svg { width: 14px; height: 14px; }

.team-modal__media {
	position: relative;
	flex: none;
	aspect-ratio: 453 / 319;
	overflow: hidden;
}

.team-modal__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * A light wash over every photo. Some come in with a white or near-white
 * border of their own, which otherwise disappears against the sand card
 * behind it and leaves the frame with no visible edge.
 */
.team-modal__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(34, 34, 34, 0.1);
	pointer-events: none;
}

.team-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: clamp(24px, 2.6vw, 40px);
	overflow-y: auto;
}

.team-modal__name {
	font-size: clamp(22px, 0.85rem + 1vw, 30px);
}

.team-modal__role { margin-top: clamp(6px, 0.4vw, 8px); }

.team-modal__text {
	margin-top: clamp(14px, 1.1vw, 20px);
	color: var(--ink-muted);
}

.team-modal__text p + p { margin-top: 0.9em; }

@media (max-width: 700px) {
	.team-modal { width: calc(100% - 24px); }
	.team-modal__body { padding: 22px; }
}

/* --- Follow us popup ------------------------------------------------------ */

/* Same native <dialog> as the team popup - see the note above .team-modal[open]. */
.qr-modal[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(360px, calc(100% - 40px));
	padding: clamp(28px, 4vw, 48px);
	border: 0;
	border-radius: var(--radius);
	background: var(--sand);
	color: var(--ink);
	text-align: center;
}

.qr-modal::backdrop {
	background: rgba(24, 24, 24, 0.55);
	backdrop-filter: blur(6px);
}

@supports not (backdrop-filter: blur(6px)) {
	.qr-modal::backdrop { background: rgba(24, 24, 24, 0.7); }
}

/* Hold the page behind still while the popup is open. */
html.has-qr-modal,
html.has-qr-modal body { overflow: hidden; }

.qr-modal__close {
	position: absolute;
	top: clamp(14px, 1.4vw, 20px);
	right: clamp(14px, 1.4vw, 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--sand);
	border-radius: 999px;
	color: var(--ink);
	cursor: pointer;
}

.qr-modal__close svg { width: 14px; height: 14px; }

/* Full width of the dialog's own padding box, so the code and link below can
   be centred within something definite rather than a shrink-wrapped guess. */
.qr-modal__body { width: 100%; }

.qr-modal__code {
	/* A block box ignores the dialog's text-align - it needs its own
	   centering, or it sits flush against whichever edge is wider. */
	width: min(220px, 100%);
	margin: clamp(20px, 2.4vw, 28px) auto 0;
	padding: 16px;
	background: var(--sand-card);
	border-radius: var(--radius);
}

.qr-modal__code svg { display: block; width: 100%; height: auto; }

.qr-modal__link {
	margin-top: clamp(20px, 2.4vw, 28px);
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	.faq__mark::after,
	.faq__text { transition: none; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
	.team__member { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 900px) {
	/* The wording first, then the photograph it belongs to. */
	.about-intro__inner,
	.faq__inner { grid-template-columns: minmax(0, 1fr); }

	.about-intro__body { max-width: none; }

	.about-intro__media { aspect-ratio: 3 / 2; }

	.faq__note { margin-top: 4px; }
}

@media (max-width: 700px) {
	.team__grid { row-gap: 40px; }
	.team__member { flex-basis: 100%; }

	/* One column wide, the inset reads as a mistake rather than a margin. */
	.team__body { padding: 0; }

	.faq__q { min-height: 64px; gap: 16px; }
}