/*
 * Nyx — design tokens & site shell.
 *
 * THE RULE THIS FILE EXISTS TO ENFORCE: a long, flowing, generously spaced
 * editorial page (opposite of Chase's compact single-viewport locked-forme
 * grid) with real breathing room between sections (this catalogue's own
 * critique standard — 120–180px vertical section padding on desktop for
 * anything meant to feel premium — leaning toward the TOP of that range
 * here, since this is an immersive lodge journey, not a dense catalogue).
 * Every section uses a DIFFERENT layout template from its neighbours —
 * full-bleed split, dense photo grid, horizontal-scroll rail, alternating
 * rows, a single wide calendar strip — so length reads as rich rather than
 * repetitive.
 *
 * One persistent, fixed, full-viewport WebGL2 canvas (assets/js/nyx-field.js)
 * sits behind the whole site — never rebuilt per section, driven by scroll.
 * Every element with class="glass" is a frosted dark panel whose inner glow
 * colour/intensity (--nyx-glow-rgb / --nyx-glow) is driven live by the same
 * field's current nebula↔bay mix, same "one real system drives the UI"
 * discipline used sitewide across this catalogue.
 */

:root {
	--bg: #0a0e18;
	--bg-2: #0d1220;
	--bg-deep: #050710;
	--bg-3: #10152a;
	--surface: rgba(255, 255, 255, 0.045);
	--surface-strong: rgba(255, 255, 255, 0.08);
	--line: rgba(255, 255, 255, 0.11);
	--line-soft: rgba(255, 255, 255, 0.06);

	--text: #F5F1E7;
	--text-soft: #CBC8DA;
	--text-faint: #9591A8;
	--text-dim: #6E6B80;

	/* The two phenomena colours — used deliberately, one per register,
	   never both at equal weight in the same moment (see brief). */
	--teal: #4EE2C4;
	--teal-deep: #2FB89D;
	--teal-rgb: 78, 226, 196;
	--violet: #9A7EE0;
	--violet-deep: #7A5FC0;
	--violet-rgb: 154, 126, 224;

	/* Amber — small functional accent only (links/buttons), never a scene colour. */
	--amber: #E8A659;
	--amber-deep: #CF8C3F;

	/* Live-updated by nyx-field.js from the background's current scroll-mix
	   state (0 = nebula/violet, 1 = bay/teal) -- read by every .glass panel's
	   inner glow. Defaults here cover no-JS / pre-first-frame. */
	--nyx-glow-rgb: 154, 126, 224;
	--nyx-glow: 0.4;

	--font-display: 'Newsreader', Georgia, serif;
	--font-sans: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
	--font-label: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;

	--fs-1: 1rem;
	--fs-2: 1.25rem;
	--fs-3: 1.5625rem;
	--fs-4: 1.9531rem;
	--fs-5: 2.4414rem;
	--fs-6: clamp(2.2rem, 1.1rem + 4.6vw, 3.8rem);
	--fs-7: clamp(2.6rem, 1.1rem + 6.6vw, 5.6rem);

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 16px;
	--sp-4: 24px;
	--sp-5: 40px;
	--sp-6: 64px;
	--sp-7: 96px;
	--sp-8: 144px;

	/* Section rhythm — leans toward the top of this catalogue's 120–180px
	   premium band on desktop, compresses gracefully down to a still-generous
	   value on mobile rather than collapsing to a dense mobile default. */
	--section-pad: clamp(64px, 6vw + 88px, 176px);

	--radius: 14px;
	--radius-sm: 8px;
	--radius-lg: 22px;
	--wrap: 1280px;
	--wrap-wide: 1480px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--font-sans);
	/* Deliberately NO background-color here (unlike html's, just above,
	   which stays as a same-colour fallback/backdrop before JS/canvas
	   paints). A real bug caught during this build's own verification: body
	   has no explicit z-index, so under the CSS2.1 painting-order rules an
	   opaque body background paints ABOVE a negative-z-index fixed child
	   (canvas.nyx-field, z-index:-2) regardless of DOM order or stacking
	   context nuances -- it silently hid the entire WebGL background behind
	   a flat body-coloured rectangle. Leaving body transparent lets html's
	   identical background colour show through as the pre-JS fallback while
	   never occluding the canvas once it mounts. */
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
	overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0 0 var(--sp-3); letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: var(--fs-7); font-weight: 400; }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-3); }
