.page-about {
  --ab-axis-x: 22px;
  --ab-pad: 60px;
  --ab-card: #FBF8F2;
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
}

@media (min-width: 900px) {
  .page-about {
    --ab-axis-x: 30px;
    --ab-pad: 92px;
  }
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(22px, 4vw, 40px);
  font-size: 13px;
  color: var(--stone);
}

.page-about .crumbs a {
  color: var(--stone);
  text-decoration: none;
}

.page-about .crumbs a:hover {
  color: var(--gold-lite);
}

.page-about .crumbs__sep {
  color: rgba(124, 135, 148, 0.6);
}

/* ---------- 首屏主题声明 ---------- */
.page-about .about-hero {
  padding: clamp(26px, 4.6vw, 60px) 0 clamp(38px, 6vw, 78px);
  background:
    radial-gradient(circle at 86% 8%, rgba(214, 169, 60, 0.17), transparent 46%),
    radial-gradient(circle at 4% 88%, rgba(63, 217, 196, 0.08), transparent 42%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  border-bottom: 1px solid var(--line-gold);
}

.page-about .about-hero__kicker {
  margin: 0 0 14px;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.page-about .about-hero__title {
  margin: 0 0 20px;
  max-width: 19em;
  font-size: clamp(28px, 5.4vw, 56px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.page-about .about-hero__lede {
  margin: 0;
  max-width: 46em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.88;
  color: rgba(242, 237, 227, 0.78);
}

.page-about .about-facts {
  list-style: none;
  margin: clamp(28px, 4.2vw, 46px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.page-about .about-facts li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  background: var(--ink-2);
}

.page-about .about-facts__num {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1;
  color: var(--gold);
}

.page-about .about-facts__label {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--stone);
}

@media (min-width: 760px) {
  .page-about .about-facts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- 通用章节标题 ---------- */
.page-about .about-sec-head {
  margin-bottom: clamp(24px, 3.6vw, 42px);
}

.page-about .about-sec-head h2 {
  margin: 0 0 14px;
  font-size: clamp(25px, 3.7vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--cream);
}

.page-about .about-sec-head__sub {
  margin: 0;
  max-width: 46em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.88;
  color: rgba(242, 237, 227, 0.72);
}

.page-about .about-sec-head--on-cream h2 {
  color: var(--ink);
}

.page-about .about-sec-head--on-cream .about-sec-head__sub {
  color: rgba(11, 23, 41, 0.7);
}

/* ---------- 时间轴 ---------- */
.page-about .about-timeline {
  position: relative;
  padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 56px);
}

.page-about .about-rot {
  display: none;
}

@media (min-width: 1180px) {
  .page-about .about-rot {
    display: block;
    position: absolute;
    top: clamp(120px, 16vw, 220px);
    right: clamp(12px, 2.6vw, 34px);
    writing-mode: vertical-rl;
    font-size: 11.5px;
    letter-spacing: 0.44em;
    color: rgba(124, 135, 148, 0.5);
    pointer-events: none;
    user-select: none;
  }
}

.page-about .about-timeline__figure {
  margin: 0 0 clamp(34px, 5vw, 62px);
}

.page-about .axis {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--ab-pad);
  position: relative;
}

.page-about .axis::before {
  content: "";
  position: absolute;
  left: var(--ab-axis-x);
  top: 12px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 40%, rgba(214, 169, 60, 0.16) 100%);
}

.page-about .axis__item {
  position: relative;
  padding-bottom: clamp(30px, 4.6vw, 54px);
}

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

.page-about .axis__item::before {
  content: "";
  position: absolute;
  left: calc(var(--ab-axis-x) - var(--ab-pad) - 7px);
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(214, 169, 60, 0.12);
}

.page-about .axis__item:last-child::before {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(214, 169, 60, 0.2);
}

.page-about .axis__year {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: 0.1em;
  color: var(--gold);
}

.page-about .axis__title {
  margin: 0 0 10px;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--cream);
}

.page-about .axis__body {
  margin: 0;
  max-width: 44em;
  font-size: 15.5px;
  line-height: 1.88;
  color: rgba(242, 237, 227, 0.72);
}

@media (min-width: 900px) {
  .page-about .axis {
    max-width: 1000px;
  }

  .page-about .axis__item {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-areas:
      "year title"
      "year body";
    column-gap: clamp(20px, 3vw, 40px);
    align-items: start;
  }

  .page-about .axis__year {
    grid-area: year;
    margin-top: 6px;
  }

  .page-about .axis__title {
    grid-area: title;
  }

  .page-about .axis__body {
    grid-area: body;
  }
}

/* ---------- 暖米白：四大板块 ---------- */
.page-about .about-blocks {
  position: relative;
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
}

.page-about .about-blocks::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -80px;
  width: min(520px, 62%);
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 20% 60%, rgba(214, 169, 60, 0.26), transparent 68%);
  pointer-events: none;
}

