.page-about {
  --about-line: rgba(21, 25, 21, .16);
  --about-line-light: rgba(246, 241, 227, .22);
}

/* ---------- hero ---------- */
.page-about .about-hero {
  position: relative;
  padding: clamp(30px, 5vw, 56px) 0 clamp(34px, 5vw, 60px);
  background:
    linear-gradient(180deg, rgba(217, 224, 210, .48), rgba(246, 241, 227, 0) 78%),
    var(--ivory);
  border-bottom: 1px solid var(--about-line);
  overflow: hidden;
}
.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--jade) 0 18px, transparent 18px 34px);
  opacity: .5;
}
.page-about .about-hero-grid {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  grid-template-columns: 1fr;
}
.page-about .about-hero-main .breadcrumbs {
  margin-bottom: 18px;
}
.page-about .about-hero-main h1 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.06;
  font-size: clamp(34px, 7vw, 60px);
  margin: 10px 0 18px;
  color: var(--ink);
}
.page-about .about-hero-main .lead {
  max-width: 34em;
  color: var(--ink-70);
  font-size: clamp(15px, 2.2vw, 17px);
}
.page-about .about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-about .about-hero-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ink);
  background: var(--tile);
}
.page-about .board-cell {
  padding: 20px 16px 22px;
  border-right: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
}
.page-about .board-cell:nth-child(2n) { border-right: 0; }
.page-about .board-cell:nth-child(n+3) { border-bottom: 0; }
.page-about .board-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1;
  color: var(--jade);
  letter-spacing: -.02em;
}
.page-about .board-num span {
  font-size: .5em;
  vertical-align: super;
  color: var(--gold);
}
.page-about .board-cell p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-70);
}
.page-about .board-cell--jade { background: var(--jade); }
.page-about .board-cell--jade .board-num,
.page-about .board-cell--jade p { color: var(--tile); }
.page-about .board-cell--jade .board-num { color: var(--gold); }
.page-about .board-cell--ink { background: var(--ink); }
.page-about .board-cell--ink .board-num { color: var(--gold); }
.page-about .board-cell--ink p { color: var(--paper-70); }

/* ---------- shared section head ---------- */
.page-about .about-section-head {
  max-width: 46em;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.page-about .about-section-head .section-title {
  margin: 8px 0 14px;
}
.page-about .about-section-lead {
  color: var(--ink-70);
  margin: 0;
}
.page-about .about-section-head--dark .section-title { color: var(--tile); }
.page-about .about-section-head--dark .about-section-lead { color: var(--paper-70); }
.page-about .eyebrow--gold { color: var(--gold); }

/* ---------- origin ---------- */
.page-about .about-origin-grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1fr;
}
.page-about .about-figure { margin: 0; }
.page-about .about-figure .media {
  border: 1px solid var(--ink);
  background: var(--wood);
}
.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-origin-text h2 { margin: 8px 0 16px; }
.page-about .about-origin-text p {
  color: var(--ink-70);
  margin: 0 0 14px;
  max-width: 40em;
}
.page-about .about-origin-text p:first-of-type {
  color: var(--ink);
  font-size: clamp(16px, 2.4vw, 18px);
}

/* ---------- system ---------- */
.page-about .about-system-grid {
  display: grid;
  gap: clamp(24px, 4vw, 52px);
  grid-template-columns: 1fr;
  align-items: start;
}
.page-about .about-system-figure .media {
  border: 1px solid var(--ink);
  background: var(--mist);
}
.page-about .about-system-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-system-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.page-about .about-system-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--about-line);
}
.page-about .about-system-list li:last-child {
  border-bottom: 1px solid var(--about-line);
}
.page-about .sys-index {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--cinnabar);
  padding-top: 3px;
}
.page-about .about-system-list h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.6vw, 20px);
  margin: 0 0 8px;
  color: var(--ink);
}
.page-about .about-system-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-70);
}

