/*
 * Duende — theme styles
 *
 * Built on the Monte style reference: two surfaces and nothing else — a
 * Corten terracotta field and a Sandstone cream canvas — with one serif doing
 * all the talking and a monospace face reserved strictly for data. The system
 * is flat by design: no shadows, no gradients, no filled buttons. Depth comes
 * from the jump between the two surfaces, and hierarchy from type alone.
 *
 * Two places knowingly depart from the reference, both on the client's
 * explicit instruction: the hero carries video rather than a flat Corten
 * field (the field survives as the wash over it), and the sticky booking bar
 * keeps the original nav-back.jpg wall texture under a Corten overlay.
 */

/* ------------------------------------------------------------------ tokens */

:root {
	/* Colour — the Customizer overrides Corten, Sandstone, Espresso, Bordeaux. */
	--color-corten: #b84b30;
	--color-bordeaux: #5f1d1a;
	--color-sandstone: #f8f4e9;
	--color-driftwood: #e5e7eb;
	--color-bone: #ffffff;
	--color-smoke: #666666;
	--color-ash: #999999;
	--color-espresso: #3e3d3a;
	--color-charcoal: #000000;

	/* Type. Playfair Display stands in for Riposte, IBM Plex Mono for Apercu
	   Mono. Running text uses a system serif, as the reference instructs. */
	--font-display: "Playfair Display", "DM Serif Display", Georgia, serif;
	--font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	--weight-regular: 400;
	--weight-semibold: 600;

	--text-caption: 10px;
	--text-body: 16px;
	--text-subheading: 20px;
	--text-heading-sm: 24px;
	--text-heading: 36px;

	/* Spacing — 4px base, comfortable density. */
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-28: 28px;
	--space-32: 32px;
	--space-40: 40px;
	--space-48: 48px;
	--space-56: 56px;
	--space-64: 64px;
	--space-88: 88px;
	--space-128: 128px;
	--space-144: 144px;

	/* Two radii, and only two. */
	--radius-card: 14px;
	--radius-full: 9999px;

	--wrap: 1200px;
	--wrap-narrow: 720px;
	--section-gap: clamp(56px, 7vw, 88px);
	--bar-height: 60px;

	--hero-overlay: 0.35;
	--bar-image: none;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------- reset */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--color-sandstone);
	color: var(--color-espresso);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.55;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
	/* clip, not hidden: `overflow: hidden` turns the body into a scroll
	   container and silently breaks the sticky booking bar. */
	overflow-x: clip;
}

/* The booking bar sits in the flow at the end of .site-content, so the page
   needs no inset for it. */
body.has-booking-bar { background: var(--color-espresso); }

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

a {
	color: var(--color-corten);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover { opacity: 0.7; }

button {
	font: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 1.5px solid var(--color-corten);
	outline-offset: 3px;
}

.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;
	top: -100px;
	left: var(--space-16);
	z-index: 200;
	padding: var(--space-12) var(--space-24);
	background: var(--color-sandstone);
	border: 1.5px solid var(--color-corten);
	border-radius: var(--radius-full);
	color: var(--color-corten);
	text-decoration: none;
}

.skip-link:focus { top: var(--space-16); }

/* -------------------------------------------------------------- typography */

h1, h2, h3, h4 {
	margin: 0 0 var(--space-20);
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	line-height: 1.1;
	color: var(--color-corten);
}

/* The signature gesture: the serif set in caps and allowed to breathe.
   0.10em tracking at heading sizes is what makes it read as Monte rather
   than as a generic serif revival. */
.eyebrow {
	margin: 0 0 var(--space-20);
	font-family: var(--font-display);
	font-size: clamp(0.9375rem, 1.8vw, 1.5rem);
	font-weight: var(--weight-regular);
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-corten);
}

.section__title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	font-weight: var(--weight-semibold);
	line-height: 1.1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.section__subtitle {
	margin-bottom: var(--space-32);
	font-family: var(--font-display);
	font-size: var(--text-subheading);
	font-weight: var(--weight-regular);
	line-height: 1.25;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-corten);
}

.section__lede {
	margin: var(--space-24) auto 0;
	max-width: 54ch;
	font-size: var(--text-body);
	line-height: 1.55;
	color: var(--color-smoke);
}

/* Sections open centred: eyebrow, then headline, then a generous gap. */
.section__head {
	margin-bottom: var(--space-64);
	text-align: center;
}

.section__more {
	margin-top: var(--space-48);
	text-align: center;
}

/* Data — times, dates, prices, hours, addresses, phone numbers, inputs.
   Never prose. The serif speaks, the mono measures. */
.mono,
.wo-card__price,
.wo-list__when,
.wo-list__price,
.wo-single__price,
.hours__row,
.breadcrumbs {
	font-family: var(--font-mono);
	letter-spacing: -0.025em;
}

/* ------------------------------------------------------------------ layout */

.wrap {
	width: min(100% - 2 * var(--space-32), var(--wrap));
	margin-inline: auto;
}

.site-content { background: var(--color-sandstone); }

.section { padding-block: var(--section-gap); }

.section--cream,
.section--paper { background: var(--color-sandstone); }

/* The Corten field, used as a full-bleed accent between cream sections. */
.section--dark {
	background: var(--color-corten);
	color: var(--color-sandstone);
}

.section--dark h2,
.section--dark h3,
.section--dark .eyebrow,
.section--dark .section__title,
.section--dark .section__lede,
.section--dark a { color: var(--color-sandstone); }

/* Long-form copy: system serif, comfortable measure, Espresso rather than
   Corten. The reference is explicit that the display serif is exhausting
   past a couple of lines. */
.prose {
	max-width: 62ch;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.6;
}

.prose--narrow { max-width: var(--wrap-narrow); }

.prose > * + * { margin-top: var(--space-24); }

