/* ==========================================================
   page-news · 专题中心
   作用域：.page-news
   ========================================================== */

.page-news {
  --news-accent-soft: rgba(47, 209, 138, 0.07);
  --news-accent-line: rgba(47, 209, 138, 0.35);
  --news-violet-soft: rgba(123, 97, 255, 0.07);
  --news-warn-soft: rgba(242, 180, 23, 0.09);
  --news-radius: var(--radius-m);
}

/* ---------- 首屏 ---------- */

.page-news .news-masthead {
  padding: 34px 0 48px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.page-news .news-masthead::after {
  content: "";
  position: absolute;
  right: -80px;
  top: 40px;
  width: 320px;
  height: 320px;
  border: 1px solid var(--grid-line);
  border-radius: 50%;
  pointer-events: none;
}

.page-news .news-masthead__inner {
  position: relative;
  max-width: 900px;
}

.page-news .news-masthead__coord {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

.page-news .news-masthead__coord::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--kiwi);
  flex: none;
}

.page-news .news-masthead__title {
  margin: 0 0 12px;
  font-size: clamp(42px, 9vw, 84px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--seed);
}

.page-news .news-masthead__sub {
  margin: 0 0 22px;
  font-size: clamp(16px, 2.2vw, 21px);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--kiwi-dark);
}

.page-news .news-masthead__lead {
  margin: 0 0 32px;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-news .news-masthead__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-news .news-masthead__stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--white);
}

.page-news .news-masthead__num {
  font-size: clamp(23px, 3.6vw, 31px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--seed);
}

.page-news .news-masthead__unit {
  font-size: 0.5em;
  font-weight: 500;
  margin-left: 3px;
  letter-spacing: 0;
  color: var(--graphite);
}

.page-news .news-masthead__cap {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--graphite);
}

/* ---------- 通用区块头 ---------- */

.page-news .news-sec-head {
  max-width: 720px;
  margin: 0 0 26px;
}

.page-news .news-sec-head__coord {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kiwi-dark);
}

.page-news .news-sec-head__title {
  margin: 0 0 12px;
  font-size: clamp(23px, 3.4vw, 33px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--seed);
}

.page-news .news-sec-head__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--graphite);
}

.page-news section[data-section] {
  padding: 52px 0;
  border-bottom: 1px solid var(--line);
}

.page-news section[data-section]:last-of-type {
  border-bottom: none;
  padding-bottom: 64px;
}

/* ---------- 01 分类 ---------- */

.page-news .news-cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
  gap: 12px;
}

.page-news .news-cat {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--kiwi);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease),
    transform 240ms var(--ease), box-shadow 240ms var(--ease);
}

.page-news .news-cat--violet {
  border-left-color: var(--violet);
}

.page-news .news-cat--warn {
  border-left-color: var(--warn);
}

.page-news .news-cat:hover,
.page-news .news-cat:focus-visible {
  background: var(--news-accent-soft);
  border-color: var(--kiwi);
  border-left-color: var(--kiwi);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  outline: none;
}

.page-news .news-cat--violet:hover,
.page-news .news-cat--violet:focus-visible {
  background: var(--news-violet-soft);
  border-color: var(--violet);
  border-left-color: var(--violet);
}

.page-news .news-cat--warn:hover,
.page-news .news-cat--warn:focus-visible {
  background: var(--news-warn-soft);
  border-color: var(--warn);
  border-left-color: var(--warn);
}

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

.page-news .news-cat__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--seed);
  letter-spacing: -0.005em;
}

.page-news .news-cat__count {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  color: var(--kiwi-dark);
}

.page-news .news-cat--violet .news-cat__count {
  color: var(--violet);
}

.page-news .news-cat--warn .news-cat__count {
  color: #B78409;
}

.page-news .news-cat__freq {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--graphite);
}

/* ---------- 02 编辑精选 ---------- */

.page-news .news-pick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}

.page-news .news-pick:hover {
  border-color: var(--accent-line, var(--line));
  box-shadow: var(--shadow-1);
}

.page-news .news-pick__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.page-news .news-pick__meta {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
}

.page-news .news-pick__title {
  margin: 0 0 12px;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--seed);
}

.page-news .news-pick__sum {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-news .news-pick__kicker {
  margin: 0;
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--kiwi);
  font-size: 14px;
  line-height: 1.72;
  font-weight: 600;
  color: var(--seed);
}

.page-news .news-pick__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--deep);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
}

.page-news .news-pick__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.page-news .news-pick__chart {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.page-news .news-pick__chart svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

.page-news .news-pick__chartcap {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--graphite);
}

/* ---------- 03 最新条目 ---------- */

.page-news .news-banner {
  margin: 0 0 22px;
  position: relative;
  overflow: hidden;
  background: var(--seed);
}

.page-news .news-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 4;
  object-fit: cover;
}

.page-news .news-banner__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(13, 20, 18, 0.72);
}

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

.page-news .news-row {
  --row-accent: var(--kiwi);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 20px 14px 20px 18px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  background: transparent;
  transition: background-color 240ms var(--ease), border-left-color 240ms var(--ease),
    padding-left 240ms var(--ease);
}

.page-news .news-row--violet {
  --row-accent: var(--violet);
}

.page-news .news-row--warn {
  --row-accent: var(--warn);
}

.page-news .news-row:hover,
.page-news .news-row:focus-within {
  background: var(--news-accent-soft);
  border-left-color: var(--row-accent);
  padding-left: 24px;
}

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

.page-news .news-row__league {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seed);
}

.page-news .news-row__time {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--graphite);
}

.page-news .news-row__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--seed);
}

.page-news .news-row__sum {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--graphite);
}

