/**
 * LocalBridge design system.
 *
 * Terracotta and clay: warm earth tones that read as home cooking rather than as a booking
 * platform. Nearly every site in this category (Traveling Spoon, Cookly, GetYourGuide,
 * Viator) is white-and-blue-grey minimal, so warmth is both on-brand and differentiating.
 *
 * Two rules run through the whole file:
 *
 *   1. A layout must know how many things it is laying out. A grid sized for six cards
 *      showing one card is the single fastest way to look unfinished.
 *   2. Photography carries the colour. The palette supports images; it never competes
 *      with them.
 *
 * Committed to light. There is no prefers-color-scheme block, because auto-inverting a warm
 * brand palette produces mud — this is a brand surface, not a tool.
 */

/* ========================================================================== fonts */

/*
 * Self-hosted, not loaded from Google's CDN. Serving fonts from fonts.gstatic.com sends
 * every European visitor's IP to Google before the consent banner has even rendered, which
 * is a live GDPR problem and sits badly next to a cookie banner promising otherwise.
 *
 * Both are variable fonts, so one file covers every weight. latin-ext only downloads if the
 * page actually contains those glyphs.
 */

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
		U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'InterVar';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'InterVar';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
		U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ========================================================================= tokens */

:root {
	/* Brand. Terracotta on cream measures 4.78:1 and white on terracotta 5.31:1 —
	   both clear WCAG AA, checked rather than eyeballed. */
	--lb-terracotta: #b4441f;
	--lb-terracotta-dark: #9a3818;
	--lb-clay: #7a2e12;
	--lb-cream: #f5ede3;
	--lb-shell: #fdfaf6;
	--lb-ink: #2c1f17;
	--lb-palm: #46693a;        /* darkened from #4f7942, which fell to 4.37:1 on cream */
	--lb-turmeric: #e8a33d;
	/* A lighter turmeric for text on the clay band. The base tone measures 4.37:1 there —
	   fine for a badge, short of AA for a link. This one is 5.48:1. */
	--lb-turmeric-light: #f2bc6e;

	/* Roles */
	--lb-bg: var(--lb-cream);
	--lb-surface: var(--lb-shell);
	--lb-text: var(--lb-ink);
	--lb-muted: #6b5a4e;
	--lb-accent: var(--lb-terracotta);
	--lb-accent-contrast: #fff9f3;
	--lb-line: rgba(44, 31, 23, 0.14);
	--lb-border: 1px solid var(--lb-line);

	/* Type */
	--lb-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--lb-font-body: 'InterVar', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Rhythm */
	--lb-gap: clamp(1.25rem, 3vw, 2.5rem);
	--lb-band: clamp(3rem, 7vw, 5.5rem);
	--lb-radius: 14px;
	--lb-radius-sm: 8px;
	--lb-shadow: 0 1px 2px rgba(44, 31, 23, 0.05), 0 8px 24px -12px rgba(44, 31, 23, 0.22);
	--lb-shadow-lift: 0 2px 4px rgba(44, 31, 23, 0.06), 0 18px 40px -18px rgba(44, 31, 23, 0.32);
}

/* ========================================================================== base */

/*
 * Smooth in-page scrolling for the hero's "See the dinners" jump. Set on :root rather than
 * html so it does not apply when someone has asked for reduced motion — a page that lurches
 * on its own is exactly what that setting exists to prevent.
 */
@media (prefers-reduced-motion: no-preference) {
	:root { scroll-behavior: smooth; }
}

/*
 * Leave room above a scroll target. Without this the section lands flush with the top of
 * the viewport and disappears behind a sticky header, so the visitor arrives looking at
 * the middle of the thing they jumped to.
 */
[id] { scroll-margin-top: 6rem; }

/*
 * Make the `hidden` attribute actually hide things.
 *
 * The browser's own rule is `[hidden] { display: none }`, which any author `display`
 * declaration outranks — and `.lb-card` sets `display: flex`. The result was that filtering
 * by region marked the other dinners hidden and they carried on being displayed anyway.
 * The carousel controls and the filter's empty state rely on the same attribute, so this is
 * one fix for three latent bugs.
 */
[hidden] { display: none !important; }

body {
	background: var(--lb-bg);
	color: var(--lb-text);
	font-family: var(--lb-font-body);
	font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
}

h1, h2, h3, .lb-display {
	font-family: var(--lb-font-display);
	/* Fraunces is variable: SOFT rounds the terminals and WONK allows its quirkier
	   letterforms. Both are what make it read warm instead of institutional. */
	font-variation-settings: 'SOFT' 30, 'WONK' 1;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--lb-ink);
	text-wrap: balance;
}

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

a:hover {
	color: var(--lb-clay);
}

::selection {
	background: var(--lb-turmeric);
	color: var(--lb-ink);
}

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

/* ==================================================================== typography */

.lb-answer {
	font-family: var(--lb-font-display);
	font-variation-settings: 'SOFT' 40, 'WONK' 0;
	font-size: clamp(1.15rem, 1.1rem + 0.8vw, 1.5rem);
	font-weight: 400;
	line-height: 1.5;
	max-width: 34ch;
	max-width: 60ch;
	margin-block: 0 var(--lb-gap);
	color: var(--lb-ink);
}

