/* ===== 动态与专题 / page-news ===== */

.page-news {
  --nw-ink: var(--ink);
  --nw-paper-line: rgba(36, 28, 24, .22);
  --nw-gap: clamp(1.2rem, 3vw, 2.4rem);
  --nw-railcard-w: min(80vw, 19rem);
}

/* ---------- 面包屑 ---------- */
.page-news > .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.2rem var(--gutter) 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--gray);
}

.page-news > .crumbs .crumbs__link {
  color: var(--cyan);
  text-decoration: none;
}

.page-news > .crumbs .crumbs__link:hover,
.page-news > .crumbs .crumbs__link:focus-visible {
  text-decoration: underline;
}

/* ---------- 首屏 ---------- */
.page-news .newshead {
  padding: clamp(1.6rem, 4vw, 3.2rem) 0 clamp(2rem, 5vw, 3.6rem);
  border-bottom: 1px solid var(--line);
}

.page-news .newshead__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}

.page-news .newshead__main h1 {
  margin: .5rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.02em;
}

.page-news .newshead__lede {
  max-width: 40ch;
  margin: 1.1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--silver);
}

.page-news .newshead__meta {
  margin: 1.2rem 0 0;
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--cyan);
}

.page-news .newshead__side {
  padding-top: .4rem;
  border-top: 2px solid var(--line-strong);
}

.page-news .branches {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .1rem;
}

.page-news .branches__item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  gap: .6rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}

.page-news .branches__num {
  font-size: .72rem;
  color: var(--orange);
  letter-spacing: .06em;
}

/* ---------- 区块标题通用 ---------- */
.page-news .sechead {
  margin-bottom: var(--nw-gap);
}

.page-news .sechead h2 {
  margin: .45rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}

.page-news .sechead__note {
  max-width: 46ch;
  margin: .8rem 0 0;
  font-size: .94rem;
  line-height: 1.8;
  color: rgba(36, 28, 24, .68);
}

.page-news .sechead--onink .sechead__note {
  color: var(--gray);
}

/* ---------- 速览 ---------- */
.page-news .digest-banner {
  margin: 0 0 var(--nw-gap);
  border: 2px solid var(--brown);
  background: var(--paper-hi);
  box-shadow: 8px 8px 0 rgba(36, 28, 24, .14);
}

.page-news .digest-banner img {
  display: block;
  width: 100%;
  height: clamp(150px, 26vw, 300px);
  object-fit: cover;
}

.page-news .digest-banner__cap {
  display: block;
  padding: .6rem .9rem;
  border-top: 1px solid var(--nw-paper-line);
  font-size: .7rem;
  letter-spacing: .08em;
  color: rgba(36, 28, 24, .6);
}

.page-news .digest {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: dg;
}

.page-news .digest__item {
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  column-gap: 1rem;
  padding: 1.35rem 0;
  border-top: 2px solid var(--nw-paper-line);
}

.page-news .digest__num {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rust);
  line-height: 1.5;
}

.page-news .digest__title {
  grid-column: 2;
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.16rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--brown);
}

.page-news .digest__desc {
  grid-column: 2;
  max-width: 52ch;
  margin: .5rem 0 0;
  font-size: .9rem;
  line-height: 1.8;
  color: rgba(36, 28, 24, .72);
}

/* ---------- 筛选栏 ---------- */
.page-news .newsfilter {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 3px solid var(--cyan);
}

.page-news .newsfilter__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.6rem;
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.page-news .newsfilter__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.page-news .newsfilter__label {
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--gray);
  margin-right: .15rem;
}

.page-news .newsfilter .tag {
  cursor: pointer;
}

/* ---------- 更新列表 ---------- */
.page-news .newslist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .newsitem {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: .9rem;
  padding: 1.3rem 0;
  border-top: 2px solid var(--nw-paper-line);
  transition: background-color var(--dur) var(--ease);
}

.page-news .newsitem:last-child {
  border-bottom: 2px solid var(--nw-paper-line);
}

.page-news .newsitem:hover {
  background: rgba(255, 106, 31, .07);
}

.page-news .newsitem[hidden] {
  display: none;
}

.page-news .newsitem__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--brown);
  letter-spacing: -.02em;
}

.page-news .newsitem__title {
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.14rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--brown);
}

.page-news .newsitem__abs {
  max-width: 54ch;
  margin: 0;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(36, 28, 24, .7);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}

.page-news .newsitem:hover .newsitem__abs,
.page-news .newsitem:focus-within .newsitem__abs {
  max-height: 7rem;
  opacity: 1;
  margin-top: .5rem;
}

.page-news .newsitem__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: .65rem 0 0;
}

.page-news .newsitem__time {
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--rust);
  padding-right: .45rem;
  border-right: 1px solid var(--nw-paper-line);
}

.page-news .newslist__more {
  margin: var(--nw-gap) 0 0;
}

/* ---------- 评测专栏 ---------- */
.page-news .review-visual {
  margin: 0 0 var(--nw-gap);
  border: 2px solid var(--line-strong);
}

.page-news .review-visual img {
  display: block;
  width: 100%;
  height: clamp(160px, 26vw, 300px);
  object-fit: cover;
}

.page-news .review-visual__cap {
  display: block;
  padding: .55rem .9rem;
  border-top: 1px solid var(--line);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--gray);
}

.page-news .matrix {
  border: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-news .matrix__row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 1.7fr) repeat(6, minmax(4.6rem, 1fr));
  gap: .35rem .5rem;
  align-items: center;
  padding: .7rem .9rem;
  min-width: 40rem;
  border-bottom: 1px solid var(--line);
}

.page-news .matrix__row:last-child {
  border-bottom: 0;
}

.page-news .matrix__row--head {
  background: var(--ink-green);
}

.page-news .matrix__row:not(.matrix__row--head):hover {
  background: rgba(63, 224, 200, .07);
}

.page-news .matrix__cell {
  font-size: .78rem;
  color: var(--silver);
}

.page-news .matrix__row--head .matrix__cell {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--cyan);
  text-transform: none;
}

.page-news .matrix__cell--name {
  font-size: .88rem;
  color: var(--paper);
  font-weight: 700;
}

.page-news .score {
  display: block;
  position: relative;
  height: .62rem;
  background: rgba(195, 201, 198, .16);
}

.page-news .score::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) / 5 * 100%);
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.page-news .score--1 { --v: 1; }
.page-news .score--2 { --v: 2; }
.page-news .score--3 { --v: 3; }
.page-news .score--4 { --v: 4; }
.page-news .score--5 { --v: 5; }

.page-news .legend {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .legend__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  color: var(--gray);
}

.page-news .legend__chip {
  display: inline-block;
  width: 1.4rem;
  height: .5rem;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.page-news .legend__chip--cyan {
  background: var(--cyan);
}

.page-news .legend__chip--orange {
  background: var(--orange);
}

.page-news .review-notes {
  margin-top: var(--nw-gap);
  row-gap: var(--nw-gap);
}

.page-news .review-notes__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}

.page-news .review-notes__text {
  margin: 0;
  max-width: 42ch;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--gray);
}

.page-news .review-mobile {
  margin: 0;
  border: 1px solid var(--line);
}

.page-news .review-mobile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-news .review-mobile__cap {
  display: block;
  padding: .5rem .8rem;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  letter-spacing: .07em;
  color: var(--gray);
}

.page-news .review-links {
  margin: var(--nw-gap) 0 0;
}

/* ---------- 专题合集 ---------- */
.page-news .collection-banner {
  margin: 0 0 var(--nw-gap);
}

.page-news .collection-banner img {
  display: block;
  width: 100%;
  height: clamp(120px, 18vw, 200px);
  object-fit: cover;
  border-top: 2px solid var(--brown);
  border-bottom: 2px solid var(--brown);
}

.page-news .rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: .2rem .2rem 1.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-news .railcard {
  flex: 0 0 auto;
  width: var(--nw-railcard-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.15rem 1.1rem 1rem;
  background: var(--paper-hi);
  border: 2px solid var(--brown);
  box-shadow: 5px 5px 0 rgba(36, 28, 24, .16);
  text-decoration: none;
  color: var(--brown);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-news .railcard:nth-child(2n) {
  width: min(84vw, 22rem);
}

.page-news .railcard:hover,
.page-news .railcard:focus-visible {
  transform: translateY(-4px);
  box-shadow: 7px 9px 0 rgba(36, 28, 24, .2);
}

.page-news .railcard__eyebrow {
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--rust);
}

.page-news .railcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.page-news .railcard__desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: .87rem;
  line-height: 1.75;
  color: rgba(36, 28, 24, .72);
}

.page-news .railcard__foot {
  align-self: flex-start;
  padding: .2rem .55rem;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--paper);
  background: var(--ink-green);
}

/* ---------- 订阅与归档 ---------- */
.page-news .follow {
  row-gap: var(--nw-gap);
}

.page-news .follow__block {
  padding: 1.3rem 1.2rem;
  border: 2px solid var(--line-strong);
  background: rgba(13, 18, 16, .45);
}

.page-news .follow__block--alt {
  border-color: rgba(255, 106, 31, .5);
}

.page-news .follow__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.24rem;
  letter-spacing: -.01em;
}

.page-news .follow__text {
  margin: 0;
  max-width: 44ch;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--silver);
}

.page-news .follow__links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.1rem 0 0;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-news .newshead__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 4rem);
  }

  .page-news .digest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--nw-gap);
  }

  .page-news .digest__item:nth-child(1),
  .page-news .digest__item:nth-child(2) {
    border-top-width: 2px;
  }

  .page-news .digest__item:nth-child(odd) {
    padding-right: var(--nw-gap);
  }
}

