/* ===== 赛事观察 /blog/ ===== */
.page-news {
  position: relative;
  background-color: var(--c-pitch);
  color: var(--c-white);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-news::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 48px);
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.25) 45%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.25) 45%, transparent 75%);
}

.page-news .news-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-news img {
  max-width: 100%;
  height: auto;
}

/* ---------- 面包屑 ---------- */
.page-news .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.08em;
  color: var(--c-index);
}

.page-news .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 8px;
  color: var(--c-grid);
}

.page-news .breadcrumb-item a {
  color: var(--c-index);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-news .breadcrumb-item a:hover {
  color: var(--c-neon);
  border-bottom-color: var(--c-neon);
}

.page-news .breadcrumb-item[aria-current="page"] {
  color: var(--c-neon-deep);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  padding: 26px 0 42px;
}

.page-news .news-hero-deco {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 8.5vw, 88px);
  line-height: 0.88;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-grid);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

.page-news .news-hero-grid {
  display: grid;
  gap: 30px;
}

.page-news .news-hero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.page-news .news-hero-kicker-text {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  color: var(--c-index);
}

.page-news .news-hero-title {
  margin: 16px 0 0;
  max-width: 680px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--c-white);
}

.page-news .news-hero-lead {
  margin: 18px 0 0;
  max-width: 620px;
  font-size: var(--step-2);
  line-height: 1.75;
  color: var(--c-index);
}

.page-news .news-hero-points {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .news-hero-points li {
  padding-left: 14px;
  border-left: 2px solid var(--c-neon-deep);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--c-white);
}

.page-news .news-hero-board {
  padding: 20px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: var(--c-locker);
  background-image: linear-gradient(160deg, rgba(59, 240, 208, 0.08), transparent 60%);
}

.page-news .board-label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-neon);
}

.page-news .board-timeline {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .board-slot {
  display: grid;
  gap: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--grid-line);
}

.page-news .board-slot--last {
  border-left-color: var(--c-orange);
}

.page-news .board-time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--c-timer);
}

.page-news .board-text {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--c-white);
}

.page-news .board-foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--c-index);
}

/* ---------- 通用章节 ---------- */
.page-news .news-section {
  padding: 46px 0;
  border-top: 1px solid var(--hairline);
}

.page-news .section-head {
  max-width: 720px;
  margin-bottom: 26px;
}

.page-news .section-index {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-neon);
}

.page-news .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1.14;
  letter-spacing: 0.01em;
  color: var(--c-white);
}

.page-news .section-sub {
  margin: 12px 0 0;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--c-index);
}

/* ---------- 分类标签与时间徽标 ---------- */
.page-news .news-cat {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.page-news .news-cat--rules { color: var(--c-neon); }
.page-news .news-cat--injury { color: var(--c-orange); }
.page-news .news-cat--nav { color: var(--c-timer); }
.page-news .news-cat--review { color: var(--c-neon-deep); }

.page-news .news-when {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius);
  background-color: var(--c-glass);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--c-index);
  white-space: nowrap;
}

/* ---------- 头条 ---------- */
.page-news .news-lead-grid {
  display: grid;
  gap: 26px;
}

.page-news .news-feature {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: var(--c-locker);
}

.page-news .news-feature-media {
  overflow: hidden;
  aspect-ratio: 5 / 3;
  background-color: var(--c-glass);
}

.page-news .news-feature-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-news .news-feature-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.page-news .news-feature-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.35;
  color: var(--c-white);
}

.page-news .news-feature-text {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--c-index);
}

.page-news .news-picks {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.page-news .news-pick {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}

.page-news .news-pick-no {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  color: var(--c-neon);
}

.page-news .news-pick-title {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-white);
}

.page-news .news-pick-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-index);
}

/* ---------- 筛选 ---------- */
.page-news .news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 20px;
}

.page-news .filter-btn {
  padding: 8px 14px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--c-index);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease);
}

.page-news .filter-btn:hover {
  color: var(--c-neon);
  border-color: var(--c-neon);
}

.page-news .filter-btn:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
}

.page-news .filter-btn[aria-pressed="true"] {
  border-color: var(--c-neon);
  background-color: var(--c-neon);
  color: var(--c-pitch);
}

.page-news .filter-empty {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px dashed var(--glass-line);
  border-radius: var(--radius);
  font-size: var(--step-1);
  color: var(--c-index);
}

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

.page-news .news-entry {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 14px;
  padding: 18px 0 18px 16px;
  border-bottom: 1px solid var(--hairline);
  transition: background-color 220ms var(--ease);
}

