/* ===== 赛况专栏 · page-news 页面专属样式 ===== */

.page-news {
  --nw-line: rgba(46, 74, 63, .45);
  --nw-line-soft: rgba(46, 74, 63, .28);
  --nw-soft: rgba(53, 232, 181, .1);
  --nw-surface: #0F1615;
  --nw-surface-2: #14201C;
  --nw-shadow: 6px 6px 0 rgba(18, 163, 107, .22);
  padding-bottom: 24px;
  overflow-x: hidden;
}

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

.page-news .news-hero {
  position: relative;
  padding: 24px 0 0;
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(53, 232, 181, .055) 0 2px,
    transparent 2px 15px
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
  pointer-events: none;
}

.page-news .news-hero .wrap {
  position: relative;
  z-index: 1;
}

.page-news .news-hero__kicker {
  margin: 18px 0 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--cyan);
}

.page-news .news-hero h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 11vw, 104px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--paper);
}

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

.page-news .news-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--muted);
}

.page-news .news-hero__meta .data-chip__value {
  margin-right: 4px;
  color: var(--orange);
  font-weight: 700;
}

.page-news .news-hero__figure {
  margin: 28px 0 0;
  border: 2px solid var(--line);
  background: var(--panel);
  box-shadow: var(--nw-shadow);
  overflow: hidden;
}

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

/* ---------- 通用章节抬头微调 ---------- */

.page-news .section-head {
  margin-bottom: 22px;
}

.page-news .section-head__num {
  font-family: var(--font-mono);
  color: var(--clay);
  letter-spacing: .1em;
}

.page-news .section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-news .section-head__note {
  max-width: 52ch;
  color: var(--muted);
}

/* ---------- 主列表 ---------- */

.page-news .news-feed {
  position: relative;
  padding: 54px 0 40px;
}

.page-news .feed {
  border: 2px solid var(--line);
  background: var(--nw-surface);
}

.page-news .feed__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--line);
  background: var(--nw-surface-2);
}

.page-news .feed__tabs {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .feed__tab {
  display: inline-block;
  padding: 8px 20px;
  border: 2px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--muted);
  text-decoration: none;
  background: transparent;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

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

.page-news .feed__tab[href="#feed-reports"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
  font-weight: 700;
}

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

.page-news .feed__cat {
  padding: 4px 10px;
  border: 1px solid var(--nw-line);
  background: rgba(18, 163, 107, .06);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--muted);
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.page-news .feed__cat:hover,
.page-news .feed__cat:focus-visible {
  border-color: var(--cyan);
  background: var(--nw-soft);
  color: var(--cyan);
}

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

.page-news .feed-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-areas:
    "time main"
    "tags tags";
  gap: 10px 14px;
  padding: 16px 16px 18px;
  border-bottom: 1px solid var(--nw-line-soft);
  transition: background-color .16s ease, box-shadow .16s ease;
}

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

.page-news .feed-row:hover,
.page-news .feed-row:focus-within,
.page-news .feed-row:focus {
  background: rgba(53, 232, 181, .045);
  box-shadow: inset 3px 0 0 var(--cyan);
  outline: none;
}

.page-news .feed-row__time {
  grid-area: time;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--cyan);
  padding-top: 2px;
}

.page-news .feed-row__main {
  grid-area: main;
  min-width: 0;
}

.page-news .feed-row__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--paper);
}

.page-news .feed-row__note {
  position: absolute;
  left: 76px;
  top: calc(100% - 8px);
  z-index: 6;
  max-width: 330px;
  padding: 9px 13px;
  border: 2px solid var(--cyan);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  pointer-events: none;
}

.page-news .feed-row:hover .feed-row__note,
.page-news .feed-row:focus .feed-row__note,
.page-news .feed-row:focus-within .feed-row__note {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-news .feed-row__tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.page-news .feed__foot {
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--nw-line-soft);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* 标签切换：支持 :has 时在同一容器内切换面板 */
@supports selector(:has(*)) {
  .page-news .feed__panel--clips {
    display: none;
  }

  .page-news .feed:has(#feed-clips:target) .feed__panel--clips {
    display: block;
  }

  .page-news .feed:has(#feed-clips:target) .feed__panel--reports {
    display: none;
  }

  .page-news .feed:has(#feed-clips:target) .feed__tab[href="#feed-reports"] {
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
    font-weight: 400;
  }

  .page-news .feed:has(#feed-clips:target) .feed__tab[href="#feed-clips"] {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--ink);
    font-weight: 700;
  }
}

/* ---------- 上下班速览 ---------- */

.page-news .news-brief {
  padding: 22px 0 46px;
}

.page-news .brief__media {
  margin: 0 0 24px;
  border: 2px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

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

.page-news .brief__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--nw-line-soft);
  border: 1px solid var(--nw-line-soft);
}

.page-news .brief__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 16px 16px 18px;
  background: var(--nw-surface);
}

.page-news .brief__score {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--orange);
}

.page-news .brief__line {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--paper);
}

.page-news .brief__star {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

.page-news .brief__note {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--clay);
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 视频集锦 ---------- */

.page-news .news-clips {
  padding: 44px 0;
  border-top: 2px solid var(--line);
  background: linear-gradient(180deg, rgba(18, 163, 107, .06) 0%, transparent 46%);
}

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

.page-news .clips__tags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--nw-line-soft);
  border: 1px solid var(--nw-line-soft);
}

