/* ═══════════════════════════════════════════════════════════════
   VILLA ELARA — a single villa above the Kihim shore
   Slow, expensive, cinematic. Gold on near-black green.
   Perf laws: transform/opacity/clip-path only; no backdrop-filter;
   JS-hidden states live under html.js only (JS-fail-visible).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#0b0f0e;
  --surface:#151b19;
  --fg:#efeae0;
  --fg-dim:#b3aea2;
  --gold:#c8a45e;
  --gold-lo:#987b42;
  --ember:#d9784a;
  --ink-teal:#254441;
  --line:rgba(239,234,224,.14);
  --gold-line:rgba(200,164,94,.34);
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,"Segoe UI",system-ui,sans-serif;
  --dur:1.8s;
  --dur-slow:2.2s;
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:1.05rem;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

.wrap{width:min(1240px,92vw);margin-inline:auto}
.section{padding:clamp(80px,12vw,170px) 0;position:relative}

/* ---------- typography ---------- */
.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.6rem,7vw,6.5rem);
  line-height:1.02;
  letter-spacing:-0.01em;
  margin:0;
}
.display--md{font-size:clamp(2rem,4.6vw,4rem);font-weight:300;line-height:1.06}
.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 26px;
}
.lede{color:var(--fg-dim);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:62ch;line-height:1.75}
.italic{font-family:var(--serif);font-style:italic;font-weight:400}
.section__head{margin-bottom:clamp(40px,6vw,80px)}
p{max-width:62ch}

/* huge serif timestamps / numerals */
.ts{
  font-family:var(--serif);
  font-weight:300;
  font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(8rem,26vw,22rem);
  line-height:.9;
  letter-spacing:-0.02em;
  color:var(--gold);
  opacity:.15;
  user-select:none;
}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 30px;
  font-family:var(--sans);font-weight:500;font-size:0.78rem;letter-spacing:.22em;
  text-transform:uppercase;cursor:pointer;border:1px solid var(--gold-line);
  color:var(--fg);background:transparent;overflow:hidden;
  transition:color .6s var(--ease),border-color .6s var(--ease);
}
.btn--pill{border-radius:999px}
.btn span{position:relative;z-index:1}
/* gold fill sweeps via inner layer scaleX — no width animation */
.btn::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s var(--ease);
}
.btn:hover,.btn:focus-visible{color:#0b0f0e;border-color:var(--gold)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn--solid{background:var(--gold);color:#0b0f0e;border-color:var(--gold)}
.btn--solid::before{background:var(--ember)}
.btn--solid:hover,.btn--solid:focus-visible{color:#0b0f0e;border-color:var(--ember)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}
.link-quiet{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--fg-dim);border-bottom:1px solid var(--line);
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.link-quiet:hover{color:var(--gold);border-color:var(--gold)}

.skip-link{position:absolute;left:-999px;top:0;z-index:500;background:var(--gold);color:#0b0f0e;padding:12px 18px;font-weight:500}
.skip-link:focus{left:12px;top:12px}

/* ---------- grain overlay (static SVG noise image, never animated) ---------- */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------- fixed sky canvas (index) — CSS fallback under the canvas ----------
   fx.js (specialist module) draws the dawn→dusk shader into #skyCanvas and adds
   html.fx-sky. Until then the golden-hour CSS gradient below IS the sky. */
.sky{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 88%,rgba(217,164,94,.34),transparent 60%),
    linear-gradient(180deg,#3c4a4a 0%,#57524a 46%,#d9a45e 88%,#c98a74 100%);
}
.sky::after{ /* settle the fallback toward the page tone so content stays legible */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,15,14,.66),rgba(11,15,14,.55) 45%,rgba(11,15,14,.7));
}
.sky canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
html.fx-sky .sky canvas{opacity:1;transition:opacity 1.2s var(--ease)}
html.fx-sky .sky{background:var(--bg)}
html.fx-sky .sky::after{background:linear-gradient(180deg,rgba(11,15,14,.3),rgba(11,15,14,.14) 45%,rgba(11,15,14,.4))}
.page-over-sky{position:relative;z-index:1}

/* ---------- launch screen: black room, gold monogram ----------
   Fail-safe: without JS html never gets .js → loader display:none. */
.loader{display:none}
html.js{scrollbar-gutter:stable}
html.js.is-loading{overflow:hidden}
html.js .loader{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:400;
  background:#050807;
  will-change:transform,opacity;
}
html.js:not(.is-loading) .loader{display:none}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:30px}
.loader__mono{width:150px;height:150px;overflow:visible}
.loader__e{
  fill:none;stroke:var(--gold);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.loader__ring{
  fill:none;stroke:var(--gold);stroke-width:1;opacity:0;
  transform-box:fill-box;transform-origin:center;transform:scale(.85);
}
.loader__word{
  display:flex;gap:.35em;
  font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,3.4vw,1.8rem);
  letter-spacing:.35em;color:var(--fg);padding-left:.35em;
}
.loader__word span{display:inline-block}
.loader__sub{
  font-family:var(--sans);font-weight:500;font-size:0.72rem;
  letter-spacing:.4em;text-transform:uppercase;color:var(--fg-dim);
  padding-left:.4em;opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .js.is-loading .loader__e{
    stroke-dasharray:1;stroke-dashoffset:1;
    animation:monoDraw 1.1s var(--ease) .1s forwards;
  }
  .js.is-loading .loader__ring{animation:ringIn 1s var(--ease) 1s forwards}
  .js.is-loading .loader__word span{
    opacity:0;transform:translateY(14px);
    animation:ltrIn .9s var(--ease) forwards;
    animation-delay:calc(1.3s + var(--d,0s));
  }
  .js.is-loading .loader__sub{animation:subIn 1s var(--ease) 2s forwards}
  .loader.is-out .loader__ring{animation:ringOut .7s var(--ease) forwards}
}
@keyframes monoDraw{to{stroke-dashoffset:0}}
@keyframes ringIn{to{opacity:.8;transform:scale(1)}}
@keyframes ringOut{to{opacity:0;transform:scale(1.4)}}
@keyframes ltrIn{to{opacity:1;transform:translateY(0)}}
@keyframes subIn{to{opacity:.75}}
/* exit: the black plane lifts as a curtain */
.loader.is-out{transform:translateY(-100%);transition:transform .9s var(--ease)}
.loader.is-fade{opacity:0;transition:opacity .4s linear}
@media (prefers-reduced-motion:reduce){
  html.js .loader .loader__e{stroke-dasharray:none}
  html.js .loader .loader__ring{opacity:.8;transform:scale(1)}
  html.js .loader .loader__sub{opacity:.75}
  .loader.is-out{transform:none;opacity:0;transition:opacity .3s linear}
}

