.page-news {
  --news-gap: clamp(16px, 2.6vw, 30px);
  --news-rule: 2px solid var(--ink-deep);
  background: var(--paper);
  color: var(--ink);
}

/* ---------- 面包屑 ---------- */
.page-news .news-crumb {
  padding-top: clamp(12px, 2vw, 22px);
  padding-bottom: clamp(10px, 1.6vw, 18px);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper-white);
  padding: clamp(30px, 5vw, 68px) 0 clamp(28px, 4vw, 56px);
  border-bottom: 3px solid var(--ink-deep);
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(128deg, rgba(255, 106, 26, 0.17) 0 20%, transparent 20%),
    repeating-linear-gradient(90deg, rgba(243, 233, 218, 0.05) 0 1px, transparent 1px 72px);
  pointer-events: none;
}

.page-news .news-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -34%;
  width: 52%;
  height: 96%;
  background: linear-gradient(158deg, rgba(47, 224, 208, 0.2), rgba(47, 224, 208, 0) 74%);
  clip-path: polygon(32% 0, 100% 20%, 100% 100%, 0 100%);
  pointer-events: none;
}

.page-news .news-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-news .news-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-news .news-h1 {
  margin: 0;
  font-size: clamp(32px, 7vw, 74px);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--paper-white);
}

.page-news .news-hero-lede {
  margin: clamp(14px, 2vw, 22px) 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  color: var(--ink-muted);
}

.page-news .news-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 30px);
}

.page-news .news-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 40px);
  margin: clamp(24px, 3.4vw, 36px) 0 0;
  padding: clamp(16px, 2vw, 22px) 0 0;
  list-style: none;
  border-top: 2px solid var(--ink-rule);
}

.page-news .news-hero-facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-news .fact-num {
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--orange);
}

.page-news .fact-txt {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.page-news .news-hero-aside {
  border: 2px solid var(--ink-rule);
  border-left: 4px solid var(--orange);
  background: rgba(5, 11, 20, 0.55);
  padding: clamp(18px, 2.6vw, 26px);
}

.page-news .aside-kicker {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
}

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

.page-news .aside-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
}

.page-news .aside-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.page-news .aside-txt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-white);
}

.page-news .aside-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.page-news .aside-link:hover {
  color: var(--orange);
}

/* ---------- 轮次刻度 ---------- */
.page-news .news-scale {
  background: var(--ink-deep);
  color: var(--paper);
  padding: clamp(18px, 2.8vw, 32px) 0;
  border-bottom: 3px solid var(--orange);
}

.page-news .scale-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

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

.page-news .scale-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--paper-white);
}

.page-news .scale-track {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-news .scale-track li {
  flex: 0 0 auto;
}

.page-news .scale-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 74px;
  padding: 10px 8px;
  border: 2px solid var(--ink-rule);
  color: var(--paper);
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.page-news .scale-dot:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.page-news .scale-dot.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink-deep);
}

.page-news .scale-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.page-news .scale-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.78;
}

.page-news .scale-strip {
  margin: 18px 0 0;
  border: 2px solid var(--ink-rule);
}

.page-news .scale-strip img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 通用章节 ---------- */
.page-news .news-section {
  padding: clamp(38px, 6vw, 82px) 0;
}

.page-news .news-head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(22px, 3.4vw, 38px);
}

.page-news .section-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--steel);
}

.page-news .chapter-marker {
  transition: color 0.2s ease;
}

.page-news [data-chapter-active] .chapter-marker {
  color: var(--orange);
}

.page-news .news-h2 {
  margin: 0;
  font-size: clamp(25px, 3.8vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.page-news .news-head-note {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: #35405a;
}

/* ---------- 轮次头版 ---------- */
.page-news .front-grid {
  display: grid;
  gap: var(--news-gap);
}

.page-news .front-lead {
  background: var(--paper-white);
  border: 3px solid var(--ink-deep);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}

.page-news .front-media {
  position: relative;
  margin: 0;
  border-bottom: 3px solid var(--ink-deep);
  background: var(--ink);
}

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

.page-news .front-cap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 14px;
  background: var(--orange);
  color: var(--ink-deep);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.page-news .front-body {
  padding: clamp(18px, 2.6vw, 30px);
}

.page-news .front-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.page-news .tag--orange {
  background: var(--orange);
  color: var(--ink-deep);
  border-color: var(--ink-deep);
}

.page-news .front-title {
  margin: 0;
  font-size: clamp(21px, 3.2vw, 34px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-news .front-sum {
  margin: 14px 0 20px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.78;
  color: #343e56;
}

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

.page-news .side-card {
  border: 2px solid var(--ink-deep);
  background: var(--paper-white);
  padding: clamp(16px, 2.4vw, 24px);
}

.page-news .side-card--ink {
  background: var(--ink);
  color: var(--paper-white);
  border-color: var(--ink-deep);
  box-shadow: var(--shadow-soft);
}

.page-news .side-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}

.page-news .side-card--ink .side-title {
  color: var(--cyan);
}

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

.page-news .side-index a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--paper-rule);
  transition: background 0.16s ease;
}

.page-news .side-index a:hover {
  background: rgba(255, 106, 26, 0.14);
}

.page-news .side-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
}

