.page-about {
  background: var(--warm);
  color: var(--graphite);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-about .about-hero {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  padding-block: clamp(18px, 3vw, 34px) clamp(28px, 5vw, 52px);
}

.page-about .about-hero .eyebrow {
  margin: 0 0 clamp(12px, 2vw, 18px);
  color: var(--nav-blue);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.page-about .about-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(31px, 6vw, 64px);
  line-height: 1.07;
  letter-spacing: -0.015em;
  max-width: 15em;
}

.page-about .about-lead {
  margin: 0;
  max-width: 32em;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
}

.page-about .about-facts {
  margin: clamp(18px, 3vw, 28px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
}

.page-about .about-facts__item {
  border-left: 2px solid var(--nav-blue);
  padding: 2px 0 2px 12px;
}

.page-about .about-facts dt {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rock);
}

.page-about .about-facts dd {
  margin: 5px 0 0;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
}

.page-about .about-band {
  height: 8px;
  border: 2px solid var(--graphite);
  background: linear-gradient(
    90deg,
    var(--nav-blue) 0 34%,
    var(--mint) 34% 58%,
    var(--orange) 58% 80%,
    var(--moss) 80% 100%
  );
}

.page-about .about-chapter {
  display: grid;
  gap: clamp(10px, 2vw, 20px);
  padding-block: clamp(34px, 6vw, 74px);
  border-bottom: 1px solid var(--rock);
}

.page-about .about-chapter__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(42px, 9vw, 90px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--line);
}

.page-about .about-chapter h2 {
  margin: 0 0 clamp(12px, 2vw, 18px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(23px, 3.3vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.page-about .about-chapter p {
  margin: 0 0 14px;
  max-width: 36em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
}

.page-about .about-chapter p a {
  color: var(--nav-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-about .about-chapter--ink {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 44px);
  margin-block: clamp(26px, 5vw, 52px);
}

.page-about .about-chapter--ink .about-chapter__num {
  color: rgba(43, 227, 160, 0.3);
}

.page-about .about-chapter--ink p a {
  color: var(--mint);
}

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

.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 2px solid var(--graphite);
  background: var(--paper);
}

.page-about .about-chapter--ink .about-figure img {
  border-color: var(--line);
  background: #0f1d34;
}

.page-about .about-figure .media-frame__label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--rock);
}

.page-about .about-split {
  display: grid;
  gap: clamp(18px, 3vw, 34px);
}

.page-about .about-split__media {
  display: grid;
  gap: clamp(14px, 2.5vw, 22px);
}

/* 时间轴 */
.page-about .tl {
  list-style: none;
  margin: clamp(20px, 4vw, 34px) 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-about .tl__node {
  --tl-accent: var(--clay);
  position: relative;
  border-top: 2px solid var(--tl-accent);
  padding-top: 18px;
}

.page-about .tl__node:nth-child(2) {
  --tl-accent: var(--moss);
}

.page-about .tl__node:nth-child(3) {
  --tl-accent: var(--mint);
}

.page-about .tl__node::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--tl-accent);
}

.page-about .tl__summary {
  display: block;
  list-style: none;
  cursor: pointer;
  outline-offset: 4px;
}

.page-about .tl__summary::-webkit-details-marker {
  display: none;
}

.page-about .tl__summary:focus-visible {
  outline: 2px solid var(--nav-blue);
}

.page-about .about-chapter--ink .tl__summary:focus-visible {
  outline-color: var(--mint);
}

.page-about .tl__stage {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--rock);
}

.page-about .about-chapter--ink .tl__stage {
  color: rgba(43, 227, 160, 0.85);
}

.page-about .tl__title {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.35;
}

.page-about .tl__toggle {
  display: inline-block;
  margin-top: 10px;
  padding-bottom: 1px;
  border-bottom: 2px solid currentColor;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--nav-blue);
}

.page-about .about-chapter--ink .tl__toggle {
  color: var(--mint);
}

.page-about .tl__toggle::before {
  content: "＋ ";
}

.page-about .tl__item[open] .tl__toggle::before {
  content: "－ ";
}