.page-news .clips__tag {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--nw-surface);
  transition: background-color .16s ease;
}

.page-news .clips__tag:hover {
  background: var(--nw-surface-2);
}

.page-news .clips__tag-name {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--cyan);
}

.page-news .clips__tag-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-news .clips__hint {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .clips__media {
  margin: 26px 0 0;
  border: 2px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.page-news .clips__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 6.5;
  object-fit: cover;
}

/* ---------- 专题与复盘 ---------- */

.page-news .news-series {
  padding: 44px 0;
}

.page-news .series__banner {
  margin: 0 0 28px;
  border: 2px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.page-news .series__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

.page-news .series__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--nw-line-soft);
  border: 1px solid var(--nw-line-soft);
}

.page-news .series__item {
  position: relative;
  padding: 20px 18px 22px 18px;
  background: var(--nw-surface);
}

.page-news .series__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--clay);
  margin-bottom: 8px;
}

.page-news .series__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--paper);
}

.page-news .series__desc {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .series__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--orange);
}

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

.page-news .news-cadence {
  padding: 44px 0;
  border-top: 1px solid var(--nw-line);
  border-bottom: 1px solid var(--nw-line);
  background: var(--nw-surface-2);
}

.page-news .cadence {
  display: grid;
  gap: 1px;
  background: var(--nw-line-soft);
  border: 1px solid var(--nw-line-soft);
}

.page-news .cadence__item {
  padding: 20px 18px 22px;
  background: var(--nw-surface);
}

.page-news .cadence__item--main {
  box-shadow: inset 4px 0 0 var(--green);
}

.page-news .cadence__label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--muted);
}

.page-news .cadence__item--main .cadence__label {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-news .cadence__value {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: clamp(26px, 6vw, 38px);
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--paper);
}

.page-news .cadence__item--main .cadence__value {
  color: var(--orange);
}

.page-news .cadence__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .cadence__foot {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--green);
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 订阅与提醒 ---------- */

.page-news .news-subscribe {
  padding: 46px 0 30px;
}

.page-news .subscribe__grid {
  display: grid;
  gap: 26px;
}

.page-news .subscribe__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--nw-line-soft);
  border: 1px solid var(--nw-line-soft);
}

.page-news .subscribe__list li {
  position: relative;
  padding: 14px 16px 14px 40px;
  background: var(--nw-surface);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--paper);
}

.page-news .subscribe__list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 21px;
  width: 12px;
  height: 2px;
  background: var(--cyan);
}

.page-news .subscribe__side {
  border: 2px solid var(--line);
  padding: 20px 18px 22px;
  background: var(--nw-surface-2);
}

.page-news .subscribe__tip {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper);
}

.page-news .subscribe__contact {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.9;
  color: var(--muted);
  word-break: break-word;
}

.page-news .subscribe__contact a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 232, 181, .4);
}

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

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

.page-news .subscribe__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-news .subscribe__actions .btn {
  text-decoration: none;
  font-size: 14px;
}

/* ---------- 响应式：平板及以上 ---------- */

@media (min-width: 700px) {

  .page-news .news-hero {
    padding-top: 30px;
  }

  .page-news .news-hero__figure img {
    aspect-ratio: 16 / 6;
  }

  .page-news .feed-row {
    grid-template-columns: 70px minmax(0, 1fr) auto;
    grid-template-areas: "time main tags";
    align-items: start;
    gap: 0 18px;
    padding: 18px 20px;
  }

  .page-news .feed-row__tags {
    justify-content: flex-end;
    max-width: 210px;
  }

  .page-news .feed-row__note {
    left: 88px;
  }

  .page-news .brief__item {
    grid-template-columns: 130px minmax(0, 1fr);
    grid-template-areas:
      "score line"
      "score star";
    align-items: baseline;
    gap: 4px 20px;
  }

  .page-news .brief__score {
    grid-area: score;
  }

  .page-news .brief__line {
    grid-area: line;
  }

  .page-news .brief__star {
    grid-area: star;
  }

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

/* ---------- 响应式：桌面 ---------- */

@media (min-width: 940px) {

  .page-news .news-hero__lede {
    font-size: 17px;
  }

  .page-news .news-feed {
    padding: 66px 0 48px;
  }

  .page-news .feed-row__text {
    font-size: 16px;
  }

  .page-news .brief {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 46px;
    align-items: start;
  }

  .page-news .brief__media {
    margin: 6px 0 0;
    position: sticky;
    top: 96px;
  }

  .page-news .clips__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 44px;
    align-items: center;
  }

  .page-news .clips__media {
    margin: 0;
  }

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

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

  .page-news .subscribe__grid {
    grid-template-columns: 7fr 5fr;
    gap: 34px;
    align-items: start;
  }
}

@media (min-width: 1180px) {

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

  .page-news .feed-row__note {
    left: 112px;
  }

  .page-news .news-hero__figure {
    margin-top: 34px;
  }
}

