.page-about {
  --ab-line: rgba(200, 162, 74, .26);
  --ab-line-soft: rgba(200, 162, 74, .12);
  --ab-field: #0B2B24;
  --ab-text-soft: rgba(244, 235, 221, .78);
  --ab-text-mute: rgba(244, 235, 221, .66);
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-about .ab-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 52px) 0 clamp(44px, 7vw, 84px);
}

.page-about .ab-hero::before {
  content: "";
  position: absolute;
  top: -16%;
  right: -18%;
  width: min(820px, 96%);
  height: 136%;
  background:
    radial-gradient(circle at 68% 28%, rgba(200, 162, 74, .18), transparent 62%),
    linear-gradient(148deg, rgba(19, 58, 48, .88), rgba(7, 31, 26, 0) 78%);
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.page-about .ab-hero .shell {
  position: relative;
  z-index: 1;
}

.page-about .breadcrumb {
  margin-bottom: clamp(22px, 3.4vw, 38px);
}

.page-about .ab-hero__grid {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
  align-items: end;
}

.page-about .ab-hero__title {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1.16;
  letter-spacing: .01em;
  color: var(--ivory);
}

.page-about .ab-hero__title em {
  font-style: normal;
  color: var(--gold-bright);
}

.page-about .ab-hero__lead {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.9vw, 17px);
  line-height: 1.95;
  color: var(--ab-text-soft);
}

.page-about .ab-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.4vw, 34px);
}

/* 首屏事实卡 */
.page-about .ab-facts {
  list-style: none;
  margin: 0;
  padding: 4px clamp(18px, 3vw, 26px);
  background: var(--glass);
  border: 1px solid var(--ab-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.page-about .ab-facts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: clamp(16px, 2.6vw, 22px) 0;
  border-bottom: 1px solid var(--ab-line-soft);
}

.page-about .ab-facts__item:last-child {
  border-bottom: 0;
}

.page-about .ab-facts__num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 4.4vw, 34px);
  line-height: 1;
  color: var(--gold-bright);
}

.page-about .ab-facts__body {
  display: block;
}

.page-about .ab-facts__label {
  display: block;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--sage);
}

.page-about .ab-facts__text {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ab-text-soft);
}

/* ---------- 章节通用 ---------- */
.page-about .ab-chapter {
  padding: clamp(50px, 8vw, 92px) 0;
  border-top: 1px solid var(--ab-line-soft);
}

.page-about .eyebrow {
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--gold);
  margin: 0;
}

.page-about .ab-chapter__title {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--ivory);
  transition: color .3s var(--ease);
}

.page-about .ab-chapter:target .ab-chapter__title {
  color: var(--gold-bright);
}

.page-about .ab-chapter__lead {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ab-text-soft);
}

/* ---------- 图片 ---------- */
.page-about .ab-figure {
  margin: 0;
  border: 1px solid var(--ab-line);
  background: var(--ab-field);
  overflow: hidden;
}

.page-about .ab-figure__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .ab-figure__cap {
  padding: 12px clamp(14px, 2vw, 18px) 14px;
  border-top: 1px solid var(--ab-line-soft);
  font-size: 13px;
  line-height: 1.7;
  color: var(--sage);
}

/* ---------- 演进 ---------- */
.page-about .ab-journey {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
  margin-top: clamp(28px, 4.4vw, 46px);
}

.page-about .ab-journey__body p {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 2;
  color: var(--ab-text-soft);
}

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

.page-about .ab-journey__key {
  margin-top: 22px !important;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: clamp(16px, 2.2vw, 19px) !important;
  line-height: 1.8 !important;
  color: var(--ivory) !important;
}

/* ---------- 六大栏目 ---------- */
.page-about .ab-columns {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(28px, 4.4vw, 46px);
}

.page-about .ab-columns__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-about .ab-columns__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 4px 18px;
  padding: clamp(16px, 2.4vw, 22px) 0;
  border-top: 1px solid var(--ab-line-soft);
  transition: border-color .3s var(--ease);
}

.page-about .ab-columns__item:last-child {
  border-bottom: 1px solid var(--ab-line-soft);
}

