.page-about{
  --ab-measure:620px;
  --ab-rail:116px;
  --ab-gap:clamp(20px,4vw,56px);
  position:relative;
  isolation:isolate;
  background-color:var(--ink-field);
  color:var(--card-ivory);
  padding-bottom:clamp(48px,8vw,112px);
}

.page-about::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,var(--hair-dark) 0 1px,transparent 1px 80px),
    repeating-linear-gradient(0deg,var(--hair-dark) 0 1px,transparent 1px 80px);
  opacity:.42;
}

.page-about > *{
  position:relative;
  z-index:1;
}

.page-about .about-crumbs{
  padding-top:clamp(20px,4vw,36px);
}

/* ---------- 封面 ---------- */
.page-about .about-cover{
  padding-block:clamp(24px,4vw,44px) clamp(28px,5vw,52px);
  border-bottom:1px solid var(--hair-dark-strong);
}

.page-about .about-cover__eyebrow{
  color:var(--neon-grass);
  letter-spacing:.16em;
  margin:0;
}

.page-about .about-cover__title{
  margin:.28em 0 0;
  font-family:var(--font-narrow);
  font-size:clamp(42px,10vw,104px);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.025em;
  color:var(--card-ivory);
}

.page-about .about-cover__lede{
  max-width:var(--ab-measure);
  margin:clamp(18px,3vw,28px) 0 0;
  font-size:clamp(16px,2.1vw,18px);
  line-height:1.8;
  color:var(--muted-on-dark);
}

.page-about .about-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:clamp(26px,4.5vw,44px) 0 0;
  padding:0;
  background:var(--hair-dark);
  border:1px solid var(--hair-dark);
}

.page-about .about-facts__cell{
  margin:0;
  padding:16px 14px;
  background:var(--pitch-teal);
}

.page-about .about-facts__k{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted-on-dark);
}

.page-about .about-facts__v{
  margin:10px 0 0;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(18px,2.4vw,22px);
  line-height:1.2;
  color:var(--card-ivory);
}

.page-about .about-facts__n{
  color:var(--electric-cyan);
}

/* ---------- 章节骨架 ---------- */
.page-about .about-body{
  padding-top:clamp(30px,5vw,56px);
}

.page-about .about-ch{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  padding-block:clamp(32px,5.5vw,68px);
  border-top:1px solid var(--hair-dark);
}

.page-about .about-ch__rail{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
}

.page-about .about-ch__num{
  font-family:var(--font-narrow);
  font-weight:700;
  font-size:clamp(38px,7vw,54px);
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--neon-grass);
}

.page-about .about-ch__annot{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted-on-dark);
  white-space:nowrap;
}

.page-about .about-ch__body{
  max-width:var(--ab-measure);
  min-width:0;
}

.page-about .about-ch__body .h-sub{
  margin:0 0 18px;
  font-size:clamp(20px,2.7vw,25px);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--card-ivory);
}

.page-about .about-ch__text p{
  margin:0 0 1.1em;
  font-size:17px;
  line-height:1.75;
  color:var(--card-ivory);
}

.page-about .about-ch__text p:last-child{
  margin-bottom:0;
}

.page-about .about-ch__text p.about-ch__lede{
  margin:0 0 20px;
  padding-left:16px;
  border-left:2px solid var(--neon-grass);
  font-size:clamp(17px,2.2vw,19px);
  line-height:1.7;
  color:var(--card-ivory);
}

.page-about .about-ch__text a{
  color:var(--electric-cyan);
  text-decoration:none;
  border-bottom:1px solid var(--hair-dark-strong);
  transition:border-color .16s linear,color .16s linear;
}

.page-about .about-ch__text a:hover,
.page-about .about-ch__text a:focus-visible{
  color:var(--neon-grass);
  border-bottom-color:var(--neon-grass);
}

.page-about .about-inline-code{
  padding:2px 6px;
  border:1px solid var(--hair-dark-strong);
  font-size:15px;
  color:var(--electric-cyan);
  white-space:nowrap;
}

.page-about .about-note{
  margin:22px 0 0;
  padding:14px 16px;
  border-left:2px solid var(--stoppage-amber);
  background:rgba(255,163,59,.07);
  font-size:14px;
  line-height:1.7;
  color:var(--muted-on-dark);
}

.page-about .about-note .mono{
  color:var(--stoppage-amber);
}

/* ---------- 拆分式章节（正文 + 图） ---------- */
.page-about .about-ch__body--split{
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,4vw,40px);
  align-items:start;
}

.page-about .about-ch__body--split .about-ch__text{
  max-width:var(--ab-measure);
}

.page-about .about-ch__fig{
  margin:clamp(20px,3.5vw,28px) 0 0;
}

.page-about .about-ch__fig--lead{
  margin:0 0 clamp(22px,3.5vw,32px);
}

.page-about .about-ch__fig .figure__frame{
  border:1px solid var(--hair-dark-strong);
}

.page-about .about-ch__fig .figure__cap{
  margin-top:10px;
}