.page-about .about-blocks .shell {
  position: relative;
}

.page-about .blocks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px);
}

@media (min-width: 780px) {
  .page-about .blocks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-about .block-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--ab-card);
  border: 1px solid rgba(138, 106, 36, 0.2);
  border-radius: 16px;
}

.page-about .block-card:nth-child(even) {
  transform: translateY(0);
}

@media (min-width: 780px) {
  .page-about .block-card:nth-child(2),
  .page-about .block-card:nth-child(4) {
    margin-top: clamp(0px, 2.4vw, 30px);
  }
}

.page-about .block-card__no {
  font-size: 12.5px;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
}

.page-about .block-card h3 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  color: var(--ink);
}

.page-about .block-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.86;
  color: rgba(11, 23, 41, 0.74);
}

.page-about .about-blocks__more {
  margin: clamp(28px, 3.6vw, 44px) 0 0;
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  padding: clamp(48px, 7vw, 96px) 0;
}

.page-about .team-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 38px);
}

@media (min-width: 920px) {
  .page-about .team-split {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    align-items: start;
  }
}

.page-about .team-split__body p {
  margin: 0 0 16px;
  max-width: 42em;
  font-size: 15.5px;
  line-height: 1.9;
  color: rgba(242, 237, 227, 0.76);
}

.page-about .team-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.page-about .team-stats > div {
  padding: 15px 18px;
  background: var(--ink-2);
}

.page-about .team-stats dt {
  margin-bottom: 8px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--stone);
}

.page-about .team-stats dd {
  margin: 0;
  font-size: clamp(16px, 1.9vw, 20px);
  color: var(--gold);
}

.page-about .team-split__figure {
  margin: 0;
}

.page-about .team-figure {
  margin: clamp(28px, 4vw, 46px) 0 0;
}

/* ---------- 团队分组切换 ---------- */
.page-about .team-tabs {
  margin-top: clamp(30px, 4.4vw, 52px);
}

.page-about .team-tabs .tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.page-about .tabs__tab {
  appearance: none;
  padding: 10px 18px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 237, 227, 0.72);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-about .tabs__tab:hover {
  border-color: var(--gold);
  color: var(--gold-lite);
}

.page-about .tabs__tab[aria-selected="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.page-about .tabs__tab:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-about .tabs__panel {
  margin-top: clamp(20px, 3vw, 30px);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 16px 16px;
}

.page-about .tabs__panel h3 {
  margin: 0 0 12px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  color: var(--cream);
}

.page-about .tabs__panel p {
  margin: 0;
  max-width: 48em;
  font-size: 15.5px;
  line-height: 1.88;
  color: rgba(242, 237, 227, 0.74);
}

.page-about .team-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.page-about .team-tag--gold {
  background: rgba(214, 169, 60, 0.16);
  border: 1px solid var(--line-gold);
  color: var(--gold-lite);
}

.page-about .team-tag--cyan {
  background: rgba(63, 217, 196, 0.14);
  border: 1px solid rgba(63, 217, 196, 0.34);
  color: var(--cyan);
}

.page-about .team-tag--clay {
  background: rgba(168, 101, 74, 0.18);
  border: 1px solid rgba(168, 101, 74, 0.42);
  color: #E3A78C;
}

/* ---------- 暖米白：服务时段 ---------- */
.page-about .about-hours {
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--cream);
  color: var(--ink);
}

.page-about .hours-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px);
}

@media (min-width: 840px) {
  .page-about .hours-grid {
    grid-template-columns: 1.18fr 1fr 1fr;
    align-items: stretch;
  }
}

.page-about .hours-card {
  padding: clamp(20px, 2.4vw, 28px);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(138, 106, 36, 0.18);
  border-radius: 16px;
}

.page-about .hours-card--lead {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.page-about .hours-card__num {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.25;
  color: var(--gold-deep);
}

.page-about .hours-card--lead .hours-card__num {
  color: var(--gold);
}

.page-about .hours-card h3 {
  margin: 0 0 10px;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 800;
  color: var(--ink);
}

.page-about .hours-card--lead h3 {
  color: var(--cream);
}

.page-about .hours-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.86;
  color: rgba(11, 23, 41, 0.72);
}

.page-about .hours-card--lead p {
  color: rgba(242, 237, 227, 0.76);
}

/* ---------- 例行维护 ---------- */
.page-about .about-upkeep {
  padding: clamp(48px, 7vw, 96px) 0;
}

.page-about .upkeep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 26px);
}

@media (min-width: 840px) {
  .page-about .upkeep-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-about .upkeep-item {
  padding-top: 20px;
  border-top: 1px solid var(--line-gold);
}

.page-about .upkeep-item__cycle {
  display: block;
  margin-bottom: 12px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-about .upkeep-item h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.2vw, 21px);
  font-weight: 800;
  color: var(--cream);
}

.page-about .upkeep-item p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.86;
  color: rgba(242, 237, 227, 0.72);
}

