.page-about {
  --about-gap: clamp(2.5rem, 6vw, 4.5rem);
  --about-pad: clamp(1rem, 4vw, 2rem);
  display: block;
  color: var(--mist);
  overflow-x: hidden;
}

.page-about .breadcrumb {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1rem var(--about-pad) 0;
}

.page-about .kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--sage);
}

.page-about .index-num {
  font-family: var(--font-mono);
  color: var(--cyan);
  letter-spacing: 0.08em;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.25rem var(--about-pad) 2.5rem;
}

.page-about .about-hero__intro h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.05rem, 6.4vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--mist);
}

.page-about .about-hero__lead {
  margin: 0;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(234, 244, 239, 0.78);
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-stats .plate {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(155deg, rgba(12, 43, 36, 0.95), rgba(10, 27, 51, 0.9));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .about-stats .num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1;
  color: var(--cyan);
}

.page-about .about-stats li:nth-child(2) .num {
  color: var(--orange);
}

.page-about .plate__label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--sage);
}

.page-about .about-hero__media {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-800);
}

.page-about .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-about .about-hero__media img {
  aspect-ratio: 16 / 9;
}

.page-about .media-frame__tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--cyan);
  background: rgba(7, 26, 22, 0.82);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ---------- 章节索引 ---------- */
.page-about .about-toc {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--about-pad) 2rem;
}

.page-about .about-toc__title {
  margin: 0 0 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--sage);
}

.page-about .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-about .chip {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  font-size: 0.8rem;
  color: var(--mist);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-about .chip:hover,
.page-about .chip:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(55, 240, 208, 0.08);
}

/* ---------- 通用章节 ---------- */
.page-about .about-section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--about-gap) var(--about-pad);
  border-top: 1px solid var(--line);
}

.page-about .section-head h2 {
  margin: 0.2rem 0 1rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 4.2vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.page-about .prose p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(234, 244, 239, 0.82);
}

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

/* ---------- 01 起点 ---------- */
.page-about .about-origin {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(36, 48, 107, 0.42), transparent 62%),
    transparent;
}

.page-about .about-origin__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.page-about .about-origin__note {
  padding: 1.1rem 1.2rem;
  background: rgba(36, 48, 107, 0.5);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-md);
}

.page-about .about-origin__note-title {
  margin: 0 0 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--cyan);
}

.page-about .about-origin__note ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-origin__note li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.45rem 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(234, 244, 239, 0.85);
  border-bottom: 1px dashed var(--line);
}

.page-about .about-origin__note li:last-child {
  border-bottom: 0;
}

.page-about .about-origin__note .num {
  flex: 0 0 auto;
  min-width: 5.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--orange);
}

/* ---------- 02 团队 ---------- */
.page-about .about-team__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

.page-about .about-team__media {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-about .about-team__media img {
  aspect-ratio: 4 / 3;
}

.page-about .about-team__jump {
  margin: 1.5rem 0 1rem;
}

.page-about .team-roster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.page-about .team-card {
  padding: 1.15rem 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .team-card--violet {
  background: linear-gradient(170deg, rgba(36, 48, 107, 0.7), rgba(12, 43, 36, 0.85));
}

.page-about .team-card--wine {
  background: linear-gradient(170deg, rgba(74, 31, 46, 0.75), rgba(12, 43, 36, 0.85));
}

.page-about .team-card--ink {
  background: linear-gradient(170deg, rgba(10, 27, 51, 0.9), rgba(7, 26, 22, 0.95));
}

.page-about .team-card__role {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--sage);
}

.page-about .team-card__count {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.4rem 0 0.7rem;
  font-size: 0.8rem;
  color: rgba(234, 244, 239, 0.7);
}

.page-about .team-card__count .num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--mist);
}

.page-about .team-card__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.85;
  color: rgba(234, 244, 239, 0.78);
}

/* ---------- 03 版本 ---------- */
.page-about .about-versions__intro {
  margin: 0;
  max-width: 54ch;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(234, 244, 239, 0.7);
}