/* ---------- page exit veil (MPA seam) ---------- */
.veil{
  position:fixed;inset:0;z-index:390;background:#050807;
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease);
}
.veil.is-on{opacity:1;pointer-events:auto}

/* ---------- page-enter ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js main,html.js .footer{opacity:0}
  html.js.page-in main,html.js.page-in .footer{
    opacity:1;transition:opacity .6s var(--ease);
  }
}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .6s var(--ease),border-color .6s var(--ease);
}
.nav.is-scrolled{background:rgba(11,15,14,.92);border-color:var(--line)}
.nav__inner{
  width:min(1240px,92vw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:76px;
}
.nav__logo{
  font-family:var(--serif);font-weight:400;font-size:1.35rem;
  letter-spacing:.3em;padding-left:.3em;min-height:44px;display:inline-flex;align-items:center;
}
.nav__mid{display:flex;gap:34px}
.nav__mid a{
  font-size:0.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);position:relative;min-height:44px;display:inline-flex;align-items:center;
  transition:color .5s var(--ease);
}
.nav__mid a:hover{color:var(--fg)}
.nav__mid a[aria-current="page"]{color:var(--fg);box-shadow:inset 0 -1px 0 var(--gold)}
.nav__end{display:flex;align-items:center;gap:16px}
.nav__sound{
  background:none;border:0;cursor:pointer;min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;gap:8px;padding:0 4px;
  font-size:0.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-dim);transition:color .5s var(--ease);
}
.nav__sound:hover{color:var(--fg)}
.nav__sound::before{
  content:"";width:6px;height:6px;border-radius:50%;
  border:1px solid var(--gold);background:transparent;flex:none;
  transition:background .4s var(--ease);
}
.nav__sound[aria-pressed="true"]{color:var(--gold)}
.nav__sound[aria-pressed="true"]::before{background:var(--gold)}
.nav__cta{font-size:0.7rem;min-height:44px;padding:0 24px}
.nav__cta--solid{background:var(--gold);color:#0b0f0e;border-color:var(--gold)}
.nav__burger{
  display:none;background:none;border:0;cursor:pointer;
  width:48px;height:48px;padding:12px;flex-direction:column;justify-content:center;gap:7px;
}
.nav__burger span{display:block;height:1px;background:var(--fg);transition:transform .5s var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:880px){
  .nav__mid,.nav__cta,.nav__sound{display:none}
  .nav__burger{display:flex}
}

/* full-screen mobile nav — near-black panel, serif links, 90ms stagger */
.mnav{
  position:fixed;inset:0;z-index:200;background:#080c0b;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.mnav.is-open{opacity:1;pointer-events:auto}
.mnav[hidden]{display:none}
.mnav__inner{width:min(1240px,86vw);margin-inline:auto;display:grid;gap:6px}
.mnav__eyebrow{margin-bottom:18px}
.mnav__inner > a{
  font-family:var(--serif);font-weight:300;font-size:clamp(2rem,9vw,3.4rem);
  line-height:1.25;color:var(--fg);min-height:48px;display:inline-flex;align-items:center;
  transition:color .4s var(--ease);
}
.mnav__inner > a:hover{color:var(--gold)}
.mnav__inner > a[aria-current="page"]{color:var(--gold)}
.mnav__cta{margin-top:26px}
.mnav__close{
  position:absolute;top:14px;right:max(14px,4vw);
  background:none;border:1px solid var(--line);border-radius:999px;
  width:48px;height:48px;color:var(--fg);cursor:pointer;font-size:1.1rem;
}
@media (prefers-reduced-motion:no-preference){
  .mnav__inner > a,.mnav .mnav__eyebrow,.mnav .mnav__cta{opacity:0;transform:translateY(22px)}
  .mnav.is-open .mnav__inner > a,.mnav.is-open .mnav__eyebrow,.mnav.is-open .mnav__cta{
    opacity:1;transform:none;
    transition:opacity .8s var(--ease),transform .8s var(--ease);
    transition-delay:var(--d,0s);
  }
}

/* ---------- reveal system (JS-fail-visible) ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

.reveal-curtain img,.reveal-curtain video{clip-path:none}
.js .reveal-curtain img,.js .reveal-curtain video{clip-path:inset(0 0 100% 0)}
.js .reveal-curtain.is-in img,.js .reveal-curtain.is-in video{
  clip-path:inset(0 0 0 0);transition:clip-path var(--dur-slow) var(--ease);
}

/* eyebrow tracking settles on entry (one-shot) */
@media (prefers-reduced-motion:no-preference){
  .js .eyebrow.reveal{letter-spacing:.5em;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),letter-spacing 2s var(--ease)}
  .js .eyebrow.reveal.is-in{letter-spacing:.28em}
}

