.page-about {
  --about-gap: clamp(18px, 3vw, 28px);
  --about-measure: 640px;
}

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

.page-about .about-hero {
  padding-top: clamp(6px, 1.4vw, 16px);
  padding-bottom: clamp(42px, 6vw, 84px);
}

.page-about .bd-breadcrumb {
  margin-bottom: clamp(20px, 3vw, 34px);
}

.page-about .about-hero__grid {
  display: grid;
  gap: var(--about-gap);
}

.page-about .about-hero__rail {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.page-about .about-hero__rail::-webkit-scrollbar {
  display: none;
}

.page-about .about-tick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel);
}
.page-about .about-tick__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lane);
}
.page-about .about-tick.is-now .about-tick__dot {
  background: var(--amber);
}
.page-about .about-tick.is-now .about-tick__yr {
  color: var(--amber);
}

.page-about .about-hero__body > .bd-eyebrow {
  margin: 0 0 12px;
}

.page-about .about-hero__body h1 {
  margin: 0 0 clamp(16px, 2.2vw, 26px);
}

.page-about .about-hero__body .bd-lede {
  max-width: 54ch;
  margin: 0;
  color: var(--steel);
}

.page-about .about-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(24px, 3.4vw, 38px) 0 0;
  padding: 0;
  background: var(--lane);
  border: 1px solid var(--lane);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-about .about-figures__item {
  background: var(--cabin);
  padding: 15px 16px 17px;
}

.page-about .about-figures__item dt {
  margin-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--steel);
}

.page-about .about-figures__item dd {
  margin: 0;
  line-height: 1;
}

.page-about .about-figures__num {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.6vw, 27px);
  color: var(--amber);
  letter-spacing: -0.01em;
}

.page-about .about-figures__unit {
  margin-left: 5px;
  font-size: 12px;
  color: var(--steel);
}

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

/* ---------- 做事方式 ---------- */

.page-about .about-method__grid {
  display: grid;
  gap: clamp(28px, 4.5vw, 52px);
}

.page-about .about-method__text {
  max-width: var(--about-measure);
}

.page-about .about-method__text h2 {
  margin: 0 0 clamp(18px, 2.4vw, 26px);
}

.page-about .about-method__text p {
  margin: 0 0 1.1em;
  color: var(--mist);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
}

.page-about .about-quote {
  margin: clamp(26px, 3.4vw, 38px) 0 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--amber);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.page-about .about-method__media {
  margin: 0;
}

.page-about .about-method__media .bd-media {
  border-radius: var(--radius);
  overflow: hidden;
}

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

.page-about .bd-media__caption {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--steel);
}

/* ---------- 三支队伍 ---------- */

.page-about .about-team__media {
  margin: clamp(20px, 3vw, 32px) 0 0;
}

.page-about .about-team__media .bd-media {
  border-radius: var(--radius);
  overflow: hidden;
}

.page-about .about-team__list {
  list-style: none;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .about-team__card {
  position: relative;
  padding: 22px 20px 24px;
  background: var(--cabin);
  border: 1px solid var(--lane);
  border-left: 2px solid var(--lane);
  border-radius: var(--radius);
  transition: transform var(--dur) ease, background-color var(--dur) ease, border-color var(--dur) ease;
}

.page-about .about-team__card:hover,
.page-about .about-team__card:focus-within,
.page-about .about-team__card:focus {
  transform: translateY(-4px);
  background: var(--lane);
  border-left-color: var(--amber);
  outline: none;
}

.page-about .about-team__no {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.page-about .about-team__card h3 {
  margin: 0 0 5px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--mist);
}

.page-about .about-team__meta {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--steel);
}

.page-about .about-team__card > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel);
}

.page-about .about-team__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 15px 0 0;
  padding: 0;
}

/* ---------- 时间线 ---------- */

.page-about .about-timeline__scroller {
  margin-top: clamp(18px, 2.6vw, 28px);
  margin-inline: calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.page-about .about-timeline__track {
  position: relative;
  display: flex;
  gap: 16px;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 6px 0 12px;
  list-style: none;
}

.page-about .about-timeline__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--lane) 0%, rgba(242, 178, 62, 0.55) 45%, var(--lane) 100%);
}

.page-about .about-timeline__item {
  position: relative;
  flex: 0 0 auto;
  width: min(286px, 76vw);
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-about .about-timeline__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
}