/* ---------- 暖米白：备案与联系 ---------- */
.page-about .about-legal {
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px);
  background: var(--cream);
  color: var(--ink);
}

.page-about .legal-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 44px);
}

@media (min-width: 920px) {
  .page-about .legal-split {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr);
    align-items: start;
  }
}

.page-about .legal-split__main h2 {
  margin: 0 0 16px;
  font-size: clamp(25px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.page-about .legal-split__main p {
  margin: 0 0 16px;
  max-width: 44em;
  font-size: 15.5px;
  line-height: 1.9;
  color: rgba(11, 23, 41, 0.74);
}

.page-about .legal-contact {
  margin: clamp(20px, 3vw, 30px) 0;
  padding: clamp(14px, 2vw, 20px) 0;
  border-top: 1px solid rgba(138, 106, 36, 0.26);
  border-bottom: 1px solid rgba(138, 106, 36, 0.26);
}

.page-about .legal-contact p {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 15.5px;
  color: var(--ink);
}

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

.page-about .legal-contact span {
  min-width: 70px;
  padding-top: 3px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
}

.page-about .legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.page-about .legal-split__aside {
  padding: clamp(20px, 2.4vw, 26px);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(138, 106, 36, 0.18);
  border-radius: 16px;
}

.page-about .legal-split__aside p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.86;
  color: rgba(11, 23, 41, 0.74);
}

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

.page-about .legal-split__aside a {
  color: var(--gold-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 106, 36, 0.4);
}

.page-about .legal-split__aside a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- 图片兜底 ---------- */
.page-about .figure__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-about .tabs__tab {
    transition: none;
  }
}
</final_css>
<<<END>>>

等等，我的输出格式错了。标记必须是精确的 ``、``，不要加 `<<<END>>>`。把结尾修掉。

还有，我需要再检查一下：`.page-about .block-card:nth-child(even) { transform: translateY(0); }` ——这条是多余的，删掉它。

另外，`about-blocks` 里那句“四条内容……各自管一件具体的事”——没问题。

再检查一下 `.page-about .team-figure` 确实有定义——是的。

`about-rot` 是 `display: none`，窄屏下会被隐藏——没问题。