.page-news .news-entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background-color: var(--c-index);
  opacity: 0.55;
  transition: width 200ms var(--ease);
}

.page-news .news-entry[data-topic="rules"]::before { background-color: var(--c-neon); opacity: 1; }
.page-news .news-entry[data-topic="injury"]::before { background-color: var(--c-orange); opacity: 1; }
.page-news .news-entry[data-topic="nav"]::before { background-color: var(--c-timer); opacity: 1; }
.page-news .news-entry[data-topic="review"]::before { background-color: var(--c-neon-deep); opacity: 1; }

.page-news .news-entry:hover {
  background-color: var(--c-locker);
}

.page-news .news-entry:hover::before {
  width: 5px;
}

.page-news .news-entry.is-filtered-out {
  display: none;
}

.page-news .news-no {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-index);
  opacity: 0.85;
}

.page-news .news-entry-main {
  min-width: 0;
}

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

.page-news .news-entry-title {
  margin: 10px 0 0;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-white);
}

.page-news .news-entry-text {
  margin: 8px 0 0;
  max-width: 760px;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--c-index);
}

.page-news .news-feed-note {
  margin: 26px 0 0;
  padding: 16px 18px;
  border-left: 2px solid var(--c-neon);
  background-color: var(--c-locker);
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--c-index);
}

.page-news .news-feed-note a {
  color: var(--c-neon);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.page-news .news-feed-note a:hover {
  color: var(--c-white);
}

/* ---------- 专题横幅 ---------- */
.page-news .news-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: var(--c-locker);
}

.page-news .news-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  opacity: 0.55;
}

.page-news .news-banner::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, transparent, var(--c-locker) 78%);
}

.page-news .news-banner-body {
  position: relative;
  z-index: 1;
  margin-top: -72px;
  padding: 0 22px 24px;
}

.page-news .banner-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.08em;
  color: var(--c-index);
}

.page-news .banner-text {
  margin: 0;
  max-width: 640px;
  font-size: var(--step-2);
  line-height: 1.65;
  color: var(--c-white);
}

.page-news .series-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.page-news .series-card {
  padding: 20px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: var(--c-locker);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}

.page-news .series-card:hover {
  border-color: var(--c-neon);
  transform: translateY(-2px);
}

.page-news .series-no {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  color: var(--c-timer);
}

.page-news .series-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.3;
  color: var(--c-white);
}

.page-news .series-text {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--c-index);
}

/* ---------- 数据复盘 ---------- */
.page-news .review-grid {
  display: grid;
  gap: 26px;
}

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

.page-news .review-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background-color: var(--c-locker);
  object-fit: cover;
}

.page-news .review-figure figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-index);
}

.page-news .review-notes {
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-news .review-stat {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--c-neon-deep);
  border-radius: var(--radius);
  background-color: var(--c-locker);
}

.page-news .review-stat-num {
  font-family: var(--font-mono);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-neon);
  font-variant-numeric: tabular-nums;
}

.page-news .review-stat-label {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--c-index);
}

.page-news .review-btn {
  justify-self: start;
}

/* ---------- 订阅 ---------- */
.page-news .subscribe-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: var(--c-glass);
}

.page-news .subscribe-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: 0.28;
  pointer-events: none;
}

.page-news .subscribe-body {
  position: relative;
  z-index: 1;
  padding: 28px 22px;
}

.page-news .subscribe-text {
  margin: 16px 0 0;
  max-width: 620px;
  font-size: var(--step-2);
  line-height: 1.75;
  color: var(--c-white);
}

.page-news .subscribe-text a {
  color: var(--c-neon);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  word-break: break-all;
}

.page-news .subscribe-text a:hover {
  color: var(--c-white);
}

.page-news .subscribe-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .subscribe-list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--c-index);
}

.page-news .subscribe-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background-color: var(--c-timer);
}

.page-news .subscribe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- 断点 ---------- */
@media (min-width: 620px) {
  .page-news .news-hero-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-news .news-hero-points li {
    padding-right: 12px;
  }
}

@media (min-width: 720px) {
  .page-news .series-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-news .subscribe-body {
    padding: 38px 34px;
  }
}

@media (min-width: 900px) {
  .page-news .news-hero {
    padding: 34px 0 54px;
  }
  .page-news .news-hero-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
  }
  .page-news .news-lead-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 34px;
    align-items: start;
  }
  .page-news .news-picks {
    border-top: none;
  }
  .page-news .news-pick:first-child {
    padding-top: 0;
  }
  .page-news .review-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 34px;
    align-items: start;
  }
  .page-news .news-banner-body {
    margin-top: -88px;
    padding: 0 32px 30px;
  }
}

