/* ═════════ Green Heart Garden — palette taken from the photos ═════════ */
:root{
  --paper:#F2EBDD;      /* warm cream */
  --paper-2:#E8DDC9;
  --jungle:#1E3326;     /* the trees */
  --jungle-2:#2C4A37;
  --terra:#B9603A;      /* bean bags */
  --terra-ink:#9A4A2A;  /* terracotta for small text (AA contrast) */
  --gold:#E3A945;       /* the glowing table */
  --gold-soft:#F7D58A;
  --straw:#A9895A;      /* the sala roof */
  --sage:#A3B394;
  --ink:#1C1813;
  --ink-60:rgba(28,24,19,.62);
  --line:rgba(30,51,38,.16);
  --open:#6CC08B;
  --closed:#E8746A;
  --serif:'Instrument Serif','Noto Serif Thai',Georgia,serif;
  --sans:'Manrope','Noto Sans Thai',system-ui,sans-serif;
  --pad:20px;
  --bar:58px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--jungle)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
i,em{font-style:italic}
::selection{background:var(--terra);color:var(--paper)}
html:lang(th) body{font-family:'Noto Sans Thai',var(--sans)}

.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-ink);font-weight:700}
.eyebrow.light{color:var(--gold)}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(46px,13vw,120px);line-height:.92;letter-spacing:-.025em;color:var(--jungle);margin-top:14px}
.h2 i{color:var(--terra)}
.h2.light{color:var(--paper)}
.h2.light i{color:var(--gold)}
html:lang(th) .h2{font-size:clamp(34px,9.5vw,90px);line-height:1.25}
html:lang(th) .eyebrow{letter-spacing:.03em;text-transform:none;font-size:13px}