最终答案。
<main id="main-content" class="page-about">
  <header class="about-hero">
    <div class="shell">
      <nav class="crumbs" aria-label="当前位置">
        <a href="/">首页</a>
        <span class="crumbs__sep" aria-hidden="true">/</span>
        <span aria-current="page">品牌总览</span>
      </nav>
      <p class="about-hero__kicker mono">吉林长春 · 2013 年上线 · 第 12 次更新版本</p>
      <h1 class="about-hero__title">十二年，把开奖公告与玩法规则做成一份随手可查的服务</h1>
      <p class="about-hero__lede">皇冠体彩从 2013 年上线起就围绕一件事展开：让关注开奖结果的访客在几十秒内拿到自己要的那一条信息。今天你翻开的任何一期公告，背后连着每天三个时段的更新节奏、一套按玩法归类的中奖规则，以及一支驻在吉林长春的本地服务团队。</p>
      <ul class="about-facts">
        <li>
          <span class="about-facts__num mono">2013</span>
          <span class="about-facts__label">开始提供服务</span>
        </li>
        <li>
          <span class="about-facts__num mono">12</span>
          <span class="about-facts__label">次版本更新</span>
        </li>
        <li>
          <span class="about-facts__num mono">46</span>
          <span class="about-facts__label">个期号序列</span>
        </li>
        <li>
          <span class="about-facts__num mono">128</span>
          <span class="about-facts__label">条规则条目</span>
        </li>
        <li>
          <span class="about-facts__num mono">18</span>
          <span class="about-facts__label">人本地团队</span>
        </li>
      </ul>
    </div>
  </header>

  <section class="about-timeline" aria-labelledby="tl-title">
    <aside class="about-rot" aria-hidden="true"><span>运营脉络</span></aside>
    <div class="shell">
      <div class="about-sec-head" data-reveal>
        <h2 id="tl-title">一条从 2013 年延伸到今天的轴线</h2>
        <p class="about-sec-head__sub">服务的形态一直在变，判断标准没变过：公告要按时到，规则要随手能查到，旧版本的资料要翻得出来。下面几个阶段，正好对应站点从单一公告页走到今天这套内容结构的全过程。</p>
      </div>

      <figure class="figure figure--wide about-timeline__figure" data-reveal>
        <div class="figure__media">
          <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="纵向金色时间轴插画，节点以抽象几何图形表示站点从上线到当前版本的多个发展阶段">
        </div>
        <figcaption class="figure__cap">从一张公告列表，到覆盖四个内容板块的服务体系</figcaption>
      </figure>

      <ol class="axis">
        <li class="axis__item" id="stage-start" data-reveal>
          <span class="axis__year mono">2013</span>
          <h3 class="axis__title">上线第一版</h3>
          <p class="axis__body">站点以开奖公告与玩法规则查询为起点开放访问，服务对象是长期跟踪开奖结果的中文用户。那时候只有一条公告列表，能查到期号和结果就算达成目的。</p>
        </li>
        <li class="axis__item" id="stage-rhythm" data-reveal>
          <span class="axis__year mono">2013 — 2015</span>
          <h3 class="axis__title">固定更新节奏</h3>
          <p class="axis__body">公告稳定为每日早间 09:30、午间 14:00、晚间 21:30 三个时段更新，每次更新后同步校对一遍。内容的组织方式也从一条流水列表改成按玩法目录与期号区间两个维度归拢，想看哪一期都不用从头翻。</p>
        </li>
        <li class="axis__item" id="stage-library" data-reveal>
          <span class="axis__year mono">2016 — 2018</span>
          <h3 class="axis__title">规则库与期号序列成形</h3>
          <p class="axis__body">中奖规则按玩法归类整理，条目逐步累积到今天的 128 条规模，每条都标出适用的期号区间。期号序列扩展到 46 个，把数字型、乐透型、竞猜型与地方玩法四类都收了进来。</p>
        </li>
        <li class="axis__item" id="stage-team" data-reveal>
          <span class="axis__year mono">2019 — 2021</span>
          <h3 class="axis__title">本地团队到位</h3>
          <p class="axis__body">吉林长春本地的服务团队组建完成，公告校对、规则校验与访问支持三条线各自有了固定分工。东北地区的访客在晚间高峰期遇到问题，当天就能等到人回应，不用跨时区等下一班。</p>
        </li>
        <li class="axis__item" id="stage-lookup" data-reveal>
          <span class="axis__year mono">2022 — 2024</span>
          <h3 class="axis__title">回溯能力补齐</h3>
          <p class="axis__body">旧版本资料按年份与版本号归档成 12 个分组，期号区间对照工具上线，跨年度的期号比对能在同一个页面里完成。入口调整过后如果发现期号对不上，从这里往往能顺着往回找到线索。</p>
        </li>
        <li class="axis__item" id="stage-current" data-reveal>
          <span class="axis__year mono">第 12 次更新</span>
          <h3 class="axis__title">当前版本</h3>
          <p class="axis__body">移动端适配覆盖 Android 8.0 及以上与 iOS 14 及以上主流机型，桌面端支持近五年主流浏览器版本。入口变更有了专门的反馈通道，遇到页面打不开或者栏目加载慢的情况，能直接找到处理入口而不是反复刷新。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-blocks" aria-labelledby="blocks-title">
    <div class="shell">
      <div class="about-sec-head about-sec-head--on-cream" data-reveal>
        <h2 id="blocks-title">四块内容，各自管一件具体的事</h2>
        <p class="about-sec-head__sub">日常访问里最常被打断的四种情况，正好对应四块内容。知道哪一块解决什么，找起来会快很多。</p>
      </div>

      <div class="blocks-grid">
        <article class="block-card" data-reveal>
          <span class="block-card__no mono">01</span>
          <h3>开奖公告</h3>
          <p>按玩法目录与期号区间两个维度组织，覆盖数字型、乐透型、竞猜型与地方玩法四类，共 46 个期号序列。习惯盯玩法的从目录进，习惯记期号的从区间进，两条路都能直达。</p>
        </article>
        <article class="block-card" data-reveal>
          <span class="block-card__no mono">02</span>
          <h3>中奖规则</h3>
          <p>128 条规则条目按玩法归类，每条标出适用的期号区间和最近一次修订对应的版本号。边看公告边翻规则时，不用担心看到的是上一版的说法。</p>
        </article>
        <article class="block-card" data-reveal>
          <span class="block-card__no mono">03</span>
          <h3>版本记录</h3>
          <p>12 次更新的内容按顺序留档。安卓端忽然打不开、某个栏目行为跟以前不一样时，把当前表现和更新前后的说明放一起看，判断方向会清楚得多。</p>
        </article>
        <article class="block-card" data-reveal>
          <span class="block-card__no mono">04</span>
          <h3>入口变更提示</h3>
          <p>入口调整单独成区，每条都配着对应的期号区间。跳转之后发现期号对不上、或者干脆进错了栏目，从这里往回找通常是最快的一条路。</p>
        </article>
      </div>

      <p class="about-blocks__more">
        <a class="btn btn--gold" href="/catalog/">查看服务与栏目目录</a>
      </p>
    </div>
  </section>

  <section class="about-team" aria-labelledby="team-title">
    <div class="shell">
      <div class="about-sec-head" data-reveal>
        <h2 id="team-title">18 个人在吉林长春，把公告送到你面前</h2>
        <p class="about-sec-head__sub">公告从产生到出现在页面上，中间不是自动流转的。有人盯着更新时段，有人守着规则条目，有人专门接访问类的问题。</p>
      </div>

      <div class="team-split">
        <div class="team-split__body" data-reveal>
          <p>客服团队共 18 名成员，全部在吉林长春办公，日常分成三个小组协作。本地办公带来的直接好处是时段贴合：东北地区晚间访问最集中的那几个小时，团队正在工作状态里，问题不用等到第二天上午才被看到。</p>
          <p>团队每天处理的既有公告相关的确认，也有规则条目的说明，还有相当一部分是纯粹的访问问题——页面打不开、栏目一直在转圈、某个按钮点下去没反应。这些都在同一个服务时段内被受理，再按性质分给对应的小组。</p>
          <dl class="team-stats">
            <div>
              <dt>本地成员</dt>
              <dd class="mono">18 人</dd>
            </div>
            <div>
              <dt>服务时段</dt>
              <dd class="mono">09:00 — 21:00</dd>
            </div>
            <div>
              <dt>月度访问咨询</dt>
              <dd class="mono">约 900 条</dd>
            </div>
          </dl>
        </div>
        <figure class="figure figure--tall team-split__figure" data-reveal>
          <div class="figure__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="抽象地域纹理与节点连线构成的图形，示意本地服务在东北时段的覆盖范围" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__cap">服务重心落在吉林及东北地区的日常访问时段</figcaption>
        </figure>
      </div>

      <figure class="figure figure--wide team-figure" data-reveal>
        <div class="figure__media">
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="三组并列的几何色块信息图，分别对应公告校对、规则校验与访问支持三项职能" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__cap">三条线并行推进，互为支撑</figcaption>
      </figure>

      <div class="tabs team-tabs" data-tabs>
        <div class="tabs__list" role="tablist" aria-label="服务团队分组">
          <button class="tabs__tab" type="button" data-tab role="tab" id="team-tab-a" aria-controls="team-panel-a" aria-selected="true">公告校对组</button>
          <button class="tabs__tab" type="button" data-tab role="tab" id="team-tab-b" aria-controls="team-panel-b" aria-selected="false">规则校验组</button>
          <button class="tabs__tab" type="button" data-tab role="tab" id="team-tab-c" aria-controls="team-panel-c" aria-selected="false">访问支持组</button>
        </div>

        <div class="tabs__panel" data-panel role="tabpanel" id="team-panel-a" aria-labelledby="team-tab-a">
          <span class="team-tag team-tag--gold">公告校对</span>
          <h3>每天三个时段，更新后立刻过一遍</h3>
          <p>公告按规定时段发布，发布之后同步校对一遍，重点看期号有没有错位、结果字段有没有空缺。组内按玩法线分配人手，同时与 6 家数据校对服务方保持协作，对关键数据做二次校验。发现异常先在内部重复一遍，确认之后才决定是否对外推送更正。</p>
        </div>

        <div class="tabs__panel" data-panel role="tabpanel" id="team-panel-b" aria-labelledby="team-tab-b">
          <span class="team-tag team-tag--cyan">规则校验</span>
          <h3>128 条规则条目，一条一条守着</h3>
          <p>负责规则条目的日常维护，包括适用期号区间的标注和修订版本号的更新。每季度的内容巡检里，最近改动过的条目会被重新过一遍，确保你在页面上看到的说法，和那一段期号真正对应的规则是一致的。</p>
        </div>

        <div class="tabs__panel" data-panel role="tabpanel" id="team-panel-c" aria-labelledby="team-tab-c">
          <span class="team-tag team-tag--clay">访问支持</span>
          <h3>每月约 900 条咨询，安卓问题占三成</h3>
          <p>每月处理约 900 条访问类咨询，其中安卓端访问问题约占三成。组内积累了常见机型的复现记录，多数打不开、加载慢一类的问题能在一次回复里给出可执行的处理方向，不用来回问上好几轮。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="about-hours" aria-labelledby="hours-title">
    <div class="shell">
      <div class="about-sec-head about-sec-head--on-cream" data-reveal>
        <h2 id="hours-title">什么时候能找到人，多久能有回应</h2>
        <p class="about-sec-head__sub">把时间预期讲清楚，你才好安排自己的节奏——尤其是临场需要一条规则说明的时候。</p>
      </div>

      <div class="hours-grid">
        <div class="hours-card hours-card--lead" data-reveal>
          <span class="hours-card__num mono">09:00 — 21:00</span>
          <h3>每日服务时段</h3>
          <p>三个小组在这段时间内都有人值守，公告更新、规则说明与访问问题统一受理，再按性质分派到对应的小组跟进。</p>
        </div>
        <div class="hours-card" data-reveal>
          <span class="hours-card__num mono">09:30 / 14:00 / 21:30</span>
          <h3>公告更新三个时段</h3>
          <p>每天分三个时段更新开奖公告，每次更新后同步校对一遍。晚间那一班正好落在访问最集中的时段，赶上当晚对照规则也不会落空。</p>
        </div>
        <div class="hours-card" data-reveal>
          <span class="hours-card__num mono">2 小时</span>
          <h3>入口变更类问题回应</h3>
          <p>涉及入口调整、页面跳转异常这类问题，一般在两小时内给出初步回应。情况清楚时直接给处理方向，需要复现的会先告知预计的跟进节奏。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="about-upkeep" aria-labelledby="upkeep-title">
    <div class="shell">
      <div class="about-sec-head" data-reveal>
        <h2 id="upkeep-title">公告发出去之后，还有几道例行的活</h2>
        <p class="about-sec-head__sub">日常更新只是台面上的部分。内容能不能长期好查、页面能不能一直打得开，靠的是另外几件按周期做的事。</p>
      </div>

      <div class="upkeep-grid">
        <article class="upkeep-item" data-reveal>
          <span class="upkeep-item__cycle mono">每季度一次</span>
          <h3>内容巡检</h3>
          <p>把 128 条规则条目、46 个期号序列的目录链接和说明文字逐项过一遍，清掉过期入口和已经失效的说明，把新补充的玩法接进对应的目录位置。</p>
        </article>
        <article class="upkeep-item" data-reveal>
          <span class="upkeep-item__cycle mono">每半年一次</span>
          <h3>全站可用性排查</h3>
          <p>按移动端与桌面端分别跑一遍主要访问路径。Android 8.0 及以上、iOS 14 及以上机型和近五年主流桌面浏览器版本都在覆盖范围内，排查结果直接进下一轮优化的清单。</p>
        </article>
        <article class="upkeep-item" data-reveal>
          <span class="upkeep-item__cycle mono">12 期以内 + 季度归档</span>
          <h3>历史资料的回看方式</h3>
          <p>最近 12 期的历史期号可以在同一个页面里快速切换查看；更长周期的资料进入季度归档，按年份与期号段翻找，旧版本资料则从页脚的归档分类直接进入。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="about-legal" aria-labelledby="legal-title">
    <div class="shell">
      <div class="legal-split">
        <div class="legal-split__main" data-reveal>
          <h2 id="legal-title">备案公示、对外协作与联系渠道</h2>
          <p>站点已完成 ICP 备案，备案号为吉ICP备59724215号-2，在页面底部长期公示。公告数据的二次校验由 6 家数据校对服务方协作完成，用来减少录入环节可能出现的偏差。</p>
          <div class="legal-contact">
            <p><span class="mono">客服电话</span>400-5126-3134</p>
            <p><span class="mono">客服邮箱</span>kefu@royal-bet-hg.com.cn</p>
            <p><span class="mono">联系地址</span>吉林省长春市朝阳区前进大街1244号</p>
          </div>
          <p class="legal-actions">
            <a class="btn btn--gold" href="/contact/">联系客服团队</a>
            <a class="btn btn--ghost" href="/notice/">查看访问须知</a>
          </p>
        </div>
        <aside class="legal-split__aside" data-reveal>
          <p>需要翻查旧版本资料时，可以从页脚分类直接进入，按年份与版本号定位到具体分组。</p>
          <p><a href="/column/">品牌专栏</a>里持续记录着近几个版本调整过的内容、公告节奏的变化，以及入口变更的说明。</p>
          <p>如果你只是想先看看有哪些栏目可查，从<a href="/catalog/">服务与栏目目录</a>进去会更快一些。</p>
        </aside>
      </div>
    </div>
  </section>