/* ---------- team ---------- */
.page-about .about-team { color: var(--tile); }
.page-about .about-team-grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  grid-template-columns: 1fr;
  align-items: start;
}
.page-about .about-team-figure { margin: 0; }
.page-about .about-team-figure .media {
  border: 1px solid var(--about-line-light);
  background: var(--wood);
}
.page-about .about-team-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-team-figure .media-caption { color: var(--paper-70); }

.page-about .team-legend {
  display: grid;
  gap: 14px;
}
.page-about .legend-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--about-line-light);
  background: rgba(246, 241, 227, .05);
}
.page-about .legend-dot {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  display: block;
}
.page-about .legend-dot--jade { background: var(--jade); }
.page-about .legend-dot--gold { background: var(--gold); }
.page-about .legend-dot--cinnabar { background: var(--cinnabar); }
.page-about .legend-dot--ink { background: var(--mist); }
.page-about .legend-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--tile);
}
.page-about .legend-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--paper-70);
}

.page-about .about-review-flow {
  margin-top: clamp(32px, 5vw, 52px);
  border-top: 1px solid var(--about-line-light);
  padding-top: 24px;
}
.page-about .flow-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--gold);
  margin: 0 0 16px;
}
.page-about .flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  counter-reset: flow;
}
.page-about .flow-steps li {
  padding: 18px 18px 18px 20px;
  border-left: 3px solid var(--gold);
  background: rgba(21, 25, 21, .28);
}
.page-about .flow-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 6px;
}
.page-about .flow-steps strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--tile);
  margin-bottom: 6px;
}
.page-about .flow-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--paper-70);
}

/* ---------- timeline ---------- */
.page-about .about-timeline-section {
  background:
    linear-gradient(180deg, var(--ivory), rgba(217, 224, 210, .55));
}
.page-about .about-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 18px;
}
.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--jade), var(--gold) 55%, var(--cinnabar));
  opacity: .55;
}
.page-about .timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  align-items: start;
}
.page-about .timeline-year {
  position: relative;
  z-index: 1;
}
.page-about .timeline-year span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--tile);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink-16);
}
.page-about .timeline-card {
  border: 1px solid var(--about-line);
  background: var(--tile);
  padding: 16px 18px 18px;
}
.page-about .timeline-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 19px);
  margin: 0 0 8px;
  color: var(--ink);
}
.page-about .timeline-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-70);
}
.page-about .timeline-item:last-child .timeline-year span {
  background: var(--cinnabar);
  border-color: var(--cinnabar-deep);
  color: var(--tile);
}

/* ---------- partners ---------- */
.page-about .about-partners-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: start;
}
.page-about .about-partners-main .section-title { margin: 8px 0 16px; }
.page-about .about-partners-main p {
  color: var(--paper-70);
  margin: 0 0 14px;
  max-width: 38em;
}
.page-about .about-partners-main .btn { margin-top: 12px; }
.page-about .about-honor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--about-line-light);
}
.page-about .about-honor-list li {
  padding: 18px 16px;
  border-right: 1px solid var(--about-line-light);
  border-bottom: 1px solid var(--about-line-light);
}
.page-about .about-honor-list li:nth-child(2n) { border-right: 0; }
.page-about .about-honor-list li:nth-child(n+3) { border-bottom: 0; }
.page-about .honor-year {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 10px;
}
.page-about .about-honor-list p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--paper-70);
}

/* ---------- service ---------- */
.page-about .about-service-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: start;
}
.page-about .about-service-main .section-title { margin: 8px 0 16px; }
.page-about .about-service-main p {
  color: var(--ink-70);
  margin: 0 0 14px;
  max-width: 40em;
}
.page-about .about-service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.page-about .about-contact-card {
  border: 1px solid var(--ink);
  background: var(--mist);
  padding: 22px 20px 24px;
}
.page-about .contact-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 16px;
  color: var(--ink);
}
.page-about .contact-list {
  margin: 0;
  display: grid;
  gap: 12px;
}
.page-about .contact-list > div {
  border-top: 1px solid var(--about-line);
  padding-top: 10px;
}
.page-about .contact-list dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--cinnabar-deep);
  margin-bottom: 4px;
}
.page-about .contact-list dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  word-break: break-word;
}
.page-about .contact-list a { color: var(--jade); }
.page-about .contact-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-70);
}

