/* ===== 服务总览 · 页面专属样式（作用域 .page-about） ===== */

.page-about {
  --about-rail-w: 212px;
  --about-line: rgba(198, 204, 206, .34);
  display: block;
  overflow-x: clip;
  background: var(--c-paper);
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  position: relative;
  background: var(--c-dai);
  color: var(--c-paper);
  padding: 26px 0 0;
  overflow: hidden;
}

.page-about .about-hero .container {
  position: relative;
  z-index: 2;
  padding-bottom: 90px;
}

.page-about .about-hero .breadcrumb,
.page-about .about-hero .breadcrumb a {
  color: var(--c-silver);
}

.page-about .about-hero .breadcrumb a:hover {
  color: var(--c-amber);
}

.page-about .about-hero .eyebrow {
  color: var(--c-amber);
}

.page-about .about-hero__grid {
  display: grid;
  gap: 34px;
  margin-top: 26px;
}

.page-about .about-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 8.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--c-paper);
  margin: 14px 0 0;
  max-width: 12em;
}

.page-about .about-hero__intro {
  font-size: 17px;
  line-height: 1.88;
  color: var(--c-silver);
  max-width: 34em;
  margin: 20px 0 0;
}

.page-about .about-hero__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--about-line);
}

.page-about .about-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-about .about-hero__fact-num {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--c-amber);
}

.page-about .about-hero__fact-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-silver);
}

.page-about .about-hero__figure {
  margin: 0;
  border: 3px solid var(--c-night);
  box-shadow: 8px 8px 0 var(--c-amber);
}

.page-about .about-hero__ridge {
  display: block;
  width: 100%;
  height: 66px;
  margin-top: -1px;
}

.page-about .about-hero__ridge path {
  fill: var(--c-paper);
}

/* ---------- 年份刻度 + 抽屉流 ---------- */

.page-about .about-chronicle {
  background: var(--c-paper);
  padding: 42px 0 58px;
}

.page-about .about-layout {
  display: grid;
  gap: 26px;
}

.page-about .about-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  border-bottom: 2px solid var(--c-ink);
  -webkit-overflow-scrolling: touch;
}

.page-about .about-rail__label {
  display: none;
}

.page-about .about-rail__link {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 124px;
  padding: 10px 12px;
  border: 2px solid var(--c-silver);
  background: transparent;
  text-decoration: none;
  transition: border-color var(--ease), background-color var(--ease), transform var(--ease);
}

.page-about .about-rail__year {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--c-cinnabar);
}

.page-about .about-rail__text {
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--c-ink);
}

.page-about .about-rail__link:hover,
.page-about .about-rail__link:focus-visible {
  border-color: var(--c-amber);
  background: var(--c-amber-soft);
  transform: translateY(-2px);
}

.page-about .about-stream {
  min-width: 0;
}

.page-about .about-stream__lede {
  font-size: 16px;
  line-height: 1.88;
  color: var(--c-ink);
  border-left: 4px solid var(--c-amber);
  padding: 3px 0 3px 16px;
  margin: 0 0 28px;
  max-width: 42em;
}

.page-about .about-mile {
  position: relative;
  padding: 26px 0 30px;
  border-top: 1px solid var(--c-silver);
}

.page-about .about-mile:first-of-type {
  border-top: 3px solid var(--c-ink);
}

.page-about .about-mile__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 13px;
}

.page-about .about-mile__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: transparent;
  border: 2px solid var(--c-amber);
  transform: rotate(45deg);
  transition: background-color var(--ease), transform var(--ease);
}

.page-about .about-mile:hover .about-mile__dot {
  background: var(--c-amber);
  transform: rotate(45deg) scale(1.18);
}

.page-about .about-mile__year {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--c-dai);
  margin: 0;
}

.page-about .about-mile__kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--c-jade);
  margin-left: auto;
}

.page-about .about-mile__body {
  margin-top: 15px;
}

.page-about .about-mile__body p {
  font-size: 16px;
  line-height: 1.88;
  color: var(--c-ink);
  margin: 0;
  max-width: 62ch;
}

.page-about .about-mile__notes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  margin: 16px 0 0;
  padding: 0;
}

.page-about .about-mile__notes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--c-jade);
}

.page-about .about-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 11px 0;
  border-top: 1px solid var(--c-silver);
  border-bottom: 1px solid var(--c-silver);
}

.page-about .about-stat__label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink);
  opacity: .84;
}

.page-about .about-stat__num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-dai);
  text-align: right;
  white-space: nowrap;
}

/* ---------- 通道关系 ---------- */

.page-about .about-channel {
  background: var(--c-night);
  color: var(--c-paper);
  padding: 54px 0 58px;
}

.page-about .about-channel .eyebrow {
  color: var(--c-amber);
}

.page-about .about-channel__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.4vw, 42px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-paper);
  margin: 12px 0 0;
  max-width: 16em;
}

.page-about .about-channel__lede {
  font-size: 16px;
  line-height: 1.88;
  color: var(--c-silver);
  max-width: 48em;
  margin: 18px 0 0;
}

