/* ELUNÉA 月栖 — site styles */
:root{
  --cream:#F7F1E2; --sand:#EEE5CD; --olive:#2A3814; --moss:#55643D; --sage:#6A7952;
  --gold:#B8913F; --gold-deep:#80611A; --gold-soft:#D9BA73; --hair:rgba(42,56,20,.16);
  --f-display:"Gilda Display","Noto Serif SC","Songti SC","STSong","Noto Serif CJK SC",Georgia,serif;
  --f-body:"Hanken Grotesk","Noto Sans SC","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --wrap:min(1120px, 100% - 2.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;padding-bottom:5.5rem;background:var(--cream);color:var(--olive);font:400 1.0625rem/1.65 var(--f-body);text-rendering:optimizeLegibility}
html[data-lang="zh"] body{line-height:1.85;letter-spacing:.02em}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:4px}

/* language switch: .en shows in English mode, .zh shows in Chinese mode */
html[data-lang="en"] .zh{display:none !important}
html[data-lang="zh"] .en{display:none !important}

.wrap{width:var(--wrap);margin-inline:auto}
h1,h2,h3{font-weight:400;margin:0}
h2{font-family:var(--f-display);font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.15;text-wrap:balance}
html[data-lang="zh"] h2{line-height:1.35;letter-spacing:.06em}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(247,241,226,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{display:flex;align-items:baseline;gap:.65rem;font-family:var(--f-display);font-size:1.35rem;letter-spacing:.14em;color:var(--olive);text-decoration:none;white-space:nowrap}
.brand .cn{font-size:1.05rem;letter-spacing:.22em;color:var(--gold-deep)}
.nav{display:none;gap:1.75rem;margin-left:auto;margin-right:1.5rem}
.nav a{padding-block:.4rem;border-bottom:1px solid transparent;font-weight:500;font-size:.98rem;text-decoration:none}
.nav a:hover{border-bottom-color:var(--gold)}
.lang{display:flex;padding:2px;border:1px solid var(--hair);border-radius:999px}
.lang button{padding:.3rem .8rem;white-space:nowrap;border:0;border-radius:999px;background:transparent;color:var(--olive);font:500 .85rem var(--f-body);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--olive);color:var(--cream)}
.btn.header-cta{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem 1.5rem;border:1px solid var(--olive);border-radius:999px;background:var(--olive);color:var(--cream);font:500 1rem var(--f-body);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{background:var(--moss);border-color:var(--moss)}
.btn svg{flex:none}
.btn-light{background:var(--cream);border-color:var(--cream);color:var(--olive)}
.btn-light:hover{background:var(--sand);border-color:var(--sand)}
.btn-small{padding:.55rem 1.1rem;font-size:.95rem}
.text-link{text-decoration-color:var(--gold);text-underline-offset:.3em}

/* hero */
.hero{padding-block:clamp(2.25rem,6vw,5rem)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
.hero h1{font-family:var(--f-display);font-size:clamp(2.5rem,7.5vw,4.5rem);line-height:1.08;text-wrap:balance}
html[data-lang="zh"] .hero h1{line-height:1.25;letter-spacing:.08em}
.lead{max-width:34ch;margin:1.25rem 0 0;font-size:1.2rem;color:var(--moss)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2rem}
.emblem{justify-self:center;width:min(78%,500px)}
.emblem img{display:block;width:100%;height:auto;animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.emblem img{animation:none}}

/* sections */
.section{padding-block:clamp(3rem,8vw,6rem)}
.sec-head{display:grid;gap:1rem;margin-bottom:2rem}
.intro{max-width:46ch;margin:0;color:var(--moss)}

/* moon glyphs (duration + steps) */
.moon{--lit:var(--gold);--line:var(--gold);flex:none;width:44px;height:44px}
.moon-dark{fill:var(--lit);fill-opacity:.12}
.moon-lit{fill:var(--lit)}
.moon-line{fill:none;stroke:var(--line);stroke-width:1.2}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;margin:0;padding:0;list-style:none;font-size:.9rem;color:var(--moss)}
.legend li{display:flex;align-items:center;gap:.45rem}
.legend .moon{width:24px;height:24px}
.legend-note{margin:0;font-size:.95rem;color:var(--moss)}

/* ritual menu */
.menu{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.ritual{display:grid;grid-template-columns:44px 1fr auto;column-gap:1rem;row-gap:.2rem;align-items:center;padding:1.25rem .75rem;border-bottom:1px solid var(--hair);color:inherit;text-decoration:none;transition:background .2s}
.ritual:hover{background:var(--sand)}
.ritual .moon{grid-row:1 / span 2}
.ritual-title{grid-column:2;font-family:var(--f-display);font-size:1.35rem;line-height:1.3}
html[data-lang="zh"] .ritual-title{letter-spacing:.08em}
.twin{display:block;margin-left:0;font-family:var(--f-body);font-size:.88rem;color:var(--moss);letter-spacing:.02em}
.ritual-desc{grid-column:2;font-size:.98rem;color:var(--moss)}
.tag{display:inline-block;margin-left:.5rem;padding:0 .55rem;border:1px solid var(--gold);border-radius:999px;font-size:.78rem;line-height:1.55;color:var(--gold-deep);white-space:nowrap}
.ritual-meta{grid-column:3;grid-row:1 / span 2;text-align:right}
.ritual-price{display:block;font-family:var(--f-display);font-size:1.5rem;line-height:1.2}
.ritual-time{display:block;font-size:.88rem;color:var(--moss)}
.menu-note{margin:1.25rem 0 0;font-size:.95rem;color:var(--moss)}

/* about */
.about-grid{display:grid;gap:2.5rem}
.portrait{aspect-ratio:4/5;width:min(100%,380px);justify-self:center;display:grid;place-items:center;border-radius:50% 50% 6px 6px / 36% 36% 6px 6px;background:linear-gradient(165deg,#DDE0C6 0%,#C9CFAB 55%,#B5BE93 100%);color:var(--moss);font-size:.95rem;text-align:center;padding:1rem;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.about-copy{max-width:56ch}
.about-copy p{margin:1.1rem 0 0}
.facts{margin:1.75rem 0 0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.facts li{padding:.8rem 0;border-bottom:1px solid var(--hair)}

/* booking band */
.band{background:var(--olive);color:var(--cream)}
.band .moon{--lit:var(--gold-soft);--line:var(--gold-soft);width:40px;height:40px;margin-bottom:.9rem}
.steps{display:grid;gap:2rem;margin:2.25rem 0 0;padding:0;list-style:none}
.step h3{margin-bottom:.4rem;font-family:var(--f-display);font-size:1.4rem;line-height:1.3}
.step p{margin:0;color:rgba(247,241,226,.84)}
.band-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem;margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid rgba(247,241,226,.22)}
.band-foot p{max-width:48ch;margin:0;color:rgba(247,241,226,.84)}

/* visit */
.visit-grid{display:grid;gap:2.5rem}
.visit h3{margin-bottom:.6rem;font-family:var(--f-display);font-size:1.6rem;line-height:1.25}
.visit p{max-width:44ch;margin:0 0 .5rem;color:var(--moss)}
.social{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin-top:1.5rem}

/* footer */
.site-footer{padding-block:2.5rem;background:#1F2A0E;color:rgba(247,241,226,.84);font-size:.95rem}
.footer-grid{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem}
.site-footer .brand{color:var(--cream)}
.site-footer .brand .cn{color:var(--gold-soft)}
.footer-links{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
.site-footer a{text-underline-offset:.3em}
.copy{margin:1.25rem 0 0;font-size:.85rem;color:rgba(247,241,226,.6)}

/* mobile booking bar */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:.75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--cream) 72%,rgba(247,241,226,0))}
.dock .btn{width:100%}

/* privacy page */
.doc{padding-block:clamp(2.5rem,6vw,4.5rem);max-width:68ch}
.doc h1{font-family:var(--f-display);font-size:clamp(2.2rem,6vw,3.2rem);line-height:1.15;margin-bottom:.75rem}
.doc h2{margin-top:2.25rem;font-size:1.5rem}
.doc p,.doc li{color:var(--olive)}
.doc .updated{color:var(--moss);font-size:.95rem}

@media (min-width:720px){
  body{padding-bottom:0}
  .nav{display:flex}
  .twin{display:inline-block;margin-left:.6rem}
  .btn.header-cta{display:inline-flex}
  .dock{display:none}
  .steps{grid-template-columns:repeat(3,1fr);gap:3rem}
}
@media (min-width:860px){
  .about-grid{grid-template-columns:.8fr 1.2fr;gap:4.5rem;align-items:center}
  .visit-grid{grid-template-columns:1fr 1fr;gap:4.5rem}
}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:4rem}
  .emblem{width:min(100%,500px)}
}
@media (min-width:1000px){
  .sec-head{grid-template-columns:1fr 1fr;align-items:end;gap:3rem}
}