.prose h2 {
	margin-top: var(--space-56);
	font-size: var(--text-heading-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.prose h3 {
	margin-top: var(--space-40);
	font-size: var(--text-subheading);
	font-weight: var(--weight-regular);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.prose ul,
.prose ol { padding-left: 1.2em; }

.prose li + li { margin-top: var(--space-8); }

.prose strong { color: var(--color-corten); }

.prose blockquote {
	margin: var(--space-48) 0;
	padding-left: var(--space-24);
	border-left: 1.5px solid var(--color-corten);
	font-family: var(--font-display);
	font-size: var(--text-subheading);
	line-height: 1.35;
	color: var(--color-corten);
}

.page-body { padding-block: var(--space-64) var(--section-gap); }

.page-body--wide {
	display: grid;
	gap: var(--space-56);
}

/* ----------------------------------------------------------------- actions */

/* One button in the whole system: an outlined pill. The border is the
   action — never filled, never shadowed, on any surface or any state. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	padding: var(--space-16) var(--space-32);
	background: transparent;
	border: 1.5px solid var(--color-corten);
	border-radius: var(--radius-full);
	color: var(--color-corten);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: var(--weight-regular);
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.25s var(--ease);
}

.btn:hover { opacity: 0.62; }

.btn--block {
	display: flex;
	width: 100%;
}

/* On a Corten field the pill flips to Sandstone; it is still only a border. */
.section--dark .btn,
.btn--light {
	border-color: var(--color-sandstone);
	color: var(--color-sandstone);
}

/* Navigation and inline actions: no border at all, almost invisible
   until hovered. */
.ghost-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-12);
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: var(--weight-regular);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.25s var(--ease);
}

.ghost-link:hover { opacity: 0.62; }

@media (min-width: 641px) {
	.site-head .ghost-link {
		font-size: 15px;
		font-weight: var(--weight-semibold);
		letter-spacing: 0.06em;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
	}

	.booking-bar .booking-bar__label {
		font-size: 17px;
		font-weight: var(--weight-semibold);
		letter-spacing: 0.08em;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
	}
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-corten);
	transition: opacity 0.25s var(--ease);
}

a:hover .link-arrow,
.link-arrow:hover { opacity: 0.62; }

.link-arrow .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.25s var(--ease);
}

a:hover .link-arrow .icon,
.link-arrow:hover .icon { transform: translateX(4px); }

.icon {
	width: 18px;
	height: 18px;
	flex: none;
}

/* Circular control, the pill compressed — carousel and lightbox arrows. */
.circle-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1.5px solid var(--color-corten);
	border-radius: var(--radius-full);
	color: var(--color-corten);
	font-family: var(--font-display);
}

/* -------------------------------------------------------------- site head */

.site-head {
	position: fixed;
	inset: 0 0 auto;
	z-index: 90;
	padding: var(--space-24) 0;
	color: var(--color-sandstone);
	transition: background-color 0.3s var(--ease), padding 0.3s var(--ease);
}

.site-head__inner {
	width: min(100% - 2 * var(--space-32), var(--wrap));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-20);
}

.site-head__menu { justify-self: start; }
.site-head__book { justify-self: end; }

.site-head__logo { justify-self: center; }

.site-head.is-stuck {
	background: var(--color-corten);
	padding: var(--space-12) 0;
}

.duende-logo {
	margin: 0;
	line-height: 0;
}

.duende-logo__img { width: auto; }

.site-head__logo .duende-logo__img {
	height: 36px;
	transition: height 0.3s var(--ease);
}

.site-head.is-stuck .site-head__logo .duende-logo__img { height: 29px; }

@media (max-width: 640px) {
	.site-head__book { display: none; }
}

/* The two-bar mark that opens and closes the panel. */
.burger__bars {
	position: relative;
	width: 20px;
	height: 11px;
	display: block;
}

.burger__bars i {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.3s var(--ease);
}

.burger__bars i:first-child { top: 1px; }
.burger__bars i:last-child { bottom: 1px; }

.burger__bars.is-open i:first-child { transform: translateY(4px) rotate(45deg); }
.burger__bars.is-open i:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ----------------------------------------------------- hamburger overlay */

.site-nav {
	position: fixed;
	inset: 0;
	z-index: 120;
}

.site-nav[hidden] { display: none; }

.site-nav__scrim {
	position: absolute;
	inset: 0;
	background: rgba(62, 61, 58, 0.5);
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}

/* A full-bleed Corten field, the same surface as the hero. */
.site-nav__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--color-corten);
	color: var(--color-sandstone);
	overflow-y: auto;
	opacity: 0;
	transition: opacity 0.35s var(--ease);
}

.site-nav.is-open .site-nav__scrim { opacity: 1; }
.site-nav.is-open .site-nav__panel { opacity: 1; }

.site-nav__bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
	width: min(100% - 2 * var(--space-32), var(--wrap));
	margin-inline: auto;
	padding-block: var(--space-24);
}

.site-nav__logo .duende-logo__img { height: 36px; }

.site-nav__body {
	flex: 1;
	display: grid;
	gap: var(--space-56);
	align-content: center;
	width: min(100% - 2 * var(--space-32), var(--wrap));
	margin-inline: auto;
	padding-block: var(--space-40) var(--space-88);
}

@media (min-width: 900px) {
	.site-nav__body {
		grid-template-columns: 1.5fr 1fr;
		gap: var(--space-128);
	}
}

.site-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list li + li { border-top: 1px solid rgba(248, 244, 233, 0.28); }

.site-nav__list a {
	display: block;
	padding-block: clamp(8px, 1.4vw, 14px);
	font-family: var(--font-display);
	font-size: clamp(0.875rem, 2.4vw, 1.575rem);
	font-weight: var(--weight-semibold);
	line-height: 1.1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-sandstone);
	text-decoration: none;
	transition: opacity 0.25s var(--ease);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { opacity: 0.62; }

.site-nav__list .sub-menu {
	margin: 0 0 var(--space-16);
	padding: 0 0 0 var(--space-20);
	list-style: none;
}

.site-nav__list .sub-menu a {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: var(--weight-regular);
	letter-spacing: -0.025em;
	text-transform: none;
	padding-block: var(--space-4);
}

.site-nav__aside {
	display: grid;
	gap: var(--space-40);
	align-content: start;
	font-size: 15px;
	color: rgba(248, 244, 233, 0.82);
}

.site-nav .eyebrow {
	margin-bottom: var(--space-16);
	font-size: 12px;
	color: var(--color-sandstone);
}

.site-nav__address {
	margin: 0 0 var(--space-12);
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-sandstone);
}

.site-nav__aside .link-arrow { color: var(--color-sandstone); }

/* --------------------------------------------------------------- social */

.social {
	display: flex;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid currentColor;
	border-radius: var(--radius-full);
	color: inherit;
	transition: opacity 0.25s var(--ease);
}

.social a:hover { opacity: 0.62; }

.site-nav .social a { color: var(--color-sandstone); }

/* ------------------------------------------------------------------ hero */

/* The reference floods the hero with a flat Corten field. Duende's brief
   calls for video, so the field survives as a Corten wash over the footage —
   the screen is still one terracotta surface, it just moves. */
