/* =============================================================
   OBO 体育官网 · 共享样式表
   路径：/assets/site.css
   材质：夜光蓝球场底层 + 奶油纸面阅读层
   信号：红土红推进 / 荧光青数据 / 奖杯金荣誉 / 青训薄荷
   ============================================================= */

/* ---------- 0. 设计变量 ---------- */
:root{
  --abyss:#060E17;
  --night:#0C1B2A;
  --panel:#12293E;

  --clay:#C2452A;
  --clay-hi:#D9532F;
  --cyan:#2FE0C8;
  --gold:#E2A93B;
  --mint:#7FD3A6;

  --cream:#F3EBDE;
  --cream-hi:#FBF6EC;
  --cream-2:#E7DCC9;
  --brown:#231A13;
  --brown-2:#5A4636;
  --slate:#8FA6BB;
  --line:#24384C;
  --line-soft:rgba(36,56,76,.55);
  --line-cream:rgba(35,26,19,.14);

  --f-display:"Archivo Narrow","Oswald","Arial Narrow",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --f-body:"Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --f-mono:"IBM Plex Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell:1240px;
  --gutter:clamp(1.15rem,4.2vw,3.25rem);
  --header-h:72px;
  --radius:2px;

  --shadow-dark:0 1px 0 rgba(47,224,200,.05),0 18px 36px -26px rgba(0,0,0,.95);
  --shadow-paper:0 1px 0 rgba(35,26,19,.05),0 18px 34px -26px rgba(35,26,19,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:1081px){ :root{ --header-h:82px; } }

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
}
body,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg,video,canvas{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
table{border-collapse:collapse;width:100%;}
input,textarea,select{font:inherit;color:inherit;}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
::selection{background:var(--clay);color:var(--cream);}
hr{border:0;height:1px;background:var(--line);margin:0;}

/* ---------- 2. 基础排版 ---------- */
body{
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.8;
  color:var(--slate);
  background:var(--night);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.08;
  color:var(--cream);
  text-wrap:balance;
}
h1{font-size:clamp(2.2rem,5vw,4rem);}
h2{font-size:clamp(1.65rem,3.2vw,2.5rem);}
h3{font-size:clamp(1.15rem,2vw,1.5rem);}
h4{font-size:1.05rem;letter-spacing:.01em;}
p{max-width:66ch;}
a{transition:color .2s var(--ease),border-color .2s var(--ease);}
b,strong{font-weight:700;color:var(--cream);}

.num,.mono,[data-num]{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- 3. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:.55rem;left:.55rem;
  z-index:200;
  padding:.7rem 1.1rem;
  background:var(--cyan);
  color:var(--abyss);
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  border-radius:var(--radius);
  transform:translateY(-160%);
  transition:transform .22s var(--ease);
}
.skip-link:focus{transform:translateY(0);}

/* ---------- 4. 内容容器 ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
#main-content{padding-top:var(--header-h);}
#main-content.is-bleed{padding-top:0;}

/* ---------- 5. 头部 ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.site-header.is-solid{
  background:rgba(6,14,23,.93);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom-color:var(--line);
}
.site-header__inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:clamp(.9rem,2.6vw,2.4rem);
}

.scroll-progress{
  position:fixed;
  top:0;left:0;
  width:100%;
  height:2px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--clay),var(--gold) 45%,var(--cyan));
  pointer-events:none;
  z-index:120;
}

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  flex:0 0 auto;
  color:var(--cream);
}
.brand__glyph{
  width:34px;height:34px;
  flex:0 0 auto;
  color:var(--clay);
  transition:color .3s var(--ease),transform .5s var(--ease);
}
.brand:hover .brand__glyph{color:var(--cyan);transform:rotate(-8deg);}
.brand__text{display:flex;flex-direction:column;line-height:1;}
.brand__name{
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.32rem;
  letter-spacing:.05em;
  color:var(--cream);
}
.brand__sub{
  margin-top:.32rem;
  font-family:var(--f-mono);
  font-size:.6rem;
  letter-spacing:.26em;
  color:var(--slate);
}

/* 导航 */
.nav{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  justify-content:center;
}
.nav__list{
  display:flex;
  align-items:center;
  gap:clamp(.5rem,1.7vw,1.55rem);
}
.nav__link{
  position:relative;
  display:inline-block;
  padding:.45rem .12rem;
  font-family:var(--f-display);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.035em;
  color:var(--slate);
  white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;
  left:.12rem;right:.12rem;bottom:.02rem;
  height:2px;
  background:var(--clay);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s var(--ease),background-color .2s var(--ease);
}
.nav__link:hover{color:var(--cream);}
.nav__link:hover::after{transform:scaleX(1);}
.nav__link[aria-current="page"]{color:var(--cream);}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--cyan);}

