/* =========================================================
   STAKE — /assets/site.css
   共享层：tokens · reset · 中文排版 · 头部 · 页脚 · 基础组件
   页面专属布局请在各自 CSS 中覆盖 main 的 padding 与章节网格
   ========================================================= */

/* ---------- 0. tokens ---------- */
:root{
  --void:#050A14;
  --deep:#0B1524;
  --panel:#152238;
  --white:#F2F5F8;
  --titanium:#9AA8BC;
  --line:#4A5A72;
  --orange:#FF5A1F;
  --orange-soft:#FF8A5C;
  --cyan:#35E8D0;
  --amber:#FFC24A;

  --rail:180px;
  --gutter:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-editorial:Georgia,"Songti SC","Times New Roman",serif;
  --font-num:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Courier New",monospace;
}

/* ---------- 1. reset ---------- */
*,
*::before,
*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  padding-right:var(--rail);
  min-height:100vh;
  background:var(--void);
  color:var(--white);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.nav-locked{overflow:hidden;}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img,svg,video{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;}
button{cursor:pointer;}
a{color:inherit;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.04;
  letter-spacing:-.035em;
  color:var(--white);
}

::selection{background:var(--orange);color:var(--void);}

:focus{outline:none;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

/* ---------- 2. 版式与容器 ---------- */
main{
  display:block;
  padding-top:clamp(70px,7vw,96px);
}

.wrap{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding-inline:var(--gutter);
}

.section{padding-block:clamp(52px,6.5vw,104px);}

.section__head{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:clamp(26px,3.4vw,52px);
}

.section__index{
  font-family:var(--font-num);
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}

.section__title{
  margin:0;
  font-size:clamp(28px,4.2vw,56px);
}

.section__lede{
  max-width:62ch;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.75;
  color:var(--titanium);
}

.rule{
  height:1px;
  border:0;
  background:var(--line);
}

.band{
  background:var(--deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.band--accent{
  background:var(--orange);
  color:var(--void);
  border-color:var(--orange);
}

.band--accent .section__title,
.band--accent .section__lede,
.band--accent .section__index{color:var(--void);}

.grid{
  display:grid;
  gap:clamp(16px,2vw,32px);
}

.grid--12{grid-template-columns:repeat(12,minmax(0,1fr));}

.span-2{grid-column:span 2;}
.span-3{grid-column:span 3;}
.span-4{grid-column:span 4;}
.span-5{grid-column:span 5;}
.span-6{grid-column:span 6;}
.span-7{grid-column:span 7;}
.span-8{grid-column:span 8;}
.span-9{grid-column:span 9;}
.span-10{grid-column:span 10;}
.span-12{grid-column:span 12;}

/* ---------- 3. 跳过链接 ---------- */
.skip-link{
  position:absolute;
  top:-120px;
  left:var(--gutter);
  z-index:120;
  padding:12px 20px;
  background:var(--orange);
  color:var(--void);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  transition:top .16s var(--ease);
}
.skip-link:focus{top:14px;}

/* ---------- 4. 头部外壳 ---------- */
.site-header{
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
}
.site-header > *{pointer-events:auto;}

/* 品牌 */
.brand{
  position:absolute;
  top:22px;
  left:var(--gutter);
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 44px 12px 0;
  text-decoration:none;
  background:linear-gradient(90deg,var(--void) 0%,var(--void) 68%,rgba(5,10,20,0) 100%);
}

.brand__word{
  position:relative;
  padding-bottom:9px;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--white);
}

.brand__word::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:30px;
  height:3px;
  background:var(--orange);
  transition:width .16s var(--ease);
}

.brand:hover .brand__word::after,
.brand:focus-visible .brand__word::after{width:100%;}

.brand__sub{
  font-size:11.5px;
  line-height:1.4;
  letter-spacing:.1em;
  color:var(--titanium);
}

/* 移动端开合按钮 */
.nav-toggle{
  position:absolute;
  top:14px;
  right:var(--gutter);
  z-index:4;
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border:1px solid var(--line);
  background:var(--void);
  color:var(--white);
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  transition:border-color .14s var(--ease),color .14s var(--ease);
}

.nav-toggle:hover{border-color:var(--orange);color:var(--orange);}

.nav-toggle__box{
  position:relative;
  display:block;
  width:16px;
  height:10px;
}

.nav-toggle__box span{
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background:currentColor;
  transition:transform .16s var(--ease),top .16s var(--ease);
}

.nav-toggle__box span:nth-child(1){top:0;}
.nav-toggle__box span:nth-child(2){top:9px;}

.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1){
  top:4px;
  transform:rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2){
  top:4px;
  transform:rotate(-45deg);
}

.nav-toggle__text{line-height:1;}

/* 右侧竖列导航（桌面端） */
.site-nav{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  z-index:2;
  width:var(--rail);
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:96px 20px 24px;
  border-left:1px solid var(--line);
  background:var(--deep);
  overflow-y:auto;
  overscroll-behavior:contain;
}