.page-news .news-latest__foot {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--graphite);
}

.page-news .news-latest__foot a {
  color: var(--kiwi-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-news .news-latest__foot a:hover {
  color: var(--kiwi);
}

/* ---------- 04 长期连载 ---------- */

.page-news .news-series__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-news .news-series__lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
}

.page-news .news-series__canvas,
.page-news .news-series__media {
  margin: 0;
  overflow: hidden;
  background: var(--deep);
}

.page-news .news-series__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  aspect-ratio: 8 / 5;
}

.page-news .news-series__body {
  padding: 22px 20px;
}

.page-news .news-series__title {
  margin: 12px 0 10px;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--seed);
}

.page-news .news-series__desc {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-news .news-series__freq {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kiwi-dark);
}

.page-news .news-series__read {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--graphite);
}

.page-news .news-series__item {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--kiwi);
  background: var(--white);
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}

.page-news .news-series__item:hover {
  border-color: var(--kiwi);
  box-shadow: var(--shadow-1);
}

.page-news .news-series__more {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
}

.page-news .news-series__more a {
  color: var(--kiwi-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--news-accent-line);
  padding-bottom: 1px;
}

.page-news .news-series__more a:hover {
  color: var(--kiwi);
  border-bottom-color: var(--kiwi);
}

/* ---------- 05 赛季阶段 ---------- */

.page-news .news-stages__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.page-news .news-stages__nav a {
  display: inline-block;
  padding: 7px 15px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seed);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  text-decoration: none;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease),
    color 200ms var(--ease);
}

.page-news .news-stages__nav a:hover,
.page-news .news-stages__nav a:focus-visible {
  background: var(--seed);
  border-color: var(--seed);
  color: var(--paper);
  outline: none;
}

.page-news .news-stages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-news .news-stage {
  --stage-accent: var(--kiwi);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px 20px;
  border: 1px solid var(--line);
  background: var(--white);
  scroll-margin-top: 130px;
  transition: box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}

.page-news .news-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stage-accent);
}

.page-news .news-stage--electric {
  --stage-accent: var(--electric);
}

.page-news .news-stage--violet {
  --stage-accent: var(--violet);
}

.page-news .news-stage--warn {
  --stage-accent: var(--warn);
}

.page-news .news-stage:hover {
  border-color: var(--stage-accent);
  box-shadow: var(--shadow-1);
}

.page-news .news-stage__coord {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
}

.page-news .news-stage__name {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--seed);
}

.page-news .news-stage__range {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--stage-accent);
}

.page-news .news-stage__desc {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-news .news-stage__count {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--graphite);
  border-top: 1px dashed var(--line);
}

/* ---------- 06 更新节奏 ---------- */

.page-news .news-cadence__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.page-news .news-cadence__title {
  margin: 0 0 14px;
  font-size: clamp(23px, 3.4vw, 33px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--seed);
}

.page-news .news-cadence__p {
  margin: 0 0 16px;
  max-width: 38em;
  font-size: 15px;
  line-height: 1.82;
  color: var(--ink-soft);
}

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

.page-news .news-cadence__p a {
  color: var(--kiwi-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-news .news-cadence__p a:hover {
  color: var(--kiwi);
}

.page-news .news-cadence__panel {
  background: var(--white);
}

.page-news .news-rhythm {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

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

.page-news .news-rhythm__row dt {
  font-size: 13.5px;
  color: var(--graphite);
}

.page-news .news-rhythm__row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--seed);
  white-space: nowrap;
}

/* ---------- 响应式 ---------- */

@media (min-width: 720px) {
  .page-news .news-masthead {
    padding: 46px 0 58px;
  }

  .page-news section[data-section] {
    padding: 62px 0;
  }

  .page-news .news-pick {
    padding: 26px;
  }

  .page-news .news-row {
    padding: 22px 20px 22px 22px;
  }

  .page-news .news-stages__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .page-news .news-series__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-news .news-series__lead {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }

  .page-news .news-series__media img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 260px;
  }

  .page-news .news-series__body {
    padding: 28px 26px;
  }
}

@media (min-width: 900px) {
  .page-news .news-cadence__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 34px;
  }

  .page-news .news-pick--media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 28px;
    align-items: stretch;
  }

  .page-news .news-pick--flip {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-news .news-pick--flip .news-pick__media {
    order: -1;
  }

  .page-news .news-pick__media img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 260px;
  }

  .page-news .news-row__sum {
    max-height: 3.45em;
    overflow: hidden;
    transition: max-height 340ms var(--ease), color 240ms var(--ease);
  }

  .page-news .news-row:hover .news-row__sum,
  .page-news .news-row:focus-within .news-row__sum {
    max-height: 12em;
    color: var(--seed);
  }
}

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

  .page-news .news-masthead__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .page-news .news-pick__media {
    clip-path: none;
  }

  .page-news .news-masthead__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .news-row:hover,
  .page-news .news-row:focus-within {
    padding-left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-cat,
  .page-news .news-row,
  .page-news .news-row__sum,
  .page-news .news-stage,
  .page-news .news-pick,
  .page-news .news-series__item {
    transition: none;
  }
}
<<<END>>>

等等——我用了 `news-row--kin`，但它没有在 CSS 里定义。让我检查一下：我在 HTML 里用了 `news-row--kin`，但 CSS 里只有 `news-row--violet` 和 `news-row--warn`。`--kin` 没有定义，会回退到默认的 `--row-accent: var(--kiwi)`。其实这样也行，但那个类名白写了。让我删掉它……算了，其实留着也无害，只是死类。不过要求是所有新类都要在 CSS 里定义。要么在 CSS 里定义 `.news-row--kin`，要么从 HTML 里删掉。