/* gold rule: draws itself on entry */
.rule{width:min(1240px,92vw);margin-inline:auto}
.rule svg{display:block;width:100%;height:22px;overflow:visible}
.rule path{stroke:var(--gold);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .js .rule path{stroke-dasharray:1;stroke-dashoffset:1}
  .js .rule.is-in path{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease) .1s}
}

/* staggered grids (materials, plants, travel, facts, form fields, inc rows) */
.js .stagger > *{opacity:0;transform:translateY(24px)}
.js .stagger.is-in > *{
  opacity:1;transform:none;
  transition:opacity 1.6s var(--ease),transform 1.6s var(--ease);
  transition-delay:calc(var(--stg,140ms) * var(--i,0));
}

/* ---------- hero (index) ---------- */
.hero{position:relative;height:100svh;min-height:640px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__film{position:absolute;inset:0;z-index:0;will-change:opacity}
.hero__film video,.hero__film .film__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,7,.5) 0%,rgba(5,8,7,.08) 40%,rgba(5,8,7,.72) 100%);
}
.hero__content{position:relative;z-index:2;width:min(1240px,92vw);margin:0 auto;padding-bottom:clamp(90px,14vh,150px);will-change:transform}
.hero__eyebrow{margin-bottom:22px}
.hero__name{
  font-family:var(--serif);font-weight:300;margin:0 0 28px;
  font-size:clamp(4.2rem,17vw,15rem);line-height:.9;letter-spacing:.1em;
  display:flex;gap:.03em;
}
.hero__ltr{display:inline-block;will-change:transform,opacity}
.hero__tag{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,2.6vw,1.8rem);color:var(--fg);max-width:24ch;line-height:1.4;margin:0;
}
.hero__cue{
  position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  min-height:44px;justify-content:flex-end;
}
.hero__cue-label{font-size:0.68rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim)}
.hero__cue-line{
  width:1px;height:52px;background:linear-gradient(var(--gold),transparent);
  transform-origin:top;
}
@media (prefers-reduced-motion:no-preference){
  .hero__cue-line{animation:cuePulse 3.2s var(--ease) infinite}
}
@keyframes cuePulse{0%{transform:scaleY(.15);opacity:.3}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.15);opacity:.3}}

/* ---------- video slot contract ----------
   <figure class="film" data-film> — on 404 the wrapper gets .video-pending:
   the poster layer reads as a designed film still with a caption chip. */
.film{position:relative;margin:0;overflow:hidden;background:#0d1418}
.film video{display:block;width:100%;height:100%;object-fit:cover}
.film .film__poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .8s var(--ease);pointer-events:none;
}
.film__chip{
  position:absolute;left:18px;bottom:16px;z-index:3;
  display:none;align-items:center;gap:10px;
  font-size:0.62rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg);padding:9px 14px;
  background:rgba(5,8,7,.72);border:1px solid var(--gold-line);
}
.film__chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.film.video-pending video{opacity:0}
.film.video-pending .film__poster{opacity:1}
.film.video-pending .film__chip{display:inline-flex}

/* letterboxed 21:9 golden-hour frame */
.film-frame{position:relative;padding:clamp(10px,1.6vw,18px)}
.film-frame::before{
  content:"";position:absolute;inset:0;border:1px solid var(--gold-line);pointer-events:none;
}
.film-frame .film{aspect-ratio:21/9}
.film-frame svg.frame-draw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.film-frame svg.frame-draw rect{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:no-preference){
  .js .film-frame svg.frame-draw rect{stroke-dasharray:1;stroke-dashoffset:1}
  .js .film-frame.is-in svg.frame-draw rect{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s var(--ease) .2s}
}
.figcap{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:0.98rem;color:var(--fg-dim);padding:14px 2px 0;
}

/* ---------- pinned chapters (index) ----------
   Default flow is static & readable; pins only under js + motion. */
.ch{position:relative}
.ch__stage{position:relative;display:flex;align-items:center;min-height:100svh;padding:clamp(60px,8vh,110px) 0}
.ch__time{
  position:absolute;top:50%;left:50%;z-index:0;
  transform:translate(-50%,-50%);
  pointer-events:none;white-space:nowrap;
  will-change:transform;
}
.ch__body{position:relative;z-index:1;width:min(1240px,92vw);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.ch__text .display--md{margin:0 0 24px}
.ch__text p{color:var(--fg-dim)}
/* the media column anchors the inset second plate — without this it
   resolves against .ch__body and lands on top of the text column */
.ch__media{position:relative}
.ch__plate{margin:0;overflow:visible;position:relative}
/* clip the parallax overscale on the media box only, so the scaled image
   can never swallow the figcaption that lives inside the same figure */
.ch__plate .plate-clip{display:block;overflow:hidden}
.ch__plate img{width:100%;height:auto;will-change:transform}
.ch__plate-second{margin:0;overflow:hidden;position:absolute;right:-6%;bottom:-14%;width:44%;z-index:2;border:1px solid var(--line);display:none}
@media (min-width:900px){.ch__plate-second{display:block}}
.ch--flip .ch__body > .ch__media{order:-1}
@media (prefers-reduced-motion:no-preference){
  html.js .ch{height:220vh}
  html.js .ch--short{height:200vh}
  html.js .ch__stage{position:sticky;top:0;height:100svh;min-height:0;overflow:hidden}
}
@media (max-width:820px){
  .ch__body{grid-template-columns:1fr;gap:34px}
  .ch--flip .ch__body > .ch__media{order:0}
  .ts{font-size:clamp(6rem,30vw,10rem)}
}

/* chapter background film (chapter IV dusk) */
.ch__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.ch__bg .film{position:absolute;inset:0;height:100%}
.ch__bg .film video,.ch__bg .film .film__poster{position:absolute;inset:0;height:100%;width:100%}
.ch__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,15,14,.78) 0%,rgba(11,15,14,.3) 60%,rgba(11,15,14,.15) 100%);
}
.ch--dusk .ch__body{grid-template-columns:1fr;max-width:none}
.ch--dusk .ch__text{max-width:56ch}