p { margin: 0 0 var(--sp-3); color: var(--text-soft); }
em, i { font-style: italic; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-4); position: relative; z-index: 1; }
.wrap--narrow { max-width: 760px; }
.wrap--wide { max-width: var(--wrap-wide); }

/* Invisible scroll markers nyx-field.js's IntersectionObserver watches to
   pick up the target nebula<->water mix. Deliberately spans the FULL
   section (position:absolute; inset:0 against the section's own
   position:relative) rather than a thin line at one edge -- an earlier
   version used a 2-3px line watched via a razor-thin rootMargin-shrunk
   "crossing the viewport centre" band, which this build's own puppeteer
   verification pass caught as unreliable: a real user's (or a test's)
   discrete scroll jump can land entirely on either side of a 3px band
   between two IntersectionObserver callbacks and never register a
   crossing at all. A full-section-height target intersects continuously
   for as long as any part of that section is on screen, and nyx-field.js
   blends the currently-intersecting sections by their live
   intersectionRatio, which is what actually produces the smooth
   scroll-tied cross-fade the brief asks for. */
.nyx-mix-marker { position: absolute; inset: 0; pointer-events: none; z-index: -1; }

/* ---------- Persistent WebGL2 background ---------- */
canvas.nyx-field {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	pointer-events: none;
	display: block;
}
.nyx-field-static-fallback {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(ellipse 70% 55% at 28% 22%, rgba(154, 126, 224, 0.24), transparent 60%),
		radial-gradient(ellipse 60% 45% at 78% 68%, rgba(78, 226, 196, 0.18), transparent 62%),
		linear-gradient(180deg, #0a0e18 0%, #0d1220 55%, #081611 100%);
}
/* A very subtle fixed vignette + grain scrim above the canvas, below content
   -- keeps edges/corners grounded and prevents the field from ever reading
   as a flat, infinite, wallpaper-like texture. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(5, 7, 16, 0.55) 100%);
}

/* ---------- Glass (frosted dark panel, live glow-coupled) ---------- */
.glass {
	position: relative;
	background: rgba(16, 20, 34, 0.56);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--radius);
	box-shadow:
		inset 0 0 calc(14px + var(--nyx-glow, 0.4) * 30px) rgba(var(--nyx-glow-rgb, 154, 126, 224), calc(0.10 + var(--nyx-glow, 0.4) * 0.22)),
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 30px 70px -34px rgba(0, 0, 0, 0.65);
	transition: box-shadow 300ms ease, transform 220ms ease, border-color 220ms ease;
	color: var(--text);
}
.glass:hover { border-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }
.glass--solid { background: rgba(10, 13, 22, 0.86); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; padding: 10px 0; margin: 0; border-radius: 0; border-left: none; border-right: none; border-top: none; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 6px var(--sp-4); max-width: var(--wrap-wide); margin: 0 auto; }
.brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.02em; display: flex; align-items: baseline; gap: 12px; }
.brand__tag { font-family: var(--font-label); font-size: 0.6875rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.nav ul { list-style: none; display: flex; gap: var(--sp-5); margin: 0; padding: 0; }
.nav a { font-size: 0.9rem; color: var(--text-soft); transition: color 160ms ease; letter-spacing: 0.01em; }
.nav a:hover { color: var(--teal); }

.nav-toggle {
	display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
	color: var(--text); padding: 0.5em 0.9em; font-size: 0.9rem; cursor: pointer;
}
@media (max-width: 880px) {
	.nav-toggle { display: inline-flex; }
	/* backdrop-filter on .site-header creates a containing block for
	   position:fixed descendants, trapping the mobile nav panel inside the
	   header's own box instead of the viewport -- recurring bug class across
	   this catalogue, fixed from day one here. */
	.site-header.nav-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-deep); transform: none !important; }
	.nav {
		position: fixed; inset: 64px 0 0 0; background: var(--bg-deep); padding: var(--sp-5) var(--sp-4);
		transform: translateY(-8px); opacity: 0; pointer-events: none;
		transition: opacity 220ms ease, transform 220ms ease; overflow-y: auto; z-index: 59;
	}
	.nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
	.nav ul { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
	.nav a { font-size: 1.3rem; }
	.brand__tag { display: none; }
	.site-header__inner { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
	.site-header__inner > div { gap: var(--sp-2) !important; }
	.btn.btn--solid { padding: 0.6em 0.85em; font-size: 0.75rem; }
	.nav-toggle { padding: 0.5em 0.7em; font-size: 0.78rem; }
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 0.9em 1.6em; border-radius: 999px;
	font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; border: 1px solid var(--line);
	background: transparent; color: var(--text); cursor: pointer; transition: all 180ms ease;
}
.btn:hover { border-color: var(--teal); color: var(--teal); }
.btn--solid { background: var(--amber); color: #1a1206; border-color: var(--amber); }
.btn--solid:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #1a1206; }
.btn--teal { background: var(--teal); color: #052620; border-color: var(--teal); }
.btn--teal:hover { background: var(--teal-deep); border-color: var(--teal-deep); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-label); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--teal); margin-bottom: var(--sp-3); }
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--teal); }
.eyebrow--violet { color: var(--violet); }
.eyebrow--violet::before { background: var(--violet); }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Reveal (directional entrance choreography) ---------- */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 800ms ease, transform 800ms ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translate(-40px, 12px); }
[data-reveal="left"].is-visible { transform: none; }
[data-reveal="right"] { transform: translate(40px, 12px); }
[data-reveal="right"].is-visible { transform: none; }
[data-reveal="up"] { transform: translateY(56px); }
[data-reveal="up"].is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   Generic grid / card (experiences/rooms cross-link rails, journal teaser)
   ===================================================================== */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { display: block; padding: var(--sp-4); }