/* ---------- media caption ---------- */
.page-about .media-caption {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  font-size: 12.5px;
  color: var(--ink-70);
}

/* ---------- responsive ---------- */
@media (min-width: 720px) {
  .page-about .about-hero-board { grid-template-columns: 1fr 1fr; }
  .page-about .about-origin-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }
  .page-about .about-system-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  }
  .page-about .about-system-figure {
    position: sticky;
    top: 90px;
  }
  .page-about .about-team-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }
  .page-about .flow-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .page-about .flow-steps li {
    border-left: 0;
    border-top: 3px solid var(--gold);
    background: none;
    padding: 18px 18px 0 0;
  }
  .page-about .flow-steps li + li {
    border-left: 1px solid var(--about-line-light);
    padding-left: 18px;
  }
  .page-about .about-timeline::before { left: 84px; }
  .page-about .timeline-item {
    grid-template-columns: 168px 1fr;
    gap: 20px;
    align-items: center;
  }
  .page-about .timeline-year span {
    width: 84px;
    height: 84px;
    font-size: 16px;
  }
  .page-about .timeline-card { padding: 20px 24px 22px; }
  .page-about .about-partners-grid,
  .page-about .about-service-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  }
}

@media (min-width: 1040px) {
  .page-about .about-hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    align-items: end;
  }
  .page-about .about-honor-list { grid-template-columns: 1fr 1fr; }
  .page-about .about-system-list li {
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding: 24px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
<<<END>>>

<main id="main-content" class="page-about">
  <div class="about-hero">
    <div class="container about-hero-grid">
      <div class="about-hero-main">
        <nav class="breadcrumbs" aria-label="面包屑">
          <a href="/">牌桌首页</a>
          <span aria-hidden="true">/</span>
          <span aria-current="page">牌桌故事</span>
        </nav>
        <p class="eyebrow">ABOUT · 桌边留一局</p>
        <h1>一张牌桌，<br>和它背后十四个人</h1>
        <p class="lead">麻将胡了从一群人凑在桌边讲规则开始，慢慢长成了今天的规则学习与桌面端练习入口。你先看懂一手牌，再坐下来打一局，这才是我们想给你的顺序。</p>
        <div class="about-hero-actions">
          <a class="btn btn-primary" href="/services/">先练两把</a>
          <a class="btn btn-line" href="/find-us/">找我们聊聊</a>
        </div>
      </div>
      <aside class="about-hero-board" aria-label="站点速览">
        <div class="board-cell">
          <span class="board-num">18万<span>+</span></span>
          <p>累计陪伴的规则学习用户</p>
        </div>
        <div class="board-cell board-cell--jade">
          <span class="board-num">128</span>
          <p>组玩法说明收进规则库</p>
        </div>
        <div class="board-cell">
          <span class="board-num">42万</span>
          <p>次桌面端下载</p>
        </div>
        <div class="board-cell board-cell--ink">
          <span class="board-num">14</span>
          <p>人内容团队，分工到岗</p>
        </div>
      </aside>
    </div>
  </div>

  <section class="section about-origin" id="origin">
    <div class="container about-origin-grid">
      <figure class="about-figure">
        <div class="media media--framed">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="暖光下的老牌桌，手部正在理牌，翠绿牌面反射出柔和光泽">
        </div>
        <figcaption class="media-caption">牌桌不散场，规则就有人讲</figcaption>
      </figure>
      <div class="about-origin-text">
        <p class="eyebrow">起点 · 2021 之前</p>
        <h2 class="section-title">“桌边留一局”是怎么来的</h2>
        <p>最早是一张真的桌子。几个人下班后凑在一起，新手总在同一个地方卡住：这一手到底算不算胡、番型怎么数、什么时候该碰。老手讲得太快，新人听得太急，一局没打完就散了。</p>
        <p>我们想改的就是这件事——把牌桌边随口讲的那几句，整理成能自己翻、反复看的说明。座位不散，随时能回来再问一遍，这就是“桌边留一局”最早的意思。</p>
        <p>后来它成了整个站点的组织方式：规则按翻阅习惯排，模拟器先让你上手，桌面端把牌桌搬到你习惯的屏幕上。你不需要一次学完，想起来就回来看一段。</p>
      </div>
    </div>
  </section>

  <section class="section section--tight about-system" id="system">
    <div class="container">
      <header class="about-section-head">
        <p class="eyebrow">内容体系 · 怎么翻</p>
        <h2 class="section-title">规则按你查它的方式来排</h2>
        <p class="about-section-lead">新手最怕的是一屏密密麻麻的条款。我们把规则拆成一张张卡片，按你当下想解决的问题归位，翻到哪一层由你决定。</p>
      </header>

      <div class="about-system-grid">
        <div class="about-system-figure">
          <div class="media media--square">
            <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="扁平插画风格的规则示意图，麻将牌标签按番型与流程分组排列" loading="lazy" decoding="async">
          </div>
        </div>
        <ul class="about-system-list">
          <li>
            <span class="sys-index">01</span>
            <div>
              <h3>四个标签，四种问法</h3>
              <p>中文版规则专区按入门、进阶、段位、桌面端操作分成四个标签。刚上手先看入门，想加难度进进阶，等分数有了概念再去看段位，桌面端操作那栏专门解决键位和界面。</p>
            </div>
          </li>
          <li>
            <span class="sys-index">02</span>
            <div>
              <h3>折叠面板压住信息量</h3>
              <p>基础番型、牌局流程、计分、桌面端要点都在折叠面板里，单页能展开二十组以上规则卡片。你先扫标题，找到对得上的那一条再展开，不必从头读到尾。</p>
            </div>
          </li>
          <li>
            <span class="sys-index">03</span>
            <div>
              <h3>段位用千分区间说话</h3>
              <p>分数按 0–999、1000–1999、2000–2999、3000–3999、4000 分以上五档标注。看自己落在哪一段，就知道该翻入门还是进阶，不用凭感觉猜水平。</p>
            </div>
          </li>
          <li>
            <span class="sys-index">04</span>
            <div>
              <h3>每周两次，六到十二条</h3>
              <p>规则库每周更新两次，每次新增或修订六到十二条卡片。改了什么、为什么改，都能在牌桌日志里看到对应的记录。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section section--dark about-team" id="team">
    <div class="container">
      <header class="about-section-head about-section-head--dark">
        <p class="eyebrow eyebrow--gold">团队 · 十四人分工</p>
        <h2 class="section-title">一条规则要过三道手</h2>
        <p class="about-section-lead">规则写错一个字，牌桌上就多一次争执。所以每条内容都有人写、有人复核、有人在真机上跑一遍。</p>
      </header>

      <div class="about-team-grid">
        <figure class="about-team-figure">
          <div class="media media--tile">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="不具名的工作台场景，摊开的规则卡片与校对标记，旁边放着键盘" loading="lazy" decoding="async">
          </div>
          <figcaption class="media-caption">一张规则卡片定稿前，通常会被改上三遍</figcaption>
        </figure>

        <div class="team-legend">
          <div class="legend-item">
            <span class="legend-dot legend-dot--jade" aria-hidden="true"></span>
            <div class="legend-body">
              <h3>规则编辑 6 人</h3>
              <p>按番型与流程分工，平均具备 6 年以上棋牌类内容整理经验，负责初稿和术语对照。</p>
            </div>
          </div>
          <div class="legend-item">
            <span class="legend-dot legend-dot--gold" aria-hidden="true"></span>
            <div class="legend-body">
              <h3>模拟器产品与测试 3 人</h3>
              <p>把规则搬进 36 组典型牌局里跑通，检查每一种模式下的判定是否和文字对得上。</p>
            </div>
          </div>
          <div class="legend-item">
            <span class="legend-dot legend-dot--cinnabar" aria-hidden="true"></span>
            <div class="legend-body">
              <h3>视觉设计 2 人</h3>
              <p>负责规则示意图、牌面标签与桌面端界面，让一张图能顶掉半页说明。</p>
            </div>
          </div>
          <div class="legend-item">
            <span class="legend-dot legend-dot--ink" aria-hidden="true"></span>
            <div class="legend-body">
              <h3>客服与社区 2 人 · 内容运营 1 人</h3>
              <p>接住每月约 1200 条规则与下载咨询，把高频问题反推回规则卡片去修订。</p>
            </div>
          </div>
        </div>
      </div>

      <div class="about-review-flow">
        <p class="flow-label">三审流程</p>
        <ol class="flow-steps">
          <li>
            <span class="flow-num">一审</span>
            <strong>编辑初校</strong>
            <p>写完先自查术语、番型和举例，把地方叫法与通用说法对照标出。</p>
          </li>
          <li>
            <span class="flow-num">二审</span>
            <strong>规则组复核</strong>
            <p>另一名编辑逐条比对牌局流程与计分逻辑，确认没有前后矛盾的表述。</p>
          </li>
          <li>
            <span class="flow-num">三审</span>
            <strong>桌面端实测</strong>
            <p>在 Windows 与 macOS 两端真机跑一遍，规则判定和模拟器行为一致才上线。</p>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section about-timeline-section" id="timeline">
    <div class="container">
      <header class="about-section-head">
        <p class="eyebrow">时间线 · 2021–2025</p>
        <h2 class="section-title">五年，从一栏规则到一张牌桌</h2>
        <p class="about-section-lead">每一年的变化都指向同一件事：让你少问一次“这到底怎么算”。</p>
      </header>

      <ol class="about-timeline">
        <li class="timeline-item" data-reveal>
          <div class="timeline-year"><span>2021</span></div>
          <div class="timeline-card">
            <h3>规则练习栏目开张</h3>
            <p>第一批基础番型与牌局流程整理成形，规则第一次可以不靠人讲、自己翻着看。</p>
          </div>
        </li>
        <li class="timeline-item" data-reveal>
          <div class="timeline-year"><span>2022</span></div>
          <div class="timeline-card">
            <h3>ij 模拟器首个公开版本</h3>
            <p>自由练习、残局推演、计时挑战三种模式上线，先练两把再回头对规则成了默认路径。</p>
          </div>
        </li>
        <li class="timeline-item" data-reveal>
          <div class="timeline-year"><span>2023</span></div>
          <div class="timeline-card">
            <h3>中文版规则专区上线</h3>
            <p>入门、进阶、段位、桌面端操作四个标签拆开，同年拿到棋牌文化内容创新案例。</p>
          </div>
        </li>
        <li class="timeline-item" data-reveal>
          <div class="timeline-year"><span>2024</span></div>
          <div class="timeline-card">
            <h3>桌面端 4.x 架构升级</h3>
            <p>桌面端整体重构，下载包开始附带 SHA-256 校验值与逐步安装说明，当年获桌面端工具体验奖。</p>
          </div>
        </li>
        <li class="timeline-item" data-reveal>
          <div class="timeline-year"><span>2025</span></div>
          <div class="timeline-card">
            <h3>段位标注扩至五个区间</h3>
            <p>分数体系从粗分改为 0–999 到 4000 分以上五档，查规则前先知道自己站在哪一级。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--band about-partners" id="partners">
    <div class="container about-partners-grid">
      <div class="about-partners-main">
        <p class="eyebrow eyebrow--gold">合作与认可</p>
        <h2 class="section-title">被同行看见的这几年</h2>
        <p>我们和 12 家桌面端软件分发平台、8 个棋牌文化内容账号建立了内容合作。规则卡片会被改编成短视频脚本，也会被放进下载页的说明里，走到更多人眼前。</p>
        <p>2023 年度棋牌文化内容创新案例、2024 年度桌面端工具体验奖，是这几年收到的两份认可。比起奖本身，我们更在意它说明的事：认真讲规则，是有人愿意看的。</p>
        <a class="btn btn-accent" href="/news/">看最近更新</a>
      </div>
      <ul class="about-honor-list">
        <li>
          <span class="honor-year">2023</span>
          <p>年度棋牌文化内容创新案例</p>
        </li>
        <li>
          <span class="honor-year">2024</span>
          <p>年度桌面端工具体验奖</p>
        </li>
        <li>
          <span class="honor-year">12</span>
          <p>家桌面端软件分发平台内容合作</p>
        </li>
        <li>
          <span class="honor-year">8</span>
          <p>个棋牌文化内容账号共建专题</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="section about-service" id="service">
    <div class="container about-service-grid">
      <div class="about-service-main">
        <p class="eyebrow">接下来 · 我们继续做</p>
        <h2 class="section-title">规则会一直改，人一直在</h2>
        <p>桌面端保持每两周一次小版本更新、每季度一次功能版本更新。规则卡片跟着改，改完的记录会留在牌桌日志里，你想知道哪条动了，翻一下就有。</p>
        <p>工作日 10:00–19:00 客服在线，周末与节假日的留言会在下一个工作日回复。第一个回复平均在工作时间内 2 小时内到达——问规则也好，问装不上也好，都写给我们。</p>
        <div class="about-service-actions">
          <a class="btn btn-primary" href="/services/">看玩法与下载</a>
          <a class="btn btn-ghost" href="/find-us/">联系客服</a>
          <a class="btn btn-ghost" href="/troubleshooting/">遇到问题先查这里</a>
        </div>
      </div>
      <aside class="about-contact-card" aria-label="联系方式">
        <p class="contact-card-title">找得到人的联系方式</p>
        <dl class="contact-list">
          <div>
            <dt>客服邮箱</dt>
            <dd><a href="mailto:contact@table-mahjong.com.cn">contact@table-mahjong.com.cn</a></dd>
          </div>
          <div>
            <dt>支持邮箱</dt>
            <dd><a href="mailto:support@table-mahjong.com.cn">support@table-mahjong.com.cn</a></dd>
          </div>
          <div>
            <dt>服务电话</dt>
            <dd><a href="tel:40053112939">400-5311-2939</a></dd>
          </div>
          <div>
            <dt>通信地址</dt>
            <dd>西藏省拉萨市城关区北京中路128号</dd>
          </div>
        </dl>
        <p class="contact-note">工作日10:00-19:00在线，周末及节假日请留言，我们会在下一个工作日回复。</p>
      </aside>
    </div>
  </section>
</main>

.page-about {
  --about-line: rgba(21, 25, 21, .16);
  --about-line-light: rgba(246, 241, 227, .22);
}

/* ---------- hero ---------- */
.page-about .about-hero {
  position: relative;
  padding: clamp(30px, 5vw, 56px) 0 clamp(34px, 5vw, 60px);
  background:
    linear-gradient(180deg, rgba(217, 224, 210, .48), rgba(246, 241, 227, 0) 78%),
    var(--ivory);
  border-bottom: 1px solid var(--about-line);
  overflow: hidden;
}
.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--jade) 0 18px, transparent 18px 34px);
  opacity: .5;
}
.page-about .about-hero-grid {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  grid-template-columns: 1fr;
}
.page-about .about-hero-main .breadcrumbs {
  margin-bottom: 18px;
}
.page-about .about-hero-main h1 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.06;
  font-size: clamp(34px, 7vw, 60px);
  margin: 10px 0 18px;
  color: var(--ink);
}
.page-about .about-hero-main .lead {
  max-width: 34em;
  color: var(--ink-70);
  font-size: clamp(15px, 2.2vw, 17px);
}
.page-about .about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-about .about-hero-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ink);
  background: var(--tile);
}
.page-about .board-cell {
  padding: 20px 16px 22px;
  border-right: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
}
.page-about .board-cell:nth-child(2n) { border-right: 0; }
.page-about .board-cell:nth-child(n+3) { border-bottom: 0; }
.page-about .board-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1;
  color: var(--jade);
  letter-spacing: -.02em;
}
.page-about .board-num span {
  font-size: .5em;
  vertical-align: super;
  color: var(--gold);
}
.page-about .board-cell p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-70);
}
.page-about .board-cell--jade { background: var(--jade); }
.page-about .board-cell--jade .board-num,
.page-about .board-cell--jade p { color: var(--tile); }
.page-about .board-cell--jade .board-num { color: var(--gold); }
.page-about .board-cell--ink { background: var(--ink); }
.page-about .board-cell--ink .board-num { color: var(--gold); }
.page-about .board-cell--ink p { color: var(--paper-70); }