</main>

.page-about {
  --ab-axis-x: 22px;
  --ab-pad: 60px;
  --ab-card: #FBF8F2;
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
}

@media (min-width: 900px) {
  .page-about {
    --ab-axis-x: 30px;
    --ab-pad: 92px;
  }
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(22px, 4vw, 40px);
  font-size: 13px;
  color: var(--stone);
}

.page-about .crumbs a {
  color: var(--stone);
  text-decoration: none;
}

.page-about .crumbs a:hover {
  color: var(--gold-lite);
}

.page-about .crumbs__sep {
  color: rgba(124, 135, 148, 0.6);
}

/* ---------- 首屏主题声明 ---------- */
.page-about .about-hero {
  padding: clamp(26px, 4.6vw, 60px) 0 clamp(38px, 6vw, 78px);
  background:
    radial-gradient(circle at 86% 8%, rgba(214, 169, 60, 0.17), transparent 46%),
    radial-gradient(circle at 4% 88%, rgba(63, 217, 196, 0.08), transparent 42%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  border-bottom: 1px solid var(--line-gold);
}

.page-about .about-hero__kicker {
  margin: 0 0 14px;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.page-about .about-hero__title {
  margin: 0 0 20px;
  max-width: 19em;
  font-size: clamp(28px, 5.4vw, 56px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.page-about .about-hero__lede {
  margin: 0;
  max-width: 46em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.88;
  color: rgba(242, 237, 227, 0.78);
}

.page-about .about-facts {
  list-style: none;
  margin: clamp(28px, 4.2vw, 46px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.page-about .about-facts li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  background: var(--ink-2);
}

.page-about .about-facts__num {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1;
  color: var(--gold);
}

.page-about .about-facts__label {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--stone);
}

@media (min-width: 760px) {
  .page-about .about-facts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- 通用章节标题 ---------- */
.page-about .about-sec-head {
  margin-bottom: clamp(24px, 3.6vw, 42px);
}

.page-about .about-sec-head h2 {
  margin: 0 0 14px;
  font-size: clamp(25px, 3.7vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--cream);
}

.page-about .about-sec-head__sub {
  margin: 0;
  max-width: 46em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.88;
  color: rgba(242, 237, 227, 0.72);
}

.page-about .about-sec-head--on-cream h2 {
  color: var(--ink);
}

.page-about .about-sec-head--on-cream .about-sec-head__sub {
  color: rgba(11, 23, 41, 0.7);
}

/* ---------- 时间轴 ---------- */
.page-about .about-timeline {
  position: relative;
  padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 56px);
}

.page-about .about-rot {
  display: none;
}

@media (min-width: 1180px) {
  .page-about .about-rot {
    display: block;
    position: absolute;
    top: clamp(120px, 16vw, 220px);
    right: clamp(12px, 2.6vw, 34px);
    writing-mode: vertical-rl;
    font-size: 11.5px;
    letter-spacing: 0.44em;
    color: rgba(124, 135, 148, 0.5);
    pointer-events: none;
    user-select: none;
  }
}

.page-about .about-timeline__figure {
  margin: 0 0 clamp(34px, 5vw, 62px);
}

.page-about .axis {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--ab-pad);
  position: relative;
}

.page-about .axis::before {
  content: "";
  position: absolute;
  left: var(--ab-axis-x);
  top: 12px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 40%, rgba(214, 169, 60, 0.16) 100%);
}

.page-about .axis__item {
  position: relative;
  padding-bottom: clamp(30px, 4.6vw, 54px);
}

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

.page-about .axis__item::before {
  content: "";
  position: absolute;
  left: calc(var(--ab-axis-x) - var(--ab-pad) - 7px);
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(214, 169, 60, 0.12);
}

.page-about .axis__item:last-child::before {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(214, 169, 60, 0.2);
}

.page-about .axis__year {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: 0.1em;
  color: var(--gold);
}

.page-about .axis__title {
  margin: 0 0 10px;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--cream);
}

.page-about .axis__body {
  margin: 0;
  max-width: 44em;
  font-size: 15.5px;
  line-height: 1.88;
  color: rgba(242, 237, 227, 0.72);
}

@media (min-width: 900px) {
  .page-about .axis {
    max-width: 1000px;
  }

  .page-about .axis__item {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-areas:
      "year title"
      "year body";
    column-gap: clamp(20px, 3vw, 40px);
    align-items: start;
  }

  .page-about .axis__year {
    grid-area: year;
    margin-top: 6px;
    margin-bottom: 0;
  }

  .page-about .axis__title {
    grid-area: title;
  }

  .page-about .axis__body {
    grid-area: body;
  }
}

/* ---------- 暖米白：四大板块 ---------- */
.page-about .about-blocks {
  position: relative;
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
}

.page-about .about-blocks::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -80px;
  width: min(520px, 62%);
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 20% 60%, rgba(214, 169, 60, 0.26), transparent 68%);
  pointer-events: none;
}