.page-about .about-channel__board {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.page-about .about-channel__node {
  border: 2px solid var(--c-silver);
  background: rgba(198, 204, 206, .06);
  padding: 20px 18px;
  transition: border-color var(--ease), background-color var(--ease), transform var(--ease);
}

.page-about .about-channel__node:hover {
  border-color: var(--c-amber);
  background: rgba(217, 152, 63, .13);
  transform: translateY(-3px);
}

.page-about .about-channel__node--alt {
  border-style: dashed;
}

.page-about .about-channel__node-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--c-amber);
  margin: 0;
}

.page-about .about-channel__node-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--c-paper);
  margin: 9px 0 0;
}

.page-about .about-channel__node-note {
  font-size: 14px;
  line-height: 1.78;
  color: var(--c-silver);
  margin: 9px 0 0;
}

.page-about .about-channel__seam {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-amber);
}

.page-about .about-channel__seam-line {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-silver) 0 6px, transparent 6px 14px);
}

.page-about .about-channel__seam-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  white-space: nowrap;
}

.page-about .about-channel__foot {
  font-size: 15px;
  line-height: 1.88;
  color: var(--c-silver);
  max-width: 54em;
  margin: 30px 0 0;
}

.page-about .about-channel__foot a {
  color: var(--c-amber-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-about .about-channel__foot a:hover {
  color: var(--c-paper);
}

/* ---------- 规模 ---------- */

.page-about .about-scale {
  background: var(--c-paper);
  padding: 54px 0 18px;
}

.page-about .about-scale h2,
.page-about .about-team h2,
.page-about .about-next h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.2vw, 38px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--c-dai);
  margin: 12px 0 0;
  max-width: 18em;
}

.page-about .about-scale__grid {
  margin-top: 30px;
  border-top: 3px solid var(--c-ink);
}

.page-about .about-scale__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--c-silver);
  transition: background-color var(--ease), padding-left var(--ease);
}

.page-about .about-scale__item:hover {
  background: var(--c-amber-soft);
  padding-left: 14px;
}

.page-about .about-scale__num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 8vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--c-dai);
  margin: 0;
}

.page-about .about-scale__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--c-cinnabar);
  margin: 0;
}

.page-about .about-scale__desc {
  font-size: 15px;
  line-height: 1.82;
  color: var(--c-ink);
  margin: 0;
  max-width: 52ch;
}

/* ---------- 团队 ---------- */

.page-about .about-team {
  background: var(--c-paper);
  padding: 44px 0 60px;
}

.page-about .about-team__grid {
  display: grid;
  gap: 30px;
}

.page-about .about-team__text p {
  font-size: 16px;
  line-height: 1.88;
  color: var(--c-ink);
  max-width: 58ch;
  margin: 16px 0 0;
}

.page-about .about-team__figure {
  margin: 0;
  border: 3px solid var(--c-ink);
  box-shadow: var(--shadow-hard);
}

.page-about .about-bars {
  list-style: none;
  display: grid;
  gap: 17px;
  margin: 40px 0 0;
  padding: 0;
}

.page-about .about-bar__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-ink);
  margin: 0 0 8px;
}

.page-about .about-bar__count {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--c-jade);
}

.page-about .about-bar__track {
  display: block;
  height: 13px;
  background: rgba(16, 26, 30, .07);
  border: 2px solid var(--c-ink);
}

.page-about .about-bar__fill {
  display: block;
  height: 100%;
}

.page-about .about-bar__fill--ops {
  width: 37.5%;
  background: var(--c-amber);
}

.page-about .about-bar__fill--tech {
  width: 28.1%;
  background: var(--c-jade);
}

.page-about .about-bar__fill--index {
  width: 18.8%;
  background: var(--c-silver);
}

.page-about .about-bar__fill--service {
  width: 15.6%;
  background: var(--c-cinnabar);
}

/* ---------- 覆盖范围 ---------- */

.page-about .about-reach {
  background: var(--c-dai);
  color: var(--c-paper);
  padding: 54px 0 0;
}

.page-about .about-reach .eyebrow {
  color: var(--c-amber);
}

.page-about .about-reach__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.4vw, 42px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-paper);
  margin: 12px 0 0;
  max-width: 17em;
}

.page-about .about-reach__lede {
  font-size: 16px;
  line-height: 1.88;
  color: var(--c-silver);
  max-width: 46em;
  margin: 18px 0 0;
}

.page-about .about-reach__stats {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--about-line);
}

.page-about .about-reach__stats li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(198, 204, 206, .2);
}

.page-about .about-reach__stats .mono {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: .02em;
  color: var(--c-amber);
  text-align: right;
}

.page-about .about-reach__stats span:last-child {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-silver);
}

.page-about .about-reach__note {
  font-size: 15px;
  line-height: 1.88;
  color: var(--c-silver);
  max-width: 50em;
  margin: 26px 0 0;
}

.page-about .about-reach__figure {
  margin: 42px 0 0;
  border-top: 3px solid var(--c-night);
}

.page-about .about-reach__figure .media-frame__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  opacity: .92;
}

/* ---------- 下一步 ---------- */

.page-about .about-next {
  background: var(--c-paper);
  padding: 52px 0 66px;
}

.page-about .about-next__grid {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.page-about .about-next__card {
  display: block;
  border: 2px solid var(--c-ink);
  background: #FBF7EE;
  padding: 20px 18px;
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease), background-color var(--ease);
}