最简单的做法：从 HTML 里删掉 `news-row--kin`。

还要检查 `news-series__canvas`——我在 CSS 里定义了它，但在 HTML 里没用。死 CSS 不是大问题，但更干净的做法是删掉。

还有 `.news-pick { --accent-line: ... }` 在 hover 里用了 `var(--accent-line, var(--line))`——没问题。

还有 `news-cat--violet` 和 `news-cat--warn`——两处都定义了。

再确认一下 `.page-news section[data-section]:last-of-type`——最后一节是 `.news-cadence`，它带 `data-section="cadence"`。没错。

还有 `.panel--tick` 加了背景——`.panel` 本来就有白色背景。没问题。

最后确认一下没有遗漏，把 `news-row--kin` 删掉。
<main id="main-content" class="page-news">

  <div class="container">
    <nav class="breadcrumbs" aria-label="页面路径">
      <a href="/">首页</a>
      <span aria-hidden="true">／</span>
      <span aria-current="page">专题中心</span>
    </nav>
  </div>

  <section class="news-masthead" data-section="overview">
    <div class="container">
      <div class="news-masthead__inner">
        <p class="news-masthead__coord mono">TOPICS · 六项联赛 · 1248 轮</p>
        <h1 class="news-masthead__title">专题中心</h1>
        <p class="news-masthead__sub">轮次复盘、阵容变动与薪资结构，跟着赛季的节奏一篇一篇往下走</p>
        <p class="news-masthead__lead">中超、英超、西甲、意甲、德甲、法甲，六项联赛每一轮终场四十五分钟内，奇异果体育网就会发出这一轮的赛后复盘阵容核对，连同比分走势与积分变化一起。从二〇一六年做到现在，这样的条目已经累积八千多篇，你可以按联赛、按轮次、也可以按赛季所处的阶段，找到自己惦记的那一条。</p>
        <ul class="news-masthead__stats">
          <li>
            <span class="news-masthead__num mono">1248</span>
            <span class="news-masthead__cap">已覆盖轮次</span>
          </li>
          <li>
            <span class="news-masthead__num mono">8178</span>
            <span class="news-masthead__cap">专题条目总量</span>
          </li>
          <li>
            <span class="news-masthead__num mono">45<span class="news-masthead__unit">分钟</span></span>
            <span class="news-masthead__cap">终场到条目发布</span>
          </li>
          <li>
            <span class="news-masthead__num mono">6</span>
            <span class="news-masthead__cap">覆盖联赛</span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="news-cats reveal" data-section="categories">
    <div class="container">
      <header class="news-sec-head">
        <p class="news-sec-head__coord mono">01 / 分类导航</p>
        <h2 class="news-sec-head__title">六个方向，先挑你要的那一类</h2>
        <p class="news-sec-head__desc">联赛之间的差异很大，关注点也各不相同。有人只想知道这轮的名单变了没有，有人想连着看半个赛季的客场胜率走向，下面六个分类把这两种需求分开摆放。</p>
      </header>

      <ul class="news-cats__list">
        <li>
          <a class="news-cat" href="#latest" data-pill data-value="round">
            <span class="news-cat__name">轮次复盘</span>
            <span class="news-cat__count mono">3120</span>
            <span class="news-cat__freq">每轮更新 · 终场后 45 分钟内</span>
          </a>
        </li>
        <li>
          <a class="news-cat" href="#latest" data-pill data-value="lineup">
            <span class="news-cat__name">阵容核对</span>
            <span class="news-cat__count mono">2480</span>
            <span class="news-cat__freq">每轮更新 · 主客队名单交叉复核</span>
          </a>
        </li>
        <li>
          <a class="news-cat news-cat--violet" href="#latest" data-pill data-value="points">
            <span class="news-cat__name">积分逻辑</span>
            <span class="news-cat__count mono">960</span>
            <span class="news-cat__freq">每周两篇 · 净胜球与客场胜率为主</span>
          </a>
        </li>
        <li>
          <a class="news-cat news-cat--violet" href="#series" data-pill data-value="salary">
            <span class="news-cat__name">薪资结构观察</span>
            <span class="news-cat__count mono">420</span>
            <span class="news-cat__freq">每周一篇 · 冬窗与夏窗附近加密</span>
          </a>
        </li>
        <li>
          <a class="news-cat" href="#series" data-pill data-value="version">
            <span class="news-cat__name">版本日志</span>
            <span class="news-cat__count mono">58</span>
            <span class="news-cat__freq">随字段表复核定版更新</span>
          </a>
        </li>
        <li>
          <a class="news-cat news-cat--warn" href="#latest" data-pill data-value="preview">
            <span class="news-cat__name">赛前提示</span>
            <span class="news-cat__count mono">1140</span>
            <span class="news-cat__freq">每轮开赛前 · 轮换与伤停预判</span>
          </a>
        </li>
      </ul>
    </div>
  </section>

  <section class="news-featured reveal" data-section="featured">
    <div class="container">
      <header class="news-sec-head">
        <p class="news-sec-head__coord mono">02 / 编辑精选</p>
        <h2 class="news-sec-head__title">最近几轮里，这三条最值得先读</h2>
        <p class="news-sec-head__desc">结论清楚、数据角度彼此不重叠的深度条目。看完这三条，基本能摸到本赛季前半段的走向。</p>
      </header>

      <article class="news-pick news-pick--media">
        <div class="news-pick__body">
          <div class="news-pick__tags">
            <span class="tag tag--violet">积分逻辑</span>
            <span class="news-pick__meta mono">中超 · 第 24 轮</span>
          </div>
          <h3 class="news-pick__title">三支球队的客场胜率在同一轮抬升</h3>
          <p class="news-pick__sum">这三场客场比赛，客场控球率全都不占优，射正转化率却都在四成以上。赛后客场胜率分别从 28%、31%、25% 抬到 36%、38%、33%，但净胜球同步翻正的只有其中两支。</p>
          <p class="news-pick__kicker">客场胜率往上走，并不自动带来净胜球转正，两条线要分开看。</p>
        </div>
        <figure class="news-pick__media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="球场俯拍视角，画面叠加深色轮次编号与沿边线延伸的积分变化线条" decoding="async">
        </figure>
      </article>

      <article class="news-pick news-pick--media news-pick--flip">
        <div class="news-pick__body">
          <div class="news-pick__tags">
            <span class="tag tag--kiwi">阵容核对</span>
            <span class="news-pick__meta mono">英超 · 第 26 轮</span>
          </div>
          <h3 class="news-pick__title">补上换人时点这一列之后，前七十分钟的名单变化第一次完整可见</h3>
          <p class="news-pick__sum">阵容核对表新增了每次换人的分钟数与位置，替补登场的触球分布随之可查。把前后两版名单并排放在一起，能看清一支球队在第 60 分钟之后到底换了哪几个角色。</p>
          <p class="news-pick__kicker">同一份首发名单，加上换人时点之后，读出来的战术意图完全不同。</p>
        </div>
        <figure class="news-pick__media">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="名单表格与换人时点标记组成的信息图，青绿与墨黑配色" loading="lazy" decoding="async">
        </figure>
      </article>

      <article class="news-pick">
        <div class="news-pick__body">
          <div class="news-pick__tags">
            <span class="tag tag--violet">薪资结构观察</span>
            <span class="news-pick__meta mono">西甲 · 本赛季第一阶段</span>
          </div>
          <h3 class="news-pick__title">周薪区间往上走了半个档的六支球队，其中四支的积分排名同步上移</h3>
          <p class="news-pick__sum">把周薪区间、合同年限与奖金条款占比三条线并排放，排名变化的方向就比单看转会投入清楚得多。奖金条款占比越高的球队，赛季前段的排名波动通常也越大。</p>
          <p class="news-pick__kicker">固定周薪决定地板，奖金条款决定天花板，两者对排名的推力不一样。</p>
          <div class="news-pick__chart" aria-hidden="true">
            <svg viewBox="0 0 240 72" focusable="false">
              <line x1="0" y1="71" x2="240" y2="71" stroke="#E4E8E4" stroke-width="1"></line>
              <line x1="0" y1="36" x2="240" y2="36" stroke="#E4E8E4" stroke-width="1"></line>
              <polyline points="6,58 46,50 86,54 126,34 166,26 206,16 234,12" fill="none" stroke="#2FD18A" stroke-width="2" stroke-linejoin="round"></polyline>
              <polyline points="6,64 46,60 86,48 126,44 166,32 206,28 234,18" fill="none" stroke="#7B61FF" stroke-width="2" stroke-dasharray="4 4" stroke-linejoin="round"></polyline>
              <circle cx="234" cy="12" r="3.5" fill="#2FD18A"></circle>
              <circle cx="234" cy="18" r="3.5" fill="#7B61FF"></circle>
            </svg>
            <p class="news-pick__chartcap mono">实线：周薪区间中位上移幅度　虚线：奖金条款占比上浮幅度</p>
          </div>
        </div>
      </article>
    </div>
  </section>

  <section class="news-latest reveal" data-section="latest" id="latest">
    <div class="container">
      <header class="news-sec-head">
        <p class="news-sec-head__coord mono">03 / 最新条目</p>
        <h2 class="news-sec-head__title">按轮次倒序往下排</h2>
        <p class="news-sec-head__desc">从上一轮刚结束的，一直往前翻到本赛季开局阶段。把鼠标停在任意一行，摘要会展开。</p>
      </header>

      <figure class="news-banner">
        <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="客队看台局部与球场边线交错的冷调构图，画面中没有人物特写" loading="lazy" decoding="async">
        <figcaption class="news-banner__cap mono">边线与看台 · 客场作战的现场记录</figcaption>
      </figure>

      <ol class="news-list">
        <li class="news-row">
          <div class="news-row__meta">
            <span class="tag tag--kiwi">轮次复盘</span>
            <span class="news-row__league mono">中超 · 第 24 轮</span>
            <span class="news-row__time mono">上轮赛后四十五分钟</span>
          </div>
          <h3 class="news-row__title">三支客场球队同时取胜，客场胜率单轮抬升近十个百分点</h3>
          <p class="news-row__sum">三场客场比赛的控球率都不占优，但射正转化率全部超过四成。把这三场和最近五轮的客场数据排在一起看，抬升幅度超出了赛季均值。</p>
        </li>
        <li class="news-row">
          <div class="news-row__meta">
            <span class="tag tag--kiwi">阵容核对</span>
            <span class="news-row__league mono">英超 · 第 26 轮</span>
            <span class="news-row__time mono">上轮赛后三小时</span>
          </div>
          <h3 class="news-row__title">换人时点一列补上之后，前七十分钟的名单变化第一次完整可见</h3>
          <p class="news-row__sum">新增的一列记下每次换人的分钟与位置，替补登场后的触球区域分布也跟着可查。前后两版名单并排，能看清调整发生在哪个时间段。</p>
        </li>
        <li class="news-row news-row--violet">
          <div class="news-row__meta">
            <span class="tag tag--violet">薪资结构观察</span>
            <span class="news-row__league mono">西甲 · 本赛季第一阶段</span>
            <span class="news-row__time mono">本赛季第一阶段</span>
          </div>
          <h3 class="news-row__title">周薪区间上移的六支球队，其中四支的积分排名同步上移</h3>
          <p class="news-row__sum">把周薪区间、合同年限与奖金条款占比三条线并排放，排名变化的方向就比单看投入总额清楚。剩下两支的排名没动，合同年限都偏短。</p>
        </li>
        <li class="news-row news-row--violet">
          <div class="news-row__meta">
            <span class="tag tag--violet">积分逻辑</span>
            <span class="news-row__league mono">意甲 · 第 25 轮</span>
            <span class="news-row__time mono">两轮之前</span>
          </div>
          <h3 class="news-row__title">净胜球从 -3 走到 +2 只用了三场，积分却只涨四分</h3>
          <p class="news-row__sum">三场胜利里有两场是一球小胜，净胜球的抬升幅度明显大于积分名次的抬升幅度。这种组合在争夺欧战席位的球队身上出现得最多。</p>
        </li>
        <li class="news-row">
          <div class="news-row__meta">
            <span class="tag">版本日志</span>
            <span class="news-row__league mono">稳定版栏目 · v3.4</span>
            <span class="news-row__time mono">本赛季第一阶段</span>
          </div>
          <h3 class="news-row__title">第四版字段表扩充之后，新增的三个字段已进入当前位置</h3>
          <p class="news-row__sum">这次扩充集中在换人时点、射门区域与跑动距离三个方向。此前发布的条目也补上了这三个字段，可以直接对照前后版本的变化。</p>
        </li>
        <li class="news-row news-row--warn">
          <div class="news-row__meta">
            <span class="tag tag--warn">赛前提示</span>
            <span class="news-row__league mono">德甲 · 第 25 轮</span>
            <span class="news-row__time mono">本轮开赛前</span>
          </div>
          <h3 class="news-row__title">密集期第二周，三线作战球队的轮换名单预判</h3>
          <p class="news-row__sum">连续一周双赛的球队，中场与边后卫位置的调整幅度通常在两到三人之间。排一份预判名单，比赛名单公布后能立刻看出差在哪里。</p>
        </li>
        <li class="news-row news-row--violet">
          <div class="news-row__meta">
            <span class="tag tag--violet">积分逻辑</span>
            <span class="news-row__league mono">英超 · 第 25 轮</span>
            <span class="news-row__time mono">本赛季第一阶段</span>
          </div>
          <h3 class="news-row__title">客场胜率超过五成的四支球队，主场胜率反而都不到四成</h3>
          <p class="news-row__sum">主客场胜率的反差在高位球队身上最明显。把客场胜率单独拉出来看，赛程密度和旅途长度是绕不开的变量。</p>
        </li>
        <li class="news-row">
          <div class="news-row__meta">
            <span class="tag tag--kiwi">轮次复盘</span>
            <span class="news-row__league mono">法甲 · 第 24 轮</span>
            <span class="news-row__time mono">三周前</span>
          </div>
          <h3 class="news-row__title">净胜球差在两球以内的六场对决，制胜球有四场出现在补时</h3>
          <p class="news-row__sum">这六场比赛的下半场补时合计超过三十分钟，其中四场的最后一球都发生在补时阶段。攻防两端的体能分配在这类比赛里格外关键。</p>
        </li>
        <li class="news-row">
          <div class="news-row__meta">
            <span class="tag tag--kiwi">阵容核对</span>
            <span class="news-row__league mono">西甲 · 第 24 轮</span>
            <span class="news-row__time mono">上轮赛后两小时</span>
          </div>
          <h3 class="news-row__title">主客队名单交叉复核后，两处首发位置发生调整</h3>
          <p class="news-row__sum">两处调整都出现在中场：一次是因伤替换，一次是战术上往前推了一格。名单更新之后，这一轮的中场对位关系需要重新读一遍。</p>
        </li>
        <li class="news-row news-row--violet">
          <div class="news-row__meta">
            <span class="tag tag--violet">薪资结构观察</span>
            <span class="news-row__league mono">意甲 · 冬窗后第一轮</span>
            <span class="news-row__time mono">冬窗后第一轮</span>
          </div>
          <h3 class="news-row__title">奖金条款占比在冬窗之后的变化，四支球队上浮超过五个百分点</h3>
          <p class="news-row__sum">占比上浮与出场次数挂钩的条款增加有关，固定周薪部分基本没动。这类结构对球员出场时间的拉力，通常要到赛季后段才看得出来。</p>
        </li>
      </ol>

      <p class="news-latest__foot">对着条目里的数字发现自己手上的记录不一样？先到<a href="/troubleshooting/">问题排查</a>看看常见的几种情况，多半能找到原因。</p>
    </div>
  </section>

  <section class="news-series reveal" data-section="series" id="series">
    <div class="container">
      <header class="news-sec-head">
        <p class="news-sec-head__coord mono">04 / 长期连载</p>
        <h2 class="news-sec-head__title">三条一直在更的线</h2>
        <p class="news-sec-head__desc">不是单轮快评，而是跟着赛季一路记下去的观察。适合想把半个赛季连起来看的人。</p>
      </header>

      <div class="news-series__grid">
        <article class="news-series__lead">
          <figure class="news-series__media">
            <img src="{zhanqunpic:h:750w:1200}" width="1200" height="750" alt="周薪区间与合同年限排成的抽象条形图层，深墨绿底配青绿描边" loading="lazy" decoding="async">
          </figure>
          <div class="news-series__body">
            <span class="tag tag--violet">连载</span>
            <h3 class="news-series__title">赛季薪资结构观察</h3>
            <p class="news-series__desc">用周薪区间、合同年限与奖金条款占比三条线，跟着赛季进程看球队构成的长期变化。赛季开始、冬窗之后、赛季收尾各出一份汇总，中间按周更新单队解读。</p>
            <p class="news-series__freq mono">每周一篇 · 冬窗与夏窗附近加密</p>
            <p class="news-series__read">适合关注薪资与成绩关系的深度球迷、球迷社区运营者，以及需要引用合同结构数据的自媒体作者。</p>
          </div>
        </article>

        <article class="news-series__item">
          <span class="tag tag--kiwi">连载</span>
          <h3 class="news-series__title">客场胜率笔记</h3>
          <p class="news-series__desc">把每一轮客队的实际表现与赛季累计客场胜率放在一起看。赛程密度、旅途距离与轮换幅度，是这本笔记反复出现的三个角度。</p>
          <p class="news-series__freq mono">每两轮一篇 · 密集期随轮次跟进</p>
        </article>

        <article class="news-series__item">
          <span class="tag">连载</span>
          <h3 class="news-series__title">稳定版栏目版本日志</h3>
          <p class="news-series__desc">记录字段表从早期版本走到 v3.4 的每一次调整，以及调整之后旧条目是如何补齐的。想在自有产品里对齐字段的合作方，通常从这一条看起。</p>
          <p class="news-series__freq mono">每赛季复核定版后更新</p>
          <p class="news-series__more"><a href="/apps/">在应用中心查看 iOS 看球与稳定版栏目的完整字段说明</a></p>
        </article>
      </div>
    </div>
  </section>

  <section class="news-stages reveal" data-section="stages">
    <div class="container">
      <header class="news-sec-head">
        <p class="news-sec-head__coord mono">05 / 赛季阶段</p>
        <h2 class="news-sec-head__title">也可以按赛季的节奏来找</h2>
        <p class="news-sec-head__desc">赛季不同阶段，值得翻的内容并不一样。下面四段把条目按赛季位置重新归了一次。</p>
      </header>

      <nav class="news-stages__nav mono" aria-label="跳转到赛季阶段">
        <a href="#stage-open">开局</a>
        <a href="#stage-peak">密集期</a>
        <a href="#stage-winter">冬窗</a>
        <a href="#stage-final">收官</a>
      </nav>

      <div class="news-stages__grid">
        <article class="news-stage news-stage--kiwi" id="stage-open">
          <p class="news-stage__coord mono">STAGE 01</p>
          <h3 class="news-stage__name">开局</h3>
          <p class="news-stage__range mono">第 1 – 8 轮</p>
          <p class="news-stage__desc">新援出场时间、首发阵容确立、外援注册节奏，这一段最常被翻出来的几类条目。</p>
          <p class="news-stage__count mono">1240 篇</p>
        </article>

        <article class="news-stage news-stage--electric" id="stage-peak">
          <p class="news-stage__coord mono">STAGE 02</p>
          <h3 class="news-stage__name">密集期</h3>
          <p class="news-stage__range mono">第 9 – 24 轮</p>
          <p class="news-stage__desc">一周双赛下的轮换幅度、连续客场作战的胜率变化，以及体能分配带来的名单调整。</p>
          <p class="news-stage__count mono">3580 篇</p>
        </article>

        <article class="news-stage news-stage--violet" id="stage-winter">
          <p class="news-stage__coord mono">STAGE 03</p>
          <h3 class="news-stage__name">冬窗</h3>
          <p class="news-stage__range mono">第 25 – 28 轮</p>
          <p class="news-stage__desc">冬窗引援的首发占比、下半程保级队的净胜球修复，以及周薪结构在这个窗口前后的摆动。</p>
          <p class="news-stage__count mono">1860 篇</p>
        </article>

        <article class="news-stage news-stage--warn" id="stage-final">
          <p class="news-stage__coord mono">STAGE 04</p>
          <h3 class="news-stage__name">收官</h3>
          <p class="news-stage__range mono">第 29 – 34 轮</p>
          <p class="news-stage__desc">争冠与保级的分差推演、客场胜率的赛季终值对比，以及奖金条款触发后的出场时间变化。</p>
          <p class="news-stage__count mono">1498 篇</p>
        </article>
      </div>
    </div>
  </section>

  <section class="news-cadence reveal" data-section="cadence">
    <div class="container">
      <div class="news-cadence__grid">
        <div class="news-cadence__text">
          <p class="news-sec-head__coord mono">06 / 更新节奏</p>
          <h2 class="news-cadence__title">什么时候会有新东西</h2>
          <p class="news-cadence__p">专题中心每周更新三到五篇，赛季密集期每日更新。上一轮终场之后四十五分钟内，最先出现的是那一轮的复盘条目与阵容名单；积分逻辑和薪资结构观察的更新则集中在每周中段，方便连着前几轮一起读。</p>
          <p class="news-cadence__p">这套节奏靠站点现有的 42 名成员轮班撑起来——18 名数据校订员、9 名驻场核录员负责内容本身，产品、技术与客服团队处理栏目和反馈。完整的团队分工写在<a href="/about-us/">品牌自述</a>里。</p>
          <p class="news-cadence__p">想把摘要按周收到手上，可以从<a href="/connect/">联系通道</a>留言，写清楚你常看哪几项联赛即可。</p>
        </div>

        <div class="panel panel--tick news-cadence__panel">
          <p class="panel__coord mono">节奏一览</p>
          <dl class="news-rhythm">
            <div class="news-rhythm__row">
              <dt>常规周</dt>
              <dd class="mono">3 – 5 篇</dd>
            </div>
            <div class="news-rhythm__row">
              <dt>赛季密集期</dt>
              <dd class="mono">每日更新</dd>
            </div>
            <div class="news-rhythm__row">
              <dt>轮次终场之后</dt>
              <dd class="mono">45 分钟内</dd>
            </div>
            <div class="news-rhythm__row">
              <dt>版本日志</dt>
              <dd class="mono">每赛季一次</dd>
            </div>
            <div class="news-rhythm__row">
              <dt>薪资结构观察</dt>
              <dd class="mono">每周一篇</dd>
            </div>
          </dl>
          <p class="panel__foot">从二〇一六年起，这份更新已经连续做了一千二百四十八轮。</p>
        </div>
      </div>
    </div>
  </section>