.page-about .tl__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-about .tl__list li {
  position: relative;
  padding-left: 18px;
  max-width: 30em;
  font-size: 14.5px;
  line-height: 1.72;
}

.page-about .tl__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--tl-accent);
}

/* 分组关系图 */
.page-about .groupmap {
  border: 2px solid var(--graphite);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  padding: clamp(14px, 2.5vw, 22px);
}

.page-about .groupmap__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--rock);
}

.page-about .groupmap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .groupmap__row {
  border-left: 2px solid var(--line);
  padding-left: 12px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.page-about .groupmap__row:hover,
.page-about .groupmap__row:focus {
  border-left-color: var(--nav-blue);
  background: rgba(23, 70, 209, 0.06);
  outline: none;
}

.page-about .groupmap__row:focus-visible {
  outline: 2px solid var(--nav-blue);
  outline-offset: 2px;
}

.page-about .groupmap__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
}

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

.page-about .groupmap__subs li {
  padding: 2px 7px;
  border: 1px solid var(--line);
  background: var(--warm);
  font-size: 12px;
  line-height: 1.6;
}

.page-about .groupmap__row:hover .groupmap__subs li,
.page-about .groupmap__row:focus .groupmap__subs li {
  border-color: var(--nav-blue);
}

.page-about .groupmap__note {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--rock);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--rock);
}

/* 三类使用者 */
.page-about .who {
  list-style: none;
  margin: clamp(16px, 3vw, 28px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2.5vw, 20px);
}

.page-about .who__item {
  border: 2px solid var(--graphite);
  background: var(--paper);
  padding: clamp(14px, 2.4vw, 22px);
}

.page-about .who__item:nth-child(1) {
  border-top: 6px solid var(--nav-blue);
}

.page-about .who__item:nth-child(2) {
  border-top: 6px solid var(--orange);
}

.page-about .who__item:nth-child(3) {
  border-top: 6px solid var(--mint);
}

.page-about .who__tag {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--rock);
}

.page-about .who__item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
}

.page-about .who__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--graphite);
}

