.page-about {
  background: var(--ink);
  color: var(--mist);
  --about-line: rgba(154, 160, 200, 0.24);
  --about-panel: rgba(20, 26, 59, 0.72);
}

.page-about .about-hero {
  position: relative;
  padding: 26px 0 40px;
  overflow: hidden;
  background:
    radial-gradient(880px 420px at 88% -12%, rgba(139, 92, 246, 0.34), transparent 70%),
    radial-gradient(680px 380px at 0% 4%, rgba(43, 245, 230, 0.16), transparent 66%),
    var(--ink);
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background: repeating-linear-gradient(0deg, rgba(244, 247, 255, 0.05) 0 1px, transparent 1px 5px);
}

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

.page-about .about-hero-grid {
  display: grid;
  gap: 26px;
  margin-top: 18px;
}

.page-about .about-kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}

.page-about h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 6.4vw, 54px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--mist);
  text-shadow: 0 0 26px rgba(43, 245, 230, 0.22);
}

.page-about .lead {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 62ch;
}

.page-about .about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.page-about .about-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--about-line);
  border-radius: var(--radius);
  background: rgba(6, 43, 42, 0.5);
}

.page-about .about-hero-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid rgba(43, 245, 230, 0.45);
}

.page-about .about-hero-stats .stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(43, 245, 230, 0.45);
}

.page-about .about-hero-stats .stat-label {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.page-about .about-hero-media {
  margin: 30px 0 0;
}

.page-about .media-frame {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--about-line);
  background: var(--ink-2);
}

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

.page-about .about-hero-media img {
  max-height: 300px;
}

.page-about .about-jump {
  border-top: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
  background: rgba(20, 26, 59, 0.6);
}

.page-about .about-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 14px 18px;
  list-style: none;
  max-width: var(--shell-w);
  margin-inline: auto;
}

.page-about .about-jump a {
  display: inline-block;
  padding: 4px 0;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

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

.page-about .about-section {
  padding: 44px 0;
}

.page-about .about-section-alt {
  background: linear-gradient(180deg, rgba(20, 26, 59, 0.75), rgba(10, 6, 24, 0));
}

.page-about .about-section-teal {
  background: linear-gradient(165deg, rgba(6, 43, 42, 0.85), rgba(10, 6, 24, 0.95));
  border-top: 1px solid rgba(43, 245, 230, 0.18);
  border-bottom: 1px solid rgba(43, 245, 230, 0.18);
}

.page-about .about-head {
  margin-bottom: 28px;
}

.page-about .about-no {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold);
  border: 1px solid rgba(255, 201, 60, 0.5);
  border-radius: 4px;
  transform: skewX(-8deg);
}

.page-about h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.4vw, 34px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.page-about .about-sub {
  margin: 12px 0 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

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

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 6px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet) 62%, rgba(139, 92, 246, 0));
}

.page-about .about-stop {
  position: relative;
  padding: 0 0 26px 46px;
}

.page-about .about-stop::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 20px;
  height: 20px;
  background: var(--ink-2);
  border: 2px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(43, 245, 230, 0.4);
}

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

.page-about .about-year {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(43, 245, 230, 0.5);
}

.page-about .about-stop-title {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--mist);
}

.page-about .about-stop-text {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-about .about-details {
  border: 1px solid var(--about-line);
  border-radius: var(--radius-sm);
  background: var(--teal);
  padding: 0 14px;
}

.page-about .about-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 160ms ease;
}

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

.page-about .about-details > summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--orange);
}

.page-about .about-details[open] > summary::before {
  content: "−";
}

.page-about .about-details > summary:hover,
.page-about .about-details > summary:focus-visible {
  color: var(--gold);
}

.page-about .about-details p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .about-details .about-list {
  margin-bottom: 12px;
}

.page-about .about-compare {
  display: grid;
  gap: 16px;
}

.page-about .about-panel {
  padding: 20px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--about-line);
  background: var(--about-panel);
}

.page-about .about-panel h3 {
  margin: 12px 0 12px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}

.page-about .about-panel-old {
  border-color: rgba(154, 160, 200, 0.35);
}

.page-about .about-panel-old h3 {
  color: var(--muted);
}