.page-about .version-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 1.6rem;
}

.page-about .version-rail {
  padding: 0.9rem 1rem;
  background: rgba(10, 27, 51, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .version-rail__title {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--sage);
}

.page-about .version-rail__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .version-rail__list a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(234, 244, 239, 0.75);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-about .version-rail__list a:hover,
.page-about .version-rail__list a:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-about .version-list {
  position: relative;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
}

.page-about .version-node {
  position: relative;
  padding: 0 0 1.2rem;
}

.page-about .version-node::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: calc(-1.1rem - 4px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(55, 240, 208, 0.14);
}

.page-about .version-node summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.25rem 0;
  cursor: pointer;
  list-style: none;
}

.page-about .version-node summary::-webkit-details-marker {
  display: none;
}

.page-about .version-node summary .num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--orange);
}

.page-about .version-node__title {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--mist);
}

.page-about .version-node__meta {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--sage);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.page-about .version-node[open] .version-node__meta {
  color: var(--ink-900);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-about .version-node p {
  margin: 0.55rem 0 0;
  max-width: 58ch;
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(234, 244, 239, 0.76);
}

/* ---------- 04 流程 ---------- */
.page-about .about-process {
  background:
    radial-gradient(90% 80% at 0% 100%, rgba(74, 31, 46, 0.45), transparent 60%),
    transparent;
}

.page-about .process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.page-about .process-step {
  padding: 1.1rem 1.15rem;
  background: rgba(12, 43, 36, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .process-step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.page-about .process-step__title {
  margin: 0.45rem 0 0.5rem;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--mist);
}

.page-about .process-step p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(234, 244, 239, 0.75);
}

/* ---------- 05 合作 ---------- */
.page-about .partner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-top: 1.3rem;
}

.page-about .partner-card {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(10, 27, 51, 0.7);
}

.page-about .partner-card__num {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--cyan);
}

.page-about .partner-card__title {
  margin: 0.5rem 0 0.45rem;
  font-size: 1rem;
  color: var(--mist);
}

.page-about .partner-card p:last-child {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(234, 244, 239, 0.75);
}

.page-about .partner-case {
  margin-top: 1rem;
  padding: 1.2rem 1.25rem 1.35rem;
  background: linear-gradient(150deg, rgba(74, 31, 46, 0.85), rgba(7, 26, 22, 0.95));
  border-radius: var(--radius-lg);
}

.page-about .partner-case > p:not(.kicker) {
  margin: 0 0 1rem;
  max-width: 56ch;
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(234, 244, 239, 0.85);
}

/* ---------- 06 运营与服务 ---------- */
.page-about .region-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

.page-about .region-contact {
  padding: 1.15rem 1.2rem 1.25rem;
  background: rgba(12, 43, 36, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .region-contact__title {
  margin: 0 0 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--sage);
}

.page-about .region-contact ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .region-contact li {
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--line);
}

.page-about .region-contact li:last-child {
  border-bottom: 0;
}

.page-about .region-contact__label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--sage);
}

.page-about .region-contact__value {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--mist);
  word-break: break-word;
}

.page-about .region-contact__note {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--sage);
}

/* ---------- 动效 ---------- */
@keyframes about-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-about [data-reveal] {
  animation: about-rise 0.7s var(--ease) both;
}

.page-about [data-reveal="80"] {
  animation-delay: 0.1s;
}

.page-about [data-reveal="160"] {
  animation-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal] {
    animation: none;
  }
  .page-about .chip,
  .page-about .version-rail__list a {
    transition: none;
  }
}