/* Content sits low rather than dead centre: with the tint gone, the only
   thing carrying the tagline is the gradient at the foot of the frame. */
.hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: end;
	justify-items: center;
	overflow: hidden;
	background: var(--color-corten);
	color: var(--color-sandstone);
}

.hero__media {
	position: absolute;
	inset: 0;
}

.hero--still .hero__still,
.hero__video,
.hero__still {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The footage runs in its own colour — no tint. All that is left is a soft
   neutral gradient at the very top and bottom, carrying the white header
   type and the tagline; without it they vanish over a pale frame. */
.hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, calc(var(--hero-overlay) * 0.85)) 0%,
		rgba(0, 0, 0, 0) 26%,
		rgba(0, 0, 0, 0) 46%,
		rgba(0, 0, 0, calc(var(--hero-overlay) * 1.5)) 100%
	);
}

/* Tagline hard left, score badge hard right, both sitting on the foot of
   the frame with the scroll cue centred between them. */
.hero__content {
	position: relative;
	z-index: 2;
	width: min(100% - 2 * var(--space-32), var(--wrap));
	margin-inline: auto;
	display: grid;
	gap: var(--space-32);
	align-items: end;
	padding: 128px 0 calc(var(--bar-height) + var(--space-40));
}

@media (min-width: 900px) {
	.hero__content {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* Stacked, the two centre rather than hugging the left edge. */
@media (max-width: 899px) {
	.hero__content {
		justify-items: center;
		text-align: center;
	}

	.hero__tagline { max-width: 20ch; }
}

.hero__kicker {
	margin: 0;
	font-size: 12px;
	color: var(--color-sandstone);
}

.hero__logo { margin: 0 auto; }

.hero__logo .duende-logo__img {
	width: auto;
	height: min(42svh, 27vw);
	max-width: 100%;
	margin-inline: auto;
}

@media (max-width: 720px) {
	.hero__logo .duende-logo__img { height: min(34svh, 56vw); }
}

.hero__tagline {
	margin: 0;
	max-width: none;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 3.4vw, 2.5rem);
	font-weight: var(--weight-semibold);
	line-height: 1.15;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-sandstone);
}

.hero__tagline-line {
	display: block;
	white-space: nowrap;
}

.hero__scroll {
	position: absolute;
	bottom: calc(var(--bar-height) + var(--space-8));
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: var(--space-8);
	color: var(--color-sandstone);
	text-decoration: none;
}

.hero__scroll-label {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

/* Below 900px the tagline and badge stack into the space the scroll cue
   occupies, and it would sit on top of the badge. It is decorative, so it
   goes rather than fights for room. */
@media (max-width: 899px) {
	.hero__scroll { display: none; }
}

.hero__scroll-line {
	width: 1px;
	height: 36px;
	background: currentColor;
	opacity: 0.6;
	animation: duende-drop 2.4s var(--ease) infinite;
}

@keyframes duende-drop {
	0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.35; }
	50% { transform: scaleY(1); transform-origin: top; opacity: 0.85; }
}

/* ----------------------------------------------------------------- intro */

/* A full Corten field carrying the opening statement in Sandstone. */
.intro {
	background: var(--color-corten);
}

.intro__inner {
	text-align: center;
	max-width: 860px;
}

.intro .eyebrow { color: var(--color-sandstone); }

.intro .btn {
	border-color: var(--color-sandstone);
	color: var(--color-sandstone);
}

/* Sentence case and a wider measure: this is a paragraph of real
   information, not a display headline, so it drops the caps and the
   0.10em tracking that would make it a slog to read. */
.intro__title {
	max-width: 46ch;
	margin-inline: auto;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 2.1vw, 1.5rem);
	font-weight: var(--weight-regular);
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: var(--color-sandstone);
}

.intro__title p { margin: 0 0 var(--space-24); }
.intro__title p:last-child { margin-bottom: 0; }

.intro__title em {
	font-style: italic;
	letter-spacing: 0.06em;
}

.intro__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-20);
	margin-top: var(--space-48);
}

/* ------------------------------------------------------------- what's on */

.wo-grid {
	display: grid;
	gap: var(--space-32);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.wo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.wo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wo-events { margin-bottom: var(--section-gap); }

/* Flat card: 14px radius, a Driftwood hairline, and no lift whatsoever. */
.wo-card {
	background: var(--color-bone);
	border: 1px solid var(--color-driftwood);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.wo-card__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.wo-card__link:hover { opacity: 1; }

.wo-card__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-sandstone);
}

.wo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.4s var(--ease);
}

.wo-card:hover .wo-card__media img { opacity: 0.88; }

.wo-card__body {
	padding: var(--space-24);
	text-align: center;
}

.wo-card__when {
	margin: 0 0 var(--space-12);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--color-corten);
}

.wo-card__title {
	margin-bottom: var(--space-12);
	font-size: var(--text-heading-sm);
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wo-card__price {
	margin: 0 0 var(--space-16);
	font-size: 13px;
	text-transform: uppercase;
	color: var(--color-smoke);
}

.wo-card__text {
	margin: 0 0 var(--space-24);
	font-size: 15px;
	line-height: 1.55;
	color: var(--color-smoke);
}

/* The week reads as a list, so it is scannable at a glance. Hairlines only. */
.wo-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-driftwood);
}

.wo-list__item { border-bottom: 1px solid var(--color-driftwood); }

.wo-list__link {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"when arrow"
		"title arrow"
		"price arrow";
	gap: var(--space-4) var(--space-20);
	align-items: center;
	padding: var(--space-24) var(--space-8);
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s var(--ease);
}

.wo-list__link:hover { opacity: 0.62; }

.wo-list__when {
	grid-area: when;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--color-corten);
}

.wo-list__title {
	grid-area: title;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 2.4vw, 1.5rem);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-corten);
}

.wo-list__price {
	grid-area: price;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--color-smoke);
}

.wo-list__arrow {
	grid-area: arrow;
	display: grid;
	place-items: center;
	color: var(--color-corten);
}

.wo-list__arrow .icon { width: 22px; height: 22px; }

@media (min-width: 800px) {
	.wo-list__link {
		grid-template-columns: 230px 1fr auto auto;
		grid-template-areas: "when title price arrow";
		gap: var(--space-24);
	}
	.wo-list__when { align-self: center; }
}

/* ------------------------------------------------------ what's on single */

