.page-news {
  --news-rail: 244px;
  --news-gap: clamp(20px, 3.2vw, 46px);
  background: var(--paper);
  color: var(--text);
}

.page-news .news-shell {
  padding-top: clamp(18px, 3.4vw, 34px);
  padding-bottom: clamp(56px, 9vw, 104px);
}

/* ---------- 页面抬头 ---------- */
.page-news .news-hero {
  margin-top: clamp(16px, 3vw, 30px);
  padding-bottom: clamp(22px, 3vw, 34px);
  border-bottom: 2px solid var(--ink);
}

.page-news .news-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6.1vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 0.42em 0 0;
  max-width: 17ch;
}

.page-news .news-hero__lead {
  margin: clamp(14px, 2vw, 20px) 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.55vw, 17.5px);
  line-height: 1.85;
  color: var(--text);
}

.page-news .news-hero__meta {
  list-style: none;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 3vw, 36px);
  font-size: 13.5px;
  color: var(--muted);
}

.page-news .news-hero__meta li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.page-news .news-hero__num {
  font-size: 20px;
  font-weight: 700;
  color: var(--orange-deep);
  letter-spacing: -0.01em;
}

/* ---------- 双栏骨架 ---------- */
.page-news .news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  margin-top: clamp(26px, 4vw, 46px);
}

@media (min-width: 900px) {
  .page-news .news-layout {
    grid-template-columns: var(--news-rail) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- 左侧分类索引 ---------- */
.page-news .news-index {
  display: grid;
  gap: 18px;
  padding: 18px 16px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

@media (min-width: 900px) {
  .page-news .news-index {
    position: sticky;
    top: 118px;
  }
}

.page-news .news-index__label {
  margin: 0;
  font-family: var(--font-serif-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

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

.page-news .news-index__link {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}

.page-news .news-index__num {
  font-size: 12px;
  color: var(--orange-deep);
  letter-spacing: 0.05em;
}

.page-news .news-index__count {
  font-size: 12px;
  color: var(--muted);
}

.page-news .news-index__link:hover,
.page-news .news-index__link:focus-visible {
  background: var(--ink);
  color: var(--warm-white);
}

.page-news .news-index__link:hover .news-index__num,
.page-news .news-index__link:focus-visible .news-index__num,
.page-news .news-index__link:hover .news-index__count,
.page-news .news-index__link:focus-visible .news-index__count {
  color: var(--cyan);
}

.page-news .news-index__stage {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.page-news .news-index__stage-label {
  margin: 0 0 6px;
  font-family: var(--font-serif-label);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-news .stage-scale {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 26px;
}

.page-news .stage-scale::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--line);
}

.page-news .stage-scale__item {
  position: relative;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.page-news .stage-scale__item::before {
  content: "";
  position: absolute;
  top: -21px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper-soft);
  border: 2px solid var(--line);
}

.page-news .stage-scale__item.is-done::before {
  background: var(--ink);
  border-color: var(--ink);
}

.page-news .stage-scale__item.is-now {
  color: var(--orange-deep);
  font-weight: 700;
}

.page-news .stage-scale__item.is-now::before {
  background: var(--orange);
  border-color: var(--orange);
}

.page-news .news-index__figure {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink-2);
}

.page-news .news-index__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-news .news-index__figure figcaption {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--warm-white);
}

/* ---------- 条目流 ---------- */
.page-news .news-group {
  margin-bottom: clamp(30px, 4.6vw, 54px);
}

.page-news .news-group:last-child {
  margin-bottom: 0;
}

.page-news .news-group__head {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.page-news .news-group__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.32rem, 2.6vw, 1.88rem);
  letter-spacing: -0.01em;
  color: var(--heading);
}

.page-news .news-group__num {
  font-size: 0.7em;
  color: var(--orange);
  letter-spacing: 0.04em;
}

.page-news .news-group__note {
  margin: 0;
  max-width: 64ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .entry {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 12px;
  padding: clamp(16px, 2.2vw, 24px) 0;
  border-bottom: 1px solid var(--line);
}

.page-news .entry__num {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.05em;
  padding-top: 3px;
}

.page-news .entry__body {
  min-width: 0;
}

.page-news .entry__tag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  background: var(--ink-2);
  color: var(--warm-white);
}

.page-news .entry__tag[data-kind="reports"] {
  background: var(--orange);
  color: var(--warm-white);
}

.page-news .entry__tag[data-kind="venue"] {
  background: var(--cyan);
  color: var(--ink);
}

.page-news .entry__tag[data-kind="version"] {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.page-news .entry__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.02rem, 2.1vw, 1.24rem);
  line-height: 1.48;
  color: var(--heading);
}

.page-news .entry__time {
  margin: 7px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.page-news .entry__more {
  margin-top: 10px;
}

.page-news .entry__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--orange-deep);
}