.page-about .ab-columns__item:hover {
  border-top-color: var(--gold);
}

.page-about .ab-columns__mark {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ab-line);
  background: rgba(200, 162, 74, .07);
  font-family: var(--serif);
  font-size: 19px;
  color: var(--gold);
  transition: background .3s var(--ease), color .3s var(--ease);
}

.page-about .ab-columns__item:hover .ab-columns__mark {
  background: rgba(200, 162, 74, .18);
  color: var(--gold-bright);
}

.page-about .ab-columns__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ivory);
}

.page-about .ab-columns__desc {
  margin: 0;
  grid-column: 2;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ab-text-mute);
}

/* ---------- 四类人群 ---------- */
.page-about .ab-people {
  margin-top: clamp(26px, 4vw, 42px);
  border-top: 1px solid var(--ab-line-soft);
}

.page-about .ab-people__row {
  display: grid;
  gap: 6px 20px;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--ab-line-soft);
}

.page-about .ab-people__idx {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  color: rgba(200, 162, 74, .55);
}

.page-about .ab-people__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.5;
  color: var(--ivory);
}

.page-about .ab-people__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ab-text-soft);
}

.page-about .ab-people__link {
  justify-self: start;
  align-self: center;
  padding-bottom: 3px;
  font-size: 14px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--ab-line);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.page-about .ab-people__link:hover,
.page-about .ab-people__link:focus-visible {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}

/* ---------- 节点与规模 ---------- */
.page-about .ab-miles__grid {
  display: grid;
  gap: clamp(32px, 4.6vw, 56px);
  margin-top: clamp(28px, 4.4vw, 46px);
}

.page-about .ab-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
}

.page-about .ab-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(200, 162, 74, .16));
}

.page-about .ab-stage {
  position: relative;
  padding-bottom: clamp(24px, 3.4vw, 34px);
}

.page-about .ab-stage:last-child {
  padding-bottom: 0;
}

.page-about .ab-stage::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 9px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--gold);
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.page-about .ab-stage:hover::before {
  background: var(--gold-bright);
  transform: translateX(-50%) rotate(45deg) scale(1.35);
}

.page-about .ab-stage__year {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.2;
  color: var(--gold-bright);
}

.page-about .ab-stage__name {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ivory);
}

.page-about .ab-stage__desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ab-text-mute);
  transition: color .3s var(--ease);
}

.page-about .ab-stage:hover .ab-stage__desc,
.page-about .ab-stage:focus-within .ab-stage__desc {
  color: var(--ivory);
}

/* 数字卡 */
.page-about .ab-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.6vw, 14px);
  align-content: start;
}

.page-about .ab-stat {
  display: block;
  padding: clamp(18px, 2.6vw, 24px);
  border: 1px solid var(--ab-line);
  background: linear-gradient(160deg, rgba(19, 58, 48, .92), rgba(7, 31, 26, .55));
  text-decoration: none;
  color: inherit;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}

.page-about .ab-stat:hover,
.page-about .ab-stat:focus-visible {
  border-color: var(--gold-bright);
  background: linear-gradient(160deg, rgba(19, 58, 48, 1), rgba(7, 31, 26, .7));
  transform: translateY(-3px);
}

.page-about .ab-stat__num {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1;
  color: var(--gold-bright);
}

.page-about .ab-stat__label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--sage);
}

.page-about .ab-stat__desc {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ab-text-mute);
}

/* ---------- 团队 ---------- */
.page-about .ab-team {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
  margin-top: clamp(26px, 4vw, 42px);
}

.page-about .ab-team__body p {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 2;
  color: var(--ab-text-soft);
}

.page-about .ab-roles {
  list-style: none;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2vw, 20px);
}

.page-about .ab-role {
  padding-left: 14px;
  border-left: 2px solid var(--ab-line);
  transition: border-color .3s var(--ease);
}

.page-about .ab-role:hover {
  border-left-color: var(--gold);
}

.page-about .ab-role__num {
  display: block;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  color: var(--gold-bright);
}

.page-about .ab-role__name {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  color: var(--ivory);
}

.page-about .ab-role__desc {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--sage);
}