.page-about .about-next__card:hover,
.page-about .about-next__card:focus-visible {
  border-color: var(--c-amber);
  background: var(--c-amber-soft);
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.page-about .about-next__card-key {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--c-jade);
}

.page-about .about-next__card-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--c-dai);
  margin-top: 10px;
}

.page-about .about-next__card-note {
  display: block;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-ink);
  margin-top: 8px;
}

/* ---------- 正文链接 ---------- */

.page-about p a {
  color: var(--c-cinnabar);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--ease), background-color var(--ease);
}

.page-about p a:hover {
  color: var(--c-ink);
  background: var(--c-amber-soft);
}

/* ---------- 断点 ---------- */

@media (min-width: 640px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 44px;
    align-items: start;
  }

  .page-about .about-scale__item {
    grid-template-columns: 7em minmax(0, 1fr);
    column-gap: 28px;
    align-items: baseline;
    padding: 24px 0 26px;
  }

  .page-about .about-scale__num {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .page-about .about-scale__name {
    grid-column: 2;
    grid-row: 1;
  }

  .page-about .about-scale__desc {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (min-width: 820px) {
  .page-about .about-channel__board {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
  }

  .page-about .about-channel__seam {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .page-about .about-channel__seam-line {
    width: 2px;
    height: auto;
    flex: 1;
    background: repeating-linear-gradient(180deg, var(--c-silver) 0 6px, transparent 6px 14px);
  }

  .page-about .about-channel__seam-label {
    writing-mode: vertical-rl;
    letter-spacing: .26em;
  }

  .page-about .about-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 42px;
  }

  .page-about .about-reach__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 52px;
  }

  .page-about .about-next__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero {
    padding-top: 32px;
  }

  .page-about .about-hero .container {
    padding-bottom: 108px;
  }

  .page-about .about-layout {
    grid-template-columns: var(--about-rail-w) minmax(0, 1fr);
    gap: 46px;
    align-items: start;
  }

  .page-about .about-rail {
    display: block;
    overflow: visible;
    position: sticky;
    top: 116px;
    border-bottom: 0;
    border-left: 2px solid var(--c-ink);
    padding: 2px 0 2px 16px;
  }

  .page-about .about-rail__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--c-jade);
    margin: 0 0 14px;
  }

  .page-about .about-rail__link {
    min-width: 0;
    display: block;
    margin-bottom: 10px;
    padding: 11px 10px 11px 13px;
    border: 0;
    border-left: 6px solid var(--c-silver);
    background: transparent;
  }

  .page-about .about-rail__link:hover,
  .page-about .about-rail__link:focus-visible {
    border-left-color: var(--c-amber);
    background: var(--c-amber-soft);
    transform: translateX(3px);
  }

  .page-about .about-rail__year {
    display: block;
  }

  .page-about .about-rail__text {
    display: block;
    margin-top: 1px;
  }

  .page-about .about-team__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 50px;
    align-items: start;
  }
}

@media (min-width: 1080px) {
  .page-about .about-hero h1 {
    font-size: 68px;
  }

  .page-about .about-mile__kicker {
    margin-left: 20px;
  }
}
<<<END>>>

等一下，最后一个标记。我只需要 MAIN_HTML 和 PAGE_CSS。让我正确收尾。

其实我加了个多余的 <<<END>>>。去掉它。

再检查一下：`.about-bar__fill--index` 用苗银灰，在纸白背景上的浅灰条——能看清吗？苗银灰是 #C6CCCE，配 2px 黑边框——可以，能看清。

再看 `.about-reach__stats .mono` —— 那些 span 有 `mono` 类，全局样式可能已经设了字体。我重新声明了，没冲突。

还有 `.about-hero__facts` 用的是 `ul` 配 `li`。没问题。

另外。about-next__card 里 `key`、`title`、`note` 都是 span 设成 display block——这样没问题。

最后确认一下锚点 id 和 href 都对：
- #mile-2019 → id="mile-2019" ✓
- #mile-2021 → ✓
- #mile-2022 → ✓
- #mile-2025 → ✓

跨页面的链接：/、/apps/、/information/、/faq/、/connect/——都是合法路由 ✓

图片数量：3 张 ✓（不少于 1，目标 3，不超过 15）

首屏图片没有 lazy ✓，其他两张有 ✓

只有一个 h1 ✓

品牌名“长乐坊备用站”出现在首屏导语里 ✓