.page-news .entry__more summary::-webkit-details-marker {
  display: none;
}

.page-news .entry__more summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
}

.page-news .entry__more[open] summary::after {
  content: "−";
}

.page-news .entry__more p {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text);
}

.page-news .entry--feature .entry__media {
  margin: 0 0 14px;
}

.page-news .entry--feature .entry__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ---------- 场馆日志 ---------- */
.page-news .venue-log {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

@media (min-width: 780px) {
  .page-news .venue-log {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
}

.page-news .venue-log__figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
}

.page-news .venue-log__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-news .venue-log__figure figcaption {
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--warm-white);
  border-top: 2px solid var(--orange);
}

/* ---------- 横向专题带 ---------- */
.page-news .news-topics {
  margin: clamp(26px, 4vw, 46px) 0;
  padding: clamp(22px, 3.4vw, 36px) 0 clamp(20px, 3vw, 30px);
  background: var(--ink);
  border-radius: var(--radius-lg);
  color: var(--warm-white);
  overflow: hidden;
}

.page-news .news-topics__head {
  padding: 0 clamp(18px, 3.4vw, 36px);
  display: grid;
  gap: 8px;
}

.page-news .news-topics__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  letter-spacing: -0.01em;
}

.page-news .news-topics__lead {
  margin: 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 253, 248, 0.72);
}

.page-news .news-topics__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 82%);
  gap: 14px;
  margin-top: clamp(16px, 2.4vw, 24px);
  padding: 0 clamp(18px, 3.4vw, 36px) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.page-news .news-topics__rail:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

@media (min-width: 760px) {
  .page-news .news-topics__rail {
    grid-auto-columns: minmax(280px, 34%);
  }
}

.page-news .topic-card {
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  background: var(--ink-2);
  border-radius: var(--radius-md);
}

.page-news .topic-card__media {
  margin: 0 0 2px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.page-news .topic-card__media img {
  display: block;
  width: 100%;
  height: auto;
}

.page-news .topic-card__tag {
  justify-self: start;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: var(--warm-white);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.page-news .topic-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  line-height: 1.45;
  color: var(--warm-white);
}

.page-news .topic-card__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.78;
  color: rgba(255, 253, 248, 0.75);
}

.page-news .topic-card__link {
  justify-self: start;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 227, 200, 0.45);
  padding-bottom: 2px;
}

.page-news .topic-card__link:hover,
.page-news .topic-card__link:focus-visible {
  border-bottom-color: var(--cyan);
}

/* ---------- 尾部入口 ---------- */
.page-news .news-cta {
  margin-top: clamp(28px, 4vw, 48px);
}

.page-news .news-cta__panel {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  padding: clamp(22px, 3.6vw, 40px);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-left: 6px solid var(--orange);
  border-radius: var(--radius-lg);
}

@media (min-width: 820px) {
  .page-news .news-cta__panel {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    align-items: center;
  }
}

.page-news .news-cta__title {
  margin: 0.4em 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.7vw, 1.72rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--heading);
}

.page-news .news-cta__text {
  margin: 12px 0 0;
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--text);
}

.page-news .news-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.page-news .news-cta__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(185, 55, 14, 0.4);
  padding-bottom: 2px;
}

.page-news .news-cta__link:hover,
.page-news .news-cta__link:focus-visible {
  border-bottom-color: var(--orange-deep);
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-index__link,
  .page-news .news-topics__rail {
    transition: none;
    scroll-behavior: auto;
  }
}


