.page-about{
  --about-rail:212px;
  --about-gap:clamp(24px,4vw,56px);
  --about-pad:clamp(16px,3vw,28px);
  background:var(--paper);
  color:var(--ink);
  padding-bottom:clamp(48px,8vw,96px);
  overflow-x:clip;
}

/* 首屏 */
.page-about .about-hero{
  position:relative;
  background:
    radial-gradient(circle at 1px 1px, rgba(28,36,31,.14) 1px, transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,var(--fog) 0%,var(--paper) 78%);
  border-bottom:2px solid var(--ink);
}
.page-about .about-hero__inner{
  padding-top:clamp(16px,2.5vw,24px);
  padding-bottom:clamp(28px,5vw,48px);
}
.page-about .breadcrumb{margin-bottom:clamp(16px,3vw,26px);}
.page-about .about-hero__grid{
  display:grid;
  gap:clamp(20px,3vw,32px);
}
.page-about .about-hero__text{
  border:2px solid var(--ink);
  background:var(--paper);
  box-shadow:var(--shadow-k);
  padding:var(--about-pad) var(--about-pad) calc(var(--about-pad) + 4px);
}
.page-about .about-hero__text h1{
  font-family:var(--font-head);
  font-size:clamp(30px,6.4vw,56px);
  line-height:1.14;
  font-weight:800;
  letter-spacing:-.01em;
  margin:12px 0 14px;
}
.page-about .about-hero__text .lede{
  max-width:38ch;
  color:var(--muted);
  margin:0;
}
.page-about .about-hero__cta{margin-top:22px;gap:10px;}
.page-about .about-hero__figure{margin:0;}

/* 版本数据带 */
.page-about .about-band{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:clamp(22px,3.5vw,32px) 0 0;
  border:2px solid var(--ink);
  background:var(--line);
  box-shadow:var(--shadow-k);
}
.page-about .about-band__item{
  background:var(--paper);
  padding:14px 16px;
  min-width:0;
}
.page-about .about-band dt{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--amber-deep);
  margin-bottom:6px;
}
.page-about .about-band dd{
  margin:0;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(17px,2.4vw,22px);
  line-height:1.3;
  word-break:break-word;
}

/* 主体骨架 */
.page-about .about-body{
  display:grid;
  gap:var(--about-gap);
  padding-top:clamp(28px,5vw,56px);
}
.page-about .about-toc{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:14px;
  border-top:2px solid var(--ink);
}
.page-about .about-toc__title{
  width:100%;
  margin:0 0 2px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted);
}
.page-about .about-toc__link{
  display:block;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.4;
  padding:6px 10px;
  color:var(--ink);
  text-decoration:none;
  border:1.5px solid var(--line);
  background:var(--paper);
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.page-about .about-toc__link:hover,
.page-about .about-toc__link:focus-visible{
  border-color:var(--ink);
  background:var(--jade-pale);
}
.page-about .about-toc__link.is-active{
  border-color:var(--jade);
  background:var(--jade-pale);
  color:var(--jade-deep);
  font-weight:600;
}
.page-about .about-sections{
  display:grid;
  gap:clamp(34px,6vw,64px);
  min-width:0;
}
.page-about .about-sec{scroll-margin-top:96px;min-width:0;}
.page-about .about-sec__head{margin-bottom:18px;}
.page-about .about-sec__head .eyebrow{margin-bottom:8px;}
.page-about .about-sec__body p{
  margin:0 0 14px;
  max-width:40ch;
  color:var(--muted);
}
.page-about .about-sec__body p:last-child{margin-bottom:0;}

/* 引文块 */
.page-about .about-quote{
  margin:22px 0;
  padding:20px 22px;
  border:2px solid var(--ink);
  border-left:8px solid var(--amber);
  background:var(--kraft);
  box-shadow:var(--shadow-k);
}
.page-about .about-quote p{
  margin:0;
  max-width:34ch;
  font-family:var(--font-head);
  font-size:clamp(17px,2.4vw,21px);
  font-weight:600;
  line-height:1.6;
  color:var(--ink);
}

/* 版本年表 */
.page-about .about-era{
  list-style:none;
  margin:26px 0 0;
  padding:0 0 0 22px;
  border-left:2px solid var(--ink);
}
.page-about .about-era__item{
  position:relative;
  padding:0 0 24px 20px;
  outline-offset:4px;
}
.page-about .about-era__item::before{
  content:"";
  position:absolute;
  left:-29px;
  top:8px;
  width:10px;
  height:10px;
  background:var(--amber);
  border:2px solid var(--ink);
}
.page-about .about-era__item--current::before{background:var(--jade);}
.page-about .about-era__year{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--amber-deep);
  border:1.5px solid var(--amber);
  padding:1px 7px;
  margin-bottom:8px;
}
.page-about .about-era__item--current .about-era__year{
  color:var(--jade-deep);
  border-color:var(--jade);
  background:var(--jade-pale);
}
.page-about .about-era__title{
  font-family:var(--font-head);
  font-size:clamp(17px,2.3vw,20px);
  font-weight:700;
  margin:0 0 6px;
}
.page-about .about-era__desc{
  margin:0;
  max-width:38ch;
  color:var(--muted);
  font-size:15.5px;
}
.page-about .about-era__fit{
  margin:8px 0 0;
  max-width:38ch;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.6;
  color:var(--jade-deep);
}
.page-about .about-era-figure{margin:8px 0 0;}
.page-about .about-era-figure .media-frame__inner{opacity:.92;}

