*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd,dt{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg,video{display:block;max-width:100%}
img{height:auto}
:root{
--ink:#0B1B2B;
--panel:#13293D;
--line:#1E3A52;
--gold:#E0A33E;
--gold-soft:#F2C979;
--cinnabar:#C8412F;
--celadon:#4F8F7B;
--paper:#F4F1E8;
--grey:#A9B4C0;
--void:#050D14;
--font-head:"Oswald","Arial Narrow","Helvetica Neue Condensed","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
--font-body:"JetBrains Mono","SFMono-Regular","Cascadia Mono",Consolas,"Noto Sans Mono CJK SC",Menlo,"PingFang SC","Microsoft YaHei",monospace;
--fs-display:132px;
--fs-xl:64px;
--fs-lg:32px;
--fs-md:18px;
--fs-sm:14px;
--fs-label:13px;
--shell-max:1360px;
--gut:24px;
--ease:cubic-bezier(.2,.7,.2,1);
--dur:240ms;
}
@media (max-width:900px){
:root{--fs-display:64px;--fs-xl:32px;--fs-lg:24px;--fs-md:16px;--gut:16px}
}
@media (max-width:560px){
:root{--fs-display:46px;--fs-xl:28px;--fs-lg:21px}
}
/* ---------- 基础台面 ---------- */
body{
min-height:100vh;
background:var(--ink);
color:var(--paper);
font-family:var(--font-body);
font-size:var(--fs-md);
line-height:1.75;
letter-spacing:.01em;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
body::before{
content:"";
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
background-image:
linear-gradient(rgba(30,58,82,.6) 1px,transparent 1px),
linear-gradient(90deg,rgba(30,58,82,.6) 1px,transparent 1px);
background-size:80px 80px;
opacity:.4;
}
main,.site-foot{position:relative;z-index:1}
#main-content{scroll-margin-top:96px}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--paper)}
h1{font-size:var(--fs-xl)}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-md);letter-spacing:0;line-height:1.4}
p{max-width:68ch}
.display{font-family:var(--font-head);font-weight:700;font-size:var(--fs-display);line-height:.94;letter-spacing:-.03em}
.lede{font-size:var(--fs-md);color:var(--grey);line-height:1.85}
.num{font-family:var(--font-head);font-weight:700;font-size:1.6em;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--gold)}
.text-gold{color:var(--gold)}
.text-cinnabar{color:var(--cinnabar)}
.text-celadon{color:var(--celadon)}
.text-grey{color:var(--grey)}
/* ---------- 布局 ---------- */
.shell{width:min(var(--shell-max),calc(100% - var(--gut) * 2));margin-inline:auto}
.section{padding-block:clamp(48px,7vw,110px)}
.section-head{
display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;
padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:32px;
}
.section-index{display:block;font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.2em;color:var(--cinnabar);margin-bottom:10px}
.eyebrow{display:block;font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
@media (max-width:1000px){.grid-12{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:600px){.grid-12{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rule-hr{height:1px;background:var(--line);border:0;margin-block:26px}
/* ---------- 档案卡组件 ---------- */
.panel{background:var(--panel);border:1px solid var(--line)}
.index-card{
background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
padding:18px 20px;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.index-card:hover{background:#16304a;border-left-color:var(--gold-soft)}
.stamp{
display:inline-flex;align-items:center;gap:8px;padding:3px 9px;
border:1px solid var(--cinnabar);color:var(--cinnabar);
font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.16em;line-height:1.4;
}
.tag{
display:inline-flex;align-items:center;padding:3px 10px;
border:1px solid var(--celadon);color:var(--celadon);
font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.12em;line-height:1.4;
}
.note-hand{border-left:2px dashed var(--gold);padding-left:14px;color:var(--grey);line-height:1.9}
.bracket-frame{position:relative;border:1px solid var(--line);padding:clamp(20px,4vw,48px)}
.bracket-frame::before,.bracket-frame::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gold)}
.bracket-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.bracket-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
/* ---------- 数据与时间轴 ---------- */
.data-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.data-row{display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr);gap:16px;background:var(--ink);padding:14px 18px}
.data-row dt{font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.14em;color:var(--grey)}
.data-row dd{margin:0;color:var(--paper)}
@media (max-width:600px){.data-row{grid-template-columns:1fr;gap:4px}}
.timeline{position:relative;display:grid;gap:26px;padding-left:28px}
.timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.timeline-item{position:relative}
.timeline-item::before{
content:"";position:absolute;left:-28px;top:9px;width:11px;height:11px;
background:var(--ink);border:1px solid var(--gold);
transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.timeline-item[data-active]::before{background:var(--gold-soft);border-color:var(--gold-soft)}
/* ---------- 图片容器（页面阶段放占位图） ---------- */
.media-frame{
position:relative;display:block;width:100%;aspect-ratio:16 / 9;overflow:hidden;
background:var(--panel);border:1px solid var(--line);
}
.media-frame > img{width:100%;height:100%;object-fit:cover}
.media-frame--tall{aspect-ratio:3 / 4}
.media-frame--wide{aspect-ratio:21 / 9}
.media-frame::after{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(244,241,232,.06) 1px,transparent 1px);
background-size:100% 44px;
}
/* ---------- 面包屑与按钮 ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--fs-sm);letter-spacing:.06em;color:var(--grey);margin-bottom:22px}
.crumb a{color:var(--grey);border-bottom:1px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.crumb a:hover{color:var(--gold-soft);border-bottom-color:var(--gold-soft)}
.crumb-sep{color:var(--line)}
.crumb [aria-current="page"]{color:var(--paper)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:12px 22px;border:1px solid var(--line);background:transparent;color:var(--paper);
font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.16em;line-height:1;
transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{border-color:var(--gold);color:var(--gold-soft)}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--void)}
.btn-primary:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--void)}
.btn-ghost{background:transparent}
.btn-sm{padding:8px 14px;font-size:12px}
@media (max-width:480px){.btn{padding:11px 16px;letter-spacing:.1em}}
/* ---------- 动效协议 ---------- */
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js [data-reveal].is-shown{opacity:1;transform:none}
.js [data-reveal][data-delay="1"]{transition-delay:80ms}
.js [data-reveal][data-delay="2"]{transition-delay:160ms}
.js [data-reveal][data-delay="3"]{transition-delay:240ms}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
/* ---------- 跳转条 ---------- */
.skip-link{
position:fixed;left:16px;top:-80px;z-index:140;
background:var(--gold);color:var(--void);
padding:10px 16px;font-family:var(--font-head);font-size:var(--fs-sm);letter-spacing:.1em;
transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:12px}
/* ---------- 页头 ---------- */
.site-head{
position:fixed;inset-inline:0;top:0;z-index:80;color:var(--paper);
background:linear-gradient(180deg,rgba(5,13,20,.88),rgba(5,13,20,0));
border-bottom:1px solid transparent;
transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.site-head[data-scrolled]{background:rgba(11,27,43,.96);border-bottom-color:var(--line)}
.head-grid{
width:min(1440px,calc(100% - 40px));margin-inline:auto;
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;
padding-block:20px;
transition:padding var(--dur) var(--ease);
}
.site-head[data-scrolled] .head-grid{padding-block:12px}
.brand-mark{display:grid;gap:3px;min-width:0}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:.06em;line-height:1.1;transition:color var(--dur) var(--ease)}
.brand-mark:hover .brand-name{color:var(--gold-soft)}
.brand-sub{font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.18em;color:var(--grey);line-height:1.4}
.head-version{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--fs-label);letter-spacing:.06em;color:var(--grey)}
.version-dot{flex:none;width:7px;height:7px;background:var(--cinnabar);box-shadow:0 0 0 3px rgba(200,65,47,.18)}
.version-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.site-head[data-scrolled] .version-text{color:var(--paper)}
.site-nav{grid-column:3;justify-self:end;display:flex;align-items:center;gap:22px}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-list a{
position:relative;display:inline-block;padding:8px 12px;
font-family:var(--font-head);font-size:var(--fs-sm);letter-spacing:.1em;line-height:1.2;color:var(--grey);
transition:color var(--dur) var(--ease);
}
.nav-list a::after{
content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--gold);
transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease);
}
.nav-list a:hover{color:var(--paper)}
.nav-list a:hover::after{transform:scaleX(1)}
.nav-list a[aria-current="page"]{color:var(--gold)}
.nav-list a[aria-current="page"]::after{transform:scaleX(1);background:var(--cinnabar)}
.nav-meta,.nav-foot{display:none}
.nav-toggle{
display:none;grid-column:2;justify-self:end;align-items:center;gap:10px;
padding:10px 14px;border:1px solid var(--line);color:var(--paper);
font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.16em;line-height:1;
transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-toggle:hover{border-color:var(--gold);color:var(--gold-soft)}
.nav-toggle-bars{position:relative;width:18px;height:1px;background:var(--gold)}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;width:18px;height:1px;background:var(--gold)}
.nav-toggle-bars::before{top:-5px}
.nav-toggle-bars::after{top:5px}
.head-current{
display:none;width:min(1440px,calc(100% - 40px));margin-inline:auto;
gap:10px;align-items:baseline;padding-bottom:8px;
font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.16em;color:var(--grey);
}
.site-head[data-scrolled] .head-current{display:flex}
.current-value{color:var(--gold)}
.current-label{color:var(--grey)}
.head-rule{height:1px;width:100%;background:var(--line);opacity:0;transition:opacity var(--dur) var(--ease)}
.site-head[data-scrolled] .head-rule{opacity:1}
.rule-track{display:block;width:100%;height:100%;position:relative}
.rule-fill{display:block;width:0;height:100%;background:var(--gold);transition:width 120ms linear}
.nav-scrim{
position:fixed;inset:0;z-index:70;background:rgba(5,13,20,.74);
opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);
}
.nav-scrim[data-open]{opacity:1;pointer-events:auto}
@media (max-width:1040px){
.head-grid{grid-template-columns:minmax(0,1fr) auto;gap:14px;padding-block:14px}
.head-version{grid-column:1 / -1;order:3;font-size:12px;white-space:normal}
.version-text{white-space:normal}
.nav-toggle{display:inline-flex}
.site-nav{
position:fixed;top:0;right:0;bottom:0;z-index:90;
width:min(380px,88vw);justify-self:stretch;
display:flex;flex-direction:column;align-items:stretch;gap:0;
background:var(--void);border-left:1px solid var(--line);
padding:92px 24px 32px;overflow-y:auto;
transform:translateX(101%);transition:transform var(--dur) var(--ease);
}
.site-nav[data-open]{transform:translateX(0)}
.nav-list{flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line)}
.nav-list li{border-bottom:1px solid var(--line)}
.nav-list a{padding:15px 4px;font-family:var(--font-body);font-size:var(--fs-md);letter-spacing:.06em;color:var(--paper)}
.nav-list a::after{display:none}
.nav-list a[aria-current="page"]{color:var(--gold)}
.nav-meta{display:block;margin-top:22px;font-size:var(--fs-sm);color:var(--grey);line-height:1.8}
.nav-foot{display:block;margin-top:22px}
.nav-foot .btn{width:100%}
.head-current{display:none !important}
}
html[data-nav-open]{overflow:hidden}
/* ---------- 页脚 ---------- */
.site-foot{
margin-top:clamp(56px,9vw,130px);
background:var(--void);color:var(--grey);
border-top:1px solid var(--gold);
font-size:var(--fs-sm);line-height:1.75;
}
.foot-inner{
display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:32px;
padding-block:56px 44px;
}
.foot-brand-name{font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:.06em;color:var(--paper);line-height:1.2}
.foot-brand-sub{font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.18em;color:var(--gold);margin-top:8px}
.foot-note{margin-top:14px;max-width:36ch;color:var(--grey);font-size:var(--fs-sm)}
.foot-label{font-family:var(--font-head);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--celadon);margin-bottom:14px}
.foot-list{display:grid;gap:10px}
.foot-list a{color:var(--paper);transition:color var(--dur) var(--ease)}
.foot-list a:hover{color:var(--gold-soft);text-decoration:underline;text-underline-offset:4px}
.foot-line{margin-bottom:8px;color:var(--paper);max-width:34ch}
.foot-key{display:inline-block;min-width:5.4em;color:var(--celadon);font-family:var(--font-head);font-size:var(--fs-label);letter-spacing:.12em}
.foot-meta{
display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
padding-block:18px 26px;border-top:1px solid var(--line);
font-size:12px;letter-spacing:.06em;
}
.foot-meta-left{margin:0;color:var(--grey);max-width:70ch}
.foot-meta-right{margin:0;color:var(--grey);text-align:right}
@media (max-width:1024px){
.foot-inner{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:600px){
.foot-inner{grid-template-columns:1fr;padding-block:40px 30px}
.foot-meta{flex-direction:column}
.foot-meta-right{text-align:left}
}
/* ---------- 降级动效 ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
transition-delay:0ms !important;
}
.js [data-reveal]{opacity:1;transform:none}
}