<main id="main-content" class="page-news">
  <div class="container news-shell">
    <nav class="breadcrumb" aria-label="页面位置">
      <ol class="breadcrumb__list">
        <li><a class="breadcrumb__link" href="/">赛事总览</a></li>
        <li><span class="breadcrumb__current" aria-current="page">内容笔记</span></li>
      </ol>
    </nav>

    <header class="news-hero">
      <p class="eyebrow">赛季观察 · 编辑台</p>
      <h1 class="news-hero__title">赛季走到哪一步，笔记就写到哪一步</h1>
      <p class="news-hero__lead">开赛前两小时名单会换人，散场后看台动线会调整，版本也会在赛季中途升级。亚富看台的编辑团队把这些变化写成一条条短笔记，赛前翻一遍知道谁上谁下，赛后翻一遍知道数据讲了个什么故事。</p>
      <ul class="news-hero__meta">
        <li><span class="news-hero__num mono">14</span> 条最新笔记</li>
        <li><span class="news-hero__num mono">28</span> 个运动项目持续跟踪</li>
        <li>本赛季第 3 轮进行中</li>
      </ul>
    </header>

    <div class="news-layout">
      <aside class="news-index" aria-labelledby="news-index-title">
        <p class="news-index__label" id="news-index-title">本期索引</p>
        <ul class="news-index__list">
          <li><a class="news-index__link" href="#cluster-roster"><span class="news-index__num mono">01</span><span class="news-index__text">阵容变动</span><span class="news-index__count mono">3</span></a></li>
          <li><a class="news-index__link" href="#cluster-reports"><span class="news-index__num mono">02</span><span class="news-index__text">赛后战报</span><span class="news-index__count mono">4</span></a></li>
          <li><a class="news-index__link" href="#cluster-venue"><span class="news-index__num mono">03</span><span class="news-index__text">场馆动态</span><span class="news-index__count mono">4</span></a></li>
          <li><a class="news-index__link" href="#cluster-version"><span class="news-index__num mono">04</span><span class="news-index__text">版本迭代</span><span class="news-index__count mono">3</span></a></li>
        </ul>

        <div class="news-index__stage">
          <p class="news-index__stage-label">赛季阶段</p>
          <div class="stage-scale">
            <span class="stage-scale__item is-done">季前</span>
            <span class="stage-scale__item is-now">第3轮</span>
            <span class="stage-scale__item">淘汰赛</span>
            <span class="stage-scale__item">收官</span>
          </div>
        </div>

        <figure class="news-index__figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="赛事目录编辑桌面，屏幕显示条目列表与分类标签" loading="lazy" decoding="async">
          <figcaption>编辑台每轮把名单、比分与场馆变更整理进同一份赛季笔记。</figcaption>
        </figure>
      </aside>

      <div class="news-stream">
        <section class="news-group" id="cluster-roster" aria-labelledby="cluster-roster-title" data-reveal>
          <header class="news-group__head">
            <h2 class="news-group__title" id="cluster-roster-title"><span class="news-group__num mono">01</span>阵容变动</h2>
            <p class="news-group__note">名单公布的窗口很短，我们把首发、替补和归队变化集中在赛前更新，让你在开场前就能看清谁在场上。</p>
          </header>
          <ol class="entry-list">
            <li class="entry">
              <span class="entry__num mono">01</span>
              <div class="entry__body">
                <span class="entry__tag" data-kind="roster">阵容</span>
                <h3 class="entry__title">第 3 轮开赛前两小时，边路位置换了人</h3>
                <p class="entry__time">本赛季第 3 轮 · 赛前更新</p>
                <details class="entry__more">
                  <summary>展开细节</summary>
                  <p>赛前名单更新后，边路的首发次序与替补顺序同步调整。赛事详情页的阵容栏按公布时间排列，先发十一人与替补席分两列展示，方便你在开赛前直接对照。</p>
                </details>
              </div>
            </li>
            <li class="entry">
              <span class="entry__num mono">02</span>
              <div class="entry__body">
                <span class="entry__tag" data-kind="roster">阵容</span>
                <h3 class="entry__title">季前阶段集中公布轮换名单，多支球队带上新人</h3>
                <p class="entry__time">季前阶段 · 名单汇总</p>
                <details class="entry__more">
                  <summary>展开细节</summary>
                  <p>季前是观察阵容深度最好的窗口。我们按球队归并了轮换名单，标注出首次进入一线名单的球员位置，并保留前一阶段的名单快照，便于对照变化。</p>
                </details>
              </div>
            </li>
            <li class="entry">
              <span class="entry__num mono">03</span>
              <div class="entry__body">
                <span class="entry__tag" data-kind="roster">阵容</span>
                <h3 class="entry__title">伤停归队，中前场的可用人手明显变厚</h3>
                <p class="entry__time">本赛季第 2 轮后 · 阵容跟踪</p>
                <details class="entry__more">
                  <summary>展开细节</summary>
                  <p>几名此前缺席的球员回到名单，中前场的轮换选择随之增加。笔记里同时记录了他们回到名单的轮次与位置，方便你判断下一场的排兵习惯。</p>
                </details>
              </div>
            </li>
          </ol>
        </section>

        <section class="news-group" id="cluster-reports" aria-labelledby="cluster-reports-title" data-reveal>
          <header class="news-group__head">
            <h2 class="news-group__title" id="cluster-reports-title"><span class="news-group__num mono">02</span>赛后战报</h2>
            <p class="news-group__note">终场哨响之后的十几分钟里，关键数据和关键瞬间会一起到场，赛后想复盘的人不用等太久。</p>
          </header>
          <ol class="entry-list">
            <li class="entry entry--feature">
              <span class="entry__num mono">04</span>
              <div class="entry__body">
                <figure class="entry__media">
                  <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="赛事关键瞬间定格，球场灯光下的运动剪影" decoding="async">
                </figure>
                <span class="entry__tag" data-kind="reports">战报</span>
                <h3 class="entry__title">终场后十二分钟，第 3 轮焦点战的数据全部到位</h3>
                <p class="entry__time">本赛季第 3 轮 · 终场后发布</p>
                <details class="entry__more">
                  <summary>展开细节</summary>
                  <p>一场单场战报平均带 24 项关键数据和 6 张关键瞬间图，涵盖比分走势、控球、射门与犯规的变化节点。数据与图注按发生顺序排列，读完一遍就能复述比赛脉络。</p>
                </details>
              </div>
            </li>
            <li class="entry">
              <span class="entry__num mono">05</span>
              <div class="entry__body">
                <span class="entry__tag" data-kind="reports">战报</span>
                <h3 class="entry__title">一场加时赛，六个转折点决定了结果</h3>
                <p class="entry__time">本赛季第 2 轮 · 战报</p>
                <details class="entry__more">
                  <summary>展开细节</summary>
                  <p>加时赛的走势往往被比分掩盖。笔记按时间顺序挑出六次真正改变局面的攻防，配上当时的控球与射门数据，说明优势是怎样被拉开又被追回的。</p>
                </details>
              </div>
            </li>
            <li class="entry">
              <span class="entry__num mono">06</span>
              <div class="entry__body">
                <span class="entry__tag" data-kind="reports">战报</span>
                <h3 class="entry__title">控球占优却没拿分，射门和犯规两项数据说明了原因</h3>
                <p class="entry__time">本赛季第 2 轮 · 数据复盘</p>
                <details class="entry__more">
                  <summary>展开细节</summary>
                  <p>控球率只是结果的一部分。把射正次数、犯规位置和换人时间放在一起看，会发现进攻效率与节奏控制上的落差，这也是许多观众赛后的疑问所在。</p>
                </details>
              </div>
            </li>
            <li class="entry">
              <span class="entry__num mono">07</span>
              <div class="entry__body">
                <span class="entry__tag" data-kind="reports">战报</span>
                <h3 class="entry__title">主场连胜背后，轮换节奏比想象中更稳</h3>
                <p class="entry__time">本赛季第 3 轮 · 观察</p>
                <details class="entry__more">
                  <summary>展开细节</summary>
                  <p>连续主场的成绩容易被读成状态好，其实轮换安排才是关键。笔记把几场比赛的换人时间叠在一起对照，可以看出教练组对体能分配的固定思路。</p>
                </details>
              </div>
            </li>
          </ol>
        </section>

        <section class="news-group" id="cluster-venue" aria-labelledby="cluster-venue-title" data-reveal>
          <header class="news-group__head">
            <h2 class="news-group__title" id="cluster-venue-title"><span class="news-group__num mono">03</span>场馆动态</h2>
            <p class="news-group__note">看台分区、入场动线、设备兼容和大屏规格，只要有一项改了，这里就会留下一条记录。</p>
          </header>

          <div class="venue-log">
            <ol class="entry-list venue-log__list">
              <li class="entry">
                <span class="entry__num mono">08</span>
                <div class="entry__body">
                  <span class="entry__tag" data-kind="venue">场馆</span>
                  <h3 class="entry__title">北区看台重新编号，入场改为东侧先放行</h3>
                  <p class="entry__time">本赛季第 3 轮 · 场馆更新</p>
                  <details class="entry__more">
                    <summary>展开细节</summary>
                    <p>看台分区编号沿用场馆最新标识，入场动线调整为东侧闸机先行。赛事详情页第二栏的场馆信息已同步新的分区与动线描述，出门前看一眼即可。</p>
                  </details>
                </div>
              </li>
              <li class="entry">
                <span class="entry__num mono">09</span>
                <div class="entry__body">
                  <span class="entry__tag" data-kind="venue">场馆</span>
                  <h3 class="entry__title">一批综合馆补齐大屏规格说明</h3>
                  <p class="entry__time">本赛季初 · 场馆更新</p>
                  <details class="entry__more">
                    <summary>展开细节</summary>
                    <p>新增的规格说明写清了现场大屏的尺寸与刷新能力，家庭投屏用户和场馆运营方都能据此判断画面适配情况。</p>
                  </details>
                </div>
              </li>
              <li class="entry">
                <span class="entry__num mono">10</span>
                <div class="entry__body">
                  <span class="entry__tag" data-kind="venue">场馆</span>
                  <h3 class="entry__title">夜间散场新增两条临时接驳线路</h3>
                  <p class="entry__time">本赛季第 2 轮 · 场馆更新</p>
                  <details class="entry__more">
                    <summary>展开细节</summary>
                    <p>交通接驳说明补入了夜场散场的临时线路与走向，连同最近的地铁出入口一起写在详情页第二栏，散场时不用临时找路。</p>
                  </details>
                </div>
              </li>
              <li class="entry">
                <span class="entry__num mono">11</span>
                <div class="entry__body">
                  <span class="entry__tag" data-kind="venue">场馆</span>
                  <h3 class="entry__title">投屏分辨率与刷新频率说明进一步细化</h3>
                  <p class="entry__time">本赛季第 1 轮 · 场馆更新</p>
                  <details class="entry__more">
                    <summary>展开细节</summary>
                    <p>设备兼容一项补充了常见投屏盒子的分辨率范围与画面刷新表现，配合大屏观赛专题一起看，选设备时心里更有数。</p>
                  </details>
                </div>
              </li>
            </ol>

            <figure class="venue-log__figure">
              <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="体育场馆看台与入场通道广角，叠加半透明的分区信息标签" loading="lazy" decoding="async">
              <figcaption>场馆信息集中在赛事详情页第二栏，看台分区、动线与设备兼容一次看完。</figcaption>
            </figure>
          </div>
        </section>

        <section class="news-group" id="cluster-version" aria-labelledby="cluster-version-title" data-reveal>
          <header class="news-group__head">
            <h2 class="news-group__title" id="cluster-version-title"><span class="news-group__num mono">04</span>版本迭代</h2>
            <p class="news-group__note">功能上线、刷新提速、换设备后的浏览连贯性，每一条都写清改了什么、对你有什么影响。</p>
          </header>
          <ol class="entry-list">
            <li class="entry">
              <span class="entry__num mono">12</span>
              <div class="entry__body">
                <span class="entry__tag" data-kind="version">版本</span>
                <h3 class="entry__title">版本 4.2 上线之后，比分来得更快了</h3>
                <p class="entry__time">版本 4.2 上线后 · 功能更新</p>
                <details class="entry__more">
                  <summary>展开细节</summary>
                  <p>这次更新把关键数据单独提取出来，比分刷新速度比旧版快约 3 分钟。大屏上看战报时，比分、控球、射门、犯规、暂停、换人等 18 类字段会分区呈现，扫一眼就有结论。</p>
                </details>
              </div>
            </li>
            <li class="entry">
              <span class="entry__num mono">13</span>
              <div class="entry__body">
                <span class="entry__tag" data-kind="version">版本</span>
                <h3 class="entry__title">换了设备重新登录，还是回到赛事目录</h3>
                <p class="entry__time">版本 4.2 上线后 · 浏览体验</p>
                <details class="entry__more">
                  <summary>展开细节</summary>
                  <p>从电脑换到大屏，或者从大屏换到投屏，重新登录后直接进入赛事目录，不会掉回某个中间页面。看比赛看到一半换设备的人，对这一点体会最深。</p>
                </details>
              </div>
            </li>
            <li class="entry">
              <span class="entry__num mono">14</span>
              <div class="entry__body">
                <span class="entry__tag" data-kind="version">版本</span>
                <h3 class="entry__title">回看集锦分了三档，上线时间各不相同</h3>
                <p class="entry__time">本赛季初 · 功能更新</p>
                <details class="entry__more">
                  <summary>展开细节</summary>
                  <p>精选集锦、全场回看与关键节点剪辑三档，从终场到上线平均 35 分钟。想快点看结果的挑精选集锦，想复盘全场的选全场回看，费用构成可以在项目中心一并了解。</p>
                </details>
              </div>
            </li>
          </ol>
        </section>
      </div>
    </div>

    <section class="news-topics" aria-labelledby="news-topics-title" data-reveal>
      <div class="news-topics__head">
        <h2 class="news-topics__title" id="news-topics-title">赛季专题</h2>
        <p class="news-topics__lead">围绕一个具体场景把散落的笔记串起来读，比一条条翻更省时间。</p>
      </div>
      <div class="news-topics__rail" tabindex="0" aria-label="赛季专题，可横向滚动">
        <article class="topic-card">
          <figure class="topic-card__media">
            <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="室内大屏显示赛事战报数据，客厅观赛环境" loading="lazy" decoding="async">
          </figure>
          <span class="topic-card__tag">大屏观赛</span>
          <h3 class="topic-card__title">把客厅变成第二现场</h3>
          <p class="topic-card__text">从分辨率匹配到数据分区排布，专题把大屏观赛要用到的笔记收在一起，家庭用户和场馆运营方都能找到自己的那一条。</p>
          <a class="topic-card__link" href="/projects/">了解大屏服务</a>
        </article>
        <article class="topic-card">
          <span class="topic-card__tag">换设备续看</span>
          <h3 class="topic-card__title">从电脑到大屏，不丢进度</h3>
          <p class="topic-card__text">关于重新登录后的落点、设备同时登录的数量，以及切换时哪些信息会跟着走，专题里逐条讲清。</p>
          <a class="topic-card__link" href="/tutorial/">查看操作说明</a>
        </article>
        <article class="topic-card">
          <span class="topic-card__tag">入场动线</span>
          <h3 class="topic-card__title">散场比入场更需要提前想</h3>
          <p class="topic-card__text">看台分区调整、闸机放行顺序、夜间接驳线路，这些变化都会影响你几点出门，专题按场馆归类整理。</p>
          <a class="topic-card__link" href="/tutorial/">怎么看场馆信息</a>
        </article>
      </div>
    </section>

    <section class="news-cta" aria-labelledby="news-cta-title" data-reveal>
      <div class="news-cta__panel">
        <div class="news-cta__copy">
          <p class="eyebrow">读完笔记之后</p>
          <h2 class="news-cta__title" id="news-cta-title">想接着看回放，或者先弄清费用怎么算</h2>
          <p class="news-cta__text">回看集锦的三档内容、稳定版的周期选择，以及各自包含什么，在项目中心一次讲明白；第一次使用的话，从使用教程一步步走更顺。</p>
        </div>
        <div class="news-cta__actions">
          <a class="btn btn--primary" href="/projects/">前往项目中心</a>
          <a class="btn btn--ghost" href="/tutorial/">打开使用教程</a>
          <a class="news-cta__link" href="/consult/">场馆信息需要补充？联系咨询服务</a>
        </div>
      </div>
    </section>
  </div>