.page-news .side-name {
  font-size: 15px;
  font-weight: 700;
}

.page-news .side-note {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--steel);
}

.page-news .side-latest {
  margin: 0 0 18px;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.page-news .side-latest li::marker {
  color: var(--orange);
  font-family: var(--font-mono);
}

.page-news .side-latest a {
  font-size: 14px;
  line-height: 1.62;
  color: var(--paper-white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-news .side-latest a:hover {
  color: var(--cyan);
  border-bottom-color: currentColor;
}

/* ---------- 轮次列表 ---------- */
.page-news .round-block {
  scroll-margin-top: 84px;
  margin-bottom: clamp(28px, 4vw, 46px);
}

.page-news .round-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ink-deep);
}

.page-news .round-badge {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-news .round-note {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel);
}

.page-news .round-entries {
  display: grid;
}

.page-news .entry {
  scroll-margin-top: 84px;
  background: var(--paper-white);
  border: 2px solid var(--ink-deep);
  border-top: 0;
  padding: clamp(16px, 2.4vw, 26px);
  transition: box-shadow 0.16s ease, background 0.16s ease;
}

.page-news .entry:first-child {
  border-top: 0;
}

.page-news .entry:hover {
  background: #fffdf8;
  box-shadow: inset 6px 0 0 var(--orange);
}

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

.page-news .entry-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--steel);
}

.page-news .entry-title {
  margin: 0;
  font-size: clamp(16px, 2.1vw, 21px);
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-news .entry-sum {
  margin: 10px 0 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.78;
  color: #3a4459;
}

.page-news .entry-figure {
  margin: 16px 0 0;
  border: 2px solid var(--ink-deep);
}

.page-news .entry-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .list-more {
  margin: clamp(20px, 3vw, 30px) 0 0;
}

/* ---------- JWK 专题 ---------- */
.page-news .news-topic {
  background: var(--ink);
  color: var(--paper-white);
}

.page-news .news-topic .news-h2 {
  color: var(--paper-white);
}

.page-news .news-topic .news-head-note {
  color: var(--ink-muted);
}

.page-news .news-topic .section-index {
  color: var(--cyan);
}

.page-news .topic-grid {
  display: grid;
  gap: 14px;
}

.page-news .topic-card {
  display: grid;
  gap: 8px;
  padding: clamp(18px, 2.6vw, 26px);
  background: rgba(243, 233, 218, 0.05);
  border: 2px solid var(--ink-rule);
  text-decoration: none;
  color: var(--paper-white);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.page-news .topic-card:hover {
  transform: translate(-3px, -3px);
  border-color: var(--cyan);
  background: rgba(47, 224, 208, 0.09);
}

.page-news .topic-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--orange);
}

.page-news .topic-card h3 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-news .topic-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-muted);
}

.page-news .topic-go {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

/* ---------- 球队观察 ---------- */
.page-news .observe-grid {
  display: grid;
  gap: clamp(24px, 3.6vw, 46px);
  align-items: start;
}

.page-news .observe-figure {
  margin: 0;
  border: 3px solid var(--ink-deep);
  box-shadow: var(--shadow-soft);
  background: var(--ink);
}

.page-news .observe-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .observe-cap {
  padding: 8px 14px;
  background: var(--ink-deep);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.page-news .observe-list {
  margin: 0 0 clamp(20px, 3vw, 28px);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.page-news .observe-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  padding: 16px 0;
  border-bottom: 2px solid var(--paper-rule);
}

.page-news .observe-idx {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  padding-top: 3px;
}

.page-news .observe-list h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.page-news .observe-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.74;
  color: #3a4459;
}

/* ---------- 版本动态 ---------- */
.page-news .version-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  border-top: 3px solid var(--ink-deep);
}

.page-news .version-item {
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2.4vw, 24px) clamp(14px, 2vw, 20px);
  background: var(--paper-white);
  border: 2px solid var(--ink-deep);
  border-top: 0;
}