.lb-section {
	margin-block: clamp(2.5rem, 6vw, 4rem);
}

.lb-section__heading {
	font-size: clamp(1.4rem, 1.2rem + 1.1vw, 2rem);
	margin-block: 0 0.7em;
	position: relative;
	padding-block-start: 0.6em;
}

/* A short terracotta rule above every section heading. Cheap, and it gives a long page
   a repeating visual beat instead of an undifferentiated column of text. */
.lb-section__heading::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--lb-terracotta);
}

.lb-subheading {
	font-family: var(--lb-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--lb-muted);
	margin-block-end: 0.75em;
}

.lb-prose {
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.lb-prose > * + * {
	margin-block-start: 1.1em;
}

.lb-prose h3 {
	font-size: 1.25rem;
	margin-block-start: 1.8em;
}

/* ========================================================================== flow */

/*
 * Editorial layout for content pages.
 *
 * Prose is held to a readable measure, but images, galleries and grouped sections are
 * allowed the full width. Constraining everything to 68ch — which is what .lb-prose does —
 * turns a photo-led page into a narrow column with postage stamps down one side.
 */
.lb-flow > * {
	max-width: 68ch;
	margin-inline: auto;
	margin-block: 0 1.15em;
}

.lb-flow > figure,
.lb-flow > .wp-block-image,
.lb-flow > .wp-block-columns,
.lb-flow > .wp-block-group,
.lb-flow > .lb-steps,
.lb-flow > .alignwide,
.lb-flow > .lb-photo-grid,
.lb-flow > .lb-faq,
.lb-flow > .lb-section {
	max-width: none;
}

.lb-flow > h2 {
	margin-block: 2em 0.6em;
	font-size: clamp(1.4rem, 1.2rem + 1.1vw, 2rem);
	position: relative;
	padding-block-start: 0.6em;
}

.lb-flow > h2::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--lb-terracotta);
}

.lb-flow > h3 {
	margin-block: 1.6em 0.4em;
	font-size: 1.2rem;
}

.lb-flow p,
.lb-flow li {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.lb-flow > ul,
.lb-flow > ol {
	padding-inline-start: 1.3em;
}

.lb-flow > ul > li,
.lb-flow > ol > li {
	margin-block-end: 0.5em;
}

.lb-flow figure {
	margin: 2rem auto;
}

.lb-flow figure img {
	width: 100%;
	height: auto;
	border-radius: var(--lb-radius);
	display: block;
}

.lb-flow figcaption {
	font-size: 0.875rem;
	color: var(--lb-muted);
	margin-block-start: 0.6rem;
	text-align: center;
}

/* A callout for the things worth pulling out of the flow — hygiene, safety, the money. */
.lb-note {
	background: var(--lb-cream);
	border-inline-start: 4px solid var(--lb-terracotta);
	border-radius: var(--lb-radius-sm);
	padding: 1.25rem 1.5rem;
	margin-block: 2rem;
}

.lb-note > *:last-child { margin-block-end: 0; }

.lb-note h3 {
	margin-block: 0 0.4em;
	font-size: 1.1rem;
}

/* ========================================================================= bands */

/*
 * Full-bleed background, contained content. Alternating bands are what stop a long page
 * reading as one flat scroll — the texture does as much work as the colour.
 */
.lb-band {
	padding-block: var(--lb-band);
	margin-block: 0;
}

.lb-band--cream { background: var(--lb-cream); }
.lb-band--shell { background: var(--lb-shell); }

.lb-band--dark {
	background: var(--lb-clay);
	color: #f2e4d8;
}

.lb-band--dark h2,
.lb-band--dark h3 {
	color: var(--lb-accent-contrast);
}

.lb-band--dark .lb-section__heading::before { background: var(--lb-turmeric); }
.lb-band--dark a { color: var(--lb-turmeric-light); }

.lb-band__inner {
	width: min(100% - 2.5rem, 1180px);
	margin-inline: auto;
}

/* =================================================================== breadcrumbs */

.lb-breadcrumbs {
	font-size: 0.8125rem;
	color: var(--lb-muted);
	margin-block-end: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

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

.lb-breadcrumbs a:hover { text-decoration: underline; }

/* ================================================================= mosaic hero */

.lb-hero {
	margin-block-end: var(--lb-gap);
}

.lb-hero__title {
	font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
	line-height: 1.05;
	margin-block: 0 0.35em;
}

.lb-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	color: var(--lb-muted);
	font-size: 0.9375rem;
	margin-block-end: var(--lb-gap);
}

.lb-hero__destination {
	color: var(--lb-terracotta-dark);
	font-weight: 600;
	text-decoration: none;
}

/*
 * The mosaic. Explicit grid areas per image count rather than an auto-flowing grid,
 * because auto-flow with three images leaves a hole and with five overflows the row.
 * Every tile carries a fixed aspect-ratio so nothing can shift while images decode —
 * this block is the LCP element on most pages.
 */
.lb-mosaic {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(0, 1fr);
	aspect-ratio: 21 / 10;
	margin-block-end: var(--lb-gap);
}

.lb-mosaic--4 {
	grid-template-areas:
		"intro intro a b"
		"intro intro c d";
}

.lb-mosaic--3 {
	grid-template-areas:
		"intro intro a a"
		"intro intro b c";
}

.lb-mosaic--2 {
	grid-template-areas:
		"intro intro a a"
		"intro intro b b";
}

.lb-mosaic--1 {
	grid-template-areas:
		"intro intro a a"
		"intro intro a a";
}

.lb-mosaic__intro {
	grid-area: intro;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.9rem;
	padding: clamp(1.25rem, 2.5vw, 2.25rem);
	background: var(--lb-shell);
	border-radius: var(--lb-radius);
	border: var(--lb-border);
}

.lb-mosaic__intro .lb-hero__title { margin-block-end: 0.2em; }

.lb-mosaic__tile {
	position: relative;
	overflow: hidden;
	border-radius: var(--lb-radius);
	background: var(--lb-cream);
	margin: 0;
}

.lb-mosaic__tile:nth-of-type(1) { grid-area: a; }
.lb-mosaic__tile:nth-of-type(2) { grid-area: b; }
.lb-mosaic__tile:nth-of-type(3) { grid-area: c; }
.lb-mosaic__tile:nth-of-type(4) { grid-area: d; }

.lb-mosaic__tile img,
.lb-mosaic__tile video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/*
	 * Crop from slightly above centre. These are phone photos and most of them are
	 * portrait — 22 of the 28 from the first three dinners — so a square tile throws away
	 * a third of the frame. A dead-centre crop takes it off the top, which is exactly
	 * where the faces are. Biasing to 38% keeps heads in and loses floor instead.
	 */
	object-position: center 38%;
}

