/**
 * Sip and Paint NG — design tokens & base styles (Lovable prototype).
 */

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */
:root {
	/* Surfaces */
	--spnl-bg: #f5f0e8;
	--spnl-bg-elevated: #faf7f2;
	--spnl-footer-bg: #14110f;
	--spnl-footer-text: #f5f0e8;

	/* Text — approximates oklch(0.185 0.02 60) */
	--spnl-text: #1f1a17;
	--spnl-text-muted: #6b6259;
	--spnl-text-on-dark: #f5f0e8;
	--spnl-text-muted-on-dark: #a89f94;

	/* Accent — terracotta/copper for emphasis */
	--spnl-accent: #b86b3a;
	--spnl-accent-soft: #c4824f;

	/* Borders */
	--spnl-border: #ddd5c8;
	--spnl-border-dark: #2a2420;

	/* Typography */
	--spnl-font-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
	--spnl-font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
	--spnl-font-mono: "JetBrains Mono", ui-monospace, monospace;

	/* Spacing — full-bleed layout (Alali model): content stretches edge-to-edge
	   with a generous side gutter, no centered max-width box. */
	--spnl-gutter: clamp(1.5rem, 5vw, 4.5rem);
	--spnl-max-width: 100%;
	--spnl-section-gap: clamp(3rem, 8vw, 6rem);

	/* Radius */
	--spnl-radius-sm: 2px;

	/* Logo sizing — overridden by Customizer / Elementor */
	--spnl-logo-width: 140px;
	--spnl-logo-max-height: 48px;
	--spnl-text-logo-size: 20px;
}

/* -------------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--spnl-bg);
	color: var(--spnl-text);
	font-family: var(--spnl-font-body);
	font-size: 0.875rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--spnl-accent);
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
.spnl-display {
	font-family: var(--spnl-font-display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--spnl-text);
}

.spnl-display--xl {
	font-size: clamp(3rem, 8vw, 4.5rem);
}

.spnl-display--lg {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.spnl-display--md {
	font-size: clamp(2rem, 4vw, 3rem);
}

.spnl-display--italic {
	font-style: italic;
}

.spnl-eyebrow {
	font-family: var(--spnl-font-mono);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
	margin: 0 0 0.75rem;
}

.spnl-lead {
	font-family: var(--spnl-font-display);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-style: italic;
	line-height: 1.35;
	color: var(--spnl-text);
	margin: 0 0 1rem;
}

.spnl-muted {
	color: var(--spnl-text-muted);
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.spnl-main {
	padding: var(--spnl-gutter);
	max-width: var(--spnl-max-width);
	margin: 0 auto;
}

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

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.spnl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-family: var(--spnl-font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.spnl-btn--primary {
	background: var(--spnl-text);
	color: var(--spnl-bg);
	border-color: var(--spnl-text);
}

.spnl-btn--primary:hover {
	background: var(--spnl-accent);
	border-color: var(--spnl-accent);
	color: #fff;
}

.spnl-btn--outline {
	background: transparent;
	color: var(--spnl-text);
	border-color: var(--spnl-text);
}

.spnl-btn--outline:hover {
	background: var(--spnl-text);
	color: var(--spnl-bg);
}

.spnl-btn--ghost-on-dark {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

.spnl-btn--ghost-on-dark:hover {
	background: #fff;
	color: var(--spnl-text);
}

.spnl-btn--sm {
	padding: 0.625rem 1.125rem;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.spnl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--spnl-bg);
	border-bottom: 1px solid var(--spnl-border);
}

.spnl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--spnl-max-width);
	margin: 0 auto;
	padding: 1rem var(--spnl-gutter);
}

.spnl-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--spnl-text);
	flex-shrink: 0;
}

.spnl-logo__image,
.spnl-logo .custom-logo {
	width: var(--spnl-logo-width);
	max-width: 100%;
	height: auto;
	max-height: var(--spnl-logo-max-height);
	object-fit: contain;
}

.spnl-logo__text {
	font-family: var(--spnl-font-display);
	font-size: calc(var(--spnl-text-logo-size) * 1px);
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.spnl-logo__tld {
	color: var(--spnl-accent);
}

.spnl-header__cities {
	display: none;
	align-items: center;
	gap: 1.5rem;
	font-family: var(--spnl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.spnl-menu--header-center {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spnl-menu--header-center a {
	text-decoration: none;
}

.spnl-menu--header-center .spnl-menu__badge {
	list-style: none;
}

.spnl-menu--header-center .spnl-menu__badge span {
	color: var(--spnl-text-muted);
}

.spnl-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.spnl-header__search,
.spnl-header__menu {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--spnl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--spnl-text);
	cursor: pointer;
	text-decoration: none;
}

.spnl-header__menu-lines {
	display: block;
	width: 18px;
	height: 8px;
	border-top: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
}

.spnl-header__search span,
.spnl-header__menu span {
	display: none;
}

@media (min-width: 768px) {
	.spnl-header__cities {
		display: flex;
	}

	.spnl-header__search span,
	.spnl-header__menu span {
		display: inline;
	}
}

.spnl-header__badge {
	color: var(--spnl-text-muted);
}

/* -------------------------------------------------------------------------
   Navigation menus
   ------------------------------------------------------------------------- */