@media (max-width: 759px) {
  .page-news .newsfilter {
    position: static;
    border-bottom-width: 2px;
  }

  .page-news .newsfilter__inner {
    gap: .5rem;
  }

  .page-news .newsitem {
    grid-template-columns: 2.2rem 1fr;
    column-gap: .7rem;
  }

  .page-news .newsitem__num {
    font-size: 1.1rem;
  }

  .page-news .newsitem__abs {
    max-height: 8rem;
    opacity: 1;
    margin-top: .5rem;
  }

  .page-news .matrix__row {
    grid-template-columns: minmax(6rem, 1.4fr) repeat(6, minmax(3.4rem, 1fr));
    padding: .6rem .6rem;
    min-width: 30rem;
  }

  .page-news .matrix__cell--name {
    font-size: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .newsitem,
  .page-news .newsitem__abs,
  .page-news .railcard {
    transition: none;
  }
}
<<<END>>>




<main id="main-content" class="page-news">

  <nav class="crumbs" aria-label="页面路径">
    <span class="crumbs__item"><a class="crumbs__link" href="/">首页</a></span>
    <span class="crumbs__item">动态与专题</span>
  </nav>

  <header class="newshead">
    <div class="shell newshead__grid">
      <div class="newshead__main">
        <p class="eyebrow">UPDATES / FEATURES</p>
        <h1>球王会体育动态与专题</h1>
        <p class="newshead__lede">每一篇都对应一次真实变化：赛程补录、字段扩展、标签体系演进，或一场内地体育站点横向评测的拆解。按栏目筛一遍，十分钟就能看清最近改了什么、哪些调整会影响你手上的数据。</p>
        <p class="newshead__meta mono">T+48H 更新周期 · 36 篇评测 · 六赛季版本归档</p>
      </div>
      <aside class="newshead__side" aria-label="栏目索引">
        <p class="eyebrow">栏目</p>
        <ol class="branches">
          <li class="branches__item"><span class="branches__num mono">01</span><span class="branches__name">数据更新公告</span></li>
          <li class="branches__item"><span class="branches__num mono">02</span><span class="branches__name">版本迭代说明</span></li>
          <li class="branches__item"><span class="branches__num mono">03</span><span class="branches__name">评测与分析</span></li>
          <li class="branches__item"><span class="branches__num mono">04</span><span class="branches__name">赛季与专题合集</span></li>
        </ol>
      </aside>
    </div>
  </header>

  <section class="section section--paper" id="digest" data-section data-reveal>
    <div class="shell">
      <header class="sechead">
        <p class="eyebrow">01 / 本周期</p>
        <h2>本期更新速览</h2>
        <p class="sechead__note">本周期影响面最大的四条变化，先说结论，再决定要不要往下翻。</p>
      </header>

      <figure class="digest-banner">
        <img src="{zhanqunpic:h:500w:1400}" width="1400" height="500" alt="等距排列的脉冲波形与日历刻度叠加的抽象图形，表现赛事数据的周期节律">
        <figcaption class="digest-banner__cap mono">赛事数据公告栏 · 48 小时同步一轮</figcaption>
      </figure>

      <ol class="digest">
        <li class="digest__item">
          <span class="digest__num mono">01</span>
          <h3 class="digest__title">赛事日历改为整轮同步</h3>
          <p class="digest__desc">赛程调整、比分修正与关键数据补齐从分批推送合并为一轮完成，跨轮次对照赛程时看到的版本更整齐。</p>
        </li>
        <li class="digest__item">
          <span class="digest__num mono">02</span>
          <h3 class="digest__title">旧赛季版本补上了技术统计字段</h3>
          <p class="digest__desc">此前只在当季回填的 32 项指标，现在能直接在归档里查到，做跨赛季对比不用再另找资料。</p>
        </li>
        <li class="digest__item">
          <span class="digest__num mono">03</span>
          <h3 class="digest__title">资源下载新增按赛季定位的入口</h3>
          <p class="digest__desc">42 个标签里补入赛季维度，4,200 余份资料可按赛事、赛季、数据维度三条路径交叉定位。</p>
        </li>
        <li class="digest__item">
          <span class="digest__num mono">04</span>
          <h3 class="digest__title">移动端弱网模式覆盖折叠屏与平板</h3>
          <p class="digest__desc">弱网下自动切低带宽模式，单场比赛数据页在 4G 网络下首屏约 1.2 秒完成加载。</p>
        </li>
      </ol>
    </div>
  </section>

  <div class="newsfilter" id="filter" data-tagfilter data-section>
    <div class="shell newsfilter__inner">
      <div class="newsfilter__group">
        <span class="newsfilter__label mono">栏目</span>
        <button class="tag" type="button" data-tag="数据更新" aria-pressed="false">数据更新</button>
        <button class="tag" type="button" data-tag="版本迭代" aria-pressed="false">版本迭代</button>
        <button class="tag" type="button" data-tag="标签体系" aria-pressed="false">标签体系</button>
        <button class="tag" type="button" data-tag="移动端" aria-pressed="false">移动端</button>
        <button class="tag tag--orange" type="button" data-tag="评测" aria-pressed="false">评测</button>
      </div>
      <div class="newsfilter__group">
        <span class="newsfilter__label mono">赛季</span>
        <button class="tag" type="button" data-tag="赛季中段" aria-pressed="false">赛季中段</button>
        <button class="tag" type="button" data-tag="赛季收官" aria-pressed="false">赛季收官</button>
        <button class="tag" type="button" data-tag="休赛期" aria-pressed="false">休赛期</button>
      </div>
      <div class="newsfilter__group">
        <span class="newsfilter__label mono">专题</span>
        <button class="tag" type="button" data-tag="归档与回溯" aria-pressed="false">归档与回溯</button>
        <button class="tag" type="button" data-tag="观赛体验" aria-pressed="false">观赛体验</button>
        <button class="tag" type="button" data-tag="数据协作" aria-pressed="false">数据协作</button>
      </div>
    </div>
  </div>

  <section class="section section--paper" id="list" data-section>
    <div class="shell">
      <header class="sechead">
        <p class="eyebrow">02 / 更新与版本迭代</p>
        <h2>近期更新与版本迭代列表</h2>
        <p class="sechead__note">数据补录、字段调整、标签体系变动与移动端优化，按发布时间从近到远排列。</p>
      </header>

      <ol class="newslist">
        <li class="newsitem" data-tags="数据更新,赛季中段">
          <span class="newsitem__num mono" aria-hidden="true">01</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">赛事日历更新节奏调整说明</h3>
            <p class="newsitem__abs">赛程调整与比分修正合并为整轮同步，同一轮里的赛程前后版本更一致。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">数据更新</span><span class="tag">赛季中段</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="版本迭代,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">02</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">六赛季版本字段补齐记录</h3>
            <p class="newsitem__abs">收藏赛事记录保留的 6 个赛季版本补上技术统计字段，跨赛季对比时不必另行换算。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">上一版本周期</span><span class="tag">版本迭代</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="标签体系,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">03</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">标签对照体系新增赛季维度</h3>
            <p class="newsitem__abs">42 个标签里补入赛季路径，资料可按赛事、赛季、数据维度三条线定位。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">标签体系</span><span class="tag">数据协作</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="移动端,观赛体验">
          <span class="newsitem__num mono" aria-hidden="true">04</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">移动端弱网模式优化上线</h3>
            <p class="newsitem__abs">弱网环境自动切换低带宽模式，单场比赛数据页首屏约 1.2 秒加载完成。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">上一版本周期</span><span class="tag">移动端</span><span class="tag">观赛体验</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="评测,观赛体验">
          <span class="newsitem__num mono" aria-hidden="true">05</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">评测专栏新增四家站点进入对比矩阵</h3>
            <p class="newsitem__abs">按数据覆盖、更新频率、移动端体验等六个维度重新打分，维度差异比名次更有参考价值。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季中段</span><span class="tag">评测</span><span class="tag">观赛体验</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="数据更新,赛季中段">
          <span class="newsitem__num mono" aria-hidden="true">06</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">技术统计字段扩展说明</h3>
            <p class="newsitem__abs">当季技术统计指标补充至 32 项，球队与球员档案的关联字段同步开放。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">数据更新</span><span class="tag">赛季中段</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="版本迭代,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">07</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">赛季数据包与指标说明同步更新</h3>
            <p class="newsitem__abs">资源库中的赛季数据包、指标说明与对比表模板一并刷新，下载后可直接投入使用。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">上一版本周期</span><span class="tag">版本迭代</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="版本迭代,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">08</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">收藏赛事记录的回溯路径调整</h3>
            <p class="newsitem__abs">旧版本资料按赛季直接回溯查看，入口层级减少两级，找历史比分更快。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季收官</span><span class="tag">版本迭代</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="标签体系,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">09</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">中英文双语标签合并整理进展</h3>
            <p class="newsitem__abs">跨来源资料合并整理时双语标签可直接对应，省掉人工翻译转换的环节。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季中段</span><span class="tag">标签体系</span><span class="tag">数据协作</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="移动端,观赛体验">
          <span class="newsitem__num mono" aria-hidden="true">10</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">折叠屏与平板适配调整记录</h3>
            <p class="newsitem__abs">手机、平板与折叠屏三档断点重新校准，展开态下表格列宽不再被挤压。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">休赛期</span><span class="tag">移动端</span><span class="tag">观赛体验</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="评测,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">11</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">年度数据回顾汇编发布</h3>
            <p class="newsitem__abs">汇总当年赛季覆盖范围、数据维度变化与协作团队贡献，一份文档读完一年。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">休赛期</span><span class="tag">评测</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="数据更新,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">12</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">入库校验流程记录公开</h3>
            <p class="newsitem__abs">字段完整性校验与历史版本交叉比对两道流程的执行记录，随更新公告一并发布。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">数据更新</span><span class="tag">数据协作</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="数据协作,标签体系">
          <span class="newsitem__num mono" aria-hidden="true">13</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">内容协作团队的标签校对说明</h3>
            <p class="newsitem__abs">12 家数据整理团队协作完成赛事归档与标签校对，本轮集中处理跨来源命名差异。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季中段</span><span class="tag">数据协作</span><span class="tag">标签体系</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="评测,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">14</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">评测专栏六维评分方法更新</h3>
            <p class="newsitem__abs">六个评分维度的说明文字重写，每个维度标注更适合哪类人群参考。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季收官</span><span class="tag">评测</span><span class="tag">数据协作</span></p>
          </div>
        </li>
      </ol>

      <p class="newslist__more"><a class="btn btn--paper" href="#collections">转到赛季与专题合集</a></p>
    </div>
  </section>

  <section class="section section--ink" id="reviews" data-section data-reveal>
    <div class="shell">
      <header class="sechead sechead--onink">
        <p class="eyebrow text-cyan">03 / 评测专栏</p>
        <h2>内地体育站点横向评测</h2>
        <p class="sechead__note">累计 36 篇对比与选型分析。下面这张矩阵是最近一期的六维评分结果，看差异比看名次更有用。</p>
      </header>

      <figure class="review-visual">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" loading="lazy" decoding="async" alt="多维度评分矩阵的抽象图示，色阶由青到橙渐变">
        <figcaption class="review-visual__cap mono">六维评分 · 色阶从左至右表示表现由低到高</figcaption>
      </figure>

      <div class="matrix" role="table" aria-label="内地体育站点横向评测六维评分矩阵">
        <div class="matrix__row matrix__row--head" role="row">
          <span class="matrix__cell matrix__cell--name" role="columnheader">站点类型</span>
          <span class="matrix__cell" role="columnheader">数据覆盖</span>
          <span class="matrix__cell" role="columnheader">更新频率</span>
          <span class="matrix__cell" role="columnheader">移动端体验</span>
          <span class="matrix__cell" role="columnheader">历史版本</span>
          <span class="matrix__cell" role="columnheader">导出能力</span>
          <span class="matrix__cell" role="columnheader">上手成本</span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">综合型数据站</span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">社区型观赛站</span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">订阅型数据站</span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">移动优先型应用</span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
        </div>
      </div>

      <ul class="legend">
        <li class="legend__item"><span class="legend__chip"></span>色阶越靠右，该项表现越充分</li>
        <li class="legend__item"><span class="legend__chip legend__chip--cyan"></span>青段：基础可用</li>
        <li class="legend__item"><span class="legend__chip legend__chip--orange"></span>橙段：显著优势</li>
      </ul>

      <div class="grid grid--12 review-notes">
        <div class="col-7">
          <h3 class="review-notes__title">怎么读这张矩阵</h3>
          <p class="review-notes__text">做深度数据研究的人，优先看数据覆盖与历史版本两列；习惯用手机看比赛的，重点看移动端体验与上手成本。同一行里色块分布越不均匀，说明这类站点越偏向某一个固定人群，选之前先想清楚自己主要拿它做什么。</p>
        </div>
        <figure class="col-5 review-mobile">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" loading="lazy" decoding="async" alt="手持设备上显示赛事数据列表的界面示意，画面只保留屏幕与手势">
          <figcaption class="review-mobile__cap mono">移动端体验维度 · 含弱网与折叠屏实测</figcaption>
        </figure>
      </div>

      <p class="review-links">
        <a class="btn btn--ghost" href="/help-center/">看看自己适合哪一类</a>
      </p>
    </div>
  </section>

  <section class="section section--paper" id="collections" data-section data-reveal>
    <div class="shell">
      <header class="sechead">
        <p class="eyebrow">04 / 合集</p>
        <h2>赛季与专题合集</h2>
        <p class="sechead__note">把同一主题下的文章打包，一次读完一个方向上的全部改动。</p>
      </header>
    </div>

    <figure class="collection-banner">
      <img src="{zhanqunpic:h:400w:1600}" width="1600" height="400" loading="lazy" decoding="async" alt="夜场比赛灯光与网格线交织的横向抽象画面，画面中没有人出现">
    </figure>

    <div class="shell">
      <div class="rail">
        <a class="railcard" href="/solutions/">
          <span class="railcard__eyebrow mono">专题 01</span>
          <h3 class="railcard__title">六赛季版本回溯</h3>
          <p class="railcard__desc">收藏记录与字段变化按赛季成组，想找回旧版本资料从这里进最快。</p>
          <span class="railcard__foot mono">归档与回溯</span>
        </a>
        <a class="railcard" href="/help-center/">
          <span class="railcard__eyebrow mono">专题 02</span>
          <h3 class="railcard__title">移动端观赛体验</h3>
          <p class="railcard__desc">弱网模式、折叠屏断点与首屏加载优化，手机和平板上看数据会遇到的问题集中在这里。</p>
          <span class="railcard__foot mono">观赛体验</span>
        </a>
        <a class="railcard" href="/brand/">
          <span class="railcard__eyebrow mono">专题 03</span>
          <h3 class="railcard__title">标签对照与协作</h3>
          <p class="railcard__desc">双语标签、42 个标签维度与 12 家整理团队的协作记录，适合需要合并外部资料的人。</p>
          <span class="railcard__foot mono">数据协作</span>
        </a>
        <a class="railcard" href="/updates/">
          <span class="railcard__eyebrow mono">专题 04</span>
          <h3 class="railcard__title">赛事站点评测合集</h3>
          <p class="railcard__desc">36 篇内地体育站点对比与选型分析，按六维评分矩阵逐期更新。</p>
          <span class="railcard__foot mono">评测</span>
        </a>
        <a class="railcard" href="/solutions/">
          <span class="railcard__eyebrow mono">专题 05</span>
          <h3 class="railcard__title">资源下载分类索引</h3>
          <p class="railcard__desc">4,200 余份资料按赛事、赛季、数据维度三条路径整理，配套指标说明与对比表模板。</p>
          <span class="railcard__foot mono">资源下载</span>
        </a>
      </div>
    </div>
  </section>

  <section class="section section--green" id="follow" data-section>
    <div class="shell">
      <header class="sechead sechead--onink">
        <p class="eyebrow text-cyan">05 / 订阅与归档</p>
        <h2>跟进后续更新与往期归档</h2>
      </header>

      <div class="grid grid--12 follow">
        <div class="col-6 follow__block">
          <h3 class="follow__title">跟着栏目走，不用反复回来看</h3>
          <p class="follow__text">把常用的赛事加进收藏，会员后台会在每个更新周期结束后给出变更提示，赛程改动、比分修正与字段补齐都会列出来。想固定跟进某个栏目，写一封邮件到客服邮箱说明栏目名，我们会把你排进对应栏目的通知名单。</p>
          <p class="follow__links"><a class="btn btn--primary" href="/contact/">联系客服订阅</a><a class="btn btn--ghost" href="/solutions/">了解会员方案</a></p>
        </div>
        <div class="col-6 follow__block follow__block--alt">
          <h3 class="follow__title">往期归档怎么找</h3>
          <p class="follow__text">更新公告按周期成组保存，版本迭代说明与对应的赛季数据包放在一起。资源库支持按赛事、赛季、数据维度三种路径定位到 4,200 余份资料，赛季数据包、指标说明与对比表模板都在其中。机构客户如果想把内容接进自己的流程，可以另外申请接口读取方式。</p>
          <p class="follow__links"><a class="btn btn--paper" href="/instructions/">查看使用说明</a></p>
        </div>
      </div>
    </div>
  </section>

</main>

/* ===== 动态与专题 / page-news ===== */

.page-news {
  --nw-paper-line: rgba(36, 28, 24, .22);
  --nw-gap: clamp(1.2rem, 3vw, 2.4rem);
  --nw-railcard-w: min(80vw, 19rem);
}

/* ---------- 面包屑 ---------- */
.page-news > .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.2rem var(--gutter) 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--gray);
}