/* ---------- 降低动效 ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-news .feed__tab,
  .page-news .feed__cat,
  .page-news .feed-row,
  .page-news .feed-row__note,
  .page-news .clips__tag {
    transition: none;
  }

  .page-news .feed-row__note {
    transform: none;
  }
}
<<<END>>>

等等，我把 `` 和 `<<<END>>>` 弄混了。标记应该是 ``，后面不再需要 `<<<END>>>`。我重新写一下。其实系统说的是按顺序输出 ``，然后是 ``。不需要 END 标记。

我再检查一遍有没有问题。

`aria-current` 我删掉了——没关系。

`brief__media` 用了 `position: sticky`，外面 `overflow-x: hidden` 在 `.page-news` 上——sticky 一般还是能生效，因为祖先的 `overflow-x: hidden` 会把滚动容器变成……嗯，实际上带 `overflow-x: hidden` 的祖先会创建滚动容器，sticky 就会相对于它来定位。既然 `.page-news` 本身不滚动（它随页面滚动），sticky 可能会失效。

其实不对，`overflow: hidden` 的容器会变成滚动容器，而 sticky 元素会相对最近的滚动祖先来粘附。如果 `.page-news` 不滚动，sticky 就不会有任何相对移动……实际上它相对那个容器粘附，而那个容器本身在页面里滚动——嗯，实际上它是相对最近的滚动祖先的滚动端口粘附的。如果那个祖先没有自己的滚动（内容适配），sticky 就不会触发。

更稳妥的做法：去掉 `.page-news` 上的 `overflow-x: hidden`。但我需要它来防止溢出。那就在 sticky 媒体元素上改用 `overflow: clip`？算了，不如直接去掉 sticky——风险太大。我把 sticky 去掉。

另外，`overflow-x: hidden` 也会影响悬停提示的溢出——不过提示都在容器内部，没问题。

我直接删掉 sticky 吧。

我重新写。

还有 `.page-news .brief` 那：`wrap` 加 grid——那 `.wrap` 是共享的，有 `max-width` 和 `padding`。加了 grid + `display: grid` 也没问题。

但 `brief` 是加在 `.wrap` 元素上的类：`<div class="wrap brief">`。然后 `.page-news .brief` 的 grid 规则就生效了。好。

同理，`.clips__grid` 是 `wrap` 内部的独立 div。好。

我确认一下没有覆盖共享类。`.page-news .section-head` 这些——这是在修饰共享类，没问题（只是加了 scoped 修饰）。

嗯，规则 5 说“不要重复定义共享头部和页脚”——我修饰 `.section-head` 是允许的，因为它是 scope 的。

好。现在还有，`.page-news .feed__tab[href="#feed-reports"]` 在没有 `:has` 的时候默认是激活态？对，那条规则是全局的。然后 `@supports` 块在 clips 被 target 的时候覆盖掉。好。

但等等：如果 `:has` 不受支持，`#feed-clips` 会被 target，然后跳到那个面板——两个都显示。可以。

现在，`feed-row__note`——初始状态是 `position: absolute`，并且要用 `visibility: hidden` 和 `opacity: 0` 隐藏掉。这样挺好。

不过等等，`.feed-row` 设了 `tabindex="0"`，那聚焦的时候就会显示标注。没问题。

再检查一下 `feed-row__note` 的定位，像 `left: 76px` 这个值——在移动端，网格列是 60px 加 14px 的间距，也就是主内容从 74px 开始。差不多对得上。

现在还有个潜在问题：`.feed__bar` 可能会有点挤，但还好。

现在再确认一下 `media__caption` 在 `series__banner` 和 `news-hero__figure` 里的表现。它们是 `figure` 加上 `media` 类——共享样式应该能处理。

好。

再说一下 `main` 上的 `data-section` 属性——数字是 01 到 07，但 section-head 里显示的数字是 01 到 06。这个没问题，因为它们本来就是两套不同的编号系统。

嗯，其实可能会让人有点懵。不过没关系。

我把数字对齐一下：data-section 01（hero），02（feed），03（brief），04（clips），05（series），06（cadence），07（subscribe）。视觉上的 section-head 数字是 01 到 06，分别给 feed/brief/clips/series/cadence/subscribe。hero 没有编号。也可以。

现在收尾。把 sticky 去掉，重新输出。

再检查一下：`.page-news .news-hero::before` 没有设置 `pointer-events: none`？我设了。

还有，`mask-image` 在 `::before` 上，有 `inset: 0`——应该没问题。

还有一点：`.page-news` 上的 `overflow-x: hidden` 可能会把 hero 的 `section` 里那些 `::before` 裁掉——但它们在容器内部，没事。

重新定稿输出。
<main id="main-content" class="page-news">

  <section class="news-hero" data-section="01" data-section-label="今日赛况">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="位置">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><a href="/">首页</a></li>
          <li class="breadcrumb__item">赛况专栏</li>
        </ol>
      </nav>

      <p class="news-hero__kicker">每个比赛日 · 覆盖 18 个赛事分类</p>
      <h1>赛况专栏</h1>
      <p class="news-hero__lede">早上挤地铁的那十几分钟，够你把最近三场翻完，再顺手看一眼今晚的对阵。开元体育移动版把当天的战报和集锦收在同一条列表里，点一下标签就从比分切到回放，不用来回翻页。</p>

      <ul class="news-hero__meta">
        <li><span class="data-chip__value">60 – 120</span> 秒的单条集锦时长</li>
        <li><span class="data-chip__value">12</span> 类统计维度随战报同步</li>
        <li><span class="data-chip__value">5</span> 个集锦标签分类</li>
      </ul>

      <figure class="media news-hero__figure">
        <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="夜场看台灯光与手机屏幕微光叠合的对角线构图">
        <figcaption class="media__caption">夜场灯光下的看台弧线，与手机端的赛况列表叠在同一屏。</figcaption>
      </figure>
    </div>
  </section>

  <section class="news-feed" id="today" data-section="02" data-section-label="本比赛日">
    <div class="wrap">
      <header class="section-head">
        <span class="section-head__num">01</span>
        <h2 class="section-head__title">本比赛日更新</h2>
        <p class="section-head__note">最近一场排在最上面。左边是开赛时间，中间一句话讲清结果，右边挂分类与关键数据。</p>
      </header>

      <div class="feed">
        <div class="feed__bar">
          <ul class="feed__tabs">
            <li><a class="feed__tab" href="#feed-reports">战报</a></li>
            <li><a class="feed__tab" href="#feed-clips">视频集锦</a></li>
          </ul>
          <ul class="feed__cats" aria-label="赛事分类">
            <li class="feed__cat" tabindex="0">篮球</li>
            <li class="feed__cat" tabindex="0">足球</li>
            <li class="feed__cat" tabindex="0">网球</li>
            <li class="feed__cat" tabindex="0">电竞</li>
            <li class="feed__cat" tabindex="0">田径</li>
          </ul>
        </div>

        <div class="feed__panel feed__panel--reports" id="feed-reports">
          <ol class="feed__list">
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">21:40</span>
              <div class="feed-row__main">
                <p class="feed-row__text">末节连追 11 分反超，主队守住主场三连胜。</p>
                <p class="feed-row__note">末节命中率 61%，篮板 44 比 33，失误压到 9 次。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">篮球</span>
                <span class="tag tag--orange">分差 5</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">21:05</span>
              <div class="feed-row__main">
                <p class="feed-row__text">下半场开局 8 比 0 打停对手，客队全场领先到底。</p>
                <p class="feed-row__note">下半场净胜 15 分，二次进攻得分 18 比 6。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">篮球</span>
                <span class="tag tag--orange">分差 13</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">20:30</span>
              <div class="feed-row__main">
                <p class="feed-row__text">补时第三分钟头球破门，主队拿下关键三分。</p>
                <p class="feed-row__note">全场射门 21 次，射正 7 次，角球 9 比 3。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">足球</span>
                <span class="tag tag--orange">射正 7</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">19:55</span>
              <div class="feed-row__main">
                <p class="feed-row__text">决胜盘抢七 7 比 4，头号种子晋级下一轮。</p>
                <p class="feed-row__note">一发得分率 78%，破发兑现 3 次，比赛用时 2 小时 41 分。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">网球</span>
                <span class="tag tag--orange">抢七</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">19:20</span>
              <div class="feed-row__main">
                <p class="feed-row__text">客队首节落后 9 分，后三节净胜 17 分完成逆转。</p>
                <p class="feed-row__note">第三节单节 32 比 18，替补端贡献 42 分。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">篮球</span>
                <span class="tag tag--orange">分差 8</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">18:45</span>
              <div class="feed-row__main">
                <p class="feed-row__text">决胜局经济差一度到 12K，翻盘只用了 6 分钟。</p>
                <p class="feed-row__note">大龙区团战 3 换 5，视野控制率从 41% 回升到 56%。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">电竞</span>
                <span class="tag tag--orange">经济差 12K</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">18:10</span>
              <div class="feed-row__main">
                <p class="feed-row__text">替补端扛住轮换时段，末节四人得分上双。</p>
                <p class="feed-row__note">替补上场净胜 11 分，助攻 23 次，失误仅 9 次。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">篮球</span>
                <span class="tag tag--orange">替补 42</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">17:35</span>
              <div class="feed-row__main">
                <p class="feed-row__text">全场 21 次射门只进 1 球，客队反击一击致命。</p>
                <p class="feed-row__note">控球 63%，禁区内触球 34 次，转化率 4.8%。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">足球</span>
                <span class="tag tag--live">已结束</span>
              </div>
            </li>
          </ol>
          <p class="feed__foot">战报按日期倒序排列，每一条里都保留比分、关键数据与集锦入口三块信息。</p>
        </div>

        <div class="feed__panel feed__panel--clips" id="feed-clips">
          <ol class="feed__list">
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">1:52</span>
              <div class="feed-row__main">
                <p class="feed-row__text">终场前 40 秒的三次攻防，胜负在最后两回合定下。</p>
                <p class="feed-row__note">含终场前 40 秒完整攻防与两记关键罚球。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">精彩瞬间</span>
                <span class="tag tag--orange">篮球</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">1:08</span>
              <div class="feed-row__main">
                <p class="feed-row__text">第三节连续四次外线命中，分差在 90 秒内被抹平。</p>
                <p class="feed-row__note">四记三分全部来自同一侧掩护配合。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">关键回合</span>
                <span class="tag tag--orange">篮球</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">2:00</span>
              <div class="feed-row__main">
                <p class="feed-row__text">门将两连扑加反击一条龙，这三分来得不轻松。</p>
                <p class="feed-row__note">两次扑救位置、跑动距离 68 米的反击路线。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">精彩瞬间</span>
                <span class="tag tag--orange">足球</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">1:35</span>
              <div class="feed-row__main">
                <p class="feed-row__text">换防策略在下半场带来的三次空位，逐回合拆开看。</p>
                <p class="feed-row__note">三次空位分别出现在弧顶、底角与篮下。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">赛后复盘</span>
                <span class="tag tag--orange">篮球</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">0:58</span>
              <div class="feed-row__main">
                <p class="feed-row__text">决胜局最后团战逐帧拆解，视野差就是那个转折点。</p>
                <p class="feed-row__note">开团前 12 秒的眼位布设变化逐帧标注。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">战术解析</span>
                <span class="tag tag--orange">电竞</span>
              </div>
            </li>
            <li class="feed-row" tabindex="0">
              <span class="feed-row__time">1:20</span>
              <div class="feed-row__main">
                <p class="feed-row__text">全场最高得分的五个回合，含加时段两次关键罚球。</p>
                <p class="feed-row__note">五个回合合计得到 17 分，效率值全场最高。</p>
              </div>
              <div class="feed-row__tags">
                <span class="tag tag--cyan">数据看点</span>
                <span class="tag tag--orange">篮球</span>
              </div>
            </li>
          </ol>
          <p class="feed__foot">集锦按精彩瞬间、关键回合、赛后复盘、战术解析与数据看点五类归入，单条时长集中在 60 至 120 秒。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="news-brief" data-section="03" data-section-label="上下班速览">
    <div class="wrap brief">
      <figure class="media media--tall brief__media">
        <img src="{zhanqunpic:h:700w:900}" width="900" height="700" alt="深色背景上斜向移动的光带与屏幕微光" loading="lazy" decoding="async">
        <figcaption class="media__caption">通勤路上不用把整场看完，三条信息就够。</figcaption>
      </figure>

      <div class="brief__body">
        <header class="section-head">
          <span class="section-head__num">02</span>
          <h2 class="section-head__title">上下班速览</h2>
          <p class="section-head__note">只留三样东西：结果、最大分差、关键表现。从进站读到出站，刚好跟完。</p>
        </header>

        <ul class="brief__list">
          <li class="brief__item">
            <span class="brief__score">96 : 91</span>
            <p class="brief__line">末节 11 分反扑，主队三连胜。</p>
            <p class="brief__star">关键表现：内线 24 分 11 篮板，末节独得 9 分。</p>
          </li>
          <li class="brief__item">
            <span class="brief__score">2 : 1</span>
            <p class="brief__line">补时头球定胜负，全场射门 21 次。</p>
            <p class="brief__star">关键表现：门将两连扑，替补助攻锁定三分。</p>
          </li>
          <li class="brief__item">
            <span class="brief__score">7 : 6</span>
            <p class="brief__line">决胜盘抢七拿下，比赛拖到 2 小时 41 分。</p>
            <p class="brief__star">关键表现：一发得分率 78%，破发兑现 3 次。</p>
          </li>
        </ul>

        <p class="brief__note">通勤版本在每个比赛日的早晚高峰各刷新一次，不用登录就能直接翻。</p>
      </div>
    </div>
  </section>

  <section class="news-clips" id="clips" data-section="04" data-section-label="视频集锦">
    <div class="wrap">
      <div class="clips__grid">
        <div class="clips__col">
          <header class="section-head">
            <span class="section-head__num">03</span>
            <h2 class="section-head__title">视频集锦</h2>
            <p class="section-head__note">同一场比赛的多个角度分开归类，想找哪一类就点哪一个标签。</p>
          </header>

          <ul class="clips__tags">
            <li class="clips__tag">
              <span class="clips__tag-name">精彩瞬间</span>
              <span class="clips__tag-desc">单场最抓人的三到五个回合，通常 60 到 90 秒。</span>
            </li>
            <li class="clips__tag">
              <span class="clips__tag-name">关键回合</span>
              <span class="clips__tag-desc">分差被改写的那几分钟，按发生顺序剪在一起。</span>
            </li>
            <li class="clips__tag">
              <span class="clips__tag-name">赛后复盘</span>
              <span class="clips__tag-desc">从战术角度回看转折点，时长接近 120 秒。</span>
            </li>
            <li class="clips__tag">
              <span class="clips__tag-name">战术解析</span>
              <span class="clips__tag-desc">针对某一次布置逐帧拆解，适合想深看一层的人。</span>
            </li>
            <li class="clips__tag">
              <span class="clips__tag-name">数据看点</span>
              <span class="clips__tag-desc">把 12 类统计维度里最突出的两项配进画面。</span>
            </li>
          </ul>

          <p class="clips__hint">集锦和战报共用一个列表容器，切换标签之后位置不动，原来翻到哪一条还在哪一条。</p>
        </div>

        <figure class="media clips__media">
          <img src="{zhanqunpic:h:650w:1000}" width="1000" height="650" alt="深色播放界面轮廓，进度条以荧光青显示" loading="lazy" decoding="async">
          <figcaption class="media__caption">播放界面下方的进度条按时间刻度铺开，关键回合直接标在轨道上。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="news-series" id="series" data-section="05" data-section-label="专题与复盘">
    <div class="wrap">
      <figure class="media series__banner">
        <img src="{zhanqunpic:h:500w:1200}" width="1200" height="500" alt="横向阶段刻度线，节点以暖橙与竞技绿区分" loading="lazy" decoding="async">
        <figcaption class="media__caption">按赛季阶段划出的刻度线，每一段对应一组战报、数据回顾与集锦。</figcaption>
      </figure>

      <header class="section-head">
        <span class="section-head__num">04</span>
        <h2 class="section-head__title">专题与复盘</h2>
        <p class="section-head__note">按赛季阶段归拢内容，从上往下读就是一个阶段的完整过程。</p>
      </header>

      <ul class="series__list">
        <li class="series__item">
          <span class="series__num">01</span>
          <h3 class="series__title">赛季第二阶段 · 前几轮</h3>
          <p class="series__desc">把同一阶段的战报按开赛顺序串起来，中间插入两次数据回顾，末尾接上这一阶段的集锦合集。</p>
          <p class="series__meta">战报 · 数据回顾 · 集锦合集</p>
        </li>
        <li class="series__item">
          <span class="series__num">02</span>
          <h3 class="series__title">近三轮状态观察</h3>
          <p class="series__desc">三轮之内同一支队伍的攻防数据摆在一起，比分之外的变化更容易看出来。</p>
          <p class="series__meta">数据对比 · 回合拆解 · 赛后复盘</p>
        </li>
        <li class="series__item">
          <span class="series__num">03</span>
          <h3 class="series__title">关键比赛复盘合集</h3>
          <p class="series__desc">分差在 5 分以内、进入加时或被补时改写的比赛单独归到这里，方便一次看完。</p>
          <p class="series__meta">关键回合 · 战术解析 · 数据看点</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="news-cadence" id="cadence" data-section="06" data-section-label="更新节奏">
    <div class="wrap">
      <header class="section-head">
        <span class="section-head__num">05</span>
        <h2 class="section-head__title">栏目更新节奏</h2>
        <p class="section-head__note">比赛日密集推，非比赛日以预热和复盘为主，跟着赛季走。</p>
      </header>

      <div class="cadence">
        <article class="cadence__item cadence__item--main">
          <span class="cadence__label">比赛日</span>
          <p class="cadence__value">40 – 60</p>
          <p class="cadence__desc">条赛况摘要，覆盖 18 个赛事分类，从开赛时间倒着排，最新一场永远在最上面。数据核对小组每场结束后比对一次比分与统计，再放进列表。</p>
        </article>
        <article class="cadence__item">
          <span class="cadence__label">非比赛日</span>
          <p class="cadence__value">预热 + 复盘</p>
          <p class="cadence__desc">当天没有对阵时，列表换成赛前阵容走向与近几轮的数据回顾，翻起来不会突然断档。</p>
        </article>
        <article class="cadence__item">
          <span class="cadence__label">列表结构</span>
          <p class="cadence__value">比分 + 数据 + 集锦</p>
          <p class="cadence__desc">同一条里放这三块。赛后要对统计的人不用再跳页面，比分旁边就是关键数据和集锦入口。</p>
        </article>
      </div>

      <p class="cadence__foot">内容团队 14 人分成赛况编辑、数据核对、视频剪辑与栏目运营四个小组，按赛季安排结构复核。</p>
    </div>
  </section>

  <section class="news-subscribe" id="subscribe" data-section="07" data-section-label="订阅与提醒">
    <div class="wrap">
      <header class="section-head">
        <span class="section-head__num">06</span>
        <h2 class="section-head__title">订阅与提醒</h2>
        <p class="section-head__note">把常看的分类盯住，下次开赛不用从头找。</p>
      </header>

      <div class="subscribe__grid">
        <ul class="subscribe__list">
          <li>盯住某个赛事分类，该分类有新条目时，通知里直接出现摘要开头。</li>
          <li>收藏单条战报，之后在会员中心的战报收藏里按时间翻回来。</li>
          <li>集锦回看记录会保留，同一场比赛的多个标签不用重新搜。</li>
          <li>通知设置里可以只留战报、关掉集锦提醒，按自己的节奏收。</li>
          <li>赛程订阅可以按队伍或按分类开，会员中心里一共六个模块互相打通。</li>
        </ul>

        <div class="subscribe__side">
          <p class="subscribe__tip">提醒没收到、收藏不见了，或者找不到入口，都可以直接找人问。</p>
          <p class="subscribe__contact">电话 <a href="tel:17813890500">17813890500</a>　·　邮箱 <a href="mailto:info@yunkai-entry.com.cn">info@yunkai-entry.com.cn</a></p>
          <p class="subscribe__hours">工作日 9:00 – 18:00 在线</p>
          <div class="subscribe__actions">
            <a class="btn btn--primary" href="/consult/">找客服咨询</a>
            <a class="btn btn--orange" href="/experience/">看电脑版对照</a>
            <a class="btn" href="/knowledge/">常见问题</a>
          </div>
        </div>
      </div>
    </div>
  </section>

</main>

/* ===== 赛况专栏 · page-news 页面专属样式 ===== */