.lb-mosaic__caption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 1.6rem 0.9rem 0.7rem;
	background: linear-gradient(to top, rgba(44, 31, 23, 0.78), transparent);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Stack on narrow screens: the four-column mosaic becomes an intro block with a
   two-column strip of images beneath it. */
@media (max-width: 52rem) {
	.lb-mosaic {
		aspect-ratio: auto;
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"intro intro"
			"a b"
			"c d";
	}

	.lb-mosaic--3 { grid-template-areas: "intro intro" "a a" "b c"; }
	.lb-mosaic--2 { grid-template-areas: "intro intro" "a b"; }
	.lb-mosaic--1 { grid-template-areas: "intro intro" "a a"; }

	.lb-mosaic__tile { aspect-ratio: 4 / 3; }
	.lb-mosaic--1 .lb-mosaic__tile { aspect-ratio: 16 / 9; }
}

/* No images at all. Rather than an empty box, a typographic panel on the brand colour —
   deliberate-looking, and it stops a fresh install from looking broken. */
.lb-hero--type {
	background: var(--lb-terracotta);
	color: var(--lb-accent-contrast);
	border-radius: var(--lb-radius);
	padding: clamp(2rem, 6vw, 4.5rem);
	margin-block-end: var(--lb-gap);
}

.lb-hero--type .lb-hero__title,
.lb-hero--type .lb-answer { color: var(--lb-accent-contrast); }
.lb-hero--type .lb-hero__meta { color: rgba(255, 249, 243, 0.85); }
.lb-hero--type .lb-hero__destination { color: var(--lb-turmeric); }

/* ======================================================================== layout */

.lb-layout {
	display: grid;
	gap: var(--lb-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
	.lb-layout {
		grid-template-columns: minmax(0, 1fr) 23rem;
		align-items: start;
	}

	/*
	 * The booking panel used to be sticky. It cannot be any more.
	 *
	 * Sticky only works while the element is shorter than the viewport. Once the panel
	 * contained a full Bókun availability calendar it became taller than most screens, and a
	 * sticky element taller than the viewport can never be scrolled to its end: the top stays
	 * pinned, the bottom hangs below the fold, and the Book button is unreachable no matter
	 * how far you scroll.
	 *
	 * Alternatives considered and rejected. A max-height with overflow-y on the panel keeps
	 * the sticky behaviour, but puts a second scrollbar inside the page and the calendar is an
	 * iframe, which swallows wheel events over most of its area, so the inner scroll is hard
	 * to reach precisely where you need it. Sticking to `bottom` instead of `top` makes the
	 * button reachable but scrolls the price out of view. Normal flow is the only option that
	 * is correct at every viewport height.
	 */
	.lb-layout__aside {
		align-self: start;
	}
}

.lb-booking-inline--desktop { display: none; }

@media (min-width: 62rem) {
	.lb-booking-inline--mobile { display: none; }
	.lb-booking-inline--desktop { display: block; }
}

/* ================================================================== key details */

.lb-key-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1.1rem 1.5rem;
	padding: 1.4rem 1.5rem;
	margin-block: 0 var(--lb-gap);
	background: var(--lb-shell);
	border: var(--lb-border);
	border-radius: var(--lb-radius);
	box-shadow: var(--lb-shadow);
}

.lb-key-details__item dt {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--lb-terracotta-dark);
	margin-block-end: 0.25em;
}

.lb-key-details__item dd {
	margin: 0;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.35;
}

/* ========================================================================= lists */

.lb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.lb-list li {
	padding-inline-start: 1.7em;
	position: relative;
	line-height: 1.55;
}