.page-about .about-timeline__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px rgba(242, 178, 62, 0.32);
}

.page-about .about-timeline__year {
  display: inline-block;
  padding: 3px 9px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.page-about .about-timeline__card {
  padding: 16px 18px 18px;
  background: var(--cabin);
  border: 1px solid var(--lane);
  border-radius: var(--radius);
  transition: transform var(--dur) ease, border-color var(--dur) ease;
}

.page-about .about-timeline__card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 178, 62, 0.6);
}

.page-about .about-timeline__card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--mist);
}

.page-about .about-timeline__card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel);
}

/* ---------- 每周归档 ---------- */

.page-about .about-weekly__grid {
  display: grid;
  gap: clamp(28px, 4.5vw, 52px);
}

.page-about .about-weekly__text h2 {
  margin: 0 0 clamp(14px, 2vw, 20px);
}

.page-about .about-weekly__lede {
  margin: 0;
  max-width: 58ch;
  color: var(--steel);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
}

.page-about .about-steps {
  list-style: none;
  display: grid;
  gap: 1px;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  background: var(--lane);
  border: 1px solid var(--lane);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-about .about-steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 14px;
  align-items: baseline;
  padding: 16px 18px 18px;
  background: var(--cabin);
}

.page-about .about-steps__no {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.page-about .about-steps__item h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--mist);
}

.page-about .about-steps__item p {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel);
}

.page-about .about-weekly__media {
  margin: 0;
}

.page-about .about-weekly__media .bd-media {
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- 合作与年度策划 ---------- */

.page-about .about-partners__grid {
  display: grid;
  gap: 16px;
  margin-top: clamp(22px, 3vw, 34px);
}

.page-about .about-partners__col {
  padding: 24px 22px 26px;
  background: var(--cabin);
  border: 1px solid var(--lane);
  border-radius: var(--radius);
}

.page-about .about-partners__col h3 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.35;
  color: var(--mist);
}

.page-about .about-partners__col p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--steel);
}

.page-about .about-partners__col--alt {
  background: var(--paper);
  border-color: var(--paper);
}

.page-about .about-partners__col--alt h3 {
  color: var(--ink);
}

.page-about .about-partners__col--alt p {
  color: var(--ink);
  opacity: 0.74;
}

.page-about .about-partners__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}

/* ---------- 收束 ---------- */

.page-about .about-cta {
  padding: 0 0 clamp(50px, 7vw, 96px);
}

.page-about .about-cta__inner {
  padding: clamp(26px, 4vw, 48px);
  background: linear-gradient(140deg, var(--cabin) 0%, var(--ink) 72%);
  border: 1px solid var(--lane);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius);
}

.page-about .about-cta__inner h2 {
  margin: 0 0 14px;
}

.page-about .about-cta__inner p {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: var(--steel);
}

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

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

@media (min-width: 768px) {
  .page-about .about-figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .about-team__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .page-about .about-partners__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .page-about .about-hero__grid {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: clamp(30px, 4vw, 56px);
    align-items: start;
  }
  .page-about .about-hero__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    overflow: visible;
    padding: 8px 0 0;
  }

  .page-about .about-method__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
  .page-about .about-method__media {
    position: sticky;
    top: 128px;
  }

  .page-about .about-weekly__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
}

