/* ============ 1. 重置 ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

/* ============ 2. 变量 ============ */
:root{
  --green:#8CC63F;
  --black:#1A1A1A;
  --orange:#F7931E;
  --brown:#6B4F2A;
  --mist:#F2F2F2;
  --paper:#FFFFFF;
  --ring:#C8E6A0;
  --ink-green:#4C7A1E;
  --graphite:#3C3C3C;
  --orange-soft:#FFD9A8;
  --hair:rgba(26,26,26,.16);
  --hair-inv:rgba(242,242,242,.2);
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1240px;
  --gutter:20px;
  --gap:48px;
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ============ 3. 基础排版 ============ */
body{
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.75;
  color:var(--black);
  background:var(--paper);
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{line-height:1.15;font-weight:900;letter-spacing:-.01em}
strong{font-weight:700}
::selection{background:var(--green);color:var(--black)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ============ 4. 工具类 ============ */
.wrap{width:min(var(--wrap),calc(100% - var(--gutter) - var(--gutter)));margin-inline:auto}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.label{display:inline-block;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--brown);padding-bottom:4px;border-bottom:1px solid var(--brown)}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brown)}
.divider{height:1px;background:var(--hair);border:0;margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dot{display:inline-block;width:8px;height:8px;flex:0 0 auto}
.dot--orange{background:var(--orange)}
.dot--green{background:var(--green)}

/* 滚动显现（协议：data-reveal / data-reveal-delay / .is-visible） */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js [data-reveal].is-visible{opacity:1;transform:none}
.js [data-reveal="wipe"]{transform:none;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease)}
.js [data-reveal="wipe"].is-visible{clip-path:inset(0 0 0 0)}

/* ============ 5. 跳转链接 ============ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--black);color:var(--green);padding:12px 20px;font-size:15px;font-weight:700;letter-spacing:.08em}
.skip-link:focus{left:0}

/* ============ 6. 页头 ============ */
.site-header{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--black)}
.header-bar{display:flex;align-items:stretch;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:72px;padding:0 24px 0 16px;background:var(--black);color:var(--paper)}
.brand-mark{width:28px;height:28px;flex:0 0 auto;background:var(--green);display:grid;place-items:center}
.brand-mark::before{
  content:"";width:20px;height:20px;border-radius:50%;border:2px solid var(--paper);
  background:
    radial-gradient(circle,var(--paper) 0 2px,var(--black) 2px 4px,transparent 4px),
    repeating-conic-gradient(from 0deg,var(--black) 0deg 4deg,var(--ring) 4deg 36deg);
}
.brand-name{font-size:17px;font-weight:900;letter-spacing:.06em;white-space:nowrap}