/* ---------- 平板 ---------- */
@media (min-width: 640px) {
  .page-about .team-roster,
  .page-about .process-steps,
  .page-about .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* ---------- 桌面 ---------- */
@media (min-width: 900px) {
  .page-about .about-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas:
      "intro stats"
      "media media";
    column-gap: 2.5rem;
    row-gap: 2rem;
    padding-top: 2.5rem;
  }

  .page-about .about-hero__intro {
    grid-area: intro;
  }

  .page-about .about-stats {
    grid-area: stats;
    align-self: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .about-hero__media {
    grid-area: media;
  }

  .page-about .about-origin__body {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 2.5rem;
    align-items: start;
  }

  .page-about .about-team__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    gap: 2.5rem;
  }

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

  .page-about .version-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 2.5rem;
  }

  .page-about .version-rail {
    position: sticky;
    top: calc(var(--bar-h) + 1rem);
  }

  .page-about .version-rail__list {
    flex-direction: column;
    gap: 0.15rem;
  }

  .page-about .version-rail__list a {
    display: block;
    padding: 0.3rem 0;
  }

  .page-about .process-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .page-about .region-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.5rem;
    align-items: start;
  }
}


<main id="main-content" class="page-about">
  <nav class="breadcrumb" aria-label="当前位置">
    <ol class="breadcrumb__list">
      <li><a href="/">首页</a></li>
      <li aria-current="page">品牌档案</li>
    </ol>
  </nav>

  <header class="about-hero" data-reveal="0">
    <div class="about-hero__intro">
      <p class="kicker"><span class="index-num">01</span>赛事内容 · 自 2019 年</p>
      <h1>雅博体育：七年夜场，把赛前两小时备成一份底气</h1>
      <p class="about-hero__lead">开球前查当轮对阵、伤停与主客场战绩，赛后读一条按分钟排开的战报，中间随时切回排名速览，一部手机走完全程。七年下来，体育赛事日常固定访问雅博体育，成了不少球迷周末的固定动作。</p>
      <div class="about-hero__actions">
        <a class="btn btn--primary" href="/catalog/">逛资料目录</a>
        <a class="btn btn--ghost" href="/trends/">看最新前瞻</a>
      </div>
    </div>

    <ul class="about-stats">
      <li class="plate">
        <span class="num">25</span>
        <span class="plate__label">内容团队人数</span>
      </li>
      <li class="plate">
        <span class="num">42万</span>
        <span class="plate__label">月活跃回访用户</span>
      </li>
      <li class="plate">
        <span class="num">14</span>
        <span class="plate__label">覆盖足球联赛</span>
      </li>
      <li class="plate">
        <span class="num">2019</span>
        <span class="plate__label">首版上线年份</span>
      </li>
    </ul>

    <figure class="media-frame media-frame--wide about-hero__media">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场灯光照亮看台轮廓与草皮边线，看台上方是深色夜空">
      <figcaption class="media-frame__tag">夜场档案 · 2026</figcaption>
    </figure>
  </header>

  <nav class="about-toc" aria-label="档案章节">
    <p class="about-toc__title">章节索引</p>
    <div class="chip-row">
      <a class="chip" href="#origin">01 起点</a>
      <a class="chip" href="#team">02 团队</a>
      <a class="chip" href="#versions">03 版本</a>
      <a class="chip" href="#process">04 流程</a>
      <a class="chip" href="#partners">05 合作</a>
      <a class="chip" href="#region">06 服务</a>
    </div>
  </nav>

  <section class="about-section about-origin" id="origin">
    <div class="section-head">
      <p class="kicker"><span class="index-num">01</span>品牌起点</p>
      <h2>2019 年那版上线时，只解决一个麻烦</h2>
    </div>
    <div class="about-origin__body">
      <div class="prose">
        <p>2019 年，V1.0 上线。当时团队很小，目标也简单：让球迷在一个地方看到当轮的对阵、伤停、停赛和主客场战绩，不必在几个来源之间来回翻找。此后每一版都重写过，出发点一直没变。</p>
        <p>七年过去，站点在 2026 年进入第七个年度版本。移动端访问占全部访问的 78%，回访的人来自全国 31 个省级行政区以及海外的中文球迷社群。每周五 18:00 前上线周末双场专题，每日 8:00 更新赛程摘要，周末打开页面的人总能赶上最新一版。</p>
      </div>
      <aside class="about-origin__note" aria-label="一周节奏">
        <p class="about-origin__note-title">一周的节奏</p>
        <ul>
          <li><span class="num">08:00</span>赛程摘要更新</li>
          <li><span class="num">周五 18:00</span>周末双场专题上线</li>
          <li><span class="num">赛前 2 小时</span>对阵与伤停名单更新</li>
          <li><span class="num">赛后 30 分钟</span>战报时间轴发布</li>
          <li><span class="num">约 3 分钟</span>读完一页前瞻</li>
        </ul>
      </aside>
    </div>
  </section>

  <section class="about-section about-team" id="team">
    <div class="section-head">
      <p class="kicker"><span class="index-num">02</span>内容团队</p>
      <h2>25 个人，把一份资料送到你手上之前</h2>
    </div>
    <div class="about-team__top">
      <div class="prose">
        <p>内容团队 25 人：编辑 18 人、数据校验 4 人、产品与前端 3 人。分工很窄，每个人手上的活儿都能直接影响你读到的东西——一张卡片写多长、名单什么时候换、页面在手机上多久能读出来。</p>
      </div>
      <figure class="media-frame media-frame--tall about-team__media">
        <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="摊开的战术板图纸、笔与本子构成的工作台局部" loading="lazy" decoding="async">
        <figcaption class="media-frame__tag">赛前准备 · 工作台</figcaption>
      </figure>
    </div>

    <div class="chip-row about-team__jump">
      <a class="chip" href="#team-edit">编辑组</a>
      <a class="chip" href="#team-check">数据校验</a>
      <a class="chip" href="#team-build">产品与前端</a>
    </div>

    <div class="team-roster">
      <article class="team-card team-card--violet" id="team-edit">
        <p class="team-card__role">编辑组</p>
        <p class="team-card__count"><span class="num">18</span> 人</p>
        <p class="team-card__body">选题、资料采集、卡片撰写与战报整理都在这里完成。每轮产出 30 至 60 张前瞻卡片，摘要控制在三行内，手机上扫一眼就知道这场值不值得跟。</p>
      </article>
      <article class="team-card team-card--wine" id="team-check">
        <p class="team-card__role">数据校验</p>
        <p class="team-card__count"><span class="num">4</span> 人</p>
        <p class="team-card__body">伤停名单、停赛状态、主客场战绩这类硬信息，在发布前由校验岗交叉检查；同一场比赛的轮次与比分在两处记录不一致时，先停下来查清再发。</p>
      </article>
      <article class="team-card team-card--ink" id="team-build">
        <p class="team-card__role">产品与前端</p>
        <p class="team-card__count"><span class="num">3</span> 人</p>
        <p class="team-card__body">负责卡片瀑布流、排名速览和首页直达这些真正被手指点到的地方。目标很具体：移动端首屏 1.2 秒内可读，每一层入口都在拇指够得到的高度。</p>
      </article>
    </div>
  </section>

  <section class="about-section about-versions" id="versions">
    <div class="section-head">
      <p class="kicker"><span class="index-num">03</span>版本演进</p>
      <h2>从 V1.0 到 V3.1，七年七次改写</h2>
      <p class="about-versions__intro">每一次改版都来自同一种反馈：上一版在哪儿让你多翻了一屏。点开任意年份，可以看到那一年改了什么。</p>
    </div>

    <div class="version-layout">
      <nav class="version-rail" aria-label="年份目录">
        <p class="version-rail__title">年份目录</p>
        <ul class="version-rail__list">
          <li><a href="#v2019">2019 · V1.0</a></li>
          <li><a href="#v2020">2020 · V1.5</a></li>
          <li><a href="#v2021">2021 · V1.8</a></li>
          <li><a href="#v2022">2022 · V2.0</a></li>
          <li><a href="#v2024">2024 · V2.8</a></li>
          <li><a href="#v2025">2025 · V3.0</a></li>
          <li><a href="#v2026">2026 · V3.1</a></li>
        </ul>
      </nav>

      <div class="version-list">
        <details class="version-node" id="v2019" open>
          <summary>
            <span class="num">2019</span>
            <span class="version-node__title">V1.0 上线</span>
            <span class="version-node__meta">起点</span>
          </summary>
          <p>当轮对阵、伤停名单与主客场战绩第一次放进同一条阅读路径，球迷不用再开好几个页面拼一张图。</p>
        </details>

        <details class="version-node" id="v2020" open>
          <summary>
            <span class="num">2020</span>
            <span class="version-node__title">V1.5 增加排名速览</span>
            <span class="version-node__meta">排名</span>
          </summary>
          <p>20 个联赛积分榜可以在同一处切换查看，判断一支球队近期走势时不必再跳到别的地方。</p>
        </details>

        <details class="version-node" id="v2021" open>
          <summary>
            <span class="num">2021</span>
            <span class="version-node__title">V1.8 移动端适配</span>
            <span class="version-node__meta">手机</span>
          </summary>
          <p>页面按手机屏幕重排，查名单和比分不再需要双指放大，通勤路上单手也能读完一段。</p>
        </details>

        <details class="version-node" id="v2022" open>
          <summary>
            <span class="num">2022</span>
            <span class="version-node__title">V2.0 卡片瀑布流</span>
            <span class="version-node__meta">卡片</span>
          </summary>
          <p>前瞻改成卡片陈列，一张卡片三行内读完，一屏能对比好几场比赛的准备情况。</p>
        </details>

        <details class="version-node" id="v2024" open>
          <summary>
            <span class="num">2024</span>
            <span class="version-node__title">V2.8 战术板图解</span>
            <span class="version-node__meta">图解</span>
          </summary>
          <p>阵型变化和跑动线路画在图上，配着文字说明，看不懂战术的读者也能跟着明白一条边路怎么被打穿。</p>
        </details>

        <details class="version-node" id="v2025" open>
          <summary>
            <span class="num">2025</span>
            <span class="version-node__title">V3.0 移动优先改版</span>
            <span class="version-node__meta">重构</span>
          </summary>
          <p>整站按手指操作重新排布，导航收进顶部命令栏，章节跳转与筛选都挪到拇指容易够到的位置。</p>
        </details>

        <details class="version-node" id="v2026" open>
          <summary>
            <span class="num">2026</span>
            <span class="version-node__title">V3.1 首页直达</span>
            <span class="version-node__meta">当前版本</span>
          </summary>
          <p>回访用户记住入口后可一键回到主页，周末双场专题直接出现在首屏，从打开到读到当轮对阵只要一次点击。</p>
        </details>
      </div>
    </div>
  </section>

  <section class="about-section about-process" id="process">
    <div class="section-head">
      <p class="kicker"><span class="index-num">04</span>生产流程</p>
      <h2>一条资料要过四道手才发布</h2>
    </div>
    <ol class="process-steps">
      <li class="process-step">
        <span class="process-step__num">01</span>
        <p class="process-step__title">选题</p>
        <p>按轮次和联赛关注度排优先级，周末双场单独成题，提前一天定下要跟的比赛与角度。</p>
      </li>
      <li class="process-step">
        <span class="process-step__num">02</span>
        <p class="process-step__title">资料采集</p>
        <p>对阵、伤停、停赛与主客场战绩分头采集，来源、时间与所属轮次一并记下，方便回查。</p>
      </li>
      <li class="process-step">
        <span class="process-step__num">03</span>
        <p class="process-step__title">双人校验</p>
        <p>两名校验人员交叉检查同一份清单，遇到冲突项回到源头确认，确认后才进入排版。</p>
      </li>
      <li class="process-step">
        <span class="process-step__num">04</span>
        <p class="process-step__title">发布</p>
        <p>赛前两小时更新当轮对阵与伤停名单，赛后三十分钟内上线战报时间轴，按分钟接上比赛进程。</p>
      </li>
    </ol>
  </section>

  <section class="about-section about-partners" id="partners">
    <div class="section-head">
      <p class="kicker"><span class="index-num">05</span>合作生态</p>
      <h2>和谁一起把资料做厚</h2>
    </div>
    <div class="partner-grid">
      <div class="partner-card">
        <p class="partner-card__num num">6</p>
        <p class="partner-card__title">体育数据服务商</p>
        <p>提供赛程、轮次与基础统计，让跨联赛的内容保持同一种节奏。</p>
      </div>
      <div class="partner-card">
        <p class="partner-card__num num">12</p>
        <p class="partner-card__title">业余联赛组委会</p>
        <p>把地方联赛的轮次、场地与赛果带进来，城市级别的比赛也有了可读的前瞻。</p>
      </div>
      <div class="partner-card">
        <p class="partner-card__num num">14+6</p>
        <p class="partner-card__title">联赛与杯赛覆盖</p>
        <p>14 个主要足球联赛与 6 类杯赛，已归档 1.8 万条赛前资料与 9600 篇战报。</p>
      </div>
    </div>
    <div class="partner-case">
      <p class="kicker"><span class="index-num">交流</span>2025 年</p>
      <p>站点入选贵州省体育产业数字化应用交流案例，与同行交流了夜间赛事的编排方式和移动端呈现经验。</p>
      <a class="btn btn--ghost" href="/trends/">看赛况观察</a>
    </div>
  </section>

  <section class="about-section about-region" id="region">
    <div class="section-head">
      <p class="kicker"><span class="index-num">06</span>运营与服务</p>
      <h2>在贵州，把服务做到你能找到人</h2>
    </div>
    <div class="region-body">
      <div class="prose">
        <p>站点运营地区为贵州，团队在这里完成从选题到发布的全流程。客服邮箱在工作日 9:00 至 18:00 内回复；资料上的疑问，附上页面链接与截图，定位会快很多。</p>
        <p>不确定某个入口在哪、手机上怎么回到常看的那一场，可以先翻使用指南，常见问题基本都在里面。</p>
        <div class="about-hero__actions">
          <a class="btn btn--primary" href="/connect/">联系通道</a>
          <a class="btn btn--ghost" href="/guide/">使用指南</a>
        </div>
      </div>
      <div class="region-contact">
        <p class="region-contact__title">联系方式</p>
        <ul>
          <li>
            <span class="region-contact__label">客服邮箱</span>
            <span class="region-contact__value">email@sprint-e-yabo.com.cn</span>
          </li>
          <li>
            <span class="region-contact__label">联系电话</span>
            <span class="region-contact__value num">17652342194</span>
          </li>
          <li>
            <span class="region-contact__label">联系地址</span>
            <span class="region-contact__value">贵州省贵阳市观山湖区长岭北路88号</span>
          </li>
          <li>
            <span class="region-contact__label">备案号</span>
            <span class="region-contact__value num">贵ICP备14277667号</span>
          </li>
        </ul>
        <p class="region-contact__note">工作日 9:00 至 18:00 内回复；赛事资料问题建议附页面链接与截图。</p>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-gap: clamp(2.4rem, 6vw, 4.5rem);
  --about-pad: clamp(1rem, 4vw, 2rem);
  display: block;
  color: var(--mist);
  overflow-x: hidden;
}