@media (min-width: 1320px) {
  .page-about .about-timeline__scroller {
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-team__card,
  .page-about .about-timeline__card {
    transition: none;
  }
  .page-about .about-team__card:hover,
  .page-about .about-team__card:focus,
  .page-about .about-team__card:focus-within,
  .page-about .about-timeline__card:hover {
    transform: none;
  }
}
<<<END>>>

慢着，我不该加 `<<<END>>>`。按指令，只输出两个标记。让我重新正确地输出一遍。

其实我是想检查一下——输出格式要求 `<MAIN_HTML>` 然后是 `<PAGE_CSS>`，每个只出现一次，用三重尖括号。我刚才加了 `<<<END>>>`，得去掉。

让我仔细重写最终版。

另外再复核一遍：`.page-about .bd-media__img`——我是在 `.page-about .bd-media__img` 作用域里定义 `.bd-media__img`，这没问题。

还有 `.page-about` 作用域里没用到 `--about-measure`？用到了。

`<` 和 `>` 字符没问题。

另外我用了 var(--gutter)、var(--lane) 这些，按 design_tokens 都是存在的：--ink、--cabin、--lane、--amber、--signal、--steel、--mist、--teal、--paper、--font-sans、--font-mono、--w-max、--gutter、--radius、--shadow、--dur。好。

注意：`--teal` 和 `--shadow`、`--w-max` 没用上——没关系。

输出。
<main id="main-content" class="bd-main page-about">

  <section class="about-hero" aria-labelledby="about-hero-title">
    <div class="bd-container">

      <nav class="bd-breadcrumb" aria-label="当前位置">
        <ol class="bd-breadcrumb__list">
          <li class="bd-breadcrumb__item"><a class="bd-breadcrumb__link" href="/">首页</a></li>
          <li class="bd-breadcrumb__item"><span class="bd-breadcrumb__current" aria-current="page">品牌文化</span></li>
        </ol>
      </nav>

      <div class="about-hero__grid">
        <div class="about-hero__rail" aria-hidden="true">
          <span class="about-tick"><span class="about-tick__dot"></span><span class="about-tick__yr">2016</span></span>
          <span class="about-tick"><span class="about-tick__dot"></span><span class="about-tick__yr">2018</span></span>
          <span class="about-tick"><span class="about-tick__dot"></span><span class="about-tick__yr">2020</span></span>
          <span class="about-tick"><span class="about-tick__dot"></span><span class="about-tick__yr">2022</span></span>
          <span class="about-tick is-now"><span class="about-tick__dot"></span><span class="about-tick__yr">2024</span></span>
        </div>

        <div class="about-hero__body">
          <p class="bd-eyebrow">团队 · 方法 · 九年</p>
          <h1 class="bd-display" id="about-hero-title">九年，把一条路线走成了习惯</h1>
          <p class="bd-lede">北单网页版从 2016 年上线到现在，一直在做同一件事：把入口、案例、资料和工具价格排成一条你能反复走的路线。每周三，上一周的内容归位，等你回来。</p>

          <dl class="about-figures">
            <div class="about-figures__item">
              <dt>上线年份</dt>
              <dd><span class="about-figures__num">2016</span></dd>
            </div>
            <div class="about-figures__item">
              <dt>注册用户</dt>
              <dd><span class="about-figures__num">12.4</span><span class="about-figures__unit">万</span></dd>
            </div>
            <div class="about-figures__item">
              <dt>每周活跃</dt>
              <dd><span class="about-figures__num">3.6</span><span class="about-figures__unit">万</span></dd>
            </div>
            <div class="about-figures__item">
              <dt>年度观察报告</dt>
              <dd><span class="about-figures__num">7</span><span class="about-figures__unit">份</span></dd>
            </div>
          </dl>

          <div class="about-hero__actions">
            <a class="bd-btn bd-btn--primary" href="/topics/">看本周归档</a>
            <a class="bd-btn bd-btn--ghost" href="/guide/">上手怎么做</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="about-method bd-section" aria-labelledby="about-method-title" data-reveal>
    <div class="bd-container">
      <div class="about-method__grid">

        <div class="about-method__text">
          <p class="bd-eyebrow">01 / 做事方式</p>
          <h2 class="bd-h2" id="about-method-title">先自己走一遍，再把路画给你</h2>

          <p>第一次来的人，想两步就摸到内容中心；每周都来的人，想一进门就看见这一周新添了什么。这两种心思我们都替你算过——让熟客少绕路，靠的不是把东西做得更多，而是一直摆在原来的位置上。</p>

          <p>栏目要留下来，得每周真能产出东西；线路要留下来，得有人真的在用。所以我们宁肯把一个栏目做满一年，也不愿意一次开出十个、半个月没人管。你翻回去看三个月前的归档，它还在那里，格式和今天一样，能读、能用、能接着往下比。</p>

          <p>工具和价格这块我们更直接：四个档位摆在一张表上，差在哪儿一眼能看到，不用来回问人。想先拿免费版试试水，也完全可以。</p>

          <blockquote class="about-quote">一条路线画得好不好，看的是第一百次回来的时候，你还愿不愿意走它。</blockquote>
        </div>

        <figure class="about-method__media">
          <div class="bd-media">
            <img class="bd-media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="俯拍纸面上的手绘路线与刻度标记，几条折线在节点处交汇">
          </div>
          <p class="bd-media__caption">每一版路线图的底稿：先手绘，再落到页面上。</p>
        </figure>

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

  <section class="about-team bd-section" aria-labelledby="about-team-title" data-reveal>
    <div class="bd-container">

      <div class="bd-section__head">
        <p class="bd-eyebrow">02 / 三支队伍</p>
        <h2 class="bd-h2" id="about-team-title">三支队伍，一个节奏</h2>
        <p class="bd-section__note">内容编辑、工具研发、客户服务，三支队伍一共 36 人，每周三一起交一次作业。</p>
      </div>

      <figure class="about-team__media">
        <div class="bd-media">
          <img class="bd-media__img" src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="俯拍斜角的编辑工作台，摊开的笔记本、便签与资料夹，暖光" loading="lazy" decoding="async">
        </div>
        <p class="bd-media__caption">周一上午的选题会：左边是上周的数据，右边是这周要做的清单。</p>
      </figure>

      <ul class="about-team__list">
        <li class="about-team__card" tabindex="0">
          <span class="about-team__no">01 / EDITORIAL</span>
          <h3>内容编辑</h3>
          <p class="about-team__meta">17 人 · 选题与成稿</p>
          <p>定选题、写复盘、跑数据周报、做专题策划。每周发什么、什么时候发，由他们拍板。</p>
          <ul class="about-team__tags">
            <li class="bd-chip bd-chip--amber">案例复盘</li>
            <li class="bd-chip bd-chip--amber">数据周报</li>
            <li class="bd-chip bd-chip--amber">专题策划</li>
          </ul>
        </li>
        <li class="about-team__card" tabindex="0">
          <span class="about-team__no">02 / ENGINEERING</span>
          <h3>工具研发</h3>
          <p class="about-team__meta">13 人 · 客户端与看板</p>
          <p>维护数据看板、周期对比、归档检索和批量导出。装不装软件都能用，浏览器端一直留着。</p>
          <ul class="about-team__tags">
            <li class="bd-chip bd-chip--amber">数据看板</li>
            <li class="bd-chip bd-chip--amber">周期对比</li>
            <li class="bd-chip bd-chip--amber">批量导出</li>
          </ul>
        </li>
        <li class="about-team__card" tabindex="0">
          <span class="about-team__no">03 / SUPPORT</span>
          <h3>客户服务</h3>
          <p class="about-team__meta">6 人 · 在线答疑</p>
          <p>进门进不去、资料打不开、订阅想换个档位，找他们。工作日 10:00–18:00 都有人接。</p>
          <ul class="about-team__tags">
            <li class="bd-chip bd-chip--amber">线路排查</li>
            <li class="bd-chip bd-chip--amber">订阅变更</li>
            <li class="bd-chip bd-chip--amber">下载协助</li>
          </ul>
        </li>
      </ul>

    </div>
  </section>

  <section class="about-timeline bd-section" aria-labelledby="about-timeline-title" data-reveal>
    <div class="bd-container">
      <div class="bd-section__head">
        <p class="bd-eyebrow">03 / 时间线</p>
        <h2 class="bd-h2" id="about-timeline-title">九年，一步接一步</h2>
        <p class="bd-section__note">从上线那年的第一条线路，到现在的四个档位，滑动看完。</p>
      </div>

      <div class="about-timeline__scroller" tabindex="0" role="group" aria-label="按时间浏览九年历程">
        <ol class="about-timeline__track">

          <li class="about-timeline__item">
            <div class="about-timeline__head">
              <span class="about-timeline__dot" aria-hidden="true"></span>
              <span class="about-timeline__year">2016</span>
            </div>
            <div class="about-timeline__card">
              <h3>上线第一年</h3>
              <p>北单网页版正式上线，第一批入口线路和案例合集开始按周更新。那时一周只有两三条内容，但也是一周一次。</p>
            </div>
          </li>

          <li class="about-timeline__item">
            <div class="about-timeline__head">
              <span class="about-timeline__dot" aria-hidden="true"></span>
              <span class="about-timeline__year">2018</span>
            </div>
            <div class="about-timeline__card">
              <h3>栏目成型</h3>
              <p>内容中心拆成六个方向，从复盘到新手指路各有归属。华人资源下载站也是这一年开张的，如今六个分类、320 个资源包。</p>
            </div>
          </li>

          <li class="about-timeline__item">
            <div class="about-timeline__head">
              <span class="about-timeline__dot" aria-hidden="true"></span>
              <span class="about-timeline__year">2020</span>
            </div>
            <div class="about-timeline__card">
              <h3>走向客户端</h3>
              <p>电脑端工具第一版发布，看板、周期对比和归档检索搬进了客户端。不想装软件的人，浏览器端照样能打开。</p>
            </div>
          </li>

          <li class="about-timeline__item">
            <div class="about-timeline__head">
              <span class="about-timeline__dot" aria-hidden="true"></span>
              <span class="about-timeline__year">2022</span>
            </div>
            <div class="about-timeline__card">
              <h3>把安全变成例行</h3>
              <p>从这一年起，每个季度做一次第三方安全扫描，一直做到今天，没有发生过数据泄露。</p>
            </div>
          </li>

          <li class="about-timeline__item">
            <div class="about-timeline__head">
              <span class="about-timeline__dot" aria-hidden="true"></span>
              <span class="about-timeline__year">2024</span>
            </div>
            <div class="about-timeline__card">
              <h3>v4.2 与一次整体更新</h3>
              <p>客户端升到 v4.2，支持 Windows 10 及以上、macOS 11 及以上；站内的入口、价格与栏目信息也同步做了一次整体更新。</p>
            </div>
          </li>

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

  <section class="about-weekly bd-section" aria-labelledby="about-weekly-title" data-reveal>
    <div class="bd-container">
      <div class="about-weekly__grid">

        <div class="about-weekly__text">
          <p class="bd-eyebrow">04 / 每周节奏</p>
          <h2 class="bd-h2" id="about-weekly-title">每周三，上一周归位</h2>
          <p class="about-weekly__lede">以周为单位，是因为大部分人就是这样回来的：周末看一眼，周一再翻一遍。四步走完，周五之前你看到的东西就不会再变了。</p>

          <ol class="about-steps">
            <li class="about-steps__item">
              <span class="about-steps__no">01</span>
              <h3>选题</h3>
              <p>周一上午定。看上一周哪几条被反复打开，再看反馈里问了什么，缺的补上，旧的接着做。</p>
            </li>
            <li class="about-steps__item">
              <span class="about-steps__no">02</span>
              <h3>整理</h3>
              <p>把案例、数据、链接归到对应栏目，标好周期，PDF、XLSX、MD 三种格式一起准备好。</p>
            </li>
            <li class="about-steps__item">
              <span class="about-steps__no">03</span>
              <h3>换人看一遍</h3>
              <p>两个人换着看。入口额度、价格档位、版本号这些最容易出错的地方，谁写的谁不看。</p>
            </li>
            <li class="about-steps__item">
              <span class="about-steps__no">04</span>
              <h3>发布</h3>
              <p>周三上午上线。旧条目留在原位不挪动，你翻回三个月前，看到的还是当时那一版。</p>
            </li>
          </ol>
        </div>

        <figure class="about-weekly__media">
          <div class="bd-media">
            <img class="bd-media__img" src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="分层排列的资料盒与标签，冷灰蓝色调，每格标着一周" loading="lazy" decoding="async">
          </div>
          <p class="bd-media__caption">一格一周，标签上的数字就是这一周的编号。</p>
        </figure>

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

  <section class="about-partners bd-section" aria-labelledby="about-partners-title" data-reveal>
    <div class="bd-container">
      <div class="bd-section__head">
        <p class="bd-eyebrow">05 / 合作与年度策划</p>
        <h2 class="bd-h2" id="about-partners-title">外面的人，也把东西交到这里</h2>
        <p class="bd-section__note">写稿的和供数的不在我们这层楼，但他们交上来的东西，和编辑自己写的一样走同一道流程。</p>
      </div>

      <div class="about-partners__grid">

        <div class="about-partners__col">
          <h3>长期供稿与数据合作</h3>
          <p>供稿团队负责深度复盘与行业观察，数据服务商提供周期内的样本。两边的东西在周三之前汇合，由编辑统一排进当周归档，署名和来源都跟着内容留在页面上。</p>
          <ul class="about-partners__tags">
            <li class="bd-chip bd-chip--amber">内容作者团队 14 个</li>
            <li class="bd-chip bd-chip--amber">数据服务商 8 家</li>
            <li class="bd-chip bd-chip--amber">长期供稿</li>
          </ul>
        </div>

        <div class="about-partners__col about-partners__col--alt">
          <h3>一年四场大专题</h3>
          <p>专题比周更慢，也铺得更开，大致落在季度节点上：年初盘入口与线路的变化，年中盘资源包与下载分类，下半年整理工具能力的变化，年末出一份年度使用观察报告。</p>
        </div>

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

  <section class="about-cta" aria-labelledby="about-cta-title">
    <div class="bd-container">
      <div class="about-cta__inner">
        <p class="bd-eyebrow">下一步</p>
        <h2 class="bd-h2" id="about-cta-title">先看看这一周发生了什么</h2>
        <p>归档每周三更新，工具档位和内容订阅的价格都写在明面上。想先聊聊也可以，工作日的白天随时找得到人。</p>
        <div class="about-cta__actions">
          <a class="bd-btn bd-btn--primary" href="/topics/">看最新归档</a>
          <a class="bd-btn bd-btn--ghost" href="/services/">工具与价格</a>
          <a class="bd-btn bd-btn--ghost" href="/find-us/">找到我们</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-gap: clamp(18px, 3vw, 28px);
  --about-measure: 640px;
}

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

