:root{
  --ink:#1d2a33;
  --ink-soft:#4a5964;
  --tide:#2f6f9b;
  --wave:#a9d3e6;
  --mist:#eef4f7;
  --pink:#e9b7c2;
  --yellow:#eecb6b;
  --paper:#ffffff;
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.75;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%;height:auto}
a{color:var(--tide)}
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.3;margin:0}
h2{font-size:clamp(28px,4vw,40px);letter-spacing:.04em}
h3{font-size:21px}
p{margin:0 0 1em}

/* top bar */
.bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.bar .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--serif);font-size:19px;letter-spacing:.12em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.bar .brand img{width:44px;height:auto;background:#fff;border-radius:50%;padding:5px}
.bar nav{display:flex;gap:18px}
.bar nav a{color:#fff;text-decoration:none;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.bar nav a.lang{border:1px solid rgba(255,255,255,.7);padding:1px 10px;border-radius:999px}
@media (max-width:640px){.bar nav a:not(.lang){display:none}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#335 url(img/hero.jpg) center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,25,35,.35) 0%,rgba(10,25,35,0) 35%,rgba(10,25,35,.55) 100%)}
.hero .inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px 56px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.vert{writing-mode:vertical-rl;font-family:var(--serif);font-size:clamp(44px,8vw,92px);letter-spacing:.32em;line-height:1.15;font-weight:600;text-shadow:0 2px 18px rgba(0,0,0,.35);margin:0;align-self:flex-start;margin-top:110px}
.vert small{display:block;font-size:.34em;letter-spacing:.4em;margin-right:.6em;font-weight:400;opacity:.92}
.hero .lede{max-width:430px}
.hero .lede p{font-size:18px;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hero .addr{font-size:14px;opacity:.9}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.btn{display:inline-block;padding:11px 22px;border-radius:999px;text-decoration:none;font-size:16px;font-weight:600}
.btn.solid{background:var(--yellow);color:var(--ink)}
.btn.ghost{border:1.5px solid #fff;color:#fff}
.scroll-hint{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;color:#fff;text-decoration:none;font-size:13px;letter-spacing:.2em;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.5);animation:hint 2.2s ease-in-out infinite}
.scroll-hint span{font-size:18px;line-height:1}
@keyframes hint{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
@media (max-width:640px){
  .hero .inner{flex-direction:column;align-items:flex-start;padding-bottom:64px}
  .vert{margin-top:90px;font-size:56px}
}

/* villa colour strip — the three villas */
.strip{display:grid;grid-template-columns:1fr 1fr 1fr;height:10px}
.strip i:nth-child(1){background:var(--wave)}
.strip i:nth-child(2){background:var(--pink)}
.strip i:nth-child(3){background:var(--yellow)}

section{padding:88px 0}
section.alt{background:var(--mist)}
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.intro .text p{color:var(--ink-soft);max-width:34em}
.intro h2{margin-bottom:22px}
.intro figure{margin:0}
.intro figure img{border-radius:6px}
@media (max-width:820px){.intro{grid-template-columns:1fr;gap:28px}}

.head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.head p{color:var(--ink-soft);margin:0;max-width:30em}

/* rooms */
.rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 32px}
.room img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:6px}
.room h3{margin:16px 0 6px}
.room .facts{font-size:15px;color:var(--ink-soft);margin:0 0 8px}
.room p{margin:0;color:var(--ink-soft)}
.room.whole{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;padding-top:8px}
.room.whole h3{font-size:26px;margin-top:0}
@media (max-width:760px){.rooms{grid-template-columns:1fr}.room.whole{grid-template-columns:1fr}}

/* floors */
.floors{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.floor img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:6px;margin-bottom:14px}
.floor h3{margin-bottom:6px}
.floor p{color:var(--ink-soft);font-size:16px}
@media (max-width:820px){.floors{grid-template-columns:1fr}}
.also{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px 12px;padding:0;list-style:none}
.also li{background:#fff;border:1px solid #d6e3ea;border-radius:999px;padding:4px 14px;font-size:15px}
section.alt .also li{background:#fff}

/* around */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:10px;margin-bottom:40px}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.mosaic .w2{grid-column:span 2}
.mosaic .h2{grid-row:span 2}
@media (max-width:760px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}}
.around{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 48px;padding:0;list-style:none;margin:0}
.around li{padding:12px 0;border-bottom:1px solid #d6e3ea}
.around b{font-weight:600}
.around span{display:block;color:var(--ink-soft);font-size:15px}
@media (max-width:760px){.around{grid-template-columns:1fr}}

/* getting here */
.trip{display:grid;grid-template-columns:1fr 1fr;gap:56px}
table{border-collapse:collapse;width:100%;font-size:16px}
td{padding:10px 0;border-bottom:1px solid #d6e3ea}
td:last-child{text-align:right;color:var(--ink-soft)}
.maps{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.maps a{border:1px solid var(--tide);border-radius:999px;padding:5px 14px;text-decoration:none;font-size:15px}
@media (max-width:820px){.trip{grid-template-columns:1fr;gap:36px}}

/* rules */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;padding:0;margin:0;list-style:none}
.rules li{padding:14px 0;border-bottom:1px solid #d6e3ea}
.rules b{display:block;font-family:var(--serif);font-size:18px}
.rules span{color:var(--ink-soft);font-size:15px}
@media (max-width:760px){.rules{grid-template-columns:1fr}}

/* booking */
.book{background:var(--ink);color:#fff}
.book h2{color:#fff}
.book .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:36px}
.book .way h3{color:var(--yellow);margin-bottom:8px}
.book .way p{color:#c8d4db;font-size:16px}
.book .tel{display:block;font-family:var(--serif);font-size:30px;color:#fff;text-decoration:none;letter-spacing:.04em;line-height:1.4}
.book .tel + p{margin-top:8px}
@media (max-width:820px){.book .grid{grid-template-columns:1fr}}

footer{padding:36px 0 48px;font-size:14px;color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* guide pages */
.bar.solid{position:static;background:var(--ink)}
.article{padding:40px 0 72px}
.wrap.narrow{max-width:760px}
.crumb{font-size:14px;color:var(--ink-soft);margin-bottom:14px}
.crumb a{color:var(--ink-soft)}
.article h1{font-size:clamp(28px,5vw,40px);margin-bottom:22px}
.article h2{font-size:24px;margin:34px 0 10px;letter-spacing:.02em}
.article figure{margin:22px 0}
.article figure img{border-radius:6px;width:100%;max-height:560px;object-fit:cover}
.article .cover img{aspect-ratio:16/10}
.article ul{padding-left:1.2em;margin:0 0 1em}
.article li{margin:4px 0}
.article .lead{color:var(--ink-soft);max-width:36em;margin-bottom:32px}
.tip{background:var(--mist);border-left:4px solid var(--wave);border-radius:4px;padding:14px 18px;margin:24px 0}
.tip b{font-family:var(--serif)}
.tip ul{margin:6px 0 0}
.stay{margin:48px 0 20px;padding:26px 24px;background:var(--ink);color:#fff;border-radius:8px}
.stay h2{color:#fff;margin:0 0 8px}
.stay p{color:#c8d4db}
.stay .btns{margin-top:8px}
.stay .btn{margin:6px 8px 0 0}
.btn.line{border:1.5px solid #fff;color:#fff}
.next{font-size:16px;color:var(--ink-soft)}
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px}
.gcard{text-decoration:none;color:inherit;display:block}
.gcard img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:6px;margin-bottom:12px}
.gcard h2{font-size:21px;margin:0 0 6px;color:var(--ink)}
.gcard p{font-size:15px;color:var(--ink-soft);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard:hover h2{color:var(--tide)}
@media (max-width:900px){.gcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gcards{grid-template-columns:1fr}}
.more{margin-top:28px}
.more a{font-weight:600}
.mapbox{position:relative;display:block;margin-top:20px;border-radius:6px;overflow:hidden;height:260px;background:var(--mist)}
.mapbox iframe{width:100%;height:100%;border:0;pointer-events:none;display:block}
.maptag{position:absolute;right:8px;bottom:22px;background:rgba(29,42,51,.85);color:#fff;font-size:13px;padding:3px 10px;border-radius:999px}