.page-news .version-tag {
  justify-self: start;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.page-news .version-item h3 {
  margin: 0;
  font-size: clamp(16px, 2.1vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.page-news .version-item p {
  margin: 0;
  max-width: 66ch;
  font-size: 14px;
  line-height: 1.76;
  color: #3a4459;
}

.page-news .version-more {
  margin: clamp(20px, 3vw, 28px) 0 0;
}

/* ---------- 订阅提醒 ---------- */
.page-news .news-subscribe {
  background: var(--ink-deep);
  color: var(--paper-white);
  border-top: 3px solid var(--orange);
}

.page-news .subscribe-panel {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
}

.page-news .subscribe-copy {
  display: grid;
  gap: 12px;
}

.page-news .news-subscribe .section-index {
  color: var(--cyan);
}

.page-news .subscribe-title {
  color: var(--paper-white);
}

.page-news .subscribe-lede {
  margin: 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-muted);
}

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

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-news .topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .page-news .news-hero-inner {
    grid-template-columns: 1.35fr 0.65fr;
    gap: clamp(32px, 4vw, 64px);
  }

  .page-news .front-grid {
    grid-template-columns: 1.55fr 0.8fr;
    align-items: start;
  }

  .page-news .front-side {
    position: sticky;
    top: 84px;
  }

  .page-news .observe-grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }

  .page-news .subscribe-panel {
    grid-template-columns: 1.4fr auto;
  }

  .page-news .subscribe-actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1100px) {
  .page-news .topic-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-news .scale-track {
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .scale-dot,
  .page-news .topic-card,
  .page-news .entry,
  .page-news .chapter-marker {
    transition: none;
  }
}


<main id="main-content" class="page-news">

  <div class="container news-crumb">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <ol class="breadcrumb-list">
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">赛场首页</a></li>
        <li class="breadcrumb-item" aria-current="page">赛场日志</li>
      </ol>
    </nav>
  </div>

  <section class="news-hero">
    <div class="container news-hero-inner">
      <div class="news-hero-copy">
        <p class="eyebrow news-eyebrow">Journal · 轮次内容</p>
        <h1 class="news-h1">一轮打完，你就知道这轮发生了什么</h1>
        <p class="news-hero-lede">比赛日之后，优德赛场把比分之外的转折回合、阵容调整和排名变化写成几分钟能读完的内容。挑一个轮次翻下去，或者只跟着你的主队看。</p>
        <div class="news-hero-actions">
          <a class="btn btn--primary" href="#round-18">看最近一轮</a>
          <a class="btn btn--ghost" href="/tools/">订阅我的主队</a>
        </div>
        <ul class="news-hero-facts">
          <li><span class="fact-num">2</span><span class="fact-txt">小时内出快报</span></li>
          <li><span class="fact-num">6</span><span class="fact-txt">小时内出完整战报</span></li>
          <li><span class="fact-num">260</span><span class="fact-txt">篇每月持续更新</span></li>
        </ul>
      </div>
      <aside class="news-hero-aside">
        <p class="aside-kicker">编辑室速览</p>
        <ul class="aside-list">
          <li><span class="aside-num">18</span><span class="aside-txt">最近三轮战报已全部上架</span></li>
          <li><span class="aside-num">48</span><span class="aside-txt">个联赛与杯赛的赛果在库</span></li>
          <li><span class="aside-num">360</span><span class="aside-txt">支球队可加入你的关注列表</span></li>
        </ul>
        <a class="aside-link" href="/introduction/">看看是谁在写这些内容</a>
      </aside>
    </div>
  </section>

  <section class="news-scale" aria-label="本赛季轮次刻度">
    <div class="container">
      <div class="scale-head">
        <p class="scale-kicker">Round Scale</p>
        <p class="scale-title">本赛季轮次刻度</p>
      </div>
      <ol class="scale-track">
        <li><a class="scale-dot is-active" href="#round-18"><span class="scale-num">18</span><span class="scale-label">最新</span></a></li>
        <li><a class="scale-dot" href="#round-17"><span class="scale-num">17</span><span class="scale-label">已归档</span></a></li>
        <li><a class="scale-dot" href="#round-16"><span class="scale-num">16</span><span class="scale-label">已归档</span></a></li>
        <li><a class="scale-dot" href="#round-15"><span class="scale-num">15</span><span class="scale-label">已归档</span></a></li>
        <li><a class="scale-dot" href="#round-14"><span class="scale-num">14</span><span class="scale-label">已归档</span></a></li>
      </ol>
      <div class="scale-strip media-frame media-frame--wide">
        <img src="{zhanqunpic:h:500w:1200}" width="1200" height="500" alt="多个轮次编号卡片、箭头与分类标签拼接成的轮次索引图" loading="lazy" decoding="async">
      </div>
    </div>
  </section>

  <section class="news-section news-front" data-chapter>
    <div class="container">
      <header class="section-head news-head">
        <span class="section-index chapter-marker">01</span>
        <h2 class="section-title news-h2">轮次头版</h2>
        <p class="news-head-note">最近三轮的优德JWK赛后战报都排在这里，从快报到完整战报按发布先后收进同一轮。</p>
      </header>

      <div class="front-grid">
        <article class="front-lead" id="front-18">
          <figure class="front-media media-frame media-frame--wide">
            <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深空蓝赛场灯光、轮次刻度与橙色记分牌线条组成的轮次头版氛围图">
            <figcaption class="front-cap">第 18 轮 · 焦点对决</figcaption>
          </figure>
          <div class="front-body">
            <div class="front-tags">
              <span class="tag tag--orange">完整战报</span>
              <span class="tag tag--muted">焦点对决</span>
            </div>
            <h3 class="front-title">北部赛区前二正面相遇，最后十分钟改写整轮走势</h3>
            <p class="front-sum">两支排名相邻的队伍踢出了本轮最胶着的一场。一个换人、一次角球、一次门前的二次进攻，把原本平着走的比分推向了另一边。战报按时间顺序拆解了这三个环节。</p>
            <a class="btn btn--primary btn--sm" href="#round-18">读这一轮</a>
          </div>
        </article>

        <aside class="front-side">
          <div class="side-card">
            <h3 class="side-title">栏目索引</h3>
            <ul class="side-index">
              <li><a href="#flash-18"><span class="side-idx">A</span><span class="side-name">快报</span><span class="side-note">赛后两小时</span></a></li>
              <li><a href="#full-18"><span class="side-idx">B</span><span class="side-name">完整战报</span><span class="side-note">赛后六小时</span></a></li>
              <li><a href="#observe-18"><span class="side-idx">C</span><span class="side-name">球队观察</span><span class="side-note">每轮一篇</span></a></li>
              <li><a href="#rank-18"><span class="side-idx">D</span><span class="side-name">榜单解读</span><span class="side-note">榜单刷新后</span></a></li>
            </ul>
          </div>
          <div class="side-card side-card--ink">
            <h3 class="side-title">最新上架</h3>
            <ol class="side-latest">
              <li><a href="#full-18">第 18 轮完整战报：最后十分钟的三个转折</a></li>
              <li><a href="#rank-18">前四名分差缩到两场以内</a></li>
              <li><a href="#observe-18">中场控球时间上升，边路成了主要出口</a></li>
              <li><a href="#flash-18">第 18 轮快报：三场末段分胜负</a></li>
            </ol>
            <a class="btn btn--cyan btn--sm" href="/tools/">把主队设为首选</a>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="news-section news-list" data-chapter>
    <div class="container">
      <header class="section-head news-head">
        <span class="section-index chapter-marker">02</span>
        <h2 class="section-title news-h2">按轮次往下翻</h2>
        <p class="news-head-note">每一轮都从快报开始，完整战报、球队观察和榜单解读随后补齐。越往下走，条目越安静。</p>
      </header>

      <article class="round-block" id="round-18">
        <header class="round-head">
          <h3 class="round-badge">第 18 轮</h3>
          <p class="round-note">上一比赛日 · 四篇已发布</p>
        </header>
        <div class="round-entries">
          <article class="entry" id="flash-18">
            <div class="entry-meta">
              <span class="tag tag--cyan">快报</span>
              <span class="entry-time">赛后两小时</span>
            </div>
            <h4 class="entry-title">三场比赛在最后五分钟才分出结果</h4>
            <p class="entry-sum">同一轮里出现三次末段改写，替补登场的球员直接参与了其中两球。快报把每个转折的位置、时间和场上人数变化列清楚，通勤路上就能看完。</p>
          </article>

          <article class="entry" id="full-18">
            <div class="entry-meta">
              <span class="tag tag--orange">完整战报</span>
              <span class="entry-time">赛后六小时</span>
            </div>
            <h4 class="entry-title">北部赛区前二正面相遇，最后十分钟改写整轮走势</h4>
            <p class="entry-sum">上半场双方都压缩了中场空间，真正的分水岭出现在第 78 分钟的换人。完整战报逐段复盘阵型移动、边路传中的落点和门前二次进攻的站位。</p>
          </article>

          <article class="entry" id="observe-18">
            <div class="entry-meta">
              <span class="tag tag--green">球队观察</span>
              <span class="entry-time">本轮观察</span>
            </div>
            <h4 class="entry-title">中场控球时间上升，边路推进变成主要出口</h4>
            <p class="entry-sum">这支队伍近三轮的推进线路明显向左侧倾斜，中场拿球后的第一脚传递更少回撤。观察把轮次表现、阵容轮换和对手压迫强度放在一起看。</p>
          </article>

          <article class="entry" id="rank-18">
            <div class="entry-meta">
              <span class="tag tag--muted">榜单解读</span>
              <span class="entry-time">榜单刷新后</span>
            </div>
            <h4 class="entry-title">前四名分差缩到两场以内，净胜球开始决定排序</h4>
            <p class="entry-sum">积分咬得越紧，净胜球和进球数的权重就越明显。解读里把前六名的积分、净胜球和进球数三条线并排摊开，方便你对照着查榜。</p>
            <figure class="entry-figure media-frame">
              <img src="{zhanqunpic:h:650w:900}" width="900" height="650" alt="半透明玻璃质感的数据柱、排名刻度与橙色高亮行组成的榜单解读图" loading="lazy" decoding="async">
            </figure>
          </article>
        </div>
      </article>

      <article class="round-block" id="round-17">
        <header class="round-head">
          <h3 class="round-badge">第 17 轮</h3>
          <p class="round-note">两个比赛日前 · 三篇已发布</p>
        </header>
        <div class="round-entries">
          <article class="entry">
            <div class="entry-meta">
              <span class="tag tag--cyan">快报</span>
              <span class="entry-time">赛后两小时</span>
            </div>
            <h4 class="entry-title">两支客场队伍都带走了关键分数</h4>
            <p class="entry-sum">本轮两场客场作战的比赛节奏完全不同：一场靠反击效率，一场靠整场控球。快报用两段话把结果和关键数据点对齐。</p>
          </article>
          <article class="entry">
            <div class="entry-meta">
              <span class="tag tag--orange">完整战报</span>
              <span class="entry-time">赛后六小时</span>
            </div>
            <h4 class="entry-title">领头羊主场被逼平，防线整体前压带来连锁反应</h4>
            <p class="entry-sum">为了压上进攻，后防线整体推到了中圈附近，身后留下的空当被对手抓住了两次。战报把两次失球的站位与协防顺序写了出来。</p>
          </article>
          <article class="entry">
            <div class="entry-meta">
              <span class="tag tag--muted">榜单解读</span>
              <span class="entry-time">榜单刷新后</span>
            </div>
            <h4 class="entry-title">射手榜前段出现并列，按轮次筛选能看清进球分布</h4>
            <p class="entry-sum">并列往往意味着进球集中在少数几轮。用轮次筛选看一遍，就能发现谁的开火节奏更平均。</p>
          </article>
        </div>
      </article>

      <article class="round-block" id="round-16">
        <header class="round-head">
          <h3 class="round-badge">第 16 轮</h3>
          <p class="round-note">上一周 · 两篇已发布</p>
        </header>
        <div class="round-entries">
          <article class="entry">
            <div class="entry-meta">
              <span class="tag tag--orange">完整战报</span>
              <span class="entry-time">赛后六小时</span>
            </div>
            <h4 class="entry-title">中游对撞打成开放式节奏，替补席贡献两次转折</h4>
            <p class="entry-sum">双方都没有把阵型压死，中场一旦被突破就是大片空间。战报把替补登场前后的跑动线路放在一起比，转折点一目了然。</p>
          </article>
          <article class="entry">
            <div class="entry-meta">
              <span class="tag tag--green">球队观察</span>
              <span class="entry-time">本轮观察</span>
            </div>
            <h4 class="entry-title">新援进入轮换之后，推进线路更依赖左侧</h4>
            <p class="entry-sum">三轮下来，左侧的触球比例持续上升，右路更多承担回防任务。观察结合阵容变化和轮次表现，解释这条线路为什么会被反复使用。</p>
          </article>
        </div>
      </article>

      <article class="round-block" id="round-15">
        <header class="round-head">
          <h3 class="round-badge">第 15 轮</h3>
          <p class="round-note">两个比赛日前 · 两篇已发布</p>
        </header>
        <div class="round-entries">
          <article class="entry">
            <div class="entry-meta">
              <span class="tag tag--cyan">快报</span>
              <span class="entry-time">赛后两小时</span>
            </div>
            <h4 class="entry-title">三场零封，节奏慢但防线质量高</h4>
            <p class="entry-sum">这一轮进球不多，但防守端的处理相当干净。快报把每场的关键解围和门将扑救按时间列了出来。</p>
          </article>
          <article class="entry">
            <div class="entry-meta">
              <span class="tag tag--orange">完整战报</span>
              <span class="entry-time">赛后六小时</span>
            </div>
            <h4 class="entry-title">保级区球队拿到赛季第二胜，定位球成了抓手</h4>
            <p class="entry-sum">两个进球都来自定位球，跑位设计几乎一样。战报把这两次配合的站位和掩护路线拆开讲了一遍。</p>
          </article>
        </div>
      </article>

      <article class="round-block" id="round-14">
        <header class="round-head">
          <h3 class="round-badge">第 14 轮</h3>
          <p class="round-note">三个比赛日前 · 两篇已发布</p>
        </header>
        <div class="round-entries">
          <article class="entry">
            <div class="entry-meta">
              <span class="tag tag--muted">榜单解读</span>
              <span class="entry-time">榜单刷新后</span>
            </div>
            <h4 class="entry-title">赛程过半，积分榜前三的进球数差在一球之内</h4>
            <p class="entry-sum">进攻效率几乎打平，差距主要落在失球上。解读把前三名的主客场分项摆出来，看得出各自的稳定性来源。</p>
          </article>
          <article class="entry">
            <div class="entry-meta">
              <span class="tag tag--cyan">快报</span>
              <span class="entry-time">赛后两小时</span>
            </div>
            <h4 class="entry-title">两场逆转，替补登场后立刻改变局面</h4>
            <p class="entry-sum">两次换人都在二十分钟内产生了直接效果，快报把换人时间点和随后的攻防数据连在一起看。</p>
          </article>
        </div>
      </article>

      <p class="list-more">
        <a class="btn btn--ghost" href="#round-18">回到最近一轮</a>
      </p>
    </div>
  </section>

  <section class="news-section news-topic" data-chapter>
    <div class="container">
      <header class="section-head news-head">
        <span class="section-index chapter-marker">03</span>
        <h2 class="section-title news-h2">JWK 轮次专题</h2>
        <p class="news-head-note">每一轮开打前先给看点，打完给战报，再补观察和榜单。四个入口对应四个时间点。</p>
      </header>
      <div class="topic-grid">
        <a class="topic-card" href="#front-18">
          <span class="topic-idx">01</span>
          <h3>赛前看点</h3>
          <p>开打之前，把两边的近期状态、轮换倾向和交锋节奏摆出来，十分钟内建立预期。</p>
          <span class="topic-go">去看本轮头版</span>
        </a>
        <a class="topic-card" href="#round-18">
          <span class="topic-idx">02</span>
          <h3>赛后战报</h3>
          <p>快报讲结果和关键回合，完整战报讲过程。按轮次收进同一个区块，不用来回找。</p>
          <span class="topic-go">翻到第 18 轮</span>
        </a>
        <a class="topic-card" href="#observe-18">
          <span class="topic-idx">03</span>
          <h3>球队观察</h3>
          <p>三轮一个切面，看一支队伍的状态曲线、轮次表现和阵容变化怎么互相影响。</p>
          <span class="topic-go">看这一篇观察</span>
        </a>
        <a class="topic-card" href="#rank-18">
          <span class="topic-idx">04</span>
          <h3>榜单解读</h3>
          <p>榜单每天刷完之后，把名次变动背后的净胜球、进球数和赛程强度讲明白。</p>
          <span class="topic-go">看这一篇解读</span>
        </a>
      </div>
    </div>
  </section>

  <section class="news-section news-observe" data-chapter>
    <div class="container observe-grid">
      <figure class="observe-figure media-frame media-frame--tall">
        <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="深色战术板上由白色与电光青线条组成的阵型站位和跑动路线示意" loading="lazy" decoding="async">
        <figcaption class="observe-cap">阵型线与跑动路线叠在一起看</figcaption>
      </figure>
      <div class="observe-body">
        <header class="section-head news-head">
          <span class="section-index chapter-marker">04</span>
          <h2 class="section-title news-h2">球队观察：三条线读懂一支队伍</h2>
          <p class="news-head-note">不看单场的热闹，看三轮连起来的趋势。这三条线是每轮固定跟的部分。</p>
        </header>
        <ul class="observe-list">
          <li>
            <span class="observe-idx">01</span>
            <h3>状态</h3>
            <p>连续几轮的失球、进球和控球走势排在一起，好坏不靠一场比赛下结论。</p>
          </li>
          <li>
            <span class="observe-idx">02</span>
            <h3>轮次表现</h3>
            <p>同一支队伍面对强队和弱队时的推进方式不一样，观察会把这层差别写出来。</p>
          </li>
          <li>
            <span class="observe-idx">03</span>
            <h3>阵容变化</h3>
            <p>谁进入轮换、谁的位置往前挪，直接决定下一轮的进攻出口在哪一侧。</p>
          </li>
        </ul>
        <a class="btn btn--primary" href="/tools/">订阅我的主队</a>
      </div>
    </div>
  </section>

  <section class="news-section news-version" data-chapter>
    <div class="container">
      <header class="section-head news-head">
        <span class="section-index chapter-marker">05</span>
        <h2 class="section-title news-h2">数据工具舱在改什么</h2>
        <p class="news-head-note">每四周一次功能迭代，读战报和查榜单的路径都在持续变短。</p>
      </header>
      <ol class="version-list">
        <li class="version-item">
          <span class="version-tag">版本 3.6</span>
          <h3>榜单排序可以按积分、净胜球和进球数切换</h3>
          <p>积分咬紧的时候，单看积分已经分不出高低。点表头就能换排序依据，名次变动的原因一眼可见。</p>
        </li>
        <li class="version-item">
          <span class="version-tag">订阅同步</span>
          <h3>关注的球队与账号绑定，取消即时生效</h3>
          <p>在移动端底部导航的“赛事”里进入“球队订阅”添加球队，相关战报会在首页信息流里优先出现。</p>
        </li>
        <li class="version-item">
          <span class="version-tag">刷新节奏</span>
          <h3>榜单在上一比赛日结束后统一刷新</h3>
          <p>每天 10:00 前完成更新。早起查榜时看到的，就是已经处理完的最新一轮结果。</p>
        </li>
        <li class="version-item">
          <span class="version-tag">筛选能力</span>
          <h3>射手榜可按赛季、轮次和球队三段筛选</h3>
          <p>想看某支队伍整个赛季的进球分布，或者只看最近三轮，都可以直接筛出来再读解读。</p>
        </li>
      </ol>
      <p class="version-more">
        <a class="btn btn--cyan" href="/questions/">看看具体怎么用</a>
      </p>
    </div>
  </section>

  <section class="news-section news-subscribe" data-chapter>
    <div class="container subscribe-panel">
      <div class="subscribe-copy">
        <span class="section-index chapter-marker">06</span>
        <h2 class="news-h2 subscribe-title">关注之后，相关的战报自己找上门</h2>
        <p class="subscribe-lede">把主队加进关注列表，它每一轮的快报、完整战报和观察就会排在首页信息流的前面。你不必一轮一轮点开去找。</p>
      </div>
      <div class="subscribe-actions">
        <a class="btn btn--primary" href="/tools/">订阅我的主队</a>
        <a class="btn btn--ghost" href="/questions/">订阅怎么设置</a>
      </div>
    </div>
  </section>

</main>

.page-news {
  --news-gap: clamp(16px, 2.6vw, 30px);
  background: var(--paper);
  color: var(--ink);
}

/* ---------- 面包屑 ---------- */
.page-news .news-crumb {
  padding-top: clamp(12px, 2vw, 22px);
  padding-bottom: clamp(10px, 1.6vw, 18px);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper-white);
  padding: clamp(30px, 5vw, 68px) 0 clamp(28px, 4vw, 56px);
  border-bottom: 3px solid var(--ink-deep);
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(128deg, rgba(255, 106, 26, 0.17) 0 20%, transparent 20%),
    repeating-linear-gradient(90deg, rgba(243, 233, 218, 0.05) 0 1px, transparent 1px 72px);
  pointer-events: none;
}