</main>

.page-news {
  --news-rail: 244px;
  --news-gap: clamp(20px, 3.2vw, 46px);
  background: var(--paper);
  color: var(--text);
}

.page-news .news-shell {
  padding-top: clamp(18px, 3.4vw, 34px);
  padding-bottom: clamp(56px, 9vw, 104px);
}

.page-news .news-hero {
  margin-top: clamp(16px, 3vw, 30px);
  padding-bottom: clamp(22px, 3vw, 34px);
  border-bottom: 2px solid var(--ink);
}

.page-news .news-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6.1vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 0.42em 0 0;
  max-width: 17ch;
}

.page-news .news-hero__lead {
  margin: clamp(14px, 2vw, 20px) 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.55vw, 17.5px);
  line-height: 1.85;
  color: var(--text);
}

.page-news .news-hero__meta {
  list-style: none;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 3vw, 36px);
  font-size: 13.5px;
  color: var(--muted);
}

.page-news .news-hero__meta li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.page-news .news-hero__num {
  font-size: 20px;
  font-weight: 700;
  color: var(--orange-deep);
  letter-spacing: -0.01em;
}

.page-news .news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  margin-top: clamp(26px, 4vw, 46px);
}

@media (min-width: 900px) {
  .page-news .news-layout {
    grid-template-columns: var(--news-rail) minmax(0, 1fr);
    align-items: start;
  }
}