好，收尾。
<main id="main-content" class="page-about">

  <section class="about-hero">
    <div class="container">
      <nav class="breadcrumb" aria-label="页面位置">
        <ol>
          <li><a href="/">稳定版首页</a></li>
          <li aria-current="page">服务总览</li>
        </ol>
      </nav>

      <div class="about-hero__grid">
        <div class="about-hero__lead">
          <p class="eyebrow">服务总览 / OVERVIEW</p>
          <h1>六年，一条通道，一套编号</h1>
          <p class="about-hero__intro">
            长乐坊备用站是长乐坊面向中文用户长期保留的一条稳定访问通道，从 2019 年运行到现在。
            主站顺畅时它安静待命，主站不顺时您从它进入，看到的仍是同一批条目、同一套版本号。
          </p>
          <ul class="about-hero__facts">
            <li>
              <span class="mono about-hero__fact-num">2019</span>
              <span class="about-hero__fact-label">开始运营</span>
            </li>
            <li>
              <span class="mono about-hero__fact-num">186</span>
              <span class="about-hero__fact-label">内容中心条目</span>
            </li>
            <li>
              <span class="mono about-hero__fact-num">99.9%</span>
              <span class="about-hero__fact-label">日常可用性</span>
            </li>
          </ul>
        </div>

        <figure class="media-frame media-frame--photo about-hero__figure">
          <img class="media-frame__img" src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="一排档案柜抽屉被拉开，露出成叠索引卡片，青灰调">
          <figcaption class="media-frame__caption">抽屉拉开的顺序就是年份顺序，编号从第一格排到最后一格。</figcaption>
        </figure>
      </div>
    </div>

    <svg class="about-hero__ridge" viewBox="0 0 1200 120" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,84 L110,46 L210,74 L330,24 L455,68 L585,28 L720,76 L845,38 L975,80 L1105,50 L1200,86 L1200,120 L0,120 Z"></path>
    </svg>
  </section>

  <section class="about-chronicle">
    <div class="container">
      <div class="about-layout">

        <aside class="about-rail" aria-label="运营节点索引">
          <p class="about-rail__label">运营节点</p>
          <a class="about-rail__link" href="#mile-2019" data-section-link="mile-2019">
            <span class="mono about-rail__year">2019</span>
            <span class="about-rail__text">首个中文稳定版</span>
          </a>
          <a class="about-rail__link" href="#mile-2021" data-section-link="mile-2021">
            <span class="mono about-rail__year">2021</span>
            <span class="about-rail__text">站内索引上线</span>
          </a>
          <a class="about-rail__link" href="#mile-2022" data-section-link="mile-2022">
            <span class="mono about-rail__year">2022</span>
            <span class="about-rail__text">平板适配完成</span>
          </a>
          <a class="about-rail__link" href="#mile-2025" data-section-link="mile-2025">
            <span class="mono about-rail__year">2025</span>
            <span class="about-rail__text">站内检索开放</span>
          </a>
        </aside>

        <div class="about-stream">
          <p class="about-stream__lede">
            节点不多，但每一步都踩在同一条编号线上。下面按年份往下走，您可以从左栏直接跳到关心的那一段。
          </p>

          <article id="mile-2019" class="about-mile" data-section="mile-2019">
            <header class="about-mile__head">
              <span class="about-mile__dot" aria-hidden="true"></span>
              <h2 class="about-mile__year">2019</h2>
              <span class="mono about-mile__kicker">起点 / ORIGIN</span>
            </header>
            <div class="about-mile__body">
              <p>
                这一年，面向中文用户的备用访问通道正式运行。最初只有一个入口和一份按主题归类的内容目录，
                回访用户凭印象里的栏目名翻找条目。此后每年发布一次目录重编版本，季度内按需发布小版本，
                编号顺序一直沿用到现在，中间没有推倒重来过。
              </p>
              <ul class="about-mile__notes">
                <li><span class="tag tag--jade">稳定访问</span>入口切换不停服务</li>
                <li><span class="tag tag--jade">条目归档</span>主题分类初步成型</li>
              </ul>
            </div>
          </article>

          <article id="mile-2021" class="about-mile" data-section="mile-2021">
            <header class="about-mile__head">
              <span class="about-mile__dot" aria-hidden="true"></span>
              <h2 class="about-mile__year">2021</h2>
              <span class="mono about-mile__kicker">索引 / INDEX</span>
            </header>
            <div class="about-mile__body">
              <p>
                站内索引上线，内容条目与公告第一次按主题、序号、版本号三段式统一排布，
                稳定访问、版本记录、设备适配、回访指引、公告归档五个主题也在这一年定型。
                编号从此可以直接口头转述——同事之间报一串数字，就能对到同一条。
              </p>
              <div class="about-stat">
                <span class="about-stat__label">当年定型的归档主题</span>
                <span class="mono about-stat__num">5 类</span>
              </div>
            </div>
          </article>

          <article id="mile-2022" class="about-mile" data-section="mile-2022">
            <header class="about-mile__head">
              <span class="about-mile__dot" aria-hidden="true"></span>
              <h2 class="about-mile__year">2022</h2>
              <span class="mono about-mile__kicker">多端 / DEVICE</span>
            </header>
            <div class="about-mile__body">
              <p>
                平板适配完成。iPadOS、Android 与 HarmonyOS 三类系统都在支持范围内，横竖屏切换都能完整显示，
                1280×800 以上分辨率不会出现截断；检索入口固定在页面右上角，回访时不用滚动就能调用。
                完整的系统要求与使用路径整理在<a href="/apps/">应用中心</a>。
              </p>
              <div class="about-stat">
                <span class="about-stat__label">平板设备回访用户占比</span>
                <span class="mono about-stat__num">28%</span>
              </div>
            </div>
          </article>

          <article id="mile-2025" class="about-mile" data-section="mile-2025">
            <header class="about-mile__head">
              <span class="about-mile__dot" aria-hidden="true"></span>
              <h2 class="about-mile__year">2025</h2>
              <span class="mono about-mile__kicker">检索 / SEARCH</span>
            </header>
            <div class="about-mile__body">
              <p>
                站内检索开放。栏目名、版本号与关键词三种输入方式都能用，输入后 2 秒内返回相关历史条目。
                想核对某一期公告改了什么，或者隔了半年回来找当初看过的那一条，
                在<a href="/information/">更新公告</a>里输一次就能落到具体位置。
              </p>
              <div class="about-stat">
                <span class="about-stat__label">一般检索返回时间</span>
                <span class="mono about-stat__num">2 秒内</span>
              </div>
            </div>
          </article>
        </div>

      </div>
    </div>
  </section>

  <section class="about-channel">
    <div class="container">
      <p class="eyebrow">通道关系 / TWO GATES</p>
      <h2 class="about-channel__title">换到备用通道，编号还是原来那一串</h2>
      <p class="about-channel__lede">
        主站与备用站共用同一套内容与版本编号。您在任意一侧看到的条目号，到另一侧还是同一个，
        回访时不用重新记一套叫法，也不用担心翻到的版本对不上。
      </p>

      <div class="about-channel__board">
        <div class="about-channel__node">
          <p class="mono about-channel__node-key">MAIN</p>
          <p class="about-channel__node-name">主站通道</p>
          <p class="about-channel__node-note">日常访问入口，条目起草、归类与版本发布都在这里完成。</p>
        </div>
        <div class="about-channel__seam" aria-hidden="true">
          <span class="about-channel__seam-line"></span>
          <span class="mono about-channel__seam-label">编号一致</span>
          <span class="about-channel__seam-line"></span>
        </div>
        <div class="about-channel__node about-channel__node--alt">
          <p class="mono about-channel__node-key">STANDBY</p>
          <p class="about-channel__node-name">备用通道</p>
          <p class="about-channel__node-note">主站不顺时从这里进入，读到的还是同一条内容。</p>
        </div>
      </div>

      <p class="about-channel__foot">
        隔一段时间再回来，可以先用历史条目对照表比较两个版本号之间的增删；
        不确定条目归在哪一类，也可以从<a href="/faq/">帮助中心</a>的目录柜按序号进去，
        比在目录里盲翻快得多。
      </p>
    </div>
  </section>

  <section class="about-scale">
    <div class="container">
      <p class="eyebrow">收录规模 / SCALE</p>
      <h2>现在这里放着什么</h2>

      <div class="about-scale__grid">
        <div class="about-scale__item">
          <p class="mono about-scale__num">186</p>
          <p class="about-scale__name">内容中心条目</p>
          <p class="about-scale__desc">
            按稳定访问、版本记录、设备适配、回访指引、公告归档五个主题归档，
            每条都带主题、序号与版本号。
          </p>
        </div>
        <div class="about-scale__item">
          <p class="mono about-scale__num">42</p>
          <p class="about-scale__name">更新公告期数</p>
          <p class="about-scale__desc">
            每期以版本号作为唯一标识，按上线、调整、修复、归档四类标签区分改动性质，
            翻到哪一期就知道那一期动了什么。
          </p>
        </div>
        <div class="about-scale__item">
          <p class="mono about-scale__num">228</p>
          <p class="about-scale__name">索引覆盖的历史条目</p>
          <p class="about-scale__desc">
            186 条内容条目与 42 期公告全部进入索引，凭版本号或关键词都能反查到出处。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="about-team">
    <div class="container">
      <div class="about-team__grid">
        <div class="about-team__text">
          <p class="eyebrow">团队与运行保障 / CREW</p>
          <h2>有人在看着这些条目</h2>
          <p>
            运营团队现有 32 人，内容运维、技术支持、检索与索引维护、客服四条线各管一段。
            内容运维负责条目起草与归档，技术支持守着访问节点，索引维护保证检索能反查到具体版本号，
            客服处理来信里的访问与版本核对问题。
          </p>
          <p>
            访问节点分布在贵阳、成都与广州，日常可用性维持在 99.9%。三处节点互为备份，
            单点波动时访问会切到最近的另一处，用户端几乎感觉不到。
          </p>
        </div>

        <figure class="media-frame media-frame--square about-team__figure">
          <img class="media-frame__img" src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="俯拍的旧索引卡与铅笔、编号标签并置于桌面" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">每组条目都有编号、归类和版本标记，改过什么留在卡面上。</figcaption>
        </figure>
      </div>

      <ul class="about-bars">
        <li class="about-bar">
          <p class="about-bar__name">内容运维<span class="mono about-bar__count">12 人</span></p>
          <span class="about-bar__track"><span class="about-bar__fill about-bar__fill--ops"></span></span>
        </li>
        <li class="about-bar">
          <p class="about-bar__name">技术支持<span class="mono about-bar__count">9 人</span></p>
          <span class="about-bar__track"><span class="about-bar__fill about-bar__fill--tech"></span></span>
        </li>
        <li class="about-bar">
          <p class="about-bar__name">检索与索引维护<span class="mono about-bar__count">6 人</span></p>
          <span class="about-bar__track"><span class="about-bar__fill about-bar__fill--index"></span></span>
        </li>
        <li class="about-bar">
          <p class="about-bar__name">客服<span class="mono about-bar__count">5 人</span></p>
          <span class="about-bar__track"><span class="about-bar__fill about-bar__fill--service"></span></span>
        </li>
      </ul>
    </div>
  </section>

  <section class="about-reach">
    <div class="container">
      <p class="eyebrow">服务覆盖 / REACH</p>
      <h2 class="about-reach__title">从西南三处节点出发，接到更远的地方</h2>
      <p class="about-reach__lede">
        累计服务的回访用户已有 37 万，访问来自全国 31 个省级行政区，
        也有 26 个国家和地区的中文用户从这里进来。
      </p>

      <ul class="about-reach__stats">
        <li>
          <span class="mono">31</span>
          <span>个省级行政区有访问记录</span>
        </li>
        <li>
          <span class="mono">26</span>
          <span>个国家和地区的中文用户</span>
        </li>
        <li>
          <span class="mono">37 万</span>
          <span>累计服务回访用户</span>
        </li>
        <li>
          <span class="mono">9:00–11:00</span>
          <span>工作日回访高峰，客服与技术支持在岗</span>
        </li>
      </ul>

      <p class="about-reach__note">
        另一个高峰出现在 20:00 至 22:00。这两个时段里来信量最集中，
        如果您是需要核对版本的来信，附上版本号会明显快一些。
      </p>
    </div>

    <figure class="media-frame media-frame--wide about-reach__figure">
      <img class="media-frame__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="苗银质感的抽象金属纹理特写，冷灰中带暖色反光" loading="lazy" decoding="async">
    </figure>
  </section>

  <section class="about-next">
    <div class="container">
      <p class="eyebrow">接下来 / NEXT</p>
      <h2>想找某一条，从这三个入口进去最快</h2>

      <div class="about-next__grid">
        <a class="about-next__card" href="/faq/">
          <span class="mono about-next__card-key">HELP</span>
          <span class="about-next__card-title">帮助中心目录柜</span>
          <span class="about-next__card-note">六类共 48 条条目，按序号或关键词都能找</span>
        </a>
        <a class="about-next__card" href="/information/">
          <span class="mono about-next__card-key">LOG</span>
          <span class="about-next__card-title">更新公告归档</span>
          <span class="about-next__card-note">输版本号直接跳到那一期，看当期改了什么</span>
        </a>
        <a class="about-next__card" href="/connect/">
          <span class="mono about-next__card-key">LINE</span>
          <span class="about-next__card-title">联系通道</span>
          <span class="about-next__card-note">访问异常、版本核对，来信附上条目号即可</span>
        </a>
      </div>
    </div>
  </section>