.page-about .breadcrumb {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1rem var(--about-pad) 0;
}

.page-about .kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--sage);
}

.page-about .index-num {
  font-family: var(--font-mono);
  color: var(--cyan);
  letter-spacing: 0.08em;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.25rem var(--about-pad) 2.5rem;
}

.page-about .about-hero__intro h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2rem, 6.2vw, 4.3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--mist);
}

.page-about .about-hero__lead {
  margin: 0;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(234, 244, 239, 0.78);
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-stats .plate {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(155deg, rgba(12, 43, 36, 0.95), rgba(10, 27, 51, 0.9));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .about-stats .num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1;
  color: var(--cyan);
}

.page-about .about-stats li:nth-child(2) .num {
  color: var(--orange);
}

.page-about .plate__label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--sage);
}

.page-about .media-frame {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-800);
}

.page-about .media-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .about-hero__media img {
  aspect-ratio: 16 / 9;
}

.page-about .media-frame__tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--cyan);
  background: rgba(7, 26, 22, 0.82);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ---------- 章节索引 ---------- */
.page-about .about-toc {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--about-pad) 2rem;
}

.page-about .about-toc__title {
  margin: 0 0 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--sage);
}

.page-about .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-about .chip {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  font-size: 0.8rem;
  color: var(--mist);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-about .chip:hover,
.page-about .chip:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(55, 240, 208, 0.08);
}