/* ---------- shared section head ---------- */
.page-about .about-section-head {
  max-width: 46em;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.page-about .about-section-head .section-title {
  margin: 8px 0 14px;
}
.page-about .about-section-lead {
  color: var(--ink-70);
  margin: 0;
}
.page-about .about-section-head--dark .section-title { color: var(--tile); }
.page-about .about-section-head--dark .about-section-lead { color: var(--paper-70); }
.page-about .eyebrow--gold { color: var(--gold); }

/* ---------- origin ---------- */
.page-about .about-origin-grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1fr;
}
.page-about .about-figure { margin: 0; }
.page-about .about-figure .media {
  border: 1px solid var(--ink);
  background: var(--wood);
}
.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-origin-text h2 { margin: 8px 0 16px; }
.page-about .about-origin-text p {
  color: var(--ink-70);
  margin: 0 0 14px;
  max-width: 40em;
}
.page-about .about-origin-text p:first-of-type {
  color: var(--ink);
  font-size: clamp(16px, 2.4vw, 18px);
}

/* ---------- system ---------- */
.page-about .about-system-grid {
  display: grid;
  gap: clamp(24px, 4vw, 52px);
  grid-template-columns: 1fr;
  align-items: start;
}
.page-about .about-system-figure .media {
  border: 1px solid var(--ink);
  background: var(--mist);
}
.page-about .about-system-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-system-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.page-about .about-system-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--about-line);
}
.page-about .about-system-list li:last-child {
  border-bottom: 1px solid var(--about-line);
}
.page-about .sys-index {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--cinnabar);
  padding-top: 3px;
}
.page-about .about-system-list h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.6vw, 20px);
  margin: 0 0 8px;
  color: var(--ink);
}
.page-about .about-system-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-70);
}

