/* Variant A — Cinematic: "Into the Mist"
   Letterboxed opening, scroll-driven camera, chapters, horizontal film-strip stays, end credits. */

body { background: var(--tea-950); color: var(--mist-100); }
.nav { color: var(--ivory-50); }
.nav.is-solid { background: rgba(11, 33, 27, .82); color: var(--ivory-50); box-shadow: none; border-bottom: 1px solid rgba(227, 199, 143, .18); }
.nav.is-solid .btn { --bg: var(--brass-500); }

/* ---------- film grain ---------- */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ---------- opening scene (pinned) ---------- */
.opening { position: relative; height: 320vh; }
.opening__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.cam { position: absolute; inset: 0; transform: scale(var(--zoom, 1)); transform-origin: 60% 70%; will-change: transform; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #08180F 0%, #14352A 45%, #3A5F4C 72%, #9DB0A0 100%); }
.sun { position: absolute; left: 58%; top: 34%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; background: radial-gradient(circle, rgba(251, 248, 241, .9) 0%, rgba(227, 199, 143, .55) 12%, rgba(227, 199, 143, .14) 40%, transparent 70%); transform: translateY(var(--sun, 0px)); }
.hill { position: absolute; left: -5%; width: 110%; bottom: 0; will-change: transform; }
.hill svg { width: 100%; height: 100%; }
.hill--1 { height: 70%; transform: translateY(var(--h1, 0px)); }
.hill--2 { height: 54%; transform: translateY(var(--h2, 0px)); }
.hill--3 { height: 38%; transform: translateY(var(--h3, 0px)); }
.hill--4 { height: 22%; transform: translateY(var(--h4, 0px)); }
.fog { position: absolute; left: -30%; width: 160%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(220, 227, 214, .55), transparent); filter: blur(20px); }
.fog--a { top: 46%; height: 20%; animation: drift 18s ease-in-out infinite alternate; }
.fog--b { top: 62%; height: 26%; opacity: .8; animation: drift 24s ease-in-out infinite alternate-reverse; }
.fog--wall { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 70%, rgba(220, 227, 214, .95), rgba(201, 211, 204, .9) 60%, rgba(11, 33, 27, 1)); opacity: var(--wall, 0); pointer-events: none; z-index: 4; }
.vignette { position: absolute; inset: 0; z-index: 3; background: radial-gradient(120% 100% at 50% 50%, transparent 50%, rgba(5, 15, 11, .75) 100%); pointer-events: none; }