/* 头部数据快照 */
.header-hud{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.85rem;
}
.hud{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.36rem .68rem;
  border:1px solid var(--line);
  background:rgba(12,27,42,.6);
  border-radius:var(--radius);
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--slate);
  white-space:nowrap;
}
.hud__pip{
  width:6px;height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(47,224,200,.15);
  animation:pip 2.6s ease-in-out infinite;
}
@keyframes pip{0%,100%{opacity:1}50%{opacity:.32}}
.hud__k{color:var(--slate);}
.hud__v{color:var(--cyan);font-weight:600;}

/* 汉堡按钮 */
.nav-toggle{
  display:none;
  position:relative;
  width:44px;height:44px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--cream);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan);}
.nav-toggle__bars{
  position:absolute;
  top:50%;left:50%;
  width:18px;height:2px;
  margin:-1px 0 0 -9px;
  background:currentColor;
  transition:background-color .2s var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;height:2px;
  background:currentColor;
  transition:transform .28s var(--ease),top .28s var(--ease);
}
.nav-toggle__bars::before{top:-6px;}
.nav-toggle__bars::after{top:6px;}
.site-header[data-open="true"] .nav-toggle__bars{background:transparent;}
.site-header[data-open="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg);}
.site-header[data-open="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg);}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.82rem 1.5rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:transparent;
  color:var(--cream);
  font-family:var(--f-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.05em;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px);}
.btn--primary{background:var(--clay);border-color:var(--clay);color:#fff;}
.btn--primary:hover{background:var(--clay-hi);border-color:var(--clay-hi);color:#fff;}
.btn--gold{border-color:rgba(226,169,59,.6);color:var(--gold);}
.btn--gold:hover{background:var(--gold);border-color:var(--gold);color:var(--brown);}
.btn--ghost{border-color:var(--line-soft);color:var(--slate);}
.btn--ghost:hover{color:var(--cyan);border-color:var(--cyan);}
.btn--sm{padding:.5rem .95rem;font-size:.8rem;letter-spacing:.04em;}

/* ---------- 7. 章节 ---------- */
.section{
  position:relative;
  padding-block:clamp(3.5rem,8vw,7rem);
}
.section--cream{
  background:var(--cream);
  color:var(--brown-2);
}
.section--cream::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(35,26,19,.035) 0 1px,transparent 1px 5px);
}
.section--deep{background:var(--abyss);}
.section--cream h1,
.section--cream h2,
.section--cream h3,
.section--cream h4{color:var(--brown);}
.section--cream b,
.section--cream strong{color:var(--brown);}

.section__head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1rem clamp(1.25rem,3.5vw,2.75rem);
  align-items:start;
  margin-bottom:clamp(1.9rem,4vw,3.25rem);
}
.section__num{
  font-family:var(--f-display);
  font-size:clamp(3.2rem,7vw,6rem);
  font-weight:800;
  line-height:.82;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px var(--line);
  user-select:none;
}
@supports not (-webkit-text-stroke:1px red){
  .section__num{color:var(--line);}
}
.section--cream .section__num{-webkit-text-stroke:1px var(--line-cream);}
@supports not (-webkit-text-stroke:1px red){
  .section--cream .section__num{color:var(--line-cream);}
}
.section__title{font-size:clamp(1.65rem,3.4vw,2.5rem);}
.section__lede{
  margin-top:.9rem;
  font-size:1rem;
  line-height:1.85;
  max-width:62ch;
}
@media (max-width:640px){
  .section__head{grid-template-columns:1fr;gap:.85rem;}
  .section__num{font-size:3.2rem;}
}

