.page-about {
  --about-rail: 200px;
  --about-gap: clamp(1.5rem, 3vw, 2.75rem);
  --about-edge: rgba(244, 237, 227, 0.12);
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
}

/* ---------- 面包屑 ---------- */
.page-about .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding-top: 1.35rem;
  font-size: 0.8rem;
  color: var(--ash);
}
.page-about .breadcrumbs a {
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.34s var(--ease);
}
.page-about .breadcrumbs a:hover {
  color: var(--ice);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}
.page-about .about-hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -12%;
  width: min(620px, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 90, 31, 0.32), transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}
.page-about .about-hero::after {
  content: "";
  position: absolute;
  left: -16%;
  bottom: -30%;
  width: min(460px, 62vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(53, 208, 224, 0.14), transparent 70%);
  pointer-events: none;
}
.page-about .about-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.page-about .about-hero__title {
  margin: 0.4rem 0 1rem;
  font-size: clamp(1.85rem, 5.2vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--white);
}
.page-about .about-hero__title em {
  font-style: normal;
  color: var(--lava);
  text-shadow: 0 0 26px rgba(255, 90, 31, 0.45);
}
.page-about .about-hero__copy .lede {
  max-width: 46ch;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.8;
  color: rgba(244, 237, 227, 0.8);
}
.page-about .about-hero__cta {
  margin-top: 1.5rem;
}
.page-about .about-hero__visual {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid rgba(255, 138, 61, 0.28);
  box-shadow: var(--glow-lava);
  background: var(--ink-2);
}
.page-about .about-hero__visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* ---------- 首屏数据条 ---------- */
.page-about .about-hero__stats {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: linear-gradient(100deg, rgba(255, 90, 31, 0.5), rgba(53, 208, 224, 0.35), rgba(244, 237, 227, 0.08));
}
.page-about .about-stat {
  background: var(--ink-2);
  padding: 0.95rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.page-about .about-stat__num {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 3.2vw, 1.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--flame);
}
.page-about .about-stat__num em {
  font-style: normal;
  font-size: 0.6em;
  margin-left: 0.15em;
  color: var(--ice);
}
.page-about .about-stat__label {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ash);
}

/* ---------- 正文布局 ---------- */
.page-about .story-layout {
  display: grid;
  gap: var(--about-gap);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

/* ---------- 侧边轨道 ---------- */
.page-about .story-rail {
  display: none;
}
.page-about .story-rail__label {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lava);
}
.page-about .story-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}
.page-about .story-rail__list a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.34rem 0;
  font-size: 0.85rem;
  color: rgba(244, 237, 227, 0.68);
  text-decoration: none;
  transition: color 0.34s var(--ease), transform 0.34s var(--ease);
}
.page-about .story-rail__list a .num {
  font-size: 0.7rem;
  color: var(--cyan);
  letter-spacing: 0.05em;
}
.page-about .story-rail__list a:hover {
  color: var(--white);
  transform: translateX(3px);
}

/* ---------- 章节 ---------- */
.page-about .story-block {
  padding-block: clamp(1.6rem, 4vw, 2.9rem);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.page-about .story-block + .story-block {
  border-top: 1px solid var(--about-edge);
}
.page-about .story-block h2 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.35rem, 3.4vw, 2.05rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--white);
  max-width: 22ch;
}

/* ---------- 起点正文（暖纸面板） ---------- */
.page-about .story-prose {
  margin-top: 1.5rem;
  padding: clamp(1.25rem, 3.4vw, 2.25rem);
  border-radius: var(--radius-l);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 28px 60px -40px rgba(0, 0, 0, 0.9);
}
.page-about .story-prose p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: #2a2521;
}
.page-about .story-prose p + p {
  margin-top: 0.9rem;
}
.page-about .story-prose p::first-letter {
  color: var(--ink);
}

/* ---------- 三条信条 ---------- */
.page-about .creed-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.page-about .creed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 1.05rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--about-edge);
  border-left: 3px solid rgba(255, 90, 31, 0.75);
  background: linear-gradient(100deg, rgba(255, 90, 31, 0.11), rgba(18, 16, 14, 0.4) 48%);
  transition: border-color 0.34s var(--ease), transform 0.34s var(--ease), box-shadow 0.34s var(--ease);
}
.page-about .creed:hover {
  border-color: rgba(255, 138, 61, 0.55);
  transform: translateX(4px);
  box-shadow: 0 18px 40px -30px rgba(255, 90, 31, 0.9);
}
.page-about .creed__idx {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cyan);
  padding-top: 0.28rem;
}
.page-about .creed__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--white);
}
.page-about .creed__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(244, 237, 227, 0.74);
}