/* ---------- team ---------- */
.page-about .about-team { color: var(--tile); }
.page-about .about-team-grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  grid-template-columns: 1fr;
  align-items: start;
}
.page-about .about-team-figure { margin: 0; }
.page-about .about-team-figure .media {
  border: 1px solid var(--about-line-light);
  background: var(--wood);
}
.page-about .about-team-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .about-team-figure .media-caption { color: var(--paper-70); }

.page-about .team-legend {
  display: grid;
  gap: 14px;
}
.page-about .legend-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--about-line-light);
  background: rgba(246, 241, 227, .05);
}
.page-about .legend-dot {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  display: block;
}
.page-about .legend-dot--jade { background: var(--jade); }
.page-about .legend-dot--gold { background: var(--gold); }
.page-about .legend-dot--cinnabar { background: var(--cinnabar); }
.page-about .legend-dot--ink { background: var(--mist); }
.page-about .legend-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--tile);
}
.page-about .legend-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--paper-70);
}

.page-about .about-review-flow {
  margin-top: clamp(32px, 5vw, 52px);
  border-top: 1px solid var(--about-line-light);
  padding-top: 24px;
}
.page-about .flow-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--gold);
  margin: 0 0 16px;
}
.page-about .flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  counter-reset: flow;
}
.page-about .flow-steps li {
  padding: 18px 18px 18px 20px;
  border-left: 3px solid var(--gold);
  background: rgba(21, 25, 21, .28);
}
.page-about .flow-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 6px;
}
.page-about .flow-steps strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--tile);
  margin-bottom: 6px;
}
.page-about .flow-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--paper-70);
}

