.page-news {
  --news-gap: clamp(22px, 3.2vw, 42px);
  --news-edge: rgba(24, 74, 56, 0.62);
  --news-row-tint: rgba(24, 74, 56, 0.3);
  overflow-x: hidden;
}

.page-news .breadcrumb {
  margin-top: clamp(14px, 2.6vw, 26px);
}

/* ---------- 首屏 ---------- */
.page-news .news-mast {
  display: grid;
  gap: var(--news-gap);
  padding-block: clamp(22px, 4vw, 46px) clamp(18px, 3vw, 34px);
}

.page-news .news-mast h1 {
  margin: 0.35em 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4.6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--mist);
  max-width: 22ch;
}

.page-news .news-lede {
  margin: clamp(14px, 2vw, 20px) 0 0;
  max-width: 60ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.85;
  color: var(--slate);
}

.page-news .news-mast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 2.4vw, 26px);
}

.page-news .news-mast__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(170deg, var(--ink-800), var(--ink-850));
  padding: clamp(16px, 2.4vw, 24px);
}

.page-news .panel-cap {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-news .mast-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--news-edge);
}

.page-news .mast-stat__key {
  font-size: 13.5px;
  color: var(--slate);
}

.page-news .mast-stat__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 600;
  color: var(--gold-bright);
}

.page-news .panel-foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--slate);
}

@media (min-width: 920px) {
  .page-news .news-mast {
    grid-template-columns: minmax(0, 1.6fr) minmax(272px, 0.85fr);
    align-items: end;
  }
}

/* ---------- 头图 ---------- */
.page-news .news-banner {
  margin: 0 auto;
}

.page-news .news-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 700;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-news .news-banner__cap {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--slate);
  letter-spacing: 0.02em;
}

/* ---------- 更新列表 ---------- */
.page-news .news-board {
  padding-block: clamp(30px, 5vw, 64px);
}

.page-news .board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.page-news .news-board h2,
.page-news .news-versions h2,
.page-news .news-feedback h2,
.page-news .news-topics h2,
.page-news .news-report h2 {
  margin: 0 0 0.45em;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.9vw, 2.15rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--mist);
}

.page-news .board-lede {
  margin: 0;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--slate);
}

.page-news .board-count {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.page-news .board-count .mono {
  font-size: 1.4rem;
  color: var(--gold-bright);
  letter-spacing: 0;
  margin-right: 4px;
}

/* 筛选 */
.page-news .news-filters-wrap {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin-bottom: 4px;
}

.page-news .chip-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-news .filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-news .filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-right: 4px;
}

.page-news .chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 15px;
  border: 1px solid var(--news-edge);
  border-radius: 999px;
  font-size: 13px;
  color: var(--slate);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease),
    background-color 0.16s var(--ease);
}