</main>

/* ==========================================================
   page-news · 专题中心
   作用域：.page-news
   ========================================================== */

.page-news {
  --news-accent-soft: rgba(47, 209, 138, 0.07);
  --news-accent-line: rgba(47, 209, 138, 0.35);
  --news-violet-soft: rgba(123, 97, 255, 0.07);
  --news-warn-soft: rgba(242, 180, 23, 0.09);
}

/* ---------- 首屏 ---------- */

.page-news .news-masthead {
  padding: 34px 0 48px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.page-news .news-masthead::after {
  content: "";
  position: absolute;
  right: -90px;
  top: 30px;
  width: 300px;
  height: 300px;
  border: 1px solid var(--grid-line);
  border-radius: 50%;
  pointer-events: none;
}

.page-news .news-masthead__inner {
  position: relative;
  max-width: 900px;
}

.page-news .news-masthead__coord {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

.page-news .news-masthead__coord::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--kiwi);
  flex: none;
}

.page-news .news-masthead__title {
  margin: 0 0 12px;
  font-size: clamp(42px, 9vw, 84px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--seed);
}

.page-news .news-masthead__sub {
  margin: 0 0 22px;
  font-size: clamp(16px, 2.2vw, 21px);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--kiwi-dark);
}

.page-news .news-masthead__lead {
  margin: 0 0 32px;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-news .news-masthead__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-news .news-masthead__stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--white);
}