.page-about .about-panel-new {
  border-color: rgba(43, 245, 230, 0.55);
  background: linear-gradient(160deg, rgba(6, 43, 42, 0.92), rgba(20, 26, 59, 0.9));
  box-shadow: var(--glow);
}

.page-about .about-panel-new h3 {
  color: var(--cyan);
}

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

.page-about .about-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-about .about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  background: var(--violet);
  transform: rotate(45deg);
}

.page-about .about-panel-new .about-list li {
  color: var(--mist);
}

.page-about .about-panel-new .about-list li::before {
  background: var(--cyan);
}

.page-about .about-panel-note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--about-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-about .about-compare-media {
  margin: 22px 0;
}

.page-about .about-details-wide {
  padding: 0 16px;
  background: rgba(20, 26, 59, 0.7);
}

.page-about .about-crew {
  display: grid;
  gap: 16px;
}

.page-about .about-crew-card {
  padding: 20px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--about-line);
  background: var(--about-panel);
}

.page-about .about-crew-role {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--violet);
}

.page-about .about-crew-count {
  margin: 4px 0 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--mist);
}

.page-about .about-crew-text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.page-about .about-crew-a {
  background: linear-gradient(155deg, rgba(6, 43, 42, 0.95), rgba(20, 26, 59, 0.85));
  border-color: rgba(43, 245, 230, 0.4);
}

.page-about .about-crew-a .about-crew-count {
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(43, 245, 230, 0.42);
}

.page-about .about-crew-a .about-crew-role {
  color: var(--cyan);
}

.page-about .about-crew-b {
  border-color: rgba(139, 92, 246, 0.45);
}

.page-about .about-crew-b .about-crew-count {
  color: var(--violet);
}

.page-about .about-crew-c {
  border-color: rgba(255, 201, 60, 0.4);
}

.page-about .about-crew-c .about-crew-count {
  color: var(--gold);
}

.page-about .about-crew-c .about-crew-role {
  color: var(--gold);
}

.page-about .about-crew-media {
  margin: 24px 0 0;
}

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

.page-about .about-mini-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mist);
}

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

.page-about .about-tags .tag {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid rgba(43, 245, 230, 0.35);
  background: rgba(43, 245, 230, 0.08);
  color: var(--mist);
}

.page-about .about-scale-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.page-about .about-bar-row {
  margin-bottom: 18px;
}

.page-about .about-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.page-about .about-bar-num {
  font-size: 14px;
  color: var(--gold);
}

.page-about .about-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(154, 160, 200, 0.16);
  overflow: hidden;
}

.page-about .about-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 14px rgba(43, 245, 230, 0.35);
}

.page-about .about-bar-fill-full {
  width: 100%;
}

.page-about .about-bar-fill-wide {
  width: 69%;
}

.page-about .about-scale-cards {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.page-about .about-scale-card {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--about-line);
  background: rgba(10, 6, 24, 0.6);
}

.page-about .about-scale-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
}

.page-about .about-scale-label {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.page-about .about-scale-cta {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.page-about .about-scale-cta a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 245, 230, 0.45);
  transition: color 160ms ease, border-color 160ms ease;
}

.page-about .about-scale-cta a:hover,
.page-about .about-scale-cta a:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.page-about .about-cadence {
  display: grid;
  gap: 14px;
}

.page-about .about-beat {
  padding: 20px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--about-line);
  background: var(--about-panel);
  border-top: 3px solid var(--cyan);
}

.page-about .about-beat-day {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-about .about-beat h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--mist);
}

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

.page-about .about-beat-violet {
  border-top-color: var(--violet);
}

.page-about .about-beat-violet .about-beat-day {
  color: var(--violet);
}

.page-about .about-beat-gold {
  border-top-color: var(--gold);
}

.page-about .about-beat-gold .about-beat-day {
  color: var(--gold);
}

.page-about .about-cta {
  margin-top: 30px;
  padding: 24px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 122, 26, 0.4);
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(255, 122, 26, 0.22), transparent 70%),
    linear-gradient(150deg, rgba(20, 26, 59, 0.95), rgba(10, 6, 24, 0.9));
  display: grid;
  gap: 18px;
}

.page-about .about-cta h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--mist);
}

.page-about .about-cta p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 58ch;
}

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