.lb-list li::before {
	content: "•";
	position: absolute;
	inset-inline-start: 0.3em;
	color: var(--lb-muted);
}

.lb-list--check li::before {
	content: "✓";
	inset-inline-start: 0;
	color: var(--lb-palm);
	font-weight: 700;
}

.lb-list--cross li::before {
	content: "✕";
	inset-inline-start: 0;
	color: var(--lb-muted);
}

/*
 * Two columns when there are two, one readable measure when there is one. auto-fit on its
 * own would stretch a lone column the full width of the page and give it a 120-character
 * line length.
 */
.lb-columns {
	display: grid;
	gap: var(--lb-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.lb-columns:has(> .lb-columns__col:only-child) {
	grid-template-columns: minmax(0, 34rem);
}

.lb-columns--wrap { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.lb-definitions {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.6rem 1.75rem;
	margin: 0;
	max-width: 46rem;
}

.lb-definitions dt {
	font-weight: 700;
	color: var(--lb-terracotta-dark);
	font-size: 0.9375rem;
}

.lb-definitions dd { margin: 0; }

@media (max-width: 32rem) {
	.lb-definitions { grid-template-columns: 1fr; gap: 0.15rem; }
	.lb-definitions dd { margin-block-end: 0.9rem; }
}

/* ======================================================================= booking */

.lb-booking {
	border: var(--lb-border);
	border-radius: var(--lb-radius);
	padding: 1.6rem;
	background: var(--lb-shell);
	box-shadow: var(--lb-shadow);
	/* A terracotta cap so the booking panel reads as the primary action on the page
	   without needing to shout. */
	border-block-start: 4px solid var(--lb-terracotta);
}

.lb-booking__heading {
	font-size: 1.2rem;
	margin-block: 0 0.8rem;
}

.lb-booking__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-block: 0 0.5rem;
}

.lb-booking__price-label {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lb-muted);
}

.lb-booking__price-amount {
	font-family: var(--lb-font-display);
	font-size: clamp(1.7rem, 3vw, 2.1rem);
	font-weight: 700;
	line-height: 1;
	color: var(--lb-terracotta);
}

.lb-booking__price-note,
.lb-booking__cutoff,
.lb-booking__reassurance {
	font-size: 0.875rem;
	color: var(--lb-muted);
	line-height: 1.5;
}

.lb-booking__reassurance {
	margin-block: 0.5rem 1.1rem;
	padding-inline-start: 1.5em;
	position: relative;
}

.lb-booking__reassurance::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: var(--lb-palm);
	font-weight: 700;
}

.lb-booking__cta { width: 100%; }

.lb-booking__whatsapp {
	margin-block: 1rem 0;
	font-size: 0.9375rem;
	text-align: center;
}

.lb-booking__widget iframe,
.lb-booking__widget .bokunWidget { max-width: 100%; }

/*
 * Hold the space the calendar will occupy.
 *
 * The widget is a third-party iframe that arrives after first paint. Without a reserved
 * height, everything below it jumps down when it lands — which is the layout shift Core Web
 * Vitals measures, on the one element the page exists to show. The value is deliberately
 * approximate: it only has to be close enough that the jump is small.
 */
.lb-booking__widget {
	min-height: 26rem;
}

@media (max-width: 47.99em) {
	.lb-booking__widget { min-height: 30rem; }
}

/*
 * Bókun's own button, restyled.
 *
 * Their widget builder hard-codes a green button in an inline <style> block. We drop that
 * block and style the class instead, otherwise the single most important button on the site
 * is the only one that does not match it.
 */
.bokunButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.9em 1.6em;
	border: 2px solid var(--lb-terracotta);
	border-radius: 999px;
	background: var(--lb-terracotta);
	color: var(--lb-accent-contrast);
	font-family: var(--lb-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 6px 18px -8px rgba(180, 68, 31, 0.8);
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.bokunButton:hover:not([disabled]) {
	background: var(--lb-terracotta-dark);
	border-color: var(--lb-terracotta-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px rgba(122, 46, 18, 0.75);
}

/*
 * The disabled state is Bókun's loading state, not an error — it ships disabled and their
 * script enables it. So it reads as "waking up" rather than "unavailable": still clearly a
 * button, just not yet pressable.
 */
.bokunButton[disabled] {
	opacity: 0.65;
	cursor: progress;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.bokunButton,
	.bokunButton:hover:not([disabled]) {
		transition: none;
		transform: none;
	}
}

.lb-booking__enquiry-intro { font-size: 0.9375rem; }

.lb-booking__email {
	margin-block: 0.75rem 0;
	font-size: 0.9375rem;
	text-align: center;
}

/* ======================================================================= buttons */

.lb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.9em 1.6em;
	border: 2px solid var(--lb-terracotta);
	border-radius: 999px;
	font-family: var(--lb-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.lb-button--primary {
	background: var(--lb-terracotta);
	color: var(--lb-accent-contrast);
	box-shadow: 0 6px 18px -8px rgba(180, 68, 31, 0.8);
}

.lb-button--primary:hover {
	background: var(--lb-terracotta-dark);
	border-color: var(--lb-terracotta-dark);
	color: var(--lb-accent-contrast);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px rgba(122, 46, 18, 0.75);
}

.lb-button--ghost {
	background: transparent;
	color: var(--lb-terracotta-dark);
}

.lb-button--ghost:hover {
	background: rgba(180, 68, 31, 0.08);
	transform: translateY(-2px);
}

.lb-band--dark .lb-button--ghost {
	color: var(--lb-accent-contrast);
	border-color: var(--lb-turmeric-light);
}

.lb-band--dark .lb-button--ghost:hover {
	background: var(--lb-turmeric-light);
	color: var(--lb-ink);
}

/* ========================================================================= hosts */

.lb-hosts__inner {
	display: grid;
	gap: var(--lb-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
	.lb-hosts__inner {
		grid-template-columns: 17rem minmax(0, 1fr);
		align-items: start;
	}
}

.lb-hosts__photo { margin: 0; }

.lb-hosts__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 30%;
	border-radius: var(--lb-radius);
	box-shadow: var(--lb-shadow);
}

.lb-hosts__bio {
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 60ch;
}

.lb-hosts__bio > * + * { margin-block-start: 1.1em; }

/* Pull-quote first line — the host story is the differentiator, so it gets the treatment. */
.lb-hosts__bio > p:first-child {
	font-family: var(--lb-font-display);
	font-variation-settings: 'SOFT' 40, 'WONK' 0;
	font-size: 1.2em;
	line-height: 1.5;
	color: var(--lb-clay);
}

/* =========================================================================== FAQ */

.lb-faq__item {
	border-block-end: var(--lb-border);
	padding-block: 1.1rem;
}

.lb-faq__question {
	font-family: var(--lb-font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.lb-faq__question::-webkit-details-marker { display: none; }

.lb-faq__question::after {
	content: "+";
	font-family: var(--lb-font-body);
	color: var(--lb-terracotta);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	flex: none;
}

.lb-faq__item[open] .lb-faq__question::after { content: "–"; }

.lb-faq__answer {
	padding-block-start: 0.8rem;
	max-width: 62ch;
	color: var(--lb-muted);
	line-height: 1.65;
}

/* ================================================================ cards and grids */

/*
 * THE COUNT-AWARE RULE.
 *
 * The default here used to be `repeat(auto-fill, minmax(17rem, 1fr))`. auto-fill creates
 * empty tracks to fill the row, so a destination with one host family rendered a 17rem card
 * with two-thirds of the row dead. auto-fit collapses those tracks instead — and for one
 * and two items we do not use a card grid at all.
 */
.lb-grid {
	display: grid;
	gap: var(--lb-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Two items: wider cards, never three-up. */
.lb-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	max-width: 62rem;
}

/* One item: a single full-width row, styled as a featured card below. */
.lb-grid--1 { grid-template-columns: minmax(0, 1fr); }

/*
 * Filtered counts.
 *
 * The region filter hides cards, and a grid built for four showing one would leave exactly
 * the dead space the count-aware rule exists to prevent. `data-visible` is set by the
 * filter script and re-sizes the grid to what is actually on screen.
 *
 * Filtering to one card centres it at a sensible width rather than promoting it to the
 * full-width featured treatment — this is a catalogue being narrowed, not a spotlight.
 */
.lb-grid[data-visible="1"] {
	grid-template-columns: minmax(0, 26rem);
	justify-content: center;
}

.lb-grid[data-visible="2"] {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	max-width: 62rem;
	margin-inline: auto;
}

/* --------------------------------------------------------------- region filter */

.lb-filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem 0.9rem;
	margin-block: 0 var(--lb-gap);
}

.lb-filter__label {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--lb-muted);
}

.lb-filter__select {
	font-family: var(--lb-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--lb-ink);
	background: var(--lb-shell);
	border: 1px solid var(--lb-terracotta);
	border-radius: 999px;
	padding: 0.6em 2.6em 0.6em 1.2em;
	cursor: pointer;
	appearance: none;
	/* Inline SVG chevron so the control keeps its shape across browsers without an
	   extra request. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b4441f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.9rem;
}

.lb-filter__select:hover { border-color: var(--lb-clay); }

.lb-filter__count {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--lb-muted);
}

.lb-filter__empty {
	margin-block-start: var(--lb-gap);
	color: var(--lb-muted);
	font-size: 1.0625rem;
}

.lb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: var(--lb-border);
	border-radius: var(--lb-radius);
	overflow: hidden;
	background: var(--lb-shell);
	box-shadow: var(--lb-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.lb-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--lb-shadow-lift);
}

/* Still used by the journal cards, which have no buttons and stay a single link. */
.lb-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

/*
 * Stretched link.
 *
 * The title anchor's pseudo-element covers the whole card, so clicking anywhere opens the
 * dinner — but the anchor itself only wraps the title text, which keeps the accessible name
 * short and lets real buttons sit inside the card without nesting inside a link.
 */
.lb-card__stretch {
	color: inherit;
	text-decoration: none;
}

.lb-card__stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.lb-card__stretch:hover { color: var(--lb-terracotta-dark); }

/* Focus lands on the title text rather than outlining the entire card. */
.lb-card__stretch:focus-visible {
	outline: 3px solid var(--lb-terracotta);
	outline-offset: 3px;
	border-radius: 2px;
}

.lb-card__media {
	position: relative;
	overflow: hidden;
}

.lb-card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 38%;
	display: block;
	transition: transform 0.5s ease;
}

.lb-card:hover .lb-card__media img { transform: scale(1.045); }

.lb-card__price {
	position: absolute;
	inset-block-start: 0.85rem;
	inset-inline-end: 0.85rem;
	background: var(--lb-shell);
	color: var(--lb-terracotta-dark);
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0.35em 0.8em;
	border-radius: 999px;
	box-shadow: var(--lb-shadow);
}

.lb-card__body { padding: 1.15rem 1.25rem 1.4rem; }

.lb-card__title {
	font-size: 1.15rem;
	line-height: 1.25;
	margin-block: 0 0.4em;
}

.lb-card__meta,
.lb-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	font-size: 0.875rem;
	color: var(--lb-muted);
	margin-block: 0 0.6rem;
}

.lb-card__meta > span + span::before {
	content: "·";
	margin-inline-end: 0.6em;
	color: var(--lb-line);
}

.lb-card__destination {
	color: var(--lb-terracotta-dark);
	font-weight: 600;
}

.lb-card__summary {
	margin-block: 0 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/*
 * The actions sit above the stretched link, so they receive their own clicks rather than
 * the card's. `margin-top: auto` pins them to the bottom, which keeps the buttons on a
 * line across a row of cards with summaries of different lengths.
 */
.lb-card__actions {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	margin-block-start: auto;
	padding-block-start: 0.9rem;
}

.lb-card__more {
	color: var(--lb-terracotta-dark);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-block-end: 1px solid currentColor;
	padding-block-end: 1px;
}

.lb-card__more:hover {
	color: var(--lb-clay);
}

.lb-card__book {
	padding: 0.7em 1.3em;
	font-size: 0.9375rem;
	margin-inline-start: auto;
}

/* Narrow cards: stack the two actions full width rather than cramming them onto one line. */
@media (max-width: 26rem) {
	.lb-card__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.lb-card__more { text-align: center; border-block-end: 0; }
	.lb-card__book { margin-inline-start: 0; justify-content: center; }
}

/* ------------------------------------------------------------- featured (1 item) */

/*
 * The single-listing treatment. Image beside content rather than a lonely card in a wide
 * row — the same information, arranged so it reads as a deliberate spotlight.
 */
.lb-card--featured {
	border-radius: var(--lb-radius);
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.lb-card--featured {
		grid-template-columns: 1.35fr 1fr;
		align-items: stretch;
	}

	.lb-card--featured .lb-card__media { height: 100%; }

	.lb-card--featured .lb-card__media img {
		height: 100%;
		aspect-ratio: auto;
		min-height: 22rem;
	}

	.lb-card--featured .lb-card__body {
		padding: clamp(1.5rem, 3vw, 2.5rem);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

.lb-card--featured .lb-card__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }

.lb-card--featured .lb-card__summary {
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* The featured card is vertically centred rather than stretched, so the actions sit
   directly under the facts instead of being pushed to the bottom of a tall column. */
.lb-card--featured .lb-card__actions {
	margin-block-start: 1.2rem;
	padding-block-start: 0;
}

/* ------------------------------------------------------------- destination cards */

.lb-card--destination .lb-card__media img { aspect-ratio: 3 / 2; }

/* ================================================================= chips + badges */

.lb-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.lb-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	padding: 0.55em 1.15em;
	border: 1px solid var(--lb-terracotta);
	border-radius: 999px;
	text-decoration: none;
	color: var(--lb-terracotta-dark);
	font-weight: 600;
	background: var(--lb-shell);
	transition: background-color 0.16s ease, color 0.16s ease;
}

.lb-chip:hover {
	background: var(--lb-terracotta);
	color: var(--lb-accent-contrast);
}

.lb-chip--soon {
	border-color: var(--lb-turmeric);
	color: var(--lb-clay);
}

.lb-chip--soon:hover {
	background: var(--lb-turmeric);
	color: var(--lb-ink);
}

.lb-chip__note {
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0.85;
}

.lb-badge {
	display: inline-block;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-block: 0 0.9rem;
}

/* Ink on turmeric measures 7.4:1 — comfortably AA, and the warmest way to say
   "not yet" without it reading as an error state. */
.lb-badge--soon {
	background: var(--lb-turmeric);
	color: var(--lb-ink);
}

.lb-badge--live {
	background: var(--lb-palm);
	color: #fff;
}

/* =================================================================== coming soon */

.lb-waitlist {
	border: var(--lb-border);
	border-block-start: 4px solid var(--lb-turmeric);
	border-radius: var(--lb-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--lb-shell);
	box-shadow: var(--lb-shadow);
	max-width: 48rem;
}

.lb-waitlist p { line-height: 1.7; max-width: 60ch; }

.lb-waitlist__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-block: 1.6rem;
}

.lb-waitlist__form { margin-block-start: 1.5rem; }

/* ========================================================================= video */

.lb-video {
	margin-block: var(--lb-gap);
	border-radius: var(--lb-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--lb-ink);
	box-shadow: var(--lb-shadow);
}

.lb-video__play {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.lb-video__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease, filter 0.3s ease;
}

.lb-video__play:hover img {
	transform: scale(1.03);
	filter: brightness(1.06);
}

.lb-video__icon {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: 4.5rem;
	height: 4.5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--lb-terracotta);
	color: var(--lb-accent-contrast);
	font-size: 1.4rem;
	padding-inline-start: 0.18em;
	box-shadow: 0 10px 30px -8px rgba(44, 31, 23, 0.7);
}

.lb-video iframe,
.lb-video video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: cover;
}

/* =================================================================== photo grid */

/*
 * Everything beyond the four photos in the mosaic. Uses auto-fit for the same reason as the
 * card grid — a trailing row of one image stretches rather than leaving a gap.
 */
.lb-photo-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.lb-photo-grid__item {
	margin: 0;
	border-radius: var(--lb-radius-sm);
	overflow: hidden;
	background: var(--lb-cream);
}

.lb-photo-grid__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center 38%;
	display: block;
	transition: transform 0.5s ease;
}

.lb-photo-grid__item:hover img { transform: scale(1.05); }

/* A lone extra photo should not become a full-width band. */
.lb-photo-grid:has(> .lb-photo-grid__item:only-child) {
	grid-template-columns: minmax(0, 22rem);
}

/* =========================================================================== OTA */

.lb-ota__note {
	color: var(--lb-muted);
	max-width: 58ch;
	line-height: 1.65;
}

.lb-ota__list {
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.lb-ota__list a {
	display: inline-flex;
	align-items: center;
	padding: 0.6em 1.2em;
	border: var(--lb-border);
	border-radius: 999px;
	background: var(--lb-shell);
	text-decoration: none;
	color: var(--lb-ink);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.lb-ota__list a:hover {
	border-color: var(--lb-terracotta);
	transform: translateY(-2px);
}

/* ================================================================== photo band */

/*
 * A full-bleed photograph that stays put while the content scrolls over it.
 *
 * `background-attachment: fixed` is the whole effect and it has two well-known problems,
 * both handled below: iOS Safari either ignores it or scrolls it at a stutter, and it is
 * unpleasant for anyone sensitive to motion. Both fall back to a normal scrolling
 * background, which still looks like a photo band — just without the parallax.
 */
.lb-photo-band {
	position: relative;
	padding-block: clamp(4rem, 12vw, 8rem);
	padding-inline: 1.25rem;
	background-color: var(--lb-clay);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	text-align: center;
	isolation: isolate;
}

/*
 * The scrim. The reference site puts white text straight onto the photograph, which works
 * until the crop moves and something bright ends up behind a word — and on a responsive
 * page the crop moves constantly. Darkest at the centre where the text sits, lighter at the
 * edges so the food is still clearly food.
 */
.lb-photo-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse at center, rgba(44, 31, 23, 0.78) 0%, rgba(44, 31, 23, 0.55) 60%, rgba(44, 31, 23, 0.45) 100%);
}

/* No image: the band still works as a solid colour rather than collapsing. */
.lb-photo-band--plain::before {
	background: none;
}

.lb-photo-band__inner {
	max-width: 46rem;
	margin-inline: auto;
}

.lb-photo-band__eyebrow {
	font-family: var(--lb-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lb-turmeric-light);
	margin-block: 0 0.9rem;
}

.lb-photo-band__heading {
	font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem);
	line-height: 1.1;
	color: #fff;
	margin-block: 0 0.7em;
	/* A soft shadow rather than a heavier scrim — keeps the photograph bright while
	   guaranteeing the text holds up over a busy crop. */
	text-shadow: 0 2px 18px rgba(20, 12, 8, 0.55);
}

