/* =============================================
   SpotrOS Merchant Theme — v2
   ============================================= */

:root {
	--spotros-font-display: "Cormorant Garamond", Georgia, serif;
	--spotros-font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
	--spotros-font-utility: var(--spotros-font-body);
	--spotros-background: #f0ebe4;
	--spotros-surface: rgba(251, 248, 244, 0.92);
	--spotros-surface-strong: #fbf8f4;
	--spotros-text: #2d261f;
	--spotros-muted: #6b6157;
	--spotros-border: rgba(45, 38, 31, 0.12);
	--spotros-accent: #8b6c4f;
	--spotros-accent-cool: #365ba8;
	--spotros-accent-contrast: #fbf8f4;
	--spotros-highlight: rgba(139, 108, 79, 0.12);
	--spotros-glow: radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 48%);
	--spotros-shell-width: 1240px;
	--spotros-radius-lg: 28px;
	--spotros-radius-md: 18px;
	--spotros-radius-sm: 12px;
	--spotros-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
	--spotros-shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.08);
	--spotros-shadow-hover: 0 20px 44px rgba(0, 0, 0, 0.18);
	--spotros-grid-gap: 1.5rem;
	--spotros-section-gap: 2.5rem;
	--spotros-header-offset: 5.25rem;
	--spotros-transition: 380ms cubic-bezier(0.23, 1, 0.32, 1);
	--spotros-transition-fast: 220ms cubic-bezier(0.23, 1, 0.32, 1);
	/* Typography scale */
	--spotros-type-display-xl: clamp(3.25rem, 7vw, 6rem);
	--spotros-type-display-l: clamp(2.25rem, 4vw, 3.5rem);
	--spotros-type-display-m: clamp(1.5rem, 2.2vw, 2rem);
	--spotros-type-body-l: 1.15rem;
	--spotros-type-body-m: 1rem;
	--spotros-type-eyebrow: 0.8125rem;
}

/* ---- Typography presets ---- */

/* Registered in inc/art-direction.php but previously missing here, so anything in
   the base layer using --spotros-font-display (the legal-page title, for one)
   fell through to the :root default instead of the merchant's own display face. */
.type-grotesque-bold-manrope {
	--spotros-font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
	--spotros-font-body: "Manrope", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

.type-georgia-serif-inter {
	--spotros-font-display: Georgia, "Times New Roman", serif;
	--spotros-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.type-editorial-serif-humanist-sans {
	--spotros-font-display: "Cormorant Garamond", Georgia, serif;
	--spotros-font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}

.type-display-sans-geometric {
	--spotros-font-display: "Syne", "Arial Black", sans-serif;
	--spotros-font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

.type-contrast-serif-refined-sans {
	--spotros-font-display: "Playfair Display", Georgia, serif;
	--spotros-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
}

.type-warm-serif-friendly-sans {
	--spotros-font-display: "Fraunces", Georgia, serif;
	--spotros-font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
}

.type-fashion-sans-neutral {
	--spotros-font-display: "Space Grotesk", "Arial Black", sans-serif;
	--spotros-font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

/* ---- Art direction palettes ---- */

.art-velvet-ember {
	--spotros-background: #0A1628;
	--spotros-surface: #0F1B2E;
	--spotros-surface-strong: #0F1B2E;
	--spotros-text: #FFFFFF;
	--spotros-text-body: #E5E7EB;
	--spotros-muted: #9CA3AF;
	--spotros-border: rgba(59, 130, 246, 0.1);
	--spotros-border-strong: rgba(59, 130, 246, 0.2);
	--spotros-border-emphasis: rgba(59, 130, 246, 0.3);
	--spotros-accent: #1E5BA8;          /* primary CTA fill */
	--spotros-accent-strong: #3B82F6;    /* hover, kicker, italic accent */
	--spotros-accent-cool: #3B82F6;      /* DO NOT diverge from accent-strong */
	--spotros-accent-contrast: #FFFFFF;
	--spotros-highlight: rgba(59, 130, 246, 0.1);
	--spotros-glow: radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 48%);
}

.art-market-sun {
	--spotros-background: #fff1da;
	--spotros-surface: rgba(255, 249, 240, 0.94);
	--spotros-surface-strong: #fffaf2;
	--spotros-text: #28180a;
	--spotros-muted: #6d5b4a;
	--spotros-border: rgba(40, 24, 10, 0.12);
	--spotros-accent: #d76317;
	--spotros-accent-cool: #d76317;
	--spotros-accent-contrast: #fffaf2;
	--spotros-highlight: rgba(242, 138, 30, 0.16);
	--spotros-glow: radial-gradient(circle at top left, rgba(242, 138, 30, 0.18), transparent 42%);
}

.art-coastal-ledger {
	--spotros-background: #eef2f1;
	--spotros-surface: rgba(250, 253, 252, 0.94);
	--spotros-surface-strong: #ffffff;
	--spotros-text: #1d2f35;
	--spotros-muted: #60757b;
	--spotros-border: rgba(29, 47, 53, 0.12);
	--spotros-accent: #235e6b;
	--spotros-accent-cool: #235e6b;
	--spotros-accent-contrast: #f7fbfc;
	--spotros-highlight: rgba(35, 94, 107, 0.14);
	--spotros-glow: radial-gradient(circle at top left, rgba(35, 94, 107, 0.12), transparent 46%);
}

.art-garden-smoke {
	--spotros-background: #ede7dd;
	--spotros-surface: rgba(248, 244, 238, 0.94);
	--spotros-surface-strong: #f9f5f0;
	--spotros-text: #2d241b;
	--spotros-muted: #6b5c4b;
	--spotros-border: rgba(45, 36, 27, 0.12);
	--spotros-accent: #586744;
	--spotros-accent-cool: #586744;
	--spotros-accent-contrast: #f9f5f0;
	--spotros-highlight: rgba(88, 103, 68, 0.15);
	--spotros-glow: radial-gradient(circle at top left, rgba(88, 103, 68, 0.14), transparent 48%);
}

.art-midnight-brass {
	--spotros-background: #090b11;
	--spotros-surface: rgba(18, 23, 34, 0.94);
	--spotros-surface-strong: #121722;
	--spotros-text: #eef1f7;
	--spotros-muted: #9ba4b8;
	--spotros-border: rgba(238, 241, 247, 0.1);
	--spotros-accent: #cf9a45;
	--spotros-accent-cool: #cf9a45;
	--spotros-accent-contrast: #090b11;
	--spotros-highlight: rgba(207, 154, 69, 0.14);
	--spotros-glow: radial-gradient(circle at top left, rgba(207, 154, 69, 0.16), transparent 46%);
}

.art-sunday-stone {
	--spotros-background: #ebe4d9;
	--spotros-surface: rgba(248, 242, 234, 0.96);
	--spotros-surface-strong: #f8f2ea;
	--spotros-text: #2a221b;
	--spotros-muted: #65584a;
	--spotros-border: rgba(42, 34, 27, 0.11);
	--spotros-accent: #8a6746;
	--spotros-accent-cool: #365ba8;
	--spotros-accent-contrast: #fbf8f4;
	--spotros-highlight: rgba(138, 103, 70, 0.12);
	--spotros-glow: radial-gradient(circle at top left, rgba(138, 103, 70, 0.12), transparent 48%);
}

/* ---- Reset & base ---- */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--spotros-background);
	color: var(--spotros-text);
	font-family: var(--spotros-font-body);
	font-size: 1rem;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	position: relative;
}

body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}

body::before {
	background:
		radial-gradient(circle at top left, color-mix(in srgb, var(--spotros-accent) 14%, transparent), transparent 34%),
		radial-gradient(circle at top right, color-mix(in srgb, var(--spotros-text) 8%, transparent), transparent 26%),
		linear-gradient(180deg, color-mix(in srgb, var(--spotros-surface-strong) 40%, transparent), transparent 28%);
	opacity: 0.95;
}

body::after {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 36px 36px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 75%);
	opacity: 0.35;
}

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

button, input, textarea, select { font: inherit; }

/* ---- Accessibility utilities ---- */

.spotros-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.spotros-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: var(--spotros-accent);
	color: var(--spotros-accent-contrast);
	font-family: var(--spotros-font-body);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.spotros-skip-link:focus,
.spotros-skip-link:focus-visible {
	left: 1rem;
	top: 1rem;
	outline: 2px solid var(--spotros-accent-contrast);
	outline-offset: 2px;
}

main:focus { outline: none; }

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

:focus-visible {
	outline: 2px solid var(--spotros-accent);
	outline-offset: 3px;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--spotros-font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

p, ul { margin: 0; padding: 0; }

/* ---- Layout ---- */

.spotros-site-shell {
	min-height: 100vh;
}

.spotros-shell {
	width: min(calc(100% - 2rem), var(--spotros-shell-width));
	margin: 0 auto;
}

.spotros-stack > * + * {
	margin-top: var(--spotros-section-gap);
}

.pace-tight { --spotros-section-gap: 1.5rem; }
.pace-balanced { --spotros-section-gap: 2.5rem; }
.pace-airy, .pace-warm { --spotros-section-gap: 3rem; }

/* ---- Header ---- */

.spotros-site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	padding: 0.85rem 0;
	border-bottom: none;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Non-home pages don't have the immersive hero; push their first section down so the
   absolutely positioned header doesn't crash into the content. */
.spotros-page-menu,
.spotros-page-about {
	padding-top: clamp(5rem, 8vw, 6.5rem);
}

.spotros-site-header-inner,
.spotros-site-footer-inner {
	display: flex;
	gap: 1rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.spotros-site-header-inner {
	padding: 0.85rem 1.1rem 0.85rem 1.35rem;
	border: 1px solid color-mix(in srgb, var(--spotros-border) 84%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--spotros-background) 74%, transparent);
	box-shadow: 0 22px 58px rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(22px) saturate(1.35);
	-webkit-backdrop-filter: blur(22px) saturate(1.35);
}

.spotros-brand-block {
	display: grid;
	gap: 0.15rem;
}

.spotros-brand-link {
	font-family: var(--spotros-font-display);
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: opacity var(--spotros-transition-fast);
}

.spotros-brand-link:hover { opacity: 0.8; }

/* Hide confusing eyebrow in header */
.spotros-site-header .spotros-eyebrow { display: none; }

.spotros-header-tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.7rem 0.85rem;
}

/* Mobile nav toggle — hidden by default. Revealed at narrow widths once the
   controlling JS has flagged itself ready (progressive enhancement). */
.spotros-nav-toggle {
	display: none;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--spotros-border) 84%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--spotros-surface-strong) 36%, transparent);
	color: inherit;
	font-family: var(--spotros-font-body);
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--spotros-transition-fast), border-color var(--spotros-transition-fast);
}

.spotros-nav-toggle:hover {
	background: var(--spotros-highlight);
	border-color: color-mix(in srgb, var(--spotros-accent) 40%, transparent);
}

.spotros-nav-toggle-bars {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	width: 1rem;
}

.spotros-nav-toggle-bars span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--spotros-transition-fast), opacity var(--spotros-transition-fast);
}

.spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-nav-toggle-bars span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-nav-toggle-bars span:nth-child(2) {
	opacity: 0;
}

.spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-nav-toggle-bars span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 1024px) {
	.spotros-site-header[data-nav-js="ready"] .spotros-nav-toggle {
		display: inline-flex;
	}

	/* Nav is hidden by default on mobile. */
	.spotros-site-header[data-nav-js="ready"] .spotros-nav {
		display: none;
	}

	/* Open state: full-viewport fixed overlay with opaque background.
	   Lives in the base layer so every art direction inherits the
	   overlay mechanics; art directions can override typography/colors.
	   Note: the header-inner pill has backdrop-filter, which in CSS
	   creates a containing block for fixed-position descendants — that
	   would trap this overlay inside the pill. We disable that filter
	   while the drawer is open; the pill sits behind the opaque overlay
	   so there's no visual regression. */
	.spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-site-header-inner {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-nav {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 40;
		background: var(--spotros-background);
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-nav-list {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
		padding: 5rem 2rem 4rem;
		margin: 0;
		width: 100%;
		max-width: 420px;
		text-align: center;
	}

	.spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-nav-link {
		font-size: 1.375rem;
		line-height: 1.2;
	}

	/* When open, lift the toggle above the overlay so it acts as the close button. */
	.spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-nav-toggle {
		position: fixed;
		top: 1.1rem;
		right: 1.1rem;
		z-index: 41;
	}
}

.spotros-header-meta,
.spotros-footer-status {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.83rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--spotros-muted);
}

.spotros-eyebrow {
	margin: 0;
	font-family: var(--spotros-font-utility);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--spotros-accent-cool);
}

.spotros-nav-list,
.spotros-list,
.spotros-menu-nav-list {
	list-style: none;
}

.spotros-nav-list,
.spotros-menu-nav-list {
	display: flex;
	gap: 0.85rem;
	flex-wrap: wrap;
	align-items: center;
}

.spotros-nav-link,
.spotros-menu-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0.2rem 0;
	border-radius: 0;
	border: none;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.94rem;
	letter-spacing: 0.01em;
	position: relative;
	transition: color var(--spotros-transition-fast), opacity var(--spotros-transition-fast);
}

.spotros-nav-link:hover,
.spotros-nav-link.is-current,
.spotros-nav-link:focus-visible,
.spotros-menu-nav a:hover,
.spotros-menu-nav a:focus-visible {
	background: none;
	color: var(--spotros-text);
	outline: none;
}

.spotros-nav-link::after,
.spotros-menu-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.2rem;
	height: 2px;
	border-radius: 999px;
	background: var(--spotros-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--spotros-transition-fast);
}

.spotros-nav-link:hover::after,
.spotros-nav-link.is-current::after,
.spotros-nav-link:focus-visible::after,
.spotros-menu-nav a:hover::after,
.spotros-menu-nav a:focus-visible::after,
.spotros-menu-nav a[aria-current="page"]::after {
	transform: scaleX(1);
}

.spotros-language-switcher {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	align-items: center;
}

.spotros-language-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--spotros-border) 80%, transparent);
	background: color-mix(in srgb, var(--spotros-surface-strong) 36%, transparent);
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: all var(--spotros-transition-fast);
}

.spotros-language-link:hover,
.spotros-language-link:focus-visible,
.spotros-language-link.is-current {
	background: var(--spotros-highlight);
	outline: none;
}

.spotros-header-cta {
	min-height: 2.75rem;
	padding-inline: 1.35rem;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

/* ---- Hero (true edge-to-edge Delilah pattern) ---- */

.spotros-hero {
	position: relative;
	padding: 0;
	margin: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 100vh;
	display: grid;
	align-items: end;
	overflow: hidden;
	isolation: isolate;
	background: #0f0a08;
}

.spotros-hero-shell {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-radius: 0;
	border: none;
	background: none;
	box-shadow: none;
	min-height: 100vh;
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0;
	margin: 0;
}

.spotros-hero-carousel {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.spotros-hero-slides {
	position: absolute;
	inset: 0;
}

.spotros-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1200ms cubic-bezier(0.23, 1, 0.32, 1);
	pointer-events: none;
}

.spotros-hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.spotros-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.015);
	transition: transform 14s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spotros-hero-slide.is-active .spotros-hero-image {
	transform: scale(1.08);
}

.spotros-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to top,
			rgba(15, 10, 8, 0.88) 0%,
			rgba(15, 10, 8, 0.72) 18%,
			rgba(15, 10, 8, 0.42) 32%,
			rgba(15, 10, 8, 0) 60%);
}

/* Prev/Next carousel nav buttons */
.spotros-hero-nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
	transform: translateY(-50%);
	border: 1px solid color-mix(in srgb, var(--spotros-accent) 55%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--spotros-background) 70%, transparent);
	color: var(--spotros-text);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity var(--spotros-transition-fast), transform var(--spotros-transition-fast), background var(--spotros-transition-fast);
}

.spotros-hero:hover .spotros-hero-nav,
.spotros-hero-nav:focus-visible {
	opacity: 1;
}

.spotros-hero-nav:hover,
.spotros-hero-nav:focus-visible {
	background: var(--spotros-accent);
	color: var(--spotros-accent-contrast);
	outline: none;
}

.spotros-hero-nav--prev { left: 1rem; }
.spotros-hero-nav--next { right: 1rem; }

/* Dot indicators */
.spotros-hero-dots {
	position: absolute;
	left: 50%;
	bottom: clamp(1rem, 2.2vw, 1.75rem);
	z-index: 3;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
}

.spotros-hero-dot {
	width: 0.65rem;
	height: 0.65rem;
	min-width: 12px;
	min-height: 12px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--spotros-accent) 60%, transparent);
	background: color-mix(in srgb, var(--spotros-background) 40%, transparent);
	cursor: pointer;
	transition: background var(--spotros-transition-fast), transform var(--spotros-transition-fast);
}

.spotros-hero-dot.is-active {
	background: var(--spotros-accent);
	transform: scale(1.25);
}

.spotros-hero-dot:focus-visible {
	outline: 2px solid var(--spotros-accent);
	outline-offset: 3px;
}

@media (max-width: 720px) {
	.spotros-hero-nav { opacity: 1; }
}