/* 团队分工 */
.page-about .crew {
  list-style: none;
  margin: clamp(16px, 3vw, 26px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .crew__item {
  padding: 12px 14px;
  border-left: 4px solid var(--nav-blue);
  background: var(--paper);
}

.page-about .crew__item:nth-child(2) {
  border-left-color: var(--orange);
}

.page-about .crew__item:nth-child(3) {
  border-left-color: var(--moss);
}

.page-about .crew__item h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
}

.page-about .crew__item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

/* 旧路径 */
.page-about .legacy {
  display: grid;
  gap: clamp(14px, 2.5vw, 24px);
  margin: clamp(16px, 3vw, 26px) 0 0;
  padding: clamp(16px, 3vw, 26px);
  border: 2px solid var(--graphite);
  background: var(--paper);
  box-shadow: var(--shadow-hard);
}

.page-about .legacy__num {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1;
  color: var(--clay);
}

.page-about .legacy__text {
  margin: 0 0 14px;
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.8;
}

.page-about .legacy__text a {
  color: var(--nav-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-about .legacy__demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.page-about .legacy__old {
  padding: 4px 8px;
  border: 1px dashed var(--rock);
  background: var(--warm);
  color: var(--moss);
}

.page-about .legacy__arrow {
  color: var(--orange);
  font-weight: 800;
}

.page-about .legacy__new {
  padding: 4px 8px;
  background: var(--nav-blue);
  color: #ffffff;
}

/* 收尾 */
.page-about .about-cta {
  margin-top: clamp(28px, 5vw, 52px);
  display: grid;
  gap: clamp(14px, 2.5vw, 20px);
  padding: clamp(22px, 4vw, 44px);
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--graphite);
  box-shadow: var(--shadow-hard);
}

.page-about .about-cta h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
}

.page-about .about-cta p {
  margin: 0;
  max-width: 34em;
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.8;
}

.page-about .about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-about .about-cta .btn--ghost {
  color: var(--paper);
  border-color: var(--paper);
}

.page-about .about-cta .btn--ghost:hover,
.page-about .about-cta .btn--ghost:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

@media (min-width: 780px) {
  .page-about .about-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
    align-items: start;
  }

  .page-about .about-split--flip {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  }

  .page-about .about-split--flip .about-split__media {
    order: 0;
  }

  .page-about .about-split__text {
    order: -1;
  }

  .page-about .about-split--flip .about-split__text {
    order: 1;
  }

  .page-about .legacy {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .page-about .legacy__num {
    border-bottom: none;
    border-right: 2px solid var(--line);
    padding: 0 clamp(14px, 2.5vw, 24px) 0 0;
  }

  .page-about .about-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 880px) {
  .page-about .about-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
  }

  .page-about .about-chapter {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: clamp(16px, 3vw, 44px);
  }

  .page-about .about-chapter__body {
    max-width: 66ch;
  }

  .page-about .about-chapter--offset .about-chapter__body {
    margin-left: clamp(0px, 5vw, 72px);
  }

  .page-about .tl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 32px);
    align-items: start;
  }

  .page-about .tl__node:nth-child(2) {
    margin-top: clamp(16px, 3vw, 36px);
  }

  .page-about .tl__node:nth-child(3) {
    margin-top: clamp(32px, 5.5vw, 68px);
  }

  .page-about .tl__item {
    padding-right: 24px;
  }

  .page-about .tl__stage {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: absolute;
    top: 18px;
    right: 0;
    font-size: 10px;
    letter-spacing: 0.3em;
  }

  .page-about .who {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .page-about .who__item:nth-child(2) {
    margin-top: clamp(16px, 3vw, 32px);
  }

  .page-about .who__item:nth-child(3) {
    margin-top: clamp(32px, 6vw, 64px);
  }

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


<main id="main-content" class="page-about">
  <div class="container">
    <nav class="breadcrumb" aria-label="面包屑">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
        <li class="breadcrumb__item"><span aria-current="page">品牌故事</span></li>
      </ol>
    </nav>

    <header class="about-hero">
      <div class="about-hero__main">
        <p class="eyebrow">自 2019 年起 · 持续运营</p>
        <h1>一个导航站值不值得收藏，看它怎么长起来</h1>
      </div>
      <div class="about-hero__side">
        <p class="about-lead">365网站指南从 2019 年起只做一件事：把散落在各处的常用入口按你要办的事收进栏目，让你在需要的时候少翻几屏、少试几个网址。今天这里有 26 个一级栏目、约 180 个二级分组、约 4,800 条入口，每天巡检一次可达性，打不开的入口当天登记。</p>
        <dl class="about-facts">
          <div class="about-facts__item">
            <dt>持续运营</dt>
            <dd class="num">2019 年起</dd>
          </div>
          <div class="about-facts__item">
            <dt>累计服务访问用户</dt>
            <dd class="num">900 万+</dd>
          </div>
          <div class="about-facts__item">
            <dt>保留旧路径映射</dt>
            <dd class="num">210 余条</dd>
          </div>
        </dl>
      </div>
    </header>

    <div class="about-band" aria-hidden="true"></div>

    <section class="about-chapter about-chapter--ink" aria-labelledby="about-timeline-title">
      <div class="about-chapter__index">
        <span class="about-chapter__num" aria-hidden="true">01</span>
      </div>
      <div class="about-chapter__body">
        <h2 id="about-timeline-title">从一张栏目表，到新旧两版一起跑</h2>
        <p>2019 年刚上线时，这里只有一张按类目排好的表，服务一批每天要反复打开几个固定页面的用户。表越添越长，单向的列表开始让人迷路，于是有了分组、索引带和检索。点开下面任一阶段，能看到那一步具体留下了什么。</p>

        <figure class="media-frame media-frame--wide about-figure">
          <img src="{zhanqunpic:h:420w:1440}" width="1440" height="420" alt="横向时间轴，三个节点由陶土色渐变到荧光青绿，节点下方为等宽字体标注的阶段说明块" loading="lazy" decoding="async">
          <figcaption class="media-frame__label">三个阶段：栏目表起步 · 全站改版 · 新旧并行与移动端</figcaption>
        </figure>

        <ol class="tl">
          <li class="tl__node">
            <details class="tl__item">
              <summary class="tl__summary">
                <span class="tl__stage">阶段一 · 起步</span>
                <span class="tl__title">把最常查的入口收进一张表</span>
                <span class="tl__toggle">成果清单</span>
              </summary>
              <ul class="tl__list">
                <li>按本地生活、教育考试、交通出行整理出第一批高频入口</li>
                <li>每条入口标好归属栏目，同一件事只留一条主线</li>
                <li>从这一版开始，建立每天一次的入口可达性巡检</li>
              </ul>
            </details>
          </li>
          <li class="tl__node">
            <details class="tl__item">
              <summary class="tl__summary">
                <span class="tl__stage">阶段二 · 改版</span>
                <span class="tl__title">26 条栏目线定下来</span>
                <span class="tl__toggle">成果清单</span>
              </summary>
              <ul class="tl__list">
                <li>一级栏目按“要办什么事”划分，二级分组按动作细分，共约 180 个</li>
                <li>首页栏目索引带与入口检索上线，输入一个词直接落到分组</li>
                <li>全站换用统一的导视标识，栏目编号与版本标签一眼可辨</li>
              </ul>
            </details>
          </li>
          <li class="tl__node">
            <details class="tl__item">
              <summary class="tl__summary">
                <span class="tl__stage">阶段三 · 并行</span>
                <span class="tl__title">老链接继续能用，手机上多一条路</span>
                <span class="tl__toggle">成果清单</span>
              </summary>
              <ul class="tl__list">
                <li>为旧版栏目保留 210 余条路径映射，访问旧地址先给出跳转提示</li>
                <li>约365安卓客户端完成 3 个大版本迭代，支持 Android 8.0 及以上系统</li>
                <li>安装包约 18MB，主流机型冷启动约 1.2 秒</li>
                <li>问题反馈有了固定提交位置，遇到异常知道往哪儿放</li>
              </ul>
            </details>
          </li>
        </ol>
      </div>
    </section>

    <section class="about-chapter about-chapter--offset" aria-labelledby="about-group-title">
      <div class="about-chapter__index">
        <span class="about-chapter__num" aria-hidden="true">02</span>
      </div>
      <div class="about-chapter__body">
        <h2 id="about-group-title">26 条线并排，再往里切一层</h2>
        <div class="about-split">
          <div class="about-split__text">
            <p>一级栏目回答的是“你要办哪类事”。26 条线并排放在首页索引带上，本地生活、政务办事、教育考试、交通出行各占一条，你不必先判断它算哪个行业。</p>
            <p>二级分组回答“具体走到哪一步”。同一个栏目底下，再按办理、查询、缴费、下载这类动作切开，约 180 个分组把 4,800 条入口分完。一次能找到，意思是不用跳出去再搜一遍。</p>
            <p>分组的顺序也跟着习惯走：越多人每天要点的，位置越靠前；招考、缴费这类有季节性的，会在对应时段里往上提。</p>
          </div>
          <div class="about-split__media">
            <div class="groupmap">
              <div class="groupmap__head">
                <span>栏目 → 分组</span>
                <span>26 / 180</span>
              </div>
              <ul class="groupmap__list">
                <li class="groupmap__row" tabindex="0">
                  <span class="groupmap__name">本地生活</span>
                  <ul class="groupmap__subs">
                    <li>社保查询</li>
                    <li>水电缴费</li>
                    <li>社区办事</li>
                  </ul>
                </li>
                <li class="groupmap__row" tabindex="0">
                  <span class="groupmap__name">政务办事</span>
                  <ul class="groupmap__subs">
                    <li>证件办理</li>
                    <li>进度查询</li>
                    <li>材料下载</li>
                  </ul>
                </li>
                <li class="groupmap__row" tabindex="0">
                  <span class="groupmap__name">教育考试</span>
                  <ul class="groupmap__subs">
                    <li>报名入口</li>
                    <li>成绩查询</li>
                    <li>招考公告</li>
                  </ul>
                </li>
                <li class="groupmap__row" tabindex="0">
                  <span class="groupmap__name">交通出行</span>
                  <ul class="groupmap__subs">
                    <li>违章查询</li>
                    <li>公交线路</li>
                    <li>长途购票</li>
                  </ul>
                </li>
              </ul>
              <p class="groupmap__note">图内展开 4 条线示意 · 一级栏目 26 · 二级分组约 180 · 入口约 4,800</p>
            </div>
            <figure class="media-frame about-figure">
              <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="抽象方角括号嵌套图，外层为栏目编号块，内层展开若干分组小方块，全部由扁平几何构成" loading="lazy" decoding="async">
              <figcaption class="media-frame__label">一级栏目与二级分组的嵌套关系</figcaption>
            </figure>
          </div>
        </div>
      </div>
    </section>

    <section class="about-chapter" aria-labelledby="about-who-title">
      <div class="about-chapter__index">
        <span class="about-chapter__num" aria-hidden="true">03</span>
      </div>
      <div class="about-chapter__body">
        <h2 id="about-who-title">三种打开方式，三条不一样的路</h2>
        <p>常用人群集中在福建地区，移动端访问占比约七成。多数人拿起手机只查一条就走，所以首页先把检索和索引带摆出来，其余信息往后放。</p>
        <ul class="who">
          <li class="who__item">
            <p class="who__tag">临时查询</p>
            <h3>查一条就走</h3>
            <p>在手机上搜一个词，落到分组，点第一条就走。为此移动端页面平均加载控制在 1.8 秒内，不让你等在加载动画上。</p>
          </li>
          <li class="who__item">
            <p class="who__tag">固定访问</p>
            <h3>每天点开那几个栏目</h3>
            <p>收藏夹里存着几条常用路径，最怕位置悄悄变了。栏目调整时旧地址继续有效，收藏夹不用重新存一遍。</p>
          </li>
          <li class="who__item">
            <p class="who__tag">维护者</p>
            <h3>提交建议、报告异常</h3>
            <p>提交收录建议、报告某条入口打不开，还想知道处理到哪一步。反馈在工作日 1 个工作日内有人回应。</p>
          </li>
        </ul>
      </div>
    </section>

    <section class="about-chapter" aria-labelledby="about-crew-title">
      <div class="about-chapter__index">
        <span class="about-chapter__num" aria-hidden="true">04</span>
      </div>
      <div class="about-chapter__body">
        <h2 id="about-crew-title">12 个人，三条并行的活</h2>
        <div class="about-split about-split--flip">
          <figure class="media-frame about-figure">
            <img src="{zhanqunpic:h:540w:720}" width="720" height="540" alt="三条并行流程线汇入同一个巡检节点的示意图，全部为抽象线条与方角节点，不含人物形象" loading="lazy" decoding="async">
            <figcaption class="media-frame__label">编辑、产品技术、客服三条线汇到每日巡检</figcaption>
          </figure>
          <div class="about-split__text">
            <p>团队一共 12 人，分编辑、产品技术、客服三组。节奏是固定的：编辑组每周集中处理一次收录申请，产品技术组每天跑全量入口巡检，客服组在工作日 1 个工作日内给出首次回应，复杂问题 3 个工作日内给结论。</p>
            <ul class="crew">
              <li class="crew__item">
                <h3>编辑组</h3>
                <p>栏目划分、入口收录与审核，每周一次集中处理收录申请。</p>
              </li>
              <li class="crew__item">
                <h3>产品技术组</h3>
                <p>检索与索引带、客户端版本迭代、每天一次的巡检任务。</p>
              </li>
              <li class="crew__item">
                <h3>客服组</h3>
                <p>反馈受理、首次回应，问题处理完之后的回访。</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <section class="about-chapter about-chapter--offset" aria-labelledby="about-legacy-title">
      <div class="about-chapter__index">
        <span class="about-chapter__num" aria-hidden="true">05</span>
      </div>
      <div class="about-chapter__body">
        <h2 id="about-legacy-title">改版可以换，你的收藏夹不用换</h2>
        <p>旧路径映射一直留着，理由很朴素：你的收藏夹不该因为一次改版失效。打开旧地址会先看到一条跳转提示，写清这条入口现在归到哪个栏目、新版位置在哪，点一下就到。</p>
        <div class="legacy">
          <p class="legacy__num">210 余条</p>
          <div>
            <p class="legacy__text">这些年栏目调整过几轮，映射跟着一起改。想看某个栏目在哪一轮动过，去 <a href="/notes/">更新手记</a> 按栏目翻；跳转提示具体怎么处理，<a href="/tutorial/">使用教程</a> 里有分步说明。</p>
            <div class="legacy__demo" aria-hidden="true">
              <span class="legacy__old">旧地址</span>
              <span class="legacy__arrow">→</span>
              <span class="legacy__new">新版栏目位置</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="about-chapter" aria-labelledby="about-coop-title">
      <div class="about-chapter__index">
        <span class="about-chapter__num" aria-hidden="true">06</span>
      </div>
      <div class="about-chapter__body">
        <h2 id="about-coop-title">和本地站点一起，把入口养住</h2>
        <p>本地生活、政务办事、教育考试、交通出行这几类，我们和对应的站点保持长期收录协作。对方换了地址、调整了栏目结构，编辑组跟着更新，你在导航里点到的还是最新的那一处。</p>
        <p>新站点想被收进来，走 <a href="/reach-us/">联系入口</a> 提交，编辑组每周集中看一次；通过之后入口上线，同时写进更新手记。九百多万人次访问里，很大一部分落在这些日常场景上——它们稳，导航才稳。</p>
      </div>
    </section>

    <section class="about-cta" aria-labelledby="about-cta-title">
      <div>
        <h2 id="about-cta-title">下一步，看新版和最近记录</h2>
        <p>想装约365安卓客户端、看焕新版产品线怎么用，去工具中心；想知道哪个栏目最近动过，去更新手记。</p>
      </div>
      <div class="about-cta__actions">
        <a class="btn btn--solid" href="/tools/">打开工具中心</a>
        <a class="btn btn--ghost" href="/notes/">翻更新手记</a>
      </div>
    </section>
  </div>
</main>

.page-about {
  --about-rule: 2px solid var(--graphite);
  --about-band: linear-gradient(
    90deg,
    var(--nav-blue) 0 34%,
    var(--mint) 34% 58%,
    var(--orange) 58% 80%,
    var(--moss) 80% 100%
  );
  background: var(--warm);
  color: var(--graphite);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-about .about-hero {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  padding-block: clamp(18px, 3vw, 34px) clamp(28px, 5vw, 52px);
}

.page-about .about-hero .eyebrow {
  margin: 0 0 clamp(12px, 2vw, 18px);
  color: var(--nav-blue);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.page-about .about-hero h1 {
  margin: 0;
  max-width: 15em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(31px, 6vw, 64px);
  line-height: 1.07;
  letter-spacing: -0.015em;
}

.page-about .about-lead {
  margin: 0;
  max-width: 32em;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
}

.page-about .about-facts {
  margin: clamp(18px, 3vw, 28px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
}

.page-about .about-facts__item {
  border-left: 2px solid var(--nav-blue);
  padding: 2px 0 2px 12px;
}

.page-about .about-facts dt {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rock);
  line-height: 1.6;
}

.page-about .about-facts dd {
  margin: 5px 0 0;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
}

.page-about .about-band {
  height: 8px;
  border: var(--about-rule);
  background: var(--about-band);
}

.page-about .about-chapter {
  display: grid;
  gap: clamp(10px, 2vw, 20px);
  padding-block: clamp(34px, 6vw, 74px);
  border-bottom: 1px solid var(--rock);
}

.page-about .about-chapter__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(42px, 9vw, 90px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--line);
}

.page-about .about-chapter h2 {
  margin: 0 0 clamp(12px, 2vw, 18px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(23px, 3.3vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.page-about .about-chapter p {
  margin: 0 0 14px;
  max-width: 36em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
}

.page-about .about-chapter p a {
  color: var(--nav-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-about .about-chapter--ink {
  margin-block: clamp(26px, 5vw, 52px);
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 44px);
  background: var(--ink);
  color: var(--paper);
  border: var(--about-rule);
  border-bottom: var(--about-rule);
  box-shadow: var(--shadow-hard);
}

.page-about .about-chapter--ink .about-chapter__num {
  color: rgba(43, 227, 160, 0.3);
}

.page-about .about-chapter--ink p a {
  color: var(--mint);
}

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

.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: var(--about-rule);
  background: var(--paper);
}

.page-about .about-chapter--ink .about-figure img {
  border-color: var(--line);
  background: #0f1d34;
}

.page-about .about-figure .media-frame__label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--rock);
}

.page-about .about-chapter--ink .about-figure .media-frame__label {
  color: rgba(250, 247, 240, 0.62);
}

.page-about .about-split {
  display: grid;
  gap: clamp(18px, 3vw, 34px);
}

.page-about .about-split__media {
  display: grid;
  gap: clamp(14px, 2.5vw, 22px);
}

.page-about .tl {
  list-style: none;
  margin: clamp(20px, 4vw, 34px) 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-about .tl__node {
  --tl-accent: var(--clay);
  position: relative;
  border-top: 2px solid var(--tl-accent);
  padding-top: 18px;
}

.page-about .tl__node:nth-child(2) {
  --tl-accent: var(--moss);
}

.page-about .tl__node:nth-child(3) {
  --tl-accent: var(--mint);
}

.page-about .tl__node::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--tl-accent);
}

.page-about .tl__summary {
  display: block;
  list-style: none;
  cursor: pointer;
  outline-offset: 4px;
}

.page-about .tl__summary::-webkit-details-marker {
  display: none;
}

.page-about .tl__summary:focus-visible {
  outline: 2px solid var(--nav-blue);
}

.page-about .about-chapter--ink .tl__summary:focus-visible {
  outline-color: var(--mint);
}

.page-about .tl__stage {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--rock);
}

.page-about .about-chapter--ink .tl__stage {
  color: rgba(43, 227, 160, 0.85);
}

.page-about .tl__title {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.35;
}

.page-about .tl__toggle {
  display: inline-block;
  margin-top: 10px;
  padding-bottom: 1px;
  border-bottom: 2px solid currentColor;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--nav-blue);
}