</main>

/* ===== 服务总览 · 页面专属样式（作用域 .page-about） ===== */

.page-about {
  --about-rail-w: 212px;
  --about-line: rgba(198, 204, 206, .34);
  display: block;
  overflow-x: clip;
  background: var(--c-paper);
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  position: relative;
  background: var(--c-dai);
  color: var(--c-paper);
  padding: 26px 0 0;
  overflow: hidden;
}

.page-about .about-hero .container {
  position: relative;
  z-index: 2;
  padding-bottom: 90px;
}

.page-about .about-hero .breadcrumb,
.page-about .about-hero .breadcrumb a {
  color: var(--c-silver);
}

.page-about .about-hero .breadcrumb a:hover {
  color: var(--c-amber);
}

.page-about .about-hero .eyebrow {
  color: var(--c-amber);
}

.page-about .about-hero__grid {
  display: grid;
  gap: 34px;
  margin-top: 26px;
}

.page-about .about-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 8.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--c-paper);
  margin: 14px 0 0;
  max-width: 12em;
}

.page-about .about-hero__intro {
  font-size: 17px;
  line-height: 1.88;
  color: var(--c-silver);
  max-width: 34em;
  margin: 20px 0 0;
}

.page-about .about-hero__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--about-line);
}

.page-about .about-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-about .about-hero__fact-num {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--c-amber);
}