.page-news > .crumbs .crumbs__link {
  color: var(--cyan);
  text-decoration: none;
}

.page-news > .crumbs .crumbs__link:hover,
.page-news > .crumbs .crumbs__link:focus-visible {
  text-decoration: underline;
}

/* ---------- 首屏 ---------- */
.page-news .newshead {
  padding: clamp(1.6rem, 4vw, 3.2rem) 0 clamp(2rem, 5vw, 3.6rem);
  border-bottom: 1px solid var(--line);
}

.page-news .newshead__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}

.page-news .newshead__main h1 {
  margin: .5rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.02em;
}

.page-news .newshead__lede {
  max-width: 40ch;
  margin: 1.1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--silver);
}

.page-news .newshead__meta {
  margin: 1.2rem 0 0;
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--cyan);
}

.page-news .newshead__side {
  padding-top: .4rem;
  border-top: 2px solid var(--line-strong);
}

.page-news .branches {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .1rem;
}

.page-news .branches__item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  gap: .6rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}

.page-news .branches__num {
  font-size: .72rem;
  color: var(--orange);
  letter-spacing: .06em;
}

/* ---------- 区块标题通用 ---------- */
.page-news .sechead {
  margin-bottom: var(--nw-gap);
}

.page-news .sechead h2 {
  margin: .45rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}

.page-news .sechead__note {
  max-width: 46ch;
  margin: .8rem 0 0;
  font-size: .94rem;
  line-height: 1.8;
  color: rgba(36, 28, 24, .68);
}

.page-news .sechead--onink .sechead__note {
  color: var(--gray);
}

/* ---------- 速览 ---------- */
.page-news .digest-banner {
  margin: 0 0 var(--nw-gap);
  border: 2px solid var(--brown);
  background: var(--paper-hi);
  box-shadow: 8px 8px 0 rgba(36, 28, 24, .14);
}

.page-news .digest-banner img {
  display: block;
  width: 100%;
  height: clamp(150px, 26vw, 300px);
  object-fit: cover;
}

.page-news .digest-banner__cap {
  display: block;
  padding: .6rem .9rem;
  border-top: 1px solid var(--nw-paper-line);
  font-size: .7rem;
  letter-spacing: .08em;
  color: rgba(36, 28, 24, .6);
}

.page-news .digest {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.page-news .digest__item {
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  column-gap: 1rem;
  padding: 1.35rem 0;
  border-top: 2px solid var(--nw-paper-line);
}

.page-news .digest__num {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rust);
  line-height: 1.5;
}

.page-news .digest__title {
  grid-column: 2;
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.16rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--brown);
}

.page-news .digest__desc {
  grid-column: 2;
  max-width: 52ch;
  margin: .5rem 0 0;
  font-size: .9rem;
  line-height: 1.8;
  color: rgba(36, 28, 24, .72);
}

/* ---------- 筛选栏 ---------- */
.page-news .newsfilter {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 3px solid var(--cyan);
}

.page-news .newsfilter__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.6rem;
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.page-news .newsfilter__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.page-news .newsfilter__label {
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--gray);
  margin-right: .15rem;
}

.page-news .newsfilter .tag {
  cursor: pointer;
}

/* ---------- 更新列表 ---------- */
.page-news .newslist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .newsitem {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: .9rem;
  padding: 1.3rem 0;
  border-top: 2px solid var(--nw-paper-line);
  transition: background-color var(--dur) var(--ease);
}

.page-news .newsitem:last-child {
  border-bottom: 2px solid var(--nw-paper-line);
}

.page-news .newsitem:hover {
  background: rgba(255, 106, 31, .07);
}

.page-news .newsitem[hidden] {
  display: none;
}

.page-news .newsitem__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--brown);
  letter-spacing: -.02em;
}

.page-news .newsitem__title {
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.14rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--brown);
}

.page-news .newsitem__abs {
  max-width: 54ch;
  margin: 0;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(36, 28, 24, .7);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}

.page-news .newsitem:hover .newsitem__abs,
.page-news .newsitem:focus-within .newsitem__abs {
  max-height: 7rem;
  opacity: 1;
  margin-top: .5rem;
}

.page-news .newsitem__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: .65rem 0 0;
}

.page-news .newsitem__time {
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--rust);
  padding-right: .45rem;
  border-right: 1px solid var(--nw-paper-line);
}

.page-news .newslist__more {
  margin: var(--nw-gap) 0 0;
}

/* ---------- 评测专栏 ---------- */
.page-news .review-visual {
  margin: 0 0 var(--nw-gap);
  border: 2px solid var(--line-strong);
}

.page-news .review-visual img {
  display: block;
  width: 100%;
  height: clamp(160px, 26vw, 300px);
  object-fit: cover;
}

.page-news .review-visual__cap {
  display: block;
  padding: .55rem .9rem;
  border-top: 1px solid var(--line);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--gray);
}

.page-news .matrix {
  border: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-news .matrix__row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 1.7fr) repeat(6, minmax(4.6rem, 1fr));
  gap: .35rem .5rem;
  align-items: center;
  padding: .7rem .9rem;
  min-width: 40rem;
  border-bottom: 1px solid var(--line);
}

.page-news .matrix__row:last-child {
  border-bottom: 0;
}

.page-news .matrix__row--head {
  background: var(--ink-green);
}

.page-news .matrix__row:not(.matrix__row--head):hover {
  background: rgba(63, 224, 200, .07);
}

.page-news .matrix__cell {
  font-size: .78rem;
  color: var(--silver);
}

.page-news .matrix__row--head .matrix__cell {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--cyan);
}

.page-news .matrix__cell--name {
  font-size: .88rem;
  color: var(--paper);
  font-weight: 700;
}

.page-news .score {
  display: block;
  position: relative;
  height: .62rem;
  background: rgba(195, 201, 198, .16);
}

.page-news .score::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) / 5 * 100%);
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.page-news .score--1 { --v: 1; }
.page-news .score--2 { --v: 2; }
.page-news .score--3 { --v: 3; }
.page-news .score--4 { --v: 4; }
.page-news .score--5 { --v: 5; }

.page-news .legend {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .legend__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  color: var(--gray);
}

.page-news .legend__chip {
  display: inline-block;
  width: 1.4rem;
  height: .5rem;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.page-news .legend__chip--cyan {
  background: var(--cyan);
}

.page-news .legend__chip--orange {
  background: var(--orange);
}

.page-news .review-notes {
  margin-top: var(--nw-gap);
  row-gap: var(--nw-gap);
}

.page-news .review-notes__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}

.page-news .review-notes__text {
  margin: 0;
  max-width: 42ch;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--gray);
}

.page-news .review-mobile {
  margin: 0;
  border: 1px solid var(--line);
}

.page-news .review-mobile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-news .review-mobile__cap {
  display: block;
  padding: .5rem .8rem;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  letter-spacing: .07em;
  color: var(--gray);
}

.page-news .review-links {
  margin: var(--nw-gap) 0 0;
}