.page-news .news-masthead__num {
  font-size: clamp(23px, 3.6vw, 31px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--seed);
}

.page-news .news-masthead__unit {
  font-size: 0.5em;
  font-weight: 500;
  margin-left: 3px;
  letter-spacing: 0;
  color: var(--graphite);
}

.page-news .news-masthead__cap {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--graphite);
}

/* ---------- 通用区块头 ---------- */

.page-news section[data-section] {
  padding: 52px 0;
  border-bottom: 1px solid var(--line);
}

.page-news section[data-section]:last-of-type {
  border-bottom: none;
  padding-bottom: 64px;
}

.page-news .news-sec-head {
  max-width: 720px;
  margin: 0 0 26px;
}

.page-news .news-sec-head__coord {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kiwi-dark);
}

.page-news .news-sec-head__title {
  margin: 0 0 12px;
  font-size: clamp(23px, 3.4vw, 33px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--seed);
}

.page-news .news-sec-head__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--graphite);
}

/* ---------- 01 分类 ---------- */

.page-news .news-cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
  gap: 12px;
}

.page-news .news-cat {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--kiwi);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease),
    transform 240ms var(--ease), box-shadow 240ms var(--ease);
}

.page-news .news-cat--violet {
  border-left-color: var(--violet);
}

.page-news .news-cat--warn {
  border-left-color: var(--warn);
}