.site-nav__caption{
  font-family:var(--font-num);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--titanium);
}

.site-nav__list{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.site-nav__link{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 10px 9px 12px;
  border-left:1px solid transparent;
  color:var(--titanium);
  font-size:15px;
  line-height:1.4;
  text-decoration:none;
  transition:color .14s var(--ease),
             background-color .14s var(--ease),
             border-color .14s var(--ease);
}

.site-nav__index{
  font-family:var(--font-num);
  font-size:11px;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  opacity:.72;
}

.site-nav__label{font-weight:600;letter-spacing:.02em;}

.site-nav__link:hover{
  color:var(--white);
  border-left-color:var(--orange-soft);
  background:rgba(255,90,31,.1);
}

.site-nav__link[aria-current="page"]{
  color:var(--void);
  background:var(--orange);
  border-left-color:var(--orange-soft);
}

.site-nav__link[aria-current="page"] .site-nav__index{opacity:1;}
.site-nav__link[aria-current="page"] .site-nav__label{font-weight:800;}

/* 竖列底部工具区 */
.site-nav__utility{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.utility-line{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.utility-line__k{
  font-size:11px;
  letter-spacing:.16em;
  color:var(--titanium);
}

.utility-line__v{
  font-family:var(--font-num);
  font-size:12.5px;
  letter-spacing:-.01em;
  color:var(--white);
}

.utility-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:6px 0;
  border-bottom:1px dashed var(--line);
  text-align:left;
  transition:border-color .14s var(--ease);
}

.utility-copy:hover{border-bottom-color:var(--orange-soft);}

.utility-copy__label{
  font-size:11px;
  letter-spacing:.16em;
  color:var(--titanium);
  transition:color .14s var(--ease);
}

.utility-copy__value{
  font-family:var(--font-num);
  font-size:11.5px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--titanium);
  word-break:break-all;
  transition:color .14s var(--ease);
}

.utility-copy:hover .utility-copy__label,
.utility-copy:hover .utility-copy__value{color:var(--orange-soft);}

.utility-copy[data-copied="true"] .utility-copy__value{color:var(--cyan);}
.utility-copy[data-copied="true"] .utility-copy__label::after{
  content:" · 已复制";
  color:var(--cyan);
}

.utility-note{
  font-size:11px;
  line-height:1.6;
  color:var(--titanium);
}

.site-nav__cta{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:auto;
  padding-top:14px;
}

.site-nav__cta .btn{
  width:100%;
  justify-content:center;
  padding:11px 12px;
  font-size:12.5px;
  letter-spacing:.02em;
}

/* 滚动进度条 */
.readout{
  position:fixed;
  top:0;
  left:0;
  right:var(--rail);
  height:2px;
  z-index:80;
  pointer-events:none;
  background:rgba(74,90,114,.4);
}

.readout__bar{
  display:block;
  width:100%;
  height:100%;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:0 50%;
  will-change:transform;
}

/* ---------- 5. 页脚 ---------- */
.site-footer{
  margin-top:clamp(72px,9vw,140px);
  padding:clamp(44px,5.5vw,76px) var(--gutter) 30px;
  background:var(--deep);
  border-top:1px solid var(--line);
}

.footer__inner{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:34px 28px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}

.footer__brand{
  grid-column:1 / -1;
  display:flex;
  align-items:baseline;
  gap:16px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}

.footer__word{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,44px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--white);
}

.footer__mark{
  font-family:var(--font-num);
  font-size:12px;
  letter-spacing:.24em;
  color:var(--titanium);
}

.footer__col{display:flex;flex-direction:column;}
.footer__col--index{grid-column:span 4;}
.footer__col--legal{grid-column:span 2;}
.footer__col--contact{grid-column:span 6;}

.footer__caption{
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-num);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--titanium);
}

.footer__nav ul,
.footer__legal{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer__link{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
  color:var(--titanium);
  font-size:14px;
  line-height:1.6;
  text-decoration:none;
  transition:color .14s var(--ease);
}

.footer__link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--orange);
  transition:width .16s var(--ease);
}

.footer__link:hover{color:var(--white);}
.footer__link:hover::after{width:100%;}
.footer__link[aria-current="page"]{color:var(--orange);}

.footer__contact{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footer__contact-row{display:flex;flex-direction:column;gap:3px;}

.footer__contact dt{
  font-size:11px;
  letter-spacing:.16em;
  color:var(--titanium);
}

.footer__value{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}

.footer__note{
  max-width:58ch;
  margin-top:18px;
  padding-left:14px;
  border-left:2px solid var(--line);
  font-size:13px;
  line-height:1.75;
  color:var(--titanium);
}

.footer__base{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 28px;
  margin-top:12px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--titanium);
}

.footer__copy,
.footer__icp{font-family:var(--font-num);}