@media (min-width: 1100px) {
  .page-news .news-section {
    padding: 60px 0;
  }
  .page-news .news-entry {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 20px;
    padding: 22px 0 22px 20px;
  }
  .page-news .news-entry::before {
    top: 22px;
    bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .series-card,
  .page-news .news-entry,
  .page-news .news-entry::before,
  .page-news .filter-btn {
    transition: none;
  }
  .page-news .series-card:hover {
    transform: none;
  }
}
</user>

<main id="main-content" class="page-news">
  <div class="scroll-progress" data-scroll-progress aria-hidden="true"></div>

  <div class="news-wrap">

    <nav class="breadcrumb" aria-label="当前位置">
      <ol class="breadcrumb-list">
        <li class="breadcrumb-item"><a href="/">首页</a></li>
        <li class="breadcrumb-item" aria-current="page">赛事观察</li>
      </ol>
    </nav>

    <header class="news-hero">
      <p class="news-hero-deco" aria-hidden="true">MATCHDAY OBSERVE</p>
      <div class="news-hero-grid">
        <div class="news-hero-main">
          <p class="news-hero-kicker">
            <span class="tag tag-accent">第 3 阶段</span>
            <span class="news-hero-kicker-text">本赛季进行中 · 每轮三次更新</span>
          </p>
          <h1 class="news-hero-title" id="news-hero-title">规则怎么改、谁伤了、导航更新到哪，一次读完</h1>
          <p class="news-hero-lead">
            每个比赛日，LDSPORTS体育的编辑先把规则调整、伤停名单和导航变动过一遍，再按联赛逐条写清楚。你花三分钟就能知道本轮有哪些变化值得留意，然后直接进到对应的球队卡片或赛制说明。
          </p>
          <ul class="news-hero-points">
            <li>规则解读、伤停播报、导航更新、数据复盘分成四类，各看各的</li>
            <li>上午、赛前两小时、开赛前十分钟各出一轮，变化的条目单独标出来</li>
            <li>条目按赛季阶段归档，赛季走完也能回头翻当时的判断</li>
            <li>看完条目顺路跳到球队卡片和赛制说明，不用再找一遍</li>
          </ul>
        </div>

        <aside class="news-hero-board" aria-label="本轮更新节奏">
          <p class="board-label">本轮更新节奏</p>
          <ol class="board-timeline">
            <li class="board-slot">
              <span class="board-time">上午</span>
              <span class="board-text">规则条目与联赛导航先同步</span>
            </li>
            <li class="board-slot">
              <span class="board-time">赛前 2 小时</span>
              <span class="board-text">伤停名单、射门统计落定</span>
            </li>
            <li class="board-slot board-slot--last">
              <span class="board-time">赛前 10 分钟</span>
              <span class="board-text">最后一轮核对，改动处标橙</span>
            </li>
          </ol>
          <p class="board-foot">订阅提醒后，每轮开赛前会把新条目送到你的邮箱。</p>
        </aside>
      </div>
    </header>

    <section class="news-section" aria-labelledby="top-title">
      <div class="section-head">
        <p class="section-index">01 / 编辑台</p>
        <h2 class="section-title" id="top-title">本期头条</h2>
        <p class="section-sub">编辑挑出的四条，覆盖规则、伤停、导航与复盘。如果你是第一次来，从这四条开始最省时间。</p>
      </div>

      <div class="news-lead-grid">
        <article class="news-feature">
          <div class="news-feature-media">
            <img src="{zhanqunpic:h:840w:1400}" width="1400" height="840" alt="俯视战术视角的抽象球场线条与数据标注，冷白与荧光青为主">
          </div>
          <div class="news-feature-body">
            <div class="news-entry-top">
              <span class="news-cat news-cat--rules">规则解读</span>
              <span class="news-when">本轮赛前更新</span>
            </div>
            <h3 class="news-feature-title">杯赛加时赛换人窗口调整，替补席的报备顺序跟着改</h3>
            <p class="news-feature-text">
              加时赛开始前，第四官员收名单的顺序成了最容易出错的环节。我们把教练在场边最常问的三个问题拆开讲，附上判罚判例里对应的处理方式。
            </p>
          </div>
        </article>

        <ol class="news-picks">
          <li class="news-pick">
            <span class="news-pick-no">01</span>
            <div>
              <h3 class="news-pick-title">三人制篮球的加时计分怎么算，从场边教练最常问的那句讲起</h3>
              <p class="news-pick-meta"><span class="news-cat news-cat--rules">规则解读</span> 本赛季第 2 阶段</p>
            </div>
          </li>
          <li class="news-pick">
            <span class="news-pick-no">02</span>
            <div>
              <h3 class="news-pick-title">替补门将连续出场的失球分布，伤停追踪里翻得到</h3>
              <p class="news-pick-meta"><span class="news-cat news-cat--injury">伤停播报</span> 上轮赛后归档</p>
            </div>
          </li>
          <li class="news-pick">
            <span class="news-pick-no">03</span>
            <div>
              <h3 class="news-pick-title">本赛季第 3 阶段导航页，球队卡片入口挪了位置</h3>
              <p class="news-pick-meta"><span class="news-cat news-cat--nav">导航更新</span> 本轮赛前更新</p>
            </div>
          </li>
        </ol>
      </div>
    </section>

    <section class="news-section news-feed" aria-labelledby="feed-title">
      <div class="section-head">
        <p class="section-index">02 / 条目流</p>
        <h2 class="section-title" id="feed-title">本赛季条目</h2>
        <p class="section-sub">按你关心的方向筛一下，只看想看的那一类。带伤停数据的内容每轮开赛前十分钟都会重新过一遍。</p>
      </div>

      <div class="filter-bar news-filter" role="group" aria-label="按内容方向筛选条目">
        <button type="button" class="filter-btn" data-filter="all" aria-pressed="true">全部 14</button>
        <button type="button" class="filter-btn" data-filter="rules" aria-pressed="false">规则解读</button>
        <button type="button" class="filter-btn" data-filter="injury" aria-pressed="false">伤停播报</button>
        <button type="button" class="filter-btn" data-filter="nav" aria-pressed="false">导航更新</button>
        <button type="button" class="filter-btn" data-filter="review" aria-pressed="false">数据复盘</button>
      </div>

      <p class="filter-empty" data-filter-empty hidden>这个方向暂时没有本轮条目，换个标签看看，或者翻到下面的赛季专题。</p>

      <ol class="news-list">
        <li class="news-entry" data-topic="rules">
          <span class="news-no">R-01</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--rules">规则解读</span>
              <span class="news-when">本轮赛前更新</span>
            </div>
            <h3 class="news-entry-title">越位判罚尺度调整后，进攻队员的起跑时机怎么判断</h3>
            <p class="news-entry-text">边路传中前插时，身体哪一部分算有效位置，用三个场上场景说清楚。判罚判例里最容易起争议的两种站位，这里各配了一段说明。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="rules">
          <span class="news-no">R-02</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--rules">规则解读</span>
              <span class="news-when">上轮赛后归档</span>
            </div>
            <h3 class="news-entry-title">淘汰赛加时阶段的换人报备顺序，第四官员窗口怎么走</h3>
            <p class="news-entry-text">从替补席的视角梳理一遍流程：谁先交名单、什么时候可以改动、临时受伤的名额能不能替换。带队比赛的教练可以直接照着准备。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="rules">
          <span class="news-no">R-03</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--rules">规则解读</span>
              <span class="news-when">本赛季第 2 阶段</span>
            </div>
            <h3 class="news-entry-title">篮球掩护犯规的判罚尺度，本轮三次改判有什么共同点</h3>
            <p class="news-entry-text">三次改判都发生在同一种接触上：移动方向和接触点谁先谁后。把判罚判例按类型排一排，尺度变化就看得出来。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="rules">
          <span class="news-no">R-04</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--rules">规则解读</span>
              <span class="news-when">上赛季归档</span>
            </div>
            <h3 class="news-entry-title">排球触网判罚的细分情形，从主攻手的站位习惯说起</h3>
            <p class="news-entry-text">拦网手和网绳的接触判定分好几种，站得靠前还是靠后，结果可能不同。按站位习惯拆开看，队员自己也能提前避免。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="injury">
          <span class="news-no">I-01</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--injury">伤停播报</span>
              <span class="news-when">本轮赛前更新</span>
            </div>
            <h3 class="news-entry-title">六支球队的主力后腰缺阵，中场拦截方式普遍要改</h3>
            <p class="news-entry-text">缺了扫荡型后腰，多数球队会把拦截线往后挪一格。对应的失球位置分布也变了，看板上能直接对比前几轮。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="injury">
          <span class="news-no">I-02</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--injury">伤停播报</span>
              <span class="news-when">本轮赛前更新</span>
            </div>
            <h3 class="news-entry-title">边路快马连续两轮无法出场，球队改打三中卫的可能性</h3>
            <p class="news-entry-text">边路速度点缺席后，几支球队把边卫往前推、中卫补位，阵型重心整体后移。谁改得快、谁还在硬撑，名单里看得明白。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="injury">
          <span class="news-no">I-03</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--injury">伤停播报</span>
              <span class="news-when">赛前 10 分钟核对</span>
            </div>
            <h3 class="news-entry-title">门将伤情更新，替补门将的出场记录与失球分布</h3>
            <p class="news-entry-text">替补门将本赛季出场不多，但高球处理和出击范围的特点已经在记录里。把两个赛季的数据放在一起，落差比印象里小。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="injury">
          <span class="news-no">I-04</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--injury">伤停播报</span>
              <span class="news-when">本赛季中段</span>
            </div>
            <h3 class="news-entry-title">密集赛程下的肌肉伤病集中出现，哪几支球队轮换压力最大</h3>
            <p class="news-entry-text">连续两周双赛之后，小腿和腘绳肌的缺阵比例明显抬头。轮换深度不够的球队，主力出场时间曲线已经压不下去。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="nav">
          <span class="news-no">N-01</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--nav">导航更新</span>
              <span class="news-when">本轮赛前更新</span>
            </div>
            <h3 class="news-entry-title">联赛导航合集新增两个地区的杯赛赛制条目</h3>
            <p class="news-entry-text">这两个地区此前只有联赛主线，现在杯赛的晋级规则、平局处理和加时安排都能直接查到，按赛季可以直接跳转。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="nav">
          <span class="news-no">N-02</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--nav">导航更新</span>
              <span class="news-when">本赛季第 2 阶段</span>
            </div>
            <h3 class="news-entry-title">三个联赛的赛季阶段划分调整，导航页已同步</h3>
            <p class="news-entry-text">阶段划分变了，赛程和积分口径也跟着变。更新后的导航页把新阶段的起止轮次标了出来，之前的条目保留了原阶段的标签。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="nav">
          <span class="news-no">N-03</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--nav">导航更新</span>
              <span class="news-when">本轮赛前更新</span>
            </div>
            <h3 class="news-entry-title">球队卡片新增伤停历史入口，三步查询少一次折返</h3>
            <p class="news-entry-text">以前看球队的历史缺阵要单独翻页面，现在卡片里直接带入口。按常用人群查询指引走三步，就能落在关注球队的卡片上。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="review">
          <span class="news-no">D-01</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--review">数据复盘</span>
              <span class="news-when">上轮赛后归档</span>
            </div>
            <h3 class="news-entry-title">近五轮射门转化率走势，两支球队的效率拐点在哪</h3>
            <p class="news-entry-text">两队的射门次数差不多，但转化率一个在往上走、一个掉了一截。差别出在中前场的接球位置，趋势图上一眼能分出来。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="review">
          <span class="news-no">D-02</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--review">数据复盘</span>
              <span class="news-when">本赛季第 2 阶段</span>
            </div>
            <h3 class="news-entry-title">伤停记录与失球数的关系，主力后卫缺阵的代价</h3>
            <p class="news-entry-text">主力中卫缺阵的场次，场均失球多出接近一个。定位球防守的落差最明显，这部分在伤停信息体育评测里按轮次比对过。</p>
          </div>
        </li>

        <li class="news-entry" data-topic="review">
          <span class="news-no">D-03</span>
          <div class="news-entry-main">
            <div class="news-entry-top">
              <span class="news-cat news-cat--review">数据复盘</span>
              <span class="news-when">上赛季归档</span>
            </div>
            <h3 class="news-entry-title">定位球得分占比变化，本赛季前四轮与上赛季对比</h3>
            <p class="news-entry-text">本赛季前四轮的定位球得分占比比上赛季整季高出一截。角球战术的跑位变化是主要原因，几支球队的二点球落点数据可以对照看。</p>
          </div>
        </li>
      </ol>

      <p class="news-feed-note">
        手上只有一支球队要盯？按常用人群查询指引，从地区或赛制选起，锁定赛季，最后落到球队卡片，三次点击之内。
        <a href="/knowledge/">去查询指引中心</a>
      </p>
    </section>

    <section class="news-section news-series" aria-labelledby="series-title">
      <div class="section-head">
        <p class="section-index">03 / 专题系列</p>
        <h2 class="section-title" id="series-title">跟着赛季走的三条线</h2>
        <p class="section-sub">单条内容看完容易散，按系列连着读，规则变化和伤停趋势的前后关系就串起来了。</p>
      </div>

      <div class="news-banner">
        <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="横向展开的赛季时间轴与分组色块，橙色标出当前阶段" loading="lazy" decoding="async">
        <div class="news-banner-body">
          <p class="banner-kicker"><span class="tag tag-change">当前阶段</span> 第 3 阶段 · 常规赛后半段</p>
          <p class="banner-text">每个赛季我们维护 36 个专题页，覆盖主流联赛与重点杯赛。赛季走完之后专题保留归档，回头翻当时的判断和数据都在。</p>
        </div>
      </div>

      <div class="series-grid">
        <article class="series-card">
          <p class="series-no">系列 A</p>
          <h3 class="series-title">赛季专题</h3>
          <p class="series-text">围绕一个赛季阶段，把当阶段的规则、导航和关键数据放在同一页。开季、中段和收官各有一套，跟着读不会断线。</p>
        </article>
        <article class="series-card">
          <p class="series-no">系列 B</p>
          <h3 class="series-title">规则改版解读</h3>
          <p class="series-text">按项目分线跟踪规则调整。规则条目按项目、赛制、判罚类型三级分类，页内可以直接用关键词找出对应那条。</p>
        </article>
        <article class="series-card">
          <p class="series-no">系列 C</p>
          <h3 class="series-title">伤停追踪</h3>
          <p class="series-text">从赛季初的第一份名单跟到最后一轮。缺阵原因、复出轮次和同期失球数据放在一起，比单看一份名单有用得多。</p>
        </article>
      </div>
    </section>

    <section class="news-section news-review" aria-labelledby="review-title">
      <div class="section-head">
        <p class="section-index">04 / 数据复盘</p>
        <h2 class="section-title" id="review-title">把过程数据摊开看，苗头比比分早出现</h2>
        <p class="section-sub">射门和伤停这两组数字，往往在结果出来之前就给出了方向。下面是我们最近几轮反复看的两条线。</p>
      </div>

      <div class="review-grid">
        <figure class="review-figure">
          <img src="{zhanqunpic:h:720w:1200}" width="1200" height="720" alt="射门与伤停数据的折线与柱状组合图，等宽数字标注刻度" loading="lazy" decoding="async">
          <figcaption>近五轮的射门效率与缺阵人数走势，刻度对齐每轮赛前更新。</figcaption>
        </figure>

        <div class="review-notes">
          <div class="review-stat">
            <span class="review-stat-num">1200</span>
            <span class="review-stat-label">每轮赛事平均更新的伤停与射门记录条数</span>
          </div>
          <div class="review-stat">
            <span class="review-stat-num">3</span>
            <span class="review-stat-label">每天更新时段：上午、赛前两小时、开赛前十分钟</span>
          </div>
          <div class="review-stat">
            <span class="review-stat-num">42</span>
            <span class="review-stat-label">导航合集覆盖的联赛数量，按地区、赛制、赛季组织</span>
          </div>
          <a class="btn btn-primary review-btn" href="/solutions/">看数据服务与栏目方案</a>
        </div>
      </div>
    </section>

    <section class="news-section news-subscribe" aria-labelledby="sub-title">
      <div class="subscribe-card">
        <img class="subscribe-bg" src="{zhanqunpic:h:640w:1000}" width="1000" height="640" alt="赛场夜灯氛围下的抽象光斑与网格，无人物正面" loading="lazy" decoding="async">
        <div class="subscribe-body">
          <p class="section-index">05 / 更新提醒</p>
          <h2 class="section-title" id="sub-title">让新条目自己找上门</h2>
          <p class="subscribe-text">
            每轮三次更新完成后，我们会把这一轮的规则变动、伤停名单和导航调整整理成一封短邮件。写一句“订阅”发到
            <a href="mailto:email@ld-sports-news.com.cn">email@ld-sports-news.com.cn</a>，或者先到联系页说清楚你想跟哪几个联赛，我们按你的关注范围推。
          </p>
          <ul class="subscribe-list">
            <li>上午那一轮偏规则与导航，适合白天先过一遍</li>
            <li>赛前两小时那一轮带伤停和射门数据，适合临场判断</li>
            <li>开赛前十分钟那一轮只发改动，保持短</li>
          </ul>
          <div class="subscribe-actions">
            <a class="btn btn-primary" href="/contact/">订阅赛事观察更新</a>
            <a class="btn btn-ghost" href="/who-we-are/">看看是谁在写</a>
          </div>
        </div>
      </div>
    </section>

  </div>
</main>

/* ===== 赛事观察 /blog/ ===== */
.page-news {
  position: relative;
  background-color: var(--c-pitch);
  color: var(--c-white);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-news::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 48px);
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.25) 45%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.25) 45%, transparent 75%);
}

