/* Websabi client sites — shared stylesheet, served at /_ws/v1/site.css by the sites Worker.
   Built from the sample-site layout (public/demo/demo.css). Each site sets its palette and display face inline. */
@font-face{font-family:'Inter';src:url('/_ws/v1/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Anuphan';font-weight:400;font-display:swap;src:url('/_ws/v1/fonts/anuphan-400.woff2') format('woff2');unicode-range:U+0E00-0E7F,U+200B-200D}
@font-face{font-family:'Anuphan';font-weight:500;font-display:swap;src:url('/_ws/v1/fonts/anuphan-500.woff2') format('woff2');unicode-range:U+0E00-0E7F,U+200B-200D}
@font-face{font-family:'Anuphan';font-weight:600 900;font-display:swap;src:url('/_ws/v1/fonts/anuphan-600.woff2') format('woff2');unicode-range:U+0E00-0E7F,U+200B-200D}

:root{--bg:#f6f5f1;--surface:#fff;--ink:#1c1c1a;--muted:#5f5f58;--line:#e2e0d8;--accent:#2f5d46;--on-accent:#fff;--display:Georgia,serif;--display-weight:400;--display-track:-.01em;--display-case:none;--radius:18px;--ease:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 Inter,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:4px}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:color-mix(in srgb,var(--accent) 25%,transparent)}
h1,h2,h3{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-track);text-transform:var(--display-case);line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}

/* The honest label: always visible, always first. */
.notice{display:flex;justify-content:center;gap:6px 16px;flex-wrap:wrap;background:#111;color:#e9e9e4;font-size:13px;line-height:1.4;padding:10px 16px;text-align:center}
.notice a{color:#fff;font-weight:600}

.site-nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.site-nav .wrap{display:flex;align-items:center;gap:28px;min-height:68px}
.brand{font-family:var(--display);font-size:24px;text-decoration:none;letter-spacing:var(--display-track);text-transform:var(--display-case);margin-right:auto;white-space:nowrap}
.site-nav nav{display:flex;gap:26px;font-size:15px}
.site-nav nav a{text-decoration:none;color:var(--muted);transition:color .2s var(--ease)}
.site-nav nav a:hover{color:var(--ink)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--accent);transition:transform .16s var(--ease),filter .2s var(--ease)}
.button:hover{filter:brightness(1.08)}
.button:active{transform:scale(.97)}
.button.ghost{background:transparent;color:inherit;border-color:currentColor}
.button.light{background:#fff;color:var(--ink);border-color:#fff}

/* Hero: message beside a drawn illustration */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(56px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,88px);align-items:center}
.hero h1{font-size:clamp(46px,6.6vw,88px);max-width:11ch}
.hero p{font-size:clamp(17px,1.6vw,20px);max-width:42ch;margin:22px 0 30px;color:var(--muted)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.art{display:grid;place-items:end center;background:var(--art-bg);border-radius:999px 999px var(--radius) var(--radius);aspect-ratio:4/5;overflow:hidden;padding:8% 10% 0}
.art svg{width:100%;height:auto;max-height:100%}
.hero-art{max-width:460px;justify-self:end;width:100%}
.card-art{border-radius:0;aspect-ratio:4/3;padding:6% 22% 0}
.section{padding:clamp(64px,9vw,120px) 0}
.section.alt{background:var(--surface)}
.kicker{font-size:14px;font-weight:600;color:var(--accent);margin-bottom:12px}
.section h2{font-size:clamp(34px,4.6vw,58px);max-width:16ch}
.lede{font-size:19px;color:var(--muted);max-width:52ch;margin-top:18px}

.intro{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.facts b{display:block;font-family:var(--display);font-weight:var(--display-weight);font-size:28px;line-height:1.1}
.facts span{font-size:14px;color:var(--muted)}

/* Menu / services / rooms list */
.list-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.items{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.item{display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:20px 0;border-bottom:1px solid var(--line)}
.item h3{font-family:inherit;font-weight:600;font-size:18px;letter-spacing:0;text-transform:none}
.item p{grid-column:1;font-size:15px;color:var(--muted)}
.item .price{grid-column:2;grid-row:1;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.item .tag{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;color:var(--accent);vertical-align:2px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--surface);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card>div:last-child{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:24px}
.card p{font-size:15px;color:var(--muted)}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px}
.card .row b{font-variant-numeric:tabular-nums}
.card button{min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.card button:active{transform:scale(.97)}

.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:260px 260px;gap:14px}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden}
.gallery figure:first-child{grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery figure:hover img{transform:scale(1.03)}

.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.hours{margin-top:28px;border-top:1px solid var(--line)}
.hours div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.hours span:last-child{color:var(--muted)}
.map{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .pin{position:absolute;left:54%;top:42%;transform:translate(-50%,-100%);background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 20px -8px #0006}
.map .pin:after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--accent)}

details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';font-weight:400;font-size:22px;line-height:1;transition:transform .25s var(--ease)}
details[open] summary:after{transform:rotate(45deg)}
details p{padding:0 0 18px;color:var(--muted)}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--ease),content-visibility .3s allow-discrete}details[open]::details-content{block-size:auto}}

.band{background:var(--accent);color:var(--on-accent);border-radius:calc(var(--radius) + 8px);padding:clamp(40px,6vw,80px);display:grid;grid-template-columns:1.4fr auto;gap:28px;align-items:center}
.band h2{color:inherit;max-width:18ch}
.band p{opacity:.85;margin-top:12px;max-width:46ch}
.band .actions{display:flex;flex-wrap:wrap;gap:12px}
.band .button.ghost{color:var(--on-accent)}

.status{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;max-width:min(560px,calc(100% - 32px));background:#111;color:#fff;font-size:14px;padding:14px 18px;border-radius:14px;box-shadow:0 12px 40px -12px #0008;animation:rise .3s var(--ease)}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}}

footer.site-foot{padding:48px 0 56px;font-size:14px;color:var(--muted)}
footer.site-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px}
footer.site-foot a{color:var(--ink)}

@media(max-width:900px){
 .intro,.visit,.band,.hero-grid{grid-template-columns:1fr}
 .hero-art{justify-self:start;max-width:380px}
 .items{grid-template-columns:1fr}
 .cards{grid-template-columns:1fr}
 .gallery{grid-template-columns:1fr 1fr;grid-template-rows:220px 160px 160px}
 .gallery figure:first-child{grid-column:span 2;grid-row:auto}
 .facts{grid-template-columns:repeat(3,1fr);gap:12px}
 .facts b{font-size:22px}
}
@media(max-width:520px){
 body{font-size:16px}
 .site-nav .button{min-height:40px;padding:0 16px;font-size:14px}
 .hero .actions .button{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---- Client-site additions ---- */
.skip{position:absolute;left:12px;top:-60px;z-index:30;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.site-nav nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.mobile-menu{display:none;position:relative;border:0}
.mobile-menu summary{padding:0 16px;min-height:44px;align-items:center;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:600}
.mobile-menu summary:after{content:none}
.mobile-menu nav{position:absolute;right:0;top:calc(100% + 10px);display:flex;flex-direction:column;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px;box-shadow:0 18px 40px -18px #0004}
.mobile-menu nav a{padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--ink)}
.mobile-menu nav a[aria-current=page]{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.page-head{padding:clamp(48px,7vw,88px) 0 clamp(8px,2vw,16px)}
.page-head h1{font-size:clamp(40px,5.6vw,72px);max-width:16ch}
.photo{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--surface);aspect-ratio:4/5}
.photo img{width:100%;height:100%;object-fit:cover}
.hero-photo{max-width:480px;justify-self:end;width:100%;border-radius:999px 999px var(--radius) var(--radius)}
.narrow{max-width:820px}
.intro.solo,.visit.solo{grid-template-columns:minmax(0,820px)}
.faq{margin-top:28px;border-top:1px solid var(--line)}
.address{margin-top:24px;color:var(--muted)}
.contact-links{display:flex;flex-direction:column;margin-top:20px;border-top:1px solid var(--line)}
.contact-links a{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.contact-links a span{font-weight:400;color:var(--muted)}
.map{display:flex;flex-direction:column;gap:14px;aspect-ratio:auto;background:none;overflow:visible}
.map iframe{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--radius);background:var(--surface)}
.map .map-open{align-self:flex-start}
.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;counter-reset:step}
.steps li{counter-increment:step;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.steps li:before{content:counter(step);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;margin-bottom:18px}
.steps h3{font-size:22px;margin-bottom:8px}
.steps p{color:var(--muted);font-size:15px}
.section.alt .steps li{background:var(--bg)}
.enquiry{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px)}
.section.alt .enquiry{background:var(--bg)}
.enquiry label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.enquiry input,.enquiry textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
.section.alt .enquiry input,.section.alt .enquiry textarea{background:var(--surface)}
.enquiry input:focus,.enquiry textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.enquiry .button{align-self:flex-start}
.enquiry .button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.form-note{font-size:14px;color:var(--muted)}
.band-wrap{padding-top:0}
/* Rooms without a photo: a clean text card with an accent rule, never the same drawing repeated. */
.text-card{border-top:4px solid var(--accent)}
.text-card>div:last-child{padding-top:26px}
.text-card h3{font-size:28px}
footer.site-foot .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:12px 32px}
footer.site-foot .wrap>div:first-child{display:flex;flex-direction:column;gap:4px}
footer.site-foot strong{color:var(--ink);font-family:var(--display);font-weight:var(--display-weight);font-size:20px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:flex-end;align-items:flex-start}
.foot-links a{color:var(--ink)}
.credit{grid-column:1/-1;padding-top:16px}

/* Thai: Anuphan for body and headings, taller lines so tone marks are never clipped. */
/* One family on Thai sites: the decorative display faces have no Thai, and mixing them with Anuphan made numbers and
   Latin words in headings, facts and the business name look different from the Thai around them. */
html[lang=th]{--display:Anuphan,Inter,-apple-system,'Segoe UI',sans-serif;--display-weight:600;--display-track:0}
html[lang=th] body{font-family:Anuphan,Inter,-apple-system,'Segoe UI',sans-serif;line-height:1.75}
html[lang=th] h1,html[lang=th] h2,html[lang=th] h3{line-height:1.3;word-break:keep-all;line-break:strict}
html[lang=th] .hero h1{font-size:clamp(38px,5.4vw,70px);max-width:14ch}
html[lang=th] .section h2,html[lang=th] .page-head h1{font-size:clamp(30px,4vw,50px)}

@media(max-width:900px){
 .nav-wide{display:none!important}
 .mobile-menu{display:block}
 .hero-photo{justify-self:start;max-width:420px}
 footer.site-foot .wrap{grid-template-columns:1fr}
 .foot-links{justify-content:flex-start}
}
@media(max-width:520px){
 .site-nav .wrap{gap:10px}
 .brand{font-size:20px;white-space:normal;line-height:1.15}
 .nav-cta{display:none}
 .hero-art,.hero-photo{max-width:300px}
}