/* ————————————————————————————————————————————————————————————
Villa Once upon a Time — Plai Laem Bay, Koh Samui
Editorial luxury / Swiss minimalism.
System: sandstone paper, teak, warm charcoal night, sea-glass.
Signature: the 180° bearing system — the page is the panorama.
———————————————————————————————————————————————————————————— */
/* ——— Fonts (self-hosted variable fonts, latin subset) ——— */
@font-face{
font-family:'Cormorant Garamond';
font-style:normal; font-weight:400 700; font-display:swap;
src:url('fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face{
font-family:'Cormorant Garamond';
font-style:italic; font-weight:400 700; font-display:swap;
src:url('fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal; font-weight:200 800; font-display:swap;
src:url('fonts/plus-jakarta-sans.woff2') format('woff2');
}
/* ——— Tokens ——— */
:root{
--paper:#E8E1D2; /* sandstone */
--paper-deep:#DDD4C0; /* deeper stone */
--night:#211F1A; /* warm charcoal */
--ink:#242119;
--ink-soft:#45413A;
--meta:#665E4F; /* warm stone gray, AA on paper */
--teak:#7C5F45;
--sea:#7FA294; /* sea glass — decorative */
--sea-deep:#4C6B5F; /* sea glass — text-safe on paper */
--sea-pale:#D3E0D8;
--hairline:rgba(36,33,25,.17);
--accent:var(--sea-deep);
--serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--sans:'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
--gutter:clamp(22px, 6vw, 108px);
--ease:cubic-bezier(.22,.61,.21,1);
--grain:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* ——— Reset ——— */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%; /* keep mobile font boosting off — it inflates
intrinsic widths and breaks the layout viewport */
text-size-adjust:100%;
}
body{
background:var(--paper);
color:var(--ink-soft);
font:400 1rem/1.75 var(--sans);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img,svg,video{display:block; max-width:100%}
ul,ol{list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
::selection{background:#C4D4CB; color:#242119}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
[hidden]{display:none !important}
/* ——— Language editions ———
Every translated string lives in the HTML three times:
………
decides which one renders. Edit copy directly in index.html. */
.t{display:inline} /* NOT display:contents — Blink counts hidden siblings into
intrinsic min-content when contents is involved, which
inflates the mobile layout viewport */
html[data-lang="en"] .t-fr, html[data-lang="en"] .t-zh,
html[data-lang="fr"] .t-en, html[data-lang="fr"] .t-zh,
html[data-lang="zh"] .t-en, html[data-lang="zh"] .t-fr{display:none}
/* The one span whose content needs flex layout (rule + text) */
.hero__bearing .t{display:inline-flex; align-items:center; gap:.9rem}
/* Dark ground — one token flip, every component adapts */
[data-ground="dark"]{
--ink:#EFE9DA;
--ink-soft:#C9C2B0;
--meta:#98917E;
--hairline:rgba(239,233,218,.16);
--accent:#A9C6B8;
background:var(--night);
color:var(--ink-soft);
}
/* ——— Layout primitives ——— */
.wrap{width:min(1560px,100%); margin-inline:auto; padding-inline:var(--gutter)}
.grid{display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(16px,2.4vw,40px)}
.section{position:relative; padding-block:clamp(6.5rem,11vw,10.5rem)}
.section--tight{padding-top:clamp(4.5rem,7vw,7rem)}
.section--deep{background:var(--paper-deep)}
.section--end{padding-bottom:2.4rem}
section{scroll-margin-top:64px}
/* ——— Type ——— */
.display{
font-family:var(--serif);
font-weight:500;
font-size:clamp(2.3rem,4.4vw,4.1rem);
line-height:1.04;
letter-spacing:-.012em;
color:var(--ink);
}
.display em{font-style:italic; font-weight:400}
p{max-width:62ch}
.spark{width:.85em; height:.85em; fill:currentColor; flex:none}
/* ——— Waypoint (bearing eyebrow — the structural motif) ——— */
.waypoint{
display:flex; align-items:baseline; gap:1.1rem;
margin-bottom:clamp(2.6rem,5vw,4.4rem);
}
.waypoint__deg{
font:500 .78rem/1 var(--sans);
letter-spacing:.14em;
color:var(--teak);
font-variant-numeric:tabular-nums;
}
[data-ground="dark"] .waypoint__deg{color:var(--accent)}
.waypoint__rule{flex:1; height:1px; background:var(--hairline); transform-origin:left}
.waypoint__title{
font:500 .7rem/1 var(--sans);
letter-spacing:.28em; text-transform:uppercase;
color:var(--meta); white-space:nowrap;
}
.js .waypoint .waypoint__rule{transform:scaleX(0); transition:transform 1.1s var(--ease) .15s}
.js .waypoint.in .waypoint__rule{transform:scaleX(1)}
/* ——— Reveal system ——— */
.js .reveal{
opacity:0; transform:translateY(22px);
transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s);
}
.js .reveal.in{opacity:1; transform:none}
/* ——— Buttons & links ——— */
.btn{
--fill:var(--ink);
--hover-ink:var(--paper);
position:relative; isolation:isolate; overflow:hidden;
display:inline-flex; align-items:center; justify-content:center;
border:1px solid currentColor;
color:var(--ink);
font:500 .72rem/1 var(--sans);
letter-spacing:.22em; text-transform:uppercase;
padding:1em 2.1em;
transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
content:""; position:absolute; inset:0; z-index:-1;
background:var(--fill);
transform:scaleX(0); transform-origin:left;
transition:transform .5s var(--ease);
}
.btn:hover{color:var(--hover-ink)}
.btn:hover::before{transform:scaleX(1)}
[data-ground="dark"] .btn{--fill:#EFE9DA; --hover-ink:var(--night); color:#EFE9DA}
.btn--bar{padding:.68em 1.4em; font-size:.66rem; letter-spacing:.2em}
.btn--hero{--fill:#F2ECDD; --hover-ink:#242119; color:#F2ECDD; padding:1.05em 2.3em}
.btn--big{padding:1.15em 2.7em; font-size:.76rem}
.link-arrow{
display:inline-flex; align-items:center; gap:.7em;
font:500 .72rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
padding-bottom:.45em; position:relative;
}
.link-arrow::after{
content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
background:currentColor; opacity:.3;
transform-origin:left;
transition:opacity .45s var(--ease);
}
.link-arrow:hover::after{opacity:.95}
/* ——— Plates (art-directed photo placeholders) ——— */
.plate{
position:relative; overflow:hidden;
background-color:#8F887A;
}
.plate::after{
content:""; position:absolute; inset:0;
background-image:var(--grain);
opacity:.12; mix-blend-mode:overlay; pointer-events:none;
}
.plate > img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
}
.plate--scrim::before{
content:""; position:absolute; inset:auto 0 0 0; height:42%; z-index:1;
background:linear-gradient(0deg, rgba(20,18,14,.58), rgba(20,18,14,0));
pointer-events:none;
}
.plate--tall{aspect-ratio:4/5.1}
.plate--wide{aspect-ratio:21/9}
.plate--minor{aspect-ratio:16/10}
.plate--inline{display:none; aspect-ratio:16/10.5; margin:1.7rem 0 2rem}
.plate-cap{
margin-top:.85rem;
font:400 .74rem/1.55 var(--sans);
letter-spacing:.06em;
color:var(--meta);
}
.plate-cap--on{
position:absolute; left:1.1rem; bottom:.95rem; right:1.1rem; margin:0;
color:rgba(242,236,221,.88);
text-shadow:0 1px 14px rgba(20,18,14,.55);
z-index:2;
}
/* Scenes — layered gradient fields, muted like old photographs */
.scene-dusk{
background:
radial-gradient(56% 40% at 66% 42%, rgba(236,212,178,.5), rgba(236,212,178,0) 68%),
linear-gradient(180deg, rgba(240,233,218,0) 46.75%, rgba(243,236,220,.85) 46.95%, rgba(240,233,218,0) 47.3%),
radial-gradient(130% 100% at 50% 0%, rgba(26,29,27,0) 55%, rgba(26,29,27,.38) 100%),
linear-gradient(180deg,
#8B8577 0%, #A2957E 30%, #BFA987 43%, #C7AE8A 46.4%,
#5E736B 47.2%, #47605A 58%, #33453F 74%, #26322E 90%, #222B28 100%);
}
.scene-noon{
background:
/* soft light pooling on the interior floor */
radial-gradient(70% 30% at 32% 76%, rgba(233,222,198,.16), transparent 65%),
/* horizon light line, upper third */
linear-gradient(180deg, rgba(244,240,229,0) 29.7%, rgba(246,242,230,.5) 29.9%, rgba(244,240,229,0) 30.25%),
/* teak slats — lower band only */
repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0 1.5px, rgba(255,255,255,.02) 1.5px 3px, transparent 3px 34px) left bottom / 100% 45.2% no-repeat,
/* teak interior — lower band only */
linear-gradient(180deg, #3A2F23 0%, #4A3A29 30%, #5C4832 70%, #66513A 100%) left bottom / 100% 45.4% no-repeat,
/* sky and sea */
linear-gradient(180deg,
#D6D2C2 0%, #C6C3B2 16%, #9DB2A4 28%, #7A9C8E 36%, #62867A 44%, #517367 54%, #48665C 100%);
}
.scene-pavilion{
background:
radial-gradient(72% 88% at 80% 28%, rgba(236,227,208,.45), transparent 64%),
linear-gradient(180deg, rgba(20,16,11,0) 74%, rgba(20,16,11,.4) 100%),
repeating-linear-gradient(90deg, rgba(0,0,0,.17) 0 1.5px, rgba(255,255,255,.02) 1.5px 3px, transparent 3px 30px),
linear-gradient(105deg, #362A1E 0%, #4C3B29 34%, #5F4B34 58%, #74604648 82%, #6B573E 100%),
linear-gradient(105deg, #3E3125 0%, #55432F 40%, #6B573E 70%, #7A6549 100%);
}
.scene-pool{
background:
radial-gradient(42% 34% at 30% 22%, rgba(255,255,255,.17), transparent 70%),
radial-gradient(50% 40% at 72% 46%, rgba(215,231,221,.22), transparent 70%),
repeating-linear-gradient(178deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px),
radial-gradient(120% 90% at 50% 110%, rgba(18,30,26,.35), transparent 55%),
linear-gradient(180deg, #A3B9AE 0%, #7FA294 30%, #5F8578 56%, #46685E 80%, #375349 100%);
}
.scene-suite{
background:
linear-gradient(115deg, rgba(255,252,244,.55) 10%, rgba(255,252,244,0) 40%),
radial-gradient(46% 62% at 78% 74%, rgba(94,84,66,.22), transparent 70%),
radial-gradient(60% 40% at 20% 100%, rgba(124,95,69,.14), transparent 70%),
linear-gradient(160deg, #F0EADC 0%, #E6DDC9 44%, #D2C4A9 78%, #C6B698 100%);
}
/* ——— Top bar ——— */
.topbar{
position:fixed; inset-inline:0; top:0; z-index:40;
display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.6rem);
padding:1.15rem var(--gutter);
color:var(--ink);
transition:background-color .5s var(--ease), color .5s var(--ease),
padding .5s var(--ease), box-shadow .5s var(--ease),
filter .5s var(--ease);
}
.topbar.inverse{color:#F2ECDD}
.topbar.scrolled{
padding-block:.65rem;
background:rgba(232,225,210,.82);
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
box-shadow:0 1px 0 rgba(36,33,25,.14);
}
.topbar.scrolled.inverse{
background:rgba(28,26,21,.72);
box-shadow:0 1px 0 rgba(239,233,218,.14);
}
.topbar__brand{display:inline-flex; align-items:baseline; gap:.6rem; min-width:0}
.topbar__brand .spark{width:.62rem; height:.62rem; align-self:center; opacity:.85}
.topbar__word{
font:500 1.22rem/1 var(--serif);
letter-spacing:.01em; white-space:nowrap;
}
.topbar__sub{
font:500 .6rem/1 var(--sans);
letter-spacing:.24em; text-transform:uppercase;
opacity:.62; white-space:nowrap;
}
.topbar__nav{display:flex; gap:clamp(1rem,2.2vw,2rem); margin-left:auto}
.topbar__nav a{
font:500 .68rem/1 var(--sans);
letter-spacing:.2em; text-transform:uppercase;
opacity:.78; padding-bottom:.35em; position:relative;
}
.topbar__nav a::after{
content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
background:currentColor; transform:scaleX(0); transform-origin:left;
transition:transform .45s var(--ease);
}
.topbar__nav a:hover{opacity:1}
.topbar__nav a:hover::after{transform:scaleX(1)}
.topbar .btn--bar{flex:none}
.topbar.inverse .btn--bar{--fill:#EFE9DA; --hover-ink:#211F1A; color:#EFE9DA}
/* ——— Bearing rail ——— */
.rail{
position:fixed; top:0; bottom:0; left:clamp(10px,1.5vw,26px);
z-index:30; width:26px;
display:flex; flex-direction:column; align-items:center; gap:.85rem;
padding:92px 0 34px;
color:var(--meta);
transition:color .5s var(--ease), filter .5s var(--ease);
}
.rail.inverse{color:#A8A18C}
.rail__cap{font:500 .58rem/1 var(--sans); letter-spacing:.14em}
.rail__line{flex:1; width:1px; background:currentColor; opacity:.32}
.rail__readout{
font:500 .76rem/1 var(--sans);
letter-spacing:.06em;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.rail__sect{
writing-mode:vertical-rl; transform:rotate(180deg);
font:500 .6rem/1 var(--sans);
letter-spacing:.3em; text-transform:uppercase;
white-space:nowrap; opacity:.85;
}
/* ——— Floating CTA ——— */
.fab{
position:fixed; z-index:38;
right:clamp(18px,3vw,34px);
bottom:calc(clamp(18px,3vw,30px) + env(safe-area-inset-bottom,0px));
background:#24211A; color:#F2ECDD;
border:1px solid rgba(242,236,221,.14);
border-radius:999px;
padding:1em 1.6em;
font:500 .68rem/1 var(--sans);
letter-spacing:.2em; text-transform:uppercase;
box-shadow:0 22px 44px -20px rgba(20,18,14,.55);
opacity:0; transform:translateY(14px); pointer-events:none;
transition:opacity .5s var(--ease), transform .5s var(--ease),
background-color .5s var(--ease), color .5s var(--ease),
filter .5s var(--ease);
}
.fab.show{opacity:1; transform:none; pointer-events:auto}
.fab.inverse{background:#EFE9DA; color:#24211A; border-color:rgba(36,33,26,.16)}
.fab:hover{transform:translateY(-2px)}
/* ——— Hero ——— */
.hero{
position:relative; min-height:100vh; min-height:100svh;
display:flex; flex-direction:column; justify-content:flex-end;
overflow:hidden; color:#F2ECDD;
}
.hero__plate{
position:absolute; inset:0;
transform:scale(1.06);
animation:heroSettle 4.5s var(--ease) both;
}
.hero__img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
}
.hero__plate::after{
content:""; position:absolute; inset:0;
background-image:var(--grain);
opacity:.14; mix-blend-mode:overlay;
}
@keyframes heroSettle{to{transform:scale(1)}}
.hero__scrim{
position:absolute; inset:0; z-index:1;
background:
linear-gradient(90deg, rgba(25,24,20,.36), rgba(25,24,20,0) 54%),
linear-gradient(180deg, rgba(25,24,20,.52), rgba(25,24,20,0) 26%),
linear-gradient(0deg, rgba(22,24,21,.58), rgba(22,24,21,0) 46%);
}
.hero__bearing{
position:absolute; top:44%; right:0; z-index:2;
display:flex; align-items:center; gap:.9rem;
padding-right:var(--gutter);
font:500 .64rem/1 var(--sans);
letter-spacing:.26em; text-transform:uppercase;
color:rgba(242,236,221,.82);
white-space:nowrap;
}
.hero__bearing-rule{width:clamp(42px,8vw,120px); height:1px; background:rgba(242,236,221,.55)}
.hero__inner{
position:relative; z-index:2; width:100%;
padding-top:120px;
padding-bottom:clamp(2.8rem,5.5vh,4.6rem);
}
.hero__eyebrow{
font:500 .68rem/1.6 var(--sans);
letter-spacing:.3em; text-transform:uppercase;
color:rgba(242,236,221,.82);
margin-bottom:clamp(1.3rem,3vh,2.4rem);
}
.hero__title{
font-family:var(--serif); font-weight:500;
font-size:clamp(3.4rem,9.4vw,8.8rem);
line-height:.93; letter-spacing:-.015em;
text-shadow:0 2px 42px rgba(22,24,20,.3);
}
.hero__l1,.hero__l2{display:block}
.hero__l2{padding-left:clamp(2.4rem,9vw,9.5rem)}
.hero__l2 em{font-style:italic; font-weight:400}
.hero__tag{
margin-top:clamp(1.3rem,2.6vh,2rem);
font:300 clamp(1rem,1.3vw,1.18rem)/1.68 var(--sans);
color:rgba(242,236,221,.92);
max-width:46ch;
}
.hero__facts{
margin-top:clamp(1.6rem,3vh,2.4rem);
display:flex; flex-wrap:wrap; align-items:center;
gap:.8rem 1.15rem;
font:500 .72rem/1 var(--sans);
letter-spacing:.18em; text-transform:uppercase;
color:rgba(242,236,221,.88);
}
.hero__facts i{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5}
.hero__rating{
display:inline-flex; align-items:center; gap:.5rem;
color:#CFDFD5;
}
.hero__rating .spark{width:.66rem; height:.66rem}
.hero__ctas{
margin-top:clamp(1.8rem,3.4vh,2.6rem);
display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem 2.4rem;
}
/* ——— Airbnb Luxe band (credential strip under the hero) ——— */
.belo{display:inline-block; flex:none}
.belo--brand{width:30px; height:32px; fill:#FF5A5F}
.belo--badge{width:15px; height:16px; fill:currentColor}
.luxeband{
border-top:1px solid rgba(239,233,218,.14);
border-bottom:1px solid rgba(239,233,218,.08);
padding:1.45rem 0;
}
.luxeband__in{
display:flex; flex-wrap:wrap; align-items:center;
gap:1rem clamp(1.4rem,3vw,2.4rem);
}
.luxeband__text{
flex:1 1 380px;
font-size:.9rem; line-height:1.65;
color:var(--ink-soft); max-width:66ch;
}
.luxeband__text strong{font-weight:500; color:var(--ink); letter-spacing:.02em}
.luxeband .link-arrow{color:var(--accent); font-size:.62rem}
/* ——— 030° Story ——— */
.story{row-gap:3rem}
.story__text{grid-column:1/7; align-self:start}
.story__lead{margin-top:2.2rem}
.story__lead::first-letter{
font-family:var(--serif); font-weight:500;
font-size:4.6em; line-height:.78;
float:left; padding:.08em .12em 0 0;
color:var(--teak);
}
.story__text p + p{margin-top:1.3rem}
.story__stat{
margin-top:3.4rem; padding-top:1.6rem;
border-top:1px solid var(--hairline);
display:flex; align-items:baseline; gap:1.4rem;
}
.story__stat-num{
font:500 clamp(3.4rem,4.6vw,4.6rem)/1 var(--serif);
letter-spacing:-.01em; color:var(--ink);
font-variant-numeric:tabular-nums;
}
.story__stat-cap{
font:400 .8rem/1.6 var(--sans);
letter-spacing:.05em; color:var(--meta);
}
.story__media{grid-column:8/13; margin-top:clamp(2rem,7vw,6.5rem)}
.story__minor{margin-top:3.2rem; max-width:78%}
/* Suite index — four suites, four thumbnails */
.chapter__suites{
margin-top:1.8rem;
display:grid; grid-template-columns:repeat(4,1fr);
gap:.7rem;
}
.suite-thumb{
display:block; position:relative; overflow:hidden;
aspect-ratio:1/1; background:#8F887A;
}
.suite-thumb img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover;
transition:transform .8s var(--ease);
}
.chapter__suites li:hover .suite-thumb img{transform:scale(1.05)}
.suite-lab{
display:block; margin-top:.5rem;
font:500 .62rem/1 var(--sans);
letter-spacing:.18em; text-transform:uppercase;
color:var(--meta);
}
/* Wide editorial plates */
.con__media{margin-top:clamp(3rem,5.5vw,4.6rem)}
.bear__media{margin:clamp(2.6rem,4.5vw,3.8rem) 0 0}
.reserve__media{margin-top:clamp(2.8rem,5vw,4.2rem)}
.reserve__media img{object-position:center 62%}
.con__media img{object-position:center 78%}
.bear__media img{object-position:center 82%}
/* ——— 060° Residence (sticky chapters) ——— */
.res{
display:grid;
grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
column-gap:clamp(2.4rem,5vw,6rem);
}
.res__stage{
position:sticky;
top:clamp(84px,12vh,130px);
height:calc(100vh - clamp(84px,12vh,130px)*2 + 40px);
height:calc(100svh - clamp(84px,12vh,130px)*2 + 40px);
min-height:420px;
}
.res__plate{
position:absolute; inset:0;
opacity:0; transition:opacity 1s var(--ease);
}
.res[data-active="0"] .res__plate[data-plate="0"],
.res[data-active="1"] .res__plate[data-plate="1"],
.res[data-active="2"] .res__plate[data-plate="2"]{opacity:1}
.res__plate .plate-cap--on{
opacity:0; transform:translateY(6px);
transition:opacity .7s var(--ease) .25s, transform .7s var(--ease) .25s;
}
.res[data-active="0"] .res__plate[data-plate="0"] .plate-cap--on,
.res[data-active="1"] .res__plate[data-plate="1"] .plate-cap--on,
.res[data-active="2"] .res__plate[data-plate="2"] .plate-cap--on{opacity:1; transform:none}
.chapter{
min-height:92vh; min-height:92svh;
display:flex; flex-direction:column; justify-content:center;
padding-block:8vh;
}
.chapter__eyebrow{
font:500 .66rem/1 var(--sans);
letter-spacing:.26em; text-transform:uppercase;
color:var(--teak);
margin-bottom:1.2rem;
}
.chapter__title{margin-bottom:1.4rem; font-size:clamp(1.9rem,2.8vw,2.7rem)}
.chapter__specs{
margin-top:2.2rem;
display:grid; grid-template-columns:1fr 1fr;
column-gap:2.2rem;
}
.chapter__specs li{
border-top:1px solid var(--hairline);
padding:.85rem 0 .8rem;
font-size:.86rem; letter-spacing:.02em;
color:var(--ink-soft);
}
.chapter__note{
margin-top:1.8rem;
font-size:.78rem; letter-spacing:.05em;
color:var(--meta);
}
/* ——— 090° Particulars (technical schedule) ——— */
.sheet__head{margin-bottom:clamp(2.8rem,5vw,4.6rem); row-gap:1.4rem}
.sheet__title{grid-column:1/7}
.sheet__sub{
grid-column:8/13; align-self:end;
font-family:var(--serif); font-size:1.25rem; line-height:1.5;
color:var(--meta); max-width:34ch;
}
.sheet{border-bottom:1px solid var(--hairline)}
.sheet__row{
display:grid;
grid-template-columns:minmax(190px,3.2fr) 8.8fr;
column-gap:clamp(1.4rem,3vw,3rem);
border-top:1px solid var(--hairline);
padding:1.55rem 0;
}
.sheet__cat{
font:500 .68rem/1.7 var(--sans);
letter-spacing:.24em; text-transform:uppercase;
color:var(--meta); padding-top:.25rem;
}
.sheet__items{
display:grid; grid-template-columns:1fr 1fr;
gap:.6rem clamp(1.6rem,3vw,3.4rem);
}
.sheet__items li{
display:flex; align-items:baseline; gap:.95rem;
font-size:.92rem; color:var(--ink-soft);
}
.sheet__items li .num{
font:500 .64rem/1 var(--sans);
letter-spacing:.1em; color:var(--teak);
font-variant-numeric:tabular-nums;
}
/* ——— 120° Elite Club (night spread) ——— */
#concierge{border-top:1px solid rgba(239,233,218,.1)}
.con__head{row-gap:1.6rem; margin-bottom:clamp(3rem,5.5vw,5rem)}
.con__title{grid-column:1/8; font-size:clamp(2.4rem,4.8vw,4.4rem)}
.con__title em{color:var(--accent)}
.con__lead{grid-column:8/13; align-self:end; font-size:.95rem; color:var(--ink-soft)}
.con__cols{row-gap:3.2rem}
.con__included{grid-column:1/6}
.con__menu{grid-column:7/13; margin-top:clamp(0rem,4vw,4rem)}
.con__colhead{
font:500 .66rem/1 var(--sans);
letter-spacing:.28em; text-transform:uppercase;
color:var(--accent);
margin-bottom:.6rem;
}
.con__colnote{
font-size:.78rem; line-height:1.6;
color:var(--meta);
margin-bottom:1.6rem;
}
.menu__item h4::before{
content:"+";
margin-right:.6em;
font-family:var(--sans); font-size:.72em; font-weight:400;
color:var(--accent);
vertical-align:.12em;
}
.con__list li{
display:grid; grid-template-columns:2.4rem 1fr;
border-top:1px solid var(--hairline);
padding:1.1rem 0 1.05rem;
}
.con__list i{
font:italic 400 1rem/1.5 var(--serif);
color:var(--accent); opacity:.9;
}
.con__list strong{
display:block;
font:500 .95rem/1.5 var(--sans);
letter-spacing:.015em; color:var(--ink);
}
.con__list li > div > span{display:block; font-size:.85rem; line-height:1.6; color:var(--ink-soft); opacity:.92}
.menu__item{
border-top:1px solid var(--hairline);
padding:1.5rem 0 1.45rem;
transition:padding-left .5s var(--ease);
}
.menu__item:hover{padding-left:.8rem}
.menu__item h4{
font:500 1.55rem/1.15 var(--serif);
letter-spacing:0; color:var(--ink);
transition:color .4s var(--ease);
}
.menu__item:hover h4{color:var(--accent)}
.menu__item p{margin-top:.45rem; font-size:.88rem; line-height:1.65; color:var(--ink-soft); opacity:.92; max-width:48ch}
.con__note{
margin-top:clamp(3rem,6vw,4.8rem);
border-top:1px solid var(--hairline);
padding-top:1.3rem;
font-size:.8rem; line-height:1.7; color:var(--meta);
max-width:70ch;
}
/* ——— 135° The Guest Book ——— */
.gb__head{row-gap:1.4rem}
.gb__title{grid-column:1/8}
.gb__sub{grid-column:8/13; align-self:end; font-size:.95rem; color:var(--meta)}
.gb__scores{
margin-top:clamp(2.6rem,4.5vw,3.8rem);
display:grid; grid-template-columns:repeat(6,1fr);
gap:1.2rem 1rem;
border-block:1px solid var(--hairline);
padding:1.35rem 0 1.25rem;
}
.gb__scores li{display:flex; flex-direction:column; gap:.4rem}
.gb__scores li > span{
font:500 1.7rem/1 var(--serif);
color:var(--ink);
font-variant-numeric:tabular-nums;
}
.gb__scores small{
font:500 .62rem/1.4 var(--sans);
letter-spacing:.18em; text-transform:uppercase;
color:var(--meta);
}
.gb__quotes{
margin-top:clamp(2.4rem,4vw,3.4rem);
display:grid; grid-template-columns:1fr 1fr;
gap:clamp(1.8rem,3.5vw,2.8rem) clamp(2.2rem,4.5vw,4.5rem);
}
.quote{border-top:1px solid var(--hairline); padding-top:1.35rem}
.quote blockquote{
font:italic 500 clamp(1.08rem,1.5vw,1.28rem)/1.6 var(--serif);
color:var(--ink); max-width:58ch;
}
.quote footer{
margin-top:1.05rem;
display:flex; flex-wrap:wrap; align-items:baseline;
gap:.4rem 1.1rem;
}
.quote__who{
font:500 .72rem/1 var(--sans);
letter-spacing:.2em; text-transform:uppercase;
color:var(--ink-soft);
}
.quote__meta{font-size:.72rem; letter-spacing:.03em; color:var(--meta)}
.quote__stars{
display:inline-flex; align-items:center; gap:.35rem;
font:500 .72rem/1 var(--sans);
color:var(--sea-deep);
}
.quote__stars .spark{width:.6rem; height:.6rem}
.gb__more{
margin-top:clamp(2.2rem,4vw,3.2rem);
border-top:1px solid var(--hairline);
padding-top:1.25rem;
display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
gap:1rem 2rem;
}
.gb__count{
font:500 .66rem/1.6 var(--sans);
letter-spacing:.22em; text-transform:uppercase;
color:var(--meta);
}
/* ——— 150° Bearings ——— */
.bear__head{row-gap:1.4rem}
.bear__title{grid-column:1/8}
.bear__sub{grid-column:8/13; align-self:end; font-size:.95rem; color:var(--meta)}
.ruler{
position:relative;
margin:clamp(3.4rem,6vw,5.4rem) 0 clamp(3rem,5vw,4.4rem);
height:64px;
}
.ruler__line{
position:absolute; top:10px; left:0; right:0; height:1px;
background:var(--hairline);
transform:scaleX(0); transform-origin:left;
transition:transform 1.4s var(--ease) .2s;
}
.ruler.in .ruler__line{transform:scaleX(1)}
.ruler__tick{
position:absolute; top:0;
left:calc(var(--min)/15*100%);
transform:translateX(-50%);
display:flex; flex-direction:column; align-items:center; gap:.85rem;
opacity:0; transition:opacity .8s var(--ease) calc(.45s + var(--min)*.05s);
}
.ruler.in .ruler__tick{opacity:1}
.ruler__tick[data-min="0"]{transform:none; align-items:flex-start}
.ruler__tick[data-min="15"]{left:auto; right:0; transform:none; align-items:flex-end}
.ruler__dot{
width:7px; height:7px; border-radius:50%;
background:var(--teak);
margin-top:7.5px;
transition:transform .4s var(--ease), background-color .4s var(--ease);
}
.ruler__tick[data-min="0"] .ruler__dot{margin-left:0}
.ruler__lab{
font:500 .66rem/1.5 var(--sans);
letter-spacing:.14em; text-transform:uppercase;
color:var(--meta); white-space:nowrap;
transition:color .4s var(--ease);
}
.ruler__tick.hot .ruler__dot{transform:scale(1.75); background:var(--sea-deep)}
.ruler__tick.hot .ruler__lab{color:var(--ink)}
.bear__list{border-bottom:1px solid var(--hairline)}
.bearing{
display:grid;
grid-template-columns:minmax(96px,130px) minmax(0,.95fr) minmax(0,1.45fr);
column-gap:clamp(1.2rem,3vw,3rem);
align-items:baseline;
border-top:1px solid var(--hairline);
padding:1.35rem 0;
}
.bearing__min{
font:500 .7rem/1.6 var(--sans);
letter-spacing:.18em; text-transform:uppercase;
color:var(--teak);
font-variant-numeric:tabular-nums;
}
.bearing__name{
font:500 1.45rem/1.2 var(--serif);
color:var(--ink);
transition:color .4s var(--ease), transform .4s var(--ease);
}
.bearing:hover .bearing__name{color:var(--sea-deep); transform:translateX(.35rem)}
.bearing__desc{font-size:.88rem; line-height:1.65; color:var(--ink-soft)}
/* ——— 165° The Album (horizontal contact sheet) ——— */
.section--album{padding-block:clamp(4.5rem,7vw,7rem)}
.section--album .waypoint{margin-bottom:clamp(1.8rem,3vw,2.8rem)}
.album__nav{display:flex; gap:.55rem; align-self:center; margin-left:.2rem}
.album__btn{
width:38px; height:38px;
display:grid; place-items:center;
border:1px solid var(--hairline);
color:var(--ink);
transition:background-color .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease);
}
.album__btn svg{width:13px; height:13px}
.album__btn:hover:not(:disabled){background:var(--ink); color:var(--paper)}
.album__btn:disabled{opacity:.28; cursor:default}
.album{
display:flex; gap:clamp(.9rem,1.8vw,1.5rem);
overflow-x:auto;
scroll-snap-type:x proximity;
scroll-padding-inline:var(--gutter);
padding-bottom:1.1rem;
scrollbar-width:thin;
scrollbar-color:var(--teak) transparent;
cursor:grab;
}
.album::-webkit-scrollbar{height:5px}
.album::-webkit-scrollbar-track{background:transparent}
.album::-webkit-scrollbar-thumb{background:rgba(124,95,69,.4)}
.album__item{
flex:0 0 auto;
width:clamp(250px,32vw,430px);
scroll-snap-align:start;
margin:0;
}
.album__item .plate{aspect-ratio:3/2}
.album__item .plate-cap{margin-top:.6rem; font-size:.68rem}
.album img{user-select:none; -webkit-user-drag:none}
.album.dragging{cursor:grabbing; scroll-snap-type:none}
.album.dragging *{pointer-events:none}
/* ——— 180° Reservation + footer ——— */
.reserve__title{font-size:clamp(2.9rem,6vw,5.4rem); max-width:14ch}
.reserve__sub{margin-top:1.8rem; max-width:52ch; font-size:.98rem}
.reserve__cta{
margin-top:2.6rem;
display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem;
}
.reserve__meta{
font:500 .7rem/1.7 var(--sans);
letter-spacing:.16em; text-transform:uppercase;
color:var(--meta);
}
.reserve__strip{
margin-top:clamp(3.4rem,6vw,5rem);
border-top:1px solid var(--hairline);
padding-top:1.4rem;
display:flex; flex-wrap:wrap; gap:.6rem 2.6rem; align-items:baseline;
}
.reserve__striphead{
font:500 .66rem/1 var(--sans);
letter-spacing:.28em; text-transform:uppercase;
color:var(--accent); white-space:nowrap;
}
.reserve__strip p{font-size:.86rem; color:var(--ink-soft)}
.reserve__terms{margin-top:clamp(2.4rem,4vw,3.4rem); row-gap:2rem}
.term{grid-column:span 4}
.term h4{
font:500 .66rem/1 var(--sans);
letter-spacing:.22em; text-transform:uppercase;
color:var(--ink);
margin-bottom:.6rem;
}
.term p{font-size:.84rem; line-height:1.7; color:var(--ink-soft); opacity:.9}
.reserve__rating{
margin-top:clamp(3rem,5vw,4.2rem);
display:flex; align-items:center; gap:.6rem;
font-size:.82rem; letter-spacing:.04em; color:var(--meta);
}
.reserve__rating .spark{color:var(--accent)}
.reserve__direct{
margin-top:1.1rem;
font-size:.82rem; line-height:1.65;
color:var(--meta); max-width:54ch;
}
/* ——— Airbnb Luxe credential ——— */
.luxe{
margin-top:clamp(3rem,5vw,4.4rem);
border-top:1px solid var(--hairline);
padding-top:1.7rem;
display:grid;
grid-template-columns:minmax(220px,4fr) minmax(0,8fr);
column-gap:clamp(1.4rem,3vw,3rem);
row-gap:1.2rem;
}
.luxe__badge{
display:flex; align-items:center; gap:.65rem;
font:500 .68rem/1.6 var(--sans);
letter-spacing:.24em; text-transform:uppercase;
color:var(--accent);
}
.luxe__badge .spark{width:.78rem; height:.78rem}
.luxe__copy{font-size:.92rem; line-height:1.75; color:var(--ink-soft); max-width:64ch}
.luxe__copy strong{font-weight:500; color:var(--ink)}
.luxe__body .link-arrow{margin-top:1.1rem; font-size:.64rem; color:var(--accent)}
/* ——— Newsletter (the villa's letter — panel) ——— */
.newsletter{
margin-top:clamp(3rem,5.5vw,4.6rem);
border:1px solid var(--hairline);
background:linear-gradient(115deg, rgba(169,198,184,.08), rgba(239,233,218,.03) 58%);
padding:clamp(1.8rem,4vw,3rem) clamp(1.5rem,3.4vw,3rem);
display:grid;
grid-template-columns:minmax(280px,6.5fr) minmax(0,5.5fr);
column-gap:clamp(2rem,4.5vw,4.5rem);
row-gap:1.5rem;
align-items:center;
}
.newsletter__eyebrow{
display:flex; align-items:center; gap:.6rem;
font:500 .62rem/1 var(--sans);
letter-spacing:.26em; text-transform:uppercase;
color:var(--accent);
margin-bottom:.95rem;
}
.newsletter__eyebrow .spark{width:.68rem; height:.68rem}
.newsletter__head{
font:500 clamp(1.7rem,2.6vw,2.3rem)/1.12 var(--serif);
letter-spacing:-.01em;
color:var(--ink);
}
.newsletter__head em{font-style:italic; font-weight:400; color:var(--accent)}
.newsletter__note{margin-top:.8rem; font-size:.85rem; line-height:1.65; color:var(--meta); max-width:44ch}
.newsletter__form{display:flex; flex-direction:column; gap:1.4rem}
.newsletter__names{display:grid; grid-template-columns:1fr 1fr; column-gap:1.3rem}
.nl-field{
border-bottom:1px solid var(--hairline);
padding-bottom:.55rem;
transition:border-color .35s var(--ease);
}
.nl-field:focus-within{border-color:var(--accent)}
.btn--nl{padding:1.05em 2.3em; font-size:.68rem; align-self:flex-start}
.newsletter__success{
grid-column:2;
display:flex; align-items:center; gap:.7rem;
font:italic 500 1.15rem/1.4 var(--serif);
color:var(--accent);
}
.newsletter__success .spark{width:.8rem; height:.8rem}
/* Booking alternates & form details */
.ext{width:.62em; height:.62em; flex:none}
.form__alt{
margin-top:1.15rem;
display:flex; gap:.8rem; align-items:baseline; justify-content:center;
font-size:.78rem; color:var(--meta);
}
.check{
display:flex; gap:.7rem; align-items:center;
padding:1.05rem 0 .15rem;
font-size:.82rem; color:var(--ink-soft);
cursor:pointer;
}
.check input{accent-color:var(--sea-deep); width:15px; height:15px; flex:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
[data-ground="dark"] .field__input::placeholder{color:rgba(239,233,218,.38)}
.footer{
margin-top:clamp(4.5rem,8vw,7rem);
border-top:1px solid var(--hairline);
padding-top:clamp(2.4rem,4vw,3.4rem);
}
.footer__grid{
display:grid;
grid-template-columns:1.3fr 1fr 1.2fr;
gap:2rem; align-items:baseline;
}
.footer__brand{
display:inline-flex; align-items:center; gap:.6rem;
font:500 1.2rem/1 var(--serif); color:var(--ink);
}
.footer__brand .spark{width:.6rem; height:.6rem; color:var(--accent)}
.footer__loc{font-size:.8rem; line-height:1.7; color:var(--meta)}
.footer__nav{display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:flex-end}
.footer__nav a{
font:500 .64rem/1 var(--sans);
letter-spacing:.2em; text-transform:uppercase;
color:var(--ink-soft); opacity:.8;
transition:opacity .3s;
}
.footer__nav a:hover{opacity:1}
.footer__base{
margin-top:2.6rem; padding-block:1.4rem .4rem;
display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
font-size:.68rem; letter-spacing:.08em; color:var(--meta);
}
/* ——— Drawer ——— */
.drawer{
position:fixed; inset:0; z-index:60;
overflow:hidden; /* keep the parked panel from widening the mobile viewport */
visibility:hidden;
transition:visibility 0s linear .7s;
}
.drawer.open{visibility:visible; transition-delay:0s}
.drawer__backdrop{
position:absolute; inset:0;
background:rgba(23,21,17,.52);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
opacity:0; transition:opacity .55s var(--ease);
border:0; cursor:pointer;
}
.drawer.open .drawer__backdrop{opacity:1}
.drawer__panel{
position:absolute; top:0; right:0; height:100%;
width:min(478px,100%);
background:var(--paper);
transform:translateX(103%);
transition:transform .65s var(--ease);
overflow-y:auto; overscroll-behavior:contain;
padding:clamp(1.8rem,4vh,2.8rem) clamp(1.5rem,4vw,2.5rem) 2.6rem;
box-shadow:-34px 0 90px -44px rgba(18,16,12,.6);
}
.drawer.open .drawer__panel{transform:none}
.drawer__close{
position:absolute; top:1.15rem; right:1.15rem;
width:42px; height:42px;
display:grid; place-items:center;
border:1px solid var(--hairline);
color:var(--ink);
transition:background-color .35s var(--ease), color .35s var(--ease);
}
.drawer__close:hover{background:var(--ink); color:var(--paper)}
.drawer__close svg{width:16px; height:16px}
.drawer__eyebrow{
font:500 .62rem/1 var(--sans);
letter-spacing:.26em; text-transform:uppercase;
color:var(--teak);
}
.drawer__title{
font:500 2.3rem/1.05 var(--serif);
color:var(--ink);
margin:.7rem 0 .7rem;
}
.drawer__title:focus{outline:none}
.drawer__sub{font-size:.86rem; line-height:1.65; color:var(--meta)}
.form{margin-top:1.4rem}
.field{display:block; border-bottom:1px solid var(--hairline); padding:.9rem 0 .7rem; transition:border-color .35s var(--ease)}
.field:focus-within{border-color:var(--sea-deep)}
.field__label{
display:block;
font:500 .62rem/1 var(--sans);
letter-spacing:.2em; text-transform:uppercase;
color:var(--meta);
margin-bottom:.4rem;
transition:color .35s var(--ease);
}
.field__label em{text-transform:none; letter-spacing:.05em; font-style:normal; opacity:.7}
.field:focus-within .field__label{color:var(--sea-deep)}
.field__input{
width:100%; background:transparent; border:0; outline:none;
font:400 1rem/1.5 var(--sans); color:var(--ink);
color-scheme:light;
}
.field__input::placeholder{color:rgba(102,94,79,.55)}
textarea.field__input{resize:vertical; min-height:2.4rem}
select.field__input{
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23665E4F' stroke-width='1.2'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-size:11px 7px; background-position:right .25rem center;
padding-right:1.4rem;
}
.form__row--split{display:grid; grid-template-columns:1fr 1fr; column-gap:1.6rem}
.form__error{margin-top:.9rem; font-size:.8rem; color:#8C4232}
.form__error a{text-decoration:underline; text-underline-offset:3px}
.btn--submit:disabled{opacity:.55; cursor:wait}
.btn--submit{
width:100%; margin-top:1.7rem;
background:var(--ink); color:#F2ECDD; border-color:var(--ink);
--fill:var(--sea-deep); --hover-ink:#F2ECDD;
padding:1.2em;
}
.form__success{padding:2.2rem 0 1rem}
.form__success .spark{width:1.05rem; height:1.05rem; color:var(--sea-deep)}
.form__success h3{font:500 2.1rem/1.1 var(--serif); color:var(--ink); margin:.9rem 0 .5rem}
.form__success p{font-size:.9rem; color:var(--ink-soft)}
.form__success-alt{margin-top:.9rem; font-size:.78rem; color:var(--meta)}
.form__success-alt a{color:var(--sea-deep); text-decoration:underline; text-underline-offset:3px}
.drawer__fine{margin-top:2.4rem; border-top:1px solid var(--hairline); padding-top:1.2rem}
.drawer__fine h4{
font:500 .6rem/1 var(--sans);
letter-spacing:.24em; text-transform:uppercase;
color:var(--meta);
margin:1rem 0 .35rem;
}
.drawer__fine p{font-size:.78rem; line-height:1.7; color:var(--ink-soft); opacity:.9}
/* ——— Language switcher (topbar flags) ——— */
.langs{display:flex; align-items:center; gap:.5rem; margin-left:.2rem}
.lang-btn{
padding:2px; border-radius:2px;
opacity:.5;
transition:opacity .3s var(--ease);
}
.lang-btn svg{
display:block; width:21px; height:14px; border-radius:1.5px;
box-shadow:0 0 0 1px rgba(36,33,25,.22);
}
.topbar.inverse .lang-btn svg{box-shadow:0 0 0 1px rgba(239,233,218,.32)}
.lang-btn:hover{opacity:.85}
.lang-btn.is-active{opacity:1}
.lang-btn.is-active svg{box-shadow:0 0 0 1px rgba(36,33,25,.38), 0 0 0 3px rgba(124,95,69,.28)}
.topbar.inverse .lang-btn.is-active svg{box-shadow:0 0 0 1px rgba(239,233,218,.55), 0 0 0 3px rgba(239,233,218,.18)}
/* ——— Language veil (fake loading between editions) ——— */
.langveil{
position:fixed; inset:0; z-index:80;
display:grid; place-items:center;
background:rgba(28,26,21,.28);
opacity:0; visibility:hidden;
transition:opacity .5s var(--ease), visibility 0s linear .5s;
}
.langveil.on{opacity:1; visibility:visible; transition-delay:0s}
.langveil__card{
background:var(--paper);
border:1px solid var(--hairline);
box-shadow:0 44px 90px -44px rgba(18,16,12,.65);
padding:2.4rem 3rem;
width:min(380px,88vw);
display:flex; flex-direction:column; align-items:center; gap:1.15rem;
}
.langveil__spark{width:20px; height:20px; color:var(--teak)}
.langveil.on .langveil__spark{animation:veilspin 1.5s linear infinite}
@keyframes veilspin{to{transform:rotate(360deg)}}
.langveil__text{font:italic 500 1.12rem/1.45 var(--serif); color:var(--ink); text-align:center}
.langveil__bar{width:100%; height:1px; background:var(--hairline); position:relative; overflow:hidden}
.langveil__bar i{position:absolute; inset:0; width:0; background:var(--sea-deep)}
.langveil.on .langveil__bar i{animation:veilfill 1.95s var(--ease) forwards}
@keyframes veilfill{to{width:100%}}
main{transition:filter .5s var(--ease)}
body.lang-loading main,
body.lang-loading .topbar,
body.lang-loading .rail,
body.lang-loading .fab{filter:blur(14px)}
body.lang-loading{pointer-events:none}
body.lang-loading .langveil{pointer-events:auto}
/* ——— Chinese edition typography ——— */
html[lang="zh-Hans"]{
--serif:'Cormorant Garamond','Songti SC','STSong','SimSun',serif;
--sans:'Plus Jakarta Sans','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
}
html[lang="zh-Hans"] .display,
html[lang="zh-Hans"] .hero__title{letter-spacing:0}
html[lang="zh-Hans"] em,
html[lang="zh-Hans"] .quote blockquote,
html[lang="zh-Hans"] .langveil__text,
html[lang="zh-Hans"] .sheet__sub{font-style:normal}
html[lang="zh-Hans"] .story__lead::first-letter{
float:none; font-size:inherit; line-height:inherit;
padding:0; color:inherit; font-family:inherit; font-weight:inherit;
}
/* ————————————————————————————————————————————————————————————
Responsive
———————————————————————————————————————————————————————————— */
@media (max-width:1180px){
.rail{display:none}
}
@media (max-width:1024px){
.grid{display:block}
.grid > * + *{margin-top:1.6rem}
.story__media{margin-top:2.6rem}
.res{display:block}
.res__stage{display:none}
.plate--inline{display:block}
.chapter{min-height:0; padding:2.6rem 0}
.chapter + .chapter{border-top:1px solid var(--hairline)}
.sheet__sub{max-width:52ch}
.sheet__row{grid-template-columns:1fr; row-gap:.9rem; padding:1.3rem 0}
.con__menu{margin-top:2.8rem}
.con__lead{max-width:58ch}
.term{margin-top:0}
.reserve__terms{display:grid; grid-template-columns:repeat(3,1fr); column-gap:1.6rem}
.footer__grid{grid-template-columns:1fr 1fr; row-gap:1.6rem}
.footer__nav{justify-content:flex-start}
}
@media (max-width:760px){
.topbar__nav{display:none}
.topbar__sub{display:none}
.topbar{gap:.9rem}
.topbar__word{font-size:1.05rem}
.topbar__brand{min-width:0}
.langs{margin-left:auto; gap:.35rem}
.lang-btn{padding:1px}
.lang-btn svg{width:18px; height:12px}
.langveil__card{padding:1.9rem 1.6rem}
.hero__bearing{display:none}
.hero__facts{font-size:.64rem; letter-spacing:.14em}
.hero__rating{width:100%}
.sheet__items{grid-template-columns:1fr}
.bearing{grid-template-columns:76px 1fr; row-gap:.3rem}
.bearing__min{font-size:.62rem}
.bearing__name{grid-column:2}
.bearing__desc{grid-column:2}
.ruler{height:58px; margin-top:2.6rem}
.ruler__lab{font-size:.56rem; letter-spacing:.08em}
.ruler__tick[data-min="10"] .ruler__lab{display:none}
.reserve__terms{grid-template-columns:1fr; row-gap:1.6rem}
.footer__grid{grid-template-columns:1fr}
.footer__base{flex-direction:column}
.form__row--split{grid-template-columns:1fr}
.plate--wide{aspect-ratio:16/10}
.story__minor{max-width:100%}
.album__item{width:min(78vw,320px)}
.luxe,.newsletter{grid-template-columns:1fr; row-gap:.9rem}
.newsletter__success{grid-column:1}
.gb__scores{grid-template-columns:repeat(3,1fr)}
.gb__quotes{grid-template-columns:1fr}
.luxeband__text{flex-basis:100%}
}
@media (max-width:480px){
.chapter__suites{grid-template-columns:1fr 1fr; gap:.9rem .7rem}
.newsletter__names{grid-template-columns:1fr; row-gap:1.4rem}
.topbar{gap:.65rem; padding-inline:14px}
.topbar__word{font-size:.95rem}
.topbar__brand .spark{width:.5rem; height:.5rem}
.btn--bar{padding:.6em 1em; font-size:.6rem; letter-spacing:.14em}
.lang-btn svg{width:16px; height:11px}
}
/* ——— Reduced motion ——— */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.langveil.on .langveil__spark{animation:none}
.langveil.on .langveil__bar i{animation-duration:.35s}
main,.topbar,.rail,.fab{transition-duration:0s}
.js .reveal{opacity:1; transform:none; transition:none}
.js .waypoint .waypoint__rule{transform:none; transition:none}
.hero__plate{animation:none; transform:none}
.ruler__line{transform:none; transition:none}
.ruler__tick{opacity:1; transition:none}
.res__plate{transition:opacity .01s}
.btn::before{transition:none}
.drawer__panel,.drawer__backdrop{transition:none}
.fab{transition:opacity .01s}
}