.nav-toggle{display:none;align-items:center;gap:10px;align-self:center;background:var(--black);color:var(--paper);padding:11px 14px;font-size:13px;letter-spacing:.16em}
.nav-toggle__icon{display:flex;flex-direction:column;gap:4px}
.nav-toggle__bar{width:18px;height:2px;background:var(--green);transition:background .18s var(--ease),width .18s var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{background:var(--orange)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child,
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{width:12px}
.nav-toggle__label{font-weight:700}

.site-nav{display:flex;align-items:center}
.nav-list{display:flex;align-items:center;gap:4px;counter-reset:nav}
.nav-item{counter-increment:nav}
.nav-link{position:relative;display:inline-flex;align-items:baseline;gap:7px;padding:10px 12px;font-size:15px;letter-spacing:.08em;color:var(--graphite);transition:color .18s var(--ease)}
.nav-link::before{content:counter(nav,decimal-leading-zero);font-family:var(--font-mono);font-size:11px;letter-spacing:0;color:var(--brown)}
.nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left center;transition:transform .2s var(--ease)}
.nav-link:hover{color:var(--black)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{color:var(--black);font-weight:700}
.nav-link[aria-current="page"]::after{transform:scaleX(1);background:var(--orange)}

.tablet-strip{background:var(--green);border-top:1px solid var(--black)}
.tablet-strip__link{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding:8px 0;color:var(--black);transition:opacity .18s var(--ease)}
.tablet-strip__label{font-size:15px;font-weight:900;letter-spacing:.12em}
.tablet-strip__hint{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;color:rgba(26,26,26,.72)}
.tablet-strip__link:hover .tablet-strip__hint{text-decoration:underline}

/* ============ 7. 页脚 ============ */
.site-footer{background:var(--black);color:var(--mist);border-top:1px solid var(--black)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:40px;padding:56px 0 44px}
.footer-col{min-width:0}
.footer-col--brand{border-right:1px solid var(--hair-inv);padding-right:32px}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.footer-brand__name{font-size:17px;font-weight:900;letter-spacing:.06em;color:var(--paper)}
.footer-claim{font-size:15px;line-height:1.7;color:var(--mist);max-width:24em}
.footer-icp{margin-top:16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:rgba(242,242,242,.55)}
.footer-title{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:16px}
.footer-list{display:grid;gap:10px}
.footer-link{display:inline-block;font-size:15px;color:var(--mist);border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease)}
.footer-link:hover{color:var(--green);border-bottom-color:var(--green)}
.footer-link--cta{margin-top:16px;color:var(--green);border-bottom-color:var(--green)}
.footer-contact{display:grid;gap:2px}
.footer-contact__term{font-size:12px;letter-spacing:.18em;color:var(--green);margin-top:12px}
.footer-contact__term:first-child{margin-top:0}
.footer-contact__value{font-size:15px;line-height:1.6;color:var(--mist);word-break:break-word}
.footer-note{margin-top:12px;font-size:13px;line-height:1.6;color:rgba(242,242,242,.6)}
.footer-base{border-top:1px solid var(--hair-inv)}
.footer-base__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.footer-base__mark{width:18px;height:18px;flex:0 0 auto;border-radius:50%;border:1px solid var(--green);background:repeating-conic-gradient(from 0deg,var(--black) 0deg 5deg,var(--green) 5deg 36deg)}
.footer-base__copy{font-size:13px;letter-spacing:.04em;color:rgba(242,242,242,.7)}

/* ============ 8. 面板与章节 ============ */
.stack{display:grid;gap:var(--gap)}
.panel{position:relative;background:var(--paper);border:1px solid var(--black);padding:32px}
.panel--dark{background:var(--black);color:var(--mist)}
.panel--mist{background:var(--mist)}
.panel--green{background:var(--green);color:var(--black)}
.panel--w84{width:84%;margin-left:auto}
.panel--w68{width:68%;margin-left:auto}
.panel--flush{padding:0}
.panel-title{font-size:clamp(24px,3vw,32px);font-weight:900;line-height:1.2;margin:12px 0}
.panel-text{font-size:17px;color:var(--graphite);max-width:60ch}
.panel--dark .panel-text{color:rgba(242,242,242,.78)}
.section{padding:64px 0}
.section-head{display:grid;gap:12px;margin-bottom:32px}
.section-title{font-size:clamp(28px,4vw,40px);font-weight:900;line-height:1.15}
.section-lead{font-size:17px;color:var(--graphite);max-width:58ch}

/* ============ 9. 网格 ============ */
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--split{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}

/* ============ 10. 按钮 ============ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;font-size:15px;font-weight:700;letter-spacing:.08em;border:1px solid var(--black);background:var(--paper);color:var(--black);transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn--primary{background:var(--green);border-color:var(--green);color:var(--black)}
.btn--primary:hover{background:var(--ring)}
.btn--dark{background:var(--black);border-color:var(--black);color:var(--paper)}
.btn--dark:hover{background:#000}
.btn--orange{background:var(--orange);border-color:var(--orange);color:var(--black)}
.btn--orange:hover{background:var(--orange-soft)}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:var(--mist)}
.btn--block{width:100%;justify-content:center}

/* ============ 11. 面包屑 ============ */
.breadcrumb{padding:20px 0 0}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;color:var(--graphite)}
.breadcrumb__item{display:inline-flex;align-items:center;gap:8px}
.breadcrumb__item + .breadcrumb__item::before{content:"/";font-family:var(--font-mono);color:var(--brown)}
.breadcrumb__link{color:var(--graphite);border-bottom:1px solid transparent}
.breadcrumb__link:hover{color:var(--black);border-bottom-color:var(--green)}
.breadcrumb__current{color:var(--black);font-weight:700}

/* ============ 12. 正文容器 ============ */
.prose{max-width:72ch}
.prose h2{font-size:clamp(24px,3vw,32px);margin:40px 0 16px}
.prose h3{font-size:20px;margin:32px 0 12px}
.prose p{margin:0 0 18px;color:var(--graphite)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--graphite)}
.prose ul{list-style:square}
.prose ol{list-style:decimal}
.prose li{margin-bottom:8px}
.prose a{color:var(--ink-green);border-bottom:1px solid var(--green)}

/* ============ 13. 数据与时间线 ============ */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--hair);border:1px solid var(--black)}
.stat{background:var(--paper);padding:20px}
.panel--dark .stat{background:var(--black)}
.stat__value{font-family:var(--font-mono);font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.05}
.stat__value--orange{color:var(--orange)}
.stat__label{margin-top:8px;font-size:13px;letter-spacing:.14em;color:var(--brown)}
.panel--dark .stat__label{color:var(--ring)}