@media (min-width: 720px) {
  .page-about .about-hero {
    padding: 34px 0 52px;
  }

  .page-about .about-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
  }

  .page-about .about-hero-media img {
    max-height: 420px;
  }

  .page-about .about-section {
    padding: 62px 0;
  }

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

  .page-about .about-crew-a {
    grid-column: 1 / -1;
  }

  .page-about .about-scale-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .page-about .about-cta {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 28px 26px;
  }

  .page-about .about-hero-media {
    margin-top: 38px;
  }
}

@media (min-width: 960px) {
  .page-about .about-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.75fr);
    align-items: end;
    gap: 34px;
  }

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

  .page-about .about-panel {
    padding: 26px 24px;
  }

  .page-about .about-crew {
    grid-template-columns: 1.15fr 0.92fr 0.92fr;
    align-items: start;
    gap: 18px;
  }

  .page-about .about-crew-a {
    grid-column: auto;
  }

  .page-about .about-crew-b {
    margin-top: 24px;
  }

  .page-about .about-crew-c {
    margin-top: 48px;
  }

  .page-about .about-scale {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 40px;
    align-items: start;
  }

  .page-about .about-timeline {
    max-width: 860px;
  }

  .page-about .about-stop {
    padding-left: 56px;
  }

  .page-about .about-crew-media {
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-jump a,
  .page-about .about-details > summary,
  .page-about .about-scale-cta a {
    transition: none;
  }
}