.page-news .news-index {
  display: grid;
  gap: 18px;
  padding: 18px 16px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

@media (min-width: 900px) {
  .page-news .news-index {
    position: sticky;
    top: 118px;
  }
}

.page-news .news-index__label {
  margin: 0;
  font-family: var(--font-serif-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

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

.page-news .news-index__link {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}

.page-news .news-index__num {
  font-size: 12px;
  color: var(--orange-deep);
  letter-spacing: 0.05em;
}

.page-news .news-index__count {
  font-size: 12px;
  color: var(--muted);
}

.page-news .news-index__link:hover,
.page-news .news-index__link:focus-visible {
  background: var(--ink);
  color: var(--warm-white);
}

.page-news .news-index__link:hover .news-index__num,
.page-news .news-index__link:focus-visible .news-index__num,
.page-news .news-index__link:hover .news-index__count,
.page-news .news-index__link:focus-visible .news-index__count {
  color: var(--cyan);
}

.page-news .news-index__stage {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.page-news .news-index__stage-label {
  margin: 0 0 6px;
  font-family: var(--font-serif-label);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-news .stage-scale {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 26px;
}

.page-news .stage-scale::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--line);
}

.page-news .stage-scale__item {
  position: relative;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.page-news .stage-scale__item::before {
  content: "";
  position: absolute;
  top: -21px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper-soft);
  border: 2px solid var(--line);
}

.page-news .stage-scale__item.is-done::before {
  background: var(--ink);
  border-color: var(--ink);
}

.page-news .stage-scale__item.is-now {
  color: var(--orange-deep);
  font-weight: 700;
}

.page-news .stage-scale__item.is-now::before {
  background: var(--orange);
  border-color: var(--orange);
}

.page-news .news-index__figure {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink-2);
}

.page-news .news-index__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-news .news-index__figure figcaption {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--warm-white);
}

.page-news .news-group {
  margin-bottom: clamp(30px, 4.6vw, 54px);
}

.page-news .news-group:last-child {
  margin-bottom: 0;
}

.page-news .news-group__head {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.page-news .news-group__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.32rem, 2.6vw, 1.88rem);
  letter-spacing: -0.01em;
  color: var(--heading);
}