.page-about .about-hero__fact-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-silver);
}

.page-about .about-hero__figure {
  margin: 0;
  border: 3px solid var(--c-night);
  box-shadow: 8px 8px 0 var(--c-amber);
}

.page-about .about-hero__ridge {
  display: block;
  width: 100%;
  height: 66px;
  margin-top: -1px;
}

.page-about .about-hero__ridge path {
  fill: var(--c-paper);
}

/* ---------- 年份刻度 + 抽屉流 ---------- */

.page-about .about-chronicle {
  background: var(--c-paper);
  padding: 42px 0 58px;
}

.page-about .about-layout {
  display: grid;
  gap: 26px;
}

.page-about .about-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  border-bottom: 2px solid var(--c-ink);
  -webkit-overflow-scrolling: touch;
}

.page-about .about-rail__label {
  display: none;
}

.page-about .about-rail__link {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 124px;
  padding: 10px 12px;
  border: 2px solid var(--c-silver);
  background: transparent;
  text-decoration: none;
  transition: border-color var(--ease), background-color var(--ease), transform var(--ease);
}

.page-about .about-rail__year {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--c-cinnabar);
}

.page-about .about-rail__text {
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--c-ink);
}

.page-about .about-rail__link:hover,
.page-about .about-rail__link:focus-visible {
  border-color: var(--c-amber);
  background: var(--c-amber-soft);
  transform: translateY(-2px);
}

.page-about .about-stream {
  min-width: 0;
}

.page-about .about-stream__lede {
  font-size: 16px;
  line-height: 1.88;
  color: var(--c-ink);
  border-left: 4px solid var(--c-amber);
  padding: 3px 0 3px 16px;
  margin: 0 0 28px;
  max-width: 42em;
}