.card__media { aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--sp-4); background: var(--surface); }
.card__media--glow { background: radial-gradient(ellipse at 30% 30%, rgba(var(--violet-rgb), 0.35), transparent 60%), radial-gradient(ellipse at 75% 70%, rgba(var(--teal-rgb), 0.3), transparent 60%), var(--bg-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__eyebrow { font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal); margin-bottom: var(--sp-2); }
.card__title { margin-bottom: var(--sp-2); font-size: var(--fs-3); }
.card__excerpt { color: var(--text-soft); font-size: 0.9375rem; margin-bottom: 0; }

.section-head { max-width: 680px; margin: 0 auto var(--sp-7); text-align: center; }
.section-head--left { margin: 0 0 var(--sp-6); text-align: left; }
.pull-quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-4); line-height: 1.35; color: var(--text); }
.pull-quote cite { display: block; margin-top: var(--sp-4); font-family: var(--font-label); font-size: 0.875rem; font-weight: 600; font-style: normal; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 0; padding: var(--sp-8) 0 var(--sp-5); background: var(--bg-deep); color: var(--text); border-top: 1px solid var(--line-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-7); }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-family: var(--font-label); font-weight: 600; margin-bottom: var(--sp-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a, .footer-grid p { color: var(--text-soft); font-size: 0.9375rem; }
.footer-grid .brand { color: var(--text); }
.footer-legal { display: flex; justify-content: space-between; padding-top: var(--sp-5); border-top: 1px solid var(--line-soft); font-size: 0.8125rem; color: var(--text-faint); flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Forms ---------- */
.enquiry-form input, .enquiry-form textarea, .enquiry-form select {
	width: 100%; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--line);
	background: rgba(255,255,255,0.04); color: var(--text); font-family: var(--font-sans); font-size: 0.9375rem; margin-bottom: var(--sp-3);
}
.enquiry-form input::placeholder, .enquiry-form textarea::placeholder { color: var(--text-dim); }
.enquiry-form input:focus, .enquiry-form textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.enquiry-form__status { font-size: 0.875rem; color: var(--text-soft); }
.enquiry-form__status.is-error { color: #e88a7a; }

/* ---------- Inner page head / detail head (CPT + page templates) ---------- */
.page-head { padding: var(--sp-8) 0 var(--sp-7); background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 1; }
.page-head h1 { font-size: var(--fs-6); max-width: 16ch; }
.page-head__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); flex-wrap: wrap; }
.page-head__intro { max-width: 640px; }
.page-head__stats { display: flex; gap: var(--sp-6); flex: 0 0 auto; }
.page-head__stats .about-stats__num { font-size: var(--fs-5); }
@media (max-width: 720px) { .page-head__inner { align-items: flex-start; } .page-head__stats { gap: var(--sp-5); } }

.entry-content { line-height: 1.85; }
.entry-content h2 { margin-top: var(--sp-7); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; color: var(--text-soft); }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: var(--sp-3); }
.breadcrumb a { color: var(--text-faint); }
.breadcrumb a:hover { color: var(--teal); }

