:root{
  --ink:#1b1a17; --paper:#faf7f2; --paper2:#f2ece1; --line:#d9cfbc;
  --gold:#9a7b3f; --red:#8c2f22; --muted:#6f6656; --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Songti SC","Noto Serif CJK SC","Source Han Serif SC",Georgia,serif;
  line-height:1.85; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--red); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* ---------- language toggle ---------- */
html[data-lang="zh"] .en{display:none !important}
html[data-lang="en"] .zh{display:none !important}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:60; background:rgba(250,247,242,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; gap:18px; height:58px}
.brand{font-weight:700; letter-spacing:.06em; font-size:1.02rem; color:var(--ink)}
.brand small{display:block; font-size:.62rem; letter-spacing:.18em; color:var(--muted); font-weight:400}
nav.mainnav{margin-left:auto; display:flex; gap:20px; font-size:.9rem}
nav.mainnav a{color:var(--muted)}
nav.mainnav a:hover{color:var(--red); text-decoration:none}
.langbtn{
  margin-left:6px; border:1px solid var(--line); background:transparent; color:var(--ink);
  border-radius:999px; padding:6px 13px; cursor:pointer; font-size:.8rem; font-family:inherit;
  letter-spacing:.05em;
}
.langbtn:hover{border-color:var(--gold); color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:76vh; display:flex; align-items:flex-end; overflow:hidden; background:#12100e}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,8,6,.88) 0%, rgba(10,8,6,.42) 45%, rgba(10,8,6,.16) 100%);
}
.hero .inner{position:relative; z-index:2; padding:0 22px 56px; max-width:var(--maxw); margin:0 auto; width:100%; color:#fff}
.hero h1{
  font-size:clamp(2.3rem,6.4vw,4.2rem); margin:0 0 6px; letter-spacing:.14em; font-weight:700;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.hero .sub{font-size:clamp(.92rem,2.3vw,1.12rem); letter-spacing:.2em; color:#e8dcc6; margin-bottom:20px}
.hero .lede{max-width:44em; font-size:clamp(.95rem,2.2vw,1.06rem); color:#efe7d8; line-height:1.95}
.hero .meta{margin-top:22px; display:flex; flex-wrap:wrap; gap:9px}
.tag{
  font-size:.73rem; letter-spacing:.13em; padding:5px 12px; border:1px solid rgba(255,255,255,.4);
  border-radius:999px; color:#f3ead9;
}

/* ---------- sections ---------- */
section{padding:74px 0}
section:nth-of-type(even){background:var(--paper2)}
h2{
  font-size:clamp(1.4rem,3.4vw,1.9rem); margin:0 0 8px; letter-spacing:.1em; font-weight:700;
}
h2 .num{color:var(--gold); font-size:.68em; letter-spacing:.2em; display:block; margin-bottom:8px; font-weight:400}
.rule{width:52px; height:2px; background:var(--gold); margin:18px 0 30px}
p{margin:0 0 1.1em; font-size:1.02rem}
.lead{font-size:1.09rem; color:#332f28}

/* ---------- story: three steps ---------- */
.steps{display:grid; gap:0; margin-top:8px}
.steps{position:relative}
.step{
  display:grid; grid-template-columns:88px 1fr; gap:26px; padding:30px 0;
  border-top:1px solid var(--line); align-items:start; position:relative;
}
.steps::before{
  content:""; position:absolute; left:87px; top:14px; bottom:14px; width:1px;
  background:linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.step::before{
  content:""; position:absolute; left:83px; top:0; width:9px; height:9px;
  border-radius:50%; background:var(--paper); border:1.5px solid var(--gold); z-index:2;
}
.step .yr{position:relative}
.step .yr::before{
  content:""; position:absolute; right:-6px; top:calc(0.5em + 6px); width:9px; height:9px;
  border-radius:50%; background:var(--paper); border:1.5px solid var(--gold); z-index:2;
  transform:translateX(-50%);
}
.step::before{display:none}
.step:last-child{border-bottom:1px solid var(--line)}
.step .yr{
  font-size:.78rem; letter-spacing:.16em; color:var(--gold); padding-top:6px;
  border-right:1px solid var(--line); padding-right:16px;
}
.step h3{margin:0 0 10px; font-size:1.16rem; letter-spacing:.06em}
.step p{margin:0; color:#3b3630; font-size:.99rem}

/* ---------- feature grid ---------- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}
.grid2 img{width:100%; border:1px solid var(--line); aspect-ratio:4/3; object-fit:cover}
.grid2 figure{display:flex; flex-direction:column}
figure{margin:0}
figcaption{font-size:.78rem; color:var(--muted); letter-spacing:.08em; margin-top:9px}

/* ---------- facts table ---------- */
.facts{border-top:1px solid var(--line); margin-top:6px}
.fact{display:grid; grid-template-columns:150px 1fr; gap:20px; padding:15px 0; border-bottom:1px solid var(--line)}
.fact dt{font-size:.82rem; letter-spacing:.13em; color:var(--gold)}
.fact dd{margin:0; font-size:.99rem}

/* ---------- gallery ---------- */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:12px; margin-top:8px}
.gal a{display:block; position:relative; overflow:hidden; background:#ded5c5; aspect-ratio:4/3}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .55s ease, filter .35s}
.gal a:hover img{transform:scale(1.055)}
.gal a.tall{grid-row:span 2; aspect-ratio:3/4}
@media(max-width:640px){.gal a.tall{grid-row:span 1; aspect-ratio:4/3}}
.gal .cap{
  position:absolute; inset:auto 0 0 0; padding:22px 12px 9px; font-size:.76rem; letter-spacing:.1em;
  color:#fff; background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  opacity:0; transition:opacity .3s;
}
.gal a:hover .cap{opacity:1}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:10px}
.card{
  border:1px solid var(--line); background:var(--paper); padding:30px 28px;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.card .fill{flex:1}
.card > .btn, .card > a.btn{margin-top:auto; align-self:flex-start}
.card h3{margin:0 0 6px; font-size:1.08rem; letter-spacing:.06em}
.card .hint{font-size:.86rem; color:var(--muted); margin-bottom:18px}
.btn{
  display:inline-block; padding:11px 24px; border:1px solid var(--red); color:var(--red);
  font-size:.9rem; letter-spacing:.1em; border-radius:2px; transition:.22s; font-family:inherit;
}
.btn:hover{background:var(--red); color:#fff; text-decoration:none}
.btn.solid{background:var(--red); color:#fff}
.btn.solid:hover{background:#6f231a}

form{margin-top:6px}
label{display:block; font-size:.78rem; letter-spacing:.11em; color:var(--gold); margin:14px 0 6px}
input,textarea,select{
  width:100%; padding:10px 12px; border:1px solid var(--line); background:#fff;
  font-family:inherit; font-size:.94rem; color:var(--ink); border-radius:2px;
}
textarea{resize:vertical; min-height:96px}
input:focus,textarea:focus{outline:none; border-color:var(--gold)}

/* ---------- footer ---------- */
footer{background:#211d19; color:#c9bfae; padding:52px 0 34px; font-size:.86rem}
footer .wrap{display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px}
footer h4{margin:0 0 12px; font-size:.82rem; letter-spacing:.16em; color:var(--gold)}
footer a{color:#c9bfae}
footer a:hover{color:#fff}
footer .fnote{margin-top:34px; padding-top:20px; border-top:1px solid #3a342c; font-size:.76rem; color:#8d8272; line-height:1.9}
@media(max-width:760px){
  footer .wrap{grid-template-columns:1fr; gap:26px}
  .grid2,.contact-grid{grid-template-columns:1fr}
  nav.mainnav{display:none}
  .step{grid-template-columns:1fr; gap:6px; padding:24px 0}
  .step .yr{border-right:none; padding:0}
  section{padding:52px 0}
}