.page-news .news-group__num {
  font-size: 0.7em;
  color: var(--orange);
  letter-spacing: 0.04em;
}

.page-news .news-group__note {
  margin: 0;
  max-width: 64ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .entry {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 12px;
  padding: clamp(16px, 2.2vw, 24px) 0;
  border-bottom: 1px solid var(--line);
}

.page-news .entry__num {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.05em;
  padding-top: 3px;
}

.page-news .entry__body {
  min-width: 0;
}

.page-news .entry__tag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  background: var(--ink-2);
  color: var(--warm-white);
}

.page-news .entry__tag[data-kind="reports"] {
  background: var(--orange);
  color: var(--warm-white);
}

.page-news .entry__tag[data-kind="venue"] {
  background: var(--cyan);
  color: var(--ink);
}

.page-news .entry__tag[data-kind="version"] {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.page-news .entry__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.02rem, 2.1vw, 1.24rem);
  line-height: 1.48;
  color: var(--heading);
}

.page-news .entry__time {
  margin: 7px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.page-news .entry__more {
  margin-top: 10px;
}

.page-news .entry__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--orange-deep);
}

.page-news .entry__more summary::-webkit-details-marker {
  display: none;
}

.page-news .entry__more summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
}

.page-news .entry__more[open] summary::after {
  content: "−";
}