.page-news .news-cat:hover,
.page-news .news-cat:focus-visible {
  background: var(--news-accent-soft);
  border-color: var(--kiwi);
  border-left-color: var(--kiwi);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  outline: none;
}

.page-news .news-cat--violet:hover,
.page-news .news-cat--violet:focus-visible {
  background: var(--news-violet-soft);
  border-color: var(--violet);
  border-left-color: var(--violet);
}

.page-news .news-cat--warn:hover,
.page-news .news-cat--warn:focus-visible {
  background: var(--news-warn-soft);
  border-color: var(--warn);
  border-left-color: var(--warn);
}

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

.page-news .news-cat__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--seed);
  letter-spacing: -0.005em;
}

.page-news .news-cat__count {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  color: var(--kiwi-dark);
}

.page-news .news-cat--violet .news-cat__count {
  color: var(--violet);
}

.page-news .news-cat--warn .news-cat__count {
  color: #B78409;
}

.page-news .news-cat__freq {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--graphite);
}

/* ---------- 02 编辑精选 ---------- */

.page-news .news-pick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}

.page-news .news-pick:hover {
  border-color: var(--news-accent-line);
  box-shadow: var(--shadow-1);
}

.page-news .news-pick__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.page-news .news-pick__meta {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
}

.page-news .news-pick__title {
  margin: 0 0 12px;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--seed);
}