.page-about .about-blocks .shell {
  position: relative;
}

.page-about .blocks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px);
}

@media (min-width: 780px) {
  .page-about .blocks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .block-card:nth-child(2),
  .page-about .block-card:nth-child(4) {
    margin-top: clamp(0px, 2.4vw, 30px);
  }
}

.page-about .block-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--ab-card);
  border: 1px solid rgba(138, 106, 36, 0.2);
  border-radius: 16px;
}

.page-about .block-card__no {
  font-size: 12.5px;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
}

.page-about .block-card h3 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  color: var(--ink);
}

.page-about .block-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.86;
  color: rgba(11, 23, 41, 0.74);
}

.page-about .about-blocks__more {
  margin: clamp(28px, 3.6vw, 44px) 0 0;
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  padding: clamp(48px, 7vw, 96px) 0;
}

.page-about .team-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 38px);
}

@media (min-width: 920px) {
  .page-about .team-split {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    align-items: start;
  }
}

.page-about .team-split__body p {
  margin: 0 0 16px;
  max-width: 42em;
  font-size: 15.5px;
  line-height: 1.9;
  color: rgba(242, 237, 227, 0.76);
}

.page-about .team-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.page-about .team-stats > div {
  padding: 15px 18px;
  background: var(--ink-2);
}

