@charset "UTF-8";
/* 样式 · 基础层 */

/* 1. 设计令牌 */
:root{
  /* 藏蓝主色：深→浅，用于深色区块与标题 */
  --navy-900:#061629; --navy-800:#0A2342; --navy-700:#0F3460; --navy-600:#16467F;
  /* 流金辅色：协会标识色，用于强调、线条、悬停 */
  --gold-600:#B08A2E; --gold-500:#C9A44C; --gold-300:#E3C878; --gold-100:#F4E9CE;
  /* 米白底：暖白，比纯白更适合长文阅读 */
  --cream-50:#FBFAF7; --cream-100:#F4F2EB;
  /* 文字层级 */
  --ink-900:#121A26; --ink-700:#33404F; --ink-500:#5E6B7C; --ink-400:#8C95A3;
  /* 分割线 */
  --line-200:#E6E3D9; --line-100:#F0EEE8;
  --white:#fff;
  /* 状态色（错误/成功，全站统一） */
  --danger:#C2453D; --danger-line:#D45A50; --danger-bg:#FFF9F8;
  
  --ok:#1E7E46; --ok-line:#27AE60; --ok-bg:#F4FBF6;

  /* 流式尺寸：所有间距随视口连续变化，避免断点跳变 */
  --pad:clamp(18px,4.5vw,34px);
  --gap-s:clamp(12px,1.6vw,18px);
  --gap-m:clamp(18px,2.4vw,28px);
  --gap-l:clamp(28px,3.6vw,52px);
  --sec-y:clamp(54px,6.6vw,108px);

  /* 圆角 */
  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:28px;
  /* 阴影：1 静置 / 2 悬停 / 3 浮层 */
  --sh-1:0 2px 10px rgba(10,35,66,.05);
  --sh-2:0 12px 34px rgba(10,35,66,.09);
  --sh-3:0 26px 60px rgba(6,22,41,.18);

  --sans:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Helvetica Neue",Arial,sans-serif;

  --hdr-h:86px;          /* 站头高度；JS 会按滚动状态改写为 70px */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* 2. 重置 */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--sans);font-size:16px;line-height:1.75;color:var(--ink-900);
  background:var(--cream-50);overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
img{height:auto;background:var(--cream-100)}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-100);color:var(--navy-800)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sr-only:focus,.sr-only:focus-visible{
  position:fixed;left:14px;top:14px;z-index:999;width:auto;height:auto;clip:auto;overflow:visible;
  padding:9px 15px;background:var(--navy-700);color:#fff;font-size:14px;border-radius:6px;box-shadow:var(--sh-2);
}

/* 3. 排版 */
h1,h2,h3,h4,h5,h6{line-height:1.35;font-weight:700;letter-spacing:.01em;color:var(--navy-700)}
p{overflow-wrap:break-word}
strong{font-weight:600}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.prose{font-size:clamp(15px,1.06vw,16.5px);line-height:1.95;color:var(--ink-700)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(19px,1.7vw,24px);margin-top:1.8em}
.prose h3{font-size:clamp(16.5px,1.35vw,19px);margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.35em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li+li{margin-top:.45em}
.prose a{color:var(--navy-600);border-bottom:1px solid rgba(22,70,127,.3)}
.prose a:hover{color:var(--gold-600);border-color:var(--gold-500)}
.prose img{border-radius:var(--r-m);margin-block:1.4em}

@media (max-width:768px){
  .prose img[style*="float"]{
    float:none!important;display:block!important;
    width:auto!important;max-width:100%!important;
    margin:14px auto!important;
  }
}
.prose blockquote{
  border-left:3px solid var(--gold-500);padding:4px 0 4px 18px;
  color:var(--ink-500);background:var(--cream-100);
}
.prose table{font-size:14.5px;margin-block:1.4em}
.prose th,.prose td{border:1px solid var(--line-200);padding:10px 13px;text-align:left}
.prose th{background:var(--cream-100);color:var(--navy-700);font-weight:600}

/* 4. 容器与栅格工具 */
.wrap{width:min(1320px,calc(100% - var(--pad)*2));margin-inline:auto}
.wrap-narrow{width:min(1000px,calc(100% - var(--pad)*2));margin-inline:auto}
/* 锚点定位预留固定头部高度（脚本未生效时也不会被头部盖住） */
section[id],footer[id]{scroll-margin-top:calc(var(--hdr-h) + 12px)}

.grid{display:grid;gap:var(--gap-m)}
.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-5{grid-template-columns:repeat(5,minmax(0,1fr))}

.grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}

.grid-2 > :only-child{grid-column:1/-1}

.grid--start{align-items:start}
@media (max-width:1180px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:minmax(0,1fr)}
}

.sec{padding:var(--sec-y) 0}
.sec--white{background:#fff;border-block:1px solid var(--line-100)}
.sec--cream{background:var(--cream-100);border-block:1px solid var(--line-200)}
.sec--navy{background:var(--navy-900);color:#fff}
.sec--tight{padding:clamp(38px,4.4vw,66px) 0}

/* 5. 无障碍与降级 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
@media print{
  .hdr,.topbar,.quick,#toTop,.drawer,.mask,.pagehero{display:none!important}
  body{background:#fff}
}

/* —— 大屏：容器加宽 —— */
@media (min-width:1600px){
  .wrap{width:min(1420px,calc(100% - var(--pad)*2))}
}
/* —— 手机：收紧全局节奏 —— */
@media (max-width:768px){
  :root{--pad:17px;--hdr-h:66px;--sec-y:clamp(46px,9vw,66px)}
}