/* ---------- 8. 数据面板 ---------- */
.panel{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,41,62,.62),rgba(6,14,23,.6));
  box-shadow:var(--shadow-dark);
  overflow:hidden;
}
.panel__bar{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.62rem 1rem;
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
}
.panel__dot{
  width:6px;height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--cyan);
  animation:pip 2.6s ease-in-out infinite;
}
.panel__bar span:last-child{margin-left:auto;color:var(--cyan);}

.data-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
}
.data-cell{
  padding:1.05rem 1rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.data-cell__k{
  display:block;
  margin-bottom:.55rem;
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--slate);
}
.data-cell__v{
  display:block;
  font-family:var(--f-mono);
  font-size:clamp(1.25rem,2.6vw,1.8rem);
  line-height:1;
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--cyan);
}

/* 奶油底面板反转 */
.section--cream .panel{
  background:var(--cream-hi);
  border-color:var(--line-cream);
  box-shadow:var(--shadow-paper);
}
.section--cream .panel__bar{
  border-bottom-color:var(--line-cream);
  color:var(--brown-2);
}
.section--cream .panel__bar span:last-child{color:var(--clay);}
.section--cream .panel__dot{background:var(--clay);animation:none;}
.section--cream .data-cell{border-color:var(--line-cream);}
.section--cream .data-cell__k{color:var(--brown-2);}
.section--cream .data-cell__v{color:var(--clay);}

/* ---------- 9. 斜切卡片 ---------- */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.5rem 1.4rem 1.3rem;
  border:1px solid var(--line);
  background:rgba(12,27,42,.55);
  border-radius:var(--radius);
  clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease),clip-path .35s var(--ease);
}
.card:hover{
  border-color:var(--cyan);
  background:rgba(18,41,62,.82);
  transform:translateY(-3px);
  clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px);
}
.card__title{margin:.85rem 0 .5rem;font-size:1.15rem;}
.card__text{font-size:.9rem;line-height:1.8;color:var(--slate);max-width:42ch;}
.card__foot{
  margin-top:auto;
  padding-top:1.1rem;
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--slate);
}

/* ---------- 10. 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.2rem .6rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--f-mono);
  font-size:.64rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--slate);
}
.tag--clay{color:var(--clay);border-color:rgba(194,69,42,.45);background:rgba(194,69,42,.1);}
.tag--gold{color:var(--gold);border-color:rgba(226,169,59,.45);background:rgba(226,169,59,.1);}
.tag--mint{color:var(--mint);border-color:rgba(127,211,166,.45);background:rgba(127,211,166,.1);}
.tag--cyan{color:var(--cyan);border-color:rgba(47,224,200,.45);background:rgba(47,224,200,.1);}

/* ---------- 11. 长文与图 ---------- */
.prose{max-width:68ch;}
.prose p{margin-bottom:1.2em;}
.prose h2{margin:2.3em 0 .7em;}
.prose h3{margin:1.9em 0 .55em;}
.prose li{
  position:relative;
  padding-left:1.35rem;
  margin-bottom:.6em;
}
.prose li::before{
  content:"";
  position:absolute;
  left:0;top:.82em;
  width:8px;height:1px;
  background:var(--clay);
}
.prose a{
  color:var(--clay);
  border-bottom:1px solid currentColor;
}
.prose a:hover{color:var(--clay-hi);}

.figure{margin:0;}
.figure__media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(135deg,rgba(194,69,42,.16),transparent 58%),
    repeating-linear-gradient(115deg,rgba(47,224,200,.06) 0 2px,transparent 2px 10px),
    var(--panel);
}
.figure__media img{
  width:100%;height:100%;
  object-fit:cover;
}
.figure--wide .figure__media{aspect-ratio:21/9;}
.figure--tall .figure__media{aspect-ratio:3/4;}
.figure--square .figure__media{aspect-ratio:1/1;}
.figure__cap{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  margin-top:.75rem;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.07em;
  color:var(--slate);
}
.figure__cap::before{
  content:"";
  width:16px;height:1px;
  flex:0 0 auto;
  background:var(--clay);
  transform:translateY(-3px);
}
.section--cream .figure__media{border-color:var(--line-cream);}
.section--cream .figure__cap{color:var(--brown-2);}

/* ---------- 12. 指标 ---------- */
.stat{display:flex;flex-direction:column;gap:.4rem;}
.stat__value{
  font-family:var(--f-mono);
  font-size:clamp(1.8rem,4vw,2.9rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--cream);
}
.stat__label{
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--slate);
}
.section--cream .stat__value{color:var(--brown);}
.section--cream .stat__label{color:var(--brown-2);}