.page-news .chip:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.page-news .news-board:has(#f-standings:checked) .chip[for="f-standings"],
.page-news .news-board:has(#f-squad:checked) .chip[for="f-squad"],
.page-news .news-board:has(#f-subscribe:checked) .chip[for="f-subscribe"],
.page-news .news-board:has(#f-version:checked) .chip[for="f-version"],
.page-news .news-board:has(#f-review:checked) .chip[for="f-review"],
.page-news .news-board:has(#f-correct:checked) .chip[for="f-correct"] {
  border-color: var(--gold);
  background-color: rgba(215, 169, 59, 0.16);
  color: var(--gold-bright);
}

.page-news .news-board:has(.chip-input:focus-visible) .chip-input:focus-visible + .filter-chips .chip {
  outline: none;
}

.page-news .news-board:has(.chip-input:checked) .news-row {
  opacity: 0.32;
}

.page-news .news-board:has(#f-standings:checked) .news-row[data-cat~="standings"],
.page-news .news-board:has(#f-squad:checked) .news-row[data-cat~="squad"],
.page-news .news-board:has(#f-subscribe:checked) .news-row[data-cat~="subscribe"],
.page-news .news-board:has(#f-version:checked) .news-row[data-cat~="version"],
.page-news .news-board:has(#f-review:checked) .news-row[data-cat~="review"],
.page-news .news-board:has(#f-correct:checked) .news-row[data-cat~="correct"] {
  opacity: 1;
  border-left-color: var(--gold);
}

/* 列表行 */
.page-news .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.page-news .news-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 18px 0 18px 14px;
  border-bottom: 1px solid var(--news-edge);
  border-left: 2px solid transparent;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
    opacity 0.18s var(--ease);
}

.page-news .news-row:hover,
.page-news .news-row:focus-within {
  border-left-color: var(--gold);
  background-color: var(--news-row-tint);
}

.page-news .row-stage {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate);
}

.page-news .row-stage::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background-color: var(--gold);
}

.page-news .row-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--mist);
}

.page-news .row-summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--slate);
}

.page-news .row-tags {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (min-width: 820px) {
  .page-news .news-row {
    grid-template-columns: 116px minmax(0, 1fr) 136px;
    gap: 22px;
    align-items: start;
    padding: 22px 0 22px 18px;
  }

  .page-news .row-stage {
    padding-top: 4px;
  }

  .page-news .row-tags {
    margin-top: 2px;
    justify-content: flex-end;
  }
}

/* ---------- 版本批次 ---------- */
.page-news .news-versions {
  display: grid;
  gap: var(--news-gap);
  padding-block: clamp(30px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.page-news .versions-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 800;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-news .versions-cap {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--slate);
}

.page-news .versions-lede {
  margin: 0 0 clamp(14px, 2vw, 20px);
  max-width: 60ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--slate);
}

.page-news .version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.page-news .version-list > li {
  border-bottom: 1px solid var(--news-edge);
}

.page-news .version-list details {
  padding: 14px 0;
}

.page-news .version-list summary {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mist);
  transition: color 0.16s var(--ease);
}

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

.page-news .version-list summary::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
  transition: transform 0.18s var(--ease);
}

.page-news .version-list details[open] summary::before {
  transform: rotate(45deg);
}

.page-news .version-list summary:hover {
  color: var(--gold-bright);
}

.page-news .version-no {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-news .version-title {
  font-weight: 700;
}

.page-news .version-text {
  margin: 10px 0 0 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate);
}

@media (min-width: 900px) {
  .page-news .news-versions {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
  }
}

/* ---------- 订阅摘要 ---------- */
.page-news .news-feedback {
  padding-block: clamp(30px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.page-news .feedback-head {
  margin-bottom: clamp(18px, 2.6vw, 28px);
}

.page-news .feedback-lede {
  margin: 0;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--slate);
}

.page-news .feedback-jump {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 204, 107, 0.45);
  padding-bottom: 2px;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.page-news .feedback-jump:hover {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

.page-news .feedback-grid {
  display: grid;
  gap: var(--news-gap);
}

.page-news .feedback-figure {
  margin: 0;
}

.page-news .feedback-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 1200;
  max-height: 460px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-news .feedback-figure figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--slate);
}

.page-news .timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 4px 0 0 24px;
}

.page-news .timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--line), rgba(24, 74, 56, 0.15));
}

.page-news .timeline > li {
  position: relative;
  padding-bottom: clamp(18px, 2.4vw, 26px);
}

.page-news .timeline > li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background-color: var(--ink-900);
}

.page-news .timeline-date {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-news .timeline-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--mist);
}

.page-news .timeline-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--slate);
}

@media (min-width: 860px) {
  .page-news .feedback-grid {
    grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr);
    align-items: start;
  }

  .page-news .feedback-figure img {
    max-height: none;
  }
}

/* ---------- 专题系列 ---------- */
.page-news .news-topics {
  padding-block: clamp(30px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.page-news .topics-head {
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.page-news .topics-lede {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--slate);
}

.page-news .topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
}

.page-news .topic-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius);
  color: var(--ink-900);
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}

.page-news .topic-card:hover {
  box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(6, 22, 17, 0.45);
  transform: translateY(-2px);
}

.page-news .topic-index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown);
}

.page-news .topic-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink-900);
}

.page-news .topic-card p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.75;
  color: #2c3a33;
}

.page-news .topic-link {
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-800);
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 42, 33, 0.4);
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.page-news .topic-link:hover {
  color: var(--brown);
  border-bottom-color: var(--brown);
}

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

/* ---------- 纠错入口 ---------- */
.page-news .news-report {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(10px, 2vw, 20px);
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(255, 107, 61, 0.55);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 107, 61, 0.08), rgba(12, 42, 33, 0.7));
}

.page-news .report-body p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--mist);
}