.page-news {
  --nw-line: rgba(46, 74, 63, .45);
  --nw-line-soft: rgba(46, 74, 63, .28);
  --nw-soft: rgba(53, 232, 181, .1);
  --nw-surface: #0F1615;
  --nw-surface-2: #14201C;
  --nw-shadow: 6px 6px 0 rgba(18, 163, 107, .22);
  padding-bottom: 24px;
  overflow-x: hidden;
}

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

.page-news .news-hero {
  position: relative;
  padding: 24px 0 0;
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(53, 232, 181, .055) 0 2px,
    transparent 2px 15px
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
  pointer-events: none;
}

.page-news .news-hero .wrap {
  position: relative;
  z-index: 1;
}

.page-news .news-hero__kicker {
  margin: 18px 0 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--cyan);
}

.page-news .news-hero h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 11vw, 104px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--paper);
}

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

.page-news .news-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--muted);
}

.page-news .news-hero__meta .data-chip__value {
  margin-right: 4px;
  color: var(--orange);
  font-weight: 700;
}

.page-news .news-hero__figure {
  margin: 28px 0 0;
  border: 2px solid var(--line);
  background: var(--panel);
  box-shadow: var(--nw-shadow);
  overflow: hidden;
}

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

/* ---------- 章节抬头微调 ---------- */