/* ---------- 13. 跑道时间线 ---------- */
.track{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1.75rem;
  padding-left:1.75rem;
}
.track::before{
  content:"";
  position:absolute;
  left:4px;top:.6em;bottom:.6em;
  width:1px;
  background:var(--line);
}
.track__node{position:relative;}
.track__node::before{
  content:"";
  position:absolute;
  left:calc(-1.75rem + 4px);
  top:.65em;
  width:9px;height:9px;
  margin-left:-4px;
  background:var(--night);
  border:1px solid var(--clay);
  transform:rotate(45deg);
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.track__node:hover::before{background:var(--cyan);border-color:var(--cyan);}
.section--cream .track::before{background:var(--line-cream);}
.section--cream .track__node::before{background:var(--cream);}

/* ---------- 14. 面包屑 ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  padding-block:.9rem;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.07em;
  color:var(--slate);
}
.breadcrumb__link{
  color:var(--slate);
  border-bottom:1px solid transparent;
}
.breadcrumb__link:hover{color:var(--cyan);border-bottom-color:var(--cyan);}
.breadcrumb__sep{color:var(--line);}
.breadcrumb [aria-current="page"]{color:var(--cream);}

/* ---------- 15. 筛选 ---------- */
.filter{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
}
.filter__input{
  flex:1 1 220px;
  min-width:0;
  padding:.7rem .9rem;
  background:rgba(6,14,23,.6);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--cream);
  font-family:var(--f-mono);
  font-size:.85rem;
  letter-spacing:.03em;
  transition:border-color .2s var(--ease);
}
.filter__input::placeholder{color:rgba(143,166,187,.6);}
.filter__input:focus{border-color:var(--cyan);}
.filter__clear{
  padding:.55rem 1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--slate);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.filter__clear:hover{color:var(--cyan);border-color:var(--cyan);}
.filter__count{
  font-family:var(--f-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--slate);
}
.filter__count b,
.filter__count [data-filter-count]{color:var(--cyan);font-weight:600;}
.section--cream .filter__input{
  background:#fff;
  border-color:var(--line-cream);
  color:var(--brown);
}
.section--cream .filter__count{color:var(--brown-2);}

/* ---------- 16. 手风琴 ---------- */
.accordion{border-top:1px solid var(--line);}
.accordion__item{border-bottom:1px solid var(--line);}
.accordion__btn{
  display:flex;
  align-items:center;
  gap:1rem;
  width:100%;
  padding:1.1rem 0;
  text-align:left;
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.01em;
  color:var(--cream);
  transition:color .2s var(--ease);
}
.accordion__btn:hover{color:var(--cyan);}
.accordion__btn::after{
  content:"";
  margin-left:auto;
  flex:0 0 auto;
  width:9px;height:9px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .3s var(--ease);
}
.accordion__btn[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px);}
.accordion__panel{
  overflow:hidden;
  height:0;
  transition:height .34s var(--ease);
}
.accordion__panel > div{
  padding-bottom:1.35rem;
  max-width:66ch;
  font-size:.94rem;
  line-height:1.85;
  color:var(--slate);
}
.section--cream .accordion,
.section--cream .accordion__item{border-color:var(--line-cream);}
.section--cream .accordion__btn{color:var(--brown);}
.section--cream .accordion__panel > div{color:var(--brown-2);}

/* ---------- 17. 首屏基础 ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--night);
}

/* ---------- 18. 滚动显现 ---------- */
html.js .reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--d,0ms);
}
html.js .reveal.is-in{
  opacity:1;
  transform:none;
}

/* ---------- 19. 页脚 ---------- */
.site-footer{
  position:relative;
  background:var(--abyss);
  color:var(--slate);
  border-top:1px solid var(--line);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--clay) 22%,var(--cyan) 50%,var(--gold) 78%,transparent);
  opacity:.55;
}
.site-footer__inner{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding:clamp(2.75rem,6vw,4.5rem) var(--gutter) 1.5rem;
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1.55fr 1fr 1.15fr 1fr;
  gap:clamp(1.75rem,4vw,3.25rem);
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--line);
}
.f-col{min-width:0;}
.f-title{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:1.15rem;
  font-family:var(--f-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--slate);
}
.f-title::before{
  content:"";
  width:14px;height:1px;
  flex:0 0 auto;
  background:var(--clay);
}