/* Duende's What's On artwork is a portrait tile with type set into it, so the
   opener sets the whole tile beside the heading rather than cropping it into
   a banner. Photography keeps its natural edges — no radius. */
.wo-single__hero {
	padding-top: 128px;
	background: var(--color-corten);
	color: var(--color-sandstone);
}

.wo-single__hero-inner {
	display: grid;
	gap: var(--space-48);
	align-items: center;
	padding-block: var(--space-48) var(--space-64);
}

@media (min-width: 860px) {
	.wo-single__hero-inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--space-64);
	}
}

.wo-single__hero .eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	color: var(--color-sandstone);
}

.wo-single__title {
	margin-bottom: var(--space-20);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-sandstone);
}

.wo-single__price {
	margin: 0;
	font-size: 15px;
	text-transform: uppercase;
	color: var(--color-sandstone);
}

.wo-single__standfirst {
	margin: var(--space-24) 0 0;
	max-width: 44ch;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.6;
	color: rgba(248, 244, 233, 0.86);
}

.wo-single__poster {
	margin: 0;
	justify-self: center;
	max-width: 400px;
}

.wo-single__poster img { width: 100%; height: auto; }

.wo-single__body {
	display: grid;
	gap: var(--space-56);
	padding-block: var(--space-64) var(--section-gap);
}

@media (min-width: 900px) {
	.wo-single__body {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--space-88);
	}
}

.panel {
	padding: var(--space-24);
	background: var(--color-bone);
	border: 1px solid var(--color-driftwood);
	border-radius: var(--radius-card);
}

.panel + .panel { margin-top: var(--space-24); }

.panel--quiet {
	background: transparent;
	border-color: var(--color-driftwood);
}

.panel .eyebrow {
	margin-bottom: var(--space-16);
	font-size: 12px;
}

.panel__note {
	margin: var(--space-16) 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	color: var(--color-smoke);
}

/* -------------------------------------------------------------- page hero */

/* A flat Corten field. Photography, where a page has it, sits underneath at
   low opacity so the surface still reads as one terracotta plane. */
.page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding-top: 128px;
	background: var(--color-corten);
	color: var(--color-sandstone);
	overflow: hidden;
	text-align: center;
}

.page-hero__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	/* Lifted from 0.28 so roughly a fifth less Corten sits over the
	   photograph and the room underneath stays readable. */
	opacity: 0.45;
	mix-blend-mode: multiply;
}

.page-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: var(--space-56) var(--space-64);
	max-width: 860px;
	margin-inline: auto;
}

.page-hero .eyebrow {
	font-size: 12px;
	color: var(--color-sandstone);
}

.page-hero__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-sandstone);
}

.page-hero__intro {
	margin: var(--space-24) auto 0;
	max-width: 52ch;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.6;
	color: rgba(248, 244, 233, 0.86);
}

/* ----------------------------------------------------------- breadcrumbs */

.breadcrumbs {
	background: var(--color-sandstone);
	border-bottom: 1px solid var(--color-driftwood);
	font-size: 12px;
	text-transform: uppercase;
}

/* The <ol> carries .wrap, so it must not reset the auto margins that centre
   it, and the browser's own list indent has to go — between them the trail
   was starting 73px left of the Menu button instead of flush with it. */
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin-block: 0;
	padding-inline: 0;
	padding-block: var(--space-16);
	list-style: none;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: var(--space-8);
	color: var(--color-ash);
}

.breadcrumbs a {
	color: var(--color-smoke);
	text-decoration: none;
}

.breadcrumbs [aria-current] { color: var(--color-ash); }

/* ----------------------------------------------------------------- tiles */

.tiles__grid {
	display: grid;
	gap: var(--space-20);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* The same 14px card as What's On, so the two rows read as one system. */
.tile {
	position: relative;
	display: block;
	min-height: 400px;
	overflow: hidden;
	border-radius: var(--radius-card);
	color: var(--color-sandstone);
	text-decoration: none;
	background: var(--color-bordeaux);
	text-align: center;
}

.tile__media {
	position: absolute;
	inset: 0;
}

.tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.72;
	transition: opacity 0.5s var(--ease);
}

.tile:hover .tile__media img { opacity: 0.55; }

.tile__body {
	position: relative;
	z-index: 2;
	height: 100%;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding: var(--space-32);
}

.tile__title {
	margin-bottom: var(--space-16);
	font-size: var(--text-heading-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-sandstone);
}

.tile .link-arrow { color: var(--color-sandstone); }

/* ----------------------------------------------------------------- visit */

.visit__inner {
	display: grid;
	gap: var(--space-56);
	text-align: center;
}

@media (min-width: 800px) {
	.visit__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-88);
		text-align: left;
	}
}

.visit__mark { margin-bottom: var(--space-32); }
.visit__mark .duende-logo__img { height: 30px; }

@media (max-width: 799px) {
	.visit__mark .duende-logo__img { margin-inline: auto; }
}

/* An address, a postcode and a phone number are all data, so the whole block
   sits in one face at one size rather than mixing display caps, mono and
   body serif across four lines. */
.address {
	margin: 0 0 var(--space-24);
	font-family: var(--font-mono);
	font-size: 15px;
	font-style: normal;
	line-height: 2;
	letter-spacing: -0.025em;
	color: var(--color-espresso);
}

.address__line {
	display: block;
	color: inherit;
	text-decoration: none;
}

a.address__line:hover { color: var(--color-corten); }

/* ------------------------------------------------------------- visit page */

.visit-page {
	display: grid;
	gap: var(--space-56);
}

@media (min-width: 860px) {
	.visit-page {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-88);
	}
}

.visit-page__col > .eyebrow { margin-bottom: var(--space-24); }

.visit-page__notes { margin-top: var(--space-32); }

.visit-page__directions { margin: var(--space-24) 0 0; }

/* A tinted map: the filter chain pulls Google's own colours into the
   palette, which needs no API key and no Cloud project behind it. */
.map {
	width: 100%;
	border: 1px solid var(--color-driftwood);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--color-sandstone);
}

.map__frame {
	display: block;
	width: 100%;
	height: var(--map-height, 420px);
	border: 0;
	/* Sepia lands around 40deg of hue; Corten sits near 13deg, so the map is
	   pushed back by roughly that much and saturated to match. */
	filter: grayscale(1) sepia(1) saturate(2.4) hue-rotate(-27deg) contrast(0.96) brightness(0.96);
}

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

.hours__list { margin: 0; }

.hours__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-16);
	padding-block: var(--space-8);
	border-bottom: 1px solid var(--color-driftwood);
	font-size: 13px;
	text-transform: uppercase;
}