.spotros-hero-copy-panel {
	position: relative;
	z-index: 2;
	display: grid;
	align-content: end;
	gap: 1rem;
	padding: clamp(3rem, 6vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.spotros-hero-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.35rem;
	align-items: end;
	justify-items: start;
	text-align: left;
}

.spotros-hero-main {
	display: grid;
	gap: 1.1rem;
	max-width: min(56rem, 100%);
	justify-items: start;
}

.spotros-hero-eyebrow {
	color: var(--spotros-accent);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.spotros-hero-title {
	font-family: var(--spotros-font-display);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(3.5rem, 8vw, 6.5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--spotros-text);
	text-shadow: 0 14px 56px rgba(0, 0, 0, 0.55);
	margin: 0;
}

.spotros-hero-copy {
	max-width: 46ch;
	font-family: var(--spotros-font-body);
	font-size: 1.15rem;
	font-weight: 400;
	color: color-mix(in srgb, var(--spotros-text) 84%, transparent);
	line-height: 1.6;
	text-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
	margin: 0;
}

.spotros-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	padding-top: 0.5rem;
}

@media (max-width: 720px) {
	.spotros-hero-layout {
		justify-items: center;
		text-align: center;
	}

	.spotros-hero-main {
		justify-items: center;
	}

	.spotros-hero-actions {
		justify-content: center;
	}
}

.spotros-hero-highlight-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.8rem;
	list-style: none;
}

.spotros-hero-highlight-list li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0;
	border: none;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	font-size: 0.95rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--spotros-text) 84%, transparent);
}

.spotros-hero-highlight-list li::before {
	content: "";
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--spotros-accent-cool);
	box-shadow: none;
}

.spotros-hero-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.8rem;
	padding-top: 0.35rem;
}

.spotros-hero-fact {
	display: grid;
	gap: 0.25rem;
	padding: 0.95rem 1rem;
	border-radius: calc(var(--spotros-radius-sm) + 4px);
	border: 1px solid color-mix(in srgb, var(--spotros-border) 84%, transparent);
	background: color-mix(in srgb, var(--spotros-background) 74%, transparent);
	backdrop-filter: blur(16px) saturate(1.16);
	-webkit-backdrop-filter: blur(16px) saturate(1.16);
}

.spotros-hero-fact span {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--spotros-accent-cool);
}

.spotros-hero-fact strong {
	font-size: 1rem;
	line-height: 1.45;
	font-family: var(--spotros-font-body);
	font-weight: 600;
}

/* Hide the confusing meta pills in hero */
.spotros-hero-meta { display: none; }

.spotros-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 0.5rem;
}

.spotros-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.2rem;
	padding: 0.85rem 1.6rem;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--spotros-transition);
	position: relative;
	overflow: hidden;
}

.spotros-button::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	background: rgba(255, 255, 255, 0.1);
	transition: opacity var(--spotros-transition-fast);
}

.spotros-button:hover::after { opacity: 1; }

.spotros-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--spotros-shadow-hover);
}

.spotros-button:active {
	transform: translateY(0);
}

.spotros-button--primary {
	background: var(--spotros-accent);
	color: var(--spotros-accent-contrast);
}

.spotros-button--secondary {
	background: transparent;
	color: var(--spotros-text);
	border: 1px solid color-mix(in srgb, var(--spotros-accent) 55%, transparent);
	padding-block: 0.75rem;
}

.spotros-button--secondary:hover {
	background: color-mix(in srgb, var(--spotros-accent) 8%, transparent);
	border-color: var(--spotros-accent);
}

.spotros-button--ghost {
	background: transparent;
	color: var(--spotros-text);
	border: 1px solid color-mix(in srgb, var(--spotros-text) 32%, transparent);
}

.spotros-button--ghost:hover,
.spotros-button--ghost:focus-visible {
	border-color: var(--spotros-accent);
	color: var(--spotros-accent);
	outline: none;
}

/* Hero visual / image — see hero section above */

.spotros-hero-visual-card {
	position: absolute;
	display: grid;
	gap: 0.3rem;
	max-width: 200px;
	padding: 0.85rem 1rem;
	border-radius: var(--spotros-radius-md);
	background: color-mix(in srgb, var(--spotros-background) 90%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--spotros-shadow-soft);
	border: 1px solid var(--spotros-border);
}

.spotros-hero-visual-card strong {
	font-family: var(--spotros-font-display);
	font-size: 1.2rem;
	line-height: 1.1;
}

.spotros-hero-visual-kicker {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--spotros-accent);
}

.spotros-hero-visual-card--primary { top: 1.5rem; right: 1.5rem; }
.spotros-hero-visual-card--secondary { left: 1.5rem; bottom: 1.5rem; }

.spotros-hero-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(130px, 1fr);
	gap: 0.75rem;
	padding: 1.2rem;
	align-self: stretch;
}

.spotros-hero-grid span {
	border-radius: var(--spotros-radius-sm);
	background: linear-gradient(180deg, color-mix(in srgb, var(--spotros-accent) 14%, transparent), transparent),
		color-mix(in srgb, var(--spotros-surface-strong) 80%, transparent);
	border: 1px solid var(--spotros-border);
}

/* Hero variants — all use immersive full-bleed now */

.spotros-page-home .spotros-stack {
	position: relative;
	z-index: 4;
	margin-top: 0;
}

/* ---- Full-bleed section flow (home + menu + about) ---- */

.spotros-page-home,
.spotros-page-menu,
.spotros-page-about {
	display: block;
}

.spotros-page-home > .spotros-section,
.spotros-page-menu > .spotros-section,
.spotros-page-about > .spotros-section {
	position: relative;
	padding: clamp(3.5rem, 7vw, 6.5rem) 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.spotros-page-home > .spotros-section + .spotros-section::before,
.spotros-page-menu > .spotros-section + .spotros-section::before,
.spotros-page-about > .spotros-section + .spotros-section::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: min(calc(100% - 2rem), var(--spotros-shell-width));
	height: 1px;
	transform: translateX(-50%);
	background: color-mix(in srgb, var(--spotros-accent) 30%, transparent);
	opacity: 0.55;
}

.spotros-page-home > .spotros-section--fullbleed,
.spotros-page-home > .spotros-section--fullbleed + .spotros-section::before {
	/* full-bleed sections don't need the hairline. */
}

.spotros-section-inner {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
}

@media (max-width: 720px) {
	.spotros-page-home > .spotros-section,
	.spotros-page-menu > .spotros-section,
	.spotros-page-about > .spotros-section {
		padding: clamp(2.5rem, 7vw, 4rem) 0;
	}
}

/* ---- Signature band (late-night identity row on the home page) ---- */

.spotros-signature-band {
	position: relative;
	z-index: 3;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(3rem, 5vw, 4.5rem) 0;
	background: #1a120d;
}

.spotros-signature-band-inner {
	display: grid;
	gap: 0.9rem;
	justify-items: center;
	text-align: center;
	max-width: 48rem;
	margin: 0 auto;
}

.spotros-signature-band-eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	margin: 0;
	font-family: var(--spotros-font-body);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--spotros-accent);
}

.spotros-signature-band-eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 1px;
	background: var(--spotros-accent);
	opacity: 0.7;
}

.spotros-signature-band-headline {
	margin: 0;
	font-family: var(--spotros-font-display);
	font-weight: 500;
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--spotros-text);
	text-wrap: balance;
}

.spotros-signature-band-subline {
	margin: 0;
	font-family: var(--spotros-font-body);
	font-size: 1rem;
	color: var(--spotros-muted);
	letter-spacing: 0.01em;
}

/* ---- Page ---- */

.spotros-page {
	padding: 0 0 4rem;
}

.spotros-page-header {
	display: grid;
	gap: 1rem;
	padding-top: 2rem;
}

.spotros-page-header--split {
	grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
	align-items: center;
	gap: 1.25rem 1.75rem;
}

.spotros-page-header-copy {
	display: grid;
	gap: 0.75rem;
	max-width: 30rem;
	align-content: center;
}

.spotros-page-header h1 {
	font-size: clamp(2.4rem, 5vw, 4.6rem);
}

.spotros-page-copy,
.spotros-richtext,
.spotros-footer-meta {
	font-size: 1.02rem;
	color: var(--spotros-muted);
	line-height: 1.7;
}

.spotros-story-owner {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spotros-accent);
}

.spotros-story-eyebrow {
	font-size: var(--spotros-type-eyebrow);
	letter-spacing: 0.12em;
}

.spotros-story-lead {
	margin: 0;
	font-family: var(--spotros-font-display);
	font-size: var(--spotros-type-display-m);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--spotros-text);
	text-wrap: balance;
}

.spotros-page-header-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 1rem;
}

.spotros-page-header--about .spotros-page-header-copy {
	max-width: 44rem;
}

.spotros-page-header--about h1 {
	max-width: 18ch;
	text-wrap: balance;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.12;
}

@media (max-width: 720px) {
	.spotros-page-header--about h1 {
		max-width: 16ch;
		font-size: clamp(1.75rem, 7vw, 2.2rem);
	}
}

.spotros-page-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.spotros-page-header-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.55rem;
}

.spotros-page-header--menu,
.spotros-page-header--about {
	padding-top: 0.75rem;
}

.spotros-page-header-visual {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 360px;
	border-radius: calc(var(--spotros-radius-lg) + 4px);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--spotros-border) 88%, transparent);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--spotros-accent) 12%, transparent), transparent 34%),
		color-mix(in srgb, var(--spotros-surface-strong) 74%, transparent);
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.16);
}

.spotros-page-header-image-frame {
	position: absolute;
	inset: 0;
}

.spotros-page-header-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spotros-page-header-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, color-mix(in srgb, var(--spotros-background) 78%, transparent) 0%, color-mix(in srgb, var(--spotros-background) 36%, transparent) 42%, transparent 100%),
		linear-gradient(135deg, color-mix(in srgb, var(--spotros-background) 22%, transparent), transparent 52%);
}

.spotros-page-header-floating-card {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.45rem;
	max-width: 320px;
	margin: 1.4rem;
	padding: 1rem 1.1rem;
	border-radius: calc(var(--spotros-radius-md) + 2px);
	border: 1px solid color-mix(in srgb, var(--spotros-border) 84%, transparent);
	background: color-mix(in srgb, var(--spotros-background) 80%, transparent);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.spotros-page-header-floating-card strong {
	font-family: var(--spotros-font-display);
	font-size: 1.45rem;
	line-height: 1.04;
}

.spotros-page-header-floating-card p,
.spotros-page-header-floating-card span {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--spotros-muted);
}

.spotros-page-header-floating-card span {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spotros-accent);
}

/* ---- Cards & Sections ---- */

.spotros-card {
	padding: clamp(1.35rem, 2.4vw, 1.9rem);
	border: 1px solid var(--spotros-border);
	border-radius: var(--spotros-radius-lg);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--spotros-surface-strong) 44%, transparent), transparent 34%),
		color-mix(in srgb, var(--spotros-surface) 96%, transparent);
	box-shadow: 0 18px 34px rgba(78, 60, 38, 0.08);
	backdrop-filter: blur(16px) saturate(1.06);
	-webkit-backdrop-filter: blur(16px) saturate(1.06);
	transition: transform var(--spotros-transition), box-shadow var(--spotros-transition);
}

.spotros-menu-nav {
	border: 1px solid var(--spotros-border);
	border-radius: var(--spotros-radius-lg);
	background: var(--spotros-surface);
	box-shadow: var(--spotros-shadow-soft);
}

.spotros-section,
.spotros-menu-category {
	display: grid;
	gap: 1.25rem;
}

.spotros-section-story,
.spotros-section-dishes,
.spotros-section-gallery,
.spotros-section-faq,
.spotros-menu-cta-block {
	background: transparent;
}

.spotros-page-home .spotros-section-dishes .spotros-section-heading {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.6rem;
}

.spotros-page-about .spotros-page-header {
	max-width: none;
	padding-top: 0.75rem;
}

.spotros-section-heading {
	display: grid;
	gap: 0.45rem;
	max-width: none;
}

.spotros-section-heading--split {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1rem 1.25rem;
}

.spotros-section-heading--center {
	justify-items: center;
	text-align: center;
}

.spotros-section-heading--wide {
	max-width: 44rem;
}

.spotros-section-heading .spotros-page-copy {
	max-width: 34rem;
}

.spotros-section-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 0.5rem;
}

/* ---- Order-now grid (delivery platform tiles) ---- */

.spotros-section-order .spotros-order-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 960px) {
	.spotros-section-order .spotros-order-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.spotros-section-order .spotros-order-grid {
		grid-template-columns: 1fr;
	}
}

.spotros-order-tile {
	margin: 0;
}

.spotros-order-card {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	gap: 0.15rem 0.75rem;
	padding: 1.35rem 1.5rem;
	min-height: 96px;
	border: 1px solid color-mix(in srgb, var(--spotros-border) 90%, transparent);
	border-radius: calc(var(--spotros-radius-sm) + 4px);
	background: color-mix(in srgb, var(--spotros-surface-strong) 68%, transparent);
	color: var(--spotros-text);
	font-family: var(--spotros-font-body);
	transition: background var(--spotros-transition-fast), border-color var(--spotros-transition-fast), transform var(--spotros-transition);
}

.spotros-order-card:hover,
.spotros-order-card:focus-visible {
	background: color-mix(in srgb, var(--spotros-surface-strong) 82%, transparent);
	border-color: var(--spotros-accent);
	transform: translateY(-2px);
	outline: none;
}

.spotros-order-card-kicker {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--spotros-accent);
}

.spotros-order-card-label {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	font-family: var(--spotros-font-display);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.spotros-order-card-arrow {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	align-self: center;
	font-size: 1.4rem;
	color: var(--spotros-accent);
	transform: translateX(-4px);
	transition: transform var(--spotros-transition-fast);
}

.spotros-order-card:hover .spotros-order-card-arrow,
.spotros-order-card:focus-visible .spotros-order-card-arrow {
	transform: translateX(0);
}

.spotros-order-reserve {
	margin: 0.75rem 0 0;
}

.spotros-section-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem 1.5rem;
	align-items: end;
}

.spotros-section-intro-copy {
	display: grid;
	gap: 0.55rem;
	max-width: 34rem;
}

.spotros-section-intro-actions {
	display: flex;
	justify-content: flex-end;
}

.spotros-section-title,
.spotros-menu-category h2 {
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

/* ---- Scroll reveal animation ---- */

.spotros-card {
	opacity: 0;
	transform: translateY(32px);
	transition:
		opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
		transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
		box-shadow var(--spotros-transition);
}

.spotros-card.is-visible {
	opacity: 1;
	transform: none;
}

.spotros-hero-shell {
	opacity: 1;
	transform: none;
}

/* Staggered children */
.spotros-card.is-visible .spotros-feature-card,
.spotros-card.is-visible .spotros-gallery-card,
.spotros-card.is-visible .spotros-faq-item,
.spotros-card.is-visible .spotros-hours-list li,
.spotros-card.is-visible .spotros-contact-list li {
	opacity: 1;
	transform: translateY(0);
}

.spotros-feature-card,
.spotros-gallery-card,
.spotros-faq-item,
.spotros-hours-list li,
.spotros-contact-list li {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.spotros-card.is-visible .spotros-feature-card:nth-child(1),
.spotros-card.is-visible .spotros-gallery-card:nth-child(1),
.spotros-card.is-visible .spotros-faq-item:nth-child(1),
.spotros-card.is-visible .spotros-hours-list li:nth-child(1),
.spotros-card.is-visible .spotros-contact-list li:nth-child(1) { transition-delay: 0.08s; }

.spotros-card.is-visible .spotros-feature-card:nth-child(2),
.spotros-card.is-visible .spotros-gallery-card:nth-child(2),
.spotros-card.is-visible .spotros-faq-item:nth-child(2),
.spotros-card.is-visible .spotros-hours-list li:nth-child(2),
.spotros-card.is-visible .spotros-contact-list li:nth-child(2) { transition-delay: 0.16s; }

.spotros-card.is-visible .spotros-feature-card:nth-child(3),
.spotros-card.is-visible .spotros-faq-item:nth-child(3),
.spotros-card.is-visible .spotros-hours-list li:nth-child(3),
.spotros-card.is-visible .spotros-contact-list li:nth-child(3) { transition-delay: 0.24s; }

.spotros-card.is-visible .spotros-feature-card:nth-child(4),
.spotros-card.is-visible .spotros-faq-item:nth-child(4),
.spotros-card.is-visible .spotros-hours-list li:nth-child(4),
.spotros-card.is-visible .spotros-contact-list li:nth-child(4) { transition-delay: 0.32s; }

.spotros-card.is-visible .spotros-feature-card:nth-child(5),
.spotros-card.is-visible .spotros-hours-list li:nth-child(5),
.spotros-card.is-visible .spotros-contact-list li:nth-child(5) { transition-delay: 0.40s; }

.spotros-card.is-visible .spotros-feature-card:nth-child(6),
.spotros-card.is-visible .spotros-hours-list li:nth-child(6) { transition-delay: 0.48s; }

.spotros-card.is-visible .spotros-hours-list li:nth-child(7) { transition-delay: 0.56s; }

/* ---- Story section ---- */

.spotros-story-layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.spotros-story-copy {
	display: grid;
	gap: 1rem;
	max-width: 36rem;
}

.spotros-story-copy .spotros-richtext {
	font-family: var(--spotros-font-body);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--spotros-muted);
}

.spotros-story-figure {
	min-height: 100%;
	padding-left: 0;
}

.spotros-story-image {
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
	border-radius: 4px;
	overflow: hidden;
	border: none;
	transition: transform var(--spotros-transition);
}

.spotros-section-story:hover .spotros-story-image {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.spotros-section-story:hover .spotros-story-image {
		transform: none;
	}
}

/* ---- Signature plates (image-forward 2-card row, Delilah-Locations pattern) ---- */

.spotros-section-subtitle {
	margin: 0;
	font-size: 1.05rem;
	color: var(--spotros-muted);
	line-height: 1.55;
	max-width: 46ch;
}

.spotros-plate-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 2rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.spotros-plate-grid--pair {
	grid-template-columns: 1fr 1fr;
}

.spotros-plate-grid--single {
	grid-template-columns: minmax(0, 640px);
	justify-content: start;
}

@media (max-width: 820px) {
	.spotros-plate-grid--pair,
	.spotros-plate-grid--single {
		grid-template-columns: 1fr;
	}
}

.spotros-plate-card {
	display: grid;
	gap: 1rem;
	background: transparent;
	border: none;
	padding: 0;
}

.spotros-plate-card-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 4px;
	background: color-mix(in srgb, var(--spotros-surface-strong) 60%, transparent);
}