/* ---------- 收束 ---------- */
.page-about .ab-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid var(--ab-line);
  background:
    radial-gradient(circle at 16% 22%, rgba(122, 31, 43, .38), transparent 58%),
    var(--ink-deep);
}

.page-about .ab-cta__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.35;
  color: var(--ivory);
}

.page-about .ab-cta__text {
  margin: 14px 0 0;
  max-width: 48ch;
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ab-text-soft);
}

.page-about .ab-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-about .ab-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .ab-roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-about .ab-people__row {
    grid-template-columns: 62px minmax(0, .38fr) minmax(0, 1fr) auto;
    align-items: baseline;
  }
}

@media (min-width: 940px) {
  .page-about .ab-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }

  .page-about .ab-journey {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: start;
  }

  .page-about .ab-columns {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    align-items: start;
  }

  .page-about .ab-columns__aside {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .page-about .ab-miles__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }

  .page-about .ab-team {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-stat,
  .page-about .ab-stage::before,
  .page-about .ab-columns__mark,
  .page-about .ab-chapter__title {
    transition: none;
  }

  .page-about .ab-stat:hover,
  .page-about .ab-stat:focus-visible {
    transform: none;
  }
}
<<<END>>>

等等——输出格式里我不能加 <<<END>>>。最终只输出两个标记块。重新给出，去掉 END。