/* ---------- 年份标尺 ---------- */
.page-about .year-ruler {
  display: flex;
  gap: 0.45rem;
  margin-top: 1.4rem;
  padding-bottom: 0.6rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.page-about .year-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(53, 208, 224, 0.38);
  color: var(--ice);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
  transition: background-color 0.34s var(--ease), border-color 0.34s var(--ease), color 0.34s var(--ease), box-shadow 0.34s var(--ease);
}
.page-about .year-chip:hover,
.page-about .year-chip:focus-visible {
  background: var(--lava);
  border-color: var(--lava);
  color: var(--white);
  box-shadow: var(--glow-lava);
}

/* ---------- 时间线配图 ---------- */
.page-about .tl-figure {
  margin: 0.6rem 0 1.5rem;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--about-edge);
  background: var(--ink-2);
}
.page-about .tl-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 14 / 9;
}

/* ---------- 时间线 ---------- */
.page-about .tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.page-about .tl-list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0.9rem;
  bottom: 1.4rem;
  width: 2px;
  background: linear-gradient(180deg, var(--lava), rgba(53, 208, 224, 0.55) 62%, rgba(53, 208, 224, 0));
}
.page-about .tl-item {
  position: relative;
  padding-left: 2rem;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.page-about .tl-item + .tl-item {
  margin-top: 0.7rem;
}
.page-about .tl-item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1.15rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--lava);
  box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.14);
}
.page-about .tl-node {
  border-radius: var(--radius-m);
  border: 1px solid var(--about-edge);
  background: rgba(28, 25, 23, 0.72);
  overflow: hidden;
  transition: border-color 0.34s var(--ease), box-shadow 0.34s var(--ease);
}
.page-about .tl-node[open] {
  border-color: rgba(255, 90, 31, 0.45);
  box-shadow: 0 20px 46px -34px rgba(255, 90, 31, 0.95);
}
.page-about .tl-node > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.05rem;
}
.page-about .tl-node > summary::-webkit-details-marker {
  display: none;
}
.page-about .tl-node > summary:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: -2px;
}
.page-about .tl-year {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--lava);
  letter-spacing: 0.02em;
}
.page-about .tl-title {
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}
.page-about .tl-arrow {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
  transition: transform 0.34s var(--ease);
}
.page-about .tl-node[open] .tl-arrow {
  transform: rotate(-135deg);
}
.page-about .tl-body {
  padding: 0 1.05rem 1.05rem;
  border-top: 1px solid rgba(244, 237, 227, 0.08);
  margin-top: 0.1rem;
}
.page-about .tl-body p {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(244, 237, 227, 0.76);
}

/* ---------- 团队 ---------- */
.page-about .team-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.page-about .team-split {
  display: grid;
  gap: 1.15rem;
  align-content: start;
}
.page-about .team-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.45rem;
}
.page-about .team-row__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
}
.page-about .team-row__count {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--cyan);
}
.page-about .team-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(244, 237, 227, 0.1);
  overflow: hidden;
}
.page-about .team-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.page-about .team-bar__fill--editorial {
  width: 40%;
  background: linear-gradient(90deg, var(--lava), var(--flame));
}
.page-about .team-bar__fill--product {
  width: 42%;
  background: linear-gradient(90deg, var(--cyan), var(--ice));
}
.page-about .team-bar__fill--support {
  width: 18%;
  background: linear-gradient(90deg, #8a8178, var(--paper));
}
.page-about .team-row__note {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(244, 237, 227, 0.7);
}
.page-about .team-figure {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid rgba(53, 208, 224, 0.22);
  background: var(--ink-2);
}
.page-about .team-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* ---------- 合作生态 ---------- */
.page-about .eco-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--about-edge);
}
.page-about .eco-cell {
  background: var(--ink-2);
  padding: 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: background-color 0.34s var(--ease);
}
.page-about .eco-cell:hover {
  background: #221e1a;
}
.page-about .eco-num {
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.page-about .eco-num em {
  font-style: normal;
  font-size: 0.5em;
  margin-left: 0.18em;
  color: var(--cyan);
  letter-spacing: 0.02em;
}
.page-about .eco-label {
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(244, 237, 227, 0.68);
}

/* ---------- 专题与荣誉 ---------- */
.page-about .note-grid {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}
.page-about .note-panel {
  padding: clamp(1.2rem, 3.2vw, 2rem);
  border-radius: var(--radius-l);
  background: var(--paper);
  color: var(--ink);
  border-top: 4px solid var(--lava);
}
.page-about .note-panel:last-child {
  border-top-color: var(--cyan);
}
.page-about .note-kicker {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a4a1f;
}
.page-about .note-panel:last-child .note-kicker {
  color: #15707c;
}
.page-about .note-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}
.page-about .note-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #2a2521;
}
.page-about .note-text + .note-text {
  margin-top: 0.75rem;
}

