/* ============================================================
   NAYA GARDEN · Rawai, Phuket — shared styles for every page.
   Re-skin layer: change the tokens in :root and the fonts link
   in src/partials/head.html; nothing below hardcodes a brand value.
   ============================================================ */
:root{
  --gold:#E8A93C; --gold-soft:#F3D08A; --terra:#C4653A; --terra2:#A34E28;
  --cream:#F6F0E4; --sand:#EDE3CE; --paper:#FBF7EE; --ink:#1E2E22; --ink-soft:rgba(30,46,34,.72);
  --leaf:#3E5C41; --leaf2:#6E8B5E; --pool:#3D8FA8; --pool-soft:#BFE0E6;
  /* no black anywhere: behind the film sits a warm deep palm green */
  --night:#26402B; --night2:#1B2E20;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --pad:clamp(18px,4.5vw,64px);
  --wrap:1220px;
  --r:22px;
  --glass-bg:rgba(11,20,15,.34);
  --glass-br:1px solid rgba(255,255,255,.24);
  --glass-sh:0 20px 56px rgba(4,10,7,.34), inset 0 1px 0 rgba(255,255,255,.30);
  --blur:blur(22px) saturate(165%);
  --shadow:0 18px 50px rgba(38,64,43,.14);
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s ease both}
::view-transition-new(root){animation:vt-in .45s ease both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:clip;font-size:16.5px;line-height:1.65}
img{max-width:100%;display:block}
svg{display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.06;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit}
.tsh{text-shadow:0 1px 14px rgba(4,10,7,.45)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;
  border-radius:10px;text-decoration:none;font-weight:800}
.skip:focus{top:12px}

/* ---------- glass ---------- */
.glass{background:var(--glass-bg);border:var(--glass-br);box-shadow:var(--glass-sh);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}

.eyebrow{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--terra2);margin-bottom:14px}
.on-dark .eyebrow,.glass .eyebrow,.sec.dark .eyebrow{color:var(--gold)}
.lede{font-size:clamp(17px,1.6vw,19.5px);line-height:1.7;color:var(--ink-soft);max-width:560px}
.hand{font-family:var(--serif);font-style:italic;font-weight:400}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--terra);color:#fff;
  font:800 15px var(--sans);padding:14px 26px;border-radius:999px;text-decoration:none;
  border:1px solid rgba(255,255,255,.16);cursor:pointer;
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.btn:hover{background:var(--terra2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(163,78,40,.25)}
.btn.glassy{background:rgba(255,255,255,.13);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.36)}
.btn.glassy:hover{background:rgba(255,255,255,.24);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(30,46,34,.28)}
.btn.ghost:hover{background:var(--ink);color:#fff;box-shadow:none}
.btn.small{padding:11px 20px;font-size:14px}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.link{font-weight:800;color:var(--terra2);text-decoration:none;border-bottom:1.5px solid rgba(163,78,40,.35);
  transition:border-color .2s ease}
.link:hover{border-color:var(--terra2)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips span{font-size:12px;font-weight:700;padding:8px 13px;border-radius:999px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);white-space:nowrap}
.chips.light span{background:var(--paper);border:1px solid rgba(38,64,43,.16);color:var(--ink)}

/* ---------- nav ---------- */
.nav{position:fixed;top:12px;left:12px;right:12px;z-index:70;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:9px 9px 9px 20px;border-radius:999px;color:#fff;
  transition:transform .4s ease}
.nav.solid{background:rgba(38,64,43,.88)}
.nav.hide{transform:translateY(-130%)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-word{font-family:var(--serif);font-weight:500;font-size:19px;color:#fff;white-space:nowrap}
.logo-word b{font-weight:500;color:var(--gold)}
.nav-links{display:flex;gap:22px;font-size:13.5px;font-weight:700;margin-left:auto;margin-right:8px}
.nav-links a{text-decoration:none;opacity:.8;position:relative;padding:4px 0}
.nav-links a:hover{opacity:1}
.nav-links a.on{opacity:1}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--gold)}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;place-items:center;margin-left:auto}
.menu-btn i,.menu-btn i::before,.menu-btn i::after{display:block;width:18px;height:2px;border-radius:2px;background:#fff;position:relative;transition:transform .3s ease,background .3s}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.menu-open .menu-btn i{background:transparent}
.menu-open .menu-btn i::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1060px){.nav-links{display:none}.menu-btn{display:grid}.nav .btn.small{display:none}}
@media(max-width:1060px) and (min-width:520px){.nav .btn.small{display:inline-flex}.menu-btn{margin-left:0}}