上面已经写了完整内容，直接按两个标记输出即可。
<main id="main-content" class="page-about">
  <section class="ab-hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="当前位置">
        <a class="breadcrumb__link" href="/">CN版首页</a>
        <span class="breadcrumb__sep" aria-hidden="true">/</span>
        <span aria-current="page">品牌总览</span>
      </nav>

      <div class="ab-hero__grid">
        <div class="ab-hero__main">
          <p class="eyebrow">品牌总览 · 自 2018 年持续运营</p>
          <h1 class="ab-hero__title">新葡京CN版，<em>从一部手机开始</em></h1>
          <p class="ab-hero__lead">
            六大主题内容、会员联系入口、换设备重新登录的指引，全部按小屏的宽度和拇指够得到的位置重新排过。
            第一次来访，或者刚换了新设备，顺着底部那一排入口走过去就行，不必在菜单里来回翻找。
          </p>
          <div class="ab-hero__actions">
            <a class="btn btn--gold" href="/tools/">看看工具中心</a>
            <a class="btn btn--ghost" href="/contact/">联系会员中心</a>
          </div>
        </div>

        <ul class="ab-facts">
          <li class="ab-facts__item">
            <span class="ab-facts__num">2018</span>
            <span class="ab-facts__body">
              <span class="ab-facts__label">起步年份</span>
              <span class="ab-facts__text">以内容站形式服务中文读者，一路运营到今天。</span>
            </span>
          </li>
          <li class="ab-facts__item">
            <span class="ab-facts__num">06</span>
            <span class="ab-facts__body">
              <span class="ab-facts__label">主题栏目</span>
              <span class="ab-facts__text">每栏维护 20 至 40 条内容，按月检查一次入口。</span>
            </span>
          </li>
          <li class="ab-facts__item">
            <span class="ab-facts__num">02</span>
            <span class="ab-facts__body">
              <span class="ab-facts__label">步数</span>
              <span class="ab-facts__text">换设备重新登录，从首页底栏进会员中心再选人群。</span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="ab-chapter" id="chapter-journey" data-reveal>
    <div class="shell">
      <header class="ab-chapter__head">
        <p class="eyebrow">01 — 一路走来</p>
        <h2 class="ab-chapter__title">从一张电脑网页，走到您的掌心</h2>
      </header>

      <div class="ab-journey">
        <div class="ab-journey__body">
          <p>
            2018 年，我们从内容站起步。那时候大部分访问发生在电脑上，栏目按宽屏铺开，一屏能看到十几条，
            找什么都靠鼠标扫一遍。
          </p>
          <p>
            手机一普及，同样的版面露在窄屏上就变得局促：标题挤成两行，正文要来回缩放，想找一个入口得翻上好几屏。
            2021 年，我们下决心改版——主导航收进屏幕底部，最常用的入口固定住，标题放大，行距拉开，
            让一屏只安放一件事。
          </p>
          <p>
            2024 年，CN 版上线。简体中文的用词重新校对过一遍，字号和点击区域按 4.7 至 7.2 英寸的常见手机屏重新排布。
            首屏在平常的 4G 网络下，1.8 秒内能把主要内容呈现出来，等人等车的间隙也够看。
          </p>
          <p class="ab-journey__key">
            把入口放到屏幕最下面，理由很朴素：单手握手机时，那里离拇指最近。
          </p>
        </div>

        <figure class="ab-figure">
          <img class="ab-figure__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深绿背景中并置手机屏幕与抽象页面轮廓，金色线条连接电脑与手机两端" loading="lazy" decoding="async">
          <figcaption class="ab-figure__cap">从宽屏版面到小屏入口，排版的每一次调整都围绕拇指的落点。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="ab-chapter" id="chapter-columns" data-reveal>
    <div class="shell">
      <header class="ab-chapter__head">
        <p class="eyebrow">02 — 内容体系</p>
        <h2 class="ab-chapter__title">六个栏目，六件具体的事</h2>
        <p class="ab-chapter__lead">
          每一栏都配了固定的图标和标签，扫一眼就知道该往哪点。栏目之间彼此指路，遇到关联的话题可以直接跳过去看。
        </p>
      </header>

      <div class="ab-columns">
        <div class="ab-columns__aside">
          <figure class="ab-figure">
            <img class="ab-figure__img" src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="六个带金色标记的圆形节点围绕中心玻璃层排列" loading="lazy" decoding="async">
            <figcaption class="ab-figure__cap">六栏并立，各管一件事，读者按需要挑一栏进去。</figcaption>
          </figure>
        </div>

        <ul class="ab-columns__list">
          <li class="ab-columns__item">
            <span class="ab-columns__mark" aria-hidden="true">动</span>
            <h3 class="ab-columns__name">品牌动态</h3>
            <p class="ab-columns__desc">版本更新、栏目调整、平台走到哪一步，按时间顺序记在这里，翻一翻就知道最近发生了什么。</p>
          </li>
          <li class="ab-columns__item">
            <span class="ab-columns__mark" aria-hidden="true">移</span>
            <h3 class="ab-columns__name">移动体验</h3>
            <p class="ab-columns__desc">小屏怎么排版、按钮留多大、单手怎么够到，写成可以照着做的说明，遇到显示别扭时能自己调。</p>
          </li>
          <li class="ab-columns__item">
            <span class="ab-columns__mark" aria-hidden="true">会</span>
            <h3 class="ab-columns__name">会员服务</h3>
            <p class="ab-columns__desc">会员中心在哪一格、有哪几种联系方式、什么时段有人应答，集中讲清楚，不用猜。</p>
          </li>
          <li class="ab-columns__item">
            <span class="ab-columns__mark" aria-hidden="true">群</span>
            <h3 class="ab-columns__name">人群指引</h3>
            <p class="ab-columns__desc">按身份找入口：第一次来、长期使用、家里多人共用一台设备、换了新手机，各有对应的一条路。</p>
          </li>
          <li class="ab-columns__item">
            <span class="ab-columns__mark" aria-hidden="true">助</span>
            <h3 class="ab-columns__name">使用帮助</h3>
            <p class="ab-columns__desc">换设备登录、底栏入口定位这类问题，分成五类整理成 32 个问答，一步一步写清楚。</p>
          </li>
          <li class="ab-columns__item">
            <span class="ab-columns__mark" aria-hidden="true">告</span>
            <h3 class="ab-columns__name">服务公告</h3>
            <p class="ab-columns__desc">服务时间调整、功能上线、例行检查的安排，提前放出来，让您有个准备。</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="ab-chapter" id="chapter-people" data-reveal>
    <div class="shell">
      <header class="ab-chapter__head">
        <p class="eyebrow">03 — 找到自己的路径</p>
        <h2 class="ab-chapter__title">四种常用的打开方式</h2>
        <p class="ab-chapter__lead">
          不同的人进来，想办的事不一样。下面四种最常见，每一种都配了一条短路径，照着走就到了。
        </p>
      </header>

      <div class="ab-people">
        <div class="ab-people__row">
          <span class="ab-people__idx">01</span>
          <h3 class="ab-people__name">第一次到访</h3>
          <p class="ab-people__desc">想先弄清这里有什么。从首页往下走，栏目介绍、常见问题、联系方式都在首屏之后，不必留下任何信息就能看。</p>
          <a class="ab-people__link" href="/tools/">看工具中心</a>
        </div>
        <div class="ab-people__row">
          <span class="ab-people__idx">02</span>
          <h3 class="ab-people__name">长期使用的会员</h3>
          <p class="ab-people__desc">对内容已经很熟，多数时候直接找会员中心。首页底栏第二格就是入口，邮箱与电话两种联系方式都通。</p>
          <a class="ab-people__link" href="/contact/">联系会员中心</a>
        </div>
        <div class="ab-people__row">
          <span class="ab-people__idx">03</span>
          <h3 class="ab-people__name">家庭共用设备</h3>
          <p class="ab-people__desc">一台平板或客厅里的电脑，几个人轮流用。每回从底栏重新选一次人群类型，各自回到自己的路径，互不打扰。</p>
          <a class="ab-people__link" href="/tools/">看人群指引</a>
        </div>
        <div class="ab-people__row">
          <span class="ab-people__idx">04</span>
          <h3 class="ab-people__name">跨设备登录</h3>
          <p class="ab-people__desc">换了新手机，或者从手机换到平板。从底栏进会员中心，再点一下人群类型，两步回到原来的位置，中间不用绕。</p>
          <a class="ab-people__link" href="/help/">看常见问题</a>
        </div>
      </div>
    </div>
  </section>

  <section class="ab-chapter" id="chapter-milestones" data-reveal>
    <div class="shell">
      <header class="ab-chapter__head">
        <p class="eyebrow">04 — 节点与规模</p>
        <h2 class="ab-chapter__title">一年一年，把路走短</h2>
        <p class="ab-chapter__lead">
          几个节点决定了今天的入口位置。今天，访问来自全国 31 个省区市的中文用户，内容每周更新 2 至 3 次。
        </p>
      </header>

      <div class="ab-miles">
        <div class="ab-miles__grid">
          <ol class="ab-timeline">
            <li class="ab-stage">
              <span class="ab-stage__year">2018</span>
              <span class="ab-stage__name">起步</span>
              <p class="ab-stage__desc">内容站上线，按主题划分栏目，逐周更新，先把内容做扎实。</p>
            </li>
            <li class="ab-stage">
              <span class="ab-stage__year">2021</span>
              <span class="ab-stage__name">转向小屏</span>
              <p class="ab-stage__desc">移动端改版，主导航收进底部，首屏让位给大字号标题，一屏只讲一件事。</p>
            </li>
            <li class="ab-stage">
              <span class="ab-stage__year">2024</span>
              <span class="ab-stage__name">CN 版上线</span>
              <p class="ab-stage__desc">简体中文界面与 4.7 至 7.2 英寸屏幕适配完成，人群切换指引成型，换设备的路径缩到两步。</p>
            </li>
            <li class="ab-stage">
              <span class="ab-stage__year">现在</span>
              <span class="ab-stage__name">稳定运营</span>
              <p class="ab-stage__desc">每周 2 至 3 次更新，每月做一次链接与入口检查，让您点进来的每一格都通着。</p>
            </li>
          </ol>

          <div class="ab-stats">
            <a class="ab-stat" href="#chapter-columns">
              <span class="ab-stat__num">06</span>
              <span class="ab-stat__label">主题栏目</span>
              <span class="ab-stat__desc">每栏 20 至 40 条内容，图标加标签，方便快速定位。</span>
            </a>
            <a class="ab-stat" href="#chapter-columns">
              <span class="ab-stat__num">48</span>
              <span class="ab-stat__label">期专题</span>
              <span class="ab-stat__desc">覆盖小屏阅读、入口设计与人群场景三个方向。</span>
            </a>
            <a class="ab-stat" href="#chapter-people">
              <span class="ab-stat__num">32</span>
              <span class="ab-stat__label">个常见问答</span>
              <span class="ab-stat__desc">按设备切换、入口定位、会员联系等五类整理。</span>
            </a>
            <a class="ab-stat" href="#chapter-team">
              <span class="ab-stat__num">36</span>
              <span class="ab-stat__label">人在岗</span>
              <span class="ab-stat__desc">内容编辑、客户支持、技术与体验三个方向。</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="ab-chapter" id="chapter-team" data-reveal>
    <div class="shell">
      <header class="ab-chapter__head">
        <p class="eyebrow">05 — 背后的人</p>
        <h2 class="ab-chapter__title">36 个人，守着每周的更新</h2>
      </header>

      <div class="ab-team">
        <figure class="ab-figure">
          <img class="ab-figure__img" src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="桌面上亮着的屏幕、摊开的笔记本与暖色灯光" loading="lazy" decoding="async">
          <figcaption class="ab-figure__cap">编辑、客服与技术三个方向的人，每天围着同一批页面转。</figcaption>
        </figure>

        <div class="ab-team__body">
          <p>
            团队分三块。12 位内容编辑负责选题、撰稿和栏目维护，每周固定排期，不会让某一栏长时间空着；
            18 位客户支持在工作日 9:00 至 18:00 接听电话、回复邮件，设备切换和入口定位的问题答得最多；
            6 位技术与体验同事盯着加载速度、屏幕适配和入口位置，改版和上线都由他们收尾。
          </p>
          <p>
            写信或留言时，把设备类型和出问题的页面名称一并说明，回复会快很多——这一点比什么都管用。
          </p>

          <ul class="ab-roles">
            <li class="ab-role">
              <span class="ab-role__num">12</span>
              <span class="ab-role__name">内容编辑</span>
              <span class="ab-role__desc">选题、撰稿、栏目维护</span>
            </li>
            <li class="ab-role">
              <span class="ab-role__num">18</span>
              <span class="ab-role__name">客户支持</span>
              <span class="ab-role__desc">电话与邮件应答、问题跟进</span>
            </li>
            <li class="ab-role">
              <span class="ab-role__num">06</span>
              <span class="ab-role__name">技术与体验</span>
              <span class="ab-role__desc">加载速度、屏幕适配、入口位置</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="ab-cta">
    <div class="shell">
      <h2 class="ab-cta__title">想先看看具体怎么用？</h2>
      <p class="ab-cta__text">
        工具中心已经按人群分好了入口，帮助中心里是分步说明。要是还有没说清的地方，打电话或写邮件都行，
        工作日的 9:00 至 18:00 有人在。
      </p>
      <div class="ab-cta__actions">
        <a class="btn btn--gold" href="/tools/">前往工具中心</a>
        <a class="btn btn--ghost" href="/contact/">联系我们</a>
      </div>
    </div>
  </section>
