/* Layout: folding-screen language gate at / → one calm page per language at /zh/ /fr/ /en/ of layered paper-cut landscape, wide margins, gold hairlines. */
:root{
  --paper:#E8E3DA; --paper2:#DDD7CC; --ink:#35393A; --ink2:#6B6F6C;
  --sage:#A5AE9F; --mist:#9AA6AC; --clay:#BBA59D; --rose:#C9ABA4; --stone:#C9C2B6;
  --gold:#B08D4F; --line:rgba(53,57,58,.16); --shadow:rgba(53,57,58,.22);
  --display:"Cormorant Garamond","Noto Serif SC",serif;
  --body:"Jost","Noto Serif SC",sans-serif;
  --cjk:"Noto Serif SC","Songti SC","SimSun",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1F2325; --paper2:#272C2E; --ink:#E6E1D6; --ink2:#A4A8A3;
  --sage:#56605A; --mist:#505C63; --clay:#6B5B57; --rose:#6E5A57; --stone:#3A3F40;
  --gold:#C7A566; --line:rgba(230,225,214,.16); --shadow:rgba(0,0,0,.45);color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1F2325; --paper2:#272C2E; --ink:#E6E1D6; --ink2:#A4A8A3;
  --sage:#56605A; --mist:#505C63; --clay:#6B5B57; --rose:#6E5A57; --stone:#3A3F40;
  --gold:#C7A566; --line:rgba(230,225,214,.16); --shadow:rgba(0,0,0,.45);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.8;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
html[lang="zh"] body{font-family:var(--cjk);font-weight:300;letter-spacing:.04em;line-height:2}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.2}
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3{font-family:var(--cjk);font-weight:300;letter-spacing:.12em}
p{margin:0;max-width:62ch}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.wrap{max-width:1080px;margin:0 auto}
.eyebrow{font-family:var(--body);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
html[lang="zh"] .eyebrow{font-family:var(--cjk);letter-spacing:.4em}
.gold-line{height:1px;width:64px;background:var(--gold);border:0;margin:0}

/* HEADER */
header.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.4rem;position:relative;z-index:5}
.logo{font-family:var(--display);letter-spacing:.38em;font-size:1.15rem;text-decoration:none}
nav.menu{display:flex;gap:1.8rem;font-size:.78rem;letter-spacing:.16em}
nav.menu a{text-decoration:none;color:var(--ink2);transition:color .3s}
nav.menu a:hover{color:var(--ink)}
.tools{display:flex;gap:.5rem;align-items:center}
.pill{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:.75rem;letter-spacing:.14em;padding:.35rem .9rem;cursor:pointer;border-radius:99px}
.pill:hover{border-color:var(--gold)}
@media(max-width:760px){nav.menu{display:none}}

/* HERO */
.hero{position:relative;margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));overflow:hidden;background:linear-gradient(var(--paper),var(--paper2));min-height:560px;display:grid;align-items:start}
.hero-copy{position:relative;z-index:3;padding:clamp(2.5rem,7vw,5.5rem) max(16px,env(safe-area-inset-left,0px)) clamp(190px,32vw,320px);display:grid;gap:1.4rem;justify-items:center;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);max-width:22ch}
html[lang="zh"] .hero h1{max-width:14em}
.hero p{color:var(--ink2);text-align:center;margin-inline:auto}
.cta{display:inline-flex;gap:.8rem;align-items:center;text-decoration:none;font-size:.8rem;letter-spacing:.22em;padding:.9rem 1.8rem;background:var(--ink);color:var(--paper);
  box-shadow:0 12px 24px -14px var(--shadow);transition:transform .4s;margin-top:.4rem}
.cta:hover{transform:translateY(-3px)}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--gold);box-shadow:none}
.hero-art{position:absolute;inset:auto 0 0 0;height:clamp(150px,28vw,280px);z-index:1}
.hero-art svg,.land svg{width:100%;height:100%;display:block}
.sun{animation:breathe 9s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes breathe{50%{transform:scale(1.05)}}
.layer{filter:drop-shadow(0 -6px 8px var(--shadow))}
.drift{animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(-24px)}}

/* COMING SOON */
.soon{display:grid;justify-items:center;text-align:center;gap:1rem;padding:clamp(2.2rem,5vw,3.4rem) clamp(1.2rem,4vw,3rem);margin-top:clamp(-5rem,-6vw,-2rem);position:relative;z-index:4;
  background:var(--paper);box-shadow:0 1px 0 var(--line),0 28px 40px -28px var(--shadow)}
