.page-about{
  --ab-card:#FBF5EA;
  --ab-rail-w:236px;
  --ab-gap:clamp(24px,3.4vw,56px);
  --ab-hair:rgba(36,26,22,.16);
  background:var(--wb-indigo);
  color:var(--wb-cream);
  overflow-x:clip;
}

/* ---------- 首屏 ---------- */
.page-about .ab-hero{
  position:relative;
  padding-block:clamp(18px,3vw,32px) clamp(32px,5vw,64px);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(199,91,42,.20), transparent 58%),
    repeating-linear-gradient(90deg, rgba(244,235,221,.07) 0 1px, transparent 1px 96px),
    var(--wb-indigo);
  border-bottom:1px solid var(--wb-line);
}
.page-about .ab-hero .wb-crumb__list a{color:var(--wb-mist);}
.page-about .ab-hero__grid{
  display:grid;
  gap:clamp(18px,3vw,32px);
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(20px,4vw,44px);
}
.page-about .ab-hero__title{
  margin:0;
  color:var(--wb-cream);
  letter-spacing:.05em;
  line-height:1.12;
}
.page-about .ab-hero__lede{
  margin:0;
  color:rgba(244,235,221,.82);
  max-width:46ch;
}
.page-about .ab-hero__facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:clamp(26px,4vw,44px) 0 0;
  padding-top:clamp(18px,2.6vw,26px);
  border-top:1px solid var(--wb-line);
  background:var(--wb-line);
}
.page-about .ab-fact{
  background:var(--wb-indigo);
  padding:12px 14px 14px;
}
.page-about .ab-fact dt{
  font-family:var(--wb-font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--wb-mist);
  text-transform:uppercase;
}
.page-about .ab-fact dd{
  margin:6px 0 0;
  font-size:clamp(16px,2vw,19px);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--wb-gold);
}

/* ---------- 档案正文 ---------- */
.page-about .ab-body{
  background:var(--wb-cream);
  color:var(--wb-ink);
  padding-block:clamp(28px,4.6vw,64px);
}
.page-about .ab-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--ab-gap);
}

/* 侧栏目录 */
.page-about .ab-rail{
  border-top:1px solid var(--ab-hair);
  padding-top:14px;
}
.page-about .ab-rail__title{
  margin:0 0 10px;
  font-family:var(--wb-font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--wb-orange);
  text-transform:uppercase;
}
.page-about .ab-rail__list,
.page-about .ab-rail__yearlist{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.page-about .ab-rail__list li,
.page-about .ab-rail__yearlist li{flex:0 0 auto;}
.page-about .ab-rail__list a,
.page-about .ab-rail__yearlist a{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--ab-hair);
  color:var(--wb-ink);
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.page-about .ab-rail__num{
  font-family:var(--wb-font-mono);
  font-size:11px;
  color:var(--wb-orange);
}
.page-about .ab-rail__list a:hover,
.page-about .ab-rail__list a:focus-visible,
.page-about .ab-rail__yearlist a:hover,
.page-about .ab-rail__yearlist a:focus-visible{
  border-color:var(--wb-cyan);
  color:var(--wb-orange-deep);
  background:#fff;
  outline:none;
}
.page-about .ab-rail__years{margin-top:18px;}

/* 章节 */
.page-about .ab-chapter{
  padding-top:clamp(20px,3vw,30px);
  border-top:1px solid var(--ab-hair);
  margin-bottom:clamp(34px,5vw,64px);
}
.page-about .ab-chapter:last-child{margin-bottom:0;}
.page-about .ab-chapter__head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:16px;
}
.page-about .ab-chapter__num{
  font-family:var(--wb-font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--wb-orange);
  border-bottom:2px solid var(--wb-gold);
  padding-bottom:2px;
}
.page-about .ab-chapter h2{
  margin:0;
  color:var(--wb-ink);
  letter-spacing:.03em;
}
.page-about .ab-chapter__intro{
  margin:0 0 22px;
  max-width:62ch;
  color:rgba(36,26,22,.78);
  line-height:1.85;
}
.page-about .ab-chapter p{line-height:1.85;}