/* ---------- 通用章节 ---------- */
.page-about .about-section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--about-gap) var(--about-pad);
  border-top: 1px solid var(--line);
}

.page-about .section-head h2 {
  margin: 0.2rem 0 1rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 4.2vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.page-about .prose p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(234, 244, 239, 0.82);
}

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

/* ---------- 01 起点 ---------- */
.page-about .about-origin {
  background: radial-gradient(120% 90% at 100% 0%, rgba(36, 48, 107, 0.42), transparent 62%);
}

.page-about .about-origin__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.page-about .about-origin__note {
  padding: 1.1rem 1.2rem;
  background: rgba(36, 48, 107, 0.5);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-md);
}

.page-about .about-origin__note-title {
  margin: 0 0 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--cyan);
}

.page-about .about-origin__note ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-origin__note li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  align-items: baseline;
  padding: 0.45rem 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(234, 244, 239, 0.85);
  border-bottom: 1px dashed var(--line);
}

.page-about .about-origin__note li:last-child {
  border-bottom: 0;
}

.page-about .about-origin__note .num {
  flex: 0 0 auto;
  min-width: 5.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--orange);
}

/* ---------- 02 团队 ---------- */
.page-about .about-team__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

.page-about .about-team__media img {
  aspect-ratio: 4 / 3;
}