.page-about .about-hero {
  padding-top: clamp(6px, 1.4vw, 16px);
  padding-bottom: clamp(42px, 6vw, 84px);
}

.page-about .bd-breadcrumb {
  margin-bottom: clamp(20px, 3vw, 34px);
}

.page-about .about-hero__grid {
  display: grid;
  gap: var(--about-gap);
}

.page-about .about-hero__rail {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.page-about .about-hero__rail::-webkit-scrollbar {
  display: none;
}

.page-about .about-tick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel);
}
.page-about .about-tick__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lane);
}
.page-about .about-tick.is-now .about-tick__dot {
  background: var(--amber);
}
.page-about .about-tick.is-now .about-tick__yr {
  color: var(--amber);
}

.page-about .about-hero__body > .bd-eyebrow {
  margin: 0 0 12px;
}

.page-about .about-hero__body h1 {
  margin: 0 0 clamp(16px, 2.2vw, 26px);
}

.page-about .about-hero__body .bd-lede {
  max-width: 54ch;
  margin: 0;
  color: var(--steel);
}

.page-about .about-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(24px, 3.4vw, 38px) 0 0;
  padding: 0;
  background: var(--lane);
  border: 1px solid var(--lane);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-about .about-figures__item {
  background: var(--cabin);
  padding: 15px 16px 17px;
}