/* 设计原则 */
.page-about .about-rules{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-about .about-rules__item{
  border:2px solid var(--ink);
  background:var(--kraft);
  box-shadow:var(--shadow-k);
  padding:18px 18px 20px;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.page-about .about-rules__item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-h);
}
.page-about .about-rules__num{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--amber-deep);
  margin-bottom:6px;
}
.page-about .about-rules__title{
  font-family:var(--font-head);
  font-size:18px;
  font-weight:700;
  margin:0 0 6px;
}
.page-about .about-rules__item p{
  margin:0;
  font-size:15px;
  color:var(--muted);
}

/* 团队 */
.page-about .about-team{
  display:grid;
  gap:14px;
  margin-top:24px;
}
.page-about .about-team__col{
  border:2px solid var(--ink);
  background:var(--paper);
  padding:16px 18px 18px;
  border-top-width:8px;
  box-shadow:var(--shadow-k);
}
.page-about .about-team__col--jade{border-top-color:var(--jade);}
.page-about .about-team__col--amber{border-top-color:var(--amber);}
.page-about .about-team__col--coral{border-top-color:var(--coral);}
.page-about .about-team__num{
  display:block;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.08em;
  color:var(--ink);
  margin-bottom:4px;
}
.page-about .about-team__title{
  font-family:var(--font-head);
  font-size:18px;
  font-weight:700;
  margin:0 0 8px;
}
.page-about .about-team__col p{
  margin:0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--muted);
}
.page-about .about-team-figure{margin:20px 0 22px;}
.page-about .about-team-figure .media-frame__inner{opacity:.95;}

/* 服务地区 */
.page-about .about-region{
  display:grid;
  gap:16px;
  margin-top:24px;
}
.page-about .about-region__map{
  position:relative;
  min-height:220px;
  border:2px solid var(--ink);
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(28,36,31,.12) 27px 28px),
    repeating-linear-gradient(90deg,transparent 0 27px,rgba(28,36,31,.12) 27px 28px),
    var(--fog);
  box-shadow:var(--shadow-k);
  padding:16px;
  overflow:hidden;
}
.page-about .about-region__map::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:14px;
  width:72px;
  height:72px;
  border:2px solid var(--amber);
  border-radius:50%;
  opacity:.55;
}
.page-about .about-region__pin{
  position:absolute;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  padding:4px 8px;
  background:var(--paper);
  border:1.5px solid var(--ink);
  box-shadow:3px 3px 0 rgba(28,36,31,.16);
  max-width:70%;
}
.page-about .about-region__pin--a{top:16px;left:16px;border-color:var(--jade);color:var(--jade-deep);}
.page-about .about-region__pin--b{top:88px;left:34%;border-color:var(--amber);color:var(--amber-deep);}
.page-about .about-region__pin--c{top:152px;left:14%;border-color:var(--coral);color:var(--ink);}
.page-about .about-region__page{
  position:absolute;
  right:16px;
  top:16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--muted);
}
.page-about .about-region__list{
  list-style:none;
  margin:0;
  padding:0;
  border:2px solid var(--ink);
  background:var(--paper);
}
.page-about .about-region__list li{
  display:flex;
  flex-wrap:wrap;
  gap:4px 12px;
  padding:11px 14px;
  border-bottom:1px solid var(--line-soft);
}
.page-about .about-region__list li:last-child{border-bottom:0;}
.page-about .about-region__key{
  flex:0 0 84px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--amber-deep);
  letter-spacing:.04em;
}
.page-about .about-region__val{
  flex:1 1 160px;
  min-width:0;
  font-size:14.5px;
  word-break:break-word;
}
.page-about .about-region__note{
  margin:14px 0 0;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--muted);
}

/* 下一步 */
.page-about .about-next{
  display:grid;
  gap:14px;
  margin-top:24px;
}
.page-about .about-next__card{
  display:block;
  text-decoration:none;
  color:var(--ink);
  border:2px solid var(--ink);
  background:var(--paper);
  padding:18px 18px 20px;
  box-shadow:var(--shadow-k);
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.page-about .about-next__card:hover,
.page-about .about-next__card:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--shadow-h);
  background:var(--jade-pale);
}
.page-about .about-next__num{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--amber-deep);
  margin-bottom:6px;
}
.page-about .about-next__title{
  font-family:var(--font-head);
  font-size:18px;
  font-weight:700;
  margin:0 0 8px;
}
.page-about .about-next__card p{
  margin:0 0 12px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--muted);
}
.page-about .about-next__go{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--jade-deep);
}
.page-about .about-next__foot{
  margin:16px 0 0;
  font-size:14.5px;
  color:var(--muted);
}
.page-about .about-next__foot a{color:var(--jade-deep);}

/* 返回顶部 */
.page-about .about-to-top{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:20;
}

/* 平板 */
@media (min-width:720px){
  .page-about .about-band{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-about .about-hero__grid{grid-template-columns:1.05fr .95fr;align-items:start;}
  .page-about .about-rules{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-about .about-team{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-about .about-next{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-about .about-team-figure .media-frame--square{max-width:420px;}
  .page-about .about-region{grid-template-columns:1fr 1fr;align-items:start;}
}

/* 桌面 */
@media (min-width:980px){
  .page-about .about-body{
    grid-template-columns:var(--about-rail) minmax(0,1fr);
    align-items:start;
  }
  .page-about .about-toc{
    display:block;
    position:sticky;
    top:96px;
    border-top:0;
    border-left:2px solid var(--ink);
    padding:0 0 0 14px;
  }
  .page-about .about-toc__title{padding-left:2px;}
  .page-about .about-toc__link{
    border:0;
    border-left:3px solid transparent;
    background:transparent;
    padding:7px 6px 7px 10px;
    margin-left:-1px;
    color:var(--muted);
  }
  .page-about .about-toc__link:hover,
  .page-about .about-toc__link:focus-visible{
    background:transparent;
    border-left-color:var(--sage);
    color:var(--ink);
  }
  .page-about .about-toc__link.is-active{
    background:transparent;
    border-left-color:var(--jade);
    color:var(--jade-deep);
  }
  .page-about .about-era__fit{
    opacity:0;
    max-height:0;
    overflow:hidden;
    transform:translateY(-4px);
    transition:opacity var(--t-fast),max-height var(--t-mid),transform var(--t-fast);
  }
  .page-about .about-era__item:hover .about-era__fit,
  .page-about .about-era__item:focus-within .about-era__fit,
  .page-about .about-era__item:focus .about-era__fit{
    opacity:1;
    max-height:140px;
    transform:translateY(0);
  }
  .page-about .about-era__item:focus{outline:2px solid var(--jade);}
  .page-about .about-quote{padding:26px 30px;}
  .page-about .about-sec__body p{max-width:42ch;}
}

@media (prefers-reduced-motion:reduce){
  .page-about .about-rules__item,
  .page-about .about-next__card,
  .page-about .about-era__fit,
  .page-about .about-toc__link{transition:none;}
  .page-about .about-rules__item:hover,
  .page-about .about-next__card:hover{transform:none;}
}
<<<END>>>