.page-news .entry__more p {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text);
}

.page-news .entry--feature .entry__media {
  margin: 0 0 14px;
}

.page-news .entry--feature .entry__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.page-news .venue-log {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

@media (min-width: 780px) {
  .page-news .venue-log {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
}

.page-news .venue-log__figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
}

.page-news .venue-log__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-news .venue-log__figure figcaption {
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--warm-white);
  border-top: 2px solid var(--orange);
}

.page-news .news-topics {
  margin: clamp(26px, 4vw, 46px) 0;
  padding: clamp(22px, 3.4vw, 36px) 0 clamp(20px, 3vw, 30px);
  background: var(--ink);
  border-radius: var(--radius-lg);
  color: var(--warm-white);
  overflow: hidden;
}

.page-news .news-topics__head {
  padding: 0 clamp(18px, 3.4vw, 36px);
  display: grid;
  gap: 8px;
}

.page-news .news-topics__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  letter-spacing: -0.01em;
}

.page-news .news-topics__lead {
  margin: 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 253, 248, 0.72);
}

.page-news .news-topics__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 82%);
  gap: 14px;
  margin-top: clamp(16px, 2.4vw, 24px);
  padding: 0 clamp(18px, 3.4vw, 36px) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.page-news .news-topics__rail:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

@media (min-width: 760px) {
  .page-news .news-topics__rail {
    grid-auto-columns: minmax(280px, 34%);
  }
}