.page-news .report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(14px, 2vw, 20px);
}

.page-news .report-figure {
  margin: 0;
}

.page-news .report-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 900;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (min-width: 880px) {
  .page-news .news-report {
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
    align-items: center;
  }
}

/* ---------- 快捷跳转 ---------- */
.page-news .news-dock {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-news .news-dock a {
  display: block;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  color: var(--mist);
  background-color: rgba(8, 29, 22, 0.92);
  border: 1px solid var(--news-edge);
  border-radius: var(--radius);
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.page-news .news-dock a:hover,
.page-news .news-dock a:focus-visible {
  border-color: var(--gold);
  color: var(--gold-bright);
}

@media (min-width: 860px) {
  .page-news .news-dock {
    right: 22px;
    bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news * {
    transition: none;
  }

  .page-news .topic-card:hover {
    transform: none;
  }
}


<main id="main-content" class="page-news">
  <nav class="breadcrumb shell" aria-label="位置导航">
    <ol>
      <li><a href="/">赛事总览</a></li>
      <li aria-current="page">赛事动态</li>
    </ol>
  </nav>

  <header class="news-mast shell">
    <div class="news-mast__lead">
      <p class="eyebrow">资料更新 · 球队动态 · 栏目批次</p>
      <h1>积分校对、球队档案与订阅摘要，跟着每一轮往下走</h1>
      <p class="news-lede">
        金年会赛事在每个比赛日结束后统一校对积分榜与赛程，球队档案补全、专题复盘和订阅摘要也随栏目一起推进。
        最近动了哪些资料、改在哪个栏目、接下来去哪儿查，按赛季阶段排在这里，翻一遍就能接上进度。
      </p>
      <div class="news-mast__actions">
        <a class="btn btn--gold" href="/products/#v4-standings">查看V4积分榜</a>
        <a class="btn btn--ghost" href="#feedback">看订阅摘要</a>
      </div>
    </div>
    <aside class="news-mast__panel" aria-label="资料规模概览">
      <p class="panel-cap">Current Scope</p>
      <div class="mast-stat">
        <span class="mast-stat__key">联赛与杯赛专题</span>
        <span class="mast-stat__num">14</span>
      </div>
      <div class="mast-stat">
        <span class="mast-stat__key">球队档案</span>
        <span class="mast-stat__num">236</span>
      </div>
      <div class="mast-stat">
        <span class="mast-stat__key">资料团队</span>
        <span class="mast-stat__num">18</span>
      </div>
      <div class="mast-stat">
        <span class="mast-stat__key">栏目标签</span>
        <span class="mast-stat__num">6</span>
      </div>
      <p class="panel-foot">积分榜与赛程在每个比赛日结束后统一校对更新。</p>
    </aside>
  </header>

  <figure class="news-banner shell">
    <img src="{zhanqunpic:h:700w:1600}" width="1600" height="700" alt="暗调球场线条与数据网格叠加的横向抽象图">
    <figcaption class="news-banner__cap">赛场灯光下的数据网格：每一轮结束，表格与档案同步向前推进。</figcaption>
  </figure>

  <section class="news-board shell" id="updates" aria-labelledby="updates-title">
    <div class="board-head">
      <div>
        <h2 id="updates-title">最新资料更新</h2>
        <p class="board-lede">
          条目按赛季阶段归位：季前资料、常规轮次、冲刺阶段、赛后复盘。旁边的栏目标签告诉你这条动的是积分、
          赛程、球队还是复盘，点上方任意标签就能把对应条目单独拎出来看。
        </p>
      </div>
      <p class="board-count"><span class="mono">10</span> 条更新</p>
    </div>

    <div class="news-filters-wrap">
      <input class="chip-input" type="checkbox" id="f-standings">
      <input class="chip-input" type="checkbox" id="f-squad">
      <input class="chip-input" type="checkbox" id="f-subscribe">
      <input class="chip-input" type="checkbox" id="f-version">
      <input class="chip-input" type="checkbox" id="f-review">
      <input class="chip-input" type="checkbox" id="f-correct">
      <div class="filter-chips" role="group" aria-label="按栏目筛选更新条目">
        <span class="filter-label">栏目</span>
        <label class="chip" for="f-standings">积分</label>
        <label class="chip" for="f-squad">球队</label>
        <label class="chip" for="f-subscribe">订阅</label>
        <label class="chip" for="f-version">版本</label>
        <label class="chip" for="f-review">复盘</label>
        <label class="chip" for="f-correct">纠错</label>
      </div>
    </div>

    <ol class="news-list">
      <li class="news-row" data-cat="standings">
        <p class="row-stage">常规轮次</p>
        <div class="row-body">
          <h3 class="row-title">V4积分榜新增净胜球排序说明</h3>
          <p class="row-summary">积分相同的球队怎么排先后，规则写进了表头说明。以后看到并列的积分，直接对照进球与失球的差值，就能确认名次顺序，不必再另行推算。</p>
        </div>
        <ul class="row-tags"><li class="tag tag--gold">积分</li></ul>
      </li>
      <li class="news-row" data-cat="standings">
        <p class="row-stage">常规轮次</p>
        <div class="row-body">
          <h3 class="row-title">城市联赛第三轮资料校对完成</h3>
          <p class="row-summary">本轮全部场次的比分、胜平负与积分已经写进表格，赛程栏目里的场次数和积分榜逐队对齐，赛后核对不会出现一边多一场的情况。</p>
        </div>
        <ul class="row-tags"><li class="tag tag--gold">积分</li><li class="tag">赛程</li></ul>
      </li>
      <li class="news-row" data-cat="squad">
        <p class="row-stage">冲刺阶段</p>
        <div class="row-body">
          <h3 class="row-title">杯赛专题球队档案补全</h3>
          <p class="row-summary">杯赛参赛队伍的基础资料补齐了主场标识、赛季记录与历届晋级轮次。按球队名称检索即可定位，翻一支队的过往战绩不用再绕回上一级栏目。</p>
        </div>
        <ul class="row-tags"><li class="tag">球队</li></ul>
      </li>
      <li class="news-row" data-cat="subscribe">
        <p class="row-stage">常规轮次</p>
        <div class="row-body">
          <h3 class="row-title">订阅反馈栏目按周归档</h3>
          <p class="row-summary">关注球队的动态摘要按联赛与球队名称归档，一周整理一次。打开栏目时间线，从上往下读就是这支队伍这一段的走势，不用在多个页面之间来回比对。</p>
        </div>
        <ul class="row-tags"><li class="tag tag--gold">订阅</li></ul>
      </li>
      <li class="news-row" data-cat="version">
        <p class="row-stage">季前资料</p>
        <div class="row-body">
          <h3 class="row-title">多联赛切换带移动端优化</h3>
          <p class="row-summary">手机上换一个联赛后仍停在当前栏目，不会跳回上级目录。切换按钮加大，单手拇指也能够到，边走边查的体验顺了不少。</p>
        </div>
        <ul class="row-tags"><li class="tag">版本</li></ul>
      </li>
      <li class="news-row" data-cat="review">
        <p class="row-stage">赛后复盘</p>
        <div class="row-body">
          <h3 class="row-title">赛后复盘摘要新增关键事件栏</h3>
          <p class="row-summary">复盘摘要加了进球、换人与红黄牌三类事件，按发生顺序排列。想找一场比赛的转折点，扫一眼事件栏就够，不必再逐行翻完整份赛程。</p>
        </div>
        <ul class="row-tags"><li class="tag">复盘</li></ul>
      </li>
      <li class="news-row" data-cat="version">
        <p class="row-stage">常规轮次</p>
        <div class="row-body">
          <h3 class="row-title">青年组赛程表头固定优化</h3>
          <p class="row-summary">长表格往下滚动时表头保持可见，场次、胜平负与积分始终对得上号；横向滑动之后列名也跟着走，读表不容易看串行。</p>
        </div>
        <ul class="row-tags"><li class="tag">版本</li><li class="tag">赛程</li></ul>
      </li>
      <li class="news-row" data-cat="correct">
        <p class="row-stage">常规轮次</p>
        <div class="row-body">
          <h3 class="row-title">资料纠错通道处理时效说明</h3>
          <p class="row-summary">提交的纠错按提交、核对、回写三步走，常规问题在两个工作日内给出处理结果。发现比分或积分对不上，带上联赛与球队名称说一声就行。</p>
        </div>
        <ul class="row-tags"><li class="tag tag--signal">纠错</li></ul>
      </li>
      <li class="news-row" data-cat="squad">
        <p class="row-stage">季前资料</p>
        <div class="row-body">
          <h3 class="row-title">女子组球队档案补录常用简称</h3>
          <p class="row-summary">为女子组球队补充了常用简称与旧称，按平时习惯的叫法搜索也能命中对应档案，不必先记住全称再查。</p>
        </div>
        <ul class="row-tags"><li class="tag">球队</li></ul>
      </li>
      <li class="news-row" data-cat="standings">
        <p class="row-stage">冲刺阶段</p>
        <div class="row-body">
          <h3 class="row-title">多队同分排位规则单独整理</h3>
          <p class="row-summary">冲刺阶段常出现三队以上积分相同的情况，这次把比较顺序单独整理成说明：先看净胜球，再看进球数，逐级往下比，结果可以直接对照积分榜。</p>
        </div>
        <ul class="row-tags"><li class="tag tag--gold">积分</li></ul>
      </li>
    </ol>
  </section>

  <section class="news-versions shell" id="versions" aria-labelledby="versions-title">
    <div class="versions-visual">
      <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="多层版本卡片与金色箭头组成的抽象图" loading="lazy" decoding="async">
      <p class="versions-cap">版本批次按栏目归类、表格阅读和联赛切换三条线推进。</p>
    </div>
    <div class="versions-body">
      <h2 id="versions-title">版本与栏目迭代记录</h2>
      <p class="versions-lede">每一次批次都对应一类实际使用问题。点开任意一条，能看到这一批改了什么、你在页面上会感觉到什么变化。</p>
      <ol class="version-list">
        <li>
          <details>
            <summary>
              <span class="version-no mono">V4.7</span>
              <span class="version-title">栏目归类重组，积分榜与资料库并列常驻</span>
            </summary>
            <p class="version-text">积分榜与资料库升为同一层级的常驻入口，从首页或任一栏目进入都能看到。检索一条资料的平均路径由四步压缩到两到三步，找榜、翻档案、看复盘各走各的路。</p>
          </details>
        </li>
        <li>
          <details>
            <summary>
              <span class="version-no mono">V4.6</span>
              <span class="version-title">表格阅读优化：表头固定与等宽数字</span>
            </summary>
            <p class="version-text">积分榜与赛程表统一使用等宽数字并固定表头，场次、进球、失球、净胜球和积分排成一列到底。滚动时不丢列名，逐队对照比之前省眼睛。</p>
          </details>
        </li>
        <li>
          <details>
            <summary>
              <span class="version-no mono">V4.5</span>
              <span class="version-title">多联赛切换带落地，切换不再跳页</span>
            </summary>
            <p class="version-text">页面顶部加了一条联赛切换带，城市联赛、杯赛专题、青年组与女子组在同一页面内切换，当前看到的栏目会保留，不必返回上级目录重新找一遍。</p>
          </details>
        </li>
        <li>
          <details>
            <summary>
              <span class="version-no mono">V4.4</span>
              <span class="version-title">收藏与订阅反馈进栏目</span>
            </summary>
            <p class="version-text">常用页面可以加入收藏，下次打开直接从个人收藏区继续；球队动态改为在栏目时间线内查看，摘要按联赛和球队名称归档，翻看节奏更接近按周追更。</p>
          </details>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-feedback shell" id="feedback" aria-labelledby="feedback-title">
    <div class="feedback-head">
      <h2 id="feedback-title">球队反馈订阅摘要</h2>
      <p class="feedback-lede">
        想持续跟一支队，网页订阅球队反馈打开就是时间线：同一联赛的摘要排在一起，再按球队名称细看。
        下面是当前各组的归档方式，从节点往下读，就是一个阶段接一个阶段。
      </p>
      <a class="feedback-jump" href="#feedback-timeline">跳到时间线</a>
    </div>
    <div class="feedback-grid">
      <figure class="feedback-figure">
        <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="纵向时间线与球队标签节点组成的暗调图形" loading="lazy" decoding="async">
        <figcaption>时间线按联赛分组，节点之间用阶段标签衔接。</figcaption>
      </figure>
      <ol class="timeline" id="feedback-timeline">
        <li>
          <p class="timeline-date mono">按周</p>
          <h3 class="timeline-title">城市联赛 · 常规轮次摘要</h3>
          <p class="timeline-text">每轮结束后的比分变化、排名升降与下轮对手归进同一条摘要，跟着一支队追完整个常规轮次，只需要在这一列里往下翻。</p>
        </li>
        <li>
          <p class="timeline-date mono">按轮次</p>
          <h3 class="timeline-title">杯赛专题 · 淘汰阶段摘要</h3>
          <p class="timeline-text">淘汰轮次重点记录晋级与出局，摘要里带上两回合的比分合计，回看一支队走到哪一轮、在哪一场被拦下，一目了然。</p>
        </li>
        <li>
          <p class="timeline-date mono">按阶段</p>
          <h3 class="timeline-title">青年组 · 阶段性动态</h3>
          <p class="timeline-text">青年组按赛段汇编，把阵容轮换频繁、场次密集的阶段单独成条，关注年轻队伍成长节奏的读者可以按阶段回看。</p>
        </li>
        <li>
          <p class="timeline-date mono">按阶段</p>
          <h3 class="timeline-title">女子组 · 阶段性动态</h3>
          <p class="timeline-text">女子组摘要与球队档案联动，看到一条动态后可直接跳到对应档案，补齐这支队的赛季记录与历史成绩。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-topics shell" id="topics" aria-labelledby="topics-title">
    <div class="topics-head">
      <h2 id="topics-title">专题系列与编辑推荐</h2>
      <p class="topics-lede">专题把一个赛季里反复出现的读法串成一条线，复盘、档案和纠错各成系列，按需挑一条跟进。</p>
    </div>
    <div class="topic-grid">
      <article class="paper topic-card">
        <p class="topic-index mono">Series 01</p>
        <h3>赛后复盘系列</h3>
        <p>按轮次整理关键事件与比分走势，适合赛后当天速读，也适合赛季末回看一支队的整体轨迹。</p>
        <a class="topic-link" href="/products/">去资料与工具</a>
      </article>
      <article class="paper topic-card">
        <p class="topic-index mono">Series 02</p>
        <h3>球队档案系列</h3>
        <p>236 支球队的基础资料与赛季记录按联赛归档，配合常用简称检索，查一支不常被提起的队伍也很快。</p>
        <a class="topic-link" href="/products/#archive">进华人体育资料库</a>
      </article>
      <article class="paper topic-card">
        <p class="topic-index mono">Series 03</p>
        <h3>资料纠错与共建系列</h3>
        <p>从发现一处比分不对，到回写进表格，全过程留痕。想参与共建的球队与媒体，可以从这条线接入。</p>
        <a class="topic-link" href="/cooperation/">了解合作方向</a>
      </article>
    </div>
  </section>

  <section class="news-report shell" aria-labelledby="report-title">
    <div class="report-body">
      <h2 id="report-title">发现资料对不上？把线索递过来</h2>
      <p>
        比分、积分、球队名称或赛季记录有出入，带上联赛与球队名称说明位置即可。常见的资料问题在两个工作日内处理完毕，
        核对清楚后会回写到对应栏目；涉及内容共建与媒体引用，也可以走同一条通道。
      </p>
      <div class="report-actions">
        <a class="btn btn--gold" href="/cooperation/">提交资料问题</a>
        <a class="btn btn--ghost" href="/troubleshooting/">先看帮助中心</a>
      </div>
    </div>
    <figure class="report-figure">
      <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="纸张叠层与战术板标记组成的专题封面抽象图" loading="lazy" decoding="async">
    </figure>
  </section>

  <div class="news-dock" aria-label="快捷跳转">
    <a href="/products/#v4-standings">积分榜</a>
    <a href="#main-content">回顶部</a>
  </div>
</main>

.page-news {
  --news-gap: clamp(22px, 3.2vw, 42px);
  --news-edge: rgba(24, 74, 56, 0.62);
  --news-row-tint: rgba(24, 74, 56, 0.3);
  overflow-x: hidden;
}

.page-news .breadcrumb {
  margin-top: clamp(14px, 2.6vw, 26px);
}

/* ---------- 首屏 ---------- */
.page-news .news-mast {
  display: grid;
  gap: var(--news-gap);
  padding-block: clamp(22px, 4vw, 46px) clamp(18px, 3vw, 34px);
}

.page-news .news-mast h1 {
  margin: 0.35em 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4.6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--mist);
  max-width: 22ch;
}

.page-news .news-lede {
  margin: clamp(14px, 2vw, 20px) 0 0;
  max-width: 60ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.85;
  color: var(--slate);
}

.page-news .news-mast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 2.4vw, 26px);
}