.spotros-plate-card-frame .spotros-plate-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
	transform-origin: center center;
}

.spotros-plate-card:hover .spotros-plate-image {
	transform: scale(1.04);
}

.spotros-plate-card-body {
	display: grid;
	gap: 0.5rem;
	padding: 0;
}

.spotros-plate-card-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.spotros-plate-card:hover .spotros-plate-card-line {
	transform: translateY(-4px);
}

.spotros-plate-card-name {
	margin: 0;
	font-family: var(--spotros-font-display);
	font-weight: 500;
	font-size: 1.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--spotros-text);
}

.spotros-plate-card-price {
	font-family: var(--spotros-font-body);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--spotros-accent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.spotros-plate-card-description {
	margin: 0;
	font-family: var(--spotros-font-body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--spotros-muted);
	max-width: 46ch;
}

.spotros-plate-cta {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.spotros-plate-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid color-mix(in srgb, var(--spotros-accent) 70%, transparent);
	color: var(--spotros-accent);
	font-family: var(--spotros-font-body);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.spotros-plate-cta-link:hover,
.spotros-plate-cta-link:focus-visible {
	color: var(--spotros-text);
	border-color: var(--spotros-accent);
	outline: none;
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.spotros-plate-card .spotros-plate-image,
	.spotros-plate-card:hover .spotros-plate-image,
	.spotros-plate-card-line,
	.spotros-plate-card:hover .spotros-plate-card-line,
	.spotros-plate-cta-link,
	.spotros-plate-cta-link:hover {
		transform: none;
		transition: none;
	}
}

/* Retained: feature-card styles (kept for downstream compatibility but unused on home) */
.spotros-feature-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2rem;
	list-style: none;
}

.spotros-feature-card {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0;
	padding: 0;
	border: 1px solid var(--spotros-border);
	border-radius: var(--spotros-radius-md);
	background: color-mix(in srgb, var(--spotros-surface-strong) 84%, transparent);
	overflow: hidden;
	transition: transform var(--spotros-transition), box-shadow var(--spotros-transition);
	cursor: default;
}

.spotros-feature-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--spotros-shadow-hover);
}

.spotros-feature-card .spotros-dish-image-frame {
	margin: 0;
	border: none;
	border-radius: 0;
	aspect-ratio: 5 / 4;
}

.spotros-feature-card-body {
	padding: 1.1rem 1.15rem 1.15rem;
	display: grid;
	gap: 0.55rem;
	align-content: start;
}

.spotros-feature-card strong {
	font-family: var(--spotros-font-display);
	font-size: var(--spotros-type-display-m);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.spotros-feature-card span {
	font-size: 0.94rem;
	color: var(--spotros-muted);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.spotros-feature-card em {
	font-style: normal;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--spotros-accent);
}

.spotros-feature-price {
	font-variant-numeric: tabular-nums;
}

/* Lead card — asymmetric hero of the grid at >=720px. */
@media (min-width: 720px) {
	.spotros-feature-card--lead {
		grid-column: span 2;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		grid-template-rows: auto;
	}

	.spotros-feature-card--lead .spotros-dish-image-frame {
		aspect-ratio: 4 / 3;
		height: 100%;
	}

	.spotros-feature-card--lead .spotros-feature-card-body {
		padding: clamp(1.5rem, 2.4vw, 2.25rem);
		align-content: center;
		gap: 0.8rem;
	}

	.spotros-feature-card--lead strong {
		font-size: var(--spotros-type-display-l);
		line-height: 1.1;
	}

	.spotros-feature-card--lead span {
		-webkit-line-clamp: 6;
		font-size: 1.02rem;
	}
}

.spotros-feature-kicker {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 1rem 0 -0.25rem 1.15rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid color-mix(in srgb, var(--spotros-accent) 65%, transparent);
	border-radius: 999px;
	font-family: var(--spotros-font-utility);
	font-size: var(--spotros-type-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spotros-accent);
	z-index: 1;
}

.spotros-feature-card--lead .spotros-feature-kicker {
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	margin: 0;
	background: color-mix(in srgb, var(--spotros-background) 80%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* No-image card — typography-first composition. */
.spotros-feature-card--no-image {
	grid-template-rows: auto;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--spotros-accent) 6%, transparent), transparent 40%),
		color-mix(in srgb, var(--spotros-surface-strong) 72%, transparent);
}

.spotros-feature-card--no-image .spotros-feature-card-body {
	padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.15rem, 1.6vw, 1.35rem);
	gap: 0.7rem;
}

.spotros-feature-card--no-image strong {
	font-size: var(--spotros-type-display-m);
}

.spotros-feature-card--no-image em.spotros-feature-price {
	margin-top: auto;
	padding-top: 0.25rem;
	font-size: 1.15rem;
	color: var(--spotros-accent);
}

/* Dish image */
.spotros-dish-image-frame {
	aspect-ratio: 4 / 3;
	border-radius: var(--spotros-radius-md);
	overflow: hidden;
	border: 1px solid var(--spotros-border);
	background: color-mix(in srgb, var(--spotros-surface-strong) 88%, transparent);
}

.spotros-dish-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.spotros-feature-card:hover .spotros-dish-image {
	transform: scale(1.08);
}

/* ---- Gallery (legacy caption list; retained) ---- */

.spotros-gallery-caption-list {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: 2fr 1fr;
	list-style: none;
}

@media (max-width: 720px) {
	.spotros-gallery-caption-list {
		grid-template-columns: 1fr;
	}
}

/* Gallery full-bleed pattern retired — home page now uses atmospheric anchor. */

.spotros-gallery-card {
	position: relative;
	display: block;
	border-radius: var(--spotros-radius-md);
	overflow: hidden;
	border: 1px solid var(--spotros-border);
	background: color-mix(in srgb, var(--spotros-surface-strong) 88%, transparent);
	transition: transform var(--spotros-transition), box-shadow var(--spotros-transition);
}

.spotros-gallery-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--spotros-shadow-hover);
}

.spotros-gallery-image-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.spotros-gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.spotros-gallery-card:hover .spotros-gallery-image {
	transform: scale(1.06);
}

.spotros-gallery-card-copy,
.spotros-gallery-card-copy--inline {
	display: none;
}

/* ---- Contact section ---- */

.spotros-contact-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.spotros-contact-column {
	display: grid;
	gap: 1.5rem;
}

.spotros-contact-list {
	display: grid;
	gap: 0.65rem;
	list-style: none;
}

.spotros-contact-list li {
	padding: 0.85rem 1rem;
	border-radius: var(--spotros-radius-sm);
	border: 1px solid var(--spotros-border);
	background: color-mix(in srgb, var(--spotros-surface-strong) 60%, transparent);
	font-size: 0.95rem;
	transition: background var(--spotros-transition-fast);
}

.spotros-contact-list li:hover {
	background: var(--spotros-highlight);
}

.spotros-contact-actions {
	display: grid;
	gap: 0.75rem;
}

.spotros-hours-block {
	display: grid;
	gap: 0.85rem;
}

.spotros-hours-list {
	display: grid;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.spotros-hours-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--spotros-radius-sm);
	border: 1px solid var(--spotros-border);
	background: color-mix(in srgb, var(--spotros-surface-strong) 60%, transparent);
	transition: background var(--spotros-transition-fast);
}

.spotros-hours-list li:hover {
	background: var(--spotros-highlight);
}

.spotros-hours-list strong {
	font-size: 0.92rem;
	font-weight: 600;
}

.spotros-hours-list span {
	color: var(--spotros-muted);
	text-align: right;
	font-size: 0.92rem;
}

/* Social */
.spotros-social-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
}

.spotros-social-block {
	display: grid;
	gap: 0.75rem;
}

/* Contact panel / location */
.spotros-contact-panel {
	display: grid;
	gap: 1rem;
	padding: 1.25rem;
	border-radius: var(--spotros-radius-md);
	border: 1px solid var(--spotros-border);
	background: linear-gradient(180deg, color-mix(in srgb, var(--spotros-accent) 6%, transparent), transparent 40%),
		color-mix(in srgb, var(--spotros-surface-strong) 70%, transparent);
}

.spotros-contact-panel h3 {
	font-size: 1.3rem;
}

.spotros-location-panel { gap: 1rem; }

.spotros-location-media,
.spotros-location-shell {
	border-radius: var(--spotros-radius-md);
	overflow: hidden;
	border: 1px solid var(--spotros-border);
	background: color-mix(in srgb, var(--spotros-surface-strong) 88%, transparent);
}

.spotros-location-image {
	width: 100%;
	height: 100%;
	min-height: 200px;
	object-fit: cover;
}

.spotros-location-shell {
	position: relative;
	min-height: 200px;
	padding: 1rem;
	display: grid;
	align-items: end;
	background: linear-gradient(180deg, color-mix(in srgb, var(--spotros-accent) 10%, transparent), transparent 50%),
		linear-gradient(135deg, color-mix(in srgb, var(--spotros-surface-strong) 92%, transparent), color-mix(in srgb, var(--spotros-surface) 80%, transparent));
}

.spotros-location-shell-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 0.5rem;
	padding: 0.75rem;
	opacity: 0.25;
}

.spotros-location-shell-grid span {
	border-radius: var(--spotros-radius-sm);
	border: 1px solid color-mix(in srgb, var(--spotros-border) 60%, transparent);
	background: color-mix(in srgb, var(--spotros-surface-strong) 50%, transparent);
}

.spotros-location-shell-copy {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.3rem;
}

.spotros-location-shell-copy strong { font-size: 1.02rem; }
.spotros-location-shell-copy span { color: var(--spotros-muted); }

.spotros-location-meta {
	display: grid;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.spotros-location-meta li {
	display: grid;
	gap: 0.15rem;
	padding: 0.75rem 1rem;
	border-radius: var(--spotros-radius-sm);
	border: 1px solid var(--spotros-border);
	background: color-mix(in srgb, var(--spotros-surface-strong) 60%, transparent);
}

.spotros-location-meta strong {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--spotros-accent);
}

/* ---- Trust panel ---- */

.spotros-trust-panel { display: grid; gap: 1rem; }

.spotros-trust-list {
	display: grid;
	gap: 0.6rem;
	list-style: none;
	padding: 0;
	margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.spotros-trust-list li {
	display: grid;
	gap: 0.15rem;
	padding: 0.8rem 1rem;
	border-radius: var(--spotros-radius-sm);
	border: 1px solid var(--spotros-border);
	background: color-mix(in srgb, var(--spotros-surface-strong) 60%, transparent);
}

.spotros-trust-list strong {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--spotros-accent);
}

.spotros-trust-policy {
	margin: 0;
	padding: 0.9rem 1rem;
	border-radius: var(--spotros-radius-sm);
	border: 1px dashed color-mix(in srgb, var(--spotros-border) 80%, transparent);
	background: color-mix(in srgb, var(--spotros-surface-strong) 50%, transparent);
	color: var(--spotros-muted);
	font-size: 0.92rem;
}

/* ---- Immersive Visit section (home page: full-bleed w/ storefront backdrop) ---- */

.spotros-section-visit-immersive {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 70vh;
	display: grid;
	align-items: center;
	padding: clamp(4rem, 8vw, 6.5rem) 0;
	background: color-mix(in srgb, var(--spotros-background) 96%, transparent);
	isolation: isolate;
}

.spotros-visit-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.spotros-visit-backdrop-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spotros-visit-backdrop-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 10, 8, 0.7);
}

.spotros-section-visit-immersive.has-backdrop {
	min-height: 70vh;
}

.spotros-visit-immersive-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
	max-width: 1200px;
}

@media (max-width: 820px) {
	.spotros-visit-immersive-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

.spotros-visit-immersive-col {
	display: grid;
	gap: 0.75rem;
	color: var(--spotros-text);
}

.spotros-visit-immersive-col > .spotros-eyebrow {
	color: var(--spotros-accent);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
}

.spotros-visit-immersive-headline {
	margin: 0;
	font-family: var(--spotros-font-display);
	font-weight: 500;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--spotros-text);
	text-wrap: balance;
}

.spotros-visit-immersive-subline {
	margin: 0;
	font-family: var(--spotros-font-body);
	font-size: 1rem;
	color: color-mix(in srgb, var(--spotros-text) 78%, transparent);
	line-height: 1.55;
}

.spotros-visit-immersive-rule {
	display: block;
	width: 3rem;
	height: 1px;
	background: color-mix(in srgb, var(--spotros-accent) 40%, transparent);
	margin: 0.5rem 0;
}

.spotros-visit-immersive-hours {
	display: grid;
	gap: 0.55rem;
	margin: 0;
}

.spotros-visit-immersive-hours-pair {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 1.25rem;
	align-items: baseline;
}

.spotros-visit-immersive-hours-pair dt {
	margin: 0;
	font-family: var(--spotros-font-body);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--spotros-text);
}

.spotros-visit-immersive-hours-pair dd {
	margin: 0;
	font-family: var(--spotros-font-body);
	font-weight: 400;
	font-size: 0.98rem;
	color: color-mix(in srgb, var(--spotros-text) 72%, transparent);
	font-variant-numeric: tabular-nums;
}

.spotros-visit-immersive-hours-pair.is-closed dd {
	font-style: italic;
	opacity: 0.7;
}

.spotros-visit-immersive-address-line {
	margin: 0;
	font-family: var(--spotros-font-display);
	font-weight: 500;
	font-size: 1.75rem;
	line-height: 1.15;
	color: var(--spotros-text);
}

.spotros-visit-immersive-address-sub {
	margin: 0;
	font-family: var(--spotros-font-body);
	font-size: 1.05rem;
	color: color-mix(in srgb, var(--spotros-text) 78%, transparent);
}

.spotros-visit-immersive-phone {
	margin: 0.25rem 0 0;
	font-family: var(--spotros-font-display);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.2;
}

.spotros-visit-immersive-phone a {
	color: var(--spotros-text);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--spotros-accent) 40%, transparent);
	transition: color 200ms ease, border-color 200ms ease;
}

.spotros-visit-immersive-phone a:hover,
.spotros-visit-immersive-phone a:focus-visible {
	color: var(--spotros-accent);
	border-color: var(--spotros-accent);
	outline: none;
}

.spotros-visit-immersive-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.5rem;
}

.spotros-visit-immersive-actions .spotros-button {
	min-height: 44px;
	padding: 0.7rem 1.15rem;
	font-size: 0.92rem;
}

.spotros-visit-immersive-reserve {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: start;
	margin-top: 0.75rem;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	background: var(--spotros-accent);
	color: var(--spotros-accent-contrast);
	font-family: var(--spotros-font-body);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
	transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
	min-height: 44px;
}

.spotros-visit-immersive-reserve:hover,
.spotros-visit-immersive-reserve:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.36);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.spotros-visit-immersive-reserve,
	.spotros-visit-immersive-reserve:hover {
		transform: none;
		transition: none;
	}
}

/* ---- Atmospheric anchor photo (replaces the Gallery section on home) ---- */