.page-news .news-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -34%;
  width: 52%;
  height: 96%;
  background: linear-gradient(158deg, rgba(47, 224, 208, 0.2), rgba(47, 224, 208, 0) 74%);
  clip-path: polygon(32% 0, 100% 20%, 100% 100%, 0 100%);
  pointer-events: none;
}

.page-news .news-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-news .news-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-news .news-h1 {
  margin: 0;
  font-size: clamp(32px, 7vw, 74px);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--paper-white);
}

.page-news .news-hero-lede {
  margin: clamp(14px, 2vw, 22px) 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  color: var(--ink-muted);
}

.page-news .news-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 30px);
}

.page-news .news-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 40px);
  margin: clamp(24px, 3.4vw, 36px) 0 0;
  padding: clamp(16px, 2vw, 22px) 0 0;
  list-style: none;
  border-top: 2px solid var(--ink-rule);
}

.page-news .news-hero-facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-news .fact-num {
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--orange);
}

.page-news .fact-txt {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.page-news .news-hero-aside {
  border: 2px solid var(--ink-rule);
  border-left: 4px solid var(--orange);
  background: rgba(5, 11, 20, 0.55);
  padding: clamp(18px, 2.6vw, 26px);
}

.page-news .aside-kicker {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
}

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

.page-news .aside-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
}