.spnl-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.spnl-menu--primary > li + li {
	margin-top: 0.35rem;
}

.spnl-menu--primary > li > a {
	display: block;
	font-family: var(--spnl-font-display);
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1.15;
	padding: 0.35rem 0;
}

.spnl-menu--primary .sub-menu {
	list-style: none;
	margin: 0.25rem 0 0.75rem;
	padding: 0 0 0 1rem;
	border-left: 1px solid var(--spnl-border);
}

.spnl-menu--primary .sub-menu a {
	font-family: var(--spnl-font-body);
	font-size: 0.875rem;
	color: var(--spnl-text-muted);
	padding: 0.2rem 0;
	display: block;
}

.spnl-menu--primary .current-menu-item > a,
.spnl-menu--primary .current-menu-ancestor > a {
	color: var(--spnl-accent);
}

.spnl-footer__links.spnl-menu {
	list-style: none;
}

.spnl-footer__links.spnl-menu li + li {
	margin-top: 0.35rem;
}

/* Menu panel (mobile + desktop overlay) */
.spnl-menu-panel {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.spnl-menu-panel[hidden] {
	display: none;
}

.spnl-menu-panel__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(20 17 15 / 45%);
}

.spnl-menu-panel__dialog {
	position: absolute;
	top: 0;
	right: 0;
	width: min(100%, 24rem);
	height: 100%;
	background: var(--spnl-bg);
	padding: 2rem var(--spnl-gutter);
	overflow-y: auto;
	box-shadow: -8px 0 32px rgb(20 17 15 / 12%);
}

.spnl-menu-panel__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	border: 0;
	background: none;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--spnl-text);
}

.spnl-menu-panel__cta {
	margin-top: 2rem;
	width: 100%;
}

body.spnl-menu-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.spnl-footer {
	background: var(--spnl-footer-bg);
	color: var(--spnl-footer-text);
	margin-top: var(--spnl-section-gap);
}

.spnl-footer a {
	text-decoration: none;
}

.spnl-footer a:hover {
	color: var(--spnl-accent-soft);
}

.spnl-footer__inner {
	max-width: var(--spnl-max-width);
	margin: 0 auto;
	padding: clamp(3rem, 8vw, 5rem) var(--spnl-gutter) 2rem;
	display: grid;
	gap: 3rem;
}

@media (min-width: 900px) {
	.spnl-footer__inner {
		grid-template-columns: 1fr 1.4fr;
		align-items: start;
	}
}