.spotros-atmospheric-anchor {
	margin: 0;
	padding: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.spotros-atmospheric-anchor-frame {
	width: 100%;
	height: clamp(50vh, 65vw, 80vh);
	overflow: hidden;
	background: color-mix(in srgb, var(--spotros-surface-strong) 60%, transparent);
}

.spotros-atmospheric-anchor-frame .spotros-anchor-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Conversion band (paired Order + Reserve without card wrapper) ---- */

.spotros-section-conversion .spotros-conversion-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (max-width: 820px) {
	.spotros-section-conversion .spotros-conversion-grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

.spotros-conversion-column {
	display: grid;
	gap: 0.85rem;
	align-content: start;
}

.spotros-conversion-column .spotros-eyebrow {
	color: var(--spotros-accent);
}

.spotros-conversion-column .spotros-section-title {
	font-family: var(--spotros-font-display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
}

.spotros-conversion-tagline {
	margin: 0 0 0.5rem;
	font-family: var(--spotros-font-body);
	font-size: 1rem;
	color: var(--spotros-muted);
	line-height: 1.55;
	max-width: 38ch;
}

.spotros-section-conversion .spotros-order-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

@media (max-width: 520px) {
	.spotros-section-conversion .spotros-order-grid {
		grid-template-columns: 1fr;
	}
}

.spotros-conversion-column--reserve {
	gap: 1rem;
}

.spotros-conversion-reserve-btn {
	justify-self: start;
	min-height: 48px;
	padding: 0.95rem 1.75rem;
	font-size: 0.98rem;
}

.spotros-conversion-subline {
	margin: 0.25rem 0 0;
	font-family: var(--spotros-font-body);
	font-size: 0.98rem;
	color: var(--spotros-muted);
}

.spotros-conversion-call {
	color: var(--spotros-text);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--spotros-accent) 40%, transparent);
	transition: color 200ms ease, border-color 200ms ease;
	margin-left: 0.25rem;
}

.spotros-conversion-call:hover,
.spotros-conversion-call:focus-visible {
	color: var(--spotros-accent);
	border-color: var(--spotros-accent);
	outline: none;
}

/* ---- Visit / Contact grid (retained for About page + visit-grid partial reuse) ---- */

.spotros-visit-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
	gap: 1.15rem 1.25rem;
	align-items: start;
}

.spotros-visit-card {
	padding: 1.7rem;
	border-radius: calc(var(--spotros-radius-md) + 2px);
	border: 1px solid color-mix(in srgb, var(--spotros-border) 88%, transparent);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--spotros-accent) 8%, transparent), transparent 28%),
		color-mix(in srgb, var(--spotros-surface-strong) 74%, transparent);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
	display: grid;
	gap: 0.95rem;
	align-content: start;
}

.spotros-visit-card h3 {
	font-size: 1.45rem;
	letter-spacing: 0;
	line-height: 1.2;
	color: var(--spotros-text);
}

.spotros-visit-hours-signature {
	font-family: var(--spotros-font-display);
	font-size: var(--spotros-type-display-m);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--spotros-text);
	text-wrap: balance;
	display: block;
}

.spotros-visit-hours-signature span + span {
	color: var(--spotros-muted);
	font-family: var(--spotros-font-body);
	font-size: var(--spotros-type-body-m);
	font-weight: 500;
	letter-spacing: 0.01em;
}

.spotros-visit-hours-signature span {
	display: block;
}

.spotros-visit-hours {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--spotros-text) 6%, transparent), transparent 26%),
		color-mix(in srgb, var(--spotros-surface-strong) 72%, transparent);
}

.spotros-visit-location-copy {
	display: grid;
	gap: 0.35rem;
	padding-top: 0.35rem;
	border-top: 1px solid color-mix(in srgb, var(--spotros-border) 80%, transparent);
}

.spotros-visit-card-head {
	display: grid;
	gap: 0.35rem;
}

.spotros-visit-kicker,
.spotros-visit-subtitle {
	margin: 0;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--spotros-accent-cool);
}

.spotros-visit-note {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--spotros-muted);
}

.spotros-hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.spotros-hours-table td {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--spotros-border);
}

.spotros-hours-table tr:last-child td {
	border-bottom: none;
}

.spotros-hours-table td:first-child {
	font-weight: 600;
	white-space: nowrap;
	padding-right: 1.5rem;
}

.spotros-hours-table td:last-child {
	text-align: right;
	color: var(--spotros-muted);
}

.spotros-hours-table--compact {
	font-size: 0.9rem;
}

.spotros-hours-table--compact td {
	padding: 0.42rem 0;
}

.spotros-hours-table .is-closed td {
	font-style: italic;
	color: color-mix(in srgb, var(--spotros-muted) 78%, transparent);
}

.spotros-visit-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: calc(var(--spotros-radius-sm) + 4px);
	border: 1px solid color-mix(in srgb, var(--spotros-border) 82%, transparent);
	background: color-mix(in srgb, var(--spotros-surface-strong) 44%, transparent);
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	transition: all var(--spotros-transition-fast);
}

.spotros-visit-link:hover {
	background: var(--spotros-highlight);
	transform: translateY(-2px);
	box-shadow: var(--spotros-shadow-soft);
}

.spotros-visit-link-icon {
	font-size: 1.2rem;
	opacity: 0.7;
}

.spotros-visit-reserve {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-radius: calc(var(--spotros-radius-sm) + 4px);
	background: var(--spotros-accent);
	color: var(--spotros-accent-contrast);
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.01em;
	min-height: 44px;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
	transition: transform var(--spotros-transition-fast), box-shadow var(--spotros-transition-fast), background var(--spotros-transition-fast);
}

.spotros-visit-reserve:hover,
.spotros-visit-reserve:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
	outline: none;
}

.spotros-visit-reserve-icon {
	font-size: 1.1rem;
	opacity: 0.9;
}

.spotros-visit-address {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--spotros-muted);
}

.spotros-visit-social {
	display: grid;
	gap: 0.5rem;
}

.spotros-visit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 0.25rem;
}

.spotros-visit-actions .spotros-button {
	flex: 1 1 220px;
	min-width: 0;
}

@media (max-width: 720px) {
	.spotros-visit-grid {
		grid-template-columns: 1fr;
	}

	.spotros-visit-actions {
		flex-direction: column;
	}

	.spotros-visit-actions .spotros-button {
		min-width: 0;
		width: 100%;
	}
}

/* ---- FAQ (quiet typographic grid — no card wrapper) ---- */

.spotros-faq-block {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
}

.spotros-faq-dl {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem 3rem;
	margin: 0;
}

.spotros-faq-pair {
	position: relative;
	display: grid;
	gap: 0.75rem;
	padding: 0;
	border: none;
	background: transparent;
	opacity: 1;
	transform: none;
}

.spotros-faq-eyebrow {
	display: none;
}

.spotros-faq-pair dt {
	position: relative;
	font-family: var(--spotros-font-display);
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--spotros-text);
	margin: 0 0 0.4rem;
	padding-bottom: 0.6rem;
}

.spotros-faq-pair dt::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 4ch;
	height: 1px;
	background: color-mix(in srgb, var(--spotros-accent) 30%, transparent);
}

.spotros-faq-pair dd {
	margin: 0;
	font-family: var(--spotros-font-body);
	font-weight: 400;
	font-size: 1rem;
	color: var(--spotros-muted);
	line-height: 1.6;
}

@media (max-width: 820px) {
	.spotros-faq-dl {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* Legacy faq items (about/menu pages) */
.spotros-faq-list {
	display: grid;
	gap: 0.75rem;
}

.spotros-faq-item {
	padding: 1.1rem 1.2rem;
	border-radius: var(--spotros-radius-md);
	border: 1px solid var(--spotros-border);
	background: color-mix(in srgb, var(--spotros-surface-strong) 60%, transparent);
}

.spotros-faq-item h3 {
	font-size: 1.15rem;
	margin-bottom: 0.4rem;
	line-height: 1.2;
}

.spotros-faq-prose {
	display: grid;
	gap: 0.9rem;
}

/* ---- Menu page ---- */

.spotros-menu-nav {
	position: static;
	z-index: 10;
	padding: 0.9rem 1.1rem;
	border-radius: 999px;
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12);
	overflow-x: auto;
}

@media (min-width: 960px) {
	.spotros-menu-nav {
		position: sticky;
		top: calc(var(--spotros-header-offset) + 0.65rem);
	}
}

.spotros-menu-nav a {
	min-height: 2.5rem;
	padding: 0.55rem 0.85rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--spotros-surface-strong) 56%, transparent);
	border: 1px solid color-mix(in srgb, var(--spotros-border) 84%, transparent);
}

.spotros-menu-nav a::after {
	display: none;
}

.spotros-menu-nav a:hover,
.spotros-menu-nav a:focus-visible {
	background: var(--spotros-highlight);
}

.spotros-menu-highlight-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.85rem;
	list-style: none;
}

.spotros-menu-highlight-list li {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border-radius: 0;
	background: none;
	border: none;
	font-weight: 600;
	font-size: 0.94rem;
	color: color-mix(in srgb, var(--spotros-text) 84%, transparent);
}

.spotros-menu-category {
	grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.spotros-menu-category-head {
	display: grid;
	gap: 0.7rem;
}

.spotros-menu-category-heading {
	display: grid;
	gap: 0.35rem;
}

.spotros-menu-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.95rem;
	list-style: none;
}

.spotros-menu-items li + li { margin-top: 0; }
.spotros-list li + li { margin-top: 0.75rem; }

.spotros-menu-item {
	display: grid;
	gap: 0.45rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--spotros-border);
	border-radius: var(--spotros-radius-md);
	background: color-mix(in srgb, var(--spotros-surface-strong) 60%, transparent);
	transition: background var(--spotros-transition-fast), transform var(--spotros-transition), box-shadow var(--spotros-transition-fast);
}

.spotros-menu-item:hover {
	background: var(--spotros-highlight);
	transform: translateY(-4px);
	box-shadow: var(--spotros-shadow-soft);
}

.spotros-menu-item.is-featured {
	background: linear-gradient(180deg, color-mix(in srgb, var(--spotros-accent) 8%, transparent), transparent 40%),
		color-mix(in srgb, var(--spotros-surface-strong) 70%, transparent);
	border-color: color-mix(in srgb, var(--spotros-accent) 25%, transparent);
}

.spotros-menu-item-media {
	aspect-ratio: 16 / 10;
	border-radius: var(--spotros-radius-sm);
	overflow: hidden;
	border: 1px solid var(--spotros-border);
}

.spotros-menu-item-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spotros-menu-item-line {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
}

.spotros-menu-item-line strong { font-size: 1.05rem; }
.spotros-menu-item-line span { font-weight: 700; color: var(--spotros-accent); white-space: nowrap; }

.spotros-menu-flag {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--spotros-accent-cool);
}

.spotros-menu-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
}

.spotros-menu-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.8rem;
	min-height: 1.8rem;
	padding: 0.3rem 0.5rem;
	border-radius: 999px;
	border: 1px solid var(--spotros-border);
	background: var(--spotros-highlight);
	font-size: 0.75rem;
	font-weight: 700;
}

.spotros-menu-cta-block,
.spotros-menu-faq-block {
	display: grid;
	gap: 0.9rem;
}

.spotros-menu-cta-block {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1rem 2rem;
}

.spotros-menu-cta-copy {
	display: grid;
	gap: 0.55rem;
	max-width: 40rem;
}

/* ---- Placeholder ---- */

.spotros-placeholder { margin: 0; }

.spotros-placeholder-frame {
	display: grid;
	gap: 0.8rem;
	padding: 1.5rem;
	border: 1px solid var(--spotros-border);
	border-radius: var(--spotros-radius-lg);
	background: var(--spotros-surface);
	box-shadow: var(--spotros-shadow-soft);
}

.spotros-placeholder-icon {
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--spotros-accent) 10%, transparent);
}

.spotros-placeholder-icon svg { width: 48px; height: 48px; }

.spotros-placeholder-ring,
.spotros-placeholder-core,
.spotros-placeholder-line {
	fill: none;
	stroke: var(--spotros-accent);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.spotros-placeholder-ring { stroke-width: 2.2; opacity: 0.8; }
.spotros-placeholder-core { stroke-width: 2; opacity: 0.45; }
.spotros-placeholder-line { stroke-width: 3; }

.spotros-placeholder-title { font-size: clamp(1.4rem, 3vw, 2rem); }
.spotros-placeholder-message { max-width: 48ch; }

/* ---- Footer ---- */

.spotros-site-footer {
	position: relative;
	padding: 3rem 0 3.2rem;
	border-top: none;
	margin-top: 4rem;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--spotros-text) 10%, transparent), transparent 16%),
		color-mix(in srgb, var(--spotros-text) 92%, var(--spotros-background) 8%);
	color: color-mix(in srgb, var(--spotros-accent-contrast) 90%, white 10%);
}

.spotros-site-footer::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: min(calc(100% - 2rem), var(--spotros-shell-width));
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--spotros-border), transparent);
}

.spotros-footer-brand,
.spotros-footer-utility {
	display: grid;
	gap: 0.4rem;
	max-width: 520px;
}

.spotros-footer-name {
	margin: 0;
	font-family: var(--spotros-font-display);
	font-size: clamp(1.45rem, 2vw, 1.9rem);
	font-weight: 700;
	line-height: 1;
}

.spotros-footer-meta {
	max-width: 24rem;
	color: color-mix(in srgb, white 72%, var(--spotros-accent) 28%);
}

.spotros-footer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 0.95rem;
}

.spotros-footer-actions a,
.spotros-footer-credit a {
	color: color-mix(in srgb, white 68%, var(--spotros-accent) 32%);
	font-weight: 600;
}

.spotros-footer-actions a:hover,
.spotros-footer-credit a:hover {
	color: white;
}

.spotros-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	color: color-mix(in srgb, white 60%, var(--spotros-accent) 40%);
	font-size: 0.88rem;
}

.spotros-footer-links a:hover { color: white; }

/* No draft badge — site should look complete */

/* ---- Pill (kept but simplified) ---- */
.spotros-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--spotros-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--spotros-surface-strong) 60%, transparent);
	font-size: 0.85rem;
}

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

@media (max-width: 920px) {
	.spotros-hero {
		min-height: 78vh;
	}

	.spotros-hero-shell {
		min-height: 78vh;
	}

	.spotros-site-header {
		top: 0.5rem;
	}

	.spotros-site-header-inner {
		border-radius: 28px;
	}

	.spotros-hero-layout,
	.spotros-page-header--split,
	.spotros-section-intro,
	.spotros-story-layout,
	.spotros-contact-layout,
	.spotros-menu-category,
	.spotros-menu-cta-block {
		grid-template-columns: 1fr;
	}

	.spotros-page-home .spotros-section-dishes .spotros-section-heading {
		grid-template-columns: 1fr;
	}

	.spotros-feature-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.spotros-feature-card,
	.spotros-feature-card:first-child,
	.spotros-gallery-card,
	.spotros-gallery-card:first-child,
	.spotros-gallery-card:nth-child(2),
	.spotros-gallery-card:nth-child(3n) {
		grid-column: auto;
	}

	.spotros-menu-items {
		grid-template-columns: 1fr;
	}

	.spotros-page-header-meta {
		justify-content: flex-start;
	}

	.spotros-page-header-visual {
		min-height: 340px;
	}
}

@media (max-width: 720px) {
	:root {
		--spotros-header-offset: 6rem;
	}

	.spotros-page { padding-top: 0; }

	.spotros-hero { min-height: 72vh; }
	.spotros-hero-shell { min-height: 72vh; }
	.spotros-hero-copy-panel { padding: 3rem 0 5rem; }
	.spotros-page-home .spotros-stack { margin-top: -2.5rem; }

	.spotros-hero-facts {
		grid-template-columns: 1fr;
	}

	.spotros-feature-list {
		grid-template-columns: 1fr;
	}

	.spotros-gallery-caption-list {
		grid-template-columns: 1fr;
	}

	.spotros-feature-card,
	.spotros-feature-card:first-child,
	.spotros-gallery-card,
	.spotros-gallery-card:first-child,
	.spotros-gallery-card:nth-child(2),
	.spotros-gallery-card:nth-child(3n) {
		grid-column: auto;
	}

	.spotros-nav-list,
	.spotros-menu-nav-list,
	.spotros-button-row,
	.spotros-footer-links,
	.spotros-page-meta {
		gap: 0.5rem;
	}

	.spotros-header-tools {
		width: 100%;
		justify-content: flex-start;
	}

	.spotros-nav-link,
	.spotros-menu-nav a {
		width: auto;
	}

	.spotros-card {
		padding: 1.1rem;
		border-radius: 20px;
	}

	.spotros-hero-title,
	.spotros-page-header h1 {
		font-size: clamp(2.2rem, 10vw, 3.6rem);
		line-height: 1.05;
	}

	.spotros-hero-highlight-list li,
	.spotros-menu-highlight-list li {
		font-size: 0.84rem;
	}

	.spotros-button,
	.spotros-header-cta {
		width: 100%;
		justify-content: center;
	}

	.spotros-hero-layout {
		gap: 1rem;
	}

	.spotros-page-header-visual {
		min-height: 300px;
	}

	.spotros-footer-actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

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

	.spotros-card,
	.spotros-hero-shell,
	.spotros-feature-card,
	.spotros-gallery-card,
	.spotros-faq-item,
	.spotros-hours-list li,
	.spotros-contact-list li,
	.spotros-faq-pair {
		opacity: 1;
		transform: none;
	}

	.spotros-hero-slide {
		transition: none;
	}

	.spotros-hero-slide .spotros-hero-image {
		transform: none;
		transition: none;
	}
}