.page-news .section-head {
  margin-bottom: 22px;
}

.page-news .section-head__num {
  font-family: var(--font-mono);
  color: var(--clay);
  letter-spacing: .1em;
}

.page-news .section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-news .section-head__note {
  max-width: 52ch;
  color: var(--muted);
}

/* ---------- 主列表 ---------- */

.page-news .news-feed {
  position: relative;
  padding: 54px 0 40px;
}

.page-news .feed {
  border: 2px solid var(--line);
  background: var(--nw-surface);
}

.page-news .feed__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--line);
  background: var(--nw-surface-2);
}

.page-news .feed__tabs {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .feed__tab {
  display: inline-block;
  padding: 8px 20px;
  border: 2px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--muted);
  text-decoration: none;
  background: transparent;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

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

.page-news .feed__tab[href="#feed-reports"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
  font-weight: 700;
}

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

.page-news .feed__cat {
  padding: 4px 10px;
  border: 1px solid var(--nw-line);
  background: rgba(18, 163, 107, .06);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--muted);
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.page-news .feed__cat:hover,
.page-news .feed__cat:focus-visible {
  border-color: var(--cyan);
  background: var(--nw-soft);
  color: var(--cyan);
}

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

.page-news .feed-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-areas:
    "time main"
    "tags tags";
  gap: 10px 14px;
  padding: 16px 16px 18px;
  border-bottom: 1px solid var(--nw-line-soft);
  transition: background-color .16s ease, box-shadow .16s ease;
}

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