</main>

.page-about {
  --ab-line: rgba(200, 162, 74, .26);
  --ab-line-soft: rgba(200, 162, 74, .12);
  --ab-field: #0B2B24;
  --ab-text-soft: rgba(244, 235, 221, .78);
  --ab-text-mute: rgba(244, 235, 221, .66);
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-about .ab-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 52px) 0 clamp(44px, 7vw, 84px);
}

.page-about .ab-hero::before {
  content: "";
  position: absolute;
  top: -16%;
  right: -18%;
  width: min(820px, 96%);
  height: 136%;
  background:
    radial-gradient(circle at 68% 28%, rgba(200, 162, 74, .18), transparent 62%),
    linear-gradient(148deg, rgba(19, 58, 48, .88), rgba(7, 31, 26, 0) 78%);
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.page-about .ab-hero .shell {
  position: relative;
  z-index: 1;
}

.page-about .breadcrumb {
  margin-bottom: clamp(22px, 3.4vw, 38px);
}

.page-about .ab-hero__grid {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
  align-items: end;
}

.page-about .ab-hero__title {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1.16;
  letter-spacing: .01em;
  color: var(--ivory);
}

.page-about .ab-hero__title em {
  font-style: normal;
  color: var(--gold-bright);
}

.page-about .ab-hero__lead {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.9vw, 17px);
  line-height: 1.95;
  color: var(--ab-text-soft);
}