/* ───── header ───── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 12px) var(--pad) 12px;color:var(--jungle);transition:color .5s var(--ease),transform .6s var(--ease)}
.hdr::before{content:'';position:absolute;inset:0 0 -24px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s,background .45s;
  background:linear-gradient(180deg,rgba(242,235,221,.95),rgba(242,235,221,.7) 55%,rgba(242,235,221,0));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.hdr.is-scrolled::before{opacity:1}
.hdr.is-light{color:var(--paper)}
.hdr.is-light::before{background:linear-gradient(180deg,rgba(20,34,25,.5),rgba(20,34,25,0))}
.hdr.is-hidden{transform:translateY(-110%)}
.logo{display:flex;align-items:center;gap:9px}
.logo__mark{width:30px;height:25px;color:currentColor}
.logo__word{font-family:var(--serif);font-size:20px;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.logo__word i{opacity:.75}
.hdr__right{display:flex;align-items:center;gap:10px}
.hdr__status{display:flex;align-items:center;font-size:11px;font-weight:400;letter-spacing:-.015em;opacity:.9;white-space:nowrap}
.hdr__status b{display:none!important}
.hdr__status b{width:7px;height:7px;border-radius:50%;background:var(--closed);position:relative}
.hdr__status b::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor;color:var(--closed);animation:ping 2.4s var(--ease) infinite}
.hdr__status.open b{background:var(--open)}
.hdr__status.open b::after{color:var(--open)}
@keyframes ping{from{transform:scale(.5);opacity:1}to{transform:scale(1.8);opacity:0}}
.lang{display:flex;border:1px solid currentColor;border-radius:99px;padding:2px;font-size:10px;letter-spacing:.04em;font-weight:700}
.lang a{position:relative;padding:4px 7px;border-radius:99px;transition:background .3s,color .3s}
.lang a::after{content:'';position:absolute;inset:-9px -3px}
.lang a.is-on{background:var(--jungle);color:var(--paper)}
.hdr.is-light .lang a.is-on{background:var(--paper);color:var(--jungle)}
@media (max-width:360px){.logo__word{font-size:16px}.logo__mark{width:22px}.hdr__status{font-size:11px}.hdr__right{gap:7px}.logo{gap:6px}.lang button{padding:5px 7px}}
.hdr{gap:10px}

/* ═════════ 01 HERO — slideshow ═════════ */
.hero{position:relative;height:calc(100svh - var(--bar));min-height:560px;overflow:hidden;background:var(--jungle);color:var(--paper);touch-action:pan-y}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s ease}
.slide.is-on{opacity:1;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 9s linear}
.slide.is-on img{transform:scale(1)}
.slide:nth-child(1) img{object-position:70% 50%}
.slide:nth-child(2) img{object-position:40% 50%}
.slide:nth-child(5) img{object-position:62% 50%}
.hero__shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,34,25,.45) 0%,rgba(20,34,25,0) 22%,rgba(20,34,25,0) 42%,rgba(20,34,25,.72) 78%,rgba(20,34,25,.85) 100%)}
.hero__copy{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:22px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero__place{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--gold-soft);opacity:0;transform:translateY(10px);transition:all 1s var(--ease) .3s}
.hero__h{font-family:var(--serif);font-weight:400;font-size:clamp(44px,12.4vw,110px);line-height:.98;letter-spacing:-.015em;margin-top:12px;opacity:0;transform:translateY(16px);transition:all 1.2s var(--ease) .45s}
html:lang(th) .hero__h{font-size:clamp(26px,8vw,84px);line-height:1.3}
html:lang(th) .hero__h span{white-space:nowrap}
.hero__sub{margin-top:12px;font-size:14px;font-weight:500;color:rgba(242,235,221,.88);opacity:0;transition:opacity 1s var(--ease) .7s}
.stars{position:relative;display:inline-block;color:rgba(247,213,138,.32);letter-spacing:.06em;font-size:12px;line-height:1}
.stars::before{content:'★★★★★';position:absolute;left:0;top:0;width:calc(var(--r,5) / 5 * 100%);overflow:hidden;white-space:nowrap;color:var(--gold-soft)}
.hero__btn{margin-top:22px;padding:16px 30px;border:1px solid rgba(242,235,221,.85);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  opacity:0;transition:opacity 1s var(--ease) .85s,background .35s,color .35s}
.hero__btn:active,.hero__btn:hover{background:var(--paper);color:var(--jungle)}
html:lang(th) .hero__btn{letter-spacing:.04em;font-size:14px}
.dots{display:flex;gap:12px;margin-top:26px;opacity:0;transition:opacity 1s var(--ease) 1s}
.dots button{width:14px;height:14px;border-radius:50%;border:1.4px solid rgba(242,235,221,.9);position:relative}
.dots button::after{content:'';position:absolute;inset:-14px -6px}
.dots button[aria-pressed="true"]{background:var(--paper)}
.is-loaded .hero__place,.is-loaded .hero__h{opacity:1;transform:none}
.is-loaded .hero__sub,.is-loaded .hero__btn,.is-loaded .dots{opacity:1}

/* ═════════ marquee band ═════════ */
.band{position:relative;z-index:2;overflow:hidden;padding:18px 0;background:var(--jungle);color:var(--paper);border-top:1px solid rgba(227,169,69,.35);border-bottom:1px solid rgba(227,169,69,.35)}
.band__track{display:flex;width:max-content;animation:marq 38s linear infinite;align-items:center}
.band__track span{display:inline-flex;align-items:center;gap:20px;padding-right:20px;white-space:nowrap;font-family:var(--serif);font-size:28px;line-height:1}
.band__track span em{font-style:italic;color:var(--paper)}
.band__track span b{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--sage)}
.band__track .star{color:var(--gold);font-size:13px;font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* ═════════ 02 STORY ═════════ */
.story{padding:22vw var(--pad) 20vw;position:relative}
.story__text{font-family:var(--serif);font-size:clamp(34px,9.6vw,78px);line-height:1.08;letter-spacing:-.015em;margin-top:22px;color:var(--jungle)}
html:lang(th) .story__text{font-size:clamp(26px,7vw,56px);line-height:1.45}
.story__text .wd{opacity:.14;transition:opacity .25s linear}
.story__text .wd.on{opacity:1}
.pill{display:inline-block;width:1.7em;height:.9em;border-radius:99px;overflow:hidden;vertical-align:-.08em;margin:0 .06em;transform:scale(.6);opacity:0;transition:transform .8s var(--ease),opacity .6s}
.pill.on{transform:none;opacity:1}
.pill img{width:100%;height:100%;object-fit:cover}
.story__sign{margin-top:28px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--terra)}