.page-news .feed-row:hover,
.page-news .feed-row:focus-within,
.page-news .feed-row:focus {
  background: rgba(53, 232, 181, .045);
  box-shadow: inset 3px 0 0 var(--cyan);
  outline: none;
}

.page-news .feed-row__time {
  grid-area: time;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--cyan);
}

.page-news .feed-row__main {
  grid-area: main;
  min-width: 0;
}

.page-news .feed-row__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--paper);
}

.page-news .feed-row__note {
  position: absolute;
  left: 76px;
  top: calc(100% - 8px);
  z-index: 6;
  max-width: 330px;
  padding: 9px 13px;
  border: 2px solid var(--cyan);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  pointer-events: none;
}

.page-news .feed-row:hover .feed-row__note,
.page-news .feed-row:focus .feed-row__note,
.page-news .feed-row:focus-within .feed-row__note {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-news .feed-row__tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.page-news .feed__foot {
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--nw-line-soft);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* 标签切换：支持 :has 时在同一容器内切换面板 */
@supports selector(:has(*)) {
  .page-news .feed__panel--clips {
    display: none;
  }

  .page-news .feed:has(#feed-clips:target) .feed__panel--clips {
    display: block;
  }

  .page-news .feed:has(#feed-clips:target) .feed__panel--reports {
    display: none;
  }

  .page-news .feed:has(#feed-clips:target) .feed__tab[href="#feed-reports"] {
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
    font-weight: 400;
  }

  .page-news .feed:has(#feed-clips:target) .feed__tab[href="#feed-clips"] {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--ink);
    font-weight: 700;
  }
}

/* ---------- 上下班速览 ---------- */

.page-news .news-brief {
  padding: 22px 0 46px;
}

.page-news .brief__media {
  margin: 0 0 24px;
  border: 2px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

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

.page-news .brief__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--nw-line-soft);
  border: 1px solid var(--nw-line-soft);
}

