/* ============================================================
   HETIANXIA 和天下槟榔 — Design System v2.0 (production)
   - 单一样式入口，无框架、无外部字体、无外部请求
   - 首页专属样式见 /assets/css/home.css（按需加载）
   ============================================================ */
:root{
  --ink:#1a1712;
  --ink-2:#2e2620;
  --ink-soft:#4a4238;
  --paper:#f7f3ec;
  --paper-2:#faf8f4;
  --paper-deep:#efe8da;
  --line:#e2d9c7;
  --line-dark:#3a332b;
  --green:#2f4a2e;
  --green-deep:#1e3320;
  --fruit:#5a7247;
  --wood:#8c6a48;
  --gold:#b9975f;
  --gold-soft:#cbb78f;
  --stone:#8a8175;
  --max:1200px;
  --max-narrow:720px;
  --serif:"Songti SC","SimSun","Noto Serif SC","Source Han Serif SC","STZhongsong",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.21,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--paper-2);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.85;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--green);color:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a.underline,.prose a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.wrap-narrow{max-width:var(--max-narrow);margin:0 auto;padding:0 clamp(20px,4vw,32px)}
.hairline{height:1px;background:var(--line);border:0}
/* ---------- type ---------- */
.eyebrow{
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--wood);font-weight:600;margin:0 0 18px;
}
.eyebrow .num{color:var(--gold);margin-right:12px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.28;letter-spacing:.01em;margin:0}
.display{font-size:clamp(42px,7.2vw,92px);line-height:1.08;letter-spacing:.02em}
.h2{font-size:clamp(30px,4vw,52px);line-height:1.25}
.h3{font-size:clamp(22px,2.6vw,30px)}
.lede{font-size:clamp(17px,2vw,21px);line-height:1.9;color:var(--ink-soft)}
.prose{font-size:17px;line-height:1.95;color:#2c2822}
.prose p{margin:0 0 1.4em;max-width:68ch}
.prose h2{margin:2.2em 0 .7em;font-size:30px}
.prose h3{margin:1.8em 0 .6em;font-size:22px}
.vertical-note{writing-mode:vertical-rl;letter-spacing:.5em;font-family:var(--serif);color:var(--stone);font-size:13px}
/* ---------- accessibility ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1360px;margin:0 auto;padding:0 clamp(18px,3vw,36px)}
.brand{display:flex;align-items:baseline;gap:12px}
.brand .cn{font-family:var(--serif);font-size:22px;letter-spacing:.28em;font-weight:700}
.brand .en{font-size:11px;letter-spacing:.42em;color:var(--stone);font-weight:600}
.site-header.solid,.site-header:hover{background:rgba(250,248,244,.92);backdrop-filter:blur(14px);border-color:var(--line)}
.site-header.on-dark:not(.solid){color:#f5efe3}
.site-header.on-dark:not(.solid) .en{color:rgba(245,239,227,.7)}
.nav-desktop{display:flex;gap:30px;font-size:14px;letter-spacing:.12em}
.nav-desktop a{position:relative;padding:6px 0;color:inherit;opacity:.86}
.nav-desktop a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .35s var(--ease)}
.nav-desktop a:hover::after{width:100%}
.nav-cta{font-size:13px;letter-spacing:.2em;border:1px solid currentColor;padding:10px 22px;border-radius:999px}
.burger{display:none;background:none;border:0;color:inherit;font-size:26px;line-height:1;cursor:pointer}
.mobile-nav{display:none;position:fixed;inset:72px 0 auto 0;background:var(--paper-2);border-bottom:1px solid var(--line);padding:18px 24px 28px;z-index:49}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:19px}
@media(max-width:960px){.nav-desktop,.nav-cta{display:none}.burger{display:block}}
/* ---------- sections (inner pages + shared) ---------- */
.chapter{padding:clamp(84px,10vw,148px) 0;position:relative}
.chapter-alt{background:var(--paper)}
.chapter-dark{background:#161310;color:#ece4d3}
.chapter-dark .lede,.chapter-dark .prose{color:rgba(236,228,211,.78)}
.chapter-dark .eyebrow{color:var(--gold-soft)}
.chapter-head{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px);margin-bottom:clamp(36px,5vw,64px)}
.chapter-head .rule{width:100%;height:1px;background:var(--line);margin:26px 0 0}
.chapter-dark .chapter-head .rule{background:rgba(236,228,211,.18)}
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
/* manifesto */
.manifesto-big{font-family:var(--serif);font-size:clamp(26px,3.6vw,42px);line-height:1.65;max-width:22em}
.manifesto-big em{font-style:normal;border-bottom:1px solid var(--gold);padding-bottom:2px}
/* figure */
.fig{margin:0}
.fig .frame{overflow:hidden;background:var(--paper-deep);position:relative}
.fig img,.fig svg.art{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.fig:hover img{transform:scale(1.03)}
.fig figcaption{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;letter-spacing:.12em;color:var(--stone);padding:12px 2px 0}
.ratio-43{aspect-ratio:4/3}.ratio-34{aspect-ratio:3/4}.ratio-169{aspect-ratio:16/9}.ratio-11{aspect-ratio:1/1}
/* steps */
.steps{counter-reset:step;display:grid;gap:0;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:88px 1fr 1fr;gap:clamp(18px,3vw,40px);padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
.step .n{font-family:var(--serif);font-size:15px;letter-spacing:.2em;color:var(--gold)}
.step h2{font-size:24px;margin:0 0 10px}
.step p{margin:0;color:var(--ink-soft);font-size:15.5px;max-width:52ch}
.step .tag{display:inline-block;font-size:12px;letter-spacing:.24em;color:var(--green);border:1px solid var(--line);padding:6px 14px;border-radius:999px;margin-bottom:14px;background:#fff}
@media(max-width:820px){.step{grid-template-columns:1fr}.step .n{margin-bottom:-8px}}
/* cards — editorial, not bootstrap */
.entry-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px)}
@media(max-width:900px){.entry-list{grid-template-columns:1fr}}
.entry{border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:12px}
.entry .cat{font-size:11.5px;letter-spacing:.3em;color:var(--wood);font-weight:700}
.entry h2{font-size:21px;line-height:1.5}
.entry p{font-size:14.5px;color:var(--ink-soft);line-height:1.8;margin:0}
.entry .meta{font-size:12px;color:var(--stone);letter-spacing:.08em;margin-top:auto;padding-top:8px}
/* quote */
.pull{font-family:var(--serif);font-size:clamp(24px,3vw,36px);line-height:1.6;text-align:center;max-width:26em;margin:0 auto}
.pull small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.3em;color:var(--stone);margin-top:18px}
/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:24px 4px;font-family:var(--serif);font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{color:var(--gold);font-family:var(--sans)}
.faq .a{padding:0 4px 28px;color:var(--ink-soft);font-size:15.5px;max-width:70ch}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.26em;font-weight:600;padding:16px 34px;border:1px solid var(--ink);border-radius:999px;transition:all .35s var(--ease);background:transparent;color:var(--ink)}
.btn:hover{background:var(--ink);color:var(--paper-2)}
.btn-light{border-color:rgba(236,228,211,.5);color:#ece4d3}
.btn-light:hover{background:#ece4d3;color:#161310}
.btn .arr{font-weight:400}
/* footer */
.footer{background:#131109;color:#d9cfb9;padding:clamp(64px,8vw,100px) 0 0;font-size:14.5px}
.footer-grid{max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,48px);display:grid;grid-template-columns:1.3fr 2fr;gap:48px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .cn{font-family:var(--serif);font-size:34px;letter-spacing:.3em;color:#f2ead8}
.footer-brand .en{letter-spacing:.42em;font-size:11px;color:#8f8571;margin-top:8px}
.footer-brand p{color:rgba(217,207,185,.72);max-width:38ch;line-height:1.9}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:640px){.footer-cols{grid-template-columns:repeat(2,1fr)}}
.footer-cols .fcol-h{font-size:11px;letter-spacing:.32em;color:#8f8571;margin:0 0 16px;font-family:var(--sans)}
.footer-cols a{display:block;padding:6px 0;color:rgba(217,207,185,.85)}
.footer-cols a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(217,207,185,.15);margin-top:56px;padding:22px clamp(20px,4vw,48px);display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:12px;color:#8f8571;max-width:1360px;margin-left:auto;margin-right:auto}
/* breadcrumb */
.crumbs{font-size:12.5px;letter-spacing:.14em;color:var(--stone);padding:110px 0 0;margin-bottom:18px}
.crumbs a:hover{color:var(--ink)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li+li::before{content:"／";margin-right:8px;color:var(--line)}
.page-hero{padding:10px 0 46px}
.page-hero h1{font-size:clamp(36px,5.4vw,64px);max-width:16em}
.page-hero .lede{max-width:60ch;margin-top:18px}
/* toc + related */
.toc{border:1px solid var(--line);background:#fff;padding:24px 28px;margin:30px 0}
.toc h2{font-size:15px;letter-spacing:.24em;font-family:var(--sans);margin:0 0 12px}
.toc ol{margin:0;padding-left:20px;color:var(--ink-soft);font-size:15px}
.related{margin-top:64px;border-top:2px solid var(--ink);padding-top:26px}
.related h2{font-size:24px;margin:0 0 18px}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.related li{border-bottom:1px solid var(--line)}
.related a{display:flex;justify-content:space-between;gap:16px;padding:16px 4px;font-family:var(--serif);font-size:17px}
.related a span:last-child{color:var(--gold);font-family:var(--sans)}
.source-box{margin-top:44px;background:var(--paper);border:1px solid var(--line);padding:22px 26px;font-size:13.5px;color:var(--ink-soft)}
.source-box h2{font-size:13px;letter-spacing:.28em;font-family:var(--sans);margin:0 0 10px;color:var(--wood)}
/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
/* search */
.search-box{display:flex;gap:10px;margin:22px 0 30px}
.search-box input{flex:1;font-size:16px;padding:15px 20px;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:var(--sans)}
.search-box button{padding:15px 30px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;letter-spacing:.2em;font-size:13px;cursor:pointer}
#searchResults{display:grid;gap:0;border-top:1px solid var(--line)}
#searchResults a{display:block;padding:18px 4px;border-bottom:1px solid var(--line)}
#searchResults a b{font-family:var(--serif);font-size:18px;display:block}
#searchResults a small{color:var(--stone);letter-spacing:.1em}
/* compliance */
.notice{border-left:3px solid var(--gold);background:#fffdf6;padding:18px 22px;font-size:14px;color:var(--ink-soft);margin:26px 0;line-height:1.85}
/* map */
.origin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.origin-grid{grid-template-columns:1fr}}
.origin-card{border:1px solid var(--line);background:#fff;padding:28px}
.origin-card h2{font-size:22px;margin:0 0 6px}
.origin-card .py{font-size:11px;letter-spacing:.34em;color:var(--wood);font-weight:700}
.origin-card p{font-size:14.5px;color:var(--ink-soft)}
.origin-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px;margin:16px 0 0}
.origin-card dt{color:var(--stone)}.origin-card dd{margin:0}
/* ---------- utilities (replaces inline styles) ---------- */
.u-mt24{margin-top:24px}.u-mt26{margin-top:26px}.u-mt28{margin-top:28px}.u-mt30{margin-top:30px}.u-mt34{margin-top:34px}.u-mt18{margin-top:18px}.u-mt40{margin-top:40px}
.narrow-820{max-width:820px}
.pad-b30{padding-bottom:30px}
.foot-note{margin-top:18px}
.foot-sub{font-size:12px;letter-spacing:.2em;color:#8f8571}
.search-hint{color:var(--stone);padding:18px 4px}
.search-count{color:var(--stone);font-size:13px;letter-spacing:.1em}
.err-wrap{padding-top:150px;padding-bottom:90px;max-width:760px}
.err-title{font-size:clamp(40px,6vw,72px);max-width:12em}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-line{border-color:var(--line)}
/* skip */
.skip{position:absolute;left:-999px;background:var(--ink);color:#fff;padding:10px 18px;z-index:99}
.skip:focus{left:10px;top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}