.hours__row dd { margin: 0; }

.hours__row.is-closed { color: var(--color-ash); }

/* Ash is a Sandstone-canvas neutral; on the Corten field and in the footer
   it drops below readable contrast, so the muted registers become Sandstone
   at reduced alpha instead. */
.site-nav .hours__row,
.site-foot .hours__row {
	border-color: rgba(248, 244, 233, 0.24);
}

.site-nav .hours__row.is-closed,
.site-foot .hours__row.is-closed { color: rgba(248, 244, 233, 0.6); }

.site-nav .hours__note,
.site-foot .hours__note { color: rgba(248, 244, 233, 0.62); }

.hours__note {
	margin: var(--space-16) 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	color: var(--color-ash);
}

/* ----------------------------------------------------- embeds & the modal */

.embed {
	position: relative;
	width: 100%;
	background: var(--color-bone);
	border: 1px solid var(--color-driftwood);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.embed__frame {
	display: block;
	width: 100%;
	height: var(--embed-height, 900px);
	border: 0;
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}

.embed.is-loaded .embed__frame { opacity: 1; }

.embed__loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--space-16);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--color-ash);
}

.embed.is-loaded .embed__loading { display: none; }

.embed__spinner {
	width: 28px;
	height: 28px;
	border: 1.5px solid var(--color-driftwood);
	border-top-color: var(--color-corten);
	border-radius: var(--radius-full);
	animation: duende-spin 0.9s linear infinite;
}

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

.embed__fallback {
	margin: 0;
	padding: var(--space-12) var(--space-24);
	border-top: 1px solid var(--color-driftwood);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	text-align: center;
}

.modal {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: grid;
	place-items: center;
	padding: var(--space-16);
}

.modal[hidden] { display: none; }

.modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(62, 61, 58, 0.82);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.modal.is-open .modal__scrim { opacity: 1; }

.modal__dialog {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: min(100%, 980px);
	height: min(92svh, 1000px);
	background: var(--color-sandstone);
	border-radius: var(--radius-card);
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.modal.is-open .modal__dialog { opacity: 1; }

.modal__bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding: var(--space-16) var(--space-24);
	background: var(--color-corten);
	color: var(--color-sandstone);
}

.modal__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: var(--weight-regular);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-sandstone);
}

.modal__close {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1.5px solid var(--color-sandstone);
	border-radius: var(--radius-full);
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	transition: opacity 0.25s var(--ease);
}

.modal__close:hover { opacity: 0.62; }

.modal__body {
	position: relative;
	flex: 1;
	min-height: 0;
}

.modal__frame {
	width: 100%;
	height: 100%;
	border: 0;
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}

.modal.is-loaded .modal__frame { opacity: 1; }

.modal__loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.modal.is-loaded .modal__loading { display: none; }

.modal__fallback {
	flex: none;
	margin: 0;
	padding: var(--space-12);
	border-top: 1px solid var(--color-driftwood);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	text-align: center;
}

/* ------------------------------------------------------------------- pdf */

.pdf {
	border: 1px solid var(--color-driftwood);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--color-bone);
}

.pdf__object {
	display: block;
	width: 100%;
	height: var(--pdf-height, 1100px);
	border: 0;
}

.pdf__fallback {
	display: grid;
	place-items: center;
	height: 100%;
	padding: var(--space-48) var(--space-24);
	text-align: center;
	color: var(--color-smoke);
}

.pdf__actions {
	margin: 0;
	padding: var(--space-24);
	border-top: 1px solid var(--color-driftwood);
	text-align: center;
}

/* An inline PDF is unusable on a phone; show only the download action. */
@media (max-width: 820px) {
	.pdf__object { height: 200px; }
}

/* --------------------------------------------------------------- gallery */

/* Photography sits with natural edges — no radius, ever. */
.gallery-grid {
	columns: var(--gallery-columns, 3);
	column-gap: var(--space-20);
}

@media (max-width: 900px) { .gallery-grid { columns: 2; } }
@media (max-width: 560px) { .gallery-grid { columns: 1; } }

.gallery-grid__item {
	margin: 0 0 var(--space-20);
	break-inside: avoid;
}

.gallery-grid__link { display: block; }

.gallery-grid__item img {
	width: 100%;
	transition: opacity 0.4s var(--ease);
}

.gallery-grid__item:hover img { opacity: 0.82; }

.gallery-grid figcaption {
	padding: var(--space-12) 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	color: var(--color-smoke);
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 160;
	display: grid;
	place-items: center;
	padding: var(--space-32);
	background: var(--color-sandstone);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.lightbox.is-open { opacity: 1; }

.lightbox img {
	max-width: 100%;
	max-height: 82svh;
	object-fit: contain;
}

.lightbox__caption {
	margin-top: var(--space-20);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	color: var(--color-smoke);
	text-align: center;
}

.lightbox__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1.5px solid var(--color-corten);
	border-radius: var(--radius-full);
	color: var(--color-corten);
	font-family: var(--font-display);
	font-size: 1.125rem;
	transition: opacity 0.25s var(--ease);
}

.lightbox__btn:hover { opacity: 0.62; }

.lightbox__btn--prev { left: var(--space-24); }
.lightbox__btn--next { right: var(--space-24); }

.lightbox__close {
	top: var(--space-24);
	right: var(--space-24);
	transform: none;
}

/* ---------------------------------------------------------------- split */

/* The two-column inner page: copy on the left, something to act on - a
   widget, a form, a list of menus - on the right. */
.split {
	display: grid;
	gap: var(--space-56);
	align-items: start;
}

@media (min-width: 900px) {
	.split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-88);
	}

	/* Bookings: a third for the copy, two thirds for the widget. */
	.split--thirds {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--space-64);
	}
}

.split__main { min-width: 0; }
.split__aside { min-width: 0; }

.split__aside > .eyebrow { margin-bottom: var(--space-24); }

/* Awards, and any other hairline list in a right column. */
.awards {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-driftwood);
}

.awards__item {
	position: relative;
	padding: var(--space-16) 0 var(--space-16) var(--space-32);
	border-bottom: 1px solid var(--color-driftwood);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--color-espresso);
}

.awards__item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: calc(var(--space-16) + 0.45em);
	width: 12px;
	height: 6px;
	border-left: 1.5px solid var(--color-corten);
	border-bottom: 1.5px solid var(--color-corten);
	transform: rotate(-45deg);
}

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

.awards__item a:hover { color: var(--color-corten); opacity: 1; }

/* The list of PDF menus on the Menu and Drinks pages. */
.menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-driftwood);
}

.menu-list__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "title arrow";
	align-items: center;
	column-gap: var(--space-16);
	padding: var(--space-20) var(--space-4);
	border-bottom: 1px solid var(--color-driftwood);
	color: var(--color-corten);
	text-decoration: none;
	transition: opacity 0.25s var(--ease);
}

.menu-list__link:hover { opacity: 0.62; }

.menu-list__title {
	grid-area: title;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: var(--weight-semibold);
	line-height: 1.25;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.menu-list__sub {
	grid-area: sub;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	color: var(--color-smoke);
}

.menu-list__link .icon {
	grid-area: arrow;
	width: 20px;
	height: 20px;
}

.menu-siblings { margin-top: var(--space-40); }

.menu-siblings__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.team-intro { margin-bottom: var(--space-56); }

/* Two columns of portraits, blurb beneath. Nothing on hover. */
.team {
	display: grid;
	gap: var(--space-56) var(--space-64);
}

@media (min-width: 760px) {
	.team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.person__photo {
	width: 100%;
	max-width: 500px;
	aspect-ratio: 15 / 17;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--color-driftwood);
}

.person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.person__body { margin-top: var(--space-24); }

.person__name {
	margin-bottom: var(--space-4);
	font-size: var(--text-heading-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.person__role {
	margin: 0 0 var(--space-16);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--color-smoke);
}

.person__blurb { font-size: 15px; }
.person__blurb > * + * { margin-top: var(--space-12); }

/* ---------------------------------------------------------------- forms */

.field { display: grid; gap: var(--space-8); }

.field label {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-corten);
}

.field__hint {
	margin-left: var(--space-8);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: -0.025em;
	text-transform: none;
	color: var(--color-smoke);
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: var(--space-12) var(--space-20);
	background: var(--color-bone);
	border: 1px solid var(--color-driftwood);
	border-radius: var(--radius-full);
	font-family: var(--font-mono);
	font-size: 15px;
	letter-spacing: -0.025em;
	color: var(--color-charcoal);
}

.field textarea {
	border-radius: var(--radius-card);
	resize: vertical;
}

.field input[type="file"] {
	padding: var(--space-8) var(--space-12);
	border-radius: var(--radius-card);
	font-size: 13px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--color-corten);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--color-ash); }

.field--hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.apply__form {
	display: grid;
	gap: var(--space-20);
	justify-items: start;
}

.apply__row {
	display: grid;
	gap: var(--space-20);
	width: 100%;
}

@media (min-width: 560px) {
	.apply__row--2 { grid-template-columns: 1fr 1fr; }
}

.apply__form .field { width: 100%; }

.apply__legal {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	color: var(--color-smoke);
}

.apply__errors {
	margin-bottom: var(--space-24);
	padding: var(--space-16) var(--space-20);
	border: 1px solid var(--color-corten);
	border-radius: var(--radius-card);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: -0.025em;
	color: var(--color-corten);
}

.apply__errors ul { margin: 0; padding-left: 1.1em; }

.apply__done {
	padding: var(--space-32);
	border: 1px solid var(--color-driftwood);
	border-radius: var(--radius-card);
	background: var(--color-bone);
}

.apply__done-title {
	margin: 0 0 var(--space-8);
	font-family: var(--font-display);
	font-size: var(--text-heading-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-corten);
}

.apply__done p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- reviews */

/* Sand — the one surface between Sandstone and Espresso, so the reviews read
   as a distinct band without introducing a new hue. */
.section--sand {
	background: #ded3bf;
	color: var(--color-espresso);
}

.reviews {
	overflow: hidden;
}

.reviews__head {
	display: grid;
	gap: var(--space-32);
	align-items: start;
	margin-bottom: var(--space-56);
}

@media (min-width: 800px) {
	.reviews__head {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}
}

.reviews__title {
	margin: 0;
	max-width: 12ch;
	color: var(--color-espresso);
}

/* The score badge. Hairline box, two registers of type, no fill. */
.score {
	display: block;
	width: min(100%, 340px);
	border: 1px solid rgba(62, 61, 58, 0.28);
	border-radius: var(--radius-card);
	background: rgba(248, 244, 233, 0.55);
	color: var(--color-espresso);
	text-decoration: none;
	transition: opacity 0.25s var(--ease);
}

a.score:hover { opacity: 0.78; }

.score__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding: var(--space-16) var(--space-20);
	border-bottom: 1px solid rgba(62, 61, 58, 0.2);
}

.score__source {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--color-smoke);
}

.score__body {
	display: flex;
	align-items: baseline;
	gap: var(--space-16);
	padding: var(--space-20);
}

.score__figure {
	margin: 0;
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: var(--weight-semibold);
	line-height: 1;
	color: var(--color-espresso);
}

.score__out {
	font-size: 1rem;
	vertical-align: super;
}

.score__count {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: -0.025em;
	color: var(--color-smoke);
}

/* On the hero the badge sits on footage, so it takes the dark treatment. */
.hero .score {
	justify-self: center;
	width: min(100%, 300px);
	background: rgba(23, 18, 15, 0.5);
	border-color: rgba(248, 244, 233, 0.4);
	color: var(--color-sandstone);
	backdrop-filter: blur(6px);
}

@media (min-width: 900px) {
	.hero .score { justify-self: end; }
}

.hero .score__top { border-bottom-color: rgba(248, 244, 233, 0.28); }
.hero .score__figure { color: var(--color-sandstone); }
.hero .score__source,
.hero .score__count { color: rgba(248, 244, 233, 0.78); }

.stars {
	display: inline-flex;
	gap: 2px;
	color: var(--color-corten);
}

.stars__star {
	width: 16px;
	height: 16px;
}

.stars__star.is-empty { opacity: 0.25; }

.hero .stars { color: var(--color-sandstone); }

/* A horizontal rail rather than a grid: reviews are uneven in length and a
   grid forces every card to the tallest one. */
.reviews__rail {
	--rail-inset: max(var(--space-32), calc((100vw - var(--wrap)) / 2));

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(78vw, 340px);
	gap: var(--space-20);
	padding-inline: var(--rail-inset);
	padding-bottom: var(--space-20);
	overflow-x: auto;
	/* The snapport has to be inset by the same amount as the padding, or the
	   first card snaps flush to the viewport edge and the rail starts out
	   already scrolled past its own left margin. */
	scroll-padding-inline: var(--rail-inset);
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(62, 61, 58, 0.35) transparent;
}