/* ---------- 专题合集 ---------- */
.page-news .collection-banner {
  margin: 0 0 var(--nw-gap);
}

.page-news .collection-banner img {
  display: block;
  width: 100%;
  height: clamp(120px, 18vw, 200px);
  object-fit: cover;
  border-top: 2px solid var(--brown);
  border-bottom: 2px solid var(--brown);
}

.page-news .rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: .2rem .2rem 1.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-news .railcard {
  flex: 0 0 auto;
  width: var(--nw-railcard-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.15rem 1.1rem 1rem;
  background: var(--paper-hi);
  border: 2px solid var(--brown);
  box-shadow: 5px 5px 0 rgba(36, 28, 24, .16);
  text-decoration: none;
  color: var(--brown);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-news .railcard:nth-child(2n) {
  width: min(84vw, 22rem);
}

.page-news .railcard:hover,
.page-news .railcard:focus-visible {
  transform: translateY(-4px);
  box-shadow: 7px 9px 0 rgba(36, 28, 24, .2);
}

.page-news .railcard__eyebrow {
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--rust);
}

.page-news .railcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.page-news .railcard__desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: .87rem;
  line-height: 1.75;
  color: rgba(36, 28, 24, .72);
}

.page-news .railcard__foot {
  align-self: flex-start;
  padding: .2rem .55rem;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--paper);
  background: var(--ink-green);
}

/* ---------- 订阅与归档 ---------- */
.page-news .follow {
  row-gap: var(--nw-gap);
}

.page-news .follow__block {
  padding: 1.3rem 1.2rem;
  border: 2px solid var(--line-strong);
  background: rgba(13, 18, 16, .45);
}

.page-news .follow__block--alt {
  border-color: rgba(255, 106, 31, .5);
}

.page-news .follow__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.24rem;
  letter-spacing: -.01em;
}

.page-news .follow__text {
  margin: 0;
  max-width: 44ch;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--silver);
}

.page-news .follow__links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.1rem 0 0;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-news .newshead__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 4rem);
  }

  .page-news .digest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--nw-gap);
  }

  .page-news .digest__item:nth-child(odd) {
    padding-right: var(--nw-gap);
  }
}

@media (max-width: 759px) {
  .page-news .newsfilter {
    position: static;
    border-bottom-width: 2px;
  }

  .page-news .newsfilter__inner {
    gap: .5rem;
  }

  .page-news .newsitem {
    grid-template-columns: 2.2rem 1fr;
    column-gap: .7rem;
  }

  .page-news .newsitem__num {
    font-size: 1.1rem;
  }

  .page-news .newsitem__abs {
    max-height: 8rem;
    opacity: 1;
    margin-top: .5rem;
  }

  .page-news .matrix__row {
    grid-template-columns: minmax(6rem, 1.4fr) repeat(6, minmax(3.4rem, 1fr));
    padding: .6rem .6rem;
    min-width: 30rem;
  }

  .page-news .matrix__cell--name {
    font-size: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .newsitem,
  .page-news .newsitem__abs,
  .page-news .railcard {
    transition: none;
  }
}
<<<END>>>


<main id="main-content" class="page-news">

  <nav class="crumbs" aria-label="页面路径">
    <span class="crumbs__item"><a class="crumbs__link" href="/">首页</a></span>
    <span class="crumbs__item">动态与专题</span>
  </nav>

  <header class="newshead">
    <div class="shell newshead__grid">
      <div class="newshead__main">
        <p class="eyebrow">UPDATES / FEATURES</p>
        <h1>球王会体育动态与专题</h1>
        <p class="newshead__lede">每一篇都对应一次真实变化：赛程补录、字段扩展、标签体系演进，或一场内地体育站点横向评测的拆解。按栏目筛一遍，十分钟就能看清最近改了什么、哪些调整会影响你手上的数据。</p>
        <p class="newshead__meta mono">T+48H 更新周期 · 36 篇评测 · 六赛季版本归档</p>
      </div>
      <aside class="newshead__side" aria-label="栏目索引">
        <p class="eyebrow">栏目</p>
        <ol class="branches">
          <li class="branches__item"><span class="branches__num mono">01</span><span class="branches__name">数据更新公告</span></li>
          <li class="branches__item"><span class="branches__num mono">02</span><span class="branches__name">版本迭代说明</span></li>
          <li class="branches__item"><span class="branches__num mono">03</span><span class="branches__name">评测与分析</span></li>
          <li class="branches__item"><span class="branches__num mono">04</span><span class="branches__name">赛季与专题合集</span></li>
        </ol>
      </aside>
    </div>
  </header>

  <section class="section section--paper" id="digest" data-section data-reveal>
    <div class="shell">
      <header class="sechead">
        <p class="eyebrow">01 / 本周期</p>
        <h2>本期更新速览</h2>
        <p class="sechead__note">本周期影响面最大的四条变化，先说结论，再决定要不要往下翻。</p>
      </header>

      <figure class="digest-banner">
        <img src="{zhanqunpic:h:500w:1400}" width="1400" height="500" alt="等距排列的脉冲波形与日历刻度叠加的抽象图形，表现赛事数据的周期节律">
        <figcaption class="digest-banner__cap mono">赛事数据公告栏 · 48 小时同步一轮</figcaption>
      </figure>

      <ol class="digest">
        <li class="digest__item">
          <span class="digest__num mono">01</span>
          <h3 class="digest__title">赛事日历改为整轮同步</h3>
          <p class="digest__desc">赛程调整、比分修正与关键数据补齐从分批推送合并为一轮完成，跨轮次对照赛程时看到的版本更整齐。</p>
        </li>
        <li class="digest__item">
          <span class="digest__num mono">02</span>
          <h3 class="digest__title">旧赛季版本补上了技术统计字段</h3>
          <p class="digest__desc">此前只在当季回填的 32 项指标，现在能直接在归档里查到，做跨赛季对比不用再另找资料。</p>
        </li>
        <li class="digest__item">
          <span class="digest__num mono">03</span>
          <h3 class="digest__title">资源下载新增按赛季定位的入口</h3>
          <p class="digest__desc">42 个标签里补入赛季维度，4,200 余份资料可按赛事、赛季、数据维度三条路径交叉定位。</p>
        </li>
        <li class="digest__item">
          <span class="digest__num mono">04</span>
          <h3 class="digest__title">移动端弱网模式覆盖折叠屏与平板</h3>
          <p class="digest__desc">弱网下自动切低带宽模式，单场比赛数据页在 4G 网络下首屏约 1.2 秒完成加载。</p>
        </li>
      </ol>
    </div>
  </section>

  <div class="newsfilter" id="filter" data-tagfilter data-section>
    <div class="shell newsfilter__inner">
      <div class="newsfilter__group">
        <span class="newsfilter__label mono">栏目</span>
        <button class="tag" type="button" data-tag="数据更新" aria-pressed="false">数据更新</button>
        <button class="tag" type="button" data-tag="版本迭代" aria-pressed="false">版本迭代</button>
        <button class="tag" type="button" data-tag="标签体系" aria-pressed="false">标签体系</button>
        <button class="tag" type="button" data-tag="移动端" aria-pressed="false">移动端</button>
        <button class="tag tag--orange" type="button" data-tag="评测" aria-pressed="false">评测</button>
      </div>
      <div class="newsfilter__group">
        <span class="newsfilter__label mono">赛季</span>
        <button class="tag" type="button" data-tag="赛季中段" aria-pressed="false">赛季中段</button>
        <button class="tag" type="button" data-tag="赛季收官" aria-pressed="false">赛季收官</button>
        <button class="tag" type="button" data-tag="休赛期" aria-pressed="false">休赛期</button>
      </div>
      <div class="newsfilter__group">
        <span class="newsfilter__label mono">专题</span>
        <button class="tag" type="button" data-tag="归档与回溯" aria-pressed="false">归档与回溯</button>
        <button class="tag" type="button" data-tag="观赛体验" aria-pressed="false">观赛体验</button>
        <button class="tag" type="button" data-tag="数据协作" aria-pressed="false">数据协作</button>
      </div>
    </div>
  </div>

  <section class="section section--paper" id="list" data-section>
    <div class="shell">
      <header class="sechead">
        <p class="eyebrow">02 / 更新与版本迭代</p>
        <h2>近期更新与版本迭代列表</h2>
        <p class="sechead__note">数据补录、字段调整、标签体系变动与移动端优化，按发布时间从近到远排列。</p>
      </header>

      <ol class="newslist">
        <li class="newsitem" data-tags="数据更新,赛季中段">
          <span class="newsitem__num mono" aria-hidden="true">01</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">赛事日历更新节奏调整说明</h3>
            <p class="newsitem__abs">赛程调整与比分修正合并为整轮同步，同一轮里的赛程前后版本更一致。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">数据更新</span><span class="tag">赛季中段</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="版本迭代,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">02</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">六赛季版本字段补齐记录</h3>
            <p class="newsitem__abs">收藏赛事记录保留的 6 个赛季版本补上技术统计字段，跨赛季对比时不必另行换算。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">上一版本周期</span><span class="tag">版本迭代</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="标签体系,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">03</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">标签对照体系新增赛季维度</h3>
            <p class="newsitem__abs">42 个标签里补入赛季路径，资料可按赛事、赛季、数据维度三条线定位。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">标签体系</span><span class="tag">数据协作</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="移动端,观赛体验">
          <span class="newsitem__num mono" aria-hidden="true">04</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">移动端弱网模式优化上线</h3>
            <p class="newsitem__abs">弱网环境自动切换低带宽模式，单场比赛数据页首屏约 1.2 秒加载完成。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">上一版本周期</span><span class="tag">移动端</span><span class="tag">观赛体验</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="评测,观赛体验">
          <span class="newsitem__num mono" aria-hidden="true">05</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">评测专栏新增四家站点进入对比矩阵</h3>
            <p class="newsitem__abs">按数据覆盖、更新频率、移动端体验等六个维度重新打分，维度差异比名次更有参考价值。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季中段</span><span class="tag">评测</span><span class="tag">观赛体验</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="数据更新,赛季中段">
          <span class="newsitem__num mono" aria-hidden="true">06</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">技术统计字段扩展说明</h3>
            <p class="newsitem__abs">当季技术统计指标补充至 32 项，球队与球员档案的关联字段同步开放。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">数据更新</span><span class="tag">赛季中段</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="版本迭代,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">07</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">赛季数据包与指标说明同步更新</h3>
            <p class="newsitem__abs">资源库中的赛季数据包、指标说明与对比表模板一并刷新，下载后可直接投入使用。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">上一版本周期</span><span class="tag">版本迭代</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="版本迭代,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">08</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">收藏赛事记录的回溯路径调整</h3>
            <p class="newsitem__abs">旧版本资料按赛季直接回溯查看，入口层级减少两级，找历史比分更快。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季收官</span><span class="tag">版本迭代</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="标签体系,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">09</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">中英文双语标签合并整理进展</h3>
            <p class="newsitem__abs">跨来源资料合并整理时双语标签可直接对应，省掉人工翻译转换的环节。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季中段</span><span class="tag">标签体系</span><span class="tag">数据协作</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="移动端,观赛体验">
          <span class="newsitem__num mono" aria-hidden="true">10</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">折叠屏与平板适配调整记录</h3>
            <p class="newsitem__abs">手机、平板与折叠屏三档断点重新校准，展开态下表格列宽不再被挤压。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">休赛期</span><span class="tag">移动端</span><span class="tag">观赛体验</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="评测,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">11</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">年度数据回顾汇编发布</h3>
            <p class="newsitem__abs">汇总当年赛季覆盖范围、数据维度变化与协作团队贡献，一份文档读完一年。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">休赛期</span><span class="tag">评测</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="数据更新,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">12</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">入库校验流程记录公开</h3>
            <p class="newsitem__abs">字段完整性校验与历史版本交叉比对两道流程的执行记录，随更新公告一并发布。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">数据更新</span><span class="tag">数据协作</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="数据协作,标签体系">
          <span class="newsitem__num mono" aria-hidden="true">13</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">内容协作团队的标签校对说明</h3>
            <p class="newsitem__abs">12 家数据整理团队协作完成赛事归档与标签校对，本轮集中处理跨来源命名差异。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季中段</span><span class="tag">数据协作</span><span class="tag">标签体系</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="评测,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">14</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">评测专栏六维评分方法更新</h3>
            <p class="newsitem__abs">六个评分维度的说明文字重写，每个维度标注更适合哪类人群参考。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季收官</span><span class="tag">评测</span><span class="tag">数据协作</span></p>
          </div>
        </li>
      </ol>

      <p class="newslist__more"><a class="btn btn--paper" href="#collections">转到赛季与专题合集</a></p>
    </div>
  </section>

  <section class="section section--ink" id="reviews" data-section data-reveal>
    <div class="shell">
      <header class="sechead sechead--onink">
        <p class="eyebrow text-cyan">03 / 评测专栏</p>
        <h2>内地体育站点横向评测</h2>
        <p class="sechead__note">累计 36 篇对比与选型分析。下面这张矩阵是最近一期的六维评分结果，看差异比看名次更有用。</p>
      </header>

      <figure class="review-visual">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" loading="lazy" decoding="async" alt="多维度评分矩阵的抽象图示，色阶由青到橙渐变">
        <figcaption class="review-visual__cap mono">六维评分 · 色阶从左至右表示表现由低到高</figcaption>
      </figure>

      <div class="matrix" role="table" aria-label="内地体育站点横向评测六维评分矩阵">
        <div class="matrix__row matrix__row--head" role="row">
          <span class="matrix__cell matrix__cell--name" role="columnheader">站点类型</span>
          <span class="matrix__cell" role="columnheader">数据覆盖</span>
          <span class="matrix__cell" role="columnheader">更新频率</span>
          <span class="matrix__cell" role="columnheader">移动端体验</span>
          <span class="matrix__cell" role="columnheader">历史版本</span>
          <span class="matrix__cell" role="columnheader">导出能力</span>
          <span class="matrix__cell" role="columnheader">上手成本</span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">综合型数据站</span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">社区型观赛站</span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">订阅型数据站</span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">移动优先型应用</span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
        </div>
      </div>

      <ul class="legend">
        <li class="legend__item"><span class="legend__chip"></span>色阶越靠右，该项表现越充分</li>
        <li class="legend__item"><span class="legend__chip legend__chip--cyan"></span>青段：基础可用</li>
        <li class="legend__item"><span class="legend__chip legend__chip--orange"></span>橙段：显著优势</li>
      </ul>

      <div class="grid grid--12 review-notes">
        <div class="col-7">
          <h3 class="review-notes__title">怎么读这张矩阵</h3>
          <p class="review-notes__text">做深度数据研究的人，优先看数据覆盖与历史版本两列；习惯用手机看比赛的，重点看移动端体验与上手成本。同一行里色块分布越不均匀，说明这类站点越偏向某一个固定人群，选之前先想清楚自己主要拿它做什么。</p>
        </div>
        <figure class="col-5 review-mobile">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" loading="lazy" decoding="async" alt="手持设备上显示赛事数据列表的界面示意，画面只保留屏幕与手势">
          <figcaption class="review-mobile__cap mono">移动端体验维度 · 含弱网与折叠屏实测</figcaption>
        </figure>
      </div>

      <p class="review-links">
        <a class="btn btn--ghost" href="/help-center/">看看自己适合哪一类</a>
      </p>
    </div>
  </section>

  <section class="section section--paper" id="collections" data-section data-reveal>
    <div class="shell">
      <header class="sechead">
        <p class="eyebrow">04 / 合集</p>
        <h2>赛季与专题合集</h2>
        <p class="sechead__note">把同一主题下的文章打包，一次读完一个方向上的全部改动。</p>
      </header>
    </div>

    <figure class="collection-banner">
      <img src="{zhanqunpic:h:400w:1600}" width="1600" height="400" loading="lazy" decoding="async" alt="夜场比赛灯光与网格线交织的横向抽象画面，画面中没有人出现">
    </figure>

    <div class="shell">
      <div class="rail">
        <a class="railcard" href="/solutions/">
          <span class="railcard__eyebrow mono">专题 01</span>
          <h3 class="railcard__title">六赛季版本回溯</h3>
          <p class="railcard__desc">收藏记录与字段变化按赛季成组，想找回旧版本资料从这里进最快。</p>
          <span class="railcard__foot mono">归档与回溯</span>
        </a>
        <a class="railcard" href="/help-center/">
          <span class="railcard__eyebrow mono">专题 02</span>
          <h3 class="railcard__title">移动端观赛体验</h3>
          <p class="railcard__desc">弱网模式、折叠屏断点与首屏加载优化，手机和平板上看数据会遇到的问题集中在这里。</p>
          <span class="railcard__foot mono">观赛体验</span>
        </a>
        <a class="railcard" href="/brand/">
          <span class="railcard__eyebrow mono">专题 03</span>
          <h3 class="railcard__title">标签对照与协作</h3>
          <p class="railcard__desc">双语标签、42 个标签维度与 12 家整理团队的协作记录，适合需要合并外部资料的人。</p>
          <span class="railcard__foot mono">数据协作</span>
        </a>
        <a class="railcard" href="/updates/">
          <span class="railcard__eyebrow mono">专题 04</span>
          <h3 class="railcard__title">赛事站点评测合集</h3>
          <p class="railcard__desc">36 篇内地体育站点对比与选型分析，按六维评分矩阵逐期更新。</p>
          <span class="railcard__foot mono">评测</span>
        </a>
        <a class="railcard" href="/solutions/">
          <span class="railcard__eyebrow mono">专题 05</span>
          <h3 class="railcard__title">资源下载分类索引</h3>
          <p class="railcard__desc">4,200 余份资料按赛事、赛季、数据维度三条路径整理，配套指标说明与对比表模板。</p>
          <span class="railcard__foot mono">资源下载</span>
        </a>
      </div>
    </div>
  </section>

  <section class="section section--green" id="follow" data-section>
    <div class="shell">
      <header class="sechead sechead--onink">
        <p class="eyebrow text-cyan">05 / 订阅与归档</p>
        <h2>跟进后续更新与往期归档</h2>
      </header>

      <div class="grid grid--12 follow">
        <div class="col-6 follow__block">
          <h3 class="follow__title">跟着栏目走，不用反复回来看</h3>
          <p class="follow__text">把常用的赛事加进收藏，会员后台会在每个更新周期结束后给出变更提示，赛程改动、比分修正与字段补齐都会列出来。想固定跟进某个栏目，写一封邮件到客服邮箱说明栏目名，我们会把你排进对应栏目的通知名单。</p>
          <p class="follow__links"><a class="btn btn--primary" href="/contact/">联系客服订阅</a><a class="btn btn--ghost" href="/solutions/">了解会员方案</a></p>
        </div>
        <div class="col-6 follow__block follow__block--alt">
          <h3 class="follow__title">往期归档怎么找</h3>
          <p class="follow__text">更新公告按周期成组保存，版本迭代说明与对应的赛季数据包放在一起。资源库支持按赛事、赛季、数据维度三种路径定位到 4,200 余份资料，赛季数据包、指标说明与对比表模板都在其中。机构客户如果想把内容接进自己的流程，可以另外申请接口读取方式。</p>
          <p class="follow__links"><a class="btn btn--paper" href="/instructions/">查看使用说明</a></p>
        </div>
      </div>
    </div>
  </section>

</main>

/* ===== 动态与专题 / page-news ===== */

.page-news {
  --nw-paper-line: rgba(36, 28, 24, .22);
  --nw-gap: clamp(1.2rem, 3vw, 2.4rem);
  --nw-railcard-w: min(80vw, 19rem);
}

/* ---------- 面包屑 ---------- */
.page-news > .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.2rem var(--gutter) 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--gray);
}