/* ---------- 联系 ---------- */
.page-about .contact-panel {
  margin-top: 1.5rem;
  padding: clamp(1.2rem, 3.2vw, 2rem);
  border-radius: var(--radius-l);
  border: 1px solid rgba(255, 138, 61, 0.25);
  background: linear-gradient(120deg, rgba(255, 90, 31, 0.1), rgba(28, 25, 23, 0.86) 55%);
  backdrop-filter: blur(8px);
}
.page-about .contact-rows {
  margin: 0;
  display: grid;
  gap: 1px;
  background: rgba(244, 237, 227, 0.1);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.page-about .contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  background: var(--ink-2);
}
.page-about .contact-row dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
}
.page-about .contact-row dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--paper);
  word-break: break-word;
}
.page-about .contact-row dd a {
  color: var(--ice);
  text-decoration: none;
  border-bottom: 1px solid rgba(167, 243, 247, 0.4);
  transition: color 0.34s var(--ease), border-color 0.34s var(--ease);
}
.page-about .contact-row dd a:hover {
  color: var(--white);
  border-color: var(--white);
}
.page-about .contact-foot {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.page-about .contact-hint {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(244, 237, 227, 0.72);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-about .about-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .note-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-about .contact-row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
  .page-about .eco-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .team-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .page-about .story-layout {
    grid-template-columns: var(--about-rail) minmax(0, 1fr);
    align-items: start;
  }
  .page-about .story-rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    padding: 1.15rem 1rem 1.25rem 1.15rem;
    border-left: 2px solid rgba(255, 90, 31, 0.55);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    background: linear-gradient(180deg, rgba(28, 25, 23, 0.88), rgba(18, 16, 14, 0.45));
    backdrop-filter: blur(8px);
  }
}