<main id="main-content" class="page-about">
  <section class="about-hero" aria-labelledby="about-title">
    <div class="shell about-hero-inner">
      <nav class="breadcrumbs" aria-label="面包屑">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">品牌与团队</li>
        </ol>
      </nav>
      <div class="about-hero-grid">
        <div class="about-hero-text">
          <p class="about-kicker">正式版导航 · 后台长廊</p>
          <h1 id="about-title">从2019到正式版，电玩城平台把房间导航一层层搭起来</h1>
          <p class="lead">判断一个导航页值不值得常来，看它背后有没有人在持续打理就够了。我们从一个只有几页玩法说明的中文版起步，把房间分类、规则检索、练局专题和赛季活动一件件做进来，每次改版都留下旧版对照，老玩家换到新版也不用重新摸路。</p>
          <div class="about-hero-actions">
            <a class="btn btn-primary" href="/offerings/">看房间导航</a>
            <a class="btn btn-ghost" href="/guide/">新手从这里开始</a>
          </div>
        </div>
        <div class="stat-row about-hero-stats">
          <div class="stat">
            <span class="stat-value mono">2019</span>
            <span class="stat-label">中文版玩法指引上线</span>
          </div>
          <div class="stat">
            <span class="stat-value mono">12</span>
            <span class="stat-label">人全职维护内容</span>
          </div>
          <div class="stat">
            <span class="stat-value mono">8</span>
            <span class="stat-label">个导航与规则版本留档</span>
          </div>
          <div class="stat">
            <span class="stat-value mono">18</span>
            <span class="stat-label">个街机社群每月反馈</span>
          </div>
        </div>
      </div>
      <figure class="media-frame about-hero-media" data-ratio="wide">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="霓虹街机厅长廊向远处延伸，墙面灯管依次排开形成时间刻度感">
      </figure>
    </div>
  </section>

  <nav class="about-jump" data-chapter-nav aria-label="页面章节">
    <ul>
      <li><a href="#roadmap">发展节点</a></li>
      <li><a href="#compare">新旧对照</a></li>
      <li><a href="#crew">内容班底</a></li>
      <li><a href="#scale">内容体量</a></li>
      <li><a href="#cadence">更新节奏</a></li>
    </ul>
  </nav>

  <section class="about-section" id="roadmap" data-chapter data-reveal aria-labelledby="roadmap-title">
    <div class="shell">
      <header class="about-head">
        <p class="about-no mono">01</p>
        <h2 id="roadmap-title">四个节点，看懂固定栏目是怎么来的</h2>
        <p class="about-sub">房间导航不是一夜之间变成现在这样的。每一次调整，都是被玩家的实际困惑推着走的。</p>
      </header>

      <ol class="about-timeline">
        <li class="about-stop">
          <p class="about-year mono">2019</p>
          <h3 class="about-stop-title">中文版玩法指引与活动专区上线</h3>
          <p class="about-stop-text">从街机厅里最常被问到的几类机台入手，先把玩法讲清楚、把活动排出来，让第一次进场的人知道自己该玩什么。</p>
          <details class="about-details">
            <summary>那一年留下的第一批玩法笔记</summary>
            <p>早期整理的手写笔记只覆盖少数机台，后来按房间归类、补上版本号，才长成今天的规则库。</p>
          </details>
        </li>
        <li class="about-stop">
          <p class="about-year mono">2021</p>
          <h3 class="about-stop-title">第一版房间导航发布</h3>
          <p class="about-stop-text">按热门程度排序，把当时最常被点开的房间摆到最前面。房间少的时候，这样找起来很快。</p>
          <details class="about-details">
            <summary>热门排序之后冒出的新问题</summary>
            <p>房间数量涨上来以后，单靠热度排序会让同类房间散落在长列表各处，找捕鱼机和找赛车要翻半天。分类的念头从那时开始成形。</p>
          </details>
        </li>
        <li class="about-stop">
          <p class="about-year mono">2023</p>
          <h3 class="about-stop-title">华人专区开放规则检索</h3>
          <p class="about-stop-text">支持按房间、玩法、期数、关键词组合定位条目，简体中文关键词和房间简称都能命中，查一条规则不必从头翻目录。</p>
          <details class="about-details">
            <summary>规则条目开始统一标注</summary>
            <p>从这一年起，每条规则都带上适用房间、版本号和最近更新批次，改过什么、什么时候改的，都能回查。</p>
          </details>
        </li>
        <li class="about-stop">
          <p class="about-year mono">2024</p>
          <h3 class="about-stop-title">正式版导航完成改版</h3>
          <p class="about-stop-text">六类房间成为固定栏目，悬浮舱入口跟着你走，房间改用卡片矩阵铺开，规则、练局、回访并列可达。旧版位置保留在历史版本入口，随时能对照。</p>
          <details class="about-details">
            <summary>改版之后多出来的两条线</summary>
            <p>历史版本入口固定放进页脚，会员中心也能进；每一条导航和规则的位置变化都写了说明，习惯旧路径的玩家不用重新学。</p>
          </details>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-section about-section-alt" id="compare" data-chapter data-reveal aria-labelledby="compare-title">
    <div class="shell">
      <header class="about-head">
        <p class="about-no mono">02</p>
        <h2 id="compare-title">旧版找热点，新版找位置</h2>
        <p class="about-sub">两个版本解决的是两件事：旧版回答“现在哪个房间火”，正式版回答“我要的那类房间在哪、对应的规则在哪”。</p>
      </header>

      <div class="about-compare">
        <article class="about-panel about-panel-old">
          <p class="badge badge-violet">旧版导航</p>
          <h3>一条长列表，按热度往下排</h3>
          <ul class="about-list">
            <li>房间逐条纵向排列，越靠前越热门</li>
            <li>找规则要先退回上层页面再翻</li>
            <li>没有分类标签，同类房间容易分散</li>
            <li>适合已经熟悉房间、跟着热度走的老玩家</li>
          </ul>
          <p class="about-panel-note">旧版路径仍然能用，位置变化写在历史版本入口的对照说明里。</p>
        </article>

        <article class="about-panel about-panel-new">
          <p class="badge badge-gold">正式版导航</p>
          <h3>固定栏目加悬浮舱，房间卡片一眼归类</h3>
          <ul class="about-list">
            <li>六类房间做成固定栏目，入口位置不变</li>
            <li>悬浮舱常驻一侧，任何章节都能回到房间导航</li>
            <li>房间以卡片矩阵铺开，类别和玩法标签直接标在牌面上</li>
            <li>规则检索、练局专题、回访记录与房间导航并列可达</li>
          </ul>
          <p class="about-panel-note">想核对某个栏目换了位置，进会员中心打开旧版导航对照表即可。</p>
        </article>
      </div>

      <figure class="media-frame about-compare-media" data-ratio="wide">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="左侧旧版纵向列表与右侧正式版悬浮舱和房间卡片矩阵的抽象对比示意" loading="lazy" decoding="async">
      </figure>

      <details class="about-details about-details-wide">
        <summary>旧版的位置我还能找回来吗</summary>
        <p>会员中心的历史版本入口保留最近 8 个导航版本与规则版本的对照说明，可以按栏目查看正式版与旧版的位置变化；页脚也固定放了这个入口，找不到的时候往下拉到底就行。</p>
      </details>
    </div>
  </section>

  <section class="about-section" id="crew" data-chapter data-reveal aria-labelledby="crew-title">
    <div class="shell">
      <header class="about-head">
        <p class="about-no mono">03</p>
        <h2 id="crew-title">12 个人，分三条线守着这张导航</h2>
        <p class="about-sub">规则编辑、玩法测试、活动运营各管一段，工作日轮值，谁值班谁处理当天的新条目和玩家纠错。</p>
      </header>

      <div class="about-crew">
        <article class="about-crew-card about-crew-a">
          <p class="about-crew-role">规则编辑</p>
          <p class="about-crew-count mono">5 人</p>
          <p class="about-crew-text">规则库的日常维护由这条线负责：新增条目按房间类型与玩法双层索引归档，每条都写清适用房间、版本号和最近更新批次。每周五发布一批更新，玩家从纠错入口提交的问题在工作日跟进处理。</p>
          <details class="about-details">
            <summary>职责清单</summary>
            <ul class="about-list">
              <li>按房间类型与玩法双层索引整理新规则</li>
              <li>标注适用房间、版本号与最近更新批次</li>
              <li>处理内容纠错入口的玩家反馈</li>
              <li>配合检索更新关键词，让房间简称也能搜到</li>
            </ul>
          </details>
        </article>

        <article class="about-crew-card about-crew-b">
          <p class="about-crew-role">玩法测试</p>
          <p class="about-crew-count mono">4 人</p>
          <p class="about-crew-text">进房间实测是练局专题的来源。弹道怎么走、炮台什么时候换节奏、鱼群分值怎么分，测完写成能照着做的案例，按月出一期，目前已经出到第 12 期。</p>
          <details class="about-details">
            <summary>职责清单</summary>
            <ul class="about-list">
              <li>每期覆盖弹道观察、炮台节奏、鱼群分值、练局复盘</li>
              <li>案例按房间分类整理，方便对号入座</li>
              <li>新玩法上线前先跑一轮实测再写说明</li>
            </ul>
          </details>
        </article>

        <article class="about-crew-card about-crew-c">
          <p class="about-crew-role">活动运营</p>
          <p class="about-crew-count mono">3 人</p>
          <p class="about-crew-text">霓虹赛季里的新手练局、房间挑战、周末金币加成三类活动由这条线排期，奖励统一为站内积分、装饰徽章与挑战卡。每月还会收集 18 个街机内容社群的房间体验反馈，用于调整导航排序。</p>
          <details class="about-details">
            <summary>职责清单</summary>
            <ul class="about-list">
              <li>每个赛季持续 6 周，赛后保留活动说明与结果页</li>
              <li>整理社群反馈，形成房间排序的调整依据</li>
              <li>每季度梳理一次站内搜索热词</li>
            </ul>
          </details>
        </article>
      </div>

      <figure class="media-frame about-crew-media" data-ratio="wide">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="规则编辑台与发光屏幕的特写，墙面贴着写有期数编号的便签" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

  <section class="about-section about-section-teal" id="scale" data-chapter data-reveal aria-labelledby="scale-title">
    <div class="shell">
      <header class="about-head">
        <p class="about-no mono">04</p>
        <h2 id="scale-title">六类房间铺开，规则条目比导航还密</h2>
        <p class="about-sub">房间决定你从哪里进场，规则决定你进场之后怎么玩。两者同步长，才不会出现有房间没说明的空档。</p>
      </header>

      <div class="about-scale">
        <div class="about-scale-tags">
          <h3 class="about-mini-title">房间分成六类</h3>
          <ul class="about-tags">
            <li class="tag">捕鱼机</li>
            <li class="tag">街机格斗</li>
            <li class="tag">休闲棋牌</li>
            <li class="tag">赛车竞速</li>
            <li class="tag">音乐节奏</li>
            <li class="tag">多人闯关</li>
          </ul>
          <p class="about-scale-note">六类房间下共覆盖 28 种玩法，房间导航条目累计 860 条，规则库按同一套分类索引，找房间和找规则用的是同一把尺子。</p>
        </div>

        <div class="about-scale-bars">
          <div class="about-bar-row">
            <p class="about-bar-label"><span>规则条目</span><span class="mono about-bar-num">1240 条</span></p>
            <div class="about-bar"><span class="about-bar-fill about-bar-fill-full"></span></div>
          </div>
          <div class="about-bar-row">
            <p class="about-bar-label"><span>房间导航</span><span class="mono about-bar-num">860 条</span></p>
            <div class="about-bar"><span class="about-bar-fill about-bar-fill-wide"></span></div>
          </div>
          <div class="about-scale-cards">
            <div class="about-scale-card">
              <span class="mono about-scale-num">96</span>
              <span class="about-scale-label">个练局案例，来自 12 期专题</span>
            </div>
            <div class="about-scale-card">
              <span class="mono about-scale-num">28</span>
              <span class="about-scale-label">种玩法，分布在六类房间里</span>
            </div>
          </div>
        </div>
      </div>

      <p class="about-scale-cta">想直接看条目，去 <a href="/offerings/">玩法与房间</a>；想先搞清楚规则怎么看，去 <a href="/guide/">新手指引</a>。</p>
    </div>
  </section>

  <section class="about-section" id="cadence" data-chapter data-reveal aria-labelledby="cadence-title">
    <div class="shell">
      <header class="about-head">
        <p class="about-no mono">05</p>
        <h2 id="cadence-title">更新有固定日子，问话有人接</h2>
        <p class="about-sub">内容按周推进，反馈按工作日处理，回访申请提交后通常在工作日 4 小时内得到首次响应。</p>
      </header>

      <div class="about-cadence">
        <article class="about-beat about-beat-cyan">
          <p class="about-beat-day mono">每周二</p>
          <h3>房间导航更新</h3>
          <p>新房间上架、旧房间调整、分类位置变化在这天统一进版，条目改动同步到检索结果。</p>
        </article>
        <article class="about-beat about-beat-violet">
          <p class="about-beat-day mono">每周五</p>
          <h3>规则批次发布</h3>
          <p>规则编辑把这一周整理好的条目打包成新批次，每条带上适用房间、版本号与更新批次。</p>
        </article>
        <article class="about-beat about-beat-gold">
          <p class="about-beat-day mono">每月首个完整周</p>
          <h3>练局专题新一期</h3>
          <p>玩法测试把上个月的实测案例整理成专题，按房间分类发布，配合当期活动主题。</p>
        </article>
      </div>

      <div class="about-cta">
        <div class="about-cta-text">
          <h3>有具体问题想找人问</h3>
          <p>房间规则看不懂、旧版位置对不上、想给某个条目提纠错，都可以直接联系我们。想追更新进度，翻更新手记就行。</p>
        </div>
        <div class="about-cta-actions">
          <a class="btn btn-primary" href="/consult/">联系与回访</a>
          <a class="btn btn-ghost" href="/notes/">翻更新手记</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-about {
  background: var(--ink);
  color: var(--mist);
  --about-line: rgba(154, 160, 200, 0.24);
  --about-panel: rgba(20, 26, 59, 0.72);
}