.reviews__rail::-webkit-scrollbar { height: 4px; }
.reviews__rail::-webkit-scrollbar-track { background: transparent; }

.reviews__rail::-webkit-scrollbar-thumb {
	background: rgba(62, 61, 58, 0.3);
	border-radius: var(--radius-full);
}

.review {
	margin: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(62, 61, 58, 0.24);
	border-radius: var(--radius-card);
	background: rgba(248, 244, 233, 0.4);
	scroll-snap-align: start;
}

.review__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding: var(--space-16) var(--space-20);
	border-bottom: 1px solid rgba(62, 61, 58, 0.18);
}

.review__source {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	color: var(--color-smoke);
}

.review__quote {
	flex: 1;
	margin: 0;
	padding: var(--space-24) var(--space-20);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--color-espresso);
}

.review__quote p { margin: 0 0 var(--space-16); }
.review__quote p:last-child { margin-bottom: 0; }

.review__foot {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: 0 var(--space-20) var(--space-24);
}

.review__avatar {
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: var(--radius-full);
	object-fit: cover;
}

.review__author {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: -0.025em;
}

.review__author-name {
	display: block;
	color: var(--color-espresso);
}

.review__when {
	display: block;
	color: var(--color-smoke);
}

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

.review__source a:hover { color: var(--color-corten); opacity: 1; }

.reviews__cta {
	margin: var(--space-40) 0 0;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: -0.025em;
	text-align: center;
	color: var(--color-smoke);
}

.reviews__cta a { color: var(--color-espresso); }

/* ---------------------------------------------------------- booking bar */

/* Sticky rather than fixed, and the last thing inside .site-content: it
   rides the bottom of the viewport all the way down, then comes to rest
   directly above the footer, the way the Monte venue page does it.
   No JavaScript involved.

   The one place the brief overrides the reference: the original nav-back.jpg
   wall texture, held under a Corten wash so it still belongs to the field.
   Clearing the image in the Customizer gives the flat Corten the reference
   would have asked for. */
.booking-bar {
	position: sticky;
	bottom: 0;
	z-index: 100;
	height: var(--bar-height);
}

.booking-bar__action {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 var(--space-24);
	background-color: var(--color-corten);
	background-image: var(--bar-image);
	background-size: cover;
	background-position: center;
	border: 0;
	color: var(--color-sandstone);
	text-decoration: none;
	text-align: center;
	transition: opacity 0.25s var(--ease);
}

/* Same two passes as the hero: recolour the wall texture to Corten, then
   lift it back to the field's own value. */
.booking-bar__action::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-corten);
	mix-blend-mode: color;
}

.booking-bar__action::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-corten);
	opacity: 0.55;
}

.booking-bar__action:hover { opacity: 0.88; }

.booking-bar__label {
	position: relative;
	z-index: 2;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: var(--weight-regular);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-sandstone);
}

/* --------------------------------------------------------------- footer */

.site-foot {
	background: var(--color-espresso);
	color: rgba(248, 244, 233, 0.72);
	font-size: 15px;
}

/* Two columns after the Monte venue footer: navigation left, mailing list
   right. No brand block — the wordmark already sits in the header. */
.site-foot__inner {
	display: grid;
	gap: var(--space-56);
	padding-block: var(--section-gap) var(--space-88);
}

@media (min-width: 860px) {
	.site-foot__inner {
		grid-template-columns: 1fr 1.2fr;
		gap: var(--space-128);
	}
}

.site-foot a {
	color: rgba(248, 244, 233, 0.72);
	text-decoration: none;
}

.site-foot__logo { margin-bottom: var(--space-24); }
.site-foot__logo .duende-logo__img { height: 34px; }

.site-foot__address,
.site-foot__contact {
	margin: 0 0 var(--space-20);
	font-size: 13px;
	font-style: normal;
	line-height: 1.9;
	text-transform: uppercase;
}

.site-foot__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-foot__list li + li { margin-top: var(--space-12); }

/* Two columns of four, so the navigation block stands the same height as
   the mailing list beside it. */
.site-foot__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: column;
	grid-template-rows: repeat(4, auto);
	gap: var(--space-16) var(--space-32);
}

.site-foot__list li + li { margin-top: 0; }

@media (max-width: 460px) {
	.site-foot__list {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		grid-template-rows: none;
	}
}

/* Title case here, not caps: the wide-tracked caps are the loud register,
   and the footer is the quiet one. */
.site-foot__list a {
	font-family: var(--font-display);
	font-size: var(--text-subheading);
	letter-spacing: 0.02em;
	color: var(--color-sandstone);
}

.site-foot__signup-heading {
	margin: 0 0 var(--space-32);
	max-width: 34ch;
	font-family: var(--font-display);
	font-size: var(--text-heading-sm);
	font-weight: var(--weight-regular);
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--color-sandstone);
}

/* The pill shape carries through to inputs. */
.signup {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-20);
	border: 1px solid rgba(248, 244, 233, 0.4);
	border-radius: var(--radius-full);
}

.signup:focus-within { border-color: var(--color-sandstone); }

.signup__input {
	flex: 1;
	min-width: 0;
	padding: var(--space-12) 0;
	background: transparent;
	border: 0;
	color: var(--color-sandstone);
	font-family: var(--font-mono);
	font-size: 15px;
	letter-spacing: -0.025em;
}

.signup__input::placeholder { color: var(--color-ash); }
.signup__input:focus { outline: none; }

.signup__submit {
	flex: none;
	padding: var(--space-12) var(--space-24);
	background: transparent;
	border: 1.5px solid rgba(248, 244, 233, 0.6);
	border-radius: var(--radius-full);
	color: var(--color-sandstone);
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: opacity 0.25s var(--ease);
}

.signup__submit:hover { opacity: 0.62; }

.signup__note {
	margin: var(--space-16) 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: -0.025em;
	color: var(--color-ash);
}

.site-foot .social a { color: rgba(248, 244, 233, 0.72); }

.site-foot__base {
	border-top: 1px solid rgba(248, 244, 233, 0.16);
	padding-block: var(--space-24);
}

.site-foot__base-inner {
	display: grid;
	gap: var(--space-16);
}

/* Centred, on one line across the full width, sitting above the rule. */
.site-foot__note {
	margin: 0;
	padding-bottom: var(--space-40);
	max-width: none;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: -0.025em;
	text-align: center;
	color: var(--color-ash);
}