@media (min-width: 1200px) {
  .page-about .about-hero__stats {
    gap: 1px;
  }
  .page-about .note-grid {
    gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .creed,
  .page-about .creed:hover,
  .page-about .story-rail__list a,
  .page-about .story-rail__list a:hover,
  .page-about .year-chip,
  .page-about .tl-arrow {
    transition: none;
    transform: none;
  }
}
</style>
<<<END>>>

等一下，输出协议要求必须只出现  和  这两个标记。我多写了一个 `</style>` 和 `<<<END>>>`。让我把它们去掉。重新整理最终输出。
<main id="main-content" class="page-about">

  <nav class="breadcrumbs container" aria-label="面包屑">
    <a href="/">首页</a>
    <span aria-hidden="true">/</span>
    <span>看台故事</span>
  </nav>

  <section class="about-hero">
    <div class="container about-hero__inner">
      <div class="about-hero__copy">
        <p class="eyebrow">看台故事 · 2018 年起</p>
        <h1 class="display about-hero__title">从夜场看台的第一排，到一个能同时看住<em>十二项联赛</em>的数据看台</h1>
        <p class="lede">2018 年，我们带着笔记本坐在看台上数比分、抄排名，把每一轮之后谁升谁降记成一张共享表。今天，火博看台把这件事做成了你随手能打开的积分榜、可回看的赛季轨迹和按轮次整理好的资料包，让你在通勤路上或赛前十分钟，就能把一整轮的变化看清。</p>
        <div class="about-hero__cta cluster">
          <a class="btn btn--primary" href="/products/">查看积分榜与订阅方案</a>
          <a class="btn btn--ghost" href="#timeline">跳到发展时间线</a>
        </div>
      </div>
      <figure class="about-hero__visual">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间体育场馆的看台灯光与成排空座椅，暖橙色灯带在暗色场地上拉出光轨">
      </figure>
    </div>

    <div class="container about-hero__stats">
      <div class="about-stat">
        <span class="about-stat__num">12</span>
        <span class="about-stat__label">项联赛的积分榜同屏呈现</span>
      </div>
      <div class="about-stat">
        <span class="about-stat__num">96</span>
        <span class="about-stat__label">支参赛队伍的排名变化</span>
      </div>
      <div class="about-stat">
        <span class="about-stat__num">1800</span>
        <span class="about-stat__label">每周同步的赛果与名次条目</span>
      </div>
      <div class="about-stat">
        <span class="about-stat__num">68<em>万</em></span>
        <span class="about-stat__label">累计使用过火博看台的数据用户</span>
      </div>
    </div>
  </section>

  <div class="container story-layout">

    <aside class="story-rail" aria-label="看台路线">
      <p class="story-rail__label">看台路线</p>
      <ol class="story-rail__list">
        <li><a href="#origin"><span class="num">01</span>起点</a></li>
        <li><a href="#creeds"><span class="num">02</span>三条信条</a></li>
        <li><a href="#timeline"><span class="num">03</span>时间线</a></li>
        <li><a href="#team"><span class="num">04</span>团队分工</a></li>
        <li><a href="#ecosystem"><span class="num">05</span>合作生态</a></li>
        <li><a href="#awards"><span class="num">06</span>专题与荣誉</a></li>
        <li><a href="#contact"><span class="num">07</span>联系方式</a></li>
      </ol>
    </aside>

    <div class="story-main">

      <section id="origin" class="story-block">
        <div class="section-head">
          <p class="eyebrow">01 / 起点</p>
          <h2>坐在看台上，你真正想知道的其实只有几件事</h2>
        </div>
        <div class="story-prose">
          <p>看台上的人很少关心一整套复杂的统计口径。比赛刚结束，大家想知道的是：这轮打完谁上去了、谁掉下来了、下一轮谁碰谁、上一次交手是什么结果。2018 年，我们把这些问题一条一条记在本子上，因为当时能找到的页面要么只盯一个联赛，要么把关键数字埋在很长的滚动里。</p>
          <p>于是火博看台从一个很朴素的做法开始：按轮次整理比分，把名次变化单独标出来，让任何人扫一眼就知道这一轮发生了什么。这个习惯一直保留到现在——积分榜永远排在最先被看到的位置，名次升降用颜色区分，历史交手和下一轮对阵放在够得着的地方。</p>
          <p>八年下来，看台视角没变，覆盖范围变了。从最初的一支笔一张表，到如今 12 项联赛、96 支队伍同屏，我们做的始终是同一件事：把散落在各处的赛果和排名，整理成你在看台上最想先看到的那一版。</p>
        </div>
      </section>

      <section id="creeds" class="story-block">
        <div class="section-head">
          <p class="eyebrow">02 / 三条信条</p>
          <h2>数据能不能用，取决于它出现的方式</h2>
        </div>
        <ul class="creed-list">
          <li class="creed">
            <span class="creed__idx">A</span>
            <h3 class="creed__title">一眼扫得完，才算可读</h3>
            <p class="creed__text">名次、积分、净胜变化用等宽数字纵向对齐，不靠颜色区分名次高低；一张榜从第一名到最后一名的落差，扫一遍就能感受到。我们不追求把页面塞满，而是让最关键的几列先出现在视野里。</p>
          </li>
          <li class="creed">
            <span class="creed__idx">B</span>
            <h3 class="creed__title">先想清楚看什么，再决定用什么</h3>
            <p class="creed__text">有人只想快速扫一眼排名，有人要回看整季走势，还有人需要把数据导出去做自己的整理。判断路径很短：先看数据范围，再看更新频率，最后看是否需要历史回看和导出。想清楚这三点，选哪条查看路径自然就清楚了。</p>
          </li>
          <li class="creed">
            <span class="creed__idx">C</span>
            <h3 class="creed__title">比完就更新，别让人等</h3>
            <p class="creed__text">每轮比赛结束后约 30 分钟，积分快照和排名变化标注就会生成。赛季进行中，榜单跟着轮次走；赛季结束后，历史轨迹留在原地，随时能翻回任何一轮去看当时的位置。</p>
          </li>
        </ul>
      </section>

      <section id="timeline" class="story-block">
        <div class="section-head">
          <p class="eyebrow">03 / 时间线</p>
          <h2>一年一年，把看台往外扩了一圈</h2>
        </div>

        <nav class="year-ruler" aria-label="年份索引">
          <a class="year-chip" href="#year-2018">2018</a>
          <a class="year-chip" href="#year-2020">2020</a>
          <a class="year-chip" href="#year-2022">2022</a>
          <a class="year-chip" href="#year-2023">2023</a>
          <a class="year-chip" href="#year-2024">2024</a>
          <a class="year-chip" href="#year-2025">2025</a>
        </nav>

        <figure class="tl-figure">
          <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="2018 至 2025 年的路线图信息图，用熔岩橙圆点与青蓝色轨迹标出各年关键节点" loading="lazy" decoding="async">
        </figure>

        <ol class="tl-list">
          <li class="tl-item" id="year-2018">
            <details class="tl-node" open>
              <summary>
                <span class="tl-year num">2018</span>
                <span class="tl-title">看台记录的第一年</span>
                <span class="tl-arrow" aria-hidden="true"></span>
              </summary>
              <div class="tl-body">
                <p>一支笔、一张共享表格，每轮赛后把比分和名次变化填进去。看的人不多，但每个人都问同一个问题：这一轮之后，排名动了几位。火博看台的运营也从这一年开始持续至今。</p>
              </div>
            </details>
          </li>

          <li class="tl-item" id="year-2020">
            <details class="tl-node">
              <summary>
                <span class="tl-year num">2020</span>
                <span class="tl-title">关注的联赛从一项变成六项</span>
                <span class="tl-arrow" aria-hidden="true"></span>
              </summary>
              <div class="tl-body">
                <p>一张表已经装不下了。页面按联赛拆开，每个联赛单独一张榜，关注不同赛事的用户在同一个入口里各看各的，不用再横跨好几个站点拼信息。</p>
              </div>
            </details>
          </li>

          <li class="tl-item" id="year-2022">
            <details class="tl-node">
              <summary>
                <span class="tl-year num">2022</span>
                <span class="tl-title">扩到十二项联赛、九十六支队伍</span>
                <span class="tl-arrow" aria-hidden="true"></span>
              </summary>
              <div class="tl-body">
                <p>首屏开始同时容纳 12 项联赛的排名，覆盖 96 支参赛队伍。每周大约 1800 条赛果与名次变动同步进来，多联赛关注者不必再逐个页面翻。</p>
              </div>
            </details>
          </li>

          <li class="tl-item" id="year-2023">
            <details class="tl-node">
              <summary>
                <span class="tl-year num">2023</span>
                <span class="tl-title">两种查看方式，手机上也顺手</span>
                <span class="tl-arrow" aria-hidden="true"></span>
              </summary>
              <div class="tl-body">
                <p>很多人是在通勤路上看榜的。卡片流适合竖屏单场浏览，横屏矩阵适合整体扫读，两种方式在同一个小屏设备上直接对照，切换不用重新找位置。</p>
              </div>
            </details>
          </li>

          <li class="tl-item" id="year-2024">
            <details class="tl-node">
              <summary>
                <span class="tl-year num">2024</span>
                <span class="tl-title">订阅方案摆到同一张表里比较</span>
                <span class="tl-arrow" aria-hidden="true"></span>
              </summary>
              <div class="tl-body">
                <p>三档方案、六个对比维度并排列出，从更新频率、历史回看到资料下载与数据导出，标准版和专业版各自多出哪些能力，比较之前先看清差别，比之后再决定。</p>
              </div>
            </details>
          </li>

          <li class="tl-item" id="year-2025">
            <details class="tl-node">
              <summary>
                <span class="tl-year num">2025</span>
                <span class="tl-title">资料索引跟着次轮一起走</span>
                <span class="tl-arrow" aria-hidden="true"></span>
              </summary>
              <div class="tl-body">
                <p>CN 赛区的资料包开始与次轮同步发布，赛程、积分快照、对局摘要、地图数据和选手统计表按轮次归好类。想找上一轮的记录，顺着轮次往下点就行，不必再翻历史页面。</p>
              </div>
            </details>
          </li>
        </ol>
      </section>

      <section id="team" class="story-block">
        <div class="section-head">
          <p class="eyebrow">04 / 团队分工</p>
          <h2>四十五个人，分成三块各管一段</h2>
        </div>

        <div class="team-grid">
          <div class="team-split">
            <div class="team-row">
              <div class="team-row__head">
                <span class="team-row__name">数据编辑</span>
                <span class="team-row__count num">18 人</span>
              </div>
              <div class="team-bar"><span class="team-bar__fill team-bar__fill--editorial"></span></div>
              <p class="team-row__note">每轮赛后核对赛果、标注名次升降、整理积分快照。你看到的每一个数字，都由这一组人过一遍。</p>
            </div>

            <div class="team-row">
              <div class="team-row__head">
                <span class="team-row__name">产品与技术</span>
                <span class="team-row__count num">19 人</span>
              </div>
              <div class="team-bar"><span class="team-bar__fill team-bar__fill--product"></span></div>
              <p class="team-row__note">把同一张榜做成桌面、平板和手机上都读得顺的页面，处理数据同步、历史回看和导出功能。</p>
            </div>

            <div class="team-row">
              <div class="team-row__head">
                <span class="team-row__name">客户支持</span>
                <span class="team-row__count num">8 人</span>
              </div>
              <div class="team-bar"><span class="team-bar__fill team-bar__fill--support"></span></div>
              <p class="team-row__note">解答订阅方案差异、查看路径和资料下载的问题，工作日 9:00 到 18:00 都有人在。</p>
            </div>
          </div>

          <figure class="team-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="多块数据屏幕排成编辑工作流的抽象画面，暖橙色光轨连接表格与排名列表" loading="lazy" decoding="async">
          </figure>
        </div>
      </section>

      <section id="ecosystem" class="story-block">
        <div class="section-head">
          <p class="eyebrow">05 / 合作生态</p>
          <h2>榜单背后，是一张持续在跑的数据网络</h2>
        </div>

        <div class="eco-grid">
          <div class="eco-cell">
            <span class="eco-num num">26<em>家</em></span>
            <span class="eco-label">赛事数据源与内容机构，为榜单提供原始赛果与排名依据</span>
          </div>
          <div class="eco-cell">
            <span class="eco-num num">12<em>家</em></span>
            <span class="eco-label">赛事内容社区与我们建立资料互认，减少重复整理</span>
          </div>
          <div class="eco-cell">
            <span class="eco-num num">2400<em>+</em></span>
            <span class="eco-label">累计发布的赛事资料包，覆盖多个赛季阶段</span>
          </div>
          <div class="eco-cell">
            <span class="eco-num num">5<em>类</em></span>
            <span class="eco-label">资料库按赛季阶段划分的栏目，方便按需要取用</span>
          </div>
          <div class="eco-cell">
            <span class="eco-num num">30<em>分钟</em></span>
            <span class="eco-label">每轮赛后生成积分快照与排名变化标注的用时</span>
          </div>
          <div class="eco-cell">
            <span class="eco-num num">3<em>种</em></span>
            <span class="eco-label">资料下载格式：PDF、CSV 与图片，按使用场景挑选</span>
          </div>
        </div>
      </section>

      <section id="awards" class="story-block">
        <div class="section-head">
          <p class="eyebrow">06 / 专题与荣誉</p>
          <h2>把用户怎么用积分榜，每个季度看一遍</h2>
        </div>

        <div class="note-grid">
          <div class="note-panel">
            <p class="note-kicker">季度专题 · 累计 9 期</p>
            <h3 class="note-title">《多联赛积分榜使用观察》</h3>
            <p class="note-text">每个季度，我们把多联赛关注者在榜单上的阅读习惯梳理成一份专题。已经连续发布 9 期，讨论的话题包括：哪些联赛的关注度会在轮次之间明显起伏、榜单里被反复查看的是哪几列、移动端扫榜时大家习惯停在哪里。</p>
            <p class="note-text">这些观察会反过来影响榜单的排序方式和字段位置——你觉得顺手的版本，通常就是这么一点一点调出来的。</p>
          </div>
          <div class="note-panel">
            <p class="note-kicker">行业评选</p>
            <h3 class="note-title">体育数据工具创新奖项</h3>
            <p class="note-text">火博看台在行业评选中获得体育数据工具创新奖项，评选关注的是多联赛同屏呈现、小屏双版本对照和跨轮次的资料同步方式。</p>
            <p class="note-text">对我们来说，比奖项更重要的是它背后的那件事：让关注好几项联赛的人，不用再在十几个标签页之间来回跳。</p>
          </div>
        </div>
      </section>

      <section id="contact" class="story-block">
        <div class="section-head">
          <p class="eyebrow">07 / 联系方式</p>
          <h2>想聊点什么，直接找我们</h2>
        </div>

        <div class="contact-panel">
          <dl class="contact-rows">
            <div class="contact-row">
              <dt>客服邮箱</dt>
              <dd><a href="/inquiry/">email@huo-bo-sports.com.cn</a></dd>
            </div>
            <div class="contact-row">
              <dt>客服电话</dt>
              <dd class="num">13730098401</dd>
            </div>
            <div class="contact-row">
              <dt>联系地址</dt>
              <dd>贵州省贵阳市观山湖区林城东路12号火博体育大厦8层</dd>
            </div>
            <div class="contact-row">
              <dt>回复时间</dt>
              <dd>工作日 9:00-18:00</dd>
            </div>
            <div class="contact-row">
              <dt>备案号</dt>
              <dd class="num">贵ICP备73949234号-3</dd>
            </div>
          </dl>
          <div class="contact-foot">
            <p class="contact-hint">咨询积分榜或订阅方案对比时，附上你看到的截图，我们定位起来会快很多。</p>
            <a class="btn btn--cyan" href="/inquiry/">进入咨询通道</a>
          </div>
        </div>
      </section>

    </div>
  </div>
</main>

.page-about {
  --about-rail: 200px;
  --about-gap: clamp(1.5rem, 3vw, 2.75rem);
  --about-edge: rgba(244, 237, 227, 0.12);
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
}

.page-about .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding-top: 1.35rem;
  font-size: 0.8rem;
  color: var(--ash);
}
.page-about .breadcrumbs a {
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.34s var(--ease);
}
.page-about .breadcrumbs a:hover {
  color: var(--ice);
}