/* =============================================================
   VELVET-EMBER — Champion Caribbean 1:1 port
   All rules scoped under `.art-velvet-ember` so they override
   earlier defaults without touching existing selectors.
   ============================================================= */

.art-velvet-ember {
	--spotros-font-display: 'Playfair Display', Georgia, serif;
	--spotros-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--spotros-shell-width: 1280px;
}

.art-velvet-ember,
.art-velvet-ember body {
	background: var(--spotros-background);
	color: var(--spotros-text-body);
	font-family: var(--spotros-font-body);
	font-weight: 400;
	line-height: 1.6;
}

.art-velvet-ember .spotros-site-shell {
	background: var(--spotros-background);
	color: var(--spotros-text-body);
}

.art-velvet-ember h1,
.art-velvet-ember h2,
.art-velvet-ember h3,
.art-velvet-ember h4,
.art-velvet-ember .spotros-display {
	font-family: var(--spotros-font-display);
	letter-spacing: -0.01em;
	line-height: 1.1;
	font-weight: 400;
	color: var(--spotros-text);
}

.art-velvet-ember .spotros-display-italic {
	font-family: var(--spotros-font-display);
	font-style: italic;
	font-weight: 400;
}

/* Eyebrow — signature velvet-ember treatment. */
.art-velvet-ember .spotros-eyebrow {
	font-size: 10px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--spotros-accent-strong);
	font-family: var(--spotros-font-body);
	display: block;
	margin: 0;
}

.art-velvet-ember .spotros-eyebrow--wide {
	letter-spacing: 0.4em;
}

.art-velvet-ember .spotros-eyebrow--tight {
	letter-spacing: 0.2em;
}

.art-velvet-ember .spotros-eyebrow--italic-underline {
	font-style: italic;
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(59, 130, 246, 0.3);
}

.art-velvet-ember a {
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
}

.art-velvet-ember a:hover,
.art-velvet-ember a:focus-visible {
	color: var(--spotros-accent-strong);
}

/* ------------------- Navigation ------------------- */

.art-velvet-ember .spotros-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	width: 100%;
	transition: background-color 500ms ease, padding 500ms ease, backdrop-filter 500ms ease, border-color 500ms ease;
	background: transparent;
	padding: 2rem 0;
	border-bottom: 1px solid transparent;
}

.art-velvet-ember .spotros-site-header[data-scroll-state="scrolled"] {
	background: rgba(10, 22, 40, 0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	padding: 1rem 0;
	border-bottom-color: rgba(30, 91, 168, 0.1);
}

.art-velvet-ember .spotros-site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	gap: 2rem;
}

.art-velvet-ember .spotros-brand-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
}

.art-velvet-ember .spotros-brand-mark {
	width: 40px;
	height: 40px;
	border-radius: 2px;
	background: linear-gradient(135deg, #1E5BA8, #3B82F6);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-family: var(--spotros-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	flex-shrink: 0;
}

.spotros-brand-logo {
	height: 40px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	flex-shrink: 0;
}

.art-velvet-ember .spotros-brand-wordmark-group {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.art-velvet-ember .spotros-brand-wordmark {
	font-family: var(--spotros-font-display);
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	color: #E5E7EB;
}

.art-velvet-ember .spotros-brand-tagline {
	font-family: var(--spotros-font-body);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--spotros-accent-strong);
	font-weight: 500;
	margin-top: 2px;
}

/* Desktop nav list. */
.art-velvet-ember .spotros-nav {
	display: none;
	margin: 0;
}

.art-velvet-ember .spotros-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	align-items: center;
}

.art-velvet-ember .spotros-nav-link {
	font-family: var(--spotros-font-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: #E5E7EB;
	font-weight: 500;
	transition: color 200ms ease;
}

.art-velvet-ember .spotros-nav-link:hover,
.art-velvet-ember .spotros-nav-link:focus-visible,
.art-velvet-ember .spotros-nav-link.is-current {
	color: var(--spotros-accent-strong);
}

.art-velvet-ember .spotros-nav-link.is-current {
	font-weight: 700;
}

.art-velvet-ember .spotros-header-cta {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: var(--spotros-accent);
	color: #ffffff;
	padding: 0.85rem 1.5rem;
	font-family: var(--spotros-font-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 600;
	border-radius: 2px;
	transition: background-color 250ms ease;
}

.art-velvet-ember .spotros-header-cta:hover,
.art-velvet-ember .spotros-header-cta:focus-visible {
	background: var(--spotros-accent-strong);
	color: #ffffff;
}

.art-velvet-ember .spotros-language-switcher {
	display: none;
	gap: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #9CA3AF;
}

.art-velvet-ember .spotros-language-switcher .spotros-language-link.is-current {
	color: var(--spotros-accent-strong);
	font-weight: 700;
}

/* Mobile toggle. */
.art-velvet-ember .spotros-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	color: #E5E7EB;
	cursor: pointer;
	margin-left: auto;
}

.art-velvet-ember .spotros-nav-toggle-bars {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	width: 24px;
}

.art-velvet-ember .spotros-nav-toggle-bars span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 250ms ease, opacity 250ms ease;
}

.art-velvet-ember .spotros-site-header[data-nav-open="true"] .spotros-nav-toggle-bars span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.art-velvet-ember .spotros-site-header[data-nav-open="true"] .spotros-nav-toggle-bars span:nth-child(2) {
	opacity: 0;
}

.art-velvet-ember .spotros-site-header[data-nav-open="true"] .spotros-nav-toggle-bars span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Desktop breakpoint: hide toggle, show nav + CTA. */
@media (min-width: 1024px) {
	.art-velvet-ember .spotros-nav-toggle {
		display: none;
	}
	.art-velvet-ember .spotros-nav {
		display: inline-flex;
		align-items: center;
	}
	.art-velvet-ember .spotros-header-cta {
		display: inline-flex;
	}
	.art-velvet-ember .spotros-language-switcher {
		display: inline-flex;
		align-items: center;
	}
}

/* Mobile overlay: fullscreen #0A1628 with centered Playfair links. */
@media (max-width: 1023.98px) {
	.art-velvet-ember .spotros-site-header[data-nav-open="true"] .spotros-nav {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 40;
		background: var(--spotros-background);
		align-items: center;
		justify-content: center;
		max-height: none;
		overflow: visible;
	}
	.art-velvet-ember .spotros-site-header[data-nav-open="true"] .spotros-nav-list {
		flex-direction: column;
		gap: 2rem;
		padding: 4rem 2rem;
		text-align: center;
	}
	.art-velvet-ember .spotros-site-header[data-nav-open="true"] .spotros-nav-link {
		font-family: var(--spotros-font-display);
		font-size: 1.875rem;
		letter-spacing: -0.01em;
		text-transform: none;
		line-height: 1.2;
	}
}

html.spotros-nav-locked,
html.spotros-nav-locked body {
	overflow: hidden;
}

/* ------------------- Buttons ------------------- */

.art-velvet-ember .spotros-velvet-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 2.5rem;
	font-family: var(--spotros-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 2px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
	text-decoration: none;
}

.art-velvet-ember .spotros-velvet-button--solid {
	background: var(--spotros-accent);
	color: #ffffff;
}

.art-velvet-ember .spotros-velvet-button--solid:hover,
.art-velvet-ember .spotros-velvet-button--solid:focus-visible {
	background: var(--spotros-accent-strong);
	color: #ffffff;
}

.art-velvet-ember .spotros-velvet-button--outline {
	background: transparent;
	border-color: rgba(59, 130, 246, 0.4);
	color: #E5E7EB;
}

.art-velvet-ember .spotros-velvet-button--outline:hover,
.art-velvet-ember .spotros-velvet-button--outline:focus-visible {
	border-color: var(--spotros-accent-strong);
	color: #E5E7EB;
}

.art-velvet-ember .spotros-velvet-button--ghost {
	background: transparent;
	border-color: var(--spotros-accent-strong);
	color: var(--spotros-accent-strong);
}

.art-velvet-ember .spotros-velvet-button--ghost:hover,
.art-velvet-ember .spotros-velvet-button--ghost:focus-visible {
	background: var(--spotros-accent-strong);
	color: #ffffff;
}

.art-velvet-ember .spotros-velvet-button-arrow {
	display: inline-block;
	transition: transform 250ms ease;
}

.art-velvet-ember .spotros-velvet-button:hover .spotros-velvet-button-arrow {
	transform: translateX(4px);
}

/* ------------------- Hero ------------------- */

.art-velvet-ember .spotros-velvet-hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--spotros-background);
}

.art-velvet-ember .spotros-velvet-hero-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.art-velvet-ember .spotros-velvet-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.5);
}

.art-velvet-ember .spotros-velvet-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #0A1628 0%, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
	pointer-events: none;
}

.art-velvet-ember .spotros-velvet-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 64rem;
	margin: 5rem auto 0;
	text-align: center;
	padding: 0 1.5rem;
}

.art-velvet-ember .spotros-velvet-hero-eyebrow {
	margin-bottom: 1.5rem;
	animation: spotros-velvet-fade-in 1.2s ease-out forwards;
}

.art-velvet-ember .spotros-velvet-hero-title {
	font-size: clamp(3rem, 7vw, 6rem);
	margin: 0 0 2rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.art-velvet-ember .spotros-velvet-hero-line {
	display: block;
}

.art-velvet-ember .spotros-velvet-hero-line--italic {
	font-style: italic;
	font-weight: 400;
}

.art-velvet-ember .spotros-velvet-hero-copy {
	color: rgba(229, 231, 235, 0.8);
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.6;
	max-width: 32rem;
	margin: 0 auto 2.5rem;
}

.art-velvet-ember .spotros-velvet-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

@keyframes spotros-velvet-fade-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.art-velvet-ember .spotros-velvet-hero-eyebrow {
		animation: none;
	}
}

/* ------------------- Late Night Band ------------------- */

.art-velvet-ember .spotros-velvet-band {
	background: rgba(30, 91, 168, 0.1);
	border-top: 1px solid rgba(30, 91, 168, 0.2);
	border-bottom: 1px solid rgba(30, 91, 168, 0.2);
	padding: 3rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-band-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	gap: 2rem;
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
	text-align: center;
}

.art-velvet-ember .spotros-velvet-band-item {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.art-velvet-ember .spotros-velvet-band-icon {
	color: var(--spotros-accent-strong);
	flex-shrink: 0;
	display: inline-flex;
}

.art-velvet-ember .spotros-velvet-band-kicker {
	color: var(--spotros-accent-strong);
	margin-bottom: 0.25rem;
}

.art-velvet-ember .spotros-velvet-band-line {
	font-size: 1.25rem;
	color: #E5E7EB;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-band-rule {
	display: none;
	width: 3rem;
	height: 1px;
	background: rgba(59, 130, 246, 0.3);
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-band-inner {
		flex-direction: row;
		text-align: left;
		gap: 1rem;
	}
	.art-velvet-ember .spotros-velvet-band-rule {
		display: block;
	}
}

/* ------------------- Our Story ------------------- */

.art-velvet-ember .spotros-velvet-story {
	padding: 8rem 1.5rem;
	background: var(--spotros-background);
}

.art-velvet-ember .spotros-velvet-story-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 5rem;
	align-items: center;
}

.art-velvet-ember .spotros-velvet-story-figure {
	position: relative;
	order: 2;
}

.art-velvet-ember .spotros-velvet-story-figure-frame {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 2px;
}

.art-velvet-ember .spotros-velvet-story-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	transition: transform 2s ease;
}

.art-velvet-ember .spotros-velvet-story-figure:hover .spotros-velvet-story-image {
	transform: scale(1);
}

.art-velvet-ember .spotros-velvet-story-figure-deco {
	display: none;
	position: absolute;
	bottom: -2.5rem;
	right: -2.5rem;
	width: 16rem;
	height: 16rem;
	border: 1px solid rgba(59, 130, 246, 0.2);
	z-index: -1;
}

.art-velvet-ember .spotros-velvet-story-copy {
	order: 1;
}

.art-velvet-ember .spotros-velvet-story-copy .spotros-eyebrow {
	margin-bottom: 1.5rem;
}

.art-velvet-ember .spotros-velvet-story-title {
	font-size: clamp(2.25rem, 4vw, 3.75rem);
	margin: 0 0 2rem;
}

.art-velvet-ember .spotros-velvet-story-paragraph {
	color: #9CA3AF;
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.6;
	margin: 0 0 2rem;
}

.art-velvet-ember .spotros-velvet-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--spotros-font-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: #E5E7EB;
	font-weight: 600;
	margin-top: 1rem;
	transition: color 250ms ease;
}

.art-velvet-ember .spotros-velvet-link:hover,
.art-velvet-ember .spotros-velvet-link:focus-visible {
	color: var(--spotros-accent-strong);
}

.art-velvet-ember .spotros-velvet-link-arrow {
	display: inline-block;
	transition: transform 250ms ease;
}

.art-velvet-ember .spotros-velvet-link:hover .spotros-velvet-link-arrow {
	transform: translateX(6px);
}

@media (min-width: 1024px) {
	.art-velvet-ember .spotros-velvet-story-inner {
		grid-template-columns: 1fr 1fr;
	}
	.art-velvet-ember .spotros-velvet-story-figure {
		order: 1;
	}
	.art-velvet-ember .spotros-velvet-story-copy {
		order: 2;
	}
	.art-velvet-ember .spotros-velvet-story-figure-deco {
		display: block;
	}
}

/* ------------------- Signature Plates ------------------- */

.art-velvet-ember .spotros-velvet-plates {
	background: var(--spotros-surface);
	padding: 8rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-plates-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
}

.art-velvet-ember .spotros-velvet-plates-heading {
	text-align: center;
	margin-bottom: 5rem;
}

.art-velvet-ember .spotros-velvet-plates-heading .spotros-eyebrow {
	margin-bottom: 1rem;
}

.art-velvet-ember .spotros-velvet-plates-title {
	font-size: clamp(2.25rem, 4vw, 3rem);
	margin: 0;
}

.art-velvet-ember .spotros-velvet-plates-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: end;
}

.art-velvet-ember .spotros-velvet-plate-hero-frame {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	margin-bottom: 2rem;
}

.art-velvet-ember .spotros-velvet-plate-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s ease;
}

.art-velvet-ember .spotros-velvet-plate-hero:hover .spotros-velvet-plate-hero-image {
	transform: scale(1.05);
}

.art-velvet-ember .spotros-velvet-plate-hero-line {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
}

.art-velvet-ember .spotros-velvet-plate-hero-name {
	font-size: 1.875rem;
	margin: 0 0 0.5rem;
}

.art-velvet-ember .spotros-velvet-plate-hero-desc {
	color: #9CA3AF;
	font-size: 0.875rem;
	font-weight: 300;
	max-width: 28rem;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-plate-hero-price {
	font-size: 1.5rem;
	color: var(--spotros-accent-strong);
	flex-shrink: 0;
	display: none; /* hidden until verified in-store prices are available */
}

.art-velvet-ember .spotros-velvet-plate-list {
	padding-bottom: 3rem;
}

.art-velvet-ember .spotros-velvet-plate-list-items {
	list-style: none;
	margin: 0;
	padding: 0 0 0 2.5rem;
	border-left: 1px solid rgba(59, 130, 246, 0.2);
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.art-velvet-ember .spotros-velvet-plate-list-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.5rem;
}

.art-velvet-ember .spotros-velvet-plate-list-name {
	font-size: 1.5rem;
	margin: 0;
	transition: color 250ms ease;
}

.art-velvet-ember .spotros-velvet-plate-list-item:hover .spotros-velvet-plate-list-name {
	color: var(--spotros-accent-strong);
}

.art-velvet-ember .spotros-velvet-plate-list-price {
	font-size: 1.125rem;
	color: var(--spotros-accent-strong);
	flex-shrink: 0;
	display: none; /* hidden until verified in-store prices are available */
}

.art-velvet-ember .spotros-velvet-plate-list-desc {
	color: #9CA3AF;
	font-size: 0.875rem;
	font-weight: 300;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-plate-list-cta {
	margin-top: 4rem;
	text-align: center;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-plates-grid {
		grid-template-columns: repeat(12, 1fr);
		gap: 3rem;
	}
	.art-velvet-ember .spotros-velvet-plate-hero {
		grid-column: span 7 / span 7;
	}
	.art-velvet-ember .spotros-velvet-plate-list {
		grid-column: span 5 / span 5;
	}
	.art-velvet-ember .spotros-velvet-plate-list-cta {
		text-align: left;
	}
}

/* ------------------- Atmosphere ------------------- */

.art-velvet-ember .spotros-velvet-atmosphere {
	padding: 8rem 1.5rem;
	overflow: hidden;
	background: var(--spotros-background);
}

.art-velvet-ember .spotros-velvet-atmosphere-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
}

.art-velvet-ember .spotros-velvet-atmosphere-head {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 4rem;
	gap: 2rem;
}

.art-velvet-ember .spotros-velvet-atmosphere-head .spotros-eyebrow {
	margin-bottom: 1rem;
}

.art-velvet-ember .spotros-velvet-atmosphere-head > div:first-child {
	max-width: 36rem;
	align-self: flex-start;
}

.art-velvet-ember .spotros-velvet-atmosphere-title {
	font-size: clamp(2.25rem, 4vw, 3.75rem);
	line-height: 1.1;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-atmosphere-follow {
	font-family: var(--spotros-font-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: #9CA3AF;
	border-bottom: 1px solid rgba(59, 130, 246, 0.3);
	padding-bottom: 0.5rem;
	transition: color 250ms ease;
}

.art-velvet-ember .spotros-velvet-atmosphere-follow:hover,
.art-velvet-ember .spotros-velvet-atmosphere-follow:focus-visible {
	color: #E5E7EB;
}

.art-velvet-ember .spotros-velvet-atmosphere-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.art-velvet-ember .spotros-velvet-atmosphere-cell {
	margin: 0;
	overflow: hidden;
	background: var(--spotros-surface);
	aspect-ratio: 1 / 1;
}

.art-velvet-ember .spotros-velvet-atmosphere-cell--portrait {
	aspect-ratio: 3 / 4;
}

.art-velvet-ember .spotros-velvet-atmosphere-cell img,
.art-velvet-ember .spotros-velvet-atmosphere-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms ease;
}

.art-velvet-ember .spotros-velvet-atmosphere-cell:hover .spotros-velvet-atmosphere-image,
.art-velvet-ember .spotros-velvet-atmosphere-cell:hover img {
	transform: scale(1.1);
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-atmosphere-head {
		flex-direction: row;
		align-items: flex-end;
	}
	.art-velvet-ember .spotros-velvet-atmosphere-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
	}
	.art-velvet-ember .spotros-velvet-atmosphere-cell--portrait {
		aspect-ratio: 1 / 1;
		transform: translateY(3rem);
	}
}

/* ------------------- Hours & Location ------------------- */

.art-velvet-ember .spotros-velvet-location {
	background: var(--spotros-surface);
	padding: 8rem 0;
	position: relative;
}

.art-velvet-ember .spotros-velvet-location-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 5rem;
}