.lb-photo-band__text {
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
	line-height: 1.7;
	color: rgba(255, 249, 243, 0.94);
	margin-block: 0 2rem;
	text-shadow: 0 1px 12px rgba(20, 12, 8, 0.5);
}

/* Touch devices: iOS Safari renders fixed backgrounds badly, or not at all. */
@media (hover: none) {
	.lb-photo-band { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
	.lb-photo-band { background-attachment: scroll; }
}

/* ====================================================================== reviews */

.lb-stars {
	color: var(--lb-turmeric);
	letter-spacing: 0.08em;
	font-size: 1rem;
	line-height: 1;
	white-space: nowrap;
}

/* The Bókun / Viator rating badge. Named as theirs, and visually quieter than our own
   ratings — it is corroboration, not our claim. */
.lb-ota-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	color: var(--lb-muted);
	margin-block: 0 1rem;
}

.lb-ota-rating__value {
	font-weight: 700;
	color: var(--lb-ink);
}

.lb-reviews__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.lb-reviews__summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--lb-muted);
}

.lb-reviews__summary strong {
	font-size: 1.125rem;
	color: var(--lb-ink);
}

/*
 * The carousel itself is CSS. Scroll-snap gives a native, momentum-scrolling, swipeable
 * carousel that works with no JavaScript at all — the script only adds autoplay and arrows.
 */