.page-news .aside-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}

.page-news .aside-txt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-white);
}

.page-news .aside-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.page-news .aside-link:hover {
  color: var(--orange);
}

/* ---------- 轮次刻度 ---------- */
.page-news .news-scale {
  background: var(--ink-deep);
  color: var(--paper);
  padding: clamp(18px, 2.8vw, 32px) 0;
  border-bottom: 3px solid var(--orange);
}

.page-news .scale-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

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

.page-news .scale-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--paper-white);
}

.page-news .scale-track {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-news .scale-track li {
  flex: 0 0 auto;
}

.page-news .scale-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 74px;
  padding: 10px 8px;
  border: 2px solid var(--ink-rule);
  color: var(--paper);
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.page-news .scale-dot:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.page-news .scale-dot.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink-deep);
}

.page-news .scale-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.page-news .scale-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.78;
}

.page-news .scale-strip {
  margin: 18px 0 0;
  border: 2px solid var(--ink-rule);
}

.page-news .scale-strip img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 通用章节 ---------- */
.page-news .news-section {
  padding: clamp(38px, 6vw, 82px) 0;
}

.page-news .news-head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(22px, 3.4vw, 38px);
}

.page-news .section-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--steel);
}

.page-news .chapter-marker {
  transition: color 0.2s ease;
}