/* ═════════ 03 ON THE TABLE — collage + winding lines ═════════ */
.table{position:relative;padding:14vw var(--pad) 24vw;background:var(--paper-2);overflow:hidden}
.curves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cv{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cv--gold{stroke:var(--gold);stroke-width:2.2}
.cv--glow{stroke:var(--gold-soft);stroke-width:12;opacity:.35;filter:blur(6px)}
.cv--line{stroke:var(--jungle);stroke-width:1.2;opacity:.35}
.cv--line2{stroke:var(--terra);stroke-width:1.2;opacity:.45}
.table__head{position:relative;margin-bottom:12vw}
.collage{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:12px;align-items:center}
.ph{position:relative;margin:0;will-change:transform;transform:translate3d(0,var(--py,0px),0)}
.ph__in{width:100%;height:100%;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease)}
.ph__in img{width:100%;height:100%;object-fit:cover;transform:scale(1.25);transition:transform 2.2s var(--ease)}
.ph.in .ph__in{clip-path:inset(0 0 0 0)}
.ph.in .ph__in img{transform:scale(1)}
.ph--arch{grid-column:1/8;grid-row:1;aspect-ratio:3/4.1}
.ph--arch .ph__in{border-radius:999px 999px 14px 14px}
.ph--circle{grid-column:7/13;grid-row:2;aspect-ratio:1;margin:12vw -3vw 0 2vw}
.ph--circle .ring{inset:-11%;width:122%;height:122%}
.ph--circle .ph__in{border-radius:50%;border:5px solid var(--paper-2)}
.ring{position:absolute;inset:-14%;width:128%;height:128%;animation:spin 30s linear infinite;pointer-events:none}
.ring text{font-family:var(--sans);font-size:9.6px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;fill:var(--terra-ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.ph--tape{grid-column:2/12;grid-row:3;margin-top:20vw;aspect-ratio:5/4;transform:translate3d(0,var(--py,0px),0) rotate(-3deg)}
.ph--tape .ph__in{border-radius:6px;box-shadow:0 30px 50px -28px rgba(30,51,38,.6)}
.tape{position:absolute;z-index:2;left:50%;top:-12px;width:90px;height:24px;transform:translateX(-50%) rotate(4deg);background:rgba(169,137,90,.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.cap{position:relative}
.cap b{display:block;font-size:11px;letter-spacing:.16em;color:var(--terra-ink);font-weight:700}
.cap h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1;color:var(--jungle);margin-top:6px}
.cap p{font-size:13px;line-height:1.45;color:var(--ink-60);margin-top:6px}
.cap--1{grid-column:8/13;grid-row:1;align-self:end;padding-bottom:4px}
.cap--2{grid-column:1/7;grid-row:2;margin-top:12vw;padding-right:10px}
.cap--3{grid-column:4/13;grid-row:4;margin-top:26px;text-align:right}
.cap--3 h3{font-size:24px}
.cap{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .3s,transform 1.2s var(--ease) .3s}
.cap.in{opacity:1;transform:none}

/* ═════════ 04 OUR STORY ═════════ */
.about{position:relative;background:var(--jungle);color:var(--paper);padding:20vw var(--pad) 22vw;overflow:hidden}
.about__head{margin-bottom:12vw}
.about__art{position:relative;display:flow-root;min-height:118vw}
.ab{position:absolute;margin:0;will-change:transform;transform:translate3d(0,var(--py,0px),0)}
.ab .ph__in{width:100%;height:100%;overflow:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 1.6s var(--ease)}
.ab .ph__in img{width:100%;height:100%;object-fit:cover;transform:scale(1.2);transition:transform 2.4s var(--ease)}
.ab.in .ph__in{clip-path:inset(0)}
.ab.in .ph__in img{transform:scale(1)}
.ab--wide{left:0;top:0;width:84%;aspect-ratio:4/3}
.ab--wide .ph__in{border-radius:18px}
.ab--tall{right:0;top:50vw;width:50%;aspect-ratio:3/4}
.ab--tall .ph__in{border-radius:999px 999px 18px 18px;border:5px solid var(--jungle)}
.stamp{position:absolute;left:6%;top:66vw;width:34%;aspect-ratio:1;border-radius:50%;background:var(--paper);color:var(--jungle);display:grid;place-items:center;transform:rotate(-8deg);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.stamp svg:first-child{position:absolute;inset:0;width:100%;height:100%;animation:spin 34s linear infinite}
.stamp text{font-family:var(--sans);font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;fill:var(--terra)}
.stamp__mark{width:38%;color:var(--jungle)}
.quote{position:relative;margin-top:calc(118vw + 8vw);font-family:var(--serif);font-style:italic;font-size:clamp(24px,6.6vw,44px);line-height:1.12;color:var(--gold);max-width:92%}
html:lang(th) .quote{font-size:clamp(20px,5.4vw,36px);line-height:1.45}
.chapters{list-style:none;margin-top:14vw;border-top:1px solid rgba(242,235,221,.16)}
.chap{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:20px 0;border-bottom:1px solid rgba(242,235,221,.16)}
.chap__n{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1;color:var(--gold)}
.chap h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1}
.chap p{font-size:14px;line-height:1.55;color:rgba(242,235,221,.72);margin-top:8px}
.about{padding-bottom:0!important}
.canopy{display:block;width:calc(100% + var(--pad) * 2);margin:16vw calc(var(--pad) * -1) -1px;height:clamp(110px,31vw,260px)}
.canopy__land{fill:var(--paper);color:var(--paper)}
.canopy__land .palm-trunk{fill:none;stroke:var(--paper);stroke-width:3;stroke-linecap:round}
.canopy__glow{fill:none;stroke:var(--gold-soft);stroke-width:7;opacity:.55}
.canopy__line{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round}
.visit{padding-top:12vw!important}

/* ═════════ 05 VISIT ═════════ */
.visit{padding:24vw var(--pad) 26vw}
.book{display:flex;align-items:center;gap:14px;margin-top:10vw;padding:14px 16px 14px 14px;border-radius:24px;background:var(--jungle);color:var(--paper);
  box-shadow:0 24px 50px -24px rgba(30,51,38,.7);transition:transform .4s var(--ease)}
.book:active{transform:scale(.98)}
.book__ico{width:54px;height:54px;border-radius:18px;background:var(--terra);color:var(--paper);display:grid;place-items:center;flex:none}
.book__ico svg{width:26px;height:26px}
.book__txt{flex:1;display:flex;flex-direction:column}
.book__txt b{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1}
.book__txt small{font-size:12px;opacity:.7;margin-top:4px}
.book__arr{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(242,235,221,.12);font-size:18px;color:var(--gold)}
.info{margin-top:8vw;border-top:1px solid var(--line)}
.info div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.info dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);padding-top:3px;font-weight:700}
html:lang(th) .info dt{letter-spacing:0;text-transform:none;font-size:13px}
.info dd{font-size:15px;display:flex;flex-direction:column;gap:6px}
.lnk{position:relative;color:var(--jungle);font-weight:700;border-bottom:1px solid var(--terra);align-self:flex-start}
.lnk::after{content:'';position:absolute;inset:-12px -4px}

/* ═════════ SEA footer ═════════ */
.sea{position:relative;background:var(--jungle);color:var(--paper);padding:26vw var(--pad) calc(env(safe-area-inset-bottom) + var(--bar) + 50px);overflow:hidden}
.sea__waves{position:absolute;left:0;right:0;top:-1px;height:60px}
.sea__waves i{position:absolute;left:0;top:0;width:200%;height:60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60' viewBox='0 0 400 60'%3E%3Cpath d='M0 0 H400 V26 C350 46 300 46 250 30 S150 8 100 26 S30 44 0 30Z' fill='%23F2EBDD'/%3E%3C/svg%3E") repeat-x;background-size:400px 60px;animation:wave 9s linear infinite}
.sea__waves i:nth-child(2){opacity:.45;top:8px;animation-duration:13s;animation-direction:reverse}
.sea__waves i:nth-child(3){opacity:.2;top:16px;animation-duration:17s}
@keyframes wave{to{transform:translateX(-400px)}}
.sea__line{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--sage)}
.sea__word{font-family:var(--serif);font-size:25vw;line-height:.82;letter-spacing:-.04em;margin-top:6vw}
.sea__word i{color:var(--gold);padding-left:14vw}
.sea__th{font-family:'Noto Serif Thai',serif;font-weight:300;font-size:17px;color:var(--sage);margin-top:5vw}
.sea__foot{display:flex;justify-content:space-between;gap:12px;margin-top:14vw;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}

/* ═════════ bottom bar (always on) ═════════ */
.bar{position:fixed;z-index:60;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr;height:calc(var(--bar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--straw);color:#fff}
.bar a{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.bar a + a{border-left:1px solid rgba(255,255,255,.28)}
.bar svg{width:17px;height:17px}
html:lang(th) .bar a{letter-spacing:.03em;font-size:14px}
main{padding-bottom:0}

/* ═════════ desktop ═════════ */
@media (min-width:900px){
  :root{--pad:48px}
  .hero__copy{bottom:40px}
  .band__track span{font-size:34px}
  .story{padding:12vw 10vw}
  .story__text{max-width:1100px}
  .table{padding:8vw 10vw 12vw}
  .collage{display:block;height:min(110vw,1100px);max-width:1100px;margin:0 auto}
  .ph,.cap{position:absolute;margin:0}
  .ph--arch{width:40%;left:0;top:0}
  .ph--circle{width:30%;right:8%;top:8%}
  .ph--circle .ring{inset:-14%;width:128%;height:128%}
  .ph--tape{left:46%;top:52%;width:40%}
  .cap--1{left:44%;right:auto;top:2%;max-width:22%}
  .cap--2{left:auto;right:6%;top:46%;max-width:24%}
  .cap--3{left:2%;right:auto;top:80%;text-align:left;max-width:30%}
  .about{padding:8vw 10vw}
  .canopy{width:calc(100% + 20vw);margin:6vw -10vw -1px}
  .about__art{max-width:1000px;height:min(56vw,640px)}
  .ab--wide{width:60%}
  .ab--tall{width:32%;top:12%;right:4%}
  .stamp{width:18%;left:52%;top:62%}
  .ab--tall{top:12%}
  .quote{position:absolute;left:0;right:auto;bottom:0;margin:0;max-width:50%}
  .chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:0 4vw;margin-top:6vw;border:0}
  .chap{border-top:1px solid rgba(242,235,221,.16);border-bottom:0}
  .visit{padding:10vw;display:grid;grid-template-columns:1fr 1fr;gap:0 6vw;align-items:start}
  .visit .eyebrow,.visit .h2,.book{grid-column:1}
  .info{grid-column:2;grid-row:1/4;margin-top:0}
  .sea{padding:12vw 10vw 120px}
  .sea__word{font-size:15vw}
  .bar{left:auto;right:28px;bottom:24px;width:200px;border-radius:99px;overflow:hidden;height:var(--bar);box-shadow:0 20px 40px -16px rgba(0,0,0,.45)}
}
@media (prefers-reduced-motion:reduce){
  .sea__waves i,.band__track,.ring,.stamp svg:first-child{animation:none}
  .slide img{transition:none}
}