.detail-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; padding: var(--sp-8) 0; background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 1; }
.detail-head__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.detail-head__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-head--experience .detail-head__media { aspect-ratio: 4/5; }
.detail-head--room .detail-head__media { aspect-ratio: 4/5; }
.detail-head__body { display: flex; flex-direction: column; }
.detail-head__lede { font-size: var(--fs-2); color: var(--text-soft); margin-bottom: var(--sp-4); }
.detail-head__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
@media (max-width: 880px) { .detail-head { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-7) 0; } }

.material-link { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); text-decoration: none; color: inherit; }
.material-link__media { width: 96px; height: 96px; flex: 0 0 auto; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.material-link__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.material-link__eyebrow { font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal); margin-bottom: 4px; }
.material-link__title { font-family: var(--font-display); font-size: var(--fs-3); margin: 0; }

.spec-sheet { display: grid; gap: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
.spec-sheet__row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); gap: var(--sp-4); }
.spec-sheet__row dt { font-family: var(--font-label); font-size: 0.8125rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.spec-sheet__row dd { margin: 0; font-weight: 700; text-align: right; color: var(--text); }
.fact-line { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
dl.fact-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--sp-4); }
dl.fact-line .fact-line__row dt { font-family: var(--font-label); font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
dl.fact-line .fact-line__row dd { margin: 0; color: var(--text); font-weight: 700; white-space: normal; }

.archive-intro { max-width: 640px; margin: var(--sp-3) 0 0; color: var(--text-soft); }
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--sp-5) 0 var(--sp-6); }
.filter-pills a { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-label); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); text-decoration: none; transition: border-color 160ms ease, color 160ms ease; }
.filter-pills a:hover, .filter-pills a.is-active { border-color: var(--teal); color: var(--teal); }

.about-stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin: var(--sp-6) 0; padding: var(--sp-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-stats__num { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-4); color: var(--teal); }
.about-stats__label { font-family: var(--font-label); font-size: 0.78rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; padding-left: var(--sp-5); }
.comment-body { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.comment-form input, .comment-form textarea {
	width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
	background: rgba(255,255,255,0.04); color: var(--text); font-family: var(--font-sans); font-size: 0.9375rem; margin-bottom: var(--sp-3);
}

/* =====================================================================
   Signature: HERO — full viewport height, minimal DOM, atmosphere carried
   by the persistent background canvas behind it.
   ===================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: var(--sp-8) 0 var(--sp-7);
}
.hero__inner { max-width: 760px; }
.hero__eyebrow { color: var(--teal); }
.hero__title { font-size: var(--fs-7); max-width: 14ch; margin-bottom: var(--sp-4); font-weight: 400; }
.hero__title em { font-style: italic; color: var(--violet); }
.hero__lede { font-size: var(--fs-2); color: var(--text-soft); max-width: 46ch; margin-bottom: var(--sp-6); }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero__scroll-cue {
	position: absolute; left: var(--sp-4); bottom: var(--sp-6); display: flex; align-items: center; gap: 10px;
	font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint);
}
.hero__scroll-cue::after { content: ''; width: 1px; height: 34px; background: linear-gradient(180deg, var(--teal), transparent); animation: nyx-scrollcue 2.4s ease-in-out infinite; }
@keyframes nyx-scrollcue { 0% { opacity: .2; transform: scaleY(0.4); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } 100% { opacity: .2; transform: scaleY(0.4); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-cue::after { animation: none; opacity: .6; } }
@media (max-width: 640px) { .hero { min-height: 92vh; } }

/* =====================================================================
   Signature: two-phenomena editorial split
   ===================================================================== */
.split-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
.phenomena-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-width: var(--wrap-wide); margin: 0 auto; position: relative; }
.phenomena-wrap::before {
	content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
	background: linear-gradient(180deg, transparent, rgba(255,255,255,0.16), transparent);
}
.phenom { padding: 0 var(--sp-6); }
.phenom__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5/4; margin-bottom: var(--sp-5); }
.phenom__media img { width: 100%; height: 100%; object-fit: cover; }
.phenom__title { font-size: var(--fs-5); }
.phenom__text { color: var(--text-soft); max-width: 46ch; }
@media (max-width: 900px) {
	.phenomena-wrap { grid-template-columns: 1fr; gap: var(--sp-7); }
	.phenomena-wrap::before { display: none; }
	.phenom { padding: 0 var(--sp-3); }
}

/* =====================================================================
   Signature: science facts band — text/data-forward, deliberately the
   opposite register of the image-forward phenomena split above it.
   ===================================================================== */