.page-news .news-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-news img {
  max-width: 100%;
  height: auto;
}

/* ---------- 面包屑 ---------- */
.page-news .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.08em;
  color: var(--c-index);
}

.page-news .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 8px;
  color: var(--c-grid);
}

.page-news .breadcrumb-item a {
  color: var(--c-index);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-news .breadcrumb-item a:hover {
  color: var(--c-neon);
  border-bottom-color: var(--c-neon);
}

.page-news .breadcrumb-item[aria-current="page"] {
  color: var(--c-neon-deep);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  padding: 26px 0 42px;
}

.page-news .news-hero-deco {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 8.5vw, 88px);
  line-height: 0.88;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-grid);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

.page-news .news-hero-grid {
  display: grid;
  gap: 30px;
}

.page-news .news-hero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.page-news .news-hero-kicker-text {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  color: var(--c-index);
}

.page-news .news-hero-title {
  margin: 16px 0 0;
  max-width: 680px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--c-white);
}

.page-news .news-hero-lead {
  margin: 18px 0 0;
  max-width: 620px;
  font-size: var(--step-2);
  line-height: 1.75;
  color: var(--c-index);
}

.page-news .news-hero-points {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .news-hero-points li {
  padding-left: 14px;
  border-left: 2px solid var(--c-neon-deep);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--c-white);
}