.page-about .about-hero {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}
.page-about .about-hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -12%;
  width: min(620px, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 90, 31, 0.32), transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}
.page-about .about-hero::after {
  content: "";
  position: absolute;
  left: -16%;
  bottom: -30%;
  width: min(460px, 62vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(53, 208, 224, 0.14), transparent 70%);
  pointer-events: none;
}
.page-about .about-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.page-about .about-hero__title {
  margin: 0.4rem 0 1rem;
  font-size: clamp(1.85rem, 5.2vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--white);
}
.page-about .about-hero__title em {
  font-style: normal;
  color: var(--lava);
  text-shadow: 0 0 26px rgba(255, 90, 31, 0.45);
}
.page-about .about-hero__copy .lede {
  max-width: 46ch;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.8;
  color: rgba(244, 237, 227, 0.8);
}
.page-about .about-hero__cta {
  margin-top: 1.5rem;
}
.page-about .about-hero__visual {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid rgba(255, 138, 61, 0.28);
  box-shadow: var(--glow-lava);
  background: var(--ink-2);
}
.page-about .about-hero__visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.page-about .about-hero__stats {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: linear-gradient(100deg, rgba(255, 90, 31, 0.5), rgba(53, 208, 224, 0.35), rgba(244, 237, 227, 0.08));
}
.page-about .about-stat {
  background: var(--ink-2);
  padding: 0.95rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.page-about .about-stat__num {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 3.2vw, 1.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--flame);
}
.page-about .about-stat__num em {
  font-style: normal;
  font-size: 0.6em;
  margin-left: 0.15em;
  color: var(--ice);
}
.page-about .about-stat__label {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ash);
}