.page-about .about-team__jump {
  margin: 1.5rem 0 1rem;
}

.page-about .team-roster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.page-about .team-card {
  padding: 1.15rem 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .team-card--violet {
  background: linear-gradient(170deg, rgba(36, 48, 107, 0.7), rgba(12, 43, 36, 0.85));
}

.page-about .team-card--wine {
  background: linear-gradient(170deg, rgba(74, 31, 46, 0.75), rgba(12, 43, 36, 0.85));
}

.page-about .team-card--ink {
  background: linear-gradient(170deg, rgba(10, 27, 51, 0.9), rgba(7, 26, 22, 0.95));
}

.page-about .team-card__role {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--sage);
}

.page-about .team-card__count {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.4rem 0 0.7rem;
  font-size: 0.8rem;
  color: rgba(234, 244, 239, 0.7);
}

.page-about .team-card__count .num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--mist);
}

.page-about .team-card__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.85;
  color: rgba(234, 244, 239, 0.78);
}

/* ---------- 03 版本 ---------- */
.page-about .about-versions__intro {
  margin: 0;
  max-width: 54ch;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(234, 244, 239, 0.7);
}

.page-about .version-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 1.6rem;
}

.page-about .version-rail {
  padding: 0.9rem 1rem;
  background: rgba(10, 27, 51, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .version-rail__title {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--sage);
}

.page-about .version-rail__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .version-rail__list a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(234, 244, 239, 0.75);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-about .version-rail__list a:hover,
.page-about .version-rail__list a:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-about .version-list {
  position: relative;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
}

.page-about .version-node {
  position: relative;
  padding: 0 0 1.2rem;
}

.page-about .version-node::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: calc(-1.1rem - 4px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(55, 240, 208, 0.14);
}

.page-about .version-node summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.25rem 0;
  cursor: pointer;
  list-style: none;
}