.menu{position:fixed;inset:0;z-index:69;background:var(--night2);color:#fff;
  display:flex;flex-direction:column;justify-content:center;padding:100px var(--pad) 40px;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;overflow:auto}
.menu-open .menu{opacity:1;visibility:visible}
.menu ol{list-style:none;margin:0;padding:0;counter-reset:ch}
.menu li{counter-increment:ch;border-bottom:1px solid rgba(255,255,255,.12)}
.menu ol a{display:flex;align-items:baseline;gap:16px;padding:14px 0;text-decoration:none;
  font-family:var(--serif);font-size:clamp(26px,6vw,40px)}
.menu ol a::before{content:"0" counter(ch);font:800 11px var(--sans);letter-spacing:.2em;color:var(--gold)}
.menu ol a.on{color:var(--gold)}
.menu .btn{margin-top:28px;align-self:flex-start}
.menu-palm{position:absolute;right:-40px;bottom:-30px;width:280px;opacity:.14;pointer-events:none}

/* only enough scrim to keep the nav readable over film */
.topscrim{position:fixed;top:0;left:0;right:0;height:120px;z-index:65;pointer-events:none;
  background:linear-gradient(to bottom,rgba(4,10,7,.42),transparent)}

/* ---------- reveal on scroll ---------- */
[data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
[data-r].in{opacity:1;transform:none}
[data-r="l"]{transform:translateX(-30px)}
[data-r="r"]{transform:translateX(30px)}
[data-r="z"]{transform:scale(.96)}
[data-d="1"]{transition-delay:.12s}[data-d="2"]{transition-delay:.24s}[data-d="3"]{transition-delay:.36s}

/* ---------- inner-page hero ---------- */
.phero{position:relative;padding:150px 0 70px;overflow:hidden;
  background:radial-gradient(1200px 600px at 85% 10%,rgba(232,169,60,.16),transparent 60%),
             radial-gradient(900px 500px at 0% 100%,rgba(110,139,94,.14),transparent 60%),var(--cream)}
.phero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
.phero h1{font-size:clamp(46px,7vw,96px);margin-bottom:22px}
.phero h1 em{font-style:italic;color:var(--terra2);font-weight:400}
.phero .chap{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.phero .chap b{font:800 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--terra2)}
.phero .chap i{flex:0 0 46px;height:1.5px;background:currentColor;opacity:.35}
.phero .art{position:relative}
.phero .acts{margin-top:28px}
@media(max-width:900px){.phero{padding:120px 0 50px}.phero .wrap{grid-template-columns:1fr}}

/* ---------- sections ---------- */
.sec{padding:clamp(70px,11vw,140px) 0;position:relative}
.sec.sand{background:var(--sand)}
.sec.paper{background:var(--paper)}
.sec.dark{background:var(--night);color:#fff}
.sec.dark .lede,.sec.dark p{color:rgba(255,255,255,.84)}
.sec-head{max-width:680px;margin-bottom:clamp(36px,5vw,60px)}
.sec-head.c{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.c .lede{margin:0 auto}
.sec-head h2{font-size:clamp(34px,4.8vw,60px);margin-bottom:16px}
.sec-head h2 em{font-style:italic;color:var(--terra2);font-weight:400}
.sec.dark .sec-head h2 em{color:var(--gold)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.split.rev>:first-child{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}

/* photos */
.photo{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--sand)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo figcaption,.cap{position:absolute;left:12px;bottom:12px;font-size:12px;font-weight:700;padding:7px 13px;
  border-radius:999px;color:#fff;background:rgba(11,20,15,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.polaroid{background:#fff;padding:12px 12px 46px;border-radius:6px;box-shadow:0 20px 50px rgba(38,64,43,.2);
  position:relative;transform:rotate(var(--rot,-2deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.polaroid:hover{transform:rotate(0deg) translateY(-6px)}
.polaroid img{width:100%;aspect-ratio:var(--ar,4/5);object-fit:cover;border-radius:2px}
.polaroid span{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:var(--serif);
  font-style:italic;font-size:17px;color:var(--ink)}
.tape{position:absolute;top:-12px;left:50%;width:90px;height:26px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(232,169,60,.45);border-radius:2px}

/* next chapter */
.next{display:block;position:relative;overflow:hidden;background:var(--night);color:#fff;text-decoration:none;
  padding:clamp(60px,9vw,110px) 0}
.next .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:2}
.next small{display:block;font:800 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.next strong{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(36px,6vw,78px);line-height:1}
.next p{margin:14px 0 0;color:rgba(255,255,255,.75);max-width:520px}
.next .go{flex:0 0 auto;width:clamp(70px,9vw,110px);height:clamp(70px,9vw,110px);border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;transition:background .3s,transform .3s,border-color .3s}
.next:hover .go{background:var(--gold);border-color:var(--gold);transform:rotate(-12deg)}
.next:hover .go path{stroke:var(--night)}
.next .leaves{position:absolute;right:-60px;top:-40px;width:420px;opacity:.12;transition:transform 1.2s ease}
.next:hover .leaves{transform:rotate(8deg) translateY(10px)}

/* ---------- footer ---------- */
footer.site{background:var(--sand);color:var(--ink);padding:60px 0 0;border-top:1px solid rgba(38,64,43,.12)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px}
footer.site h4{font:800 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--terra2);margin-bottom:14px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:0 0 8px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--terra2)}
footer.site .logo-word{color:var(--ink)}
footer.site .logo-word b{color:var(--terra2)}
footer.site .logo svg path{stroke:var(--night)}
footer.site .about{max-width:340px;color:var(--ink-soft);margin-top:14px;font-size:15px}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr 1fr}footer.site .cols>:first-child{grid-column:1/-1}}

/* ============================================================
   HOME — the walk-in film (scroll-scrubbed scenes)
   ============================================================ */
.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:66;display:flex;flex-direction:column;gap:9px}
.rail a{width:40px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-decoration:none;color:#fff;
  background:rgba(11,20,15,.32);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:.5;transition:opacity .3s ease,background .3s ease,color .3s ease}
.rail a:hover{opacity:.85}
.rail a.on{opacity:1;background:rgba(232,169,60,.9);color:#12200f;border-color:transparent}
.rail.gone{opacity:0;pointer-events:none}
@media(max-width:1080px){.rail{display:none}}

.scene{position:relative;height:300vh;background:var(--night);color:#fff}
.scene .vp{position:sticky;top:0;height:100svh;overflow:hidden}
.scene canvas{position:absolute;inset:0;width:100%;height:100%}
.scene .ld{position:absolute;inset:0;z-index:9;display:grid;place-items:center;
  background:var(--night);transition:opacity .6s ease,visibility .6s}
.scene .ld.done{opacity:0;visibility:hidden}
.scene .ld i{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
  border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scene .bar{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:12;background:rgba(255,255,255,.14)}
.scene .bar i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.panel{position:absolute;z-index:10;width:min(470px,86vw);padding:30px 30px 32px;border-radius:26px;
  opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.panel.on{opacity:1;transform:none}
.panel.bl{left:var(--pad);bottom:13vh}
.panel.br{right:var(--pad);bottom:13vh}
.panel h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:13px}
.panel p{font-size:16px;line-height:1.62;margin:0;color:rgba(255,255,255,.94)}
.panel .more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:800;font-size:14px;
  color:var(--gold);text-decoration:none}
.panel .more:hover{gap:12px}
.panel .num{position:absolute;top:22px;right:24px;font:800 11px var(--sans);letter-spacing:.2em;color:rgba(255,255,255,.5)}
.hero{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,calc(-50% + 24px));
  width:min(720px,90vw);padding:46px 40px 42px;border-radius:32px;text-align:center;
  opacity:0;transition:opacity .9s ease,transform .9s ease}
.hero.on{opacity:1;transform:translate(-50%,-50%)}
.hero h1{font-size:clamp(42px,7vw,86px);letter-spacing:-.015em;margin-bottom:16px}
.hero h1 b{font-weight:500;color:var(--gold)}
.hero p{font-size:clamp(15.5px,1.7vw,18px);line-height:1.6;margin:0 auto 28px;max-width:460px;color:rgba(255,255,255,.94)}
.hero .acts{justify-content:center}
.hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:11;
  display:flex;flex-direction:column;align-items:center;gap:9px;transition:opacity .5s ease}
.hint.off{opacity:0}
.hint span{font-size:10px;font-weight:800;letter-spacing:.3em;text-transform:uppercase}
.hint i{width:1px;height:40px;background:rgba(255,255,255,.45);position:relative;overflow:hidden;display:block}
.hint i::after{content:"";position:absolute;left:0;top:-45%;width:100%;height:45%;background:#fff;
  animation:fall 1.8s cubic-bezier(.7,0,.3,1) infinite}
@keyframes fall{to{top:110%}}
@media(max-width:760px){
  .scene{height:250vh}
  .panel{width:auto;left:var(--pad);right:var(--pad);bottom:11vh;padding:26px 24px 28px}
  .panel.br{left:var(--pad);right:var(--pad)}
  .hero{padding:36px 24px 34px;width:min(560px,92vw)}
}

/* chapters index on the home page */
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.chap-card{position:relative;display:flex;flex-direction:column;min-height:300px;padding:26px 26px 24px;border-radius:26px;
  background:var(--paper);border:1px solid rgba(38,64,43,.12);text-decoration:none;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,background .45s ease}
.chap-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);background:#fff}
.chap-card .n{font:800 11px var(--sans);letter-spacing:.22em;color:var(--terra2)}
.chap-card h3{font-size:30px;margin:auto 0 8px}
.chap-card p{margin:0;color:var(--ink-soft);font-size:15px}
.chap-card .ill{position:absolute;right:-6px;top:-6px;width:150px;height:150px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.chap-card:hover .ill{transform:rotate(-6deg) scale(1.06)}
.chap-card.big{grid-column:span 2;background:var(--night);color:#fff;border:0}
.chap-card.big p{color:rgba(255,255,255,.8)}
.chap-card.big .n{color:var(--gold)}
.chap-card.big:hover{background:var(--night2)}
.chap-card.here{background:transparent;border-style:dashed}
@media(max-width:960px){.chapters{grid-template-columns:1fr 1fr}.chap-card.big{grid-column:1/-1}}
@media(max-width:600px){.chapters{grid-template-columns:1fr}.chap-card{min-height:230px}}

.band{position:relative;min-height:80svh;display:grid;place-items:center;overflow:hidden;padding:14vh var(--pad);color:#fff}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .card{position:relative;z-index:2;width:min(640px,92vw);padding:44px 38px 40px;border-radius:30px;text-align:center}
.band h2{font-size:clamp(34px,4.8vw,58px);margin-bottom:16px}
.band p{font-size:17px;line-height:1.68;margin:0 auto 28px;max-width:460px;color:rgba(255,255,255,.94)}
.band .acts{justify-content:center}

/* ============================================================
   COTTAGES — the garden plan and the four doors
   ============================================================ */
.plan-wrap{position:relative;border-radius:30px;background:var(--paper);border:1px solid rgba(38,64,43,.12);
  padding:clamp(14px,2.4vw,30px);box-shadow:var(--shadow)}
.plan svg{width:100%;height:auto}
.plan .hut{cursor:pointer}
.plan .hut .roof{transition:fill .3s ease,transform .3s ease;transform-box:fill-box;transform-origin:center}
.plan .hut:hover .roof,.plan .hut.on .roof{fill:var(--gold)}
.plan .hut.on .roof{transform:scale(1.04)}
.plan .hut text{pointer-events:none}
.plan .walker{offset-rotate:0deg}
.plan-key{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.plan-key button{font:700 13px var(--sans);padding:9px 15px;border-radius:999px;cursor:pointer;
  background:#fff;border:1px solid rgba(38,64,43,.18);color:var(--ink);transition:background .25s,color .25s}
.plan-key button.on,.plan-key button:hover{background:var(--night);color:#fff;border-color:var(--night)}
.plan-note{font-size:13px;color:var(--ink-soft);margin-top:10px}

.door{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;
  padding:clamp(40px,6vw,70px) 0;border-top:1px solid rgba(38,64,43,.12);scroll-margin-top:90px}
.door:nth-of-type(even) .door-pics{order:2}
.door-pics{position:relative;min-height:440px}
.door-pics .photo{position:absolute;inset:0 18% 12% 0}
.door-pics .polaroid{position:absolute;right:0;bottom:0;width:44%;--ar:1/1}
.door h3{font-size:clamp(34px,4.4vw,54px);margin:6px 0 4px}
.door .sub{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--terra2);margin-bottom:16px}
.door .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.door .facts div{background:var(--paper);border:1px solid rgba(38,64,43,.12);border-radius:16px;padding:12px 14px}
.door .facts b{display:block;font-family:var(--serif);font-size:26px;font-weight:500;line-height:1.1}
.door .facts span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.door ul.ticks{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;font-size:15px}
.door ul.ticks li{display:flex;gap:9px;align-items:flex-start}
.door ul.ticks li::before{content:"";flex:0 0 14px;height:14px;margin-top:5px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--gold) 0 3px,transparent 4px),rgba(232,169,60,.22)}
.fp{margin:6px 0 22px;max-width:320px}
.fp svg{width:100%;height:auto}
.fp small{display:block;font-size:12px;color:var(--ink-soft);margin-top:6px}
@media(max-width:860px){
  .door{grid-template-columns:1fr}.door:nth-of-type(even) .door-pics{order:0}
  .door-pics{min-height:340px}
  .door ul.ticks{grid-template-columns:1fr}
}

.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;background:#fff;border-radius:20px;overflow:hidden;
  border:1px solid rgba(38,64,43,.12)}
.compare th,.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(38,64,43,.08)}
.compare thead th{background:var(--night);color:#fff;font-family:var(--serif);font-weight:500;font-size:18px}
.compare tbody th{font-weight:700;color:var(--ink-soft);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}
.compare-scroll{overflow-x:auto;border-radius:20px}

/* ============================================================
   GARDEN — aerial map, field guide, gallery
   ============================================================ */
.aerial{position:relative;max-width:520px;margin:0 auto}
.aerial .photo{aspect-ratio:326/585}
.aerial svg.marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.aerial .pin{font:800 12px var(--sans)}
.aerial .ln{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.4s ease}
.aerial.in .ln{stroke-dashoffset:0}
.aerial .lab{opacity:0;transition:opacity .6s ease 1s}
.aerial.in .lab{opacity:1}

.guide{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.plant{background:var(--paper);border:1px solid rgba(38,64,43,.12);border-radius:22px;padding:20px 18px 22px;text-align:center;
  transition:transform .4s ease,box-shadow .4s ease}
.plant:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow)}
.plant svg{width:100%;max-width:150px;height:150px;margin:0 auto 12px}
.plant h3{font-size:22px;margin-bottom:2px}
.plant em{display:block;font-size:12.5px;color:var(--terra2);margin-bottom:10px}
.plant p{font-size:14px;color:var(--ink-soft);margin:0}
.plant .sway{transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(3deg)}}
@media(max-width:1060px){.guide{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.guide{grid-template-columns:1fr 1fr;gap:10px}.plant svg{height:110px}.plant{padding:16px 12px}}

.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px var(--pad) 26px;
  scrollbar-width:thin;scroll-padding-left:var(--pad)}
.strip figure{flex:0 0 min(340px,78vw);margin:0;scroll-snap-align:start}
.strip .photo{aspect-ratio:4/5}

.gal{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:190px;gap:12px;
  grid-auto-flow:dense;max-width:1320px;margin:0 auto}
.gal a{position:relative;overflow:hidden;border-radius:18px;grid-column:span 2;
  border:1px solid rgba(38,64,43,.14);background:var(--sand);cursor:pointer;display:block;
  box-shadow:0 10px 30px rgba(38,64,43,.10);
  opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s ease,transform .7s ease}
.gal a.in{opacity:1;transform:none}
.gal a:nth-child(1){grid-column:span 4;grid-row:span 2}
.gal a:nth-child(2){grid-row:span 2}
.gal a:nth-child(6){grid-column:span 4}
.gal a:nth-child(8){grid-column:span 4;grid-row:span 2}
.gal a:nth-child(9){grid-row:span 2}
.gal a:nth-child(12){grid-column:span 4}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.gal a:hover img{transform:scale(1.07)}
.gal figcaption{position:absolute;left:12px;bottom:12px;z-index:2;font-size:12px;font-weight:700;color:#fff;
  padding:8px 14px;border-radius:999px;background:rgba(11,20,15,.42);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease}
.gal a:hover figcaption,.gal a:focus-visible figcaption{opacity:1;transform:none}
@media(hover:none){.gal figcaption{opacity:1;transform:none}}
@media(max-width:1000px){
  .gal{grid-template-columns:repeat(4,1fr);grid-auto-rows:165px}
  .gal a:nth-child(1),.gal a:nth-child(8){grid-column:span 4}
  .gal a:nth-child(6),.gal a:nth-child(12){grid-column:span 2}
}
@media(max-width:620px){
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;gap:9px}
  .gal a,.gal a:nth-child(n){grid-column:span 1;grid-row:span 1}
  .gal a:nth-child(1),.gal a:nth-child(8){grid-column:span 2;grid-row:span 2}
}
.lb{position:fixed;inset:0;z-index:200;display:none;place-items:center;color:#fff;
  background:rgba(5,11,8,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.lb.open{display:grid}
.lb img{max-width:92vw;max-height:82svh;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.55);opacity:0;transition:opacity .35s ease}
.lb img.shown{opacity:1}
.lb button{position:absolute;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:20px;line-height:1;cursor:pointer;background:rgba(11,20,15,.5);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .25s ease}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb .x{top:22px;right:22px}
.lb .pv{left:22px;top:50%;transform:translateY(-50%)}
.lb .nx{right:22px;top:50%;transform:translateY(-50%)}
.lb .cap{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;
  padding:10px 18px;border-radius:999px;font-size:13px;font-weight:700;background:rgba(11,20,15,.5);
  border:1px solid rgba(255,255,255,.22);white-space:nowrap;max-width:88vw}
.lb .cap b{color:var(--gold);font-weight:800}
@media(max-width:620px){.lb .pv{left:10px}.lb .nx{right:10px}.lb button{width:42px;height:42px}}

/* ============================================================
   A DAY AT NAYA — the sky that turns from dawn to night (signature)
   ============================================================ */
.day{position:relative;height:720vh}
.day .stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#F4C99B}
.day .sky{position:absolute;inset:0;width:100%;height:100%}
.day .clock{position:absolute;left:var(--pad);top:96px;z-index:5;color:#fff;font-family:var(--serif);
  font-size:clamp(46px,8vw,104px);line-height:1;text-shadow:0 2px 30px rgba(20,30,20,.25);font-variant-numeric:tabular-nums}
.day .clock small{display:block;font:800 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;margin-top:10px;opacity:.85}
.day .stops{position:absolute;right:var(--pad);bottom:12vh;z-index:6;width:min(430px,86vw)}
.day .stop{position:absolute;right:0;bottom:0;width:100%;padding:26px 28px 28px;border-radius:24px;color:#fff;
  opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.day .stop.on{opacity:1;transform:none;pointer-events:auto}
.day .stop h3{font-size:clamp(26px,3.2vw,38px);margin-bottom:10px}
.day .stop p{margin:0;color:rgba(255,255,255,.92);font-size:15.5px}
.day .stop .t{font:800 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
.day .ticks{position:absolute;left:var(--pad);top:calc(96px + clamp(46px,8vw,104px) + 46px);z-index:6;display:flex;flex-direction:column;gap:10px}
.day .ticks span{display:flex;align-items:center;gap:10px;font:800 11px var(--sans);letter-spacing:.14em;color:#fff;opacity:.45;transition:opacity .3s}
.day .ticks span::before{content:"";width:22px;height:2px;border-radius:2px;background:#fff;transition:width .3s}
.day .ticks span.on{opacity:1}
.day .ticks span.on::before{width:40px;background:var(--gold)}
@media(max-width:760px){
  .day{height:640vh}
  .day .ticks{display:none}
  .day .clock{top:86px}
  .day .stops{left:var(--pad);right:var(--pad);width:auto;bottom:6vh}
}
.lights circle{transition:opacity .5s ease}
.stars circle{animation:tw 3s ease-in-out infinite}
.stars circle:nth-child(3n){animation-delay:-1s}.stars circle:nth-child(3n+1){animation-delay:-2s}
@keyframes tw{50%{opacity:.35}}

.long{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.long div{background:var(--paper);border:1px solid rgba(38,64,43,.12);border-radius:20px;padding:22px}
.long svg{width:44px;height:44px;margin-bottom:14px}
.long h3{font-size:22px;margin-bottom:6px}
.long p{font-size:14.5px;color:var(--ink-soft);margin:0}
@media(max-width:900px){.long{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.long{grid-template-columns:1fr}}

/* ============================================================
   GETTING HERE — the hand-drawn map
   ============================================================ */
.map-wrap{position:relative;border-radius:30px;background:#DCEFF1;overflow:hidden;box-shadow:var(--shadow);
  border:1px solid rgba(38,64,43,.12)}
.map-wrap svg{width:100%;height:auto}
.map .route{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.map .place{cursor:pointer}
.map .place circle.dot{transition:r .25s ease}
.map .place:hover circle.dot,.map .place.on circle.dot{r:9}
.map .place text{font:700 15px var(--sans);fill:var(--ink)}
.map .place.on text{fill:var(--terra2)}
.map .pulse{animation:pulse 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{from{transform:scale(.6);opacity:.9}to{transform:scale(2.6);opacity:0}}
.dist{list-style:none;margin:0;padding:0}
.dist li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 4px;
  border-bottom:1px dashed rgba(38,64,43,.22);cursor:pointer;transition:background .2s,padding .2s;border-radius:8px}
.dist li:hover,.dist li.on{background:rgba(232,169,60,.16);padding-left:12px;padding-right:12px}
.dist b{font-family:var(--serif);font-weight:500;font-size:20px}
.dist span{font-size:13px;color:var(--ink-soft);display:block}
.dist em{font-style:normal;font-weight:800;color:var(--terra2);white-space:nowrap}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:st}
.step{background:var(--paper);border:1px solid rgba(38,64,43,.12);border-radius:24px;padding:26px;position:relative;counter-increment:st}
.step::before{content:counter(st);position:absolute;top:20px;right:22px;font-family:var(--serif);font-size:44px;color:rgba(163,78,40,.22)}
.step svg{width:64px;height:64px;margin-bottom:16px}
.step h3{font-size:24px;margin-bottom:8px}
.step p{margin:0;color:var(--ink-soft);font-size:15px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* ============================================================
   GOOD TO KNOW — amenities, rules, FAQ
   ============================================================ */
.amen{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.amen div{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--paper);
  border:1px solid rgba(38,64,43,.12);font-weight:700;font-size:15px}
.amen svg{flex:0 0 34px;width:34px;height:34px}
@media(max-width:960px){.amen{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.amen{grid-template-columns:1fr}}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rule{border-radius:24px;padding:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.rule svg{width:52px;height:52px;margin-bottom:14px}
.rule h3{font-size:24px;margin-bottom:8px;color:#fff}
.rule p{margin:0;font-size:15px}
@media(max-width:860px){.rules{grid-template-columns:1fr}}
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid rgba(38,64,43,.16)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-family:var(--serif);font-size:clamp(20px,2.2vw,25px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-9px;
  border-right:2px solid var(--terra2);border-bottom:2px solid var(--terra2);transform:rotate(45deg);transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq details p{margin:0 0 22px;color:var(--ink-soft);max-width:700px}
.times{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
.times div{border-radius:18px;padding:18px;background:#fff;border:1px solid rgba(38,64,43,.12)}
.times b{display:block;font-family:var(--serif);font-weight:500;font-size:32px;line-height:1}
.times span{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:760px){.times{grid-template-columns:1fr 1fr}}

/* ============================================================
   BOOK
   ============================================================ */
.book-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:960px){.book-grid{grid-template-columns:1fr}}
.postcard{position:relative;border-radius:30px;padding:clamp(26px,3.5vw,44px);color:#fff;background:var(--night);overflow:hidden;
  box-shadow:0 30px 70px rgba(27,46,32,.3)}
.postcard .stamp{position:absolute;top:22px;right:22px;width:86px;height:100px;border-radius:6px;
  background:var(--cream);padding:6px;transform:rotate(4deg);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.postcard .stamp img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.postcard .stamp::before{content:"";position:absolute;inset:-4px;border:4px dotted var(--cream);border-radius:8px}
.postcard .eyebrow{max-width:calc(100% - 110px)}
.postcard h2{font-size:clamp(32px,4vw,50px);margin-bottom:12px;max-width:80%}
.postcard p.intro{color:rgba(255,255,255,.85);max-width:440px}
.bform{margin:22px 0 6px;text-align:left}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bgrid .wide{grid-column:1/-1}
.bform label{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.72;margin-bottom:6px}
.bform input,.bform select,.bform textarea{width:100%;font:600 15px var(--sans);color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);border-radius:12px;padding:12px 13px}
.bform textarea{resize:vertical;min-height:90px}
.bform input::placeholder,.bform textarea::placeholder{color:rgba(255,255,255,.5)}
.bform input:focus,.bform select:focus,.bform textarea:focus{outline:2px solid rgba(232,169,60,.7);outline-offset:1px}
.bform input[type=date]{color-scheme:dark}
.bform select option{color:#12200f;background:#F6F0E4}
.bform .send{width:100%;margin-top:16px;justify-content:center}
.bnote{font-size:12.5px;opacity:.7;margin:12px 0 0;line-height:1.5}
.bmsg{margin-top:14px;padding:13px 15px;border-radius:12px;font-weight:700;font-size:14.5px;line-height:1.5;display:none}
.bmsg.on{display:block}
.bmsg.ok{background:rgba(70,150,90,.26);border:1px solid rgba(130,220,160,.45)}
.bmsg.err{background:rgba(190,60,50,.24);border:1px solid rgba(255,120,110,.45)}
.bmsg.demo{background:rgba(232,169,60,.18);border:1px solid rgba(232,169,60,.5)}
.balt{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.nights{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;font-weight:700;color:var(--gold-soft);min-height:20px}
@media(max-width:620px){.bgrid{grid-template-columns:1fr}}
.how{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.how div{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:18px;background:var(--paper);border:1px solid rgba(38,64,43,.12)}
.how svg{flex:0 0 46px;width:46px;height:46px}
.how h3{font-size:21px;margin-bottom:4px}
.how p{margin:0;font-size:14.5px;color:var(--ink-soft)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  @view-transition{navigation:none}
  .hint i::after,.plant .sway,.stars circle,.map .pulse{animation:none}
  [data-r]{opacity:1;transform:none;transition:none}
  .panel,.hero,.day .stop{transition:none}
  .aerial .ln{stroke-dashoffset:0;transition:none}.aerial .lab{opacity:1;transition:none}
}