.page-news .topic-card {
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  background: var(--ink-2);
  border-radius: var(--radius-md);
}

.page-news .topic-card__media {
  margin: 0 0 2px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.page-news .topic-card__media img {
  display: block;
  width: 100%;
  height: auto;
}

.page-news .topic-card__tag {
  justify-self: start;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: var(--warm-white);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.page-news .topic-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  line-height: 1.45;
  color: var(--warm-white);
}

.page-news .topic-card__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.78;
  color: rgba(255, 253, 248, 0.75);
}

.page-news .topic-card__link {
  justify-self: start;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 227, 200, 0.45);
  padding-bottom: 2px;
}

.page-news .topic-card__link:hover,
.page-news .topic-card__link:focus-visible {
  border-bottom-color: var(--cyan);
}

.page-news .news-cta {
  margin-top: clamp(28px, 4vw, 48px);
}

.page-news .news-cta__panel {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  padding: clamp(22px, 3.6vw, 40px);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-left: 6px solid var(--orange);
  border-radius: var(--radius-lg);
}

@media (min-width: 820px) {
  .page-news .news-cta__panel {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    align-items: center;
  }
}

.page-news .news-cta__title {
  margin: 0.4em 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.7vw, 1.72rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--heading);
}

.page-news .news-cta__text {
  margin: 12px 0 0;
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--text);
}

.page-news .news-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.page-news .news-cta__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(185, 55, 14, 0.4);
  padding-bottom: 2px;
}

.page-news .news-cta__link:hover,
.page-news .news-cta__link:focus-visible {
  border-bottom-color: var(--orange-deep);
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-index__link,
  .page-news .news-topics__rail {
    transition: none;
    scroll-behavior: auto;
  }
}