.page-about .about-chapter--ink .tl__toggle {
  color: var(--mint);
}

.page-about .tl__toggle::before {
  content: "＋ ";
}

.page-about .tl__item[open] .tl__toggle::before {
  content: "－ ";
}

.page-about .tl__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-about .tl__list li {
  position: relative;
  padding-left: 18px;
  max-width: 30em;
  font-size: 14.5px;
  line-height: 1.72;
}

.page-about .tl__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--tl-accent);
}

.page-about .groupmap {
  padding: clamp(14px, 2.5vw, 22px);
  border: var(--about-rule);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.page-about .groupmap__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--rock);
}

.page-about .groupmap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .groupmap__row {
  border-left: 2px solid var(--line);
  padding-left: 12px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.page-about .groupmap__row:hover,
.page-about .groupmap__row:focus {
  border-left-color: var(--nav-blue);
  background: rgba(23, 70, 209, 0.06);
  outline: none;
}

.page-about .groupmap__row:focus-visible {
  outline: 2px solid var(--nav-blue);
  outline-offset: 2px;
}

.page-about .groupmap__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
}

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

.page-about .groupmap__subs li {
  padding: 2px 7px;
  border: 1px solid var(--line);
  background: var(--warm);
  font-size: 12px;
  line-height: 1.6;
}