.page-news .news-hero-board {
  padding: 20px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: var(--c-locker);
  background-image: linear-gradient(160deg, rgba(59, 240, 208, 0.08), transparent 60%);
}

.page-news .board-label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-neon);
}

.page-news .board-timeline {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .board-slot {
  display: grid;
  gap: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--grid-line);
}

.page-news .board-slot--last {
  border-left-color: var(--c-orange);
}

.page-news .board-time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--c-timer);
}

.page-news .board-text {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--c-white);
}

.page-news .board-foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--c-index);
}

/* ---------- 通用章节 ---------- */
.page-news .news-section {
  padding: 46px 0;
  border-top: 1px solid var(--hairline);
}

.page-news .section-head {
  max-width: 720px;
  margin-bottom: 26px;
}

.page-news .section-index {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-neon);
}

.page-news .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1.14;
  letter-spacing: 0.01em;
  color: var(--c-white);
}

.page-news .section-sub {
  margin: 12px 0 0;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--c-index);
}

/* ---------- 分类标签与时间徽标 ---------- */
.page-news .news-cat {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.page-news .news-cat--rules { color: var(--c-neon); }
.page-news .news-cat--injury { color: var(--c-orange); }
.page-news .news-cat--nav { color: var(--c-timer); }
.page-news .news-cat--review { color: var(--c-neon-deep); }

.page-news .news-when {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius);
  background-color: var(--c-glass);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--c-index);
  white-space: nowrap;
}