.page-news [data-chapter-active] .chapter-marker {
  color: var(--orange);
}

.page-news .news-h2 {
  margin: 0;
  font-size: clamp(25px, 3.8vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.page-news .news-head-note {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: #35405a;
}

/* ---------- 轮次头版 ---------- */
.page-news .front-grid {
  display: grid;
  gap: var(--news-gap);
}

.page-news .front-lead {
  background: var(--paper-white);
  border: 3px solid var(--ink-deep);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}

.page-news .front-media {
  position: relative;
  margin: 0;
  border-bottom: 3px solid var(--ink-deep);
  background: var(--ink);
}

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

.page-news .front-cap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 14px;
  background: var(--orange);
  color: var(--ink-deep);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.page-news .front-body {
  padding: clamp(18px, 2.6vw, 30px);
}

.page-news .front-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.page-news .tag--orange {
  background: var(--orange);
  color: var(--ink-deep);
  border-color: var(--ink-deep);
}

.page-news .front-title {
  margin: 0;
  font-size: clamp(21px, 3.2vw, 34px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-news .front-sum {
  margin: 14px 0 20px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.78;
  color: #343e56;
}

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

.page-news .side-card {
  border: 2px solid var(--ink-deep);
  background: var(--paper-white);
  padding: clamp(16px, 2.4vw, 24px);
}

.page-news .side-card--ink {
  background: var(--ink);
  color: var(--paper-white);
  border-color: var(--ink-deep);
  box-shadow: var(--shadow-soft);
}

.page-news .side-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}

.page-news .side-card--ink .side-title {
  color: var(--cyan);
}

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

.page-news .side-index a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--paper-rule);
  transition: background 0.16s ease;
}

.page-news .side-index a:hover {
  background: rgba(255, 106, 26, 0.14);
}

.page-news .side-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
}