.page-about .about-hero {
  position: relative;
  padding: 26px 0 40px;
  overflow: hidden;
  background:
    radial-gradient(880px 420px at 88% -12%, rgba(139, 92, 246, 0.34), transparent 70%),
    radial-gradient(680px 380px at 0% 4%, rgba(43, 245, 230, 0.16), transparent 66%),
    var(--ink);
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background: repeating-linear-gradient(0deg, rgba(244, 247, 255, 0.05) 0 1px, transparent 1px 5px);
}

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

.page-about .about-hero-grid {
  display: grid;
  gap: 26px;
  margin-top: 18px;
}

.page-about .about-kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}

.page-about h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 6.4vw, 54px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--mist);
  text-shadow: 0 0 26px rgba(43, 245, 230, 0.22);
}

.page-about .lead {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 62ch;
}

.page-about .about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.page-about .about-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--about-line);
  border-radius: var(--radius);
  background: rgba(6, 43, 42, 0.5);
}

.page-about .about-hero-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid rgba(43, 245, 230, 0.45);
}

.page-about .about-hero-stats .stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(43, 245, 230, 0.45);
}

.page-about .about-hero-stats .stat-label {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.page-about .about-hero-media {
  margin: 30px 0 0;
}

.page-about .media-frame {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--about-line);
  background: var(--ink-2);
}

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