/* ---------- 头条 ---------- */
.page-news .news-lead-grid {
  display: grid;
  gap: 26px;
}

.page-news .news-feature {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: var(--c-locker);
}

.page-news .news-feature-media {
  overflow: hidden;
  aspect-ratio: 5 / 3;
  background-color: var(--c-glass);
}

.page-news .news-feature-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-news .news-feature-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.page-news .news-feature-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.35;
  color: var(--c-white);
}

.page-news .news-feature-text {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--c-index);
}

.page-news .news-picks {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.page-news .news-pick {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}

.page-news .news-pick-no {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  color: var(--c-neon);
}

.page-news .news-pick-title {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-white);
}

.page-news .news-pick-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-index);
}

/* ---------- 筛选 ---------- */
.page-news .news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 20px;
}

.page-news .filter-btn {
  padding: 8px 14px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--c-index);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease);
}

.page-news .filter-btn:hover {
  color: var(--c-neon);
  border-color: var(--c-neon);
}

.page-news .filter-btn:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
}

.page-news .filter-btn[aria-pressed="true"] {
  border-color: var(--c-neon);
  background-color: var(--c-neon);
  color: var(--c-pitch);
}

.page-news .filter-empty {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px dashed var(--glass-line);
  border-radius: var(--radius);
  font-size: var(--step-1);
  color: var(--c-index);
}

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