.page-news > .crumbs .crumbs__link {
  color: var(--cyan);
  text-decoration: none;
}

.page-news > .crumbs .crumbs__link:hover,
.page-news > .crumbs .crumbs__link:focus-visible {
  text-decoration: underline;
}

/* ---------- 首屏 ---------- */
.page-news .newshead {
  padding: clamp(1.6rem, 4vw, 3.2rem) 0 clamp(2rem, 5vw, 3.6rem);
  border-bottom: 1px solid var(--line);
}

.page-news .newshead__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}

.page-news .newshead__main h1 {
  margin: .5rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.02em;
}

.page-news .newshead__lede {
  max-width: 40ch;
  margin: 1.1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--silver);
}

.page-news .newshead__meta {
  margin: 1.2rem 0 0;
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--cyan);
}

.page-news .newshead__side {
  padding-top: .4rem;
  border-top: 2px solid var(--line-strong);
}

.page-news .branches {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .1rem;
}

.page-news .branches__item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  gap: .6rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}

.page-news .branches__num {
  font-size: .72rem;
  color: var(--orange);
  letter-spacing: .06em;
}

/* ---------- 区块标题通用 ---------- */
.page-news .sechead {
  margin-bottom: var(--nw-gap);
}

.page-news .sechead h2 {
  margin: .45rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}

.page-news .sechead__note {
  max-width: 46ch;
  margin: .8rem 0 0;
  font-size: .94rem;
  line-height: 1.8;
  color: rgba(36, 28, 24, .68);
}

.page-news .sechead--onink .sechead__note {
  color: var(--gray);
}

/* ---------- 速览 ---------- */
.page-news .digest-banner {
  margin: 0 0 var(--nw-gap);
  border: 2px solid var(--brown);
  background: var(--paper-hi);
  box-shadow: 8px 8px 0 rgba(36, 28, 24, .14);
}

.page-news .digest-banner img {
  display: block;
  width: 100%;
  height: clamp(150px, 26vw, 300px);
  object-fit: cover;
}

.page-news .digest-banner__cap {
  display: block;
  padding: .6rem .9rem;
  border-top: 1px solid var(--nw-paper-line);
  font-size: .7rem;
  letter-spacing: .08em;
  color: rgba(36, 28, 24, .6);
}

.page-news .digest {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.page-news .digest__item {
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  column-gap: 1rem;
  padding: 1.35rem 0;
  border-top: 2px solid var(--nw-paper-line);
}

.page-news .digest__num {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rust);
  line-height: 1.5;
}

.page-news .digest__title {
  grid-column: 2;
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.16rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--brown);
}

.page-news .digest__desc {
  grid-column: 2;
  max-width: 52ch;
  margin: .5rem 0 0;
  font-size: .9rem;
  line-height: 1.8;
  color: rgba(36, 28, 24, .72);
}

/* ---------- 筛选栏 ---------- */
.page-news .newsfilter {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 3px solid var(--cyan);
}

.page-news .newsfilter__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.6rem;
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.page-news .newsfilter__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.page-news .newsfilter__label {
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--gray);
  margin-right: .15rem;
}