.page-about .about-hero-media img {
  max-height: 300px;
}

.page-about .about-jump {
  border-top: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
  background: rgba(20, 26, 59, 0.6);
}

.page-about .about-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 14px 18px;
  list-style: none;
  max-width: var(--shell-w);
  margin-inline: auto;
}

.page-about .about-jump a {
  display: inline-block;
  padding: 4px 0;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

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

.page-about .about-section {
  padding: 44px 0;
}

.page-about .about-section-alt {
  background: linear-gradient(180deg, rgba(20, 26, 59, 0.75), rgba(10, 6, 24, 0));
}

.page-about .about-section-teal {
  background: linear-gradient(165deg, rgba(6, 43, 42, 0.85), rgba(10, 6, 24, 0.95));
  border-top: 1px solid rgba(43, 245, 230, 0.18);
  border-bottom: 1px solid rgba(43, 245, 230, 0.18);
}

.page-about .about-head {
  margin-bottom: 28px;
}

.page-about .about-no {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold);
  border: 1px solid rgba(255, 201, 60, 0.5);
  border-radius: 4px;
  transform: skewX(-8deg);
}

.page-about h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.4vw, 34px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.page-about .about-sub {
  margin: 12px 0 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

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

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 6px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet) 62%, rgba(139, 92, 246, 0));
}