.page-about .about-mile {
  position: relative;
  padding: 26px 0 30px;
  border-top: 1px solid var(--c-silver);
}

.page-about .about-mile:first-of-type {
  border-top: 3px solid var(--c-ink);
}

.page-about .about-mile__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 13px;
}

.page-about .about-mile__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: transparent;
  border: 2px solid var(--c-amber);
  transform: rotate(45deg);
  transition: background-color var(--ease), transform var(--ease);
}

.page-about .about-mile:hover .about-mile__dot {
  background: var(--c-amber);
  transform: rotate(45deg) scale(1.18);
}

.page-about .about-mile__year {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--c-dai);
  margin: 0;
}

.page-about .about-mile__kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--c-jade);
  margin-left: auto;
}

.page-about .about-mile__body {
  margin-top: 15px;
}

.page-about .about-mile__body p {
  font-size: 16px;
  line-height: 1.88;
  color: var(--c-ink);
  margin: 0;
  max-width: 62ch;
}

.page-about .about-mile__notes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  margin: 16px 0 0;
  padding: 0;
}

.page-about .about-mile__notes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--c-jade);
}

.page-about .about-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 11px 0;
  border-top: 1px solid var(--c-silver);
  border-bottom: 1px solid var(--c-silver);
}

.page-about .about-stat__label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink);
  opacity: .84;
}

.page-about .about-stat__num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-dai);
  text-align: right;
  white-space: nowrap;
}

/* ---------- 通道关系 ---------- */

.page-about .about-channel {
  background: var(--c-night);
  color: var(--c-paper);
  padding: 54px 0 58px;
}

.page-about .about-channel .eyebrow {
  color: var(--c-amber);
}

.page-about .about-channel__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.4vw, 42px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-paper);
  margin: 12px 0 0;
  max-width: 16em;
}

.page-about .about-channel__lede {
  font-size: 16px;
  line-height: 1.88;
  color: var(--c-silver);
  max-width: 48em;
  margin: 18px 0 0;
}

.page-about .about-channel__board {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.page-about .about-channel__node {
  border: 2px solid var(--c-silver);
  background: rgba(198, 204, 206, .06);
  padding: 20px 18px;
  transition: border-color var(--ease), background-color var(--ease), transform var(--ease);
}

.page-about .about-channel__node:hover {
  border-color: var(--c-amber);
  background: rgba(217, 152, 63, .13);
  transform: translateY(-3px);
}

.page-about .about-channel__node--alt {
  border-style: dashed;
}

.page-about .about-channel__node-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--c-amber);
  margin: 0;
}

.page-about .about-channel__node-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--c-paper);
  margin: 9px 0 0;
}

.page-about .about-channel__node-note {
  font-size: 14px;
  line-height: 1.78;
  color: var(--c-silver);
  margin: 9px 0 0;
}

.page-about .about-channel__seam {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-amber);
}

.page-about .about-channel__seam-line {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-silver) 0 6px, transparent 6px 14px);
}

.page-about .about-channel__seam-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  white-space: nowrap;
}

.page-about .about-channel__foot {
  font-size: 15px;
  line-height: 1.88;
  color: var(--c-silver);
  max-width: 54em;
  margin: 30px 0 0;
}

.page-about .about-channel__foot a {
  color: var(--c-amber-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-about .about-channel__foot a:hover {
  color: var(--c-paper);
}

/* ---------- 规模 ---------- */

.page-about .about-scale {
  background: var(--c-paper);
  padding: 54px 0 18px;
}

.page-about .about-scale h2,
.page-about .about-team h2,
.page-about .about-next h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.2vw, 38px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--c-dai);
  margin: 12px 0 0;
  max-width: 18em;
}

.page-about .about-scale__grid {
  margin-top: 30px;
  border-top: 3px solid var(--c-ink);
}

.page-about .about-scale__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--c-silver);
  transition: background-color var(--ease), padding-left var(--ease);
}

.page-about .about-scale__item:hover {
  background: var(--c-amber-soft);
  padding-left: 14px;
}

.page-about .about-scale__num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 8vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--c-dai);
  margin: 0;
}

.page-about .about-scale__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--c-cinnabar);
  margin: 0;
}

.page-about .about-scale__desc {
  font-size: 15px;
  line-height: 1.82;
  color: var(--c-ink);
  margin: 0;
  max-width: 52ch;
}

/* ---------- 团队 ---------- */

.page-about .about-team {
  background: var(--c-paper);
  padding: 44px 0 60px;
}

.page-about .about-team__grid {
  display: grid;
  gap: 30px;
}

.page-about .about-team__text p {
  font-size: 16px;
  line-height: 1.88;
  color: var(--c-ink);
  max-width: 58ch;
  margin: 16px 0 0;
}

.page-about .about-team__figure {
  margin: 0;
  border: 3px solid var(--c-ink);
  box-shadow: var(--shadow-hard);
}

.page-about .about-bars {
  list-style: none;
  display: grid;
  gap: 17px;
  margin: 40px 0 0;
  padding: 0;
}

.page-about .about-bar__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-ink);
  margin: 0 0 8px;
}

.page-about .about-bar__count {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--c-jade);
}