.facts-band { padding: var(--section-pad) 0; background: var(--bg-deep); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 1; }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); max-width: var(--wrap-wide); margin: 0 auto; }
.facts-col__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; margin-bottom: var(--sp-5); }
.facts-col__media img { width: 100%; height: 100%; object-fit: cover; }
.facts-list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; counter-reset: fact; display: grid; gap: var(--sp-4); }
.facts-list li { counter-increment: fact; position: relative; padding-left: 3.2em; }
.facts-list li::before {
	content: counter(fact, decimal-leading-zero);
	position: absolute; left: 0; top: 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--teal);
}
.facts-list--violet li::before { color: var(--violet); }
.facts-list strong { color: var(--text); font-weight: 700; }
@media (max-width: 900px) { .facts-grid { grid-template-columns: 1fr; gap: var(--sp-7); } }

/* =====================================================================
   Signature: experiences horizontal-scroll rail (distinct from the room
   rows and gallery grid below — three different multi-item layouts).
   ===================================================================== */
.rail-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
.rail { display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--sp-2) var(--sp-4) var(--sp-6); margin: 0 calc(var(--sp-4) * -1); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.rail-card { flex: 0 0 auto; width: min(74vw, 420px); scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.rail-card__media { aspect-ratio: 4/3; overflow: hidden; }
.rail-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.rail-card:hover .rail-card__media img { transform: scale(1.05); }
.rail-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); flex: 1; display: flex; flex-direction: column; }
.rail-card__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--font-label); font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--sp-2) 0 var(--sp-3); }
.rail-card__excerpt { color: var(--text-soft); font-size: 0.9375rem; margin-bottom: var(--sp-3); flex: 1; }
.rail-card__link { font-family: var(--font-label); font-size: 0.8125rem; font-weight: 700; color: var(--teal); }
.rail-hint { text-align: right; font-family: var(--font-label); font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: calc(var(--sp-6) * -1 + 8px); }
@media (max-width: 640px) { .rail-card { width: 84vw; } }

/* =====================================================================
   Signature: rooms — alternating full-bleed split rows.
   ===================================================================== */
.room-rows { position: relative; z-index: 1; padding: var(--section-pad) 0 calc(var(--section-pad) - var(--sp-5)); }
.room-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: center; padding-bottom: var(--sp-8); }
.room-row:last-child { padding-bottom: 0; }
.room-row--reverse { direction: rtl; }
.room-row--reverse > * { direction: ltr; }
.room-row__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 6/5; }
.room-row__media img { width: 100%; height: 100%; object-fit: cover; }
.room-row__body { padding: 0 var(--sp-4); }
.room-row__title { font-size: var(--fs-5); }
.room-row__excerpt { color: var(--text-soft); margin-bottom: var(--sp-4); max-width: 48ch; }
@media (max-width: 900px) {
	.room-row, .room-row--reverse { grid-template-columns: 1fr; direction: ltr; gap: var(--sp-5); padding-bottom: var(--sp-7); }
	.room-row__body { padding: 0; }
}

/* =====================================================================
   Signature: photography-forward gallery — dense masonry-like grid, the
   section where "lots of images" is most visible.
   ===================================================================== */
.gallery-section { padding: var(--section-pad) 0; background: var(--bg-2); position: relative; z-index: 1; }
.photo-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 140px;
	grid-auto-flow: dense;
	gap: var(--sp-3);
	max-width: var(--wrap-wide);
	margin: 0 auto;
}
.g-cell { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.g-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; }
.g-cell:hover img { transform: scale(1.06); }
.g-cell__caption {
	position: absolute; inset: auto 0 0 0; padding: var(--sp-3) var(--sp-3) var(--sp-2);
	background: linear-gradient(0deg, rgba(5,7,16,0.82) 0%, transparent 100%);
	font-family: var(--font-label); font-size: 0.75rem; color: var(--text-soft);
	opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 220ms ease;
}
.g-cell:hover .g-cell__caption, .g-cell:focus-within .g-cell__caption { opacity: 1; transform: none; }
.g-wide { grid-column: span 2; grid-row: span 1; }
.g-tall { grid-column: span 2; grid-row: span 2; }
.g-sq   { grid-column: span 2; grid-row: span 1; }
.g-big  { grid-column: span 3; grid-row: span 2; }
@media (max-width: 900px) {
	.photo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
	.g-wide, .g-tall, .g-sq, .g-big { grid-column: span 1; grid-row: span 1; }
	.g-tall, .g-big { grid-row: span 2; }
}