.page-news .news-pick__sum {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-news .news-pick__kicker {
  margin: 0;
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--kiwi);
  font-size: 14px;
  line-height: 1.72;
  font-weight: 600;
  color: var(--seed);
}

.page-news .news-pick__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--deep);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
}

.page-news .news-pick__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-news .news-pick__chart {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.page-news .news-pick__chart svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

.page-news .news-pick__chartcap {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--graphite);
}

/* ---------- 03 最新条目 ---------- */

.page-news .news-banner {
  margin: 0 0 22px;
  position: relative;
  overflow: hidden;
  background: var(--seed);
}

.page-news .news-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 4;
  object-fit: cover;
}

.page-news .news-banner__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(13, 20, 18, 0.72);
}

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

.page-news .news-row {
  --row-accent: var(--kiwi);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 20px 14px 20px 18px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  background: transparent;
  transition: background-color 240ms var(--ease), border-left-color 240ms var(--ease),
    padding-left 240ms var(--ease);
}

.page-news .news-row--violet {
  --row-accent: var(--violet);
}

.page-news .news-row--warn {
  --row-accent: var(--warn);
}

.page-news .news-row:hover,
.page-news .news-row:focus-within {
  background: var(--news-accent-soft);
  border-left-color: var(--row-accent);
  padding-left: 24px;
}

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