.page-about .version-node summary::-webkit-details-marker {
  display: none;
}

.page-about .version-node summary .num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--orange);
}

.page-about .version-node__title {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--mist);
}

.page-about .version-node__meta {
  padding: 0.15rem 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--sage);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.page-about .version-node[open] .version-node__meta {
  color: var(--ink-900);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-about .version-node p {
  margin: 0.55rem 0 0;
  max-width: 58ch;
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(234, 244, 239, 0.76);
}

/* ---------- 04 流程 ---------- */
.page-about .about-process {
  background: radial-gradient(90% 80% at 0% 100%, rgba(74, 31, 46, 0.45), transparent 60%);
}

.page-about .process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.page-about .process-step {
  padding: 1.1rem 1.15rem;
  background: rgba(12, 43, 36, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .process-step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.page-about .process-step__title {
  margin: 0.45rem 0 0.5rem;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--mist);
}

.page-about .process-step p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(234, 244, 239, 0.75);
}

/* ---------- 05 合作 ---------- */
.page-about .partner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-top: 1.3rem;
}

.page-about .partner-card {
  padding: 1.1rem 1.2rem;
  background: rgba(10, 27, 51, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .partner-card__num {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--cyan);
}

.page-about .partner-card__title {
  margin: 0.5rem 0 0.45rem;
  font-size: 1rem;
  color: var(--mist);
}

.page-about .partner-card p:last-child {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(234, 244, 239, 0.75);
}

.page-about .partner-case {
  margin-top: 1rem;
  padding: 1.2rem 1.25rem 1.35rem;
  background: linear-gradient(150deg, rgba(74, 31, 46, 0.85), rgba(7, 26, 22, 0.95));
  border-radius: var(--radius-lg);
}

.page-about .partner-case > p:not(.kicker) {
  margin: 0 0 1rem;
  max-width: 56ch;
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(234, 244, 239, 0.85);
}

/* ---------- 06 运营与服务 ---------- */
.page-about .region-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

.page-about .region-contact {
  padding: 1.15rem 1.2rem 1.25rem;
  background: rgba(12, 43, 36, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-about .region-contact__title {
  margin: 0 0 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--sage);
}

.page-about .region-contact ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .region-contact li {
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--line);
}

.page-about .region-contact li:last-child {
  border-bottom: 0;
}

.page-about .region-contact__label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--sage);
}