.timeline{margin-left:8px;border-left:1px solid var(--hair)}
.timeline__item{position:relative;padding:0 0 32px 28px}
.timeline__marker{position:absolute;left:-5px;top:8px;width:9px;height:9px;background:var(--green)}
.timeline__item[data-state="current"] .timeline__marker{left:-6px;width:11px;height:11px;background:var(--orange)}
.timeline__date{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;color:var(--brown)}
.timeline__body{margin-top:6px;color:var(--graphite)}

/* ============ 14. 可展开内容组 ============ */
.expand{border:1px solid var(--black);border-left-width:3px;border-left-color:var(--hair);background:var(--paper)}
.expand + .expand{margin-top:-1px}
.expand[data-open]{border-left-color:var(--green);background:var(--mist)}
.expand__trigger{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:18px 22px;text-align:left}
.expand__title{font-size:17px;font-weight:700;line-height:1.5}
.expand__sign{position:relative;width:14px;height:14px;flex:0 0 auto}
.expand__sign::before,.expand__sign::after{content:"";position:absolute;background:var(--black)}
.expand__sign::before{left:0;top:6px;width:14px;height:2px}
.expand__sign::after{left:6px;top:0;width:2px;height:14px}
.expand[data-open] .expand__sign::after{display:none}
.expand__panel{padding:0 22px 20px;border-top:1px solid var(--hair)}
.expand__inner{max-width:70ch;padding-top:16px;font-size:16px;color:var(--graphite)}

/* ============ 15. 筛选标签 ============ */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font-size:14px;letter-spacing:.08em;border:1px solid var(--black);background:var(--paper);color:var(--black);transition:background .18s var(--ease),border-color .18s var(--ease)}
.chip:hover{background:var(--mist)}
.chip[aria-pressed="true"],.chip--active{background:var(--green);border-color:var(--green);font-weight:700}

/* ============ 16. 图片容器 ============ */
.media{position:relative;display:block;overflow:hidden;background:var(--mist);border:1px solid var(--black)}
.media__img{width:100%;height:100%;object-fit:cover}
.media--21x9{aspect-ratio:21/9}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media--tall{aspect-ratio:3/4}
.media__caption{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}

/* ============ 17. 表格与提示条 ============ */
.data-table{width:100%;border-collapse:collapse;font-size:15px}
.data-table th,.data-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--hair)}
.data-table thead th{font-size:12px;letter-spacing:.16em;color:var(--brown);border-bottom:1px solid var(--black)}
.data-table--striped tbody tr:nth-child(even){background:var(--mist)}
.callout{border-left:3px solid var(--green);background:var(--mist);padding:18px 22px;font-size:16px;color:var(--graphite)}
.callout--orange{border-left-color:var(--orange);background:var(--orange-soft);color:var(--black)}

/* ============ 18. 响应式 ============ */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-col--brand{grid-column:1 / -1;border-right:0;padding-right:0}
}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .site-nav{position:absolute;left:0;right:0;top:100%;display:none;background:var(--paper);border-top:1px solid var(--black);border-bottom:1px solid var(--black);box-shadow:0 18px 30px rgba(26,26,26,.14)}
  .site-nav[data-open]{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-link{display:flex;align-items:baseline;gap:12px;padding:16px 22px;font-size:16px;border-bottom:1px solid var(--hair);border-left:3px solid transparent}
  .nav-link::after{display:none}
  .nav-link:hover,.nav-link[aria-current="page"]{background:var(--mist);border-left-color:var(--green)}
  .nav-link[aria-current="page"]{border-left-color:var(--orange)}
  .grid--3,.grid--4,.grid--split{grid-template-columns:1fr}
  .panel--w84,.panel--w68{width:100%}
  .section{padding:48px 0}
}
@media (max-width:640px){
  :root{--gutter:16px;--gap:32px}
  body{font-size:16px;line-height:1.7}
  .brand{min-height:60px;padding:0 16px 0 12px}
  .header-bar{min-height:60px;gap:12px}
  .brand-mark{width:24px;height:24px}
  .brand-mark::before{width:16px;height:16px;border-width:1px}
  .brand-name{font-size:15px}
  .tablet-strip__link{min-height:36px;gap:10px}
  .tablet-strip__label{font-size:13px;letter-spacing:.08em}
  .tablet-strip__hint{font-size:12px;letter-spacing:.06em}
  .grid--2{grid-template-columns:1fr}
  .panel{padding:22px}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr;padding:40px 0 32px}
  .footer-base__inner{flex-wrap:wrap}
}

/* ============ 19. 减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
  .js [data-reveal]{opacity:1;transform:none;clip-path:none}
}