.page-about .about-stop {
  position: relative;
  padding: 0 0 26px 46px;
}

.page-about .about-stop::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 20px;
  height: 20px;
  background: var(--ink-2);
  border: 2px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(43, 245, 230, 0.4);
}

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

.page-about .about-year {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(43, 245, 230, 0.5);
}

.page-about .about-stop-title {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--mist);
}

.page-about .about-stop-text {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-about .about-details {
  border: 1px solid var(--about-line);
  border-radius: var(--radius-sm);
  background: var(--teal);
  padding: 0 14px;
}

.page-about .about-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 160ms ease;
}

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

.page-about .about-details > summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--orange);
}

.page-about .about-details[open] > summary::before {
  content: "−";
}

.page-about .about-details > summary:hover,
.page-about .about-details > summary:focus-visible {
  color: var(--gold);
}

.page-about .about-details p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .about-details .about-list {
  margin-bottom: 12px;
}

.page-about .about-compare {
  display: grid;
  gap: 16px;
}

.page-about .about-panel {
  padding: 20px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--about-line);
  background: var(--about-panel);
}

.page-about .about-panel h3 {
  margin: 12px 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}

.page-about .about-panel-old {
  border-color: rgba(154, 160, 200, 0.35);
}

.page-about .about-panel-old h3 {
  color: var(--muted);
}

.page-about .about-panel-new {
  border-color: rgba(43, 245, 230, 0.55);
  background: linear-gradient(160deg, rgba(6, 43, 42, 0.92), rgba(20, 26, 59, 0.9));
  box-shadow: var(--glow);
}

.page-about .about-panel-new h3 {
  color: var(--cyan);
}

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

.page-about .about-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-about .about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  background: var(--violet);
  transform: rotate(45deg);
}

.page-about .about-panel-new .about-list li {
  color: var(--mist);
}

.page-about .about-panel-new .about-list li::before {
  background: var(--cyan);
}

.page-about .about-panel-note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--about-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-about .about-compare-media {
  margin: 22px 0;
}

.page-about .about-details-wide {
  padding: 0 16px;
  background: rgba(20, 26, 59, 0.7);
}

.page-about .about-crew {
  display: grid;
  gap: 16px;
}

.page-about .about-crew-card {
  padding: 20px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--about-line);
  background: var(--about-panel);
}

.page-about .about-crew-role {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--violet);
}

.page-about .about-crew-count {
  margin: 4px 0 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--mist);
}

.page-about .about-crew-text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.page-about .about-crew-a {
  background: linear-gradient(155deg, rgba(6, 43, 42, 0.95), rgba(20, 26, 59, 0.85));
  border-color: rgba(43, 245, 230, 0.4);
}

.page-about .about-crew-a .about-crew-count,
.page-about .about-crew-a .about-crew-role {
  color: var(--cyan);
}