.page-news .news-entry {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 14px;
  padding: 18px 0 18px 16px;
  border-bottom: 1px solid var(--hairline);
  transition: background-color 220ms var(--ease);
}

.page-news .news-entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background-color: var(--c-index);
  opacity: 0.55;
  transition: width 200ms var(--ease);
}

.page-news .news-entry[data-topic="rules"]::before { background-color: var(--c-neon); opacity: 1; }
.page-news .news-entry[data-topic="injury"]::before { background-color: var(--c-orange); opacity: 1; }
.page-news .news-entry[data-topic="nav"]::before { background-color: var(--c-timer); opacity: 1; }
.page-news .news-entry[data-topic="review"]::before { background-color: var(--c-neon-deep); opacity: 1; }

.page-news .news-entry:hover {
  background-color: var(--c-locker);
}

.page-news .news-entry:hover::before {
  width: 5px;
}

.page-news .news-entry.is-filtered-out {
  display: none;
}

.page-news .news-no {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-index);
  opacity: 0.85;
}

.page-news .news-entry-main {
  min-width: 0;
}

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

.page-news .news-entry-title {
  margin: 10px 0 0;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-white);
}

.page-news .news-entry-text {
  margin: 8px 0 0;
  max-width: 760px;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--c-index);
}

.page-news .news-feed-note {
  margin: 26px 0 0;
  padding: 16px 18px;
  border-left: 2px solid var(--c-neon);
  background-color: var(--c-locker);
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--c-index);
}