.spnl-footer__tagline {
	font-family: var(--spnl-font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	margin: 0 0 1.5rem;
}

.spnl-footer__tagline em {
	display: block;
	font-style: italic;
	color: var(--spnl-accent-soft);
}

.spnl-footer__phone {
	font-family: var(--spnl-font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--spnl-footer-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.spnl-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

@media (min-width: 600px) {
	.spnl-footer__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.spnl-footer__label {
	font-family: var(--spnl-font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--spnl-text-muted-on-dark);
	margin: 0 0 0.75rem;
}

.spnl-footer__label--spaced {
	margin-top: 1.5rem;
}

.spnl-footer__col p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--spnl-text-muted-on-dark);
}

.spnl-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.spnl-footer__links li + li {
	margin-top: 0.35rem;
}

.spnl-footer__links a {
	font-size: 0.8125rem;
	color: var(--spnl-text-muted-on-dark);
}

.spnl-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	max-width: var(--spnl-max-width);
	margin: 0 auto;
	padding: 1.25rem var(--spnl-gutter);
	border-top: 1px solid var(--spnl-border-dark);
	font-family: var(--spnl-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--spnl-text-muted-on-dark);
}

.spnl-footer__bar p {
	margin: 0;
}

.spnl-footer__sister a {
	color: var(--spnl-footer-text);
}

/* -------------------------------------------------------------------------
   Package / venue card (archive grid)
   ------------------------------------------------------------------------- */
.spnl-package-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
}

.spnl-package-card {
	text-decoration: none;
	color: inherit;
}

.spnl-package-card__image {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--spnl-border);
	margin-bottom: 1rem;
}

.spnl-package-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spnl-package-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.spnl-package-card__title {
	font-family: var(--spnl-font-display);
	font-size: 1.25rem;
	margin: 0;
}

.spnl-package-card__city {
	font-family: var(--spnl-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
}

.spnl-package-card__desc {
	font-size: 0.8125rem;
	color: var(--spnl-text-muted);
	margin: 0 0 0.5rem;
}

.spnl-package-card__price {
	font-size: 0.8125rem;
	margin: 0;
}

.spnl-package-card__price strong {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Filter bar (venue archives)
   ------------------------------------------------------------------------- */
.spnl-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	padding: 1rem 0;
	border-top: 1px solid var(--spnl-border);
	border-bottom: 1px solid var(--spnl-border);
	margin-bottom: 2rem;
	font-family: var(--spnl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.spnl-filters__count {
	margin-left: auto;
	color: var(--spnl-text-muted);
}

/* -------------------------------------------------------------------------
   Single location
   ------------------------------------------------------------------------- */
.spnl-main--flush {
	padding: 0;
}

.spnl-loc-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(70vh, 640px);
	padding: var(--spnl-gutter);
	overflow: hidden;
}

.spnl-loc-hero__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.spnl-loc-hero--has-image {
	color: var(--spnl-text-on-dark);
}

.spnl-loc-hero--has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(20 17 15 / 78%) 0%, rgb(20 17 15 / 20%) 55%, rgb(20 17 15 / 5%) 100%);
}

.spnl-loc-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 60rem;
}

.spnl-loc-hero--has-image .spnl-eyebrow,
.spnl-loc-hero--has-image .spnl-lead {
	color: var(--spnl-text-on-dark);
}

.spnl-loc-hero__title {
	margin: 0.5rem 0 0;
}

.spnl-loc-hero--has-image .spnl-loc-hero__title {
	color: #fff;
}

.spnl-loc-hero__lead {
	max-width: 42rem;
	margin-top: 1rem;
	font-size: clamp(1.1rem, 2.2vw, 1.45rem);
	line-height: 1.35;
}

/* Meta bar (below hero) */
.spnl-loc-meta {
	padding: clamp(1.25rem, 3vw, 1.75rem) var(--spnl-gutter);
	background: var(--spnl-bg);
	border-bottom: 1px solid var(--spnl-border);
}

.spnl-loc-meta__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.25rem, 5vw, 2rem);
	row-gap: clamp(2rem, 7vw, 2.75rem);
	margin: 0;
}

.spnl-loc-meta__item {
	margin: 0;
	min-width: 0;
}