.page-about .region-contact__value {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--mist);
  word-break: break-word;
}

.page-about .region-contact__note {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--sage);
}

/* ---------- 动效 ---------- */
@keyframes about-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-about [data-reveal] {
  animation: about-rise 0.7s var(--ease) both;
}

.page-about [data-reveal="80"] {
  animation-delay: 0.1s;
}

.page-about [data-reveal="160"] {
  animation-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal] {
    animation: none;
  }

  .page-about .chip,
  .page-about .version-rail__list a {
    transition: none;
  }
}

/* ---------- 平板 ---------- */
@media (min-width: 640px) {
  .page-about .team-roster,
  .page-about .process-steps,
  .page-about .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* ---------- 桌面 ---------- */
@media (min-width: 900px) {
  .page-about .about-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas:
      "intro stats"
      "media media";
    column-gap: 2.5rem;
    row-gap: 2rem;
    padding-top: 2.5rem;
  }

  .page-about .about-hero__intro {
    grid-area: intro;
  }

  .page-about .about-stats {
    grid-area: stats;
    align-self: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .about-hero__media {
    grid-area: media;
  }

  .page-about .about-origin__body {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 2.5rem;
    align-items: start;
  }

  .page-about .about-team__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    gap: 2.5rem;
  }

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

  .page-about .version-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 2.5rem;
  }

  .page-about .version-rail {
    position: sticky;
    top: calc(var(--bar-h) + 1rem);
  }

  .page-about .version-rail__list {
    flex-direction: column;
    gap: 0.15rem;
  }

  .page-about .version-rail__list a {
    display: block;
    padding: 0.3rem 0;
  }

  .page-about .process-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .page-about .region-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.5rem;
    align-items: start;
  }
}