.page-news .side-name {
  font-size: 15px;
  font-weight: 700;
}

.page-news .side-note {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--steel);
}

.page-news .side-latest {
  margin: 0 0 18px;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.page-news .side-latest li::marker {
  color: var(--orange);
  font-family: var(--font-mono);
}

.page-news .side-latest a {
  font-size: 14px;
  line-height: 1.62;
  color: var(--paper-white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-news .side-latest a:hover {
  color: var(--cyan);
  border-bottom-color: currentColor;
}

/* ---------- 轮次列表 ---------- */
.page-news .round-block {
  scroll-margin-top: 84px;
  margin-bottom: clamp(28px, 4vw, 46px);
}

.page-news .round-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ink-deep);
}

.page-news .round-badge {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-news .round-note {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel);
}

.page-news .round-entries {
  display: grid;
}

.page-news .entry {
  scroll-margin-top: 84px;
  background: var(--paper-white);
  border: 2px solid var(--ink-deep);
  border-top: 0;
  padding: clamp(16px, 2.4vw, 26px);
  transition: box-shadow 0.16s ease, background 0.16s ease;
}

.page-news .entry:hover {
  background: #fffdf8;
  box-shadow: inset 6px 0 0 var(--orange);
}

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

.page-news .entry-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--steel);
}