.site-foot__licence {
	border-top: 1px solid rgba(248, 244, 233, 0.16);
	padding-block: var(--space-24);
}

.site-foot__licence-note {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1.7;
	letter-spacing: -0.025em;
	text-align: center;
	color: var(--color-ash);
}

.site-foot__licence-warning {
	display: block;
	margin-top: var(--space-8);
}

.site-foot__licence a {
	color: var(--color-sandstone);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-foot__licence a:hover {
	opacity: 0.72;
}

/* Copyright and policy left, build credit right. */
.site-foot__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12) var(--space-24);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	color: var(--color-ash);
}

.site-foot__legal p { margin: 0; }

.site-foot__legal-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-24);
}

.site-foot__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-foot__legal a { color: var(--color-ash); }
.site-foot__legal a:hover { color: var(--color-sandstone); opacity: 1; }

.site-foot__credit { margin-left: auto; }

@media (max-width: 640px) {
	.site-foot__legal { justify-content: center; text-align: center; }
	.site-foot__legal-left { justify-content: center; }
	.site-foot__credit { margin-left: 0; }
}

/* ---------------------------------------------------------------- forms */

.search-form {
	display: flex;
	width: min(100%, 460px);
	max-width: 460px;
	margin-inline: auto;
	gap: var(--space-12);
}

.search-form__input {
	min-width: 0;
	flex: 1;
	padding: var(--space-12) var(--space-24);
	background: var(--color-bone);
	border: 1px solid var(--color-driftwood);
	border-radius: var(--radius-full);
	font-family: var(--font-mono);
	font-size: 15px;
	letter-spacing: -0.025em;
	color: var(--color-charcoal);
}

.search-form__input::placeholder { color: var(--color-ash); }

.search-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-12) var(--space-32);
	background: transparent;
	border: 1.5px solid var(--color-corten);
	border-radius: var(--radius-full);
	color: var(--color-corten);
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.signup-card {
	display: grid;
	gap: var(--space-24);
	justify-items: start;
	padding: var(--space-40);
	background: var(--color-bone);
	border: 1px solid var(--color-driftwood);
	border-radius: var(--radius-card);
}

.signup-card__heading {
	margin: 0;
	max-width: 36ch;
	font-family: var(--font-display);
	font-size: var(--text-heading-sm);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-corten);
}

.notice-inline {
	padding: var(--space-24);
	border: 1px solid var(--color-driftwood);
	border-radius: var(--radius-card);
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: -0.025em;
	color: var(--color-smoke);
}

.notice-inline p { margin: 0; }

.four-oh-four + .prose--narrow {
	margin-inline: auto;
}

.four-oh-four {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-20);
	margin-bottom: var(--space-56);
}

.pagination {
	margin-top: var(--space-56);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-align: center;
}

.pagination .page-numbers {
	display: inline-block;
	padding: var(--space-8) var(--space-12);
	text-decoration: none;
}

.pagination .current { color: var(--color-corten); }

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ print */

@media print {
	.site-head,
	.site-nav,
	.booking-bar,
	.modal,
	.site-foot__signup { display: none !important; }

	body { padding-bottom: 0; background: #fff; }

	/* The pale wordmark is invisible on paper. */
	.duende-logo--light .duende-logo__img {
		content: url("../img/duende-wordmark-red.png");
	}

	.hero__logo .duende-logo__img {
		content: url("../img/duende-logo-red.png");
	}
}

/* Team portraits share the rounded image treatment used by the home links. */
.person__photo {
	margin-inline: auto;
	border-radius: var(--radius-card);
}

.person__body {
	width: 100%;
	max-width: 500px;
	margin-inline: auto;
}

.reviews__tools {
	display: grid;
	justify-items: end;
	gap: var(--space-12);
}

.reviews__nav {
	display: flex;
	gap: var(--space-8);
}

.reviews__nav-button {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid rgba(62, 61, 58, 0.35);
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--color-espresso);
	font: inherit;
	cursor: pointer;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.reviews__nav-button:hover:not(:disabled) {
	background: var(--color-espresso);
	color: var(--color-sandstone);
}

.reviews__nav-button:disabled {
	opacity: 0.3;
	cursor: default;
}

@media (max-width: 520px) {
	.search-form {
		flex-wrap: wrap;
	}

	.search-form__submit {
		margin-inline: auto;
	}
}


/* Client-supplied artwork pending - explicit placeholders, never silent gaps. */
.wo-placeholder,
.tile__media--placeholder {
	position: relative;
	display: grid;
	align-content: end;
	justify-items: start;
	padding: clamp(24px, 5vw, 48px);
	overflow: hidden;
	background:
		linear-gradient(135deg, transparent 48%, rgba(248, 244, 233, 0.18) 49%, rgba(248, 244, 233, 0.18) 51%, transparent 52%),
		var(--color-corten);
	color: var(--color-cream);
}

.wo-placeholder::before,
.tile__media--placeholder::before {
	content: "DUENDE";
	position: absolute;
	inset: 24px auto auto 24px;
	font-family: var(--font-display);
	font-size: clamp(32px, 6vw, 72px);
	letter-spacing: 0.08em;
	opacity: 0.18;
}

.wo-placeholder span,
.tile__media--placeholder span {
	position: relative;
	z-index: 1;
	max-width: 15ch;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}

.wo-single__poster.wo-placeholder {
	width: min(100%, 400px);
	aspect-ratio: 4 / 5;
}

.wo-single__menu-options {
	justify-self: center;
	width: min(100%, 400px);
	padding: clamp(24px, 4vw, 40px);
	border-block: 1px solid rgba(248, 244, 233, 0.48);
}

.wo-single__menu-options a {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(248, 244, 233, 0.2);
	color: var(--color-cream);
	font-family: var(--font-display);
	font-size: clamp(20px, 3vw, 30px);
	text-decoration: none;
}

.wo-single__menu-options a::after { content: "→"; }

.wo-placeholder__note {
	margin: 20px 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.5;
	text-transform: uppercase;
	color: rgba(248, 244, 233, 0.72);
}


/* Consistent animated oval portrait frames for every team member. */
.person__photo {
	border-radius: 50% / 47%;
	outline: 1px solid rgba(74, 66, 61, 0.42);
	outline-offset: 8px;
	transition: border-radius 700ms var(--ease);
}

.person:hover .person__photo {
	border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
}

@media (prefers-reduced-motion: reduce) {
	.person__photo { transition: none; }
}