.page-about .about-figures__item dt {
  margin-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--steel);
}

.page-about .about-figures__item dd {
  margin: 0;
  line-height: 1;
}

.page-about .about-figures__num {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.6vw, 27px);
  color: var(--amber);
  letter-spacing: -0.01em;
}

.page-about .about-figures__unit {
  margin-left: 5px;
  font-size: 12px;
  color: var(--steel);
}

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

/* ---------- 做事方式 ---------- */

.page-about .about-method__grid {
  display: grid;
  gap: clamp(28px, 4.5vw, 52px);
}

.page-about .about-method__text {
  max-width: var(--about-measure);
}

.page-about .about-method__text h2 {
  margin: 0 0 clamp(18px, 2.4vw, 26px);
}

.page-about .about-method__text p {
  margin: 0 0 1.1em;
  color: var(--mist);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
}

.page-about .about-quote {
  margin: clamp(26px, 3.4vw, 38px) 0 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--amber);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.page-about .about-method__media {
  margin: 0;
}

.page-about .about-method__media .bd-media {
  border-radius: var(--radius);
  overflow: hidden;
}

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

.page-about .bd-media__caption {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--steel);
}

/* ---------- 三支队伍 ---------- */

.page-about .about-team__media {
  margin: clamp(20px, 3vw, 32px) 0 0;
}