.page-about .story-layout {
  display: grid;
  gap: var(--about-gap);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.page-about .story-rail {
  display: none;
}
.page-about .story-rail__label {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lava);
}
.page-about .story-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}
.page-about .story-rail__list a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.34rem 0;
  font-size: 0.85rem;
  color: rgba(244, 237, 227, 0.68);
  text-decoration: none;
  transition: color 0.34s var(--ease), transform 0.34s var(--ease);
}
.page-about .story-rail__list a .num {
  font-size: 0.7rem;
  color: var(--cyan);
  letter-spacing: 0.05em;
}
.page-about .story-rail__list a:hover {
  color: var(--white);
  transform: translateX(3px);
}

.page-about .story-block {
  padding-block: clamp(1.6rem, 4vw, 2.9rem);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.page-about .story-block + .story-block {
  border-top: 1px solid var(--about-edge);
}
.page-about .story-block h2 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.35rem, 3.4vw, 2.05rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--white);
  max-width: 22ch;
}

.page-about .story-prose {
  margin-top: 1.5rem;
  padding: clamp(1.25rem, 3.4vw, 2.25rem);
  border-radius: var(--radius-l);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 28px 60px -40px rgba(0, 0, 0, 0.9);
}
.page-about .story-prose p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: #2a2521;
}
.page-about .story-prose p + p {
  margin-top: 0.9rem;
}