.page-news .brief__item {
  display: grid;
  gap: 4px;
  padding: 16px 16px 18px;
  background: var(--nw-surface);
}

.page-news .brief__score {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--orange);
}

.page-news .brief__line {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--paper);
}

.page-news .brief__star {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

.page-news .brief__note {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--clay);
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 视频集锦 ---------- */

.page-news .news-clips {
  padding: 44px 0;
  border-top: 2px solid var(--line);
  background: linear-gradient(180deg, rgba(18, 163, 107, .06) 0%, transparent 46%);
}

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

.page-news .clips__tags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--nw-line-soft);
  border: 1px solid var(--nw-line-soft);
}

.page-news .clips__tag {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--nw-surface);
  transition: background-color .16s ease;
}

.page-news .clips__tag:hover {
  background: var(--nw-surface-2);
}

.page-news .clips__tag-name {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--cyan);
}

.page-news .clips__tag-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-news .clips__hint {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .clips__media {
  margin: 26px 0 0;
  border: 2px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.page-news .clips__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 6.5;
  object-fit: cover;
}

/* ---------- 专题与复盘 ---------- */

.page-news .news-series {
  padding: 44px 0;
}

.page-news .series__banner {
  margin: 0 0 28px;
  border: 2px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.page-news .series__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

.page-news .series__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--nw-line-soft);
  border: 1px solid var(--nw-line-soft);
}