/* 起点：图文错位 */
.page-about .ab-split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,3vw,32px);
  align-items:start;
}
.page-about .ab-split__text p{
  margin:0 0 14px;
  color:rgba(36,26,22,.82);
}
.page-about .ab-split__text p:first-child{
  font-size:clamp(16px,1.4vw,18px);
  color:var(--wb-ink);
}
.page-about .ab-split__media{
  border-top:3px solid var(--wb-orange);
}
.page-about .ab-split__media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* 三类分类 */
.page-about .ab-types{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}
.page-about .ab-type{
  position:relative;
  background:var(--ab-card);
  padding:22px 20px 20px;
  border-left:3px solid var(--wb-orange);
  clip-path:polygon(0 0,calc(100% - var(--wb-cut)) 0,100% var(--wb-cut),100% 100%,0 100%);
}
.page-about .ab-type--service{border-left-color:var(--wb-emerald);}
.page-about .ab-type--record{border-left-color:var(--wb-gold);}
.page-about .ab-type__label{
  margin:0 0 8px;
  font-family:var(--wb-font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--wb-orange-deep);
}
.page-about .ab-type--service .ab-type__label{color:var(--wb-emerald);}
.page-about .ab-type--record .ab-type__label{color:#9A6E1F;}
.page-about .ab-type h3{
  margin:0 0 8px;
  color:var(--wb-ink);
  font-size:clamp(17px,1.5vw,20px);
}
.page-about .ab-type p{margin:0 0 12px;color:rgba(36,26,22,.78);font-size:15px;}
.page-about .ab-type__link{
  font-family:var(--wb-font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--wb-orange-deep);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.page-about .ab-type__link:hover,
.page-about .ab-type__link:focus-visible{color:var(--wb-cyan);outline:none;}
.page-about .ab-types__media{
  margin-top:clamp(20px,3vw,32px);
  border-top:1px solid var(--ab-hair);
}

/* 团队 */
.page-about .ab-team{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
.page-about .ab-team__card{
  position:relative;
  background:#fff;
  border:1px solid var(--ab-hair);
  padding:18px 18px 16px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.page-about .ab-team__card:hover,
.page-about .ab-team__card:focus-within,
.page-about .ab-team__card:focus{
  border-color:var(--wb-orange-soft);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(36,26,22,.10);
  outline:none;
}
.page-about .ab-team__idx{
  margin:0 0 6px;
  font-family:var(--wb-font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--wb-orange);
}
.page-about .ab-team__card h3{margin:0 0 8px;font-size:clamp(17px,1.5vw,20px);color:var(--wb-ink);}
.page-about .ab-team__role{margin:0;font-size:15px;color:rgba(36,26,22,.78);line-height:1.8;}
.page-about .ab-team__more{
  margin:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  font-size:13px;
  color:var(--wb-emerald);
  line-height:1.75;
  transition:max-height .3s ease,opacity .3s ease,margin .3s ease;
}
.page-about .ab-team__card:hover .ab-team__more,
.page-about .ab-team__card:focus .ab-team__more,
.page-about .ab-team__card:focus-within .ab-team__more{
  max-height:6em;
  opacity:1;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--ab-hair);
}
.page-about .ab-facts-block{
  margin-top:clamp(20px,3vw,30px);
  border-top:1px solid var(--ab-hair);
}
.page-about .ab-facts-block .wb-facts__row{
  border-bottom:1px solid var(--ab-hair);
}
.page-about .ab-facts-block .wb-facts__key{color:rgba(36,26,22,.62);}
.page-about .ab-facts-block .wb-facts__val{color:var(--wb-orange-deep);}

/* 版本时间线 */
.page-about .ab-miles{
  list-style:none;
  margin:0;
  padding:0;
  border-left:1px solid var(--ab-hair);
}
.page-about .ab-mile{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  padding:0 0 26px 20px;
}
.page-about .ab-mile::before{
  content:"";
  position:absolute;
  left:-5px;
  top:6px;
  width:9px;
  height:9px;
  background:var(--wb-cream);
  border:2px solid var(--wb-orange);
  transform:rotate(45deg);
}
.page-about .ab-mile:last-child{padding-bottom:0;}
.page-about .ab-mile__year{
  font-family:var(--wb-font-mono);
  font-size:clamp(18px,2.4vw,24px);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--wb-orange);
}
.page-about .ab-mile__body h3{margin:0 0 6px;font-size:clamp(16px,1.4vw,19px);color:var(--wb-ink);}
.page-about .ab-mile__body p{margin:0;font-size:15px;color:rgba(36,26,22,.78);}

/* 覆盖 */
.page-about .ab-coverage__media{
  margin:0 0 clamp(18px,3vw,26px);
  border-top:1px solid var(--ab-hair);
}
.page-about .ab-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:6px;
}
.page-about .ab-filter-status{
  min-height:1.2em;
  margin:0 0 14px;
  font-family:var(--wb-font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:rgba(36,26,22,.55);
}
.page-about .ab-spots{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
.page-about .ab-spot{
  background:#fff;
  border:1px solid var(--ab-hair);
  border-top:3px solid var(--wb-cyan);
  padding:16px 16px 18px;
  transition:opacity .3s ease,transform .3s ease;
}
.page-about .ab-spot--key{border-top-color:var(--wb-orange);background:var(--ab-card);}
.page-about .ab-spot--wide{border-top-color:var(--wb-gold);}
.page-about .ab-spot[hidden]{display:none;}
.page-about .ab-spot.is-in-view{opacity:1;transform:none;}
.page-about .ab-spot__tag{
  display:inline-block;
  margin:0 0 8px;
  font-family:var(--wb-font-mono);
  font-size:11px;
  letter-spacing:.1em;
}
.page-about .ab-spot h3{margin:0 0 8px;font-size:clamp(16px,1.4vw,19px);color:var(--wb-ink);}
.page-about .ab-spot p:not(.ab-spot__tag){margin:0;font-size:14px;line-height:1.8;color:rgba(36,26,22,.76);}

/* 荣誉 */
.page-about .ab-honor{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--ab-hair);
}
.page-about .ab-honor__item{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  padding:18px 0;
  border-bottom:1px solid var(--ab-hair);
}
.page-about .ab-honor__no{
  font-family:var(--wb-font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--wb-gold);
}
.page-about .ab-honor__item h3{margin:0 0 6px;font-size:clamp(16px,1.4vw,19px);color:var(--wb-ink);}
.page-about .ab-honor__item p{margin:0;font-size:15px;color:rgba(36,26,22,.78);}

/* 结尾 */
.page-about .ab-close{
  background:var(--wb-blue);
  color:var(--wb-cream);
  padding-block:clamp(32px,5vw,64px);
  border-top:3px solid var(--wb-orange);
}
.page-about .ab-close__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3vw,36px);
  align-items:end;
}
.page-about .ab-close__title{margin:6px 0 10px;color:var(--wb-cream);letter-spacing:.03em;}
.page-about .ab-close__text{
  margin:0;
  max-width:56ch;
  color:rgba(244,235,221,.78);
  line-height:1.85;
}
.page-about .ab-close__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- 断点 ---------- */
@media (min-width:640px){
  .page-about .ab-hero__facts{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-about .ab-types{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;}
  .page-about .ab-types .ab-type:nth-child(2){margin-top:18px;}
  .page-about .ab-types .ab-type:nth-child(3){margin-top:36px;}
  .page-about .ab-team{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-about .ab-spots{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-about .ab-spot--wide{grid-column:span 2;}
  .page-about .ab-mile{grid-template-columns:88px minmax(0,1fr);gap:0 18px;}
  .page-about .ab-honor__item{grid-template-columns:64px minmax(0,1fr);gap:0 18px;}
  .page-about .ab-close__inner{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}
}

@media (min-width:960px){
  .page-about .ab-layout{
    grid-template-columns:var(--ab-rail-w) minmax(0,1fr);
    align-items:start;
  }
  .page-about .ab-rail{
    position:sticky;
    top:24px;
    border-top:1px solid var(--ab-hair);
  }
  .page-about .ab-rail__list,
  .page-about .ab-rail__yearlist{
    flex-direction:column;
    gap:2px;
    overflow:visible;
  }
  .page-about .ab-rail__list a,
  .page-about .ab-rail__yearlist a{
    border:0;
    border-left:2px solid transparent;
    padding:7px 0 7px 12px;
    white-space:normal;
    background:none;
  }
  .page-about .ab-rail__list a:hover,
  .page-about .ab-rail__list a:focus-visible,
  .page-about .ab-rail__yearlist a:hover,
  .page-about .ab-rail__yearlist a:focus-visible{
    border-left-color:var(--wb-orange);
    background:rgba(199,91,42,.06);
  }
  .page-about .ab-rail__yearlist a{
    font-family:var(--wb-font-mono);
    font-size:12px;
    color:rgba(36,26,22,.66);
  }
  .page-about .ab-split{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);}
  .page-about .ab-split__media{margin-top:6px;}
  .page-about .ab-team{grid-template-columns:1.3fr 1fr 1fr 1.15fr;}
  .page-about .ab-team .ab-team__card:nth-child(2){margin-top:16px;}
  .page-about .ab-team .ab-team__card:nth-child(4){margin-top:8px;}
  .page-about .ab-spots{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-about .ab-spot--wide{grid-column:span 3;}
}

@media (min-width:1180px){
  .page-about .ab-hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;}
  .page-about .ab-hero__aside{padding-bottom:6px;}
}

@media (prefers-reduced-motion:reduce){
  .page-about .ab-team__card,
  .page-about .ab-team__more,
  .page-about .ab-spot,
  .page-about .ab-rail__list a{transition:none;}
  .page-about .ab-team__card:hover{transform:none;}
}
<<<END>>>