/* ---------- 赛季编年阶梯 ---------- */
.page-about .about-season{
  margin:clamp(24px,4vw,36px) 0;
  padding:clamp(16px,3vw,24px);
  border:1px solid var(--hair-dark-strong);
  background:rgba(11,58,56,.42);
}

.page-about .about-season__chart{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

.page-about .about-season__grid line{
  stroke:var(--hair-dark-strong);
  stroke-width:1;
  stroke-dasharray:2 6;
}

.page-about .about-season__step{
  fill:none;
  stroke:var(--neon-grass);
  stroke-width:2;
  transition:stroke .16s linear;
}

.page-about .about-season__nodes circle{
  fill:var(--ink-field);
  stroke:var(--stoppage-amber);
  stroke-width:2;
}

.page-about .about-season:hover .about-season__step{
  stroke:var(--electric-cyan);
}

.page-about .about-season:hover .about-season__nodes circle{
  stroke:var(--neon-grass);
}

.page-about .about-season__legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:14px;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  color:var(--muted-on-dark);
}

.page-about .about-season figcaption{
  margin-top:10px;
}

/* ---------- 岗位列表 ---------- */
.page-about .about-roles{
  list-style:none;
  margin:clamp(18px,3vw,26px) 0 0;
  padding:0;
  border-top:1px solid var(--hair-dark);
}

.page-about .about-roles__row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:4px 14px;
  padding:16px 0;
  border-bottom:1px solid var(--hair-dark);
  transition:border-bottom-color .16s linear;
}

.page-about .about-roles__row:hover{
  border-bottom-color:var(--neon-grass);
}

.page-about .about-roles__n{
  grid-row:1;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:26px;
  line-height:1;
  color:var(--electric-cyan);
}

.page-about .about-roles__k{
  grid-row:1;
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  color:var(--card-ivory);
}

.page-about .about-roles__d{
  grid-column:1 / -1;
  font-size:14px;
  line-height:1.7;
  color:var(--muted-on-dark);
}

/* ---------- 底部入口 ---------- */
.page-about .about-links{
  margin-top:clamp(40px,6vw,72px);
  padding-top:clamp(24px,4vw,40px);
  border-top:1px solid var(--hair-dark-strong);
}

.page-about .about-links__title{
  margin:0 0 18px;
  font-size:clamp(18px,2.4vw,22px);
  letter-spacing:-.01em;
  color:var(--card-ivory);
}

.page-about .about-links__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--hair-dark);
  border:1px solid var(--hair-dark);
}

.page-about .about-links__item{
  background:var(--ink-field);
}

.page-about .about-links__a{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:4px 14px;
  padding:16px;
  text-decoration:none;
  color:var(--card-ivory);
  border-left:2px solid transparent;
  transition:border-left-color .16s linear,background-color .16s linear;
}

.page-about .about-links__a:hover,
.page-about .about-links__a:focus-visible{
  border-left-color:var(--neon-grass);
  background:var(--pitch-teal);
}

.page-about .about-links__idx{
  grid-row:1;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--neon-grass);
}

.page-about .about-links__label{
  grid-row:1;
  font-size:17px;
  font-weight:600;
}

.page-about .about-links__desc{
  grid-column:2;
  font-size:13px;
  line-height:1.6;
  color:var(--muted-on-dark);
}

/* ---------- 断点 ---------- */
@media (min-width:640px){
  .page-about .about-roles__row{
    grid-template-columns:72px 148px minmax(0,1fr);
    align-items:baseline;
  }
  .page-about .about-roles__d{
    grid-column:3;
    grid-row:1;
  }
  .page-about .about-links__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:760px){
  .page-about .about-facts{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-about .about-ch{
    grid-template-columns:var(--ab-rail) minmax(0,1fr);
    gap:var(--ab-gap);
  }
  .page-about .about-ch__rail{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:20px;
    position:sticky;
    top:20px;
    align-self:start;
  }
  .page-about .about-ch__annot{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    border-left:1px solid var(--hair-dark);
    padding-left:9px;
    white-space:normal;
    min-height:78px;
  }
}

@media (min-width:960px){
  .page-about .about-ch__body--split{
    grid-template-columns:minmax(0,1fr) minmax(0,320px);
  }
  .page-about .about-ch__body--split .about-ch__fig{
    margin-top:6px;
  }
  .page-about .about-links__list{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-about .about-links__a{
    grid-template-columns:minmax(0,1fr);
    gap:6px;
    padding:18px 16px 20px;
    border-left:0;
    border-top:2px solid transparent;
  }
  .page-about .about-links__a:hover,
  .page-about .about-links__a:focus-visible{
    border-left-color:transparent;
    border-top-color:var(--neon-grass);
  }
  .page-about .about-links__idx,
  .page-about .about-links__label,
  .page-about .about-links__desc{
    grid-column:1;
    grid-row:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about .about-links__a,
  .page-about .about-roles__row,
  .page-about .about-season__step,
  .page-about .about-season__nodes circle,
  .page-about .about-ch__text a{
    transition:none;
  }
}