.page-news .news-mast__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(170deg, var(--ink-800), var(--ink-850));
  padding: clamp(16px, 2.4vw, 24px);
}

.page-news .panel-cap {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-news .mast-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--news-edge);
}

.page-news .mast-stat__key {
  font-size: 13.5px;
  color: var(--slate);
}

.page-news .mast-stat__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 600;
  color: var(--gold-bright);
}

.page-news .panel-foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--slate);
}

@media (min-width: 920px) {
  .page-news .news-mast {
    grid-template-columns: minmax(0, 1.6fr) minmax(272px, 0.85fr);
    align-items: end;
  }
}

/* ---------- 头图 ---------- */
.page-news .news-banner {
  margin: 0 auto;
}

.page-news .news-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 700;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-news .news-banner__cap {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--slate);
  letter-spacing: 0.02em;
}

/* ---------- 更新列表 ---------- */
.page-news .news-board {
  padding-block: clamp(30px, 5vw, 64px);
}

.page-news .board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.page-news .news-board h2,
.page-news .news-versions h2,
.page-news .news-feedback h2,
.page-news .news-topics h2,
.page-news .news-report h2 {
  margin: 0 0 0.45em;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.9vw, 2.15rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--mist);
}

.page-news .board-lede {
  margin: 0;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--slate);
}