.page-news .news-row__league {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seed);
}

.page-news .news-row__time {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--graphite);
}

.page-news .news-row__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--seed);
}

.page-news .news-row__sum {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--graphite);
}

.page-news .news-latest__foot {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--graphite);
}

.page-news .news-latest__foot a {
  color: var(--kiwi-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-news .news-latest__foot a:hover {
  color: var(--kiwi);
}

/* ---------- 04 长期连载 ---------- */

.page-news .news-series__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-news .news-series__lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
}

.page-news .news-series__media {
  margin: 0;
  overflow: hidden;
  background: var(--deep);
}

.page-news .news-series__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.page-news .news-series__body {
  padding: 22px 20px;
}

.page-news .news-series__title {
  margin: 12px 0 10px;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--seed);
}

.page-news .news-series__desc {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-news .news-series__freq {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kiwi-dark);
}

.page-news .news-series__read {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--graphite);
}

.page-news .news-series__item {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--kiwi);
  background: var(--white);
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}

.page-news .news-series__item:hover {
  border-color: var(--kiwi);
  box-shadow: var(--shadow-1);
}

.page-news .news-series__more {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
}

.page-news .news-series__more a {
  color: var(--kiwi-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--news-accent-line);
  padding-bottom: 1px;
}

.page-news .news-series__more a:hover {
  color: var(--kiwi);
  border-bottom-color: var(--kiwi);
}

/* ---------- 05 赛季阶段 ---------- */

.page-news .news-stages__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.page-news .news-stages__nav a {
  display: inline-block;
  padding: 7px 15px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seed);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  text-decoration: none;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease),
    color 200ms var(--ease);
}

.page-news .news-stages__nav a:hover,
.page-news .news-stages__nav a:focus-visible {
  background: var(--seed);
  border-color: var(--seed);
  color: var(--paper);
  outline: none;
}

.page-news .news-stages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-news .news-stage {
  --stage-accent: var(--kiwi);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px 20px;
  border: 1px solid var(--line);
  background: var(--white);
  scroll-margin-top: 130px;
  transition: box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}

.page-news .news-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stage-accent);
}

.page-news .news-stage--electric {
  --stage-accent: var(--electric);
}

.page-news .news-stage--violet {
  --stage-accent: var(--violet);
}

.page-news .news-stage--warn {
  --stage-accent: var(--warn);
}

.page-news .news-stage:hover {
  border-color: var(--stage-accent);
  box-shadow: var(--shadow-1);
}

.page-news .news-stage__coord {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
}

.page-news .news-stage__name {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--seed);
}

.page-news .news-stage__range {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--stage-accent);
}

.page-news .news-stage__desc {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.page-news .news-stage__count {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--graphite);
  border-top: 1px dashed var(--line);
}

/* ---------- 06 更新节奏 ---------- */

.page-news .news-cadence__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.page-news .news-cadence__title {
  margin: 0 0 14px;
  font-size: clamp(23px, 3.4vw, 33px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--seed);
}

.page-news .news-cadence__p {
  margin: 0 0 16px;
  max-width: 38em;
  font-size: 15px;
  line-height: 1.82;
  color: var(--ink-soft);
}

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

.page-news .news-cadence__p a {
  color: var(--kiwi-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-news .news-cadence__p a:hover {
  color: var(--kiwi);
}

.page-news .news-cadence__panel {
  background: var(--white);
}

.page-news .news-rhythm {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

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

.page-news .news-rhythm__row dt {
  font-size: 13.5px;
  color: var(--graphite);
}

.page-news .news-rhythm__row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--seed);
  white-space: nowrap;
}

/* ---------- 响应式 ---------- */

@media (min-width: 720px) {
  .page-news .news-masthead {
    padding: 46px 0 58px;
  }

  .page-news section[data-section] {
    padding: 62px 0;
  }

  .page-news .news-pick {
    padding: 26px;
  }

  .page-news .news-row {
    padding: 22px 20px 22px 22px;
  }

  .page-news .news-stages__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .page-news .news-series__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-news .news-series__lead {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }

  .page-news .news-series__media img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 260px;
  }

  .page-news .news-series__body {
    padding: 28px 26px;
  }
}

@media (min-width: 900px) {
  .page-news .news-cadence__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 34px;
  }

  .page-news .news-pick--media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 28px;
    align-items: stretch;
  }

  .page-news .news-pick--flip {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-news .news-pick--flip .news-pick__media {
    order: -1;
  }

  .page-news .news-pick__media img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 260px;
  }

  .page-news .news-row__sum {
    max-height: 3.45em;
    overflow: hidden;
    transition: max-height 340ms var(--ease), color 240ms var(--ease);
  }

  .page-news .news-row:hover .news-row__sum,
  .page-news .news-row:focus-within .news-row__sum {
    max-height: 12em;
    color: var(--seed);
  }
}

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

  .page-news .news-stages__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .page-news .news-pick__media {
    clip-path: none;
  }

  .page-news .news-masthead__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .news-row:hover,
  .page-news .news-row:focus-within {
    padding-left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-cat,
  .page-news .news-row,
  .page-news .news-row__sum,
  .page-news .news-stage,
  .page-news .news-pick,
  .page-news .news-series__item,
  .page-news .news-stages__nav a {
    transition: none;
  }
}
<<<END>>>