/* ---------- timeline ---------- */
.page-about .about-timeline-section {
  background:
    linear-gradient(180deg, var(--ivory), rgba(217, 224, 210, .55));
}
.page-about .about-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 18px;
}
.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--jade), var(--gold) 55%, var(--cinnabar));
  opacity: .55;
}
.page-about .timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  align-items: start;
}
.page-about .timeline-year {
  position: relative;
  z-index: 1;
}
.page-about .timeline-year span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--tile);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink-16);
}
.page-about .timeline-card {
  border: 1px solid var(--about-line);
  background: var(--tile);
  padding: 16px 18px 18px;
}
.page-about .timeline-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 19px);
  margin: 0 0 8px;
  color: var(--ink);
}
.page-about .timeline-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-70);
}
.page-about .timeline-item:last-child .timeline-year span {
  background: var(--cinnabar);
  border-color: var(--cinnabar-deep);
  color: var(--tile);
}

/* ---------- partners ---------- */
.page-about .about-partners-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: start;
}
.page-about .about-partners-main .section-title { margin: 8px 0 16px; }
.page-about .about-partners-main p {
  color: var(--paper-70);
  margin: 0 0 14px;
  max-width: 38em;
}
.page-about .about-partners-main .btn { margin-top: 12px; }
.page-about .about-honor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--about-line-light);
}
.page-about .about-honor-list li {
  padding: 18px 16px;
  border-right: 1px solid var(--about-line-light);
  border-bottom: 1px solid var(--about-line-light);
}
.page-about .about-honor-list li:nth-child(2n) { border-right: 0; }
.page-about .about-honor-list li:nth-child(n+3) { border-bottom: 0; }
.page-about .honor-year {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 10px;
}
.page-about .about-honor-list p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--paper-70);
}