.page-news .news-feed-note a {
  color: var(--c-neon);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.page-news .news-feed-note a:hover {
  color: var(--c-white);
}

/* ---------- 专题横幅 ---------- */
.page-news .news-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: var(--c-locker);
}

.page-news .news-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  opacity: 0.55;
}

.page-news .news-banner::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, transparent, var(--c-locker) 78%);
}

.page-news .news-banner-body {
  position: relative;
  z-index: 1;
  margin-top: -72px;
  padding: 0 22px 24px;
}

.page-news .banner-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.08em;
  color: var(--c-index);
}

.page-news .banner-text {
  margin: 0;
  max-width: 640px;
  font-size: var(--step-2);
  line-height: 1.65;
  color: var(--c-white);
}

.page-news .series-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.page-news .series-card {
  padding: 20px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: var(--c-locker);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}

.page-news .series-card:hover {
  border-color: var(--c-neon);
  transform: translateY(-2px);
}

.page-news .series-no {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  color: var(--c-timer);
}

.page-news .series-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.3;
  color: var(--c-white);
}

.page-news .series-text {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--c-index);
}

/* ---------- 数据复盘 ---------- */
.page-news .review-grid {
  display: grid;
  gap: 26px;
}

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

.page-news .review-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background-color: var(--c-locker);
  object-fit: cover;
}

.page-news .review-figure figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-index);
}

.page-news .review-notes {
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-news .review-stat {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--c-neon-deep);
  border-radius: var(--radius);
  background-color: var(--c-locker);
}

.page-news .review-stat-num {
  font-family: var(--font-mono);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-neon);
  font-variant-numeric: tabular-nums;
}

.page-news .review-stat-label {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--c-index);
}

.page-news .review-btn {
  justify-self: start;
}

/* ---------- 订阅 ---------- */
.page-news .subscribe-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background-color: var(--c-glass);
}

.page-news .subscribe-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: 0.28;
  pointer-events: none;
}

.page-news .subscribe-body {
  position: relative;
  z-index: 1;
  padding: 28px 22px;
}

.page-news .subscribe-text {
  margin: 16px 0 0;
  max-width: 620px;
  font-size: var(--step-2);
  line-height: 1.75;
  color: var(--c-white);
}

.page-news .subscribe-text a {
  color: var(--c-neon);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  word-break: break-all;
}

.page-news .subscribe-text a:hover {
  color: var(--c-white);
}

.page-news .subscribe-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .subscribe-list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--c-index);
}

.page-news .subscribe-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background-color: var(--c-timer);
}

.page-news .subscribe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- 断点 ---------- */
@media (min-width: 620px) {
  .page-news .news-hero-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-news .news-hero-points li {
    padding-right: 12px;
  }
}

@media (min-width: 720px) {
  .page-news .series-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-news .subscribe-body {
    padding: 38px 34px;
  }
}

@media (min-width: 900px) {
  .page-news .news-hero {
    padding: 34px 0 54px;
  }
  .page-news .news-hero-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
  }
  .page-news .news-lead-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 34px;
    align-items: start;
  }
  .page-news .news-picks {
    border-top: none;
  }
  .page-news .news-pick:first-child {
    padding-top: 0;
  }
  .page-news .review-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 34px;
    align-items: start;
  }
  .page-news .news-banner-body {
    margin-top: -88px;
    padding: 0 32px 30px;
  }
}

@media (min-width: 1100px) {
  .page-news .news-section {
    padding: 60px 0;
  }
  .page-news .news-entry {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 20px;
    padding: 22px 0 22px 20px;
  }
  .page-news .news-entry::before {
    top: 22px;
    bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .series-card,
  .page-news .news-entry,
  .page-news .news-entry::before,
  .page-news .filter-btn {
    transition: none;
  }
  .page-news .series-card:hover {
    transform: none;
  }
}