/* fixed static dusk-gradient layer (grounds — featherweight, no shader) */
.dusklayer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 100%,rgba(217,120,74,.1),transparent 60%),
    linear-gradient(180deg,#0b0f0e 0%,#101715 55%,#17201d 100%);
}

/* full-bleed dusk band (chapter IV) */
.duskband{position:relative;overflow:hidden}
.duskband .film{height:clamp(420px,90vh,860px)}
.duskband .film video,.duskband .film .film__poster{position:absolute;inset:0;height:100%}
.duskband__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:90px 0 28px;
  background:linear-gradient(180deg,rgba(11,15,14,0),rgba(11,15,14,.8));
}
.duskband__cap .wrap p{margin:0}

/* ---------- the facts (stat band) ---------- */
.facts{padding:clamp(90px,14vw,190px) 0}
.fact{margin:0 0 clamp(30px,4.5vw,52px);max-width:none}
.fact__num{
  font-family:var(--serif);font-weight:300;color:var(--gold);
  font-size:clamp(3rem,8vw,7rem);line-height:1;letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums lining-nums;
  display:inline-block;margin-right:.18em;vertical-align:-0.06em;
}
.fact__rest{
  font-family:var(--serif);font-weight:300;color:var(--fg);
  font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.2;
}
.facts__close{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--fg-dim);
  margin:clamp(36px,5vw,60px) 0 0;
}

/* ---------- pull-quote: dusk-ember line fill over a doubled runway ---------- */
.quote{position:relative}
.quote__stage{display:flex;align-items:center;min-height:100svh;padding:clamp(70px,10vh,120px) 0}
@media (prefers-reduced-motion:no-preference){
  html.js .quote{height:240vh}
  html.js .quote__stage{position:sticky;top:0;height:100svh;min-height:0}
}
.quote__text{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.7rem,4.4vw,3.4rem);line-height:1.42;letter-spacing:.01em;
  margin:0;max-width:26ch;color:var(--fg);
}
@media (prefers-reduced-motion:no-preference){
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .js .quote__text{
      --q:0%;
      background:linear-gradient(180deg,
        var(--ember) 0,var(--ember) var(--q),
        rgba(239,234,224,.28) calc(var(--q) + 10%));
      -webkit-background-clip:text;background-clip:text;
      color:transparent;-webkit-text-fill-color:transparent;
    }
  }
}

/* ---------- CTA band ---------- */
.cta-band{padding:clamp(90px,13vw,180px) 0}
.cta-band .display--md{max-width:20ch;margin:0 0 24px}
.cta-band .lede{margin:0 0 40px}
.cta-band__row{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center}

/* ---------- next-page band ---------- */
.nextpage{border-top:1px solid var(--line);position:relative;z-index:1;background:var(--bg)}
.nextpage a{display:block;padding:clamp(56px,9vw,110px) 0;transition:background .6s var(--ease)}
@media (hover:hover) and (pointer:fine){.nextpage a:hover{background:var(--surface)}}
.nextpage .eyebrow{margin-bottom:16px}
.nextpage__title{
  font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5.6vw,4.4rem);
  margin:0;display:flex;align-items:center;gap:24px;color:var(--fg);
}
.nextpage__title svg{width:.62em;height:.62em;flex:none;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .nextpage a:hover .nextpage__title svg{transform:translateX(12px)}
}

/* ---------- footer ---------- */
.footer{padding:clamp(60px,9vw,110px) 0 44px;border-top:1px solid var(--line);position:relative;z-index:1;background:var(--bg)}
.footer__grid{display:grid;grid-template-columns:1.2fr .8fr 1fr 1.4fr;gap:38px}
.footer__logo{font-family:var(--serif);font-weight:400;font-size:1.6rem;letter-spacing:.3em}
.footer__loc{color:var(--fg-dim);margin:12px 0 0;font-size:0.92rem}
.footer__label{font-size:0.68rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.footer__col a{display:block;color:var(--fg-dim);padding:6px 0;min-height:34px;font-size:0.95rem;transition:color .5s var(--ease)}
.footer__col a:hover{color:var(--fg)}
.footer__col a[aria-current="page"]{color:var(--fg)}
.footer__meta{color:var(--fg-dim);font-size:0.85rem;line-height:1.8}
.footer__meta p{margin:0 0 8px;max-width:none}
.footer__credit a{color:var(--gold);border-bottom:1px solid var(--gold-line);transition:color .4s var(--ease)}
.footer__credit a:hover{color:var(--fg)}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr;gap:30px}}

/* ---------- giant margin wordmark (index, wide screens) ---------- */
.mark{display:none}
@media (prefers-reduced-motion:no-preference) and (min-width:1280px){
  @supports (-webkit-text-stroke:1px #000){
    .js .mark{
      display:block;position:fixed;top:16vh;right:clamp(10px,2vw,44px);z-index:2;
      pointer-events:none;user-select:none;
      font-family:var(--serif);font-weight:300;font-size:clamp(80px,10vh,120px);line-height:1;
      letter-spacing:.42em;writing-mode:vertical-rl;
      color:transparent;-webkit-text-stroke:1px rgba(200,164,94,.24);
      will-change:transform;
    }
  }
}