.page-about .ab-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.4vw, 34px);
}

/* 首屏事实卡 */
.page-about .ab-facts {
  list-style: none;
  margin: 0;
  padding: 4px clamp(18px, 3vw, 26px);
  background: var(--glass);
  border: 1px solid var(--ab-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.page-about .ab-facts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: clamp(16px, 2.6vw, 22px) 0;
  border-bottom: 1px solid var(--ab-line-soft);
}

.page-about .ab-facts__item:last-child {
  border-bottom: 0;
}

.page-about .ab-facts__num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 4.4vw, 34px);
  line-height: 1;
  color: var(--gold-bright);
}

.page-about .ab-facts__body {
  display: block;
}

.page-about .ab-facts__label {
  display: block;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--sage);
}

.page-about .ab-facts__text {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ab-text-soft);
}

/* ---------- 章节通用 ---------- */
.page-about .ab-chapter {
  padding: clamp(50px, 8vw, 92px) 0;
  border-top: 1px solid var(--ab-line-soft);
}

.page-about .eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--gold);
}

.page-about .ab-chapter__title {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--ivory);
  transition: color .3s var(--ease);
}

.page-about .ab-chapter:target .ab-chapter__title {
  color: var(--gold-bright);
}

.page-about .ab-chapter__lead {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ab-text-soft);
}