.page-news .newsfilter .tag {
  cursor: pointer;
}

/* ---------- 更新列表 ---------- */
.page-news .newslist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .newsitem {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: .9rem;
  padding: 1.3rem 0;
  border-top: 2px solid var(--nw-paper-line);
  transition: background-color var(--dur) var(--ease);
}

.page-news .newsitem:last-child {
  border-bottom: 2px solid var(--nw-paper-line);
}

.page-news .newsitem:hover {
  background: rgba(255, 106, 31, .07);
}

.page-news .newsitem[hidden] {
  display: none;
}

.page-news .newsitem__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--brown);
  letter-spacing: -.02em;
}

.page-news .newsitem__title {
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.14rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--brown);
}

.page-news .newsitem__abs {
  max-width: 54ch;
  margin: 0;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(36, 28, 24, .7);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}

.page-news .newsitem:hover .newsitem__abs,
.page-news .newsitem:focus-within .newsitem__abs {
  max-height: 7rem;
  opacity: 1;
  margin-top: .5rem;
}

.page-news .newsitem__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: .65rem 0 0;
}

.page-news .newsitem__time {
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--rust);
  padding-right: .45rem;
  border-right: 1px solid var(--nw-paper-line);
}

.page-news .newslist__more {
  margin: var(--nw-gap) 0 0;
}

/* ---------- 评测专栏 ---------- */
.page-news .review-visual {
  margin: 0 0 var(--nw-gap);
  border: 2px solid var(--line-strong);
}

.page-news .review-visual img {
  display: block;
  width: 100%;
  height: clamp(160px, 26vw, 300px);
  object-fit: cover;
}

.page-news .review-visual__cap {
  display: block;
  padding: .55rem .9rem;
  border-top: 1px solid var(--line);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--gray);
}

.page-news .matrix {
  border: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-news .matrix__row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 1.7fr) repeat(6, minmax(4.6rem, 1fr));
  gap: .35rem .5rem;
  align-items: center;
  padding: .7rem .9rem;
  min-width: 40rem;
  border-bottom: 1px solid var(--line);
}

.page-news .matrix__row:last-child {
  border-bottom: 0;
}

.page-news .matrix__row--head {
  background: var(--ink-green);
}

.page-news .matrix__row:not(.matrix__row--head):hover {
  background: rgba(63, 224, 200, .07);
}

.page-news .matrix__cell {
  font-size: .78rem;
  color: var(--silver);
}

.page-news .matrix__row--head .matrix__cell {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--cyan);
}

.page-news .matrix__cell--name {
  font-size: .88rem;
  color: var(--paper);
  font-weight: 700;
}

.page-news .score {
  display: block;
  position: relative;
  height: .62rem;
  background: rgba(195, 201, 198, .16);
}

.page-news .score::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) / 5 * 100%);
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.page-news .score--1 { --v: 1; }
.page-news .score--2 { --v: 2; }
.page-news .score--3 { --v: 3; }
.page-news .score--4 { --v: 4; }
.page-news .score--5 { --v: 5; }

.page-news .legend {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .legend__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  color: var(--gray);
}

.page-news .legend__chip {
  display: inline-block;
  width: 1.4rem;
  height: .5rem;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.page-news .legend__chip--cyan {
  background: var(--cyan);
}

.page-news .legend__chip--orange {
  background: var(--orange);
}

.page-news .review-notes {
  margin-top: var(--nw-gap);
  row-gap: var(--nw-gap);
}

.page-news .review-notes__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}

.page-news .review-notes__text {
  margin: 0;
  max-width: 42ch;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--gray);
}

.page-news .review-mobile {
  margin: 0;
  border: 1px solid var(--line);
}

.page-news .review-mobile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-news .review-mobile__cap {
  display: block;
  padding: .5rem .8rem;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  letter-spacing: .07em;
  color: var(--gray);
}

.page-news .review-links {
  margin: var(--nw-gap) 0 0;
}

/* ---------- 专题合集 ---------- */
.page-news .collection-banner {
  margin: 0 0 var(--nw-gap);
}

.page-news .collection-banner img {
  display: block;
  width: 100%;
  height: clamp(120px, 18vw, 200px);
  object-fit: cover;
  border-top: 2px solid var(--brown);
  border-bottom: 2px solid var(--brown);
}

.page-news .rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: .2rem .2rem 1.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-news .railcard {
  flex: 0 0 auto;
  width: var(--nw-railcard-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.15rem 1.1rem 1rem;
  background: var(--paper-hi);
  border: 2px solid var(--brown);
  box-shadow: 5px 5px 0 rgba(36, 28, 24, .16);
  text-decoration: none;
  color: var(--brown);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-news .railcard:nth-child(2n) {
  width: min(84vw, 22rem);
}

.page-news .railcard:hover,
.page-news .railcard:focus-visible {
  transform: translateY(-4px);
  box-shadow: 7px 9px 0 rgba(36, 28, 24, .2);
}

.page-news .railcard__eyebrow {
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--rust);
}

.page-news .railcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.page-news .railcard__desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: .87rem;
  line-height: 1.75;
  color: rgba(36, 28, 24, .72);
}

.page-news .railcard__foot {
  align-self: flex-start;
  padding: .2rem .55rem;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--paper);
  background: var(--ink-green);
}

/* ---------- 订阅与归档 ---------- */
.page-news .follow {
  row-gap: var(--nw-gap);
}

.page-news .follow__block {
  padding: 1.3rem 1.2rem;
  border: 2px solid var(--line-strong);
  background: rgba(13, 18, 16, .45);
}

.page-news .follow__block--alt {
  border-color: rgba(255, 106, 31, .5);
}

.page-news .follow__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.24rem;
  letter-spacing: -.01em;
}

.page-news .follow__text {
  margin: 0;
  max-width: 44ch;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--silver);
}

.page-news .follow__links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.1rem 0 0;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-news .newshead__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 4rem);
  }

  .page-news .digest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--nw-gap);
  }

  .page-news .digest__item:nth-child(odd) {
    padding-right: var(--nw-gap);
  }
}