.page-about .groupmap__row:hover .groupmap__subs li,
.page-about .groupmap__row:focus .groupmap__subs li {
  border-color: var(--nav-blue);
}

.page-about .groupmap__note {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--rock);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--rock);
}

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

.page-about .who__item {
  padding: clamp(14px, 2.4vw, 22px);
  border: var(--about-rule);
  background: var(--paper);
}

.page-about .who__item:nth-child(1) {
  border-top: 6px solid var(--nav-blue);
}

.page-about .who__item:nth-child(2) {
  border-top: 6px solid var(--orange);
}

.page-about .who__item:nth-child(3) {
  border-top: 6px solid var(--mint);
}

.page-about .who__tag {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--rock);
}

.page-about .who__item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
}

.page-about .who__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
}

.page-about .crew {
  list-style: none;
  margin: clamp(16px, 3vw, 26px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .crew__item {
  padding: 12px 14px;
  border-left: 4px solid var(--nav-blue);
  background: var(--paper);
}

.page-about .crew__item:nth-child(2) {
  border-left-color: var(--orange);
}

.page-about .crew__item:nth-child(3) {
  border-left-color: var(--moss);
}

.page-about .crew__item h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
}

.page-about .crew__item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.page-about .legacy {
  display: grid;
  gap: clamp(14px, 2.5vw, 24px);
  margin: clamp(16px, 3vw, 26px) 0 0;
  padding: clamp(16px, 3vw, 26px);
  border: var(--about-rule);
  background: var(--paper);
  box-shadow: var(--shadow-hard);
}

.page-about .legacy__num {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1;
  color: var(--clay);
}

.page-about .legacy__text {
  margin: 0 0 14px;
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.8;
}

.page-about .legacy__text a {
  color: var(--nav-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-about .legacy__demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.page-about .legacy__old {
  padding: 4px 8px;
  border: 1px dashed var(--rock);
  background: var(--warm);
  color: var(--moss);
}

.page-about .legacy__arrow {
  color: var(--orange);
  font-weight: 800;
}

.page-about .legacy__new {
  padding: 4px 8px;
  background: var(--nav-blue);
  color: #ffffff;
}

.page-about .about-cta {
  display: grid;
  gap: clamp(14px, 2.5vw, 20px);
  margin-top: clamp(28px, 5vw, 52px);
  padding: clamp(22px, 4vw, 44px);
  background: var(--ink);
  color: var(--paper);
  border: var(--about-rule);
  box-shadow: var(--shadow-hard);
}

.page-about .about-cta h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
}

.page-about .about-cta p {
  margin: 0;
  max-width: 34em;
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.8;
}

.page-about .about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-about .about-cta .btn--ghost {
  color: var(--paper);
  border-color: var(--paper);
}

.page-about .about-cta .btn--ghost:hover,
.page-about .about-cta .btn--ghost:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

@media (min-width: 780px) {
  .page-about .about-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
    align-items: start;
  }

  .page-about .about-split--flip {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  }

  .page-about .about-split__text {
    order: -1;
  }

  .page-about .about-split--flip .about-split__text {
    order: 1;
  }

  .page-about .legacy {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .page-about .legacy__num {
    border-bottom: none;
    border-right: 2px solid var(--line);
    padding: 0 clamp(14px, 2.5vw, 24px) 0 0;
  }

  .page-about .about-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 880px) {
  .page-about .about-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
  }

  .page-about .about-chapter {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: clamp(16px, 3vw, 44px);
  }

  .page-about .about-chapter__body {
    max-width: 66ch;
  }

  .page-about .about-chapter--offset .about-chapter__body {
    margin-left: clamp(0px, 5vw, 72px);
  }

  .page-about .tl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 32px);
    align-items: start;
  }

  .page-about .tl__node:nth-child(2) {
    margin-top: clamp(16px, 3vw, 36px);
  }

  .page-about .tl__node:nth-child(3) {
    margin-top: clamp(32px, 5.5vw, 68px);
  }

  .page-about .tl__item {
    padding-right: 24px;
  }

  .page-about .tl__stage {
    position: absolute;
    top: 18px;
    right: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 10px;
    letter-spacing: 0.3em;
  }

  .page-about .who {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .page-about .who__item:nth-child(2) {
    margin-top: clamp(16px, 3vw, 32px);
  }

  .page-about .who__item:nth-child(3) {
    margin-top: clamp(32px, 6vw, 64px);
  }

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