.lb-reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(100%, 22rem), 1fr);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-block: 0.5rem 1.25rem;
	/* Room for the card shadow, which a plain overflow container clips. */
	padding-inline: 0.25rem;
	margin-inline: -0.25rem;
	scrollbar-width: thin;
}

.lb-reviews__track:focus-visible {
	outline: 3px solid var(--lb-terracotta);
	outline-offset: 4px;
	border-radius: var(--lb-radius);
}

.lb-review {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.5rem;
	background: var(--lb-shell);
	border: var(--lb-border);
	border-radius: var(--lb-radius);
	box-shadow: var(--lb-shadow);
}

.lb-review__text {
	margin: 0;
	font-family: var(--lb-font-display);
	font-variation-settings: 'SOFT' 40, 'WONK' 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--lb-ink);
}

.lb-review__text > * + * { margin-block-start: 0.75em; }
.lb-review__text p { margin: 0; }

.lb-review__meta {
	margin-block-start: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.75rem;
	font-size: 0.875rem;
	color: var(--lb-muted);
}

.lb-review__author {
	font-style: normal;
	font-weight: 700;
	color: var(--lb-ink);
}

.lb-review__dinner { color: var(--lb-terracotta-dark); }

.lb-review__source::before {
	content: "·";
	margin-inline-end: 0.5em;
	color: var(--lb-line);
}