.soon::before{content:"";position:absolute;inset:8px;border:1px solid var(--gold);opacity:.4;pointer-events:none}
.soon h2{font-size:clamp(1.4rem,3vw,2.1rem);max-width:26ch}
html[lang="zh"] .soon h2{max-width:22em}
.soon p{color:var(--ink2);margin-inline:auto}
.soon form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;width:100%;max-width:520px;margin-top:.4rem}
.soon input[type=email]{flex:1 1 220px;min-width:0;font:inherit;font-size:.95rem;padding:.85rem 1rem;color:var(--ink);background:var(--paper2);border:1px solid var(--line);border-radius:0}
.soon input[type=email]:focus{outline:1px solid var(--gold);border-color:var(--gold)}
.soon button.cta{margin-top:0;border:0;cursor:pointer;font:inherit;font-size:.8rem;letter-spacing:.22em}
.soon .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.soon small{color:var(--ink2);font-size:.74rem;letter-spacing:.06em;max-width:50ch}
#soonMsg{min-height:1.6rem;color:var(--gold);font-size:.9rem}

/* SECTIONS */
section{padding-block:clamp(4rem,9vw,7rem)}
.head{display:grid;gap:1rem;margin-bottom:3rem;justify-items:start}
.head h2{font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:20ch}
html[lang="zh"] .head h2{max-width:16em}
.head p{color:var(--ink2)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(1rem,2.4vw,2rem)}
.card{background:var(--paper2);padding:2.2rem 1.8rem 2.4rem;display:grid;gap:1rem;align-content:start;position:relative;min-width:0;
  box-shadow:0 1px 0 var(--line),0 18px 30px -22px var(--shadow)}
.card:nth-child(1){--tone:var(--sage)}.card:nth-child(2){--tone:var(--mist)}.card:nth-child(3){--tone:var(--clay)}
.card .chip{width:100%;height:92px;background:var(--tone);position:relative;overflow:hidden;margin-bottom:.6rem}
.card .chip svg{position:absolute;inset:0;width:100%;height:100%}
.card h3{font-size:1.4rem}
.card p{color:var(--ink2);font-size:.95rem}
.card .more{font-size:.74rem;letter-spacing:.22em;color:var(--gold);text-decoration:none;margin-top:.4rem}
.card .more:hover{text-decoration:underline;text-underline-offset:6px}