.spnl-loc-meta__item dt {
	font-family: var(--spnl-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
	margin: 0 0 0.5rem;
}

.spnl-loc-meta__item dd {
	margin: 0;
	font-family: var(--spnl-font-display);
	font-size: clamp(1rem, 4.2vw, 1.35rem);
	line-height: 1.35;
	color: var(--spnl-text);
}

@media (min-width: 900px) {
	.spnl-loc-meta__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 4vw, 3rem);
		row-gap: 0;
	}

	.spnl-loc-meta__item dd {
		font-size: clamp(1.1rem, 2vw, 1.35rem);
	}
}

/* Intro */
.spnl-loc-intro {
	padding: var(--spnl-section-gap) var(--spnl-gutter);
	border-bottom: 1px solid var(--spnl-border);
}

.spnl-loc-intro__body {
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.7;
}

/* Packages */
.spnl-packages {
	padding: var(--spnl-section-gap) var(--spnl-gutter);
}

.spnl-packages__header {
	display: grid;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

@media (min-width: 900px) {
	.spnl-packages__header {
		grid-template-columns: 1.4fr 1fr;
		align-items: end;
	}
}

.spnl-packages__intro {
	color: var(--spnl-text-muted);
	margin: 0;
}

.spnl-packages__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

.spnl-pkg-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: var(--spnl-bg-elevated);
	border: 1px solid var(--spnl-border);
	padding: 1.75rem 1.5rem;
}

.spnl-pkg-card--highlight {
	background: var(--spnl-footer-bg);
	border-color: var(--spnl-footer-bg);
	color: var(--spnl-text-on-dark);
}

.spnl-pkg-card__name {
	font-family: var(--spnl-font-display);
	font-size: 1.5rem;
	margin: 0;
}

.spnl-pkg-card__price {
	font-family: var(--spnl-font-mono);
	font-size: 0.9rem;
	margin: 0;
}

.spnl-pkg-card--highlight .spnl-pkg-card__price {
	color: var(--spnl-accent-soft);
}

.spnl-pkg-card__desc {
	font-size: 0.8125rem;
	color: var(--spnl-text-muted);
	margin: 0;
}

.spnl-pkg-card--highlight .spnl-pkg-card__desc {
	color: var(--spnl-text-muted-on-dark);
}

.spnl-pkg-card__list {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	font-size: 0.8125rem;
}

.spnl-pkg-card__list li {
	padding-left: 1.1rem;
	position: relative;
}

.spnl-pkg-card__list li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--spnl-accent);
}

.spnl-pkg-card--highlight .spnl-pkg-card__list li::before {
	color: var(--spnl-accent-soft);
}

.spnl-pkg-card__cta {
	margin-top: auto;
	align-self: flex-start;
}

/* Gallery */
.spnl-loc-gallery {
	padding: var(--spnl-section-gap) var(--spnl-gutter);
	border-top: 1px solid var(--spnl-border);
}

.spnl-loc-gallery__header {
	display: grid;
	gap: 1.25rem;
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 900px) {
	.spnl-loc-gallery__header {
		grid-template-columns: 1fr minmax(220px, 30%);
		align-items: start;
	}
}

.spnl-loc-gallery__headline .spnl-display {
	margin: 0;
}

.spnl-loc-gallery__note {
	margin: 0;
	max-width: 26ch;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--spnl-text-muted);
}

@media (min-width: 900px) {
	.spnl-loc-gallery__note {
		justify-self: end;
		text-align: left;
	}
}

.spnl-loc-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.spnl-loc-gallery__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.spnl-loc-gallery__item {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--spnl-border);
}

.spnl-loc-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.spnl-loc-gallery--placeholder .spnl-loc-gallery__img {
	opacity: 0.92;
}

/* CTA band */
.spnl-loc-cta {
	background: var(--spnl-footer-bg);
	color: var(--spnl-text-on-dark);
}

.spnl-loc-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: var(--spnl-section-gap) var(--spnl-gutter);
}