.page-about .creed-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.page-about .creed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 1.05rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--about-edge);
  border-left: 3px solid rgba(255, 90, 31, 0.75);
  background: linear-gradient(100deg, rgba(255, 90, 31, 0.11), rgba(18, 16, 14, 0.4) 48%);
  transition: border-color 0.34s var(--ease), transform 0.34s var(--ease), box-shadow 0.34s var(--ease);
}
.page-about .creed:hover {
  border-color: rgba(255, 138, 61, 0.55);
  transform: translateX(4px);
  box-shadow: 0 18px 40px -30px rgba(255, 90, 31, 0.9);
}
.page-about .creed__idx {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cyan);
  padding-top: 0.28rem;
}
.page-about .creed__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--white);
}
.page-about .creed__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(244, 237, 227, 0.74);
}

.page-about .year-ruler {
  display: flex;
  gap: 0.45rem;
  margin-top: 1.4rem;
  padding-bottom: 0.6rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.page-about .year-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(53, 208, 224, 0.38);
  color: var(--ice);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
  transition: background-color 0.34s var(--ease), border-color 0.34s var(--ease), color 0.34s var(--ease), box-shadow 0.34s var(--ease);
}
.page-about .year-chip:hover,
.page-about .year-chip:focus-visible {
  background: var(--lava);
  border-color: var(--lava);
  color: var(--white);
  box-shadow: var(--glow-lava);
}

.page-about .tl-figure {
  margin: 0.6rem 0 1.5rem;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--about-edge);
  background: var(--ink-2);
}
.page-about .tl-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 14 / 9;
}

.page-about .tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.page-about .tl-list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0.9rem;
  bottom: 1.4rem;
  width: 2px;
  background: linear-gradient(180deg, var(--lava), rgba(53, 208, 224, 0.55) 62%, rgba(53, 208, 224, 0));
}
.page-about .tl-item {
  position: relative;
  padding-left: 2rem;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.page-about .tl-item + .tl-item {
  margin-top: 0.7rem;
}
.page-about .tl-item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1.15rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--lava);
  box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.14);
}
.page-about .tl-node {
  border-radius: var(--radius-m);
  border: 1px solid var(--about-edge);
  background: rgba(28, 25, 23, 0.72);
  overflow: hidden;
  transition: border-color 0.34s var(--ease), box-shadow 0.34s var(--ease);
}
.page-about .tl-node[open] {
  border-color: rgba(255, 90, 31, 0.45);
  box-shadow: 0 20px 46px -34px rgba(255, 90, 31, 0.95);
}
.page-about .tl-node > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.05rem;
}
.page-about .tl-node > summary::-webkit-details-marker {
  display: none;
}
.page-about .tl-node > summary:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: -2px;
}
.page-about .tl-year {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--lava);
  letter-spacing: 0.02em;
}
.page-about .tl-title {
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}
.page-about .tl-arrow {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
  transition: transform 0.34s var(--ease);
}
.page-about .tl-node[open] .tl-arrow {
  transform: rotate(-135deg);
}
.page-about .tl-body {
  padding: 0 1.05rem 1.05rem;
  border-top: 1px solid rgba(244, 237, 227, 0.08);
  margin-top: 0.1rem;
}
.page-about .tl-body p {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(244, 237, 227, 0.76);
}