.page-about .team-stats dt {
  margin-bottom: 8px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--stone);
}

.page-about .team-stats dd {
  margin: 0;
  font-size: clamp(16px, 1.9vw, 20px);
  color: var(--gold);
}

.page-about .team-split__figure {
  margin: 0;
}

.page-about .team-figure {
  margin: clamp(28px, 4vw, 46px) 0 0;
}

/* ---------- 团队分组切换 ---------- */
.page-about .team-tabs {
  margin-top: clamp(30px, 4.4vw, 52px);
}

.page-about .team-tabs .tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.page-about .tabs__tab {
  appearance: none;
  padding: 10px 18px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 237, 227, 0.72);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-about .tabs__tab:hover {
  border-color: var(--gold);
  color: var(--gold-lite);
}

.page-about .tabs__tab[aria-selected="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.page-about .tabs__tab:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-about .tabs__panel {
  margin-top: clamp(20px, 3vw, 30px);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 16px 16px;
}

.page-about .tabs__panel h3 {
  margin: 0 0 12px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  color: var(--cream);
}

.page-about .tabs__panel p {
  margin: 0;
  max-width: 48em;
  font-size: 15.5px;
  line-height: 1.88;
  color: rgba(242, 237, 227, 0.74);
}

.page-about .team-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.page-about .team-tag--gold {
  background: rgba(214, 169, 60, 0.16);
  border: 1px solid var(--line-gold);
  color: var(--gold-lite);
}