/* ---------- interior page head ---------- */
.phead{padding:calc(76px + clamp(70px,11vw,140px)) 0 clamp(40px,6vw,72px)}
.phead .display{max-width:15ch}
.phead .lede{margin-top:28px}
.phead__meta{margin:30px 0 0;font-size:0.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-dim)}
.phead__meta b{color:var(--gold);font-weight:500}

/* ---------- sticky mini-subnav (villa) — solid, no backdrop-filter ---------- */
.subnav{border-block:1px solid var(--line);background:rgba(11,15,14,.92)}
@media (min-width:881px){.subnav{position:sticky;top:76px;z-index:60}}
.subnav__inner{display:flex;gap:clamp(18px,3.4vw,40px);overflow-x:auto;scrollbar-width:none}
.subnav__inner::-webkit-scrollbar{display:none}
.subnav a{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:15px 0;min-height:48px;font-family:var(--serif);font-size:1.02rem;
  color:var(--fg-dim);transition:color .5s var(--ease);
}
.subnav a:hover{color:var(--gold)}
[id]{scroll-margin-top:140px}

/* ---------- THE FORM — 3D assembly mount + designed fallback ----------
   fx.js owns the pinned canvas experience; until it boots (or when WebGL /
   motion is unavailable) the fallback below IS the section. */
.form3d{padding:clamp(60px,8vw,110px) 0 0}
.form3d__runway{display:none;position:relative}
.form3d__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.form3d__stage canvas{position:absolute;inset:0;width:100%;height:100%}
.form3d__caps{position:absolute;left:0;right:0;bottom:9vh;text-align:center;pointer-events:none}
/* anchored by the bottom edge so a caption that wraps grows upward,
   away from the hint sitting below it */
.form3d__cap{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(90vw,520px);
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.35rem);
  color:var(--fg);opacity:0;transition:opacity .8s var(--ease);
}
.form3d__cap.is-live{opacity:1}
.form3d__hint{
  position:absolute;left:0;right:0;bottom:3.4vh;text-align:center;
  font-size:0.68rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-dim);
}
html.fx-3d .form3d__runway{display:block;height:320vh}
html.fx-3d .form3d__fallback{display:none}
@media (prefers-reduced-motion:reduce){
  html.fx-3d .form3d__runway{display:none}
  html.fx-3d .form3d__fallback{display:block}
}

/* elevation / floor-plan fallback (gold line drawing) */
.elev{border:1px solid var(--line);padding:clamp(18px,3vw,34px);margin:0 0 clamp(26px,4vw,44px);background:rgba(21,27,25,.5)}
.elev svg{display:block;width:100%;height:auto}
.elev .el{stroke:rgba(200,164,94,.85);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.elev .el--soft{stroke:rgba(239,234,224,.26);stroke-width:1}
.elev .el--teal{stroke:var(--ink-teal);stroke-width:2.4}
.elev .el--dash{stroke-dasharray:4 6}
.elev text{font-family:var(--serif);font-style:italic;font-size:13px;fill:var(--fg-dim);letter-spacing:.03em}
.elev__cap{display:flex;justify-content:space-between;gap:14px;margin-top:16px;font-size:0.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim)}
@media (prefers-reduced-motion:no-preference){
  .js .elev .el{stroke-dasharray:1;stroke-dashoffset:1}
  .js .elev .el--dash{stroke-dasharray:4 6;stroke-dashoffset:0}
  .js .elev.is-in .el{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease) .2s}
}

.plan{margin:0;border:1px solid var(--line);padding:clamp(16px,2.6vw,28px);background:rgba(21,27,25,.5)}
.plan svg{display:block;width:100%;height:auto}
.plan .pl{stroke:rgba(200,164,94,.75);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.plan .pl--soft{stroke:rgba(239,234,224,.24);stroke-width:1}
.plan .pl--gold{stroke:var(--gold);opacity:.9}
.plan .pl--dash{stroke-dasharray:4 5}
.plan text{font-family:var(--serif);font-style:italic;font-size:12.5px;fill:var(--fg-dim);letter-spacing:.03em}
.plan text.plan__small{font-size:10.5px}
.plan__cap{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:14px;font-size:0.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim)}
@media (prefers-reduced-motion:no-preference){
  .js .plan .pl{stroke-dasharray:1;stroke-dashoffset:1}
  .js .plan .pl--dash{stroke-dasharray:4 5;stroke-dashoffset:0}
  .js .plan.is-in .pl{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease) .15s}
}
.plan-toggle{display:flex;gap:10px;margin:0 0 18px}
.plan-toggle button{
  min-height:44px;padding:0 20px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--fg-dim);
  font-family:var(--sans);font-weight:500;font-size:0.68rem;letter-spacing:.2em;text-transform:uppercase;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.plan-toggle button[aria-pressed="true"]{border-color:var(--gold);color:var(--fg);background:rgba(200,164,94,.1)}
.plan-level[hidden]{display:none}
.form3d__stages{list-style:none;margin:clamp(26px,4vw,40px) 0 0;padding:0;display:grid;gap:12px}
.form3d__stages li{display:flex;gap:16px;color:var(--fg-dim);font-family:var(--serif);font-style:italic;font-size:1.05rem}
.form3d__stages li b{font-family:var(--sans);font-style:normal;font-weight:500;font-size:0.68rem;letter-spacing:.2em;color:var(--gold);padding-top:.35em}