/* ---------- 图片 ---------- */
.page-about .ab-figure {
  margin: 0;
  border: 1px solid var(--ab-line);
  background: var(--ab-field);
  overflow: hidden;
}

.page-about .ab-figure__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .ab-figure__cap {
  padding: 12px clamp(14px, 2vw, 18px) 14px;
  border-top: 1px solid var(--ab-line-soft);
  font-size: 13px;
  line-height: 1.7;
  color: var(--sage);
}

/* ---------- 演进 ---------- */
.page-about .ab-journey {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
  margin-top: clamp(28px, 4.4vw, 46px);
}

.page-about .ab-journey__body p {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 2;
  color: var(--ab-text-soft);
}

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

.page-about .ab-journey__key {
  margin-top: 22px !important;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: clamp(16px, 2.2vw, 19px) !important;
  line-height: 1.8 !important;
  color: var(--ivory) !important;
}

/* ---------- 六大栏目 ---------- */
.page-about .ab-columns {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(28px, 4.4vw, 46px);
}

.page-about .ab-columns__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-about .ab-columns__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 4px 18px;
  padding: clamp(16px, 2.4vw, 22px) 0;
  border-top: 1px solid var(--ab-line-soft);
  transition: border-color .3s var(--ease);
}

.page-about .ab-columns__item:last-child {
  border-bottom: 1px solid var(--ab-line-soft);
}

.page-about .ab-columns__item:hover {
  border-top-color: var(--gold);
}

.page-about .ab-columns__mark {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ab-line);
  background: rgba(200, 162, 74, .07);
  font-family: var(--serif);
  font-size: 19px;
  color: var(--gold);
  transition: background .3s var(--ease), color .3s var(--ease);
}

.page-about .ab-columns__item:hover .ab-columns__mark {
  background: rgba(200, 162, 74, .18);
  color: var(--gold-bright);
}

.page-about .ab-columns__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ivory);
}

.page-about .ab-columns__desc {
  grid-column: 2;
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ab-text-mute);
}

/* ---------- 四类人群 ---------- */
.page-about .ab-people {
  margin-top: clamp(26px, 4vw, 42px);
  border-top: 1px solid var(--ab-line-soft);
}

.page-about .ab-people__row {
  display: grid;
  gap: 6px 20px;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--ab-line-soft);
}

.page-about .ab-people__idx {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  color: rgba(200, 162, 74, .55);
}

.page-about .ab-people__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.5;
  color: var(--ivory);
}

.page-about .ab-people__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ab-text-soft);
}