.spnl-loc-cta__eyebrow {
	color: var(--spnl-text-muted-on-dark);
}

.spnl-loc-cta__title {
	margin: 0.5rem 0 0;
	color: #fff;
	max-width: 24rem;
}

/* -------------------------------------------------------------------------
   Archive hero (experience category pages)
   ------------------------------------------------------------------------- */
.spnl-archive-hero {
	padding: var(--spnl-section-gap) var(--spnl-gutter) 2rem;
	max-width: var(--spnl-max-width);
	margin: 0 auto;
}

.spnl-archive-hero__back {
	display: inline-block;
	font-family: var(--spnl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
	text-decoration: none;
	margin-bottom: 2rem;
}

.spnl-archive-hero__back:hover {
	color: var(--spnl-text);
}

/* -------------------------------------------------------------------------
   Single package (booking page)
   ------------------------------------------------------------------------- */
.spnl-package__wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	padding: var(--spnl-section-gap) var(--spnl-gutter);
	max-width: var(--spnl-max-width);
	margin: 0 auto;
}

.spnl-package__eyebrow a {
	color: var(--spnl-text-muted);
	text-decoration: none;
}

.spnl-package__eyebrow a:hover {
	color: var(--spnl-accent);
}

.spnl-package__media {
	margin: 1.5rem 0;
}

.spnl-package__media img {
	width: 100%;
	height: auto;
	border-radius: var(--spnl-radius-sm);
	display: block;
}

.spnl-package__content {
	margin-top: 1.5rem;
	line-height: 1.7;
}

.spnl-package__list {
	margin-top: 1.5rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.spnl-package__list li {
	position: relative;
	padding-left: 1.4rem;
	color: var(--spnl-text-muted);
}

.spnl-package__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--spnl-accent);
}

.spnl-package__aside {
	position: sticky;
	top: 2rem;
}

/* -------------------------------------------------------------------------
   Booking form
   ------------------------------------------------------------------------- */
.spnl-booking {
	background: var(--spnl-bg-elevated);
	border: 1px solid var(--spnl-border);
	border-radius: var(--spnl-radius-sm);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.spnl-booking__price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--spnl-border);
}

.spnl-booking__price strong {
	font-family: var(--spnl-font-display);
	font-size: 1.9rem;
	line-height: 1;
	color: var(--spnl-text);
}

.spnl-booking__price span {
	font-family: var(--spnl-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
}

.spnl-booking__field {
	display: block;
	margin-bottom: 1rem;
}

.spnl-booking__label {
	display: block;
	font-family: var(--spnl-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
	margin-bottom: 0.4rem;
}

.spnl-booking__field input[type="date"],
.spnl-booking__field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--spnl-border);
	border-radius: var(--spnl-radius-sm);
	background: #fff;
	font-family: var(--spnl-font-body);
	font-size: 0.95rem;
	color: var(--spnl-text);
}

.spnl-booking__field textarea {
	resize: vertical;
}

.spnl-booking__field input:focus,
.spnl-booking__field textarea:focus {
	outline: none;
	border-color: var(--spnl-accent);
}

.spnl-stepper {
	display: grid;
	grid-template-columns: 3rem 1fr 3rem;
	align-items: stretch;
	border: 1px solid var(--spnl-border);
	border-radius: var(--spnl-radius-sm);
	overflow: hidden;
	background: #fff;
}

.spnl-stepper__btn {
	border: none;
	background: transparent;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: var(--spnl-text);
}

.spnl-stepper__btn:hover {
	background: var(--spnl-bg);
	color: var(--spnl-accent);
}

.spnl-stepper__input {
	border: none;
	border-left: 1px solid var(--spnl-border);
	border-right: 1px solid var(--spnl-border);
	text-align: center;
	font-family: var(--spnl-font-body);
	font-size: 1rem;
	color: var(--spnl-text);
	-moz-appearance: textfield;
}

.spnl-stepper__input::-webkit-outer-spin-button,
.spnl-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.spnl-booking__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 1.25rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--spnl-border);
}