.lb-reviews__controls {
	display: flex;
	gap: 0.5rem;
	margin-block-start: 0.5rem;
}

.lb-carousel-btn {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.9em;
	border: 1px solid var(--lb-terracotta);
	border-radius: 999px;
	background: var(--lb-shell);
	color: var(--lb-terracotta-dark);
	font-family: var(--lb-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.lb-carousel-btn:hover {
	background: var(--lb-terracotta);
	color: var(--lb-accent-contrast);
}

/* ------------------------------------------------------------------ review form */

.lb-review-form { max-width: 42rem; }

.lb-field { margin-block-end: 1.4rem; }

.lb-field label,
.lb-rating-field legend {
	display: block;
	font-weight: 600;
	margin-block-end: 0.4rem;
}

.lb-field input[type="text"],
.lb-field input[type="email"],
.lb-field select,
.lb-field textarea {
	width: 100%;
	padding: 0.75em 0.9em;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius-sm);
	background: var(--lb-shell);
	font-family: var(--lb-font-body);
	font-size: 1rem;
	color: var(--lb-ink);
}

.lb-field textarea { resize: vertical; }

.lb-field input:focus-visible,
.lb-field select:focus-visible,
.lb-field textarea:focus-visible {
	outline: 3px solid var(--lb-terracotta);
	outline-offset: 2px;
	border-color: var(--lb-terracotta);
}

.lb-field__hint {
	display: block;
	margin-block-start: 0.35rem;
	font-size: 0.875rem;
	color: var(--lb-muted);
}

.lb-review-form__row {
	display: grid;
	gap: 0 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/*
 * Radio buttons styled as stars. Keeps real radios underneath, so it works with a keyboard
 * and announces properly, which a JavaScript star widget does not.
 */
.lb-rating-field {
	border: 0;
	padding: 0;
	margin-block-end: 1.4rem;
}

.lb-rating-field__option {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-inline-end: 1rem;
	font-weight: 500;
	cursor: pointer;
}

.lb-rating-field__option input { accent-color: var(--lb-terracotta); }

.lb-review-form__error {
	padding: 0.9rem 1.1rem;
	border-radius: var(--lb-radius-sm);
	background: rgba(184, 33, 5, 0.08);
	border-inline-start: 4px solid #b82105;
	color: #7a1503;
}

/* The honeypot. Hidden from people without display:none, which some bots check for. */
.lb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==================================================================== front page */

.lb-steps {
	display: grid;
	gap: var(--lb-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	counter-reset: lb-step;
}

.lb-step {
	counter-increment: lb-step;
	padding-block-start: 3.4rem;
	position: relative;
}

.lb-step::before {
	content: counter(lb-step);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 2.6rem;
	height: 2.6rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--lb-terracotta);
	color: var(--lb-accent-contrast);
	font-family: var(--lb-font-display);
	font-weight: 700;
	font-size: 1.2rem;
}

.lb-step h3 {
	font-size: 1.15rem;
	margin-block: 0 0.4em;
}

.lb-step p {
	color: var(--lb-muted);
	line-height: 1.65;
	margin: 0;
}

.lb-band--dark .lb-step p { color: rgba(242, 228, 216, 0.88); }
.lb-band--dark .lb-step::before { background: var(--lb-turmeric); color: var(--lb-ink); }

.lb-lede {
	font-family: var(--lb-font-display);
	font-variation-settings: 'SOFT' 40, 'WONK' 0;
	font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.6rem);
	line-height: 1.5;
	max-width: 46ch;
	margin-block: 0 1.5rem;
}

.lb-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-block-start: 1.6rem;
}

/* ====================================================================== a11y/motion */

.lb-skip,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.lb-card:hover,
	.lb-button:hover,
	.lb-ota__list a:hover { transform: none; }

	.lb-card:hover .lb-card__media img,
	.lb-video__play:hover img { transform: none; }
}

/* --------------------------------------------------------------- contact form */

.lb-contact-form { max-width: 42rem; }

.lb-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	cursor: pointer;
}

.lb-checkbox input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin-block-start: 0.15rem;
	flex: none;
	accent-color: var(--lb-terracotta);
}