/* =====================================================================
   Signature: dining split — reuses the phenomena split language but at a
   single-pair scale and warm amber accent, so it reads related but distinct.
   ===================================================================== */
.dine-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
.dine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); max-width: var(--wrap-wide); margin: 0 auto; align-items: center; }
.dine-grid__media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.dine-grid__media img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; }
.dine-grid__media a:first-child { margin-top: var(--sp-7); }
.dine-menu { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.dine-menu li { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--text-soft); font-size: 0.9375rem; }
.dine-menu strong { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .dine-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .dine-grid__media a:first-child { margin-top: 0; } }

/* =====================================================================
   Signature: guide / naturalist team grid — circular portraits.
   ===================================================================== */
.team-section { padding: var(--section-pad) 0; background: var(--bg-deep); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 1; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); max-width: var(--wrap-wide); margin: 0 auto; }
.guide-card { text-align: center; padding: var(--sp-5) var(--sp-4); }
.guide-card__media { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; margin: 0 auto var(--sp-4); border: 1px solid rgba(255,255,255,0.14); }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.guide-card__name { font-family: var(--font-display); font-size: var(--fs-3); margin-bottom: 2px; }
.guide-card__role { font-family: var(--font-label); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal); margin-bottom: var(--sp-3); display: block; }
.guide-card__bio { font-size: 0.875rem; color: var(--text-soft); margin: 0; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Signature: seasonal calendar — a single wide horizontal-scroll strip,
   the "large single-column moment" this catalogue's brief calls for.
   ===================================================================== */
.season-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
.season-scroll { display: flex; gap: var(--sp-3); overflow-x: auto; padding: var(--sp-2) var(--sp-4) var(--sp-4); margin: 0 calc(var(--sp-4) * -1); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.month-card { flex: 0 0 auto; width: 232px; scroll-snap-align: start; padding: var(--sp-4); display: flex; flex-direction: column; gap: 10px; }
.month-card--peak { border-color: rgba(var(--teal-rgb), 0.4); }
.month-card__name { font-family: var(--font-display); font-size: var(--fs-3); margin: 0; }
.month-card__badge { align-self: flex-start; font-family: var(--font-label); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; background: rgba(var(--teal-rgb), 0.16); color: var(--teal); }
.month-card__badge--violet { background: rgba(var(--violet-rgb), 0.16); color: var(--violet); }
.month-card__note { font-size: 0.8125rem; color: var(--text-soft); margin: 0; }
.season-legend { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-5); font-family: var(--font-label); font-size: 0.8125rem; color: var(--text-faint); }
.season-legend span { display: inline-flex; align-items: center; gap: 8px; }
.season-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* =====================================================================
   Signature: testimonials — stacked glass quote cards.
   ===================================================================== */
.testimonial-section { padding: var(--section-pad) 0; background: var(--bg-2); position: relative; z-index: 1; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); max-width: var(--wrap-wide); margin: 0 auto; }
.testimonial-card { padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; }
.testimonial-card__quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-2); line-height: 1.4; margin-bottom: var(--sp-5); flex: 1; }
.testimonial-card__person { display: flex; align-items: center; gap: 12px; }
.testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card__name { font-weight: 700; font-size: 0.875rem; color: var(--text); }
.testimonial-card__role { font-size: 0.75rem; color: var(--text-faint); }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Journal teaser band.
   ===================================================================== */
.journal-section { padding: var(--section-pad) 0; position: relative; z-index: 1; }

/* =====================================================================
   Signature: location/access + booking CTA — full-width dark closing band.
   ===================================================================== */
.cta-band { padding: var(--section-pad) 0 calc(var(--section-pad) - var(--sp-4)); background: var(--bg-deep); border-top: 1px solid var(--line-soft); position: relative; z-index: 1; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); max-width: var(--wrap-wide); margin: 0 auto; align-items: start; }
.cta-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/11; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; }
.access-list { list-style: none; margin: var(--sp-5) 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-4); }
.access-list li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-soft); font-size: 0.9375rem; }
.access-list li::before { content: '—'; color: var(--teal); flex: 0 0 auto; }
.cta-address { font-size: 0.9375rem; color: var(--text-soft); white-space: pre-line; margin-bottom: var(--sp-5); }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* Reduced content padding on small screens so the generous desktop rhythm
   doesn't feel bloated on a 390px viewport. */
@media (max-width: 600px) {
	:root { --section-pad: 72px; }
	.hero__title { font-size: clamp(2.2rem, 8vw + 1rem, 3rem); }
}