/* ---------- room chapters (villa) ---------- */
.room{position:relative;padding:clamp(80px,12vw,170px) 0;border-top:1px solid var(--line)}
.room__no{
  position:absolute;top:clamp(20px,4vw,50px);left:0;z-index:0;
  font-family:var(--serif);font-weight:300;font-size:clamp(7rem,20vw,17rem);line-height:1;
  color:var(--gold);opacity:.12;pointer-events:none;user-select:none;will-change:transform;
  font-variant-numeric:tabular-nums;
}
.room__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:center}
.room--flip .room__media{order:2}
.room__media{position:relative}
.room__plate{margin:0;overflow:hidden}
.room__plate img{width:100%;height:auto;will-change:transform}
.room__plate--offset{position:absolute;width:52%;right:-8%;bottom:-12%;border:1px solid var(--line);display:none}
.room--flip .room__plate--offset{right:auto;left:-8%}
@media (min-width:900px){.room__plate--offset{display:block}}
.room--break .room__plate--tall{margin-right:calc((100vw - min(1240px,92vw)) / -2);overflow:hidden}
.room h2{margin:0 0 24px}
.room p{color:var(--fg-dim)}
.room__light{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--fg);
  border-left:1px solid var(--gold);padding-left:22px;margin:30px 0 0;max-width:44ch;
  font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.6;
}
.room__uline{position:relative;display:inline}
.room__uline svg{position:absolute;left:0;bottom:-.28em;width:100%;height:8px;overflow:visible}
.room__uline svg path{stroke:var(--gold);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:no-preference){
  .js .room__uline svg path{stroke-dasharray:1;stroke-dashoffset:1}
  .js .room.is-in .room__uline svg path,.js .is-in .room__uline svg path{stroke-dashoffset:0;transition:stroke-dashoffset 2s var(--ease) 1s}
}
@media (max-width:820px){
  .room__grid{grid-template-columns:1fr}
  .room--flip .room__media{order:0}
  .room--break .room__plate--tall{margin-right:0}
}

/* ---------- materials / planting 1px grids ---------- */
.cells{list-style:none;margin:clamp(26px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cells li{background:var(--bg);padding:clamp(22px,3vw,36px) clamp(18px,2.4vw,30px)}
.cells b{display:block;font-family:var(--serif);font-weight:400;color:var(--fg);font-size:clamp(1.15rem,1.8vw,1.4rem);margin-bottom:8px;line-height:1.3}
.cells i{font-family:var(--serif);color:var(--gold);font-size:0.95rem}
.cells p{margin:6px 0 0;color:var(--fg-dim);font-size:0.92rem;line-height:1.65}
.cells--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.cells{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cells{grid-template-columns:1fr}}
.cells-close{font-family:var(--serif);font-style:italic;color:var(--fg-dim);font-size:1.05rem;margin:26px 0 0}

/* ---------- spec / distances tables ---------- */
.spec{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
.spec caption{text-align:left;font-size:0.68rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);padding-bottom:16px}
.spec th,.spec td{border-top:1px solid var(--line);padding:15px 2px;text-align:left;vertical-align:top;font-weight:400}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:1px solid var(--line)}
.spec th{color:var(--fg-dim);font-size:0.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;width:44%}
.spec td{color:var(--fg);font-size:0.98rem;text-align:right;font-variant-numeric:tabular-nums}
.spec td b{color:var(--gold);font-weight:400}
@media (hover:hover) and (pointer:fine){
  .spec tbody tr{transition:background .3s var(--ease)}
  .spec tbody tr:hover{background:rgba(200,164,94,.05)}
}

.dist{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
.dist th,.dist td{border-top:1px solid var(--line);padding:16px 2px;text-align:left;font-weight:400}
.dist tr:last-child th,.dist tr:last-child td{border-bottom:1px solid var(--line)}
.dist th{color:var(--fg);font-size:1.05rem;font-family:var(--serif)}
.dist td{color:var(--fg-dim);font-size:0.9rem}
.dist td:last-child{text-align:right;color:var(--gold);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .dist tbody tr{transition:background .3s var(--ease)}
  .dist tbody tr:hover{background:rgba(200,164,94,.05)}
}
.dist-foot{font-family:var(--serif);font-style:italic;color:var(--fg-dim);font-size:0.98rem;margin:18px 0 0}
.sr-caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- erow (grounds) ---------- */
.erow{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5.4vw,86px);
  align-items:center;padding:clamp(50px,8vw,110px) 0;border-top:1px solid var(--line);
}
.erow:first-of-type{border-top:0}
.erow__media{overflow:hidden;position:relative}
.erow__media img{width:100%;height:auto}
.erow--flip .erow__media{order:2}
.erow h2,.erow h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3.4vw,2.6rem);margin:0 0 18px;line-height:1.1}
.erow p{color:var(--fg-dim);margin:0 0 16px}
.erow ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.erow ul li{display:flex;gap:14px;color:var(--fg-dim)}
.erow ul li::before{
  content:"";flex:none;width:16px;height:1px;background:var(--gold);margin-top:.8em;
  transform-origin:left center;
}
@media (prefers-reduced-motion:no-preference){
  .js .erow.reveal li::before{transform:scaleX(0)}
  .js .erow.reveal.is-in li::before{transform:scaleX(1);transition:transform 1.4s var(--ease) .6s}
}
@media (max-width:820px){.erow{grid-template-columns:1fr}.erow--flip .erow__media{order:0}}
.erow__inset{margin:clamp(20px,3vw,30px) 0 0;max-width:380px}
.erow__inset .film{aspect-ratio:4/3}
.js .erow__inset{opacity:0;transition:opacity 1.6s var(--ease) .6s}
.js .is-in .erow__inset,.js .erow__inset.is-in{opacity:1}

/* ---------- static shader bands (grounds / location) ----------
   fx.js paints one frame into the canvas; the CSS gradient beneath is the
   no-WebGL fallback and the pre-boot state. Never a blank hole. */