/* ---------- service ---------- */
.page-about .about-service-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: start;
}
.page-about .about-service-main .section-title { margin: 8px 0 16px; }
.page-about .about-service-main p {
  color: var(--ink-70);
  margin: 0 0 14px;
  max-width: 40em;
}
.page-about .about-service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.page-about .about-contact-card {
  border: 1px solid var(--ink);
  background: var(--mist);
  padding: 22px 20px 24px;
}
.page-about .contact-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 16px;
  color: var(--ink);
}
.page-about .contact-list {
  margin: 0;
  display: grid;
  gap: 12px;
}
.page-about .contact-list > div {
  border-top: 1px solid var(--about-line);
  padding-top: 10px;
}
.page-about .contact-list dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--cinnabar-deep);
  margin-bottom: 4px;
}
.page-about .contact-list dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  word-break: break-word;
}
.page-about .contact-list a { color: var(--jade); }
.page-about .contact-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-70);
}

/* ---------- media caption ---------- */
.page-about .media-caption {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  font-size: 12.5px;
  color: var(--ink-70);
}

/* ---------- responsive ---------- */
@media (min-width: 720px) {
  .page-about .about-hero-board { grid-template-columns: 1fr 1fr; }
  .page-about .about-origin-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }
  .page-about .about-system-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  }
  .page-about .about-system-figure {
    position: sticky;
    top: 90px;
  }
  .page-about .about-team-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }
  .page-about .flow-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .page-about .flow-steps li {
    border-left: 0;
    border-top: 3px solid var(--gold);
    background: none;
    padding: 18px 18px 0 0;
  }
  .page-about .flow-steps li + li {
    border-left: 1px solid var(--about-line-light);
    padding-left: 18px;
  }
  .page-about .about-timeline::before { left: 84px; }
  .page-about .timeline-item {
    grid-template-columns: 168px 1fr;
    gap: 20px;
    align-items: center;
  }
  .page-about .timeline-year span {
    width: 84px;
    height: 84px;
    font-size: 16px;
  }
  .page-about .timeline-card { padding: 20px 24px 22px; }
  .page-about .about-partners-grid,
  .page-about .about-service-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  }
}

@media (min-width: 1040px) {
  .page-about .about-hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    align-items: end;
  }
  .page-about .about-honor-list { grid-template-columns: 1fr 1fr; }
  .page-about .about-system-list li {
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding: 24px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
<<<END>>>