@media (max-width: 759px) {
  .page-news .newsfilter {
    position: static;
    border-bottom-width: 2px;
  }

  .page-news .newsfilter__inner {
    gap: .5rem;
  }

  .page-news .newsitem {
    grid-template-columns: 2.2rem 1fr;
    column-gap: .7rem;
  }

  .page-news .newsitem__num {
    font-size: 1.1rem;
  }

  .page-news .newsitem__abs {
    max-height: 8rem;
    opacity: 1;
    margin-top: .5rem;
  }

  .page-news .matrix__row {
    grid-template-columns: minmax(6rem, 1.4fr) repeat(6, minmax(3.4rem, 1fr));
    padding: .6rem .6rem;
    min-width: 30rem;
  }

  .page-news .matrix__cell--name {
    font-size: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .newsitem,
  .page-news .newsitem__abs,
  .page-news .railcard {
    transition: none;
  }
}
<<<END>>>


<main id="main-content" class="page-news">

  <nav class="crumbs" aria-label="页面路径">
    <span class="crumbs__item"><a class="crumbs__link" href="/">首页</a></span>
    <span class="crumbs__item">动态与专题</span>
  </nav>

  <header class="newshead">
    <div class="shell newshead__grid">
      <div class="newshead__main">
        <p class="eyebrow">UPDATES / FEATURES</p>
        <h1>球王会体育动态与专题</h1>
        <p class="newshead__lede">每一篇都对应一次真实变化：赛程补录、字段扩展、标签体系演进，或一场内地体育站点横向评测的拆解。按栏目筛一遍，十分钟就能看清最近改了什么、哪些调整会影响你手上的数据。</p>
        <p class="newshead__meta mono">T+48H 更新周期 · 36 篇评测 · 六赛季版本归档</p>
      </div>
      <aside class="newshead__side" aria-label="栏目索引">
        <p class="eyebrow">栏目</p>
        <ol class="branches">
          <li class="branches__item"><span class="branches__num mono">01</span><span class="branches__name">数据更新公告</span></li>
          <li class="branches__item"><span class="branches__num mono">02</span><span class="branches__name">版本迭代说明</span></li>
          <li class="branches__item"><span class="branches__num mono">03</span><span class="branches__name">评测与分析</span></li>
          <li class="branches__item"><span class="branches__num mono">04</span><span class="branches__name">赛季与专题合集</span></li>
        </ol>
      </aside>
    </div>
  </header>

  <section class="section section--paper" id="digest" data-section data-reveal>
    <div class="shell">
      <header class="sechead">
        <p class="eyebrow">01 / 本周期</p>
        <h2>本期更新速览</h2>
        <p class="sechead__note">本周期影响面最大的四条变化，先说结论，再决定要不要往下翻。</p>
      </header>

      <figure class="digest-banner">
        <img src="{zhanqunpic:h:500w:1400}" width="1400" height="500" alt="等距排列的脉冲波形与日历刻度叠加的抽象图形，表现赛事数据的周期节律">
        <figcaption class="digest-banner__cap mono">赛事数据公告栏 · 48 小时同步一轮</figcaption>
      </figure>

      <ol class="digest">
        <li class="digest__item">
          <span class="digest__num mono">01</span>
          <h3 class="digest__title">赛事日历改为整轮同步</h3>
          <p class="digest__desc">赛程调整、比分修正与关键数据补齐从分批推送合并为一轮完成，跨轮次对照赛程时看到的版本更整齐。</p>
        </li>
        <li class="digest__item">
          <span class="digest__num mono">02</span>
          <h3 class="digest__title">旧赛季版本补上了技术统计字段</h3>
          <p class="digest__desc">此前只在当季回填的 32 项指标，现在能直接在归档里查到，做跨赛季对比不用再另找资料。</p>
        </li>
        <li class="digest__item">
          <span class="digest__num mono">03</span>
          <h3 class="digest__title">资源下载新增按赛季定位的入口</h3>
          <p class="digest__desc">42 个标签里补入赛季维度，4,200 余份资料可按赛事、赛季、数据维度三条路径交叉定位。</p>
        </li>
        <li class="digest__item">
          <span class="digest__num mono">04</span>
          <h3 class="digest__title">移动端弱网模式覆盖折叠屏与平板</h3>
          <p class="digest__desc">弱网下自动切低带宽模式，单场比赛数据页在 4G 网络下首屏约 1.2 秒完成加载。</p>
        </li>
      </ol>
    </div>
  </section>

  <div class="newsfilter" id="filter" data-tagfilter data-section>
    <div class="shell newsfilter__inner">
      <div class="newsfilter__group">
        <span class="newsfilter__label mono">栏目</span>
        <button class="tag" type="button" data-tag="数据更新" aria-pressed="false">数据更新</button>
        <button class="tag" type="button" data-tag="版本迭代" aria-pressed="false">版本迭代</button>
        <button class="tag" type="button" data-tag="标签体系" aria-pressed="false">标签体系</button>
        <button class="tag" type="button" data-tag="移动端" aria-pressed="false">移动端</button>
        <button class="tag tag--orange" type="button" data-tag="评测" aria-pressed="false">评测</button>
      </div>
      <div class="newsfilter__group">
        <span class="newsfilter__label mono">赛季</span>
        <button class="tag" type="button" data-tag="赛季中段" aria-pressed="false">赛季中段</button>
        <button class="tag" type="button" data-tag="赛季收官" aria-pressed="false">赛季收官</button>
        <button class="tag" type="button" data-tag="休赛期" aria-pressed="false">休赛期</button>
      </div>
      <div class="newsfilter__group">
        <span class="newsfilter__label mono">专题</span>
        <button class="tag" type="button" data-tag="归档与回溯" aria-pressed="false">归档与回溯</button>
        <button class="tag" type="button" data-tag="观赛体验" aria-pressed="false">观赛体验</button>
        <button class="tag" type="button" data-tag="数据协作" aria-pressed="false">数据协作</button>
      </div>
    </div>
  </div>

  <section class="section section--paper" id="list" data-section>
    <div class="shell">
      <header class="sechead">
        <p class="eyebrow">02 / 更新与版本迭代</p>
        <h2>近期更新与版本迭代列表</h2>
        <p class="sechead__note">数据补录、字段调整、标签体系变动与移动端优化，按发布时间从近到远排列。</p>
      </header>

      <ol class="newslist">
        <li class="newsitem" data-tags="数据更新,赛季中段">
          <span class="newsitem__num mono" aria-hidden="true">01</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">赛事日历更新节奏调整说明</h3>
            <p class="newsitem__abs">赛程调整与比分修正合并为整轮同步，同一轮里的赛程前后版本更一致。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">数据更新</span><span class="tag">赛季中段</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="版本迭代,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">02</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">六赛季版本字段补齐记录</h3>
            <p class="newsitem__abs">收藏赛事记录保留的 6 个赛季版本补上技术统计字段，跨赛季对比时不必另行换算。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">上一版本周期</span><span class="tag">版本迭代</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="标签体系,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">03</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">标签对照体系新增赛季维度</h3>
            <p class="newsitem__abs">42 个标签里补入赛季路径，资料可按赛事、赛季、数据维度三条线定位。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">标签体系</span><span class="tag">数据协作</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="移动端,观赛体验">
          <span class="newsitem__num mono" aria-hidden="true">04</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">移动端弱网模式优化上线</h3>
            <p class="newsitem__abs">弱网环境自动切换低带宽模式，单场比赛数据页首屏约 1.2 秒加载完成。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">上一版本周期</span><span class="tag">移动端</span><span class="tag">观赛体验</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="评测,观赛体验">
          <span class="newsitem__num mono" aria-hidden="true">05</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">评测专栏新增四家站点进入对比矩阵</h3>
            <p class="newsitem__abs">按数据覆盖、更新频率、移动端体验等六个维度重新打分，维度差异比名次更有参考价值。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季中段</span><span class="tag">评测</span><span class="tag">观赛体验</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="数据更新,赛季中段">
          <span class="newsitem__num mono" aria-hidden="true">06</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">技术统计字段扩展说明</h3>
            <p class="newsitem__abs">当季技术统计指标补充至 32 项，球队与球员档案的关联字段同步开放。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">数据更新</span><span class="tag">赛季中段</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="版本迭代,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">07</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">赛季数据包与指标说明同步更新</h3>
            <p class="newsitem__abs">资源库中的赛季数据包、指标说明与对比表模板一并刷新，下载后可直接投入使用。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">上一版本周期</span><span class="tag">版本迭代</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="版本迭代,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">08</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">收藏赛事记录的回溯路径调整</h3>
            <p class="newsitem__abs">旧版本资料按赛季直接回溯查看，入口层级减少两级，找历史比分更快。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季收官</span><span class="tag">版本迭代</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="标签体系,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">09</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">中英文双语标签合并整理进展</h3>
            <p class="newsitem__abs">跨来源资料合并整理时双语标签可直接对应，省掉人工翻译转换的环节。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季中段</span><span class="tag">标签体系</span><span class="tag">数据协作</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="移动端,观赛体验">
          <span class="newsitem__num mono" aria-hidden="true">10</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">折叠屏与平板适配调整记录</h3>
            <p class="newsitem__abs">手机、平板与折叠屏三档断点重新校准，展开态下表格列宽不再被挤压。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">休赛期</span><span class="tag">移动端</span><span class="tag">观赛体验</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="评测,归档与回溯">
          <span class="newsitem__num mono" aria-hidden="true">11</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">年度数据回顾汇编发布</h3>
            <p class="newsitem__abs">汇总当年赛季覆盖范围、数据维度变化与协作团队贡献，一份文档读完一年。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">休赛期</span><span class="tag">评测</span><span class="tag">归档与回溯</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="数据更新,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">12</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">入库校验流程记录公开</h3>
            <p class="newsitem__abs">字段完整性校验与历史版本交叉比对两道流程的执行记录，随更新公告一并发布。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">本更新周期</span><span class="tag">数据更新</span><span class="tag">数据协作</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="数据协作,标签体系">
          <span class="newsitem__num mono" aria-hidden="true">13</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">内容协作团队的标签校对说明</h3>
            <p class="newsitem__abs">12 家数据整理团队协作完成赛事归档与标签校对，本轮集中处理跨来源命名差异。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季中段</span><span class="tag">数据协作</span><span class="tag">标签体系</span></p>
          </div>
        </li>
        <li class="newsitem" data-tags="评测,数据协作">
          <span class="newsitem__num mono" aria-hidden="true">14</span>
          <div class="newsitem__body">
            <h3 class="newsitem__title">评测专栏六维评分方法更新</h3>
            <p class="newsitem__abs">六个评分维度的说明文字重写，每个维度标注更适合哪类人群参考。</p>
            <p class="newsitem__meta"><span class="newsitem__time mono">赛季收官</span><span class="tag">评测</span><span class="tag">数据协作</span></p>
          </div>
        </li>
      </ol>

      <p class="newslist__more"><a class="btn btn--paper" href="#collections">转到赛季与专题合集</a></p>
    </div>
  </section>

  <section class="section section--ink" id="reviews" data-section data-reveal>
    <div class="shell">
      <header class="sechead sechead--onink">
        <p class="eyebrow text-cyan">03 / 评测专栏</p>
        <h2>内地体育站点横向评测</h2>
        <p class="sechead__note">累计 36 篇对比与选型分析。下面这张矩阵是最近一期的六维评分结果，看差异比看名次更有用。</p>
      </header>

      <figure class="review-visual">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" loading="lazy" decoding="async" alt="多维度评分矩阵的抽象图示，色阶由青到橙渐变">
        <figcaption class="review-visual__cap mono">六维评分 · 色阶从左至右表示表现由低到高</figcaption>
      </figure>

      <div class="matrix" role="table" aria-label="内地体育站点横向评测六维评分矩阵">
        <div class="matrix__row matrix__row--head" role="row">
          <span class="matrix__cell matrix__cell--name" role="columnheader">站点类型</span>
          <span class="matrix__cell" role="columnheader">数据覆盖</span>
          <span class="matrix__cell" role="columnheader">更新频率</span>
          <span class="matrix__cell" role="columnheader">移动端体验</span>
          <span class="matrix__cell" role="columnheader">历史版本</span>
          <span class="matrix__cell" role="columnheader">导出能力</span>
          <span class="matrix__cell" role="columnheader">上手成本</span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">综合型数据站</span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">社区型观赛站</span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">订阅型数据站</span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
        </div>
        <div class="matrix__row" role="row">
          <span class="matrix__cell matrix__cell--name" role="rowheader">移动优先型应用</span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--4"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--3"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--2"></span></span>
          <span class="matrix__cell" role="cell"><span class="score score--5"></span></span>
        </div>
      </div>

      <ul class="legend">
        <li class="legend__item"><span class="legend__chip"></span>色阶越靠右，该项表现越充分</li>
        <li class="legend__item"><span class="legend__chip legend__chip--cyan"></span>青段：基础可用</li>
        <li class="legend__item"><span class="legend__chip legend__chip--orange"></span>橙段：显著优势</li>
      </ul>

      <div class="grid grid--12 review-notes">
        <div class="col-7">
          <h3 class="review-notes__title">怎么读这张矩阵</h3>
          <p class="review-notes__text">做深度数据研究的人，优先看数据覆盖与历史版本两列；习惯用手机看比赛的，重点看移动端体验与上手成本。同一行里色块分布越不均匀，说明这类站点越偏向某一个固定人群，选之前先想清楚自己主要拿它做什么。</p>
        </div>
        <figure class="col-5 review-mobile">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" loading="lazy" decoding="async" alt="手持设备上显示赛事数据列表的界面示意，画面只保留屏幕与手势">
          <figcaption class="review-mobile__cap mono">移动端体验维度 · 含弱网与折叠屏实测</figcaption>
        </figure>
      </div>

      <p class="review-links">
        <a class="btn btn--ghost" href="/help-center/">看看自己适合哪一类</a>
      </p>
    </div>
  </section>

  <section class="section section--paper" id="collections" data-section data-reveal>
    <div class="shell">
      <header class="sechead">
        <p class="eyebrow">04 / 合集</p>
        <h2>赛季与专题合集</h2>
        <p class="sechead__note">把同一主题下的文章打包，一次读完一个方向上的全部改动。</p>
      </header>
    </div>

    <figure class="collection-banner">
      <img src="{zhanqunpic:h:400w:1600}" width="1600" height="400" loading="lazy" decoding="async" alt="夜场比赛灯光与网格线交织的横向抽象画面，画面中没有人出现">
    </figure>

    <div class="shell">
      <div class="rail">
        <a class="railcard" href="/solutions/">
          <span class="railcard__eyebrow mono">专题 01</span>
          <h3 class="railcard__title">六赛季版本回溯</h3>
          <p class="railcard__desc">收藏记录与字段变化按赛季成组，想找回旧版本资料从这里进最快。</p>
          <span class="railcard__foot mono">归档与回溯</span>
        </a>
        <a class="railcard" href="/help-center/">
          <span class="railcard__eyebrow mono">专题 02</span>
          <h3 class="railcard__title">移动端观赛体验</h3>
          <p class="railcard__desc">弱网模式、折叠屏断点与首屏加载优化，手机和平板上看数据会遇到的问题集中在这里。</p>
          <span class="railcard__foot mono">观赛体验</span>
        </a>
        <a class="railcard" href="/brand/">
          <span class="railcard__eyebrow mono">专题 03</span>
          <h3 class="railcard__title">标签对照与协作</h3>
          <p class="railcard__desc">双语标签、42 个标签维度与 12 家整理团队的协作记录，适合需要合并外部资料的人。</p>
          <span class="railcard__foot mono">数据协作</span>
        </a>
        <a class="railcard" href="/updates/">
          <span class="railcard__eyebrow mono">专题 04</span>
          <h3 class="railcard__title">赛事站点评测合集</h3>
          <p class="railcard__desc">36 篇内地体育站点对比与选型分析，按六维评分矩阵逐期更新。</p>
          <span class="railcard__foot mono">评测</span>
        </a>
        <a class="railcard" href="/solutions/">
          <span class="railcard__eyebrow mono">专题 05</span>
          <h3 class="railcard__title">资源下载分类索引</h3>
          <p class="railcard__desc">4,200 余份资料按赛事、赛季、数据维度三条路径整理，配套指标说明与对比表模板。</p>
          <span class="railcard__foot mono">资源下载</span>
        </a>
      </div>
    </div>
  </section>

  <section class="section section--green" id="follow" data-section>
    <div class="shell">
      <header class="sechead sechead--onink">
        <p class="eyebrow text-cyan">05 / 订阅与归档</p>
        <h2>跟进后续更新与往期归档</h2>
      </header>

      <div class="grid grid--12 follow">
        <div class="col-6 follow__block">
          <h3 class="follow__title">跟着栏目走，不用反复回来看</h3>
          <p class="follow__text">把常用的赛事加进收藏，会员后台会在每个更新周期结束后给出变更提示，赛程改动、比分修正与字段补齐都会列出来。想固定跟进某个栏目，写一封邮件到客服邮箱说明栏目名，我们会把你排进对应栏目的通知名单。</p>
          <p class="follow__links"><a class="btn btn--primary" href="/contact/">联系客服订阅</a><a class="btn btn--ghost" href="/solutions/">了解会员方案</a></p>
        </div>
        <div class="col-6 follow__block follow__block--alt">
          <h3 class="follow__title">往期归档怎么找</h3>
          <p class="follow__text">更新公告按周期成组保存，版本迭代说明与对应的赛季数据包放在一起。资源库支持按赛事、赛季、数据维度三种路径定位到 4,200 余份资料，赛季数据包、指标说明与对比表模板都在其中。机构客户如果想把内容接进自己的流程，可以另外申请接口读取方式。</p>
          <p class="follow__links"><a class="btn btn--paper" href="/instructions/">查看使用说明</a></p>
        </div>
      </div>
    </div>
  </section>

</main>

/* ===== 动态与专题 / page-news ===== */

.page-news {
  --nw-paper-line: rgba(36, 28, 24, .22);
  --nw-gap: clamp(1.2rem, 3vw, 2.4rem);
  --nw-railcard-w: min(80vw, 19rem);
}

/* ---------- 面包屑 ---------- */
.page-news > .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.2rem var(--gutter) 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--gray);
}