.art-velvet-ember .spotros-velvet-location-col {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.art-velvet-ember .spotros-velvet-location-col > .spotros-eyebrow {
	margin-bottom: 2rem;
}

.art-velvet-ember .spotros-velvet-location-heading {
	font-size: 1.875rem;
	margin: 0 0 1rem;
}

.art-velvet-ember .spotros-velvet-location-address {
	color: #9CA3AF;
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.7;
	margin: 0 0 1.5rem;
}

.art-velvet-ember .spotros-velvet-location-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.art-velvet-ember .spotros-velvet-location-actions .spotros-velvet-button {
	padding: 0.85rem 2rem;
}

.art-velvet-ember .spotros-velvet-hours {
	max-width: 20rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-hours-pair {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	color: #E5E7EB;
}

.art-velvet-ember .spotros-velvet-hours-pair dt {
	margin: 0;
}

.art-velvet-ember .spotros-velvet-hours-pair dd {
	margin: 0;
}

.art-velvet-ember .spotros-velvet-hours-pair.is-closed dt,
.art-velvet-ember .spotros-velvet-hours-pair.is-closed dd {
	color: #9CA3AF;
}

.art-velvet-ember .spotros-velvet-hours-pair.is-peak dt {
	color: var(--spotros-accent-strong);
	font-weight: 700;
}

.art-velvet-ember .spotros-velvet-hours-pair.is-peak dd {
	font-weight: 500;
}

.art-velvet-ember .spotros-velvet-location-map {
	position: relative;
	height: 500px;
	width: 100%;
	background: var(--spotros-background);
	border: 1px solid rgba(59, 130, 246, 0.1);
	overflow: hidden;
}

.art-velvet-ember .spotros-velvet-location-map img,
.art-velvet-ember .spotros-velvet-location-map-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	opacity: 0.4;
	mix-blend-mode: luminosity;
}

.art-velvet-ember .spotros-velvet-location-pin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--spotros-accent);
	color: #ffffff;
	padding: 1.5rem;
	border-radius: 9999px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1024px) {
	.art-velvet-ember .spotros-velvet-location-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* ------------------- Online Order ------------------- */

.art-velvet-ember .spotros-velvet-order {
	padding: 6rem 1.5rem;
	background: var(--spotros-background);
}

.art-velvet-ember .spotros-velvet-order-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
}

.art-velvet-ember .spotros-velvet-order-head {
	text-align: center;
	margin-bottom: 4rem;
}

.art-velvet-ember .spotros-velvet-order-head .spotros-eyebrow {
	margin-bottom: 1rem;
}

.art-velvet-ember .spotros-velvet-order-title {
	font-size: clamp(2.25rem, 4vw, 3rem);
	margin: 0;
}

.art-velvet-ember .spotros-velvet-order-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.art-velvet-ember .spotros-velvet-order-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 2rem;
	text-align: center;
	border: 1px solid rgba(59, 130, 246, 0.3);
	border-radius: 2px;
	transition: border-color 250ms ease, background-color 250ms ease;
	color: inherit;
	text-decoration: none;
}

.art-velvet-ember .spotros-velvet-order-card:hover,
.art-velvet-ember .spotros-velvet-order-card:focus-visible {
	border-color: var(--spotros-accent-strong);
	background: rgba(59, 130, 246, 0.06);
}

.art-velvet-ember .spotros-velvet-order-card-label {
	font-size: 1.5rem;
	color: var(--spotros-text);
}

.art-velvet-ember .spotros-velvet-order-card-sub {
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #9CA3AF;
}

.art-velvet-ember .spotros-velvet-order-card-arrow {
	color: var(--spotros-accent-strong);
	transition: transform 250ms ease;
}

.art-velvet-ember .spotros-velvet-order-card:hover .spotros-velvet-order-card-arrow {
	transform: translateX(6px);
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-order-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.art-velvet-ember .spotros-velvet-order-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Direct phone primary block */
.art-velvet-ember .spotros-velvet-order-direct {
	background: var(--spotros-surface);
	border: 1px solid var(--spotros-border-strong);
	border-left: 3px solid var(--spotros-accent-strong);
	border-radius: 2px;
	padding: clamp(2rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-order-direct {
		grid-template-columns: 1.4fr auto;
	}
}

.art-velvet-ember .spotros-velvet-order-direct-copy {
	display: flex;
	flex-direction: column;
}

.art-velvet-ember .spotros-velvet-order-direct-eyebrow {
	color: var(--spotros-accent-strong);
	margin-bottom: 0.5rem;
}

.art-velvet-ember .spotros-velvet-order-direct-title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.1;
	color: var(--spotros-text);
	margin: 0.5rem 0 1rem;
}

.art-velvet-ember .spotros-velvet-order-direct-desc {
	color: var(--spotros-muted);
	font-weight: 300;
	line-height: 1.6;
	margin: 0;
	max-width: 36rem;
}

.art-velvet-ember .spotros-velvet-order-direct-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: stretch;
}

.art-velvet-ember .spotros-velvet-order-direct-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem 2rem;
	font-size: 0.875rem;
}

/* Divider between primary and platforms */
.art-velvet-ember .spotros-velvet-order-divider {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 3rem 0 2rem;
}

.art-velvet-ember .spotros-velvet-order-divider::before,
.art-velvet-ember .spotros-velvet-order-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--spotros-border-strong);
}

.art-velvet-ember .spotros-velvet-order-divider-text {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--spotros-muted);
}

/* Platforms list alias (styles delegated to .spotros-velvet-order-grid) */
.art-velvet-ember .spotros-velvet-order-platforms {
	list-style: none;
	padding: 0;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-order-platform {
	list-style: none;
}

/* ------------------- Menu page ------------------- */

.art-velvet-ember .spotros-page-menu--velvet,
.art-velvet-ember .spotros-page-about--velvet {
	padding-top: 8rem;
}

.art-velvet-ember .spotros-velvet-menu-hero {
	padding: 0 1.5rem;
	margin-bottom: 5rem;
}

.art-velvet-ember .spotros-velvet-menu-hero-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
}

.art-velvet-ember .spotros-velvet-menu-hero-title {
	font-size: clamp(3rem, 6vw, 4.5rem);
	margin: 0 0 2rem;
	max-width: 36rem;
}