.spnl-booking__total span {
	font-family: var(--spnl-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
}

.spnl-booking__total strong {
	font-family: var(--spnl-font-display);
	font-size: 1.5rem;
	color: var(--spnl-text);
}

.spnl-booking__actions {
	display: grid;
	gap: 0.6rem;
}

.spnl-booking__actions .spnl-btn {
	width: 100%;
	justify-content: center;
}

.spnl-booking__message {
	margin: 0.75rem 0 0;
	color: #b3261e;
	font-size: 0.85rem;
}

.spnl-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 860px) {
	.spnl-package__wrap {
		grid-template-columns: 1fr;
	}

	.spnl-package__aside {
		position: static;
	}
}

/* -------------------------------------------------------------------------
   Experience archive — hero, filters, location grid
   ------------------------------------------------------------------------- */
.spnl-exp-hero {
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--spnl-gutter) clamp(1.5rem, 3vw, 2.25rem);
	border-bottom: 1px solid var(--spnl-border);
}

.spnl-exp-hero__crumbs {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--spnl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
	margin: 0 0 1.5rem;
}

.spnl-exp-hero__crumbs a {
	color: var(--spnl-text-muted);
	text-decoration: none;
}

.spnl-exp-hero__crumbs a:hover {
	color: var(--spnl-accent);
}

.spnl-exp-hero__title {
	font-size: clamp(2.75rem, 8vw, 5rem);
	line-height: 0.98;
	margin: 0;
}

.spnl-exp-hero__tagline {
	font-family: var(--spnl-font-display);
	font-style: italic;
	font-size: clamp(1.25rem, 2.6vw, 1.7rem);
	color: var(--spnl-text);
	margin: 1rem 0 0;
	max-width: 42ch;
}

.spnl-exp-hero__desc {
	margin: 1rem 0 0;
	max-width: 60ch;
	color: var(--spnl-text-muted);
	line-height: 1.6;
}

.spnl-exp-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 1rem var(--spnl-gutter);
	border-bottom: 1px solid var(--spnl-border);
}

.spnl-exp-filters__group {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
}

.spnl-exp-filters__field {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.spnl-exp-filters__label {
	font-family: var(--spnl-font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
}

.spnl-exp-filters__select {
	border: none;
	border-bottom: 1px solid var(--spnl-border);
	background: transparent;
	padding: 0.25rem 1.5rem 0.25rem 0.1rem;
	font-family: var(--spnl-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--spnl-text);
	cursor: pointer;
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, var(--spnl-text) 50% ), linear-gradient( 135deg, var(--spnl-text) 50%, transparent 50% );
	background-position: right 6px center, right 1px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.spnl-exp-filters__select:focus {
	outline: none;
	border-bottom-color: var(--spnl-accent);
}

.spnl-exp-filters__count {
	font-family: var(--spnl-font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
}

.spnl-loc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(2rem, 5vw, 3.5rem) var(--spnl-gutter);
}

.spnl-loc-grid--empty {
	display: block;
}

.spnl-loc-card {
	display: block;
}

.spnl-loc-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.spnl-loc-card__media {
	position: relative;
	margin: 0 0 1rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--spnl-radius-sm);
	background: var(--spnl-border);
}

.spnl-loc-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.spnl-loc-card__img--empty {
	background: linear-gradient(135deg, #cbb89f, #a89f94);
}

.spnl-loc-card__link:hover .spnl-loc-card__img {
	transform: scale(1.04);
}

.spnl-loc-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.3rem 0.6rem;
	background: rgba(20, 17, 15, 0.85);
	color: var(--spnl-text-on-dark);
	font-family: var(--spnl-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: var(--spnl-radius-sm);
}

.spnl-loc-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.spnl-loc-card__name {
	font-family: var(--spnl-font-display);
	font-size: 1.35rem;
	line-height: 1.15;
	margin: 0;
	color: var(--spnl-text);
}

.spnl-loc-card__link:hover .spnl-loc-card__name {
	color: var(--spnl-accent);
}

.spnl-loc-card__price {
	flex-shrink: 0;
	font-family: var(--spnl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--spnl-text-muted);
	margin: 0;
}

.spnl-loc-card__desc {
	margin: 0.4rem 0 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--spnl-text-muted);
}

.spnl-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	padding: 0 var(--spnl-gutter) clamp(3rem, 6vw, 5rem);
}