.page-about .team-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.page-about .team-split {
  display: grid;
  gap: 1.15rem;
  align-content: start;
}
.page-about .team-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.45rem;
}
.page-about .team-row__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
}
.page-about .team-row__count {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--cyan);
}
.page-about .team-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(244, 237, 227, 0.1);
  overflow: hidden;
}
.page-about .team-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.page-about .team-bar__fill--editorial {
  width: 40%;
  background: linear-gradient(90deg, var(--lava), var(--flame));
}
.page-about .team-bar__fill--product {
  width: 42%;
  background: linear-gradient(90deg, var(--cyan), var(--ice));
}
.page-about .team-bar__fill--support {
  width: 18%;
  background: linear-gradient(90deg, #8a8178, var(--paper));
}
.page-about .team-row__note {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(244, 237, 227, 0.7);
}
.page-about .team-figure {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid rgba(53, 208, 224, 0.22);
  background: var(--ink-2);
}
.page-about .team-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.page-about .eco-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--about-edge);
}
.page-about .eco-cell {
  background: var(--ink-2);
  padding: 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: background-color 0.34s var(--ease);
}
.page-about .eco-cell:hover {
  background: #221e1a;
}
.page-about .eco-num {
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.page-about .eco-num em {
  font-style: normal;
  font-size: 0.5em;
  margin-left: 0.18em;
  color: var(--cyan);
  letter-spacing: 0.02em;
}
.page-about .eco-label {
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(244, 237, 227, 0.68);
}

.page-about .note-grid {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}
.page-about .note-panel {
  padding: clamp(1.2rem, 3.2vw, 2rem);
  border-radius: var(--radius-l);
  background: var(--paper);
  color: var(--ink);
  border-top: 4px solid var(--lava);
}
.page-about .note-panel:last-child {
  border-top-color: var(--cyan);
}
.page-about .note-kicker {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a4a1f;
}
.page-about .note-panel:last-child .note-kicker {
  color: #15707c;
}
.page-about .note-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}
.page-about .note-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #2a2521;
}
.page-about .note-text + .note-text {
  margin-top: 0.75rem;
}

.page-about .contact-panel {
  margin-top: 1.5rem;
  padding: clamp(1.2rem, 3.2vw, 2rem);
  border-radius: var(--radius-l);
  border: 1px solid rgba(255, 138, 61, 0.25);
  background: linear-gradient(120deg, rgba(255, 90, 31, 0.1), rgba(28, 25, 23, 0.86) 55%);
  backdrop-filter: blur(8px);
}
.page-about .contact-rows {
  margin: 0;
  display: grid;
  gap: 1px;
  background: rgba(244, 237, 227, 0.1);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.page-about .contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  background: var(--ink-2);
}
.page-about .contact-row dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
}
.page-about .contact-row dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--paper);
  word-break: break-word;
}
.page-about .contact-row dd a {
  color: var(--ice);
  text-decoration: none;
  border-bottom: 1px solid rgba(167, 243, 247, 0.4);
  transition: color 0.34s var(--ease), border-color 0.34s var(--ease);
}
.page-about .contact-row dd a:hover {
  color: var(--white);
  border-color: var(--white);
}
.page-about .contact-foot {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.page-about .contact-hint {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(244, 237, 227, 0.72);
}

@media (min-width: 640px) {
  .page-about .about-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .note-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-about .contact-row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
  .page-about .eco-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .team-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .page-about .story-layout {
    grid-template-columns: var(--about-rail) minmax(0, 1fr);
    align-items: start;
  }
  .page-about .story-rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    padding: 1.15rem 1rem 1.25rem 1.15rem;
    border-left: 2px solid rgba(255, 90, 31, 0.55);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    background: linear-gradient(180deg, rgba(28, 25, 23, 0.88), rgba(18, 16, 14, 0.45));
    backdrop-filter: blur(8px);
  }
}

@media (min-width: 1200px) {
  .page-about .note-grid {
    gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .creed,
  .page-about .creed:hover,
  .page-about .story-rail__list a,
  .page-about .story-rail__list a:hover,
  .page-about .year-chip,
  .page-about .tl-arrow {
    transition: none;
    transform: none;
  }
}