.f-brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:1rem;
}
.f-brand__glyph{
  width:30px;height:30px;
  flex:0 0 auto;
  color:var(--clay);
}
.f-brand__name{
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.2rem;
  letter-spacing:.04em;
  color:var(--cream);
}
.f-lead{
  font-size:.9rem;
  line-height:1.8;
  color:var(--slate);
  max-width:34ch;
}

.f-snap{
  margin-top:1.35rem;
  border-top:1px solid var(--line);
}
.f-snap__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--line);
}
.f-snap__row dt{
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--slate);
}
.f-snap__row dd{
  font-family:var(--f-mono);
  font-size:.85rem;
  font-variant-numeric:tabular-nums;
  color:var(--cyan);
}

.f-list{
  display:flex;
  flex-direction:column;
  gap:.66rem;
}
.f-link{
  position:relative;
  display:inline-block;
  font-size:.9rem;
  color:var(--slate);
  transition:color .2s var(--ease),padding-left .24s var(--ease);
}
.f-link::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:0;height:1px;
  background:var(--clay);
  transition:width .24s var(--ease);
}
.f-link:hover{color:var(--cream);padding-left:14px;}
.f-link:hover::before{width:9px;}

.f-text{
  font-size:.9rem;
  line-height:1.85;
  color:var(--slate);
  max-width:36ch;
}
.f-text b{color:var(--cream);font-weight:600;}
.f-text--addr{margin-top:.8rem;}
.f-meta{
  margin-top:1.15rem;
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--slate);
}

.site-footer__base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem 1.5rem;
  padding-top:1.4rem;
}
.f-base__note{
  font-size:.78rem;
  line-height:1.7;
  color:var(--slate);
  max-width:52ch;
}
.f-base__legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.1rem;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--slate);
}
.f-base__legal a{
  color:var(--slate);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}
.f-base__legal a:hover{color:var(--cyan);border-bottom-color:var(--cyan);}

/* ---------- 20. 响应式 ---------- */
@media (max-width:1240px){
  .hud{display:none;}
}
@media (max-width:1080px){
  .nav-toggle{display:block;}

  .nav{
    position:fixed;
    inset:0;
    z-index:2;
    display:block;
    padding:calc(var(--header-h) + 1.25rem) var(--gutter) 3rem;
    background:var(--abyss);
    border-right:1px solid var(--line);
    overflow-y:auto;
    visibility:hidden;
    opacity:0;
    transform:translateY(-14px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s linear;
  }
  .site-header[data-open="true"] .nav{
    visibility:visible;
    opacity:1;
    transform:none;
  }
  .site-header[data-open="true"]{
    background:var(--abyss);
    border-bottom-color:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    counter-reset:navidx;
  }
  .nav__item{counter-increment:navidx;}
  .nav__link{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1.05rem 0;
    font-size:1.4rem;
    color:var(--cream);
    border-bottom:1px solid var(--line-soft);
  }
  .nav__link::before{
    content:counter(navidx,decimal-leading-zero);
    font-family:var(--f-mono);
    font-size:.72rem;
    font-weight:400;
    letter-spacing:.12em;
    color:var(--clay);
  }
  .nav__link::after{display:none;}
  .nav__link[aria-current="page"]{color:var(--cyan);}
  .nav__link[aria-current="page"]::before{color:var(--cyan);}

  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem;}
}
@media (max-width:860px){
  .hud{display:none;}
  .header-hud .btn{font-size:.76rem;padding:.46rem .8rem;}
}
@media (max-width:600px){
  .header-hud{display:none;}
  .brand__glyph{width:30px;height:30px;}
  .brand__name{font-size:1.18rem;}
  .site-footer__grid{grid-template-columns:1fr;}
  .site-footer__base{flex-direction:column;align-items:flex-start;}
}

/* ---------- 21. 动效降级 ---------- */
@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;
  }
  html.js .reveal{opacity:1;transform:none;}
  .btn:hover,.card:hover{transform:none;}
  .scroll-progress{display:none;}
}