.page-news > .crumbs .crumbs__link {
  color: var(--cyan);
  text-decoration: none;
}

.page-news > .crumbs .crumbs__link:hover,
.page-news > .crumbs .crumbs__link:focus-visible {
  text-decoration: underline;
}

/* ---------- 首屏 ---------- */
.page-news .newshead {
  padding: clamp(1.6rem, 4vw, 3.2rem) 0 clamp(2rem, 5vw, 3.6rem);
  border-bottom: 1px solid var(--line);
}

.page-news .newshead__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}

.page-news .newshead__main h1 {
  margin: .5rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.02em;
}

.page-news .newshead__lede {
  max-width: 40ch;
  margin: 1.1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--silver);
}

.page-news .newshead__meta {
  margin: 1.2rem 0 0;
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--cyan);
}

.page-news .newshead__side {
  padding-top: .4rem;
  border-top: 2px solid var(--line-strong);
}

.page-news .branches {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .1rem;
}

.page-news .branches__item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  gap: .6rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}

.page-news .branches__num {
  font-size: .72rem;
  color: var(--orange);
  letter-spacing: .06em;
}

/* ---------- 区块标题通用 ---------- */
.page-news .sechead {
  margin-bottom: var(--nw-gap);
}

.page-news .sechead h2 {
  margin: .45rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}

.page-news .sechead__note {
  max-width: 46ch;
  margin: .8rem 0 0;
  font-size: .94rem;
  line-height: 1.8;
  color: rgba(36, 28, 24, .68);
}

.page-news .sechead--onink .sechead__note {
  color: var(--gray);
}

/* ---------- 速览 ---------- */
.page-news .digest-banner {
  margin: 0 0 var(--nw-gap);
  border: 2px solid var(--brown);
  background: var(--paper-hi);
  box-shadow: 8px 8px 0 rgba(36, 28, 24, .14);
}

.page-news .digest-banner img {
  display: block;
  width: 100%;
  height: clamp(150px, 26vw, 300px);
  object-fit: cover;
}

.page-news .digest-banner__cap {
  display: block;
  padding: .6rem .9rem;
  border-top: 1px solid var(--nw-paper-line);
  font-size: .7rem;
  letter-spacing: .08em;
  color: rgba(36, 28, 24, .6);
}

.page-news .digest {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.page-news .digest__item {
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  column-gap: 1rem;
  padding: 1.35rem 0;
  border-top: 2px solid var(--nw-paper-line);
}

.page-news .digest__num {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rust);
  line-height: 1.5;
}

.page-news .digest__title {
  grid-column: 2;
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.16rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--brown);
}

.page-news .digest__desc {
  grid-column: 2;
  max-width: 52ch;
  margin: .5rem 0 0;
  font-size: .9rem;
  line-height: 1.8;
  color: rgba(36, 28, 24, .72);
}

/* ---------- 筛选栏 ---------- */
.page-news .newsfilter {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 3px solid var(--cyan);
}

.page-news .newsfilter__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.6rem;
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.page-news .newsfilter__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.page-news .newsfilter__label {
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--gray);
  margin-right: .15rem;
}

.page-news .newsfilter .tag {
  cursor: pointer;
}

/* ---------- 更新列表 ---------- */
.page-news .newslist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .newsitem {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: .9rem;
  padding: 1.3rem 0;
  border-top: 2px solid var(--nw-paper-line);
  transition: background-color var(--dur) var(--ease);
}

.page-news .newsitem:last-child {
  border-bottom: 2px solid var(--nw-paper-line);
}

.page-news .newsitem:hover {
  background: rgba(255, 106, 31, .07);
}

.page-news .newsitem[hidden] {
  display: none;
}

.page-news .newsitem__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--brown);
  letter-spacing: -.02em;
}

.page-news .newsitem__title {
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.14rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--brown);
}

.page-news .newsitem__abs {
  max-width: 54ch;
  margin: 0;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(36, 28, 24, .7);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}

.page-news .newsitem:hover .newsitem__abs,
.page-news .newsitem:focus-within .newsitem__abs {
  max-height: 7rem;
  opacity: 1;
  margin-top: .5rem;
}

.page-news .newsitem__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: .65rem 0 0;
}

.page-news .newsitem__time {
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--rust);
  padding-right: .45rem;
  border-right: 1px solid var(--nw-paper-line);
}

.page-news .newslist__more {
  margin: var(--nw-gap) 0 0;
}

/* ---------- 评测专栏 ---------- */
.page-news .review-visual {
  margin: 0 0 var(--nw-gap);
  border: 2px solid var(--line-strong);
}

.page-news .review-visual img {
  display: block;
  width: 100%;
  height: clamp(160px, 26vw, 300px);
  object-fit: cover;
}

.page-news .review-visual__cap {
  display: block;
  padding: .55rem .9rem;
  border-top: 1px solid var(--line);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--gray);
}

.page-news .matrix {
  border: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-news .matrix__row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 1.7fr) repeat(6, minmax(4.6rem, 1fr));
  gap: .35rem .5rem;
  align-items: center;
  padding: .7rem .9rem;
  min-width: 40rem;
  border-bottom: 1px solid var(--line);
}

.page-news .matrix__row:last-child {
  border-bottom: 0;
}

.page-news .matrix__row--head {
  background: var(--ink-green);
}

.page-news .matrix__row:not(.matrix__row--head):hover {
  background: rgba(63, 224, 200, .07);
}

.page-news .matrix__cell {
  font-size: .78rem;
  color: var(--silver);
}

.page-news .matrix__row--head .matrix__cell {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--cyan);
}

.page-news .matrix__cell--name {
  font-size: .88rem;
  color: var(--paper);
  font-weight: 700;
}

.page-news .score {
  display: block;
  position: relative;
  height: .62rem;
  background: rgba(195, 201, 198, .16);
}

.page-news .score::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) / 5 * 100%);
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.page-news .score--1 { --v: 1; }
.page-news .score--2 { --v: 2; }
.page-news .score--3 { --v: 3; }
.page-news .score--4 { --v: 4; }
.page-news .score--5 { --v: 5; }

.page-news .legend {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .legend__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  color: var(--gray);
}

.page-news .legend__chip {
  display: inline-block;
  width: 1.4rem;
  height: .5rem;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.page-news .legend__chip--cyan {
  background: var(--cyan);
}

.page-news .legend__chip--orange {
  background: var(--orange);
}

.page-news .review-notes {
  margin-top: var(--nw-gap);
  row-gap: var(--nw-gap);
}

.page-news .review-notes__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}

.page-news .review-notes__text {
  margin: 0;
  max-width: 42ch;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--gray);
}

.page-news .review-mobile {
  margin: 0;
  border: 1px solid var(--line);
}

.page-news .review-mobile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-news .review-mobile__cap {
  display: block;
  padding: .5rem .8rem;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  letter-spacing: .07em;
  color: var(--gray);
}

.page-news .review-links {
  margin: var(--nw-gap) 0 0;
}

/* ---------- 专题合集 ---------- */
.page-news .collection-banner {
  margin: 0 0 var(--nw-gap);
}

.page-news .collection-banner img {
  display: block;
  width: 100%;
  height: clamp(120px, 18vw, 200px);
  object-fit: cover;
  border-top: 2px solid var(--brown);
  border-bottom: 2px solid var(--brown);
}

.page-news .rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: .2rem .2rem 1.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-news .railcard {
  flex: 0 0 auto;
  width: var(--nw-railcard-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.15rem 1.1rem 1rem;
  background: var(--paper-hi);
  border: 2px solid var(--brown);
  box-shadow: 5px 5px 0 rgba(36, 28, 24, .16);
  text-decoration: none;
  color: var(--brown);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-news .railcard:nth-child(2n) {
  width: min(84vw, 22rem);
}

.page-news .railcard:hover,
.page-news .railcard:focus-visible {
  transform: translateY(-4px);
  box-shadow: 7px 9px 0 rgba(36, 28, 24, .2);
}

.page-news .railcard__eyebrow {
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--rust);
}

.page-news .railcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.page-news .railcard__desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: .87rem;
  line-height: 1.75;
  color: rgba(36, 28, 24, .72);
}

.page-news .railcard__foot {
  align-self: flex-start;
  padding: .2rem .55rem;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--paper);
  background: var(--ink-green);
}

/* ---------- 订阅与归档 ---------- */
.page-news .follow {
  row-gap: var(--nw-gap);
}

.page-news .follow__block {
  padding: 1.3rem 1.2rem;
  border: 2px solid var(--line-strong);
  background: rgba(13, 18, 16, .45);
}

.page-news .follow__block--alt {
  border-color: rgba(255, 106, 31, .5);
}

.page-news .follow__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.24rem;
  letter-spacing: -.01em;
}

.page-news .follow__text {
  margin: 0;
  max-width: 44ch;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--silver);
}

.page-news .follow__links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.1rem 0 0;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-news .newshead__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 4rem);
  }

  .page-news .digest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--nw-gap);
  }

  .page-news .digest__item:nth-child(odd) {
    padding-right: var(--nw-gap);
  }
}

@media (max-width: 759px) {
  .page-news .newsfilter {
    position: static;
    border-bottom-width: 2px;
  }

  .page-news .newsfilter__inner {
    gap: .5rem;
  }

  .page-news .newsitem {
    grid-template-columns: 2.2rem 1fr;
    column-gap: .7rem;
  }

  .page-news .newsitem__num {
    font-size: 1.1rem;
  }

  .page-news .newsitem__abs {
    max-height: 8rem;
    opacity: 1;
    margin-top: .5rem;
  }

  .page-news .matrix__row {
    grid-template-columns: minmax(6rem, 1.4fr) repeat(6, minmax(3.4rem, 1fr));
    padding: .6rem .6rem;
    min-width: 30rem;
  }

  .page-news .matrix__cell--name {
    font-size: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .newsitem,
  .page-news .newsitem__abs,
  .page-news .railcard {
    transition: none;
  }
}
<<<END>>>