.bars::before, .bars::after { content: ""; position: absolute; left: 0; right: 0; z-index: 6; height: var(--bars, 11vh); background: #050D09; }
.bars::before { top: 0; } .bars::after { bottom: 0; }
.black { position: absolute; inset: 0; z-index: 7; background: #050D09; animation: fadeFromBlack 2.6s .2s var(--ease-cine) forwards; pointer-events: none; }
@keyframes fadeFromBlack { to { opacity: 0; } }

.card { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; text-align: center; padding: 0 var(--gutter); pointer-events: none; }
.card--title { opacity: var(--t1, 1); transform: translateY(calc((1 - var(--t1, 1)) * -40px)); }
.card--title .kicker { font-size: 12px; letter-spacing: .6em; text-transform: uppercase; color: var(--brass-300); font-weight: 600; margin-bottom: 26px; display: block; animation: fadeUp 1.6s 1.4s var(--ease) both; }
.card--title .big { font-family: var(--font-display); font-size: clamp(56px, 11vw, 176px); line-height: .9; color: var(--ivory-50); letter-spacing: .08em; font-weight: 500; animation: tracking 3s 1s var(--ease-cine) both; }
.card--title .roman { display: block; margin-top: 22px; font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.4vw, 32px); color: var(--brass-300); animation: fadeUp 1.6s 2s var(--ease) both; }
@keyframes tracking { from { letter-spacing: .5em; opacity: 0; filter: blur(12px); } to { letter-spacing: .08em; opacity: 1; filter: blur(0); } }

.card--head { opacity: var(--t2, 0); pointer-events: auto; }
html:not(.js) .card--head, .no-pin .card--head { opacity: 1; }
.card--head .inner { max-width: 980px; transform: translateY(calc((1 - var(--t2, 0)) * 50px)); filter: blur(calc((1 - var(--t2, 0)) * 10px)); }
.card--head .h1 { color: var(--ivory-50); margin: 24px 0; text-shadow: 0 10px 40px rgba(5, 13, 9, .6); }
.card--head .lead { color: var(--mist-100); max-width: 600px; margin: 0 auto; }
.card--head .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.card--head .eyebrow::after { content: ""; width: 36px; height: 1px; background: currentColor; }

.scrollcue { position: absolute; left: 50%; bottom: calc(var(--bars, 11vh) + 20px); z-index: 8; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--mist-200); opacity: var(--t1, 1); }
.scrollcue span { width: 1px; height: 46px; background: linear-gradient(var(--brass-300), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.timecode { position: absolute; z-index: 8; right: var(--gutter); top: calc(var(--bars, 11vh) + 18px); font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; color: rgba(227, 199, 143, .7); }
.timecode::before { content: "● "; color: #C0583F; animation: rec 1.4s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0; } }

/* ---------- chapter rail ---------- */
.rail { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 80; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rail a { display: flex; align-items: center; gap: 10px; min-height: 32px; text-decoration: none; font-family: var(--font-display); font-style: italic; font-size: 15px; color: rgba(220, 227, 214, .45); transition: color .4s; }
.rail a::before { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.rail a.is-active { color: var(--brass-300); }
.rail a.is-active::before { width: 34px; }
.rail .rail__txt { opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s; font-style: normal; font-family: var(--font-body); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.rail a.is-active .rail__txt, .rail a:hover .rail__txt { opacity: 1; transform: none; }
@media (max-width: 1100px) { .rail { display: none; } }

/* ---------- booking ---------- */
.booking-scene { position: relative; z-index: 2; padding: 0 0 40px; margin-top: -120px; }
@media (max-width: 760px) { .booking-scene { margin: 0; padding: 0; } }

/* ---------- chapters ---------- */
.chapter { position: relative; padding: 130px 0; }
.chapter__mark { display: flex; align-items: baseline; gap: 18px; margin-bottom: 40px; }
.chapter__num { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--brass-300); }
.chapter__mark .eyebrow::before { display: none; }
.chapter__mark::after { content: ""; flex: 1; height: 1px; background: rgba(227, 199, 143, .25); }

.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.split .w > span { display: inline-block; transition: transform 1.2s var(--ease-cine), opacity 1.2s var(--ease), filter 1.2s var(--ease); transition-delay: calc(var(--i) * 45ms); }
html.js .split:not(.is-in) .w > span { transform: translateY(105%); opacity: 0; filter: blur(6px); }

/* chapter I */
.heritage { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.heritage .h2 { color: var(--ivory-50); margin-bottom: 32px; }
.heritage p { color: var(--mist-200); }
.frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 8s linear; }
.frame.is-in img { transform: scale(1); }
.frame__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; background: linear-gradient(transparent, rgba(5, 13, 9, .85)); color: var(--mist-200); }
.ghost-year { position: absolute; right: -2vw; top: 40px; font-family: var(--font-display); font-style: italic; font-size: clamp(140px, 24vw, 380px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(227, 199, 143, .18); pointer-events: none; z-index: -1; }
@media (max-width: 960px) { .heritage { grid-template-columns: 1fr; gap: 56px; } }

/* chapter II — film strip */
.strip { position: relative; height: 420vh; }
.strip__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.strip__head { padding: calc(var(--nav-h) + 10px) 0 28px; }
.strip__head .h2 { color: var(--ivory-50); }
.strip__row { display: flex; gap: 3vw; padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-right: 10vw; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.reel { flex: none; width: min(78vw, 920px); display: grid; grid-template-columns: 1.35fr 1fr; background: var(--tea-900); border: 1px solid rgba(227, 199, 143, .16); position: relative; }
.reel::before, .reel::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: radial-gradient(circle at 10px 7px, var(--tea-950) 3.2px, transparent 3.6px) 0 0 / 20px 14px repeat-x; opacity: .9; }
.reel::before { top: -15px; } .reel::after { bottom: -15px; }
.reel .ph { min-height: 52vh; }
.reel .ph img { position: absolute; inset: 0; transform: scale(1.04); transition: transform 1.4s var(--ease); }
.reel:hover .ph img { transform: scale(1.1); }
.reel__body { padding: 40px 36px; display: flex; flex-direction: column; gap: 14px; }
.reel__frame { font: 500 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .2em; color: var(--brass-300); }
.reel .h3 { color: var(--ivory-50); font-size: clamp(30px, 3vw, 44px); }
.reel p { color: var(--mist-200); font-size: 15px; margin: 0; }
.reel__cap { display: flex; gap: 10px; align-items: center; font-size: 14px; padding-top: 16px; border-top: 1px solid rgba(227, 199, 143, .2); margin-top: auto; }
.reel__cap .icon { color: var(--brass-300); width: 20px; height: 20px; }
.reel .price { color: var(--ivory-50); }
.reel .price small { color: var(--mist-200); }
.strip__progress { margin-top: 44px; height: 1px; background: rgba(227, 199, 143, .18); position: relative; width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.strip__progress::after { content: ""; position: absolute; inset: 0; background: var(--brass-300); transform: scaleX(var(--sp, 0)); transform-origin: left; }

.no-pin .strip { height: auto; }
.no-pin .strip__stage { position: relative; height: auto; padding: 120px 0; }
.no-pin .strip__row { transform: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 30px; }
.no-pin .reel { scroll-snap-align: start; }
.no-pin .strip__progress { display: none; }
@media (max-width: 760px) {
  .reel { grid-template-columns: 1fr; width: 84vw; }
  .reel .ph { min-height: 34vh; }
  .reel__body { padding: 24px 20px; }
}

/* chapter III — club */
.club { background: linear-gradient(180deg, var(--tea-950), var(--tea-900) 30%, var(--tea-900) 70%, var(--tea-950)); }
.club__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
.club .h2 { color: var(--ivory-50); margin-bottom: 28px; }
.club p { color: var(--mist-200); }
.credits { list-style: none; margin: 40px 0 0; padding: 0; }
.credits li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(227, 199, 143, .14); }
.credits .icon { color: var(--brass-300); width: 30px; height: 30px; }
.credits strong { font-family: var(--font-display); font-weight: 500; font-size: 28px; color: var(--ivory-50); }
.credits span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist-200); text-align: right; }
.club .frame { aspect-ratio: 3 / 4; position: sticky; top: 120px; }
@media (max-width: 960px) { .club__grid { grid-template-columns: 1fr; } .club .frame { position: relative; top: 0; aspect-ratio: 4 / 3; } }

/* chapter IV — scope frames */
.scope { display: grid; gap: 96px; }
.scope__item { display: grid; gap: 28px; }
.scope__item a { text-decoration: none; color: inherit; display: block; }
.scope__frame { position: relative; aspect-ratio: 2.39 / 1; overflow: hidden; }
html.js .scope__frame { clip-path: inset(50% 0 50% 0); transition: clip-path 1.6s var(--ease-cine); }
html.js .scope__frame.is-in { clip-path: inset(0 0 0 0); }
.scope__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.2s var(--ease); }
.scope__frame.is-in img { transform: scale(1); }
.scope__item a:hover img { transform: scale(1.05); }
.scope__meta { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.scope__meta .h3 { color: var(--ivory-50); font-size: clamp(32px, 4vw, 60px); }
.scope__meta p { color: var(--mist-200); margin: 8px 0 0; }
@media (max-width: 760px) { .scope__frame { aspect-ratio: 16 / 10; } }

/* chapter V — end credits */
.endcredits { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }
.endcredits .h2 { color: var(--ivory-50); margin-bottom: 32px; }
.enq-panel { background: rgba(251, 248, 241, .04); border: 1px solid rgba(227, 199, 143, .22); padding: 44px; }
.enq-panel .input, .enq-panel .select, .enq-panel .textarea { background: rgba(5, 13, 9, .5); border-color: rgba(220, 227, 214, .25); color: var(--ivory-50); color-scheme: dark; }
.enq-panel .select option { background: var(--tea-900); }
.enq-panel .enquiry-result { color: var(--mist-100); }
.enq-panel .enquiry-result h3 { color: var(--ivory-50); }
.enq-panel .btn--outline { --fg: var(--ivory-50); --bd: rgba(251, 248, 241, .6); }
.endcredits .visit-list a { border-color: rgba(227, 199, 143, .35); }
.endcredits .map { min-height: 260px; margin-top: 40px; }
@media (max-width: 960px) { .endcredits { grid-template-columns: 1fr; gap: 56px; } .enq-panel { padding: 26px 18px; } }

.footer { background: #050D09; }
.footer__close .h1 { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .grain, .black, .fog, .scrollcue span, .timecode::before { animation: none !important; }
  .black { display: none; }
  .card--title .big, .card--title .kicker, .card--title .roman { animation: none !important; }
  .frame img, .scope__frame img { transform: none !important; }
  html.js .scope__frame { clip-path: none; }
  html.js .split .w > span { transform: none !important; opacity: 1 !important; filter: none !important; }
}
.no-pin .opening { height: auto; }
.no-pin .opening__stage { position: relative; min-height: 100svh; }
.no-pin .card--title { display: none; }
@media (max-width: 760px) { .timecode { display: none; } }

/* ---- real media opening ---- */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hill--1, .hill--2, .hill--3 { display: none; }
.hill--4 { height: 14%; }
.fog { opacity: .45; }
.vignette { background: radial-gradient(120% 100% at 50% 50%, rgba(5,13,9,.15) 30%, rgba(5,13,9,.8) 100%), linear-gradient(180deg, rgba(5,13,9,.35), transparent 30%, transparent 70%, rgba(5,13,9,.6)); }
.card--head .inner { text-shadow: 0 2px 30px rgba(5,13,9,.7); }
.map { background-image: url("../shared/photos/town-view.webp"); }
.card--title { background: radial-gradient(60% 50% at 50% 50%, rgba(5,13,9,.62), rgba(5,13,9,.15) 70%, transparent); }
.card--title .kicker, .card--title .roman { text-shadow: 0 2px 18px rgba(5,13,9,.9); }

/* crest on the title card */
.crest--title { display: block; width: clamp(84px, 9vw, 128px); height: clamp(84px, 9vw, 128px); margin: 0 auto 22px; background-color: var(--brass-300); }
.nav.is-solid .crest { background-color: var(--brass-300); }