.skyband{position:relative;overflow:hidden}
.skyband__media{
  position:relative;height:clamp(320px,60vh,600px);
  background:
    radial-gradient(110% 80% at 50% 96%,rgba(217,120,74,.5),transparent 62%),
    linear-gradient(180deg,#1c2a2e 0%,#3a3934 55%,#d9784a 100%);
}
.skyband--golden .skyband__media{
  background:
    radial-gradient(110% 80% at 50% 96%,rgba(217,164,94,.55),transparent 64%),
    linear-gradient(180deg,#3c4a4a 0%,#6a5a44 55%,#d9a45e 100%);
}
.skyband__media canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
html.fx-sky .skyband__media canvas{opacity:1;transition:opacity 1s var(--ease)}
.skyband__sil{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:auto;display:block}
.skyband__sil .sil{fill:#050807}
.skyband__sil .sil-line{stroke:var(--gold);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .js .skyband .sil-line{stroke-dasharray:1;stroke-dashoffset:1}
  .js .skyband.is-in .sil-line{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s var(--ease) .3s}
  @supports (animation-timeline:view()){
    .js .skyband__media{animation:bandDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes bandDrift{from{transform:translateY(-4%)}to{transform:translateY(4%)}}
.skyband__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:60px 0 22px;
}
.skyband__cap p{
  width:min(1240px,92vw);margin:0 auto;
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.35rem);color:var(--fg);
}

/* ---------- travel cards (location) ---------- */
.travel{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.travel article{background:var(--bg);padding:clamp(26px,3.6vw,46px)}
.travel svg{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:20px}
@media (prefers-reduced-motion:no-preference){
  .js .travel svg path,.js .travel svg circle{stroke-dasharray:1;stroke-dashoffset:1}
  .js .is-in .travel svg path,.js .is-in .travel svg circle,.js .travel.is-in svg path,.js .travel.is-in svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 2s var(--ease) .4s}
  .js .travel svg path[pathLength],.js .travel svg circle[pathLength]{stroke-dasharray:1}
}
.travel h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2.2vw,1.6rem);margin:0 0 12px}
.travel p{color:var(--fg-dim);margin:0;font-size:0.95rem}
.travel .travel__note{margin-top:16px;font-size:0.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
@media (max-width:820px){.travel{grid-template-columns:1fr}}

/* ---------- the Kihim map ---------- */
.map-frame{position:relative;border:1px solid var(--line);overflow:hidden;background:#0d1518}
.map-frame > svg{display:block;width:100%;height:auto}
.map-sea{fill:var(--ink-teal);opacity:.5}
.map-road{fill:none;stroke:#2b3a37;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.map-road--case{stroke:#1a2422;stroke-width:5}
.map-road--major{stroke:#3d4c46;stroke-width:3.5}
.map-road--majorcase{stroke:#1a2422;stroke-width:6.5}
.map-road--coast{stroke:var(--gold);stroke-width:2;opacity:.6}
.map-lane{fill:none;stroke:#243130;stroke-width:1.5;stroke-linecap:round}
.map-label{font-family:var(--sans);font-size:11px;letter-spacing:.06em;fill:#93a09a}
.map-label--water{fill:#5d7880;font-style:italic;letter-spacing:.2em;font-size:12px}
.map-label--park{fill:#5d7a63;font-style:italic}
.map-poi{fill:#a9a08c}
.map-poi-label{font-family:var(--sans);font-size:10.5px;letter-spacing:.05em;fill:#a7ada3}
.map-pin{fill:var(--gold);stroke:#0b0f0e;stroke-width:1}
.map-pulse{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .js .map-frame.is-in .map-pulse{animation:mapPulse 3.4s var(--ease) infinite 2.4s}
  /* sequenced stroke-draw: coast → roads → lanes → pin */
  .js .map-frame .map-road--coast,.js .map-frame .map-road,.js .map-frame .map-road--case,
  .js .map-frame .map-road--major,.js .map-frame .map-road--majorcase,.js .map-frame .map-lane{
    stroke-dasharray:1;stroke-dashoffset:1;
  }
  .js .map-frame.is-in .map-road--coast{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease) .1s}
  .js .map-frame.is-in .map-road--majorcase,.js .map-frame.is-in .map-road--major{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease) .7s}
  .js .map-frame.is-in .map-road--case,.js .map-frame.is-in .map-road{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease) 1s}
  .js .map-frame.is-in .map-lane{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease) 1.4s}
  .js .map-frame .map-poi,.js .map-frame .map-pin{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
  .js .map-frame.is-in .map-poi{opacity:1;transform:scale(1);transition:opacity .8s var(--ease) 1.7s,transform .8s var(--ease) 1.7s}
  .js .map-frame.is-in .map-pin{opacity:1;transform:scale(1);transition:opacity .8s var(--ease) 2.1s,transform .8s var(--ease) 2.1s}
}
@keyframes mapPulse{0%{transform:scale(.35);opacity:.85}75%{transform:scale(2.1);opacity:0}100%{transform:scale(2.1);opacity:0}}
.map-card{
  position:absolute;left:36%;top:44%;max-width:250px;
  background:rgba(11,15,14,.94);border:1px solid var(--gold-lo);padding:18px 20px;
}
.map-card b{display:block;font-family:var(--serif);font-weight:400;font-size:1.08rem;letter-spacing:.05em;margin-bottom:6px}
.map-card p{margin:0;font-size:0.78rem;color:var(--fg-dim);line-height:1.6}
.map-card .map-card__note{color:var(--gold);margin-top:8px;letter-spacing:.06em}
@media (max-width:640px){.map-card{left:24%;top:38%;max-width:196px;padding:12px 14px}}
.map-ui{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:20px}
.map-note{font-size:0.88rem;color:var(--gold);min-height:22px;margin:12px 0 0;font-family:var(--serif);font-style:italic}
.map-fine{font-size:0.76rem;color:var(--fg-dim);letter-spacing:.04em;margin:0}

/* ---------- visit page ---------- */
.host{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(40px,6vw,80px) 0}
.host__portrait{margin:0;position:relative;padding:clamp(10px,1.4vw,16px);border:1px solid var(--gold-line);max-width:420px}
.host__portrait img{width:100%;height:auto}
.host__body p{color:var(--fg-dim)}
.host__contact{font-family:var(--serif);font-style:italic;color:var(--fg);font-size:1.1rem;margin-top:26px}
.host__contact a{border-bottom:1px solid var(--gold-line);transition:color .4s var(--ease)}
.host__contact a:hover{color:var(--gold)}
@media (max-width:820px){.host{grid-template-columns:1fr}}

.visitgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:start;padding:clamp(40px,6vw,80px) 0}
@media (max-width:860px){.visitgrid{grid-template-columns:1fr}}
.form{display:grid;gap:24px}
.field{display:grid;gap:8px}
.field__label{font-size:0.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim)}
.field__input{
  background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  color:var(--fg);font-family:var(--sans);font-size:1.02rem;padding:12px 2px;min-height:48px;
  transition:border-color .5s var(--ease);width:100%;
}
textarea.field__input{min-height:110px;resize:vertical;line-height:1.6}
.field__input::-webkit-calendar-picker-indicator{filter:invert(.72)}
.field__input:focus{outline:none;border-color:var(--gold)}
.field.is-err .field__input{border-color:var(--ember)}
.field__err{font-size:0.78rem;color:var(--ember);min-height:18px;letter-spacing:.02em}
.field--select{position:relative}
.field--select::after{
  content:"";position:absolute;right:8px;bottom:22px;width:8px;height:8px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(45deg);pointer-events:none;
}
select.field__input{appearance:none;-webkit-appearance:none;cursor:pointer}
select.field__input option{background:var(--surface);color:var(--fg)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}
.form__regarding{
  font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--fg);
  border:1px solid var(--line);padding:16px 20px;margin:0;
}
.form__regarding b{color:var(--gold);font-weight:400}
.form__submit{margin-top:10px;justify-self:start}
.form__note{font-size:0.95rem;font-family:var(--serif);font-style:italic;color:var(--gold);min-height:24px;margin:8px 0 0}

/* what a viewing includes */
.inc{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0}
.inc li{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid var(--line)}
.inc li:last-child{border-bottom:1px solid var(--line)}
.inc__no{
  font-family:var(--serif);font-weight:300;color:var(--gold);font-size:clamp(2.2rem,4vw,4rem);
  line-height:1;font-variant-numeric:tabular-nums;
}
.inc p{margin:0;color:var(--fg-dim);font-size:1rem;max-width:56ch}
.inc p b{display:block;font-weight:400;color:var(--fg);font-family:var(--serif);font-size:1.25rem;margin-bottom:4px}

/* FAQ accordion */
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:start}
.faq__head{position:sticky;top:110px;margin-bottom:0}
.acc__item{border-top:1px solid var(--line)}
.acc__item:last-child{border-bottom:1px solid var(--line)}
.acc__h{margin:0}
.acc__btn{
  width:100%;background:none;border:0;color:var(--fg);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 4px;text-align:left;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.5rem);min-height:48px;
}
.acc__icon{position:relative;flex:none;width:16px;height:16px}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;background:var(--gold);left:50%;top:50%}
.acc__icon::before{width:16px;height:1px;transform:translate(-50%,-50%)}
.acc__icon::after{width:1px;height:16px;transform:translate(-50%,-50%);transition:transform .6s var(--ease)}
.acc__btn[aria-expanded="true"] .acc__icon::after{transform:translate(-50%,-50%) scaleY(0)}
.acc__panel{overflow:hidden;height:0;transition:height .6s var(--ease)}
.acc__inner{padding:0 4px 30px;color:var(--fg-dim);max-width:56ch}
@media (prefers-reduced-motion:reduce){.acc__panel{transition:none}}
@media (max-width:820px){.faq__grid{grid-template-columns:1fr}.faq__head{position:static}}

/* ---------- 404 ---------- */
.lost{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 6vw}
.lost__mono{width:110px;height:110px;margin-bottom:34px}
.lost__mono path{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lost h1{margin:0 0 18px}
.lost p{color:var(--fg-dim);margin:0 0 36px}
.lost__credit{position:fixed;bottom:22px;left:0;right:0;text-align:center;font-size:0.8rem;color:var(--fg-dim)}
.lost__credit a{color:var(--gold);border-bottom:1px solid var(--gold-line)}

/* ---------- reduced-motion catch-all ---------- */
@media (prefers-reduced-motion:reduce){
  .hero__cue-line,.map-pulse{animation:none!important}
  .js .reveal,.js .stagger > *{opacity:1;transform:none;transition:none}
  .js .reveal-curtain img,.js .reveal-curtain video{clip-path:none;transition:none}
  .js .rule path,.js .plan .pl,.js .elev .el,.js .skyband .sil-line{stroke-dasharray:none;stroke-dashoffset:0}
  .js .map-frame .map-road--coast,.js .map-frame .map-road,.js .map-frame .map-road--case,
  .js .map-frame .map-road--major,.js .map-frame .map-road--majorcase,.js .map-frame .map-lane{
    stroke-dasharray:none;stroke-dashoffset:0;
  }
  .js .map-frame .map-poi,.js .map-frame .map-pin{opacity:1;transform:none}
  .js .quote__text{background:none;color:var(--fg);-webkit-text-fill-color:currentColor}
  html.js main,html.js .footer{opacity:1}
  .veil{transition:none}
}