.spnl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	font-family: var(--spnl-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--spnl-text);
	border: 1px solid var(--spnl-border);
	border-radius: var(--spnl-radius-sm);
}

.spnl-pagination .page-numbers:hover {
	border-color: var(--spnl-accent);
	color: var(--spnl-accent);
}

.spnl-pagination .page-numbers.current {
	background: var(--spnl-text);
	color: var(--spnl-text-on-dark);
	border-color: var(--spnl-text);
}

@media (max-width: 900px) {
	.spnl-loc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.spnl-loc-grid {
		grid-template-columns: 1fr;
	}

	.spnl-exp-filters {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* -------------------------------------------------------------------------
   City picker popup
   ------------------------------------------------------------------------- */
body.spnl-city-open {
	overflow: hidden;
}

.spnl-city-modal {
	--spnl-cm-overlay: rgba(20, 17, 15, 0.66);
	--spnl-cm-bg: var(--spnl-bg);
	--spnl-cm-heading: var(--spnl-text);
	--spnl-cm-text: var(--spnl-text-muted);
	--spnl-cm-accent: var(--spnl-accent);
	--spnl-cm-heading-font: var(--spnl-font-display);
	--spnl-cm-heading-size: clamp(1.9rem, 5vw, 2.75rem);
	--spnl-cm-body-font: var(--spnl-font-body);
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.spnl-city-modal[hidden] {
	display: none;
}

.spnl-city-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--spnl-cm-overlay);
	backdrop-filter: blur(3px);
}

.spnl-city-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(560px, 100%);
	background: var(--spnl-cm-bg);
	border-radius: var(--spnl-radius-sm);
	padding: clamp(1.75rem, 5vw, 3rem);
	box-shadow: 0 30px 80px rgba(20, 17, 15, 0.35);
	animation: spnl-city-in 0.3s ease;
}

@keyframes spnl-city-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

.spnl-city-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	border: none;
	background: none;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--spnl-text-muted);
	cursor: pointer;
}

.spnl-city-modal__close:hover {
	color: var(--spnl-text);
}

.spnl-city-modal__eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--spnl-cm-body-font);
	color: var(--spnl-cm-text);
}

.spnl-city-modal__title {
	margin: 0;
	font-family: var(--spnl-cm-heading-font);
	font-size: var(--spnl-cm-heading-size);
	line-height: 1.02;
	color: var(--spnl-cm-heading);
}

.spnl-city-modal__sub {
	margin: 0.75rem 0 0;
	font-family: var(--spnl-cm-body-font);
	color: var(--spnl-cm-text);
	line-height: 1.55;
}

.spnl-city-modal__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.75rem;
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.spnl-city-modal__option {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--spnl-border);
	border-radius: var(--spnl-radius-sm);
	background: var(--spnl-bg-elevated);
	text-decoration: none;
	color: var(--spnl-text);
	transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.spnl-city-modal__option:hover {
	border-color: var(--spnl-cm-accent);
	background: #fff;
	transform: translateY(-2px);
}

.spnl-city-modal__option.is-default {
	border-color: var(--spnl-cm-accent);
}

.spnl-city-modal__default {
	position: absolute;
	top: 0.75rem;
	right: 0.85rem;
	font-family: var(--spnl-font-mono);
	font-size: 0.56rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spnl-cm-accent);
}

.spnl-city-modal__city {
	font-family: var(--spnl-cm-heading-font);
	font-size: 1.4rem;
	line-height: 1.1;
	color: var(--spnl-cm-heading);
}

.spnl-city-modal__tag {
	font-family: var(--spnl-font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--spnl-cm-text);
}