.page-news .entry-title {
  margin: 0;
  font-size: clamp(16px, 2.1vw, 21px);
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-news .entry-sum {
  margin: 10px 0 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.78;
  color: #3a4459;
}

.page-news .entry-figure {
  margin: 16px 0 0;
  border: 2px solid var(--ink-deep);
}

.page-news .entry-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .list-more {
  margin: clamp(20px, 3vw, 30px) 0 0;
}

/* ---------- JWK 专题 ---------- */
.page-news .news-topic {
  background: var(--ink);
  color: var(--paper-white);
}

.page-news .news-topic .news-h2 {
  color: var(--paper-white);
}

.page-news .news-topic .news-head-note {
  color: var(--ink-muted);
}

.page-news .news-topic .section-index {
  color: var(--cyan);
}

.page-news .topic-grid {
  display: grid;
  gap: 14px;
}

.page-news .topic-card {
  display: grid;
  gap: 8px;
  padding: clamp(18px, 2.6vw, 26px);
  background: rgba(243, 233, 218, 0.05);
  border: 2px solid var(--ink-rule);
  text-decoration: none;
  color: var(--paper-white);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.page-news .topic-card:hover {
  transform: translate(-3px, -3px);
  border-color: var(--cyan);
  background: rgba(47, 224, 208, 0.09);
}

.page-news .topic-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--orange);
}

.page-news .topic-card h3 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-news .topic-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-muted);
}

.page-news .topic-go {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

/* ---------- 球队观察 ---------- */
.page-news .observe-grid {
  display: grid;
  gap: clamp(24px, 3.6vw, 46px);
  align-items: start;
}

.page-news .observe-figure {
  margin: 0;
  border: 3px solid var(--ink-deep);
  box-shadow: var(--shadow-soft);
  background: var(--ink);
}

.page-news .observe-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .observe-cap {
  padding: 8px 14px;
  background: var(--ink-deep);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.page-news .observe-list {
  margin: 0 0 clamp(20px, 3vw, 28px);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.page-news .observe-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  padding: 16px 0;
  border-bottom: 2px solid var(--paper-rule);
}

.page-news .observe-idx {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  padding-top: 3px;
}

.page-news .observe-list h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.page-news .observe-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.74;
  color: #3a4459;
}

/* ---------- 版本动态 ---------- */
.page-news .version-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  border-top: 3px solid var(--ink-deep);
}

.page-news .version-item {
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2.4vw, 24px) clamp(14px, 2vw, 20px);
  background: var(--paper-white);
  border: 2px solid var(--ink-deep);
  border-top: 0;
}

.page-news .version-tag {
  justify-self: start;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.page-news .version-item h3 {
  margin: 0;
  font-size: clamp(16px, 2.1vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.page-news .version-item p {
  margin: 0;
  max-width: 66ch;
  font-size: 14px;
  line-height: 1.76;
  color: #3a4459;
}

.page-news .version-more {
  margin: clamp(20px, 3vw, 28px) 0 0;
}

/* ---------- 订阅提醒 ---------- */
.page-news .news-subscribe {
  background: var(--ink-deep);
  color: var(--paper-white);
  border-top: 3px solid var(--orange);
}

.page-news .subscribe-panel {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
}

.page-news .subscribe-copy {
  display: grid;
  gap: 12px;
}

.page-news .news-subscribe .section-index {
  color: var(--cyan);
}

.page-news .subscribe-title {
  color: var(--paper-white);
}

.page-news .subscribe-lede {
  margin: 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-muted);
}

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

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-news .topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .page-news .news-hero-inner {
    grid-template-columns: 1.35fr 0.65fr;
    gap: clamp(32px, 4vw, 64px);
  }

  .page-news .front-grid {
    grid-template-columns: 1.55fr 0.8fr;
    align-items: start;
  }

  .page-news .front-side {
    position: sticky;
    top: 84px;
  }

  .page-news .observe-grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }

  .page-news .subscribe-panel {
    grid-template-columns: 1.4fr auto;
  }

  .page-news .subscribe-actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1100px) {
  .page-news .topic-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-news .scale-track {
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .scale-dot,
  .page-news .topic-card,
  .page-news .entry,
  .page-news .chapter-marker {
    transition: none;
  }
}