:root { --green:#153d2d; --green-dark:#0c2c20; --cream:#f4e9cd; --sand:#d8c89e; --orange:#e25e3a; --ink:#173326; --muted:#596b60; --line:rgba(21,61,45,.2); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; overflow-x:clip; background:var(--cream); color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.7; }
a { color:inherit; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:10px 16px; color:white; background:var(--green-dark); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.site-header { width:min(1200px,calc(100% - 40px)); min-height:82px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:12px; font:700 21px/1 "Songti SC","SimSun",serif; text-decoration:none; letter-spacing:.08em; }
.seal { width:38px; height:38px; display:grid; place-items:center; border-radius:7px 12px 8px 11px; background:var(--orange); color:#fff8e8; font:700 11px/1.1 "Songti SC",serif; }
nav { display:flex; align-items:center; gap:28px; }
nav a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; font-size:14px; font-weight:650; }
.nav-button { padding:0 18px; border:1px solid var(--green); border-radius:99px; }
a:focus-visible { outline:3px solid #315fd4; outline-offset:4px; }
.hero { min-height:720px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:42px; padding:80px max(20px,calc((100% - 1200px)/2)); }
.eyebrow { margin:0 0 16px; color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3 { font-family:"Songti SC","SimSun",serif; font-weight:600; line-height:1.16; letter-spacing:.04em; }
h1 { margin:0 0 28px; font-size:clamp(56px,7vw,94px); }
.hero-copy>p:not(.eyebrow) { max-width:580px; color:var(--muted); font-size:18px; }
.hero-actions { margin-top:32px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; font-size:13px; }
.button { min-height:48px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; border-radius:99px; text-decoration:none; font-weight:750; transition:background .2s ease,color .2s ease; }
.button-primary { background:var(--green); color:#fff8e8; }
.button-primary:hover { background:var(--orange); }
.hero-art { position:relative; min-height:540px; display:grid; place-items:center; overflow:hidden; background:var(--sand); border-radius:220px 220px 30px 30px; }
.hero-art svg { position:relative; z-index:2; width:90%; height:auto; }
.sun { position:absolute; top:8%; right:4%; width:250px; aspect-ratio:1; border-radius:50%; background:var(--orange); }
.art-caption { position:absolute; z-index:3; bottom:26px; left:28px; padding:10px 16px; border-radius:99px; background:var(--cream); font:600 14px/1 "Songti SC",serif; }
.story { padding:112px max(20px,calc((100% - 1200px)/2)); display:grid; grid-template-columns:140px 1fr 180px; gap:48px; align-items:start; background:var(--green); color:#fff5dc; }
.story-label span { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.38); border-radius:50%; font-family:"Songti SC",serif; }
.story-label p { font-size:12px; letter-spacing:.14em; }
.story h2,.section-head h2,.space h2,.visit h2 { margin:0; font-size:clamp(42px,5.6vw,72px); }
.story-copy>p { max-width:680px; color:#cfddcf; font-size:18px; }
.story-stamp { padding:24px 18px; border:1px solid rgba(255,255,255,.3); text-align:center; }
.story-stamp b,.story-stamp span { display:block; }
.story-stamp b { color:#f2d36b; font:600 30px/1.2 Georgia,serif; }
.story-stamp span { margin-top:8px; font-size:12px; letter-spacing:.1em; }
.experience { padding:112px max(20px,calc((100% - 1200px)/2)); }
.section-head { display:grid; grid-template-columns:.5fr 1fr 1fr; gap:32px; align-items:end; margin-bottom:48px; }
.section-head>p:last-child { max-width:420px; margin-left:auto; color:var(--muted); }
.menu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.menu-grid article { padding-bottom:30px; border-bottom:1px solid var(--green); }
.menu-visual { position:relative; aspect-ratio:4/3; margin-bottom:24px; overflow:hidden; background:var(--sand); }
.menu-visual span { position:absolute; border:7px solid var(--green); }
.visual-one span { width:44%; height:34%; left:28%; bottom:22%; border-radius:5px 5px 40px 40px; }
.visual-two span { width:34%; aspect-ratio:1; left:20%; top:28%; border-radius:50%; }
.visual-two i { position:absolute; width:34%; aspect-ratio:1; right:18%; top:34%; border:7px solid var(--orange); border-radius:50%; }
.visual-three span { width:62%; height:40%; left:19%; bottom:16%; border-radius:50%; transform:rotate(-7deg); }
.menu-no { color:var(--orange); font-size:12px; font-weight:800; }
.menu-grid h3 { margin:8px 0; font-size:30px; }
.menu-grid article>p:not(.menu-no) { min-height:82px; color:var(--muted); }
.menu-grid strong { font-family:Georgia,serif; }
.space { display:grid; grid-template-columns:1.15fr .85fr; min-height:650px; background:#d2bb84; }
.space-art { position:relative; min-height:650px; overflow:hidden; background:linear-gradient(135deg,#c4ab73,#e6d6ad); }
.window { position:absolute; top:10%; left:15%; width:70%; height:55%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; border:18px solid var(--green); background:#f6e6bd; }
.window i { border:2px solid var(--green); }
.table { position:absolute; left:18%; bottom:15%; width:64%; height:12%; background:var(--green); border-radius:50%; }
.table::after { content:""; position:absolute; left:47%; top:50%; width:8%; height:180px; background:var(--green); }
.vase { position:absolute; z-index:2; left:47%; bottom:28%; width:8%; height:16%; border-radius:15px 15px 35px 35px; background:var(--orange); }
.space-copy { padding:100px 8vw 80px 7vw; }
.space-copy ul { margin:52px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.space-copy li { padding:18px 0; display:grid; grid-template-columns:90px 1fr; border-bottom:1px solid var(--line); color:var(--muted); }
.space-copy li span { color:var(--green); font-weight:800; }
.visit { padding:112px max(20px,calc((100% - 1200px)/2)); display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; background:var(--green-dark); color:#fff5dc; }
.visit-copy>p:not(.eyebrow) { color:#bed1c5; }
.visit dl { margin:32px 0; border-top:1px solid rgba(255,255,255,.2); }
.visit dl div { padding:14px 0; display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.2); }
dt,dd { margin:0; }
.button-light { background:#fff5dc; color:var(--green-dark); }
.button-light:hover { background:var(--orange); color:white; }
.map { position:relative; align-self:center; padding:24px; background:#e1d1a9; color:var(--green); }
.map svg { display:block; width:100%; height:auto; }
.map span { position:absolute; right:32px; bottom:28px; padding:8px 12px; background:var(--green); color:#fff5dc; font-size:12px; }
footer { min-height:82px; padding:18px max(20px,calc((100% - 1200px)/2)); display:flex; justify-content:space-between; align-items:center; gap:24px; font-size:13px; }
footer a { min-height:44px; display:inline-flex; align-items:center; text-underline-offset:5px; }
.reveal-ready [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .45s ease-out,transform .45s ease-out; }
.reveal-ready [data-reveal].is-visible { opacity:1; transform:translateY(0); }
@media(max-width:850px){ nav>a:not(.nav-button){display:none}.hero,.space,.visit{grid-template-columns:1fr}.story{grid-template-columns:90px 1fr}.story-stamp{display:none}.section-head{grid-template-columns:1fr}.section-head>p:last-child{margin-left:0}.menu-grid{grid-template-columns:1fr}.menu-grid article>p:not(.menu-no){min-height:0}.space-copy{padding:72px 24px}.visit{gap:48px}.hero-art{min-height:480px} }
@media(max-width:560px){ .site-header{min-height:70px}.nav-button{padding:0 13px}.hero{min-height:auto;padding-top:56px;padding-bottom:64px}.hero-art{min-height:380px}.sun{width:180px}.story{grid-template-columns:1fr;padding-top:80px;padding-bottom:80px}.experience,.visit{padding-top:80px;padding-bottom:80px}.space-art{min-height:460px}.window{border-width:12px}.table::after{height:120px}footer{flex-direction:column;align-items:flex-start} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }