.page-about{
  --ab-line-x:13px;
  --ab-pad-l:44px;
  --ab-stop-pad:56px;
  background:var(--wh-night);
  color:var(--wh-fg);
  overflow-x:clip;
}

/* ---------- 首屏海报 ---------- */
.page-about .ab-hero{
  position:relative;
  padding:calc(var(--wh-header-h) + 36px) 0 56px;
  background:var(--wh-night);
  border-bottom:1px solid var(--wh-hairline);
}
.page-about .ab-hero::before,
.page-about .ab-hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.page-about .ab-hero::after{
  left:0;
  right:0;
  bottom:0;
  height:84px;
  background:var(--wh-night-2);
  clip-path:polygon(0 62%,100% 0,100% 100%,0 100%);
}
.page-about .ab-hero > .wh-container{
  position:relative;
  z-index:2;
}
.page-about .ab-hero__inner{
  max-width:920px;
}

.page-about .ab-hero__eyebrow{
  display:inline-block;
  margin:18px 0 0;
  padding:5px 11px;
  border:1px solid rgba(255,92,0,.42);
  border-radius:var(--wh-radius-sm);
  font-family:var(--wh-font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--wh-signal-soft);
}

.page-about .ab-hero__title{
  margin:20px 0 0;
  font-family:var(--wh-font-title);
  font-weight:900;
  font-size:clamp(2.5rem,7.4vw,5rem);
  line-height:1.03;
  letter-spacing:-.02em;
  color:var(--wh-paper);
}
.page-about .ab-hero__accent{
  color:var(--wh-signal);
}

.page-about .ab-hero__lead{
  margin:22px 0 0;
  max-width:33em;
  font-size:clamp(1rem,1.4vw,1.09rem);
  line-height:1.78;
  color:var(--wh-fg-dim);
}

/* ---------- 首屏数据条 ---------- */
.page-about .ab-facts{
  margin:32px 0 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--wh-hairline);
  border:1px solid var(--wh-hairline);
  border-radius:var(--wh-radius);
  overflow:hidden;
}
.page-about .ab-facts__item{
  display:flex;
  flex-direction:column-reverse;
  gap:8px;
  padding:18px 16px;
  background:var(--wh-night-2);
}
.page-about .ab-facts__val{
  margin:0;
  font-family:var(--wh-font-mono);
  font-weight:700;
  font-size:clamp(1.7rem,4.6vw,2.35rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--wh-paper);
}
.page-about .ab-facts__val em{
  font-style:normal;
  margin-left:3px;
  font-size:.46em;
  letter-spacing:0;
  color:var(--wh-signal-soft);
}
.page-about .ab-facts__label{
  font-size:14px;
  line-height:1.5;
  color:var(--wh-muted);
}

/* ---------- 章节跳转 ---------- */
.page-about .ab-jump{
  display:flex;
  gap:8px;
  margin-top:30px;
  padding-bottom:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.page-about .ab-jump::-webkit-scrollbar{
  display:none;
}
.page-about .ab-jump__link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border:1px solid var(--wh-hairline);
  border-radius:var(--wh-radius-sm);
  font-size:13px;
  color:var(--wh-fg-dim);
  text-decoration:none;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.page-about .ab-jump__link span{
  font-family:var(--wh-font-mono);
  font-size:12px;
  color:var(--wh-signal);
}
.page-about .ab-jump__link:hover,
.page-about .ab-jump__link:focus-visible{
  border-color:var(--wh-signal);
  color:var(--wh-paper);
  background:rgba(255,92,0,.08);
}

/* ---------- 叙事主线 ---------- */
.page-about .ab-flow{
  position:relative;
}
.page-about .ab-stop{
  position:relative;
  padding:var(--ab-stop-pad) 0;
  scroll-margin-top:calc(var(--wh-header-h) + 20px);
}
.page-about .ab-stop__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
  padding-left:var(--ab-pad-l);
}
.page-about .ab-stop__grid::before{
  content:"";
  position:absolute;
  left:var(--ab-line-x);
  top:0;
  bottom:calc(var(--ab-stop-pad) * -2);
  width:2px;
  background:rgba(255,92,0,.28);
}
.page-about .ab-stop--last .ab-stop__grid::before,
.page-about .ab-stop:last-child .ab-stop__grid::before{
  bottom:0;
  background:linear-gradient(180deg, rgba(255,92,0,.28), rgba(255,92,0,0));
}

.page-about .ab-stop__idx{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.page-about .ab-stop__node{
  position:absolute;
  left:-36px;
  top:7px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--wh-signal);
  box-shadow:0 0 0 5px rgba(255,92,0,.14);
}
.page-about .ab-stop__num{
  display:block;
  font-family:var(--wh-font-mono);
  font-weight:700;
  font-size:clamp(2.2rem,5.6vw,3.4rem);
  line-height:.9;
  letter-spacing:-.04em;
  color:rgba(247,249,252,.22);
}
.page-about .ab-stop__tag{
  font-family:var(--wh-font-mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--wh-signal-soft);
}

.page-about .ab-stop__main{
  min-width:0;
}
.page-about .ab-stop__title{
  margin:0 0 18px;
  font-family:var(--wh-font-title);
  font-weight:800;
  font-size:clamp(1.55rem,3.6vw,2.3rem);
  line-height:1.22;
  letter-spacing:-.01em;
  color:var(--wh-paper);
}
.page-about .ab-stop__main p{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.78;
  color:var(--wh-fg-dim);
}
.page-about .ab-stop__main p:last-child{
  margin-bottom:0;
}
.page-about .ab-stop__main strong{
  font-weight:600;
  color:var(--wh-paper);
}
.page-about .ab-more{
  margin-top:20px !important;
  font-size:15px;
}

/* ---------- 两栏错位 ---------- */
.page-about .ab-split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
.page-about .ab-split__text{
  min-width:0;
}

/* ---------- 图 ---------- */
.page-about .ab-shot{
  margin:6px 0 22px;
  border:1px solid var(--wh-hairline);
  border-radius:var(--wh-radius);
  background:var(--wh-night-2);
  overflow:hidden;
}
.page-about .ab-shot img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
  filter:saturate(.94) contrast(1.04);
}
.page-about .ab-shot__cap{
  display:block;
  padding:11px 14px;
  border-top:1px solid var(--wh-hairline);
  font-size:13px;
  line-height:1.6;
  color:var(--wh-muted);
}
.page-about .ab-shot--panorama img{
  aspect-ratio:16/9;
}
.page-about .ab-shot--wide img{
  aspect-ratio:3/2;
}

/* ---------- 关键数字 ---------- */
.page-about .ab-figure{
  display:flex;
  flex-wrap:wrap;
  gap:22px 44px;
  margin:26px 0 22px;
  padding:20px 0;
  border-top:1px solid var(--wh-hairline);
  border-bottom:1px solid var(--wh-hairline);
}
.page-about .ab-figure__item{
  min-width:112px;
}
.page-about .ab-figure__val{
  display:block;
  font-family:var(--wh-font-mono);
  font-weight:700;
  font-size:clamp(1.8rem,4.6vw,2.5rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--wh-paper);
}
.page-about .ab-figure__val span{
  margin-left:3px;
  font-size:.5em;
  letter-spacing:0;
  color:var(--wh-signal-soft);
}
.page-about .ab-figure__label{
  display:block;
  margin-top:9px;
  font-size:14px;
  line-height:1.5;
  color:var(--wh-muted);
}

/* ---------- 城市看台 ---------- */
.page-about .ab-city{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
  margin-top:4px;
}
.page-about .ab-map{
  position:relative;
  aspect-ratio:16/11;
  min-height:230px;
  border:1px solid var(--wh-hairline);
  border-radius:var(--wh-radius);
  background-image:
    linear-gradient(rgba(201,210,220,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,210,220,.07) 1px, transparent 1px);
  background-size:44px 44px, 44px 44px;
  background-color:var(--wh-night-2);
}
.page-about .ab-map__pts{
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  list-style:none;
}
.page-about .ab-map__pt{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:0;
  height:0;
}
.page-about .ab-map__dot{
  position:absolute;
  left:-6px;
  top:-6px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--wh-turf);
  border:1.5px solid rgba(11,27,43,.9);
  cursor:default;
  transition:transform .15s ease, background-color .15s ease;
}
.page-about .ab-map__dot::after{
  content:"";
  position:absolute;
  inset:-10px;
}
.page-about .ab-map__pt:hover .ab-map__dot,
.page-about .ab-map__dot:focus-visible{
  transform:scale(1.35);
  background:var(--wh-signal);
  outline:none;
}
.page-about .ab-map__name{
  position:absolute;
  left:0;
  bottom:13px;
  transform:translateX(-50%);
  padding:3px 9px;
  border-radius:var(--wh-radius-sm);
  background:var(--wh-signal);
  color:#fff;
  font-size:12px;
  line-height:1.5;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.page-about .ab-map__pt:hover .ab-map__name,
.page-about .ab-map__pt:focus-within .ab-map__name{
  opacity:1;
}
.page-about .ab-city__text p{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.78;
  color:var(--wh-fg-dim);
}

/* ---------- 里程碑 ---------- */
.page-about .ab-mile{
  list-style:none;
  margin:6px 0 0;
  padding:0;
}
.page-about .ab-mile__row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  padding:16px 0;
  border-top:1px solid var(--wh-hairline);
}
.page-about .ab-mile__row:last-child{
  border-bottom:1px solid var(--wh-hairline);
}
.page-about .ab-mile__stage{
  font-family:var(--wh-font-mono);
  font-size:13px;
  letter-spacing:.05em;
  color:var(--wh-signal-soft);
}
.page-about .ab-mile__text{
  font-size:16px;
  line-height:1.72;
  color:var(--wh-fg-dim);
}

/* ---------- CTA ---------- */
.page-about .ab-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

/* ---------- 中等屏幕 ---------- */
@media (min-width:720px){
  .page-about .ab-facts{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-about .ab-mile__row{
    grid-template-columns:150px minmax(0,1fr);
    gap:26px;
    align-items:baseline;
  }
}

@media (min-width:960px){
  .page-about{
    --ab-line-x:29px;
    --ab-pad-l:60px;
    --ab-stop-pad:64px;
  }
  .page-about .ab-hero{
    padding:calc(var(--wh-header-h) + 64px) 0 84px;
  }
  .page-about .ab-hero::after{
    left:auto;
    right:0;
    top:0;
    bottom:0;
    width:36%;
    height:auto;
    clip-path:polygon(48% 0,100% 0,100% 100%,0 100%);
  }
  .page-about .ab-hero::before{
    top:-14%;
    bottom:-14%;
    left:60%;
    width:3px;
    height:auto;
    background:var(--wh-signal);
    transform:rotate(10deg);
    opacity:.85;
  }
  .page-about .ab-hero__inner{
    max-width:64%;
  }
  .page-about .ab-stop__grid{
    grid-template-columns:132px minmax(0,1fr);
    gap:52px;
  }
  .page-about .ab-stop__idx{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .page-about .ab-stop__title{
    margin-bottom:20px;
  }
  .page-about .ab-split{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:38px;
    align-items:start;
  }
  .page-about .ab-split .ab-shot{
    margin-top:0;
  }
  .page-about .ab-city{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:40px;
    align-items:start;
  }
  .page-about .ab-map{
    aspect-ratio:16/10;
  }
}

@media (min-width:1200px){
  .page-about .ab-stop__grid{
    grid-template-columns:150px minmax(0,1fr);
    gap:64px;
  }
}

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  .page-about .ab-jump__link,
  .page-about .ab-map__dot,
  .page-about .ab-map__name{
    transition:none;
  }
}

.page-about {
  --x: inherit;
  --y: inherit;
}