/* CAST */
.cast{background:var(--paper2);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.cast-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
@media(max-width:820px){.cast-grid{grid-template-columns:1fr}}
.altar{background:var(--paper);padding:2.6rem 1.6rem;display:grid;gap:1.6rem;justify-items:center;box-shadow:0 1px 0 var(--line),0 30px 40px -30px var(--shadow);position:relative;min-height:380px;align-content:center}
.altar::before{content:"";position:absolute;inset:10px;border:1px solid var(--gold);opacity:.45;pointer-events:none}
.hex{display:grid;gap:12px;width:150px;min-height:120px}
.yao{height:9px;display:flex;gap:18px;opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s}
.yao.on{opacity:1;transform:none}
.yao i{flex:1;background:var(--ink);display:block}
.yao.yang i:nth-child(2){display:none}
.yao.moving i{background:var(--gold)}
.hex-name{font-family:var(--display);font-size:1.35rem;min-height:2rem;text-align:center;letter-spacing:.06em}
html[lang="zh"] .hex-name{font-family:var(--cjk);letter-spacing:.2em}
.hex-sub{color:var(--ink2);font-size:.85rem;text-align:center;min-height:3.4rem;max-width:34ch}
.altar button{appearance:none;border:1px solid var(--gold);background:transparent;color:var(--ink);font:inherit;font-size:.78rem;letter-spacing:.24em;padding:.8rem 1.8rem;cursor:pointer}
.altar button:hover{background:var(--gold);color:var(--paper)}
.coin{width:14px;height:14px;border-radius:50%;border:1px solid var(--gold);display:inline-block;margin:0 5px}

/* BREATH */
.breath{display:grid;justify-items:center;gap:1.6rem;text-align:center}
.ring{width:150px;height:150px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;animation:ring 10s ease-in-out infinite;position:relative}
.ring::after{content:"";width:56%;height:56%;border-radius:50%;background:var(--sage);opacity:.55;animation:ring 10s ease-in-out infinite reverse}
@keyframes ring{50%{transform:scale(1.22)}}
.breath p{margin-inline:auto;color:var(--ink2)}

/* ACERIC */
.biz{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid var(--line)}
.biz div{padding:2rem 1.6rem 2.2rem 0;border-bottom:1px solid var(--line);display:grid;gap:.5rem;align-content:start;min-width:0}
.biz h3{font-size:1.25rem}
.biz p{color:var(--ink2);font-size:.92rem}
.biz small{font-size:.68rem;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.sites{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;margin-top:3rem}
.site{padding:2rem;border:1px solid var(--gold);display:grid;gap:.5rem;min-width:0}
.site b{font-family:var(--display);font-size:1.6rem;font-weight:400;letter-spacing:.08em}
.site span{color:var(--ink2);font-size:.9rem}

footer{border-top:1px solid var(--line);padding-block:2.4rem 3rem;display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap;color:var(--ink2);font-size:.78rem;letter-spacing:.12em}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* LANGUAGE GATE (folding screen) */
body.gate-page{padding-inline:0}
.gate{min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(var(--paper),var(--paper2))}
.gate .bar{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem max(20px,env(safe-area-inset-left,0px));font-size:.75rem;letter-spacing:.2em;color:var(--ink2)}
.gate .bar a{text-decoration:none}
.gate .bar a:hover{color:var(--ink)}
.gate .land{position:absolute;inset:auto 0 0 0;height:44%;pointer-events:none;z-index:1}
.gate .land svg{width:100%;height:100%;display:block}
.gate main{position:relative;z-index:2;flex:1;display:grid;align-content:center;justify-items:center;gap:clamp(1.6rem,3vw,2.4rem);padding:1rem max(16px,env(safe-area-inset-left,0px)) clamp(5rem,12vw,9rem);text-align:center}
.gate .brand{font-family:var(--display);font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:.42em;padding-left:.42em}
.welcome{display:grid;gap:.6rem;justify-items:center}
.welcome h1{font-family:var(--cjk);font-weight:300;font-size:clamp(1.5rem,4vw,2.4rem);letter-spacing:.12em}
.welcome p{color:var(--ink2);font-size:.85rem;letter-spacing:.14em;max-width:none}
.gl{width:56px;height:1px;background:var(--gold);margin:.2rem auto}
.screen{display:flex;width:100%;max-width:900px;height:360px;filter:drop-shadow(0 18px 18px var(--shadow))}
.pn{flex:1;position:relative;display:grid;align-content:end;justify-items:center;gap:.3rem;padding:1rem 1rem 1.6rem;margin-left:-1px;color:var(--ink);text-decoration:none;transition:flex .8s cubic-bezier(.2,.7,.2,1);overflow:hidden;min-width:0}
.pn:hover,.pn:focus-visible{flex:2.1}
.pn:nth-child(odd){clip-path:polygon(0 0,100% 4%,100% 96%,0 100%)}
.pn:nth-child(even){clip-path:polygon(0 4%,100% 0,100% 100%,0 96%)}
.pn:nth-child(1){background:var(--rose)}.pn:nth-child(2){background:var(--sage)}.pn:nth-child(3){background:var(--mist)}
.pn svg{position:absolute;inset:auto 0 0 0;width:100%;height:55%;opacity:.55}
.pn .g,.pn b,.pn span{position:relative;z-index:1}
.pn .g{font-family:var(--cjk);font-size:2.6rem;font-weight:300;line-height:1}
.pn b{font-family:var(--display);font-weight:400;letter-spacing:.1em;font-size:1.25rem}
.pn:nth-child(1) b{font-family:var(--cjk);letter-spacing:.2em}
.pn span{font-size:.72rem;opacity:.8;max-width:18ch}
.gate .note{position:relative;z-index:3;text-align:center;padding:0 16px 1.4rem;font-size:.72rem;letter-spacing:.14em;color:var(--ink2)}
@media(max-width:640px){.screen{flex-direction:column;height:auto}.pn{min-height:110px;clip-path:none!important;margin:0 0 -1px}.pn:hover,.pn:focus-visible{flex:1}}
a.pill{text-decoration:none;display:inline-block}
a.pill[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* consent checkboxes and privacy page */
.soon .chk{display:flex;gap:.6rem;align-items:flex-start;text-align:left;width:100%;max-width:520px;font-size:.8rem;color:var(--ink2);line-height:1.6;cursor:pointer;flex-basis:100%}
.soon .chk input{margin-top:.3rem;accent-color:var(--gold);flex:none}
.soon .chk a{color:var(--ink)}
footer a{color:inherit}
.policy{max-width:720px;margin:0 auto;padding-block:3rem 5rem}
.policy h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.6rem}
.policy .upd{color:var(--ink2);font-size:.85rem;margin-bottom:2.4rem}
.policy h2{font-size:1.2rem;margin:2.2rem 0 .6rem}
.policy p{color:var(--ink2);max-width:none}

a.site{text-decoration:none;color:inherit;transition:background .3s,transform .4s}
a.site:hover{background:var(--paper2);transform:translateY(-3px)}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1.6rem}
.gcard{background:var(--paper2);padding:1.8rem 1.6rem;display:grid;gap:.6rem;align-content:start;text-decoration:none;color:inherit;position:relative;box-shadow:0 1px 0 var(--line),0 18px 30px -22px var(--shadow);transition:transform .4s}
.gcard:hover{transform:translateY(-4px)}
.gcard::before{content:"";position:absolute;inset:7px;border:1px solid var(--gold);opacity:.35;pointer-events:none}
.gcard h2{font-size:1.25rem}
.gcard p{color:var(--ink2);font-size:.92rem}
.gcard .go{font-size:.74rem;letter-spacing:.22em;color:var(--gold);margin-top:.4rem}

.ctas{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.ctas .cta{margin-top:0}