.page-about .about-bar__track {
  display: block;
  height: 13px;
  background: rgba(16, 26, 30, .07);
  border: 2px solid var(--c-ink);
}

.page-about .about-bar__fill {
  display: block;
  height: 100%;
}

.page-about .about-bar__fill--ops {
  width: 37.5%;
  background: var(--c-amber);
}

.page-about .about-bar__fill--tech {
  width: 28.1%;
  background: var(--c-jade);
}

.page-about .about-bar__fill--index {
  width: 18.8%;
  background: var(--c-silver);
}

.page-about .about-bar__fill--service {
  width: 15.6%;
  background: var(--c-cinnabar);
}

/* ---------- 覆盖范围 ---------- */

.page-about .about-reach {
  background: var(--c-dai);
  color: var(--c-paper);
  padding: 54px 0 0;
}

.page-about .about-reach .eyebrow {
  color: var(--c-amber);
}

.page-about .about-reach__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.4vw, 42px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-paper);
  margin: 12px 0 0;
  max-width: 17em;
}

.page-about .about-reach__lede {
  font-size: 16px;
  line-height: 1.88;
  color: var(--c-silver);
  max-width: 46em;
  margin: 18px 0 0;
}

.page-about .about-reach__stats {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--about-line);
}

.page-about .about-reach__stats li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(198, 204, 206, .2);
}

.page-about .about-reach__stats .mono {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: .02em;
  color: var(--c-amber);
  text-align: right;
}

.page-about .about-reach__stats span:last-child {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-silver);
}

.page-about .about-reach__note {
  font-size: 15px;
  line-height: 1.88;
  color: var(--c-silver);
  max-width: 50em;
  margin: 26px 0 0;
}

.page-about .about-reach__figure {
  margin: 42px 0 0;
  border-top: 3px solid var(--c-night);
}

.page-about .about-reach__figure .media-frame__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  opacity: .92;
}

/* ---------- 下一步 ---------- */

.page-about .about-next {
  background: var(--c-paper);
  padding: 52px 0 66px;
}

.page-about .about-next__grid {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.page-about .about-next__card {
  display: block;
  border: 2px solid var(--c-ink);
  background: #FBF7EE;
  padding: 20px 18px;
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease), background-color var(--ease);
}

.page-about .about-next__card:hover,
.page-about .about-next__card:focus-visible {
  border-color: var(--c-amber);
  background: var(--c-amber-soft);
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.page-about .about-next__card-key {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--c-jade);
}

.page-about .about-next__card-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--c-dai);
  margin-top: 10px;
}

.page-about .about-next__card-note {
  display: block;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-ink);
  margin-top: 8px;
}

/* ---------- 正文链接 ---------- */

.page-about p a {
  color: var(--c-cinnabar);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--ease), background-color var(--ease);
}

.page-about p a:hover {
  color: var(--c-ink);
  background: var(--c-amber-soft);
}

/* ---------- 断点 ---------- */

@media (min-width: 640px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 44px;
    align-items: start;
  }

  .page-about .about-scale__item {
    grid-template-columns: 7em minmax(0, 1fr);
    column-gap: 28px;
    align-items: baseline;
    padding: 24px 0 26px;
  }

  .page-about .about-scale__num {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .page-about .about-scale__name {
    grid-column: 2;
    grid-row: 1;
  }

  .page-about .about-scale__desc {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (min-width: 820px) {
  .page-about .about-channel__board {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
  }

  .page-about .about-channel__seam {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .page-about .about-channel__seam-line {
    width: 2px;
    height: auto;
    flex: 1;
    background: repeating-linear-gradient(180deg, var(--c-silver) 0 6px, transparent 6px 14px);
  }

  .page-about .about-channel__seam-label {
    writing-mode: vertical-rl;
    letter-spacing: .26em;
  }

  .page-about .about-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 42px;
  }

  .page-about .about-reach__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 52px;
  }

  .page-about .about-next__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero {
    padding-top: 32px;
  }

  .page-about .about-hero .container {
    padding-bottom: 108px;
  }

  .page-about .about-layout {
    grid-template-columns: var(--about-rail-w) minmax(0, 1fr);
    gap: 46px;
    align-items: start;
  }

  .page-about .about-rail {
    display: block;
    overflow: visible;
    position: sticky;
    top: 116px;
    border-bottom: 0;
    border-left: 2px solid var(--c-ink);
    padding: 2px 0 2px 16px;
  }

  .page-about .about-rail__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--c-jade);
    margin: 0 0 14px;
  }

  .page-about .about-rail__link {
    min-width: 0;
    display: block;
    margin-bottom: 10px;
    padding: 11px 10px 11px 13px;
    border: 0;
    border-left: 6px solid var(--c-silver);
    background: transparent;
  }

  .page-about .about-rail__link:hover,
  .page-about .about-rail__link:focus-visible {
    border-left-color: var(--c-amber);
    background: var(--c-amber-soft);
    transform: translateX(3px);
  }

  .page-about .about-rail__year {
    display: block;
  }

  .page-about .about-rail__text {
    display: block;
    margin-top: 1px;
  }

  .page-about .about-team__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 50px;
    align-items: start;
  }
}

@media (min-width: 1080px) {
  .page-about .about-hero h1 {
    font-size: 68px;
  }

  .page-about .about-mile__kicker {
    margin-left: 20px;
  }
}