.page-about .team-tag--cyan {
  background: rgba(63, 217, 196, 0.14);
  border: 1px solid rgba(63, 217, 196, 0.34);
  color: var(--cyan);
}

.page-about .team-tag--clay {
  background: rgba(168, 101, 74, 0.18);
  border: 1px solid rgba(168, 101, 74, 0.42);
  color: #E3A78C;
}

/* ---------- 暖米白：服务时段 ---------- */
.page-about .about-hours {
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--cream);
  color: var(--ink);
}

.page-about .hours-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px);
}

@media (min-width: 840px) {
  .page-about .hours-grid {
    grid-template-columns: 1.18fr 1fr 1fr;
    align-items: stretch;
  }
}

.page-about .hours-card {
  padding: clamp(20px, 2.4vw, 28px);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(138, 106, 36, 0.18);
  border-radius: 16px;
}

.page-about .hours-card--lead {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.page-about .hours-card__num {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.25;
  color: var(--gold-deep);
}

.page-about .hours-card--lead .hours-card__num {
  color: var(--gold);
}

.page-about .hours-card h3 {
  margin: 0 0 10px;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 800;
  color: var(--ink);
}

.page-about .hours-card--lead h3 {
  color: var(--cream);
}

.page-about .hours-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.86;
  color: rgba(11, 23, 41, 0.72);
}

.page-about .hours-card--lead p {
  color: rgba(242, 237, 227, 0.76);
}

/* ---------- 例行维护 ---------- */
.page-about .about-upkeep {
  padding: clamp(48px, 7vw, 96px) 0;
}

.page-about .upkeep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 26px);
}

@media (min-width: 840px) {
  .page-about .upkeep-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-about .upkeep-item {
  padding-top: 20px;
  border-top: 1px solid var(--line-gold);
}

.page-about .upkeep-item__cycle {
  display: block;
  margin-bottom: 12px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-about .upkeep-item h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.2vw, 21px);
  font-weight: 800;
  color: var(--cream);
}

.page-about .upkeep-item p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.86;
  color: rgba(242, 237, 227, 0.72);
}

/* ---------- 暖米白：备案与联系 ---------- */
.page-about .about-legal {
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px);
  background: var(--cream);
  color: var(--ink);
}

.page-about .legal-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 44px);
}

@media (min-width: 920px) {
  .page-about .legal-split {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr);
    align-items: start;
  }
}

.page-about .legal-split__main h2 {
  margin: 0 0 16px;
  font-size: clamp(25px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.page-about .legal-split__main p {
  margin: 0 0 16px;
  max-width: 44em;
  font-size: 15.5px;
  line-height: 1.9;
  color: rgba(11, 23, 41, 0.74);
}

.page-about .legal-contact {
  margin: clamp(20px, 3vw, 30px) 0;
  padding: clamp(14px, 2vw, 20px) 0;
  border-top: 1px solid rgba(138, 106, 36, 0.26);
  border-bottom: 1px solid rgba(138, 106, 36, 0.26);
}

.page-about .legal-contact p {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 15.5px;
  color: var(--ink);
}

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

.page-about .legal-contact span {
  min-width: 70px;
  padding-top: 3px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
}

.page-about .legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.page-about .legal-split__aside {
  padding: clamp(20px, 2.4vw, 26px);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(138, 106, 36, 0.18);
  border-radius: 16px;
}

.page-about .legal-split__aside p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.86;
  color: rgba(11, 23, 41, 0.74);
}

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

.page-about .legal-split__aside a {
  color: var(--gold-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 106, 36, 0.4);
}

.page-about .legal-split__aside a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- 图片兜底 ---------- */
.page-about .figure__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-about .tabs__tab {
    transition: none;
  }
}