.page-news .board-count {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.page-news .board-count .mono {
  font-size: 1.4rem;
  color: var(--gold-bright);
  letter-spacing: 0;
  margin-right: 4px;
}

/* 筛选 */
.page-news .news-filters-wrap {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin-bottom: 4px;
}

.page-news .chip-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-news .filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-news .filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-right: 4px;
}

.page-news .chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 15px;
  border: 1px solid var(--news-edge);
  border-radius: 999px;
  font-size: 13px;
  color: var(--slate);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease),
    background-color 0.16s var(--ease);
}

.page-news .chip:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.page-news .news-board:has(#f-standings:checked) .chip[for="f-standings"],
.page-news .news-board:has(#f-squad:checked) .chip[for="f-squad"],
.page-news .news-board:has(#f-subscribe:checked) .chip[for="f-subscribe"],
.page-news .news-board:has(#f-version:checked) .chip[for="f-version"],
.page-news .news-board:has(#f-review:checked) .chip[for="f-review"],
.page-news .news-board:has(#f-correct:checked) .chip[for="f-correct"] {
  border-color: var(--gold);
  background-color: rgba(215, 169, 59, 0.16);
  color: var(--gold-bright);
}

.page-news .chip-input:focus-visible + .filter-chips {
  outline: none;
}

.page-news .news-board:has(.chip-input:checked) .news-row {
  opacity: 0.32;
}

.page-news .news-board:has(#f-standings:checked) .news-row[data-cat~="standings"],
.page-news .news-board:has(#f-squad:checked) .news-row[data-cat~="squad"],
.page-news .news-board:has(#f-subscribe:checked) .news-row[data-cat~="subscribe"],
.page-news .news-board:has(#f-version:checked) .news-row[data-cat~="version"],
.page-news .news-board:has(#f-review:checked) .news-row[data-cat~="review"],
.page-news .news-board:has(#f-correct:checked) .news-row[data-cat~="correct"] {
  opacity: 1;
  border-left-color: var(--gold);
}

/* 列表行 */
.page-news .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.page-news .news-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 18px 0 18px 14px;
  border-bottom: 1px solid var(--news-edge);
  border-left: 2px solid transparent;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
    opacity 0.18s var(--ease);
}

.page-news .news-row:hover,
.page-news .news-row:focus-within {
  border-left-color: var(--gold);
  background-color: var(--news-row-tint);
}

.page-news .row-stage {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate);
}

.page-news .row-stage::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background-color: var(--gold);
}

.page-news .row-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--mist);
}

.page-news .row-summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--slate);
}

.page-news .row-tags {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (min-width: 820px) {
  .page-news .news-row {
    grid-template-columns: 116px minmax(0, 1fr) 136px;
    gap: 22px;
    align-items: start;
    padding: 22px 0 22px 18px;
  }

  .page-news .row-stage {
    padding-top: 4px;
  }

  .page-news .row-tags {
    margin-top: 2px;
    justify-content: flex-end;
  }
}

/* ---------- 版本批次 ---------- */
.page-news .news-versions {
  display: grid;
  gap: var(--news-gap);
  padding-block: clamp(30px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.page-news .versions-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 800;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-news .versions-cap {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--slate);
}

.page-news .versions-lede {
  margin: 0 0 clamp(14px, 2vw, 20px);
  max-width: 60ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--slate);
}

.page-news .version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.page-news .version-list > li {
  border-bottom: 1px solid var(--news-edge);
}

.page-news .version-list details {
  padding: 14px 0;
}

.page-news .version-list summary {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mist);
  transition: color 0.16s var(--ease);
}

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

.page-news .version-list summary::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
  transition: transform 0.18s var(--ease);
}

.page-news .version-list details[open] summary::before {
  transform: rotate(45deg);
}

.page-news .version-list summary:hover {
  color: var(--gold-bright);
}

.page-news .version-no {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-news .version-title {
  font-weight: 700;
}

.page-news .version-text {
  margin: 10px 0 0 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate);
}

@media (min-width: 900px) {
  .page-news .news-versions {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
  }
}

/* ---------- 订阅摘要 ---------- */
.page-news .news-feedback {
  padding-block: clamp(30px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.page-news .feedback-head {
  margin-bottom: clamp(18px, 2.6vw, 28px);
}

.page-news .feedback-lede {
  margin: 0;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--slate);
}

.page-news .feedback-jump {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 204, 107, 0.45);
  padding-bottom: 2px;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.page-news .feedback-jump:hover {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

.page-news .feedback-grid {
  display: grid;
  gap: var(--news-gap);
}

.page-news .feedback-figure {
  margin: 0;
}

.page-news .feedback-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 1200;
  max-height: 460px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-news .feedback-figure figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--slate);
}

.page-news .timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 4px 0 0 24px;
}

.page-news .timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--line), rgba(24, 74, 56, 0.15));
}