.page-news .series__item {
  padding: 20px 18px 22px;
  background: var(--nw-surface);
}

.page-news .series__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--clay);
}

.page-news .series__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--paper);
}

.page-news .series__desc {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .series__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--orange);
}

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

.page-news .news-cadence {
  padding: 44px 0;
  border-top: 1px solid var(--nw-line);
  border-bottom: 1px solid var(--nw-line);
  background: var(--nw-surface-2);
}

.page-news .cadence {
  display: grid;
  gap: 1px;
  background: var(--nw-line-soft);
  border: 1px solid var(--nw-line-soft);
}

.page-news .cadence__item {
  padding: 20px 18px 22px;
  background: var(--nw-surface);
}

.page-news .cadence__item--main {
  box-shadow: inset 4px 0 0 var(--green);
}

.page-news .cadence__label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--muted);
}

.page-news .cadence__item--main .cadence__label {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-news .cadence__value {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: clamp(26px, 6vw, 38px);
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--paper);
}

.page-news .cadence__item--main .cadence__value {
  color: var(--orange);
}

.page-news .cadence__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .cadence__foot {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--green);
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 订阅与提醒 ---------- */

.page-news .news-subscribe {
  padding: 46px 0 30px;
}

.page-news .subscribe__grid {
  display: grid;
  gap: 26px;
}

.page-news .subscribe__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--nw-line-soft);
  border: 1px solid var(--nw-line-soft);
}

.page-news .subscribe__list li {
  position: relative;
  padding: 14px 16px 14px 40px;
  background: var(--nw-surface);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--paper);
}

.page-news .subscribe__list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 21px;
  width: 12px;
  height: 2px;
  background: var(--cyan);
}

.page-news .subscribe__side {
  padding: 20px 18px 22px;
  border: 2px solid var(--line);
  background: var(--nw-surface-2);
}

.page-news .subscribe__tip {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper);
}

.page-news .subscribe__contact {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.9;
  color: var(--muted);
  word-break: break-word;
}

.page-news .subscribe__contact a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 232, 181, .4);
}

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

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

.page-news .subscribe__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-news .subscribe__actions .btn {
  font-size: 14px;
  text-decoration: none;
}

/* ---------- 平板及以上 ---------- */

@media (min-width: 700px) {

  .page-news .news-hero {
    padding-top: 30px;
  }

  .page-news .news-hero__figure img {
    aspect-ratio: 16 / 6;
  }

  .page-news .feed-row {
    grid-template-columns: 70px minmax(0, 1fr) auto;
    grid-template-areas: "time main tags";
    align-items: start;
    gap: 0 18px;
    padding: 18px 20px;
  }

  .page-news .feed-row__tags {
    justify-content: flex-end;
    max-width: 210px;
  }

  .page-news .feed-row__note {
    left: 88px;
  }

  .page-news .brief__item {
    grid-template-columns: 130px minmax(0, 1fr);
    grid-template-areas:
      "score line"
      "score star";
    align-items: baseline;
    gap: 4px 20px;
  }

  .page-news .brief__score {
    grid-area: score;
  }

  .page-news .brief__line {
    grid-area: line;
  }

  .page-news .brief__star {
    grid-area: star;
  }

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

/* ---------- 桌面 ---------- */

@media (min-width: 940px) {

  .page-news .news-hero__lede {
    font-size: 17px;
  }

  .page-news .news-feed {
    padding: 66px 0 48px;
  }

  .page-news .feed-row__text {
    font-size: 16px;
  }

  .page-news .brief {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 46px;
    align-items: start;
  }

  .page-news .brief__media {
    margin: 6px 0 0;
  }

  .page-news .clips__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 44px;
    align-items: center;
  }

  .page-news .clips__media {
    margin: 0;
  }

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

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

  .page-news .subscribe__grid {
    grid-template-columns: 7fr 5fr;
    gap: 34px;
    align-items: start;
  }
}

@media (min-width: 1180px) {

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

  .page-news .feed-row__note {
    left: 112px;
  }

  .page-news .news-hero__figure {
    margin-top: 34px;
  }
}

/* ---------- 降低动效 ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-news .feed__tab,
  .page-news .feed__cat,
  .page-news .feed-row,
  .page-news .feed-row__note,
  .page-news .clips__tag {
    transition: none;
  }

  .page-news .feed-row__note {
    transform: none;
  }
}