.page-about .about-crew-a .about-crew-count {
  text-shadow: 0 0 16px rgba(43, 245, 230, 0.42);
}

.page-about .about-crew-b {
  border-color: rgba(139, 92, 246, 0.45);
}

.page-about .about-crew-b .about-crew-count {
  color: var(--violet);
}

.page-about .about-crew-c {
  border-color: rgba(255, 201, 60, 0.4);
}

.page-about .about-crew-c .about-crew-count,
.page-about .about-crew-c .about-crew-role {
  color: var(--gold);
}

.page-about .about-crew-media {
  margin: 24px 0 0;
}

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

.page-about .about-mini-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mist);
}

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

.page-about .about-tags .tag {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid rgba(43, 245, 230, 0.35);
  background: rgba(43, 245, 230, 0.08);
  color: var(--mist);
}

.page-about .about-scale-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.page-about .about-bar-row {
  margin-bottom: 18px;
}

.page-about .about-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.page-about .about-bar-num {
  font-size: 14px;
  color: var(--gold);
}

.page-about .about-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(154, 160, 200, 0.16);
  overflow: hidden;
}

.page-about .about-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 14px rgba(43, 245, 230, 0.35);
}

.page-about .about-bar-fill-full {
  width: 100%;
}

.page-about .about-bar-fill-wide {
  width: 69%;
}

.page-about .about-scale-cards {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.page-about .about-scale-card {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--about-line);
  background: rgba(10, 6, 24, 0.6);
}

.page-about .about-scale-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
}

.page-about .about-scale-label {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.page-about .about-scale-cta {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.page-about .about-scale-cta a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 245, 230, 0.45);
  transition: color 160ms ease, border-color 160ms ease;
}

.page-about .about-scale-cta a:hover,
.page-about .about-scale-cta a:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.page-about .about-cadence {
  display: grid;
  gap: 14px;
}

.page-about .about-beat {
  padding: 20px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--about-line);
  border-top: 3px solid var(--cyan);
  background: var(--about-panel);
}

.page-about .about-beat-day {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-about .about-beat h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--mist);
}

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

.page-about .about-beat-violet {
  border-top-color: var(--violet);
}

.page-about .about-beat-violet .about-beat-day {
  color: var(--violet);
}

.page-about .about-beat-gold {
  border-top-color: var(--gold);
}

.page-about .about-beat-gold .about-beat-day {
  color: var(--gold);
}

.page-about .about-cta {
  margin-top: 30px;
  padding: 24px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 122, 26, 0.4);
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(255, 122, 26, 0.22), transparent 70%),
    linear-gradient(150deg, rgba(20, 26, 59, 0.95), rgba(10, 6, 24, 0.9));
  display: grid;
  gap: 18px;
}

.page-about .about-cta h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--mist);
}

.page-about .about-cta p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 58ch;
}

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

@media (min-width: 720px) {
  .page-about .about-hero {
    padding: 34px 0 52px;
  }

  .page-about .about-hero-stats {
    gap: 16px;
    padding: 20px;
  }

  .page-about .about-hero-media img {
    max-height: 420px;
  }

  .page-about .about-hero-media {
    margin-top: 38px;
  }

  .page-about .about-section {
    padding: 62px 0;
  }

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

  .page-about .about-crew-a {
    grid-column: 1 / -1;
  }

  .page-about .about-scale-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .page-about .about-cta {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 28px 26px;
  }
}

@media (min-width: 960px) {
  .page-about .about-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.75fr);
    align-items: end;
    gap: 34px;
  }

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

  .page-about .about-panel {
    padding: 26px 24px;
  }

  .page-about .about-crew {
    grid-template-columns: 1.15fr 0.92fr 0.92fr;
    align-items: start;
    gap: 18px;
  }

  .page-about .about-crew-a {
    grid-column: auto;
  }

  .page-about .about-crew-b {
    margin-top: 24px;
  }

  .page-about .about-crew-c {
    margin-top: 48px;
  }

  .page-about .about-scale {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 40px;
    align-items: start;
  }

  .page-about .about-timeline {
    max-width: 860px;
  }

  .page-about .about-stop {
    padding-left: 56px;
  }

  .page-about .about-crew-media {
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-jump a,
  .page-about .about-details > summary,
  .page-about .about-scale-cta a {
    transition: none;
  }
}