.page-news .timeline > li {
  position: relative;
  padding-bottom: clamp(18px, 2.4vw, 26px);
}

.page-news .timeline > li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background-color: var(--ink-900);
}

.page-news .timeline-date {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-news .timeline-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--mist);
}

.page-news .timeline-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--slate);
}

@media (min-width: 860px) {
  .page-news .feedback-grid {
    grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr);
    align-items: start;
  }

  .page-news .feedback-figure img {
    max-height: none;
  }
}

/* ---------- 专题系列 ---------- */
.page-news .news-topics {
  padding-block: clamp(30px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.page-news .topics-head {
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.page-news .topics-lede {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--slate);
}

.page-news .topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
}

.page-news .topic-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius);
  color: var(--ink-900);
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}

.page-news .topic-card:hover {
  box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(6, 22, 17, 0.45);
  transform: translateY(-2px);
}

.page-news .topic-index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown);
}

.page-news .topic-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink-900);
}

.page-news .topic-card p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.75;
  color: #2c3a33;
}

.page-news .topic-link {
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-800);
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 42, 33, 0.4);
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.page-news .topic-link:hover {
  color: var(--brown);
  border-bottom-color: var(--brown);
}

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

/* ---------- 纠错入口 ---------- */
.page-news .news-report {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(10px, 2vw, 20px);
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(255, 107, 61, 0.55);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 107, 61, 0.08), rgba(12, 42, 33, 0.7));
}

.page-news .report-body p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--mist);
}

.page-news .report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(14px, 2vw, 20px);
}

.page-news .report-figure {
  margin: 0;
}

.page-news .report-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 900;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (min-width: 880px) {
  .page-news .news-report {
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
    align-items: center;
  }
}

/* ---------- 快捷跳转 ---------- */
.page-news .news-dock {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-news .news-dock a {
  display: block;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  color: var(--mist);
  background-color: rgba(8, 29, 22, 0.92);
  border: 1px solid var(--news-edge);
  border-radius: var(--radius);
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.page-news .news-dock a:hover,
.page-news .news-dock a:focus-visible {
  border-color: var(--gold);
  color: var(--gold-bright);
}

@media (min-width: 860px) {
  .page-news .news-dock {
    right: 22px;
    bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news * {
    transition: none;
  }

  .page-news .topic-card:hover {
    transform: none;
  }
}