.page-about .ab-people__link {
  justify-self: start;
  align-self: center;
  padding-bottom: 3px;
  font-size: 14px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--ab-line);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.page-about .ab-people__link:hover,
.page-about .ab-people__link:focus-visible {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}

/* ---------- 节点与规模 ---------- */
.page-about .ab-miles__grid {
  display: grid;
  gap: clamp(32px, 4.6vw, 56px);
  margin-top: clamp(28px, 4.4vw, 46px);
}

.page-about .ab-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
}

.page-about .ab-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(200, 162, 74, .16));
}

.page-about .ab-stage {
  position: relative;
  padding-bottom: clamp(24px, 3.4vw, 34px);
}

.page-about .ab-stage:last-child {
  padding-bottom: 0;
}

.page-about .ab-stage::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 9px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--gold);
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.page-about .ab-stage:hover::before {
  background: var(--gold-bright);
  transform: translateX(-50%) rotate(45deg) scale(1.35);
}

.page-about .ab-stage__year {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.2;
  color: var(--gold-bright);
}

.page-about .ab-stage__name {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ivory);
}

.page-about .ab-stage__desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ab-text-mute);
  transition: color .3s var(--ease);
}

.page-about .ab-stage:hover .ab-stage__desc,
.page-about .ab-stage:focus-within .ab-stage__desc {
  color: var(--ivory);
}

/* 数字卡 */
.page-about .ab-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.6vw, 14px);
  align-content: start;
}

.page-about .ab-stat {
  display: block;
  padding: clamp(18px, 2.6vw, 24px);
  border: 1px solid var(--ab-line);
  background: linear-gradient(160deg, rgba(19, 58, 48, .92), rgba(7, 31, 26, .55));
  text-decoration: none;
  color: inherit;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}

.page-about .ab-stat:hover,
.page-about .ab-stat:focus-visible {
  border-color: var(--gold-bright);
  background: linear-gradient(160deg, rgba(19, 58, 48, 1), rgba(7, 31, 26, .7));
  transform: translateY(-3px);
}

.page-about .ab-stat__num {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1;
  color: var(--gold-bright);
}

.page-about .ab-stat__label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--sage);
}

.page-about .ab-stat__desc {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ab-text-mute);
}

/* ---------- 团队 ---------- */
.page-about .ab-team {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
  margin-top: clamp(26px, 4vw, 42px);
}

.page-about .ab-team__body p {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 2;
  color: var(--ab-text-soft);
}

.page-about .ab-roles {
  list-style: none;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2vw, 20px);
}

.page-about .ab-role {
  padding-left: 14px;
  border-left: 2px solid var(--ab-line);
  transition: border-color .3s var(--ease);
}

.page-about .ab-role:hover {
  border-left-color: var(--gold);
}

.page-about .ab-role__num {
  display: block;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  color: var(--gold-bright);
}

.page-about .ab-role__name {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  color: var(--ivory);
}

.page-about .ab-role__desc {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--sage);
}

/* ---------- 收束 ---------- */
.page-about .ab-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid var(--ab-line);
  background:
    radial-gradient(circle at 16% 22%, rgba(122, 31, 43, .38), transparent 58%),
    var(--ink-deep);
}

.page-about .ab-cta__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.35;
  color: var(--ivory);
}

.page-about .ab-cta__text {
  margin: 14px 0 0;
  max-width: 48ch;
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ab-text-soft);
}

.page-about .ab-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-about .ab-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .ab-roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-about .ab-people__row {
    grid-template-columns: 62px minmax(0, .38fr) minmax(0, 1fr) auto;
    align-items: baseline;
  }
}

@media (min-width: 940px) {
  .page-about .ab-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }

  .page-about .ab-journey {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: start;
  }

  .page-about .ab-columns {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    align-items: start;
  }

  .page-about .ab-columns__aside {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .page-about .ab-miles__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }

  .page-about .ab-team {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-stat,
  .page-about .ab-stage::before,
  .page-about .ab-columns__mark,
  .page-about .ab-chapter__title {
    transition: none;
  }

  .page-about .ab-stat:hover,
  .page-about .ab-stat:focus-visible {
    transform: none;
  }
}