.page-about .about-team__media .bd-media {
  border-radius: var(--radius);
  overflow: hidden;
}

.page-about .about-team__list {
  list-style: none;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .about-team__card {
  position: relative;
  padding: 22px 20px 24px;
  background: var(--cabin);
  border: 1px solid var(--lane);
  border-left: 2px solid var(--lane);
  border-radius: var(--radius);
  transition: transform var(--dur) ease, background-color var(--dur) ease, border-color var(--dur) ease;
}

.page-about .about-team__card:hover,
.page-about .about-team__card:focus,
.page-about .about-team__card:focus-within {
  transform: translateY(-4px);
  background: var(--lane);
  border-left-color: var(--amber);
  outline: none;
}

.page-about .about-team__no {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.page-about .about-team__card h3 {
  margin: 0 0 5px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--mist);
}

.page-about .about-team__meta {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--steel);
}

.page-about .about-team__card > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel);
}

.page-about .about-team__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 15px 0 0;
  padding: 0;
}

/* ---------- 时间线 ---------- */

.page-about .about-timeline__scroller {
  margin-top: clamp(18px, 2.6vw, 28px);
  margin-inline: calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.page-about .about-timeline__track {
  position: relative;
  display: flex;
  gap: 16px;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 6px 0 12px;
  list-style: none;
}

.page-about .about-timeline__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--lane) 0%, rgba(242, 178, 62, 0.55) 45%, var(--lane) 100%);
}