/* ---------- 6. 通用组件 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  border:1px solid transparent;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.2;
  text-decoration:none;
  transition:background-color .14s var(--ease),
             color .14s var(--ease),
             border-color .14s var(--ease);
}

.btn--primary{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--void);
}
.btn--primary:hover{background:var(--orange-soft);border-color:var(--orange-soft);}

.btn--ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--white);
}
.btn--ghost:hover{border-color:var(--orange);color:var(--orange);}

.text-link{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
  color:var(--white);
  text-decoration:none;
  transition:color .14s var(--ease);
}
.text-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--orange);
  transition:width .16s var(--ease);
}
.text-link:hover{color:var(--orange);}
.text-link:hover::after{width:100%;}

.stat{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.stat__value{
  font-family:var(--font-display);
  font-size:clamp(38px,5.6vw,84px);
  font-weight:900;
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}

.stat__unit{
  font-family:var(--font-editorial);
  font-size:14px;
  letter-spacing:.06em;
  color:var(--orange);
}

.stat__label{
  font-size:13px;
  letter-spacing:.08em;
  color:var(--titanium);
}

.panel{
  padding:clamp(18px,2.2vw,28px);
  background:var(--panel);
  border:1px solid var(--line);
}

.panel__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-num);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--titanium);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border:1px solid var(--line);
  font-size:12px;
  letter-spacing:.08em;
  line-height:1.5;
  color:var(--titanium);
}

.tag--live{border-color:var(--cyan);color:var(--cyan);}
.tag--warn{border-color:var(--amber);color:var(--amber);}
.tag--accent{border-color:var(--orange);color:var(--orange);}

.breadcrumb{padding-top:clamp(8px,2vw,24px);}

.breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-family:var(--font-num);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--titanium);
}

.breadcrumb__list li + li::before{
  content:"/";
  margin-right:8px;
  color:var(--line);
}

.breadcrumb__list a{
  color:var(--titanium);
  text-decoration:none;
  transition:color .14s var(--ease);
}
.breadcrumb__list a:hover{color:var(--orange);}

/* 媒体容器：供页面阶段放图，均支持局部裁切放大 */
.media{
  position:relative;
  overflow:hidden;
  background:var(--deep);
  border:1px solid var(--line);
}

.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 > img,
.media > video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.media__cap{
  margin-top:10px;
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--titanium);
}

/* ---------- 7. 工具类 ---------- */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* 章节显现：仅在 JS 可用时启用，无 JS 默认可见 */
.js-reveal [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.js-reveal [data-reveal][data-revealed="true"]{
  opacity:1;
  transform:none;
}

/* ---------- 8. 响应式 ---------- */
@media (max-width:1023px){
  body{padding-right:0;}

  .readout{right:0;}

  .brand{
    top:12px;
    padding:10px 40px 10px 0;
  }
  .brand__word{font-size:19px;}
  .brand__sub{display:none;}

  .nav-toggle{display:flex;}

  .site-nav{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    padding:84px var(--gutter) 40px;
    gap:22px;
    border-left:0;
    border-top:1px solid var(--line);
    background:var(--void);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .18s var(--ease),
               transform .18s var(--ease),
               visibility .18s var(--ease);
  }

  .site-nav[data-open="true"]{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .site-nav__link{
    padding:14px 14px 14px 16px;
    border-left-width:2px;
    font-size:21px;
  }

  .site-nav__index{font-size:12px;}

  .site-nav__utility{
    margin-top:4px;
    gap:10px;
  }

  .utility-line__k,
  .utility-copy__label{font-size:12px;}

  .utility-line__v{font-size:14px;}
  .utility-copy__value{font-size:13px;}
  .utility-note{font-size:12px;}

  .site-nav__cta{padding-top:0;}
  .site-nav__cta .btn{font-size:14px;padding:13px 18px;}

  /* 网格折算 */
  .span-2,.span-3,.span-4,.span-5{grid-column:span 6;}
  .span-7,.span-8,.span-9,.span-10{grid-column:span 12;}

  .footer__col--index{grid-column:span 6;}
  .footer__col--legal{grid-column:span 6;}
  .footer__col--contact{grid-column:span 12;}
}

@media (max-width:640px){
  body{font-size:16px;}

  .span-2,.span-3,.span-4,.span-5,
  .span-6,.span-7,.span-8,.span-9,
  .span-10{grid-column:span 12;}

  .footer__col--index,
  .footer__col--legal,
  .footer__col--contact{grid-column:span 12;}

  .footer__base{flex-direction:column;align-items:flex-start;}
}

/* ---------- 9. 无障碍与动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .js-reveal [data-reveal],
  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
  }

  .readout__bar{transition:none !important;}
}

@media print{
  .site-header,
  .site-footer,
  .readout{display:none !important;}
  body{padding-right:0;background:#fff;color:#000;}
}