.art-velvet-ember .spotros-velvet-menu-hero-copy {
	color: #9CA3AF;
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.7;
	max-width: 36rem;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-menu-hero-disclaimer {
	color: #6B7280;
	font-size: 0.8125rem;
	font-weight: 300;
	font-style: italic;
	margin: 1rem 0 0;
}

.art-velvet-ember .spotros-velvet-menu-tabs {
	position: sticky;
	top: 88px;
	z-index: 30;
	background: rgba(10, 22, 40, 0.95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-top: 1px solid rgba(59, 130, 246, 0.1);
	border-bottom: 1px solid rgba(59, 130, 246, 0.1);
	padding: 1.5rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-menu-tabs-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
}

.art-velvet-ember .spotros-velvet-menu-tabs-list {
	display: flex;
	list-style: none;
	gap: 2rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.art-velvet-ember .spotros-velvet-menu-tabs-list::-webkit-scrollbar {
	display: none;
}

.art-velvet-ember .spotros-velvet-menu-tab {
	font-family: var(--spotros-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #9CA3AF;
	white-space: nowrap;
	transition: color 250ms ease;
	font-weight: 500;
}

.art-velvet-ember .spotros-velvet-menu-tab:hover,
.art-velvet-ember .spotros-velvet-menu-tab:focus-visible {
	color: #E5E7EB;
}

.art-velvet-ember .spotros-velvet-menu-category {
	padding: 6rem 1.5rem;
	scroll-margin-top: 160px;
}

.art-velvet-ember .spotros-velvet-menu-category-inner {
	max-width: 64rem;
	margin: 0 auto;
}

.art-velvet-ember .spotros-velvet-menu-category-head {
	margin-bottom: 4rem;
	text-align: center;
}

.art-velvet-ember .spotros-velvet-menu-category-head .spotros-eyebrow {
	margin-bottom: 1rem;
}

.art-velvet-ember .spotros-velvet-menu-category-title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0 0 1rem;
}

.art-velvet-ember .spotros-velvet-menu-category-desc {
	color: #9CA3AF;
	font-size: 1rem;
	font-weight: 300;
	max-width: 36rem;
	margin: 0 auto;
}

.art-velvet-ember .spotros-velvet-menu-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 5rem;
	row-gap: 4rem;
}

.art-velvet-ember .spotros-velvet-menu-item {
	position: relative;
}

.art-velvet-ember .spotros-velvet-menu-item-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.art-velvet-ember .spotros-velvet-menu-item-name {
	font-size: 1.5rem;
	margin: 0;
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-menu-item-name {
		font-size: 1.875rem;
	}
	.art-velvet-ember .spotros-velvet-menu-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.art-velvet-ember .spotros-velvet-menu-item-badge {
	font-family: var(--spotros-font-body);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--spotros-accent-strong);
	border: 1px solid rgba(59, 130, 246, 0.3);
	padding: 0.15rem 0.5rem;
	font-weight: 700;
}

.art-velvet-ember .spotros-velvet-menu-item-price {
	font-size: 1.25rem;
	color: var(--spotros-accent-strong);
	margin-left: 1rem;
	flex-shrink: 0;
	display: none; /* hidden until verified in-store prices are available */
}

/* ------------------- Drinks page ------------------- */

/* Card layout for cocktails and mocktails */
.art-velvet-ember .spotros-velvet-drinks-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

@media (max-width: 767.98px) {
	.art-velvet-ember .spotros-velvet-drinks-cards {
		grid-template-columns: 1fr;
	}
}

.art-velvet-ember .spotros-velvet-drinks-card {
	border: 1px solid rgba(30, 91, 168, 0.15);
	border-radius: 0.5rem;
	padding: 1.75rem;
	transition: border-color 300ms ease;
}

.art-velvet-ember .spotros-velvet-drinks-card:hover {
	border-color: rgba(30, 91, 168, 0.35);
}

.art-velvet-ember .spotros-velvet-drinks-card-name {
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}

.art-velvet-ember .spotros-velvet-drinks-card-desc {
	color: #9CA3AF;
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.6;
	margin: 0;
}

/* Compact list for spirits, beers, etc. */
.art-velvet-ember .spotros-velvet-drinks-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

@media (max-width: 767.98px) {
	.art-velvet-ember .spotros-velvet-drinks-list {
		grid-template-columns: 1fr;
	}
}

.art-velvet-ember .spotros-velvet-drinks-list-item {
	padding: 1rem 0;
	border-bottom: 1px solid rgba(30, 91, 168, 0.08);
}

.art-velvet-ember .spotros-velvet-drinks-list-item:nth-child(odd) {
	padding-right: 2rem;
}

.art-velvet-ember .spotros-velvet-drinks-list-item:nth-child(even) {
	padding-left: 2rem;
	border-left: 1px solid rgba(30, 91, 168, 0.08);
}

@media (max-width: 767.98px) {
	.art-velvet-ember .spotros-velvet-drinks-list-item:nth-child(odd) {
		padding-right: 0;
	}
	.art-velvet-ember .spotros-velvet-drinks-list-item:nth-child(even) {
		padding-left: 0;
		border-left: none;
	}
}

.art-velvet-ember .spotros-velvet-drinks-list-name {
	display: block;
	font-family: var(--spotros-font-display);
	font-size: 1.125rem;
	color: var(--spotros-foreground);
	margin-bottom: 0.25rem;
}

.art-velvet-ember .spotros-velvet-drinks-list-dots {
	display: none;
}

.art-velvet-ember .spotros-velvet-drinks-list-desc {
	display: block;
	color: #9CA3AF;
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.5;
}

/* Subcategory styling */
.art-velvet-ember .spotros-velvet-drinks-subcategory {
	margin-bottom: 3rem;
}

.art-velvet-ember .spotros-velvet-drinks-subcategory-title {
	font-size: 1.5rem;
	color: var(--spotros-accent-strong);
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(30, 91, 168, 0.15);
}

/* Drinks section spacing */
.art-velvet-ember .spotros-velvet-drinks-section {
	padding-bottom: 2rem;
}

.art-velvet-ember .spotros-velvet-menu-item-desc {
	color: #9CA3AF;
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.7;
	margin: 0 0 1rem;
}

.art-velvet-ember .spotros-velvet-menu-item-badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.art-velvet-ember .spotros-velvet-menu-item-tag {
	display: inline-flex;
	font-size: 0.6875rem;
	padding: 0.1rem 0.5rem;
	border: 1px solid rgba(59, 130, 246, 0.2);
	color: var(--spotros-accent-strong);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.art-velvet-ember .spotros-velvet-menu-item.is-featured .spotros-velvet-menu-item-rule {
	display: block;
	height: 1px;
	width: 0;
	background: rgba(59, 130, 246, 0.2);
	transition: width 700ms ease;
	margin-top: 1rem;
}

.art-velvet-ember .spotros-velvet-menu-item.is-featured:hover .spotros-velvet-menu-item-rule {
	width: 100%;
}

.art-velvet-ember .spotros-velvet-menu-foot {
	padding: 6rem 1.5rem;
	border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.art-velvet-ember .spotros-velvet-menu-foot-inner {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
}

.art-velvet-ember .spotros-velvet-menu-foot-icon {
	display: inline-flex;
	color: var(--spotros-accent-strong);
	opacity: 0.5;
	margin-bottom: 1.5rem;
}

.art-velvet-ember .spotros-velvet-menu-foot-text {
	color: #9CA3AF;
	font-size: 0.875rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.7;
	margin: 0 0 3rem;
}

.art-velvet-ember .spotros-velvet-menu-faq {
	padding: 6rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-menu-faq-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
}

/* ------------------- About page ------------------- */

.art-velvet-ember .spotros-velvet-about-hero {
	padding: 0 1.5rem;
	margin-bottom: 8rem;
}

.art-velvet-ember .spotros-velvet-about-hero-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 5rem;
	align-items: center;
}

.art-velvet-ember .spotros-velvet-about-hero-copy .spotros-eyebrow {
	margin-bottom: 1.5rem;
}

.art-velvet-ember .spotros-velvet-about-hero-title {
	font-size: clamp(3rem, 7vw, 6rem);
	margin: 0 0 3rem;
	line-height: 1.1;
}

.art-velvet-ember .spotros-velvet-about-hero-paragraphs p {
	color: #9CA3AF;
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.7;
	margin: 0 0 2rem;
	max-width: 32rem;
}

.art-velvet-ember .spotros-velvet-about-hero-figure-frame {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 2px;
	position: relative;
}

.art-velvet-ember .spotros-velvet-about-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(0.75);
	transition: filter 1s ease;
}

.art-velvet-ember .spotros-velvet-about-hero-figure-frame:hover .spotros-velvet-about-hero-image {
	filter: grayscale(0) brightness(1);
}

.art-velvet-ember .spotros-velvet-about-hero-figure-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 20px solid rgba(10, 22, 40, 0.2);
	pointer-events: none;
}

@media (min-width: 1024px) {
	.art-velvet-ember .spotros-velvet-about-hero-inner {
		grid-template-columns: 7fr 5fr;
	}
}

.art-velvet-ember .spotros-velvet-about-values {
	background: var(--spotros-surface);
	padding: 8rem 1.5rem;
	border-top: 1px solid rgba(59, 130, 246, 0.1);
	border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.art-velvet-ember .spotros-velvet-about-values-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-about-values-inner {
		grid-template-columns: repeat(3, 1fr);
	}
}

.art-velvet-ember .spotros-velvet-about-value-card {
	text-align: center;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-about-value-card {
		text-align: left;
	}
}

.art-velvet-ember .spotros-velvet-about-value-title {
	font-size: 1.5rem;
	margin: 0 0 1rem;
	color: #E5E7EB;
}

.art-velvet-ember .spotros-velvet-about-value-body {
	color: #9CA3AF;
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.7;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-about-info {
	padding: 8rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-about-info-frame {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
	background: var(--spotros-surface);
	border: 1px solid rgba(59, 130, 246, 0.1);
	padding: 3rem 1.5rem;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-about-info-frame {
		padding: 5rem;
	}
}

.art-velvet-ember .spotros-velvet-about-info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 5rem;
}

@media (min-width: 1024px) {
	.art-velvet-ember .spotros-velvet-about-info-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.art-velvet-ember .spotros-velvet-about-info-title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	margin: 0 0 2rem;
	line-height: 1.15;
}

.art-velvet-ember .spotros-velvet-about-info-rows {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.art-velvet-ember .spotros-velvet-about-info-row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.art-velvet-ember .spotros-velvet-about-info-icon {
	color: var(--spotros-accent-strong);
	flex-shrink: 0;
	margin-top: 0.25rem;
	display: inline-flex;
}

.art-velvet-ember .spotros-velvet-about-info-strong {
	color: #E5E7EB;
	font-weight: 500;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-about-info-light {
	color: #9CA3AF;
	font-weight: 300;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-about-info-actions {
	margin-top: 3rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.art-velvet-ember .spotros-velvet-about-info-col--hours {
	border-left: none;
	padding-left: 0;
}

@media (min-width: 1024px) {
	.art-velvet-ember .spotros-velvet-about-info-col--hours {
		border-left: 1px solid rgba(59, 130, 246, 0.2);
		padding-left: 5rem;
	}
}

.art-velvet-ember .spotros-velvet-about-info-col--hours .spotros-eyebrow {
	margin-bottom: 2rem;
}

.art-velvet-ember .spotros-velvet-about-hours {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-about-hours-pair {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	color: #E5E7EB;
}

.art-velvet-ember .spotros-velvet-about-hours-pair dt,
.art-velvet-ember .spotros-velvet-about-hours-pair dd {
	margin: 0;
}

.art-velvet-ember .spotros-velvet-about-hours-pair.is-closed dt {
	color: #9CA3AF;
}

.art-velvet-ember .spotros-velvet-about-hours-pair.is-closed dd {
	color: #E5E7EB;
}

.art-velvet-ember .spotros-velvet-about-hours-pair.is-peak dt,
.art-velvet-ember .spotros-velvet-about-hours-pair.is-peak dd {
	color: var(--spotros-accent-strong);
	font-weight: 700;
}

.art-velvet-ember .spotros-velvet-about-faq {
	padding: 6rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-about-faq-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
}

/* ------------------- FAQ ------------------- */

.art-velvet-ember .spotros-velvet-faq-block {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.art-velvet-ember .spotros-velvet-faq-heading .spotros-eyebrow {
	margin-bottom: 1rem;
}

.art-velvet-ember .spotros-velvet-faq-title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	margin: 0;
}

.art-velvet-ember .spotros-velvet-faq-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin: 0;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-faq-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.art-velvet-ember .spotros-velvet-faq-pair {
	padding-top: 2rem;
	border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.art-velvet-ember .spotros-velvet-faq-kicker {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--spotros-accent-strong);
	font-family: var(--spotros-font-body);
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.art-velvet-ember .spotros-velvet-faq-question {
	font-size: 1.5rem;
	margin: 0 0 1rem;
}

.art-velvet-ember .spotros-velvet-faq-answer {
	color: #9CA3AF;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
	margin: 0;
}

/* ------------------- Footer ------------------- */

.art-velvet-ember .spotros-site-footer {
	background: var(--spotros-surface);
	border-top: 1px solid rgba(59, 130, 246, 0.1);
	padding: 5rem 1.5rem 2.5rem;
}

.art-velvet-ember .spotros-site-footer::before {
	display: none;
	content: none;
}

.art-velvet-ember .spotros-site-footer-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-site-footer-inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
		/*
		 * The shared base rule at the top of this file styles
		 * .spotros-site-header-inner and .spotros-site-footer-inner together as a
		 * FLEX row with align-items:center. This override switches the footer to
		 * grid but inherited that centring, so each column was centred in its own
		 * row track and the LOCATION and HOURS headings never shared a top edge
		 * with the brand — measured 6927 / 6991 / 6916 at 768px. Columns of
		 * different heights want their tops aligned, not their middles.
		 */
		align-items: start;
	}
}

/* ===========================================================================
   FOOTER — CENTRED WHILE STACKED (velvet-ember)

   Below 768px the three footer columns become one, and brand, Location and
   Hours all sat against the left gutter. Centred on a single axis while it is a
   single column. The three-column layout at 768px and up keeps its own left
   edges, which is what a column grid wants.
   =========================================================================== */
@media (max-width: 767.98px) {
	.art-velvet-ember .spotros-site-footer-inner {
		justify-items: center;
		text-align: center;
	}

	.art-velvet-ember .spotros-velvet-footer-social {
		justify-content: center;
	}

	/* The day/time pair keeps its two-column shape — a time column that stopped
	   lining up would be harder to read, not easier — but the list as a whole is
	   sized to its content and centred, instead of stretching the full width with
	   the times flung out to the right edge. */
	.art-velvet-ember .spotros-velvet-footer-hours {
		width: max-content;
		max-width: 100%;
		margin-inline: auto;
		column-gap: 2rem;
		text-align: left;
	}
}

.art-velvet-ember .spotros-velvet-footer-name {
	font-size: 1.5rem;
	margin: 0 0 1rem;
	color: #ffffff;
	letter-spacing: -0.01em;
}

.art-velvet-ember .spotros-velvet-footer-tagline {
	color: #9CA3AF;
	font-size: 0.875rem;
	line-height: 1.7;
	margin: 0;
	max-width: 20rem;
}

.art-velvet-ember .spotros-velvet-footer-social {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	gap: 1rem;
}

.art-velvet-ember .spotros-velvet-footer-social a,
.art-velvet-ember .spotros-velvet-footer-social-link {
	color: #9CA3AF;
	font-size: 0.875rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 250ms ease;
}

.art-velvet-ember .spotros-velvet-footer-social a:hover,
.art-velvet-ember .spotros-velvet-footer-social a:focus-visible,
.art-velvet-ember .spotros-velvet-footer-social-link:hover,
.art-velvet-ember .spotros-velvet-footer-social-link:focus-visible {
	color: var(--spotros-accent-strong);
}

.art-velvet-ember .spotros-velvet-footer-social-link svg {
	display: block;
}

.art-velvet-ember .spotros-velvet-footer-col .spotros-eyebrow {
	margin-bottom: 1.5rem;
}

.art-velvet-ember .spotros-velvet-footer-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.art-velvet-ember .spotros-velvet-footer-link {
	color: #E5E7EB;
	font-size: 0.875rem;
	line-height: 1.6;
	text-decoration: none;
	transition: color 250ms ease;
}

.art-velvet-ember .spotros-velvet-footer-link:hover,
.art-velvet-ember .spotros-velvet-footer-link:focus-visible {
	color: var(--spotros-accent-strong);
}

/*
 * auto for the day label, the remainder for the value. An even 1fr 1fr split
 * gave the value 101px inside the 3-up grid at 768px, which is less than the
 * longest range needs, so every trading day broke after the hyphen — "11:00 am -"
 * with "10:00 pm" beneath it, five times over, from 768px to about 965px. The day
 * labels are short and fixed; the values are what need the room.
 */
.art-velvet-ember .spotros-velvet-footer-hours {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	row-gap: 0.5rem;
	margin: 0;
	font-size: 0.875rem;
}

.art-velvet-ember .spotros-velvet-footer-hours-pair {
	display: contents;
}

.art-velvet-ember .spotros-velvet-footer-hours-pair dt {
	color: #9CA3AF;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-footer-hours-pair dd {
	color: #E5E7EB;
	text-align: right;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-footer-hours-pair.is-peak dt {
	color: var(--spotros-accent-strong);
}

.art-velvet-ember .spotros-velvet-footer-hours-pair.is-peak dd {
	font-weight: 500;
}

.art-velvet-ember .spotros-velvet-footer-bottom {
	max-width: var(--spotros-shell-width);
	margin: 5rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid rgba(229, 231, 235, 0.05);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: #9CA3AF;
	font-family: var(--spotros-font-body);
}

.art-velvet-ember .spotros-velvet-footer-bottom p {
	margin: 0;
}

/*
 * This row never declared flex-wrap, so it could not break to a second line. With
 * four items and no room, every <li> was squeezed to its min-content instead and
 * the credit shattered down the middle of the phrase — "POWERED" / "BY" /
 * "SPOTROS" stacked at 375px, two lines at 768px. Wrapping is the behaviour the
 * other three art directions already have. Centred because the row sits inside a
 * column that centres everything else in it.
 */
.art-velvet-ember .spotros-velvet-footer-utility {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 0.75rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-footer-utility a {
	color: inherit;
	text-decoration: none;
	transition: color 250ms ease;
}

.art-velvet-ember .spotros-velvet-footer-utility a:hover,
.art-velvet-ember .spotros-velvet-footer-utility a:focus-visible {
	color: #E5E7EB;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-footer-bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* ------------------- Hide legacy blocks when in velvet-ember ------------------- */

.art-velvet-ember .spotros-site-header::before,
.art-velvet-ember .spotros-site-header::after {
	display: none;
	content: none;
}

.art-velvet-ember .spotros-site-header .spotros-brand-block,
.art-velvet-ember .spotros-site-header .spotros-header-meta,
.art-velvet-ember .spotros-site-header .spotros-header-tools {
	all: unset;
	display: revert;
}

/* Page-level reset: the old templates added shell padding that pushes content
   down. Remove it so the fixed nav overlays hero. */
.art-velvet-ember .spotros-page-home--velvet {
	padding: 0;
	margin: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.art-velvet-ember .spotros-velvet-atmosphere-cell img,
	.art-velvet-ember .spotros-velvet-atmosphere-image,
	.art-velvet-ember .spotros-velvet-plate-hero-image,
	.art-velvet-ember .spotros-velvet-story-image,
	.art-velvet-ember .spotros-velvet-about-hero-image,
	.art-velvet-ember .spotros-velvet-menu-item-rule,
	.art-velvet-ember .spotros-velvet-button-arrow,
	.art-velvet-ember .spotros-velvet-link-arrow,
	.art-velvet-ember .spotros-velvet-order-card-arrow,
	.art-velvet-ember .spotros-velvet-pe-hero-eyebrow,
	.art-velvet-ember .spotros-velvet-pe-type-card,
	.art-velvet-ember .spotros-velvet-pe-type-icon {
		transition: none;
		transform: none;
		animation: none;
	}
}

/* ------------------- Private Events page ------------------- */

.art-velvet-ember .spotros-page-private-events--velvet {
	padding: 0;
	margin: 0;
}

.art-velvet-ember .spotros-velvet-pe-hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--spotros-background);
}

.art-velvet-ember .spotros-velvet-pe-hero-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.art-velvet-ember .spotros-velvet-pe-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.5);
}

.art-velvet-ember .spotros-velvet-pe-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #0A1628 0%, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
	pointer-events: none;
}

.art-velvet-ember .spotros-velvet-pe-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 64rem;
	margin: 5rem auto 0;
	text-align: center;
	padding: 0 1.5rem;
}

.art-velvet-ember .spotros-velvet-pe-hero-eyebrow {
	margin-bottom: 1.5rem;
	animation: spotros-velvet-fade-in 1.2s ease-out forwards;
}

.art-velvet-ember .spotros-velvet-pe-hero-title {
	font-size: clamp(3rem, 7vw, 6rem);
	margin: 0 0 2rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.art-velvet-ember .spotros-velvet-pe-hero-line {
	display: block;
}

.art-velvet-ember .spotros-velvet-pe-hero-line--italic {
	font-style: italic;
	font-weight: 400;
}

.art-velvet-ember .spotros-velvet-pe-hero-copy {
	color: rgba(229, 231, 235, 0.8);
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.6;
	max-width: 32rem;
	margin: 0 auto 2.5rem;
}

.art-velvet-ember .spotros-velvet-pe-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

/* Section head used across types / features / process / final CTA. */
.art-velvet-ember .spotros-velvet-pe-head {
	max-width: var(--spotros-shell-width);
	margin: 0 auto 5rem;
}

.art-velvet-ember .spotros-velvet-pe-head--center {
	text-align: center;
}

.art-velvet-ember .spotros-velvet-pe-head .spotros-eyebrow {
	margin-bottom: 1rem;
}

.art-velvet-ember .spotros-velvet-pe-head-title {
	font-size: clamp(2.25rem, 4vw, 3rem);
	margin: 0 0 1.5rem;
	line-height: 1.15;
	color: #FFFFFF;
}

.art-velvet-ember .spotros-velvet-pe-head-lead {
	color: #9CA3AF;
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.7;
	margin: 0 auto;
	max-width: 32rem;
}

/* ---- Event types ---- */

.art-velvet-ember .spotros-velvet-pe-types {
	background: var(--spotros-background);
	padding: 8rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-pe-types-inner {
	max-width: var(--spotros-shell-width);
	margin: 0 auto;
}

.art-velvet-ember .spotros-velvet-pe-types-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-pe-types-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.art-velvet-ember .spotros-velvet-pe-type-card {
	background: #0F1B2E;
	border: 1px solid rgba(59, 130, 246, 0.1);
	padding: 2rem;
	border-radius: 2px;
	transition: border-color 250ms ease;
}

.art-velvet-ember .spotros-velvet-pe-type-card:hover,
.art-velvet-ember .spotros-velvet-pe-type-card:focus-within {
	border-color: rgba(59, 130, 246, 0.3);
}

.art-velvet-ember .spotros-velvet-pe-type-icon {
	display: inline-block;
	color: var(--spotros-accent-strong);
	margin-bottom: 1.5rem;
	transition: transform 250ms ease;
}

.art-velvet-ember .spotros-velvet-pe-type-card:hover .spotros-velvet-pe-type-icon {
	transform: scale(1.1);
}

.art-velvet-ember .spotros-velvet-pe-type-title {
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
	color: #FFFFFF;
}

.art-velvet-ember .spotros-velvet-pe-type-body {
	color: #9CA3AF;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
	margin: 0 0 1rem;
}

.art-velvet-ember .spotros-velvet-pe-type-capacity {
	color: var(--spotros-accent-strong);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin: 0;
}

/* ---- Image break ---- */

.art-velvet-ember .spotros-velvet-pe-break {
	position: relative;
	height: 60vh;
	overflow: hidden;
}

.art-velvet-ember .spotros-velvet-pe-break-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.art-velvet-ember .spotros-velvet-pe-break-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #0A1628 0%, transparent 100%);
	pointer-events: none;
}

/* ---- Features ---- */

.art-velvet-ember .spotros-velvet-pe-features {
	background: var(--spotros-surface);
	padding: 8rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-pe-features-inner {
	max-width: 64rem;
	margin: 0 auto;
}

.art-velvet-ember .spotros-velvet-pe-features-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-pe-features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.art-velvet-ember .spotros-velvet-pe-feature {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background: rgba(10, 22, 40, 0.5);
	border: 1px solid rgba(59, 130, 246, 0.1);
	border-radius: 2px;
}

.art-velvet-ember .spotros-velvet-pe-feature-icon {
	color: var(--spotros-accent-strong);
	flex-shrink: 0;
	margin-top: 0.25rem;
	display: inline-flex;
}

.art-velvet-ember .spotros-velvet-pe-feature-label {
	color: #E5E7EB;
	font-weight: 300;
	line-height: 1.5;
}

/* ---- How it works ---- */

.art-velvet-ember .spotros-velvet-pe-process {
	background: var(--spotros-background);
	padding: 8rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-pe-process-inner {
	max-width: 64rem;
	margin: 0 auto;
}

.art-velvet-ember .spotros-velvet-pe-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media (min-width: 768px) {
	.art-velvet-ember .spotros-velvet-pe-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.art-velvet-ember .spotros-velvet-pe-step {
	text-align: center;
}

.art-velvet-ember .spotros-velvet-pe-step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 9999px;
	background: var(--spotros-accent);
	color: #FFFFFF;
	margin: 0 auto 1.5rem;
}

.art-velvet-ember .spotros-velvet-pe-step-title {
	font-size: 1.5rem;
	color: #FFFFFF;
	margin: 0 0 0.75rem;
}

.art-velvet-ember .spotros-velvet-pe-step-number {
	margin-right: 0.25rem;
}

.art-velvet-ember .spotros-velvet-pe-step-body {
	color: #9CA3AF;
	font-weight: 300;
	line-height: 1.7;
	margin: 0 auto;
	max-width: 20rem;
}

/* ---- Final CTA ---- */

.art-velvet-ember .spotros-velvet-pe-final-cta {
	background: var(--spotros-surface);
	border-top: 1px solid rgba(59, 130, 246, 0.1);
	padding: 8rem 1.5rem;
}

.art-velvet-ember .spotros-velvet-pe-final-cta-inner {
	max-width: 56rem;
	margin: 0 auto;
	text-align: center;
}

.art-velvet-ember .spotros-velvet-pe-final-cta-title {
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 1.1;
	margin: 0 0 2rem;
	color: #FFFFFF;
}

.art-velvet-ember .spotros-velvet-pe-final-cta-line {
	display: block;
}

.art-velvet-ember .spotros-velvet-pe-final-cta-copy {
	color: #9CA3AF;
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.7;
	max-width: 32rem;
	margin: 0 auto 3rem;
}

.art-velvet-ember .spotros-velvet-pe-final-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.art-velvet-ember .spotros-velvet-pe-cta {
	padding: 1.25rem 3rem;
}

.art-velvet-ember .spotros-velvet-pe-cta-icon,
.art-velvet-ember .spotros-velvet-pe-cta-arrow {
	display: inline-flex;
	align-items: center;
}

@media (max-width: 640px) {
	.art-velvet-ember .spotros-velvet-pe-hero-actions > a,
	.art-velvet-ember .spotros-velvet-pe-final-cta-actions > a {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Legal / generic-page reading layout (velvet-ember).
 * Renders privacy, terms, accessibility, and any other merchant-local page
 * that falls through to page.php. Narrow measure, generous rhythm, velvet
 * typographic scale.
 * ------------------------------------------------------------------------ */

.art-velvet-ember .spotros-velvet-legal {
	background: var(--spotros-background);
	color: var(--spotros-text-body);
	padding-top: clamp(6rem, 12vh, 9rem);
	padding-bottom: clamp(4rem, 8vh, 6rem);
}

.art-velvet-ember .spotros-velvet-legal-header-inner,
.art-velvet-ember .spotros-velvet-legal-body-inner {
	max-width: 42rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 3vw, 2rem);
}

.art-velvet-ember .spotros-velvet-legal-header {
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--spotros-border);
	margin-bottom: clamp(3rem, 5vw, 4rem);
}

.art-velvet-ember .spotros-velvet-legal-title {
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1.1;
	color: var(--spotros-text);
	margin: 0.75rem 0 1rem;
}

.art-velvet-ember .spotros-velvet-legal-updated {
	font-size: 0.8125rem;
	color: var(--spotros-muted);
	margin: 0;
	letter-spacing: 0.03em;
}

.art-velvet-ember .spotros-velvet-legal-content {
	font-family: var(--spotros-font-body);
	font-size: 1rem;
	line-height: 1.75;
	color: var(--spotros-text-body);
	font-weight: 300;
}

.art-velvet-ember .spotros-velvet-legal-content h2 {
	font-family: var(--spotros-font-display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.2;
	color: var(--spotros-text);
	margin: clamp(2.5rem, 4vw, 3.5rem) 0 1rem;
	font-weight: 400;
}

.art-velvet-ember .spotros-velvet-legal-content h3 {
	font-family: var(--spotros-font-display);
	font-size: 1.25rem;
	color: var(--spotros-text);
	margin: 2rem 0 0.75rem;
	font-weight: 400;
	font-style: italic;
}

.art-velvet-ember .spotros-velvet-legal-content p {
	margin: 0 0 1.25rem;
}

.art-velvet-ember .spotros-velvet-legal-content ul,
.art-velvet-ember .spotros-velvet-legal-content ol {
	margin: 0 0 1.5rem;
	padding-left: 1.5rem;
}

.art-velvet-ember .spotros-velvet-legal-content li {
	margin-bottom: 0.5rem;
}

.art-velvet-ember .spotros-velvet-legal-content strong {
	color: var(--spotros-text);
	font-weight: 500;
}

.art-velvet-ember .spotros-velvet-legal-content a {
	color: var(--spotros-accent-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(59, 130, 246, 0.4);
	transition: text-decoration-color 0.2s;
}

.art-velvet-ember .spotros-velvet-legal-content a:hover {
	text-decoration-color: var(--spotros-accent-strong);
}

.art-velvet-ember .spotros-velvet-legal-content hr {
	border: none;
	border-top: 1px solid var(--spotros-border);
	margin: 3rem 0;
}


/* ---------------------------------------------------------------------------
   Embedded platform surfaces (forms, ordering, quote capture).

   The renderer emits a literal width="100" attribute. Without this rule an art
   direction that forgets its own frame styling renders a 100px-wide box with no
   error and no warning, so the base class carries the reset for every direction.
   Art directions add their own class for borders, radius and height.
   --------------------------------------------------------------------------- */
.spotros-embed__frame {
	display: block;
	width: 100%;
	border: 0;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   The HTML `hidden` attribute means display:none, but the UA stylesheet applies
   it at the lowest priority — so ANY explicit display rule on an element (a card
   set to display:grid, a row set to display:flex) silently defeats it, and
   scripts that hide things with `el.hidden = true` appear to do nothing.

   Filtering, drawers and empty states across the theme all rely on `hidden`,
   so the guard belongs in the base layer rather than in each art direction.
   --------------------------------------------------------------------------- */
[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   LEGAL / GENERIC PAGES — art-direction-neutral reading layout.

   These pages (privacy, terms, accessibility, and anything else falling back to
   page.php) previously carried only `spotros-velvet-legal-*` classes, every rule
   for which is scoped `.art-velvet-ember`. On every other art direction they
   therefore matched nothing and rendered unstyled — full-bleed text with no
   measure, no rhythm and no heading scale — inside a fully styled header and
   footer. That shipped to live merchant sites.

   This layer supplies layout and rhythm only, and inherits colour and type from
   whichever art direction is on the body, so each merchant's legal pages look
   like their own site. Velvet Ember's scoped rules still win where they exist,
   so Champion is unchanged.
   --------------------------------------------------------------------------- */
.spotros-legal {
	padding-top: clamp(3rem, 8vh, 6rem);
	padding-bottom: clamp(3rem, 7vh, 5rem);
	color: inherit;
}

.spotros-legal-inner {
	max-width: 42rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 3vw, 2rem);
}

.spotros-legal-header {
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid currentColor;
	/* currentColor at full strength is too heavy for a hairline. */
	border-bottom-color: color-mix(in srgb, currentColor 18%, transparent);
}

.spotros-legal-title {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	margin: 0.5rem 0 0.75rem;
}

.spotros-legal-updated {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	opacity: 0.7;
}

.spotros-legal-content {
	font-size: 1rem;
	line-height: 1.75;
}

/* the_content() output: the merchant's own copy, so style the elements it emits. */
.spotros-legal-content > * + * {
	margin-top: 1.25rem;
}

.spotros-legal-content h2 {
	margin-top: 2.5rem;
	margin-bottom: 0.5rem;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.3;
}

.spotros-legal-content h3 {
	margin-top: 1.75rem;
	margin-bottom: 0.4rem;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.spotros-legal-content p,
.spotros-legal-content li {
	max-width: 38rem;
}

.spotros-legal-content ul,
.spotros-legal-content ol {
	margin: 1.25rem 0;
	padding-left: 1.4rem;
}

.spotros-legal-content li + li {
	margin-top: 0.5rem;
}

.spotros-legal-content a {
	color: inherit;
	text-underline-offset: 3px;
}

/* The h1 is rendered by the partial's header, so a duplicate inside the body
   copy would double the title — legal documents pasted in often carry one. */
.spotros-legal-content > h1:first-child {
	display: none;
}

@media (max-width: 700px) {
	.spotros-legal {
		padding-top: clamp(2rem, 6vh, 3rem);
	}
}

/* Legal-page long-form elements. Real legal documents carry tables (a data-retention
   schedule, an opt-out matrix), pull quotes for sample messages and consent language,
   and section rules. The layer above covered headings, paragraphs and lists only, so
   these rendered as raw browser defaults. Single-class selectors again, so any art
   direction can override. */
.spotros-legal-content table {
	width: 100%;
	margin: 1.75rem 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.6;
	/* A long schedule must not force the page to scroll sideways on a phone. */
	display: block;
	overflow-x: auto;
}

.spotros-legal-content th,
.spotros-legal-content td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 16%, transparent);
}

.spotros-legal-content th {
	font-weight: 700;
	background: color-mix(in srgb, currentColor 5%, transparent);
}

.spotros-legal-content blockquote {
	margin: 1.5rem 0;
	padding: 0.85rem 1.1rem;
	border-left: 3px solid;
	border-left-color: color-mix(in srgb, currentColor 35%, transparent);
	background: color-mix(in srgb, currentColor 4%, transparent);
	border-radius: 0 0.35rem 0.35rem 0;
}

.spotros-legal-content blockquote p {
	margin: 0;
}

.spotros-legal-content blockquote + blockquote {
	margin-top: 0.75rem;
}

.spotros-legal-content hr {
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid;
	border-top-color: color-mix(in srgb, currentColor 14%, transparent);
}

.spotros-legal-content strong {
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Popups — shared across every art direction
   Structure lives here once; each direction supplies its palette by overriding
   the --pop-* custom properties below. That is what makes a popup a theme
   capability rather than one merchant's feature: a new merchant gets the
   behaviour, the accessibility and the fail-closed rules for free, and only
   chooses colours.
   --------------------------------------------------------------------------- */
.spotros-pop {
	--pop-surface: var(--spotros-surface-strong, #fff);
	--pop-text: var(--spotros-text, #2d261f);
	--pop-muted: var(--spotros-muted, #6b6157);
	--pop-hover: var(--spotros-highlight, rgba(0, 0, 0, 0.06));
	--pop-media-bg: var(--spotros-highlight, rgba(0, 0, 0, 0.06));
	--pop-offer-bg: var(--spotros-highlight, rgba(0, 0, 0, 0.06));
	--pop-scrim: rgba(20, 18, 16, 0.62);
	--pop-shadow: 0 28px 70px rgba(20, 18, 16, 0.34);
	--pop-radius: var(--spotros-radius-md, 18px);
	--pop-radius-sm: var(--spotros-radius-sm, 12px);
	--pop-font-display: var(--spotros-font-display, Georgia, serif);
	--pop-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--pop-ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: 1rem;
}

.spotros-pop__scrim {
	position: absolute;
	inset: 0;
	background: var(--pop-scrim);
	animation: spotros-pop-fade 0.28s var(--pop-ease) both;
}

/* Flex column with one growing child, so on a short viewport the content
   scrolls inside the dialog instead of the dialog outgrowing the screen and
   stranding the submit button off-bottom. Height is capped in dvh where
   supported: on mobile Safari 100vh exceeds the visible area while the URL bar
   is showing, which is exactly the case that hides a button. */
.spotros-pop__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(30rem, 100%);
	max-height: 92vh;
	max-height: 92dvh;
	padding: 1.9rem 1.6rem 1.4rem;
	border-radius: var(--pop-radius);
	background: var(--pop-surface);
	box-shadow: var(--pop-shadow);
	animation: spotros-pop-rise 0.34s var(--pop-ease-emph) both;
}

.spotros-pop__title {
	margin: 0;
	font-family: var(--pop-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.95rem);
	line-height: 1.15;
	color: var(--pop-text);
}

.spotros-pop__body {
	margin: 0.55rem 0 0;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--pop-muted);
}

.spotros-pop__offer {
	margin: 0.8rem 0 0;
	padding: 0.65rem 0.85rem;
	border-radius: var(--spotros-radius-sm, 12px);
	background: var(--pop-offer-bg);
	color: var(--pop-text);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.4;
}

.spotros-pop__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pop-muted);
	cursor: pointer;
	transition: background 0.18s var(--pop-ease), color 0.18s var(--pop-ease);
}

.spotros-pop__close:hover,
.spotros-pop__close:focus-visible {
	background: var(--pop-hover);
	color: var(--pop-text);
}

.spotros-pop__close svg {
	width: 1.15rem;
	height: 1.15rem;
}

.spotros-pop__later {
	margin: 0.5rem auto 0;
	padding: 0.55rem 0.6rem;
	border: 0;
	background: transparent;
	color: var(--pop-muted);
	font-family: inherit;
	font-size: 0.88rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.spotros-pop__later:hover,
.spotros-pop__later:focus-visible {
	color: var(--pop-text);
}

/* VIP capture: the embedded form is the payload. The frame carries the taller of
   the measured content heights (753px at a 500px-wide frame, 853px at 375px — it
   grows as fields wrap), because anything shorter puts the required consent
   sentence and the submit button below a cut with nothing scrolling. */
.spotros-pop__form {
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 1rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.spotros-pop__frame {
	width: 100%;
	min-height: 54rem;
	border: 0;
}

/* Promotion: image-led. The site defines the frame and the image fits inside it,
   so a square social graphic, a wide venue shot and a tall portrait all work
   untouched. object-fit is CONTAIN, not cover — a crop that flatters a plate of
   food slices the text off an informational graphic, and merchants post both.
   The cap is in vh so the headline and the call to action stay on screen. */
.spotros-promopop .spotros-pop__panel {
	padding-top: 0;
	overflow: hidden;
}

.spotros-promopop__media {
	flex: 0 0 auto;
	margin: 0 -1.6rem 1.1rem;
	background: var(--pop-media-bg);
}

.spotros-promopop__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 38vh;
	margin: 0 auto;
	object-fit: contain;
}

.spotros-promopop__copy {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.spotros-promopop__cta {
	margin-top: 1.1rem;
	align-self: stretch;
	justify-content: center;
	text-align: center;
}

/* This close button sits over the photograph, so it needs its own ground to stay
   legible against an image we cannot predict. */
.spotros-promopop .spotros-pop__close {
	background: var(--pop-surface);
	color: var(--pop-text);
	box-shadow: 0 2px 10px rgba(20, 18, 16, 0.22);
}

@keyframes spotros-pop-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes spotros-pop-rise {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

/* An unrequested modal that slides in is the worst offender for motion
   sensitivity. Honour the preference by simply appearing. */
@media (prefers-reduced-motion: reduce) {
	.spotros-pop__scrim,
	.spotros-pop__panel {
		animation: none;
	}
}

/* On a phone the panel fills nearly the whole screen, so "tap outside to close"
   has almost no target left. The explicit controls carry the job there, which
   means they have to be real touch targets: 44px, the platform minimum. */
@media (pointer: coarse) {
	.spotros-pop__close {
		top: 0.4rem;
		right: 0.4rem;
		width: 2.75rem;
		height: 2.75rem;
	}

	.spotros-pop__close svg {
		width: 1.35rem;
		height: 1.35rem;
	}

	.spotros-pop__later {
		min-height: 2.75rem;
		padding: 0.75rem 1.25rem;
		font-size: 0.95rem;
	}
}

@media (max-height: 32em) {
	.spotros-promopop__img {
		max-height: 30vh;
	}
}

@media (max-width: 27.99em) {
	.spotros-pop {
		padding: 0.6rem;
	}

	.spotros-pop__panel {
		padding: 1.5rem 1.1rem 1.1rem;
		/* Popup-scoped, not the raw theme token: a direction that sets its own
		   --pop-radius must be able to set the narrow-viewport one too, or its
		   corners change shape below 28em. */
		border-radius: var(--pop-radius-sm);
	}

	.spotros-promopop__media {
		margin-left: -1.1rem;
		margin-right: -1.1rem;
	}
}

/* ===========================================================================
   FOOTER MAP — shared, palette-neutral

   Inherits the footer's ink through currentColor and paints no ground of its
   own, so every art direction gets it without adding a rule. The image is a
   local attachment; see inc/footer-map.php for why it is not an iframe.
   =========================================================================== */
.spotros-footer-map { margin-top: 1.25rem; }

/*
 * Built out of blocks, not flex, on purpose. This part is dropped into footers
 * that each have their own broad descendant rules, and those rules win: Sarrah's
 * `.sr-footer__visit a` is (0,3,1) and re-declared this link as display:flex,
 * which quietly defeated centring it. A layout that survives having its own
 * `display` overwritten is worth more here than a tidier one that does not.
 * Centring is `margin-inline: auto` for the same reason — it works whatever the
 * host direction decides this element is.
 */
.spotros-footer-map__link {
	display: block;
	max-width: 420px;
	color: inherit;
	text-decoration: none;
}

.spotros-footer-map__frame {
	display: block;
	overflow: hidden;
	border: 1px solid currentColor;
	/* Fade the BORDER, not the block. Dimming the frame dimmed the map with it. */
	border-color: color-mix(in srgb, currentColor 32%, transparent);
	border-radius: 0.75rem;
}

.spotros-footer-map__img {
	display: block;
	width: 100%;
	height: auto;
}

.spotros-footer-map__cta {
	display: block;
	margin-top: 0.55rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.spotros-footer-map__link:hover .spotros-footer-map__frame { border-color: currentColor; }

@media (prefers-reduced-motion: no-preference) {
	.spotros-footer-map__frame { transition: border-color 200ms ease; }
}