.page-about .about-timeline__item {
  position: relative;
  flex: 0 0 auto;
  width: min(286px, 76vw);
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-about .about-timeline__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
}

.page-about .about-timeline__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px rgba(242, 178, 62, 0.32);
}

.page-about .about-timeline__year {
  display: inline-block;
  padding: 3px 9px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.page-about .about-timeline__card {
  padding: 16px 18px 18px;
  background: var(--cabin);
  border: 1px solid var(--lane);
  border-radius: var(--radius);
  transition: transform var(--dur) ease, border-color var(--dur) ease;
}

.page-about .about-timeline__card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 178, 62, 0.6);
}

.page-about .about-timeline__card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--mist);
}

.page-about .about-timeline__card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel);
}

/* ---------- 每周归档 ---------- */

.page-about .about-weekly__grid {
  display: grid;
  gap: clamp(28px, 4.5vw, 52px);
}

.page-about .about-weekly__text h2 {
  margin: 0 0 clamp(14px, 2vw, 20px);
}

.page-about .about-weekly__lede {
  margin: 0;
  max-width: 58ch;
  color: var(--steel);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
}

.page-about .about-steps {
  list-style: none;
  display: grid;
  gap: 1px;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  background: var(--lane);
  border: 1px solid var(--lane);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-about .about-steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 14px;
  align-items: baseline;
  padding: 16px 18px 18px;
  background: var(--cabin);
}

.page-about .about-steps__no {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.page-about .about-steps__item h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--mist);
}

.page-about .about-steps__item p {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel);
}

.page-about .about-weekly__media {
  margin: 0;
}

.page-about .about-weekly__media .bd-media {
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- 合作与年度策划 ---------- */

.page-about .about-partners__grid {
  display: grid;
  gap: 16px;
  margin-top: clamp(22px, 3vw, 34px);
}

.page-about .about-partners__col {
  padding: 24px 22px 26px;
  background: var(--cabin);
  border: 1px solid var(--lane);
  border-radius: var(--radius);
}

.page-about .about-partners__col h3 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.35;
  color: var(--mist);
}

.page-about .about-partners__col p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--steel);
}

.page-about .about-partners__col--alt {
  background: var(--paper);
  border-color: var(--paper);
}

.page-about .about-partners__col--alt h3 {
  color: var(--ink);
}

.page-about .about-partners__col--alt p {
  color: var(--ink);
  opacity: 0.74;
}

.page-about .about-partners__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}

/* ---------- 收束 ---------- */

.page-about .about-cta {
  padding: 0 0 clamp(50px, 7vw, 96px);
}

.page-about .about-cta__inner {
  padding: clamp(26px, 4vw, 48px);
  background: linear-gradient(140deg, var(--cabin) 0%, var(--ink) 72%);
  border: 1px solid var(--lane);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius);
}

.page-about .about-cta__inner h2 {
  margin: 0 0 14px;
}

.page-about .about-cta__inner p {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: var(--steel);
}

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

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

@media (min-width: 768px) {
  .page-about .about-figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .about-team__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .page-about .about-partners__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .page-about .about-hero__grid {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: clamp(30px, 4vw, 56px);
    align-items: start;
  }
  .page-about .about-hero__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    overflow: visible;
    padding: 8px 0 0;
  }

  .page-about .about-method__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
  .page-about .about-method__media {
    position: sticky;
    top: 128px;
  }

  .page-about .about-weekly__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
}

@media (min-width: 1320px) {
  .page-about .about-timeline__scroller {
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-team__card,
  .page-about .about-timeline__card {
    transition: none;
  }
  .page-about .about-team__card:hover,
  .page-about .about-team__card:focus,
  .page-about .about-team__card:focus-within,
  .page-about .about-timeline__card:hover {
    transform: none;
  }
}