.page-news {
  --news-num: clamp(34px, 8vw, 58px);
  --news-cut: 18px;

  background: var(--night);
  color: var(--paper);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-news .breadcrumb {
  padding: 22px 0 8px;
}

.page-news .news-h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.4vw, 32px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--paper);
}

.page-news .news-h2--dark {
  color: var(--ink-text);
}

/* ---------- 刊头 ---------- */

.page-news .news-masthead {
  position: relative;
  padding: clamp(20px, 4vw, 40px) 0 clamp(28px, 5vw, 48px);
  background:
    linear-gradient(115deg, rgba(47, 158, 94, .16) 0 2px, transparent 2px 100%),
    linear-gradient(180deg, rgba(18, 41, 58, .85), rgba(11, 27, 43, 0));
  background-size: 140px 100%, 100% 100%;
}

.page-news .news-masthead__inner {
  padding-top: 6px;
}

.page-news .news-masthead h1 {
  margin: 14px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(34px, 8.4vw, 68px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.04;
  color: var(--paper);
}

.page-news .news-masthead__lead {
  max-width: 60ch;
  margin: 0 0 26px;
  font-size: clamp(16px, 2.4vw, 18px);
  line-height: 1.78;
  color: rgba(244, 241, 232, .82);
}

.page-news .news-masthead__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.page-news .news-masthead__stats li {
  padding: 14px 8px 6px 0;
  border-right: 1px solid var(--hairline);
}

.page-news .news-masthead__stats li:last-child {
  border-right: 0;
}

.page-news .news-masthead__num {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--turf);
}

.page-news .news-masthead__lab {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mist);
}

.page-news .news-masthead__hint {
  margin: 0;
  font-size: 15px;
  color: var(--mist);
}

.page-news .news-masthead__hint a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 227, 196, .5);
}

/* ---------- 集锦带 ---------- */

.page-news .news-strip {
  padding: clamp(26px, 5vw, 46px) 0 clamp(28px, 5vw, 48px);
  background: linear-gradient(180deg, rgba(18, 41, 58, .9), var(--deep));
  border-top: 3px solid var(--turf);
  border-bottom: 1px solid var(--hairline);
}

.page-news .news-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
}

.page-news .news-strip__head .news-h2 {
  margin-bottom: 0;
}

.page-news .news-strip__note {
  max-width: 70ch;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist);
}

.page-news .news-strip__rail {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding: 4px var(--shell-pad) 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--turf-deep) transparent;
}

.page-news .news-strip__rail::-webkit-scrollbar {
  height: 5px;
}

.page-news .news-strip__rail::-webkit-scrollbar-track {
  background: var(--hairline);
  border-radius: 4px;
}

.page-news .news-strip__rail::-webkit-scrollbar-thumb {
  background: var(--turf);
  border-radius: 4px;
}

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

.page-news .news-clip {
  flex: 0 0 min(76vw, 300px);
  scroll-snap-align: start;
  padding: 12px 12px 16px;
  background: rgba(11, 27, 43, .78);
  border: 1px solid var(--hairline);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--news-cut)), calc(100% - var(--news-cut)) 100%, 0 100%);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.page-news .news-clip:hover {
  transform: translateY(-2px);
  border-color: var(--turf);
}

.page-news .news-clip .media {
  margin-bottom: 10px;
  border-radius: 0;
  overflow: hidden;
}

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

.page-news .news-clip__time {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(242, 194, 48, .14);
  color: var(--card-yellow);
  border: 1px solid rgba(242, 194, 48, .4);
}

.page-news .news-clip h3 {
  margin: 10px 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--paper);
}

.page-news .news-clip__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--mist);
}

/* ---------- 四类栏目 ---------- */

.page-news .news-sections {
  background: var(--paper);
  color: var(--ink-text);
  padding: clamp(30px, 6vw, 58px) 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 8px));
}

.page-news .news-sections__intro {
  max-width: 64ch;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.76;
  color: #3a4149;
}

.page-news .news-sections__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.page-news .news-tag {
  display: inline-block;
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink-text);
  background: transparent;
  border: 1px solid rgba(21, 25, 30, .28);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.page-news .news-tag--on {
  color: var(--paper);
  background: var(--turf);
  border-color: var(--turf);
}

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

.page-news .news-sections__list li {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--paper-line);
}

.page-news .news-sections__list h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-text);
}

.page-news .news-sections__list .mono-tag {
  display: block;
  margin-bottom: 8px;
  color: var(--turf-deep);
}

.page-news .news-sections__list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: #3a4149;
}

/* ---------- 最新发布列表 ---------- */

.page-news .news-feed {
  padding: clamp(32px, 6vw, 58px) 0 clamp(28px, 5vw, 46px);
  background: var(--night);
}

.page-news .news-feed__sub {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--mist);
}

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

.page-news .news-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.page-news .news-item:hover {
  background: rgba(47, 158, 94, .07);
}

.page-news .news-item__rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 2px;
}

.page-news .news-item__round {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--turf);
}

.page-news .news-item__dot {
  width: 8px;
  height: 8px;
  display: inline-block;
}

.page-news .news-item__dot--turf {
  background: var(--turf);
}

.page-news .news-item__dot--cyan {
  background: var(--cyan);
}

.page-news .news-item__dot--mute {
  background: var(--mist);
}

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

.page-news .news-item__body h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 3.4vw, 21px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--paper);
}

.page-news .news-item__body > p {
  margin: 0 0 10px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.74;
  color: rgba(244, 241, 232, .74);
}

.page-news .news-item__meta {
  margin: 0;
  color: var(--mist);
}

.page-news .news-item--lead .media {
  margin-bottom: 14px;
  overflow: hidden;
}

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

.page-news .news-item__figure {
  margin: 6px 0 12px;
  max-width: 520px;
  overflow: hidden;
}

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

.page-news .news-spark-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: rgba(18, 41, 58, .72);
  border-left: 3px solid var(--cyan);
}

.page-news .news-spark {
  flex: 0 0 auto;
  max-width: 100%;
  height: auto;
}

.page-news .news-spark__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-spark__keys .mono-tag {
  padding: 3px 8px;
  border: 1px solid var(--hairline);
  color: var(--cyan);
}

/* ---------- 归档 ---------- */

.page-news .news-archive {
  background: var(--paper);
  color: var(--ink-text);
  padding: clamp(30px, 6vw, 58px) 0 clamp(34px, 6vw, 62px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}

.page-news .news-archive__intro {
  max-width: 64ch;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.76;
  color: #3a4149;
}

.page-news .news-archive__figure {
  margin: 0 0 24px;
  overflow: hidden;
}

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

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

.page-news .news-season {
  padding: 6px 12px;
  color: var(--ink-text);
  border: 1px solid rgba(21, 25, 30, .24);
  background: rgba(226, 220, 204, .5);
}

.page-news .news-season--on {
  color: var(--paper);
  background: var(--turf-deep);
  border-color: var(--turf-deep);
}

.page-news .news-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  padding: 16px 0 4px;
  border-top: 2px solid var(--paper-line);
}

.page-news .news-round {
  display: block;
  padding: 7px 0;
  text-align: center;
  color: #3a4149;
  border: 1px solid var(--paper-line);
  background: rgba(255, 255, 255, .5);
}

.page-news .news-round--on {
  color: var(--paper);
  background: var(--turf);
  border-color: var(--turf);
  font-weight: 700;
}

.page-news .news-archive__foot {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: #3a4149;
}

.page-news .news-archive__foot a {
  color: var(--turf-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 111, 66, .45);
}

/* ---------- 订阅 ---------- */

.page-news .news-sub {
  padding: clamp(32px, 6vw, 60px) 0 0;
  background: linear-gradient(180deg, var(--deep), var(--night));
  border-top: 3px solid var(--turf);
}

.page-news .news-sub__intro {
  max-width: 62ch;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.76;
  color: rgba(244, 241, 232, .78);
}

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

.page-news .news-sub__card {
  padding: 18px 16px 16px;
  background: rgba(11, 27, 43, .72);
  border: 1px solid var(--hairline);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--news-cut)), calc(100% - var(--news-cut)) 100%, 0 100%);
}

.page-news .news-sub__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.page-news .news-sub__top h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--paper);
}

.page-news .news-sub__switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 11px;
  transition: background-color var(--dur-base) var(--ease-out);
}

.page-news .news-sub__switch--on {
  background: var(--turf);
}

.page-news .news-sub__switch--off {
  background: rgba(143, 160, 174, .35);
}

.page-news .news-sub__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform var(--dur-base) var(--ease-out);
}

.page-news .news-sub__switch--on .news-sub__knob {
  transform: translateX(20px);
}

.page-news .news-sub__card p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(244, 241, 232, .76);
}

.page-news .news-sub__card .mono-tag {
  color: var(--card-yellow);
}

.page-news .news-sub__foot {
  margin: 24px 0 0;
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
}

.page-news .news-sub__foot a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 227, 196, .45);
}

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

@media (min-width: 720px) {
  .page-news .news-masthead__stats {
    gap: 24px;
  }

  .page-news .news-masthead__stats li {
    padding-right: 20px;
  }

  .page-news .news-clip {
    flex: 0 0 300px;
  }

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

  .page-news .news-sections__list li {
    border-bottom: 1px solid var(--paper-line);
  }

  .page-news .news-item {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 26px;
    padding: 28px 0;
  }

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

  .page-news .news-archive__grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  }
}

@media (min-width: 1040px) {
  .page-news .news-item {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 36px;
  }

  .page-news .news-strip__rail {
    padding-left: var(--shell-pad);
    padding-right: var(--shell-pad);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-clip,
  .page-news .news-item,
  .page-news .news-sub__switch,
  .page-news .news-sub__knob {
    transition: none;
  }

  .page-news .news-clip:hover {
    transform: none;
  }
}
<<<END>>>

等等，我漏掉了每个标记后面都需要加上闭合标签的 `>>>`。让我重新检查一下。

标记的结构是：
```

...

...
```

每个标记后面要跟一个 `>>>` 来闭合。而且最终输出的结尾也应该以 `>>>` 结束。我重新整理一下。

其实按照指示，“标记必须是三个尖括号”，所以我写成 `` 和 ``。

我重新输出。
<main id="main-content" class="page-news">
  <div class="shell">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <a href="/">首页</a>
      <span class="breadcrumb__sep">›</span>
      <span aria-current="page">战报专栏</span>
    </nav>
  </div>

  <header class="news-masthead" data-reveal>
    <div class="shell news-masthead__inner">
      <p class="mono-tag mono-tag--live"><span class="live-dot" aria-hidden="true"></span>比赛日 21:40 更新</p>
      <h1>比赛刚吹哨，复盘和集锦已经排上了</h1>
      <p class="news-masthead__lead">开云看台的战报专栏按轮次推进：一场踢完，图文复盘和视频集锦当晚陆续发出。你在手机上打开，最先刷到的是关键节点的短片，觉得值得细看再往下读整篇复盘，或者直接跳到对应场次的数据面板去看数字。</p>
      <ul class="news-masthead__stats">
        <li>
          <span class="news-masthead__num">12</span>
          <span class="news-masthead__lab">篇图文复盘 · 每轮</span>
        </li>
        <li>
          <span class="news-masthead__num">8</span>
          <span class="news-masthead__lab">段视频集锦 · 每轮</span>
        </li>
        <li>
          <span class="news-masthead__num">6</span>
          <span class="news-masthead__lab">个赛季可回看</span>
        </li>
      </ul>
      <p class="news-masthead__hint">想直接翻某一轮，可以跳到下方的<a href="#rounds-archive">轮次归档</a>。</p>
    </div>
  </header>

  <section class="news-strip" aria-labelledby="news-strip-title" data-reveal>
    <div class="shell news-strip__head">
      <h2 id="news-strip-title" class="news-h2">本轮集锦带</h2>
      <p class="mono-tag">单段 2′10″ – 6′45″ · 左右拖动</p>
    </div>
    <p class="shell news-strip__note">战报专栏KAIYUN移动端把短片放在最前面：八段集锦按比赛节点排开，竖屏下一段一段滑过去，横屏能看清边线附近的处理细节。</p>
    <div class="news-strip__rail" role="region" aria-label="本轮视频集锦，可横向滚动" tabindex="0">
      <article class="news-clip">
        <div class="media media--wide">
          <img src="{zhanqunpic:h:675w:1200}" width="1200" height="675" alt="转播视角下的球场边线与比分大屏局部，冷色灯光配草皮绿">
        </div>
        <p class="mono-tag news-clip__time">03′52″</p>
        <h3>第 27 轮 · 对阵 3 号位 · 上半场三段攻防节选</h3>
        <p class="news-clip__desc">从开场第一次推进，到半场前那脚被封堵的射门。</p>
      </article>
      <article class="news-clip">
        <p class="mono-tag news-clip__time">05′18″</p>
        <h3>第 27 轮 · 对阵 8 号位 · 下半场换人前后对照</h3>
        <p class="news-clip__desc">同一时间段的两套站位，剪在一起看更清楚。</p>
      </article>
      <article class="news-clip">
        <p class="mono-tag news-clip__time">02′40″</p>
        <h3>第 27 轮 · 对阵 12 号位 · 定位球全部回合</h3>
        <p class="news-clip__desc">角球与前场任意球，每一次落点都带慢镜。</p>
      </article>
      <article class="news-clip">
        <p class="mono-tag news-clip__time">06′45″</p>
        <h3>第 27 轮 · 对阵 5 号位 · 全场跑动热区回放</h3>
        <p class="news-clip__desc">把跑动轨迹叠在球场底图上，跟着节奏看。</p>
      </article>
      <article class="news-clip">
        <p class="mono-tag news-clip__time">04′06″</p>
        <h3>第 27 轮 · 对阵 17 号位 · 门前三次机会还原</h3>
        <p class="news-clip__desc">起脚前的位置、身位和门将站位挨个停住看。</p>
      </article>
      <article class="news-clip">
        <p class="mono-tag news-clip__time">02′10″</p>
        <h3>第 26 轮 · 对阵 9 号位 · 补时阶段速览</h3>
        <p class="news-clip__desc">最后几分钟的攻防转换，压缩成一段看完。</p>
      </article>
      <article class="news-clip">
        <p class="mono-tag news-clip__time">05′02″</p>
        <h3>第 26 轮 · 对阵 4 号位 · 中场衔接十个回合</h3>
        <p class="news-clip__desc">从中场断球到出球，逐回合连着放。</p>
      </article>
      <article class="news-clip">
        <p class="mono-tag news-clip__time">03′30″</p>
        <h3>第 26 轮 · 对阵 14 号位 · 低位防守阵型回看</h3>
        <p class="news-clip__desc">退防后两条线的距离变化，用边线镜头看。</p>
      </article>
    </div>
  </section>

  <section class="news-sections" aria-labelledby="news-sections-title" data-reveal>
    <div class="shell">
      <h2 id="news-sections-title" class="news-h2 news-h2--dark">四类栏目，按你想解决的问题挑</h2>
      <p class="news-sections__intro">同一场比赛可以写成四种角度。你关心结果走向、关心谁上谁下、关心数字、还是想回头翻旧账，进各自那一类就够。</p>

      <div class="news-sections__tags" role="list" aria-label="栏目分类">
        <span class="news-tag news-tag--on" role="listitem">赛后复盘</span>
        <span class="news-tag" role="listitem">阵容解读</span>
        <span class="news-tag" role="listitem">数据拆解</span>
        <span class="news-tag" role="listitem">赛季档案</span>
      </div>

      <ul class="news-sections__list">
        <li>
          <h3>赛后复盘</h3>
          <p class="mono-tag">每轮 6 篇 · 赛后 90 分钟内</p>
          <p>讲清一轮比赛的走势怎么拐弯的：哪个时间段被压住、哪次调整把节奏换回来、最后二十分钟双方各自在赌什么。适合整场看完还想再捋一遍的人。</p>
        </li>
        <li>
          <h3>阵容解读</h3>
          <p class="mono-tag">每轮 3 篇 · 名单确认后</p>
          <p>解释首发为什么这么排、替补席上留着哪几张牌、缺阵位置由谁顶。开赛前十分钟名单一确认就落笔，赛前打开刚好赶得上。</p>
        </li>
        <li>
          <h3>数据拆解</h3>
          <p class="mono-tag">每轮 2 篇 · 赛后次日</p>
          <p>先给结论再看依据。哪项指标被拉开、拉开多少、贡献来自哪个区域，配图表逐项对照，末尾接一场比赛的数据面板。</p>
        </li>
        <li>
          <h3>赛季档案</h3>
          <p class="mono-tag">每轮 1 篇 · 轮次结束后</p>
          <p>把这一轮放回整个赛季里看：积分曲线的位置、连胜或连平的区间、与去年同期对照的差别，供你长线追读时翻查。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="news-feed" aria-labelledby="news-feed-title" data-reveal>
    <div class="shell">
      <h2 id="news-feed-title" class="news-h2">本轮最新发布 · 第 27 轮</h2>
      <p class="news-feed__sub">比赛日当晚陆续上线，按发布时间从近到远排列。</p>

      <ol class="news-feed__list">
        <li class="news-item news-item--lead">
          <div class="news-item__rail">
            <span class="news-item__round">R27</span>
            <span class="news-item__dot news-item__dot--turf" aria-hidden="true"></span>
          </div>
          <div class="news-item__body">
            <div class="news-item__top">
              <span class="tag">赛后复盘</span>
              <span class="mono-tag">47 分钟前</span>
            </div>
            <div class="media media--wide">
              <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜赛灯光下沿斜线展开的球场与看台，人物为远景剪影" loading="lazy" decoding="async">
            </div>
            <h3>对阵 3 号位：领先之后那二十分钟，中路是怎么被让出来的</h3>
            <p>第 61 分钟之后两队的站位距离拉开了将近十米。这篇复盘把中间那段攻防拆成四个回合，看看节奏是从哪一脚开始松的。</p>
            <p class="news-item__meta"><span class="mono-tag">约 9 分钟读完</span></p>
          </div>
        </li>

        <li class="news-item">
          <div class="news-item__rail">
            <span class="news-item__round">R27</span>
            <span class="news-item__dot news-item__dot--turf" aria-hidden="true"></span>
          </div>
          <div class="news-item__body">
            <div class="news-item__top">
              <span class="tag">阵容解读</span>
              <span class="mono-tag">2 小时前</span>
            </div>
            <h3>对阵 3 号位：替补席留了三张后手，其中一张到 78 分钟才用</h3>
            <p>名单确认后写的那篇在这里补了结果对照。当时留人的意图，和实际换上去之后的效果，能对得上几成。</p>
            <p class="news-item__meta"><span class="mono-tag">约 6 分钟读完</span></p>
          </div>
        </li>

        <li class="news-item">
          <div class="news-item__rail">
            <span class="news-item__round">R27</span>
            <span class="news-item__dot news-item__dot--cyan" aria-hidden="true"></span>
          </div>
          <div class="news-item__body">
            <div class="news-item__top">
              <span class="tag">数据拆解</span>
              <span class="mono-tag">赛后次日更新</span>
            </div>
            <h3>控球落到 44%，射正反而多了两次：第 27 轮的四个关键数字</h3>
            <p>先把结论摆前面——这一轮真正拉开差距的不是控球，是前场三区的传球成功率。后面配了折线与热区逐项对照。</p>
            <div class="news-spark-wrap">
              <svg class="news-spark" viewBox="0 0 180 46" width="180" height="46" role="img" aria-label="前场三区传球成功率随时间变化的折线示意">
                <polyline points="2,34 24,30 46,32 68,22 90,25 112,15 134,18 156,10 178,13" fill="none" stroke="#7FE3C4" stroke-width="2"></polyline>
                <line x1="2" y1="44" x2="178" y2="44" stroke="rgba(143,160,174,.38)" stroke-width="1"></line>
              </svg>
              <div class="news-spark__keys">
                <span class="mono-tag">44% 控球</span>
                <span class="mono-tag">6 次射正</span>
                <span class="mono-tag">+9% 前场传球</span>
              </div>
            </div>
            <div class="news-item__figure">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="图表与热区图局部特写，色块以草皮绿、数据青与黄牌色为主" loading="lazy" decoding="async">
            </div>
            <p class="news-item__meta"><span class="mono-tag">约 7 分钟读完 · 附数据面板入口</span></p>
          </div>
        </li>

        <li class="news-item">
          <div class="news-item__rail">
            <span class="news-item__round">R27</span>
            <span class="news-item__dot news-item__dot--cyan" aria-hidden="true"></span>
          </div>
          <div class="news-item__body">
            <div class="news-item__top">
              <span class="tag">赛季档案</span>
              <span class="mono-tag">轮次结束后</span>
            </div>
            <h3>第 27 轮放进赛季看：积分曲线的这段平台期走了六轮</h3>
            <p>把这轮的三个积分叠进整季曲线，能看出和上赛季同期相比，位置往前挪了四名。附本赛季与上赛季的双线对照图。</p>
            <p class="news-item__meta"><span class="mono-tag">约 5 分钟读完</span></p>
          </div>
        </li>

        <li class="news-item">
          <div class="news-item__rail">
            <span class="news-item__round">R26</span>
            <span class="news-item__dot news-item__dot--mute" aria-hidden="true"></span>
          </div>
          <div class="news-item__body">
            <div class="news-item__top">
              <span class="tag tag--warn">待确认</span>
              <span class="mono-tag">3 天前</span>
            </div>
            <h3>对阵 9 号位：补时阶段的两张黄牌，判罚节点还在复核</h3>
            <p>涉及第二张黄牌的判罚节点，相关的红黄牌记录已标注为待确认，确认后会同步更新这篇文章。</p>
            <p class="news-item__meta"><span class="mono-tag">约 4 分钟读完</span></p>
          </div>
        </li>

        <li class="news-item">
          <div class="news-item__rail">
            <span class="news-item__round">R26</span>
            <span class="news-item__dot news-item__dot--turf" aria-hidden="true"></span>
          </div>
          <div class="news-item__body">
            <div class="news-item__top">
              <span class="tag">赛后复盘</span>
              <span class="mono-tag">4 天前</span>
            </div>
            <h3>对阵 4 号位：中场衔接被切断的十四个回合</h3>
            <p>从后场出球到中场接应，这一轮有十四个回合在第二脚就被断掉。文章把这些回合按区域归类，看是哪一侧先失守。</p>
            <p class="news-item__meta"><span class="mono-tag">约 8 分钟读完</span></p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-archive" id="rounds-archive" aria-labelledby="news-archive-title" data-reveal>
    <div class="shell">
      <h2 id="news-archive-title" class="news-h2 news-h2--dark">轮次归档与赛季档案</h2>
      <p class="news-archive__intro">本赛季全部 38 轮的战报都能按轮次翻回，过往五个赛季的图文内容同样留档。想知道某轮对阵当时是怎么写的，从下面直接点进去。</p>
      <figure class="news-archive__figure">
        <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="整齐排列的看台座位与灯光条纹俯拍，强调秩序感与斜线" loading="lazy" decoding="async">
      </figure>
      <div class="news-archive__seasons">
        <span class="news-season news-season--on mono-tag">S6 · 本赛季 · 已归档 27 轮</span>
        <span class="news-season mono-tag">S5 · 上赛季 · 38 轮</span>
        <span class="news-season mono-tag">S4 · 前两赛季 · 38 轮</span>
        <span class="news-season mono-tag">S3 · 前三赛季 · 38 轮</span>
        <span class="news-season mono-tag">S2 · 前四赛季 · 38 轮</span>
        <span class="news-season mono-tag">S1 · 前五赛季 · 38 轮</span>
      </div>
      <div class="news-archive__grid" aria-label="本赛季轮次索引">
        <span class="news-round mono-tag">R1</span>
        <span class="news-round mono-tag">R2</span>
        <span class="news-round mono-tag">R3</span>
        <span class="news-round mono-tag">R4</span>
        <span class="news-round mono-tag">R5</span>
        <span class="news-round mono-tag">R6</span>
        <span class="news-round mono-tag">R7</span>
        <span class="news-round mono-tag">R8</span>
        <span class="news-round mono-tag">R9</span>
        <span class="news-round mono-tag">R10</span>
        <span class="news-round mono-tag">R11</span>
        <span class="news-round mono-tag">R12</span>
        <span class="news-round mono-tag">R13</span>
        <span class="news-round mono-tag">R14</span>
        <span class="news-round mono-tag">R15</span>
        <span class="news-round mono-tag">R16</span>
        <span class="news-round mono-tag">R17</span>
        <span class="news-round mono-tag">R18</span>
        <span class="news-round mono-tag">R19</span>
        <span class="news-round mono-tag">R20</span>
        <span class="news-round mono-tag">R21</span>
        <span class="news-round mono-tag">R22</span>
        <span class="news-round mono-tag">R23</span>
        <span class="news-round mono-tag">R24</span>
        <span class="news-round mono-tag">R25</span>
        <span class="news-round mono-tag">R26</span>
        <span class="news-round news-round--on mono-tag">R27</span>
        <span class="news-round mono-tag">R28</span>
        <span class="news-round mono-tag">R29</span>
        <span class="news-round mono-tag">R30</span>
        <span class="news-round mono-tag">R31</span>
        <span class="news-round mono-tag">R32</span>
        <span class="news-round mono-tag">R33</span>
        <span class="news-round mono-tag">R34</span>
        <span class="news-round mono-tag">R35</span>
        <span class="news-round mono-tag">R36</span>
        <span class="news-round mono-tag">R37</span>
        <span class="news-round mono-tag">R38</span>
      </div>
      <p class="news-archive__foot">归档索引与<a href="/catalog/">内容目录</a>里的赛程中心共用同一套轮次编号，两边对照着看不会串轮。</p>
    </div>
  </section>

  <section class="news-sub" aria-labelledby="news-sub-title" data-reveal>
    <div class="shell">
      <h2 id="news-sub-title" class="news-h2">订哪一类，由你定</h2>
      <p class="news-sub__intro">三类提醒分开开关，开哪个就只收哪个。全部关掉后，你仍然可以随时回到这一页翻内容。</p>
      <div class="news-sub__grid">
        <article class="news-sub__card">
          <div class="news-sub__top">
            <h3>赛程提醒</h3>
            <span class="news-sub__switch news-sub__switch--off" aria-hidden="true"><span class="news-sub__knob"></span></span>
          </div>
          <p>开球前两小时告诉你当轮场次，含对阵编号与开球时段。</p>
          <p class="mono-tag">每天最多 1 条</p>
        </article>
        <article class="news-sub__card">
          <div class="news-sub__top">
            <h3>比分推送</h3>
            <span class="news-sub__switch news-sub__switch--on" aria-hidden="true"><span class="news-sub__knob"></span></span>
          </div>
          <p>比分变化、半场与终场节点各推一条，跟完一场不会连响十几次。</p>
          <p class="mono-tag">每场最多 4 条</p>
        </article>
        <article class="news-sub__card">
          <div class="news-sub__top">
            <h3>阵容确认</h3>
            <span class="news-sub__switch news-sub__switch--on" aria-hidden="true"><span class="news-sub__knob"></span></span>
          </div>
          <p>开赛前十分钟名单一确认就发出，比在页面里反复刷要省事。</p>
          <p class="mono-tag">每轮 1 条</p>
        </article>
      </div>
      <p class="news-sub__foot">设置在哪改、提醒为什么没到，<a href="/help-center/">帮助中心</a>里按设备分了几种情况说明；想直接联系编辑或客服，走<a href="/find-us/">找到我们</a>。</p>
    </div>
  </section>
</main>

.page-news {
  --news-num: clamp(34px, 8vw, 58px);
  --news-cut: 18px;

  background: var(--night);
  color: var(--paper);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-news .breadcrumb {
  padding: 22px 0 8px;
}

.page-news .news-h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.4vw, 32px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--paper);
}

.page-news .news-h2--dark {
  color: var(--ink-text);
}

/* ---------- 刊头 ---------- */

.page-news .news-masthead {
  position: relative;
  padding: clamp(20px, 4vw, 40px) 0 clamp(28px, 5vw, 48px);
  background:
    linear-gradient(115deg, rgba(47, 158, 94, .16) 0 2px, transparent 2px 100%),
    linear-gradient(180deg, rgba(18, 41, 58, .85), rgba(11, 27, 43, 0));
  background-size: 140px 100%, 100% 100%;
}

.page-news .news-masthead__inner {
  padding-top: 6px;
}

.page-news .news-masthead h1 {
  margin: 14px 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 8.4vw, 68px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.04;
  color: var(--paper);
}

.page-news .news-masthead__lead {
  max-width: 60ch;
  margin: 0 0 26px;
  font-size: clamp(16px, 2.4vw, 18px);
  line-height: 1.78;
  color: rgba(244, 241, 232, .82);
}

.page-news .news-masthead__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.page-news .news-masthead__stats li {
  padding: 14px 8px 6px 0;
  border-right: 1px solid var(--hairline);
}

.page-news .news-masthead__stats li:last-child {
  border-right: 0;
}

.page-news .news-masthead__num {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--turf);
}

.page-news .news-masthead__lab {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mist);
}

.page-news .news-masthead__hint {
  margin: 0;
  font-size: 15px;
  color: var(--mist);
}

.page-news .news-masthead__hint a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 227, 196, .5);
}

/* ---------- 集锦带 ---------- */

.page-news .news-strip {
  padding: clamp(26px, 5vw, 46px) 0 clamp(28px, 5vw, 48px);
  background: linear-gradient(180deg, rgba(18, 41, 58, .9), var(--deep));
  border-top: 3px solid var(--turf);
  border-bottom: 1px solid var(--hairline);
}

.page-news .news-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
}

.page-news .news-strip__head .news-h2 {
  margin-bottom: 0;
}

.page-news .news-strip__note {
  max-width: 70ch;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist);
}

.page-news .news-strip__rail {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding: 4px var(--shell-pad) 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--turf-deep) transparent;
}

.page-news .news-strip__rail::-webkit-scrollbar {
  height: 5px;
}

.page-news .news-strip__rail::-webkit-scrollbar-track {
  background: var(--hairline);
  border-radius: 4px;
}

.page-news .news-strip__rail::-webkit-scrollbar-thumb {
  background: var(--turf);
  border-radius: 4px;
}

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

.page-news .news-clip {
  flex: 0 0 min(76vw, 300px);
  scroll-snap-align: start;
  padding: 12px 12px 16px;
  background: rgba(11, 27, 43, .78);
  border: 1px solid var(--hairline);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--news-cut)), calc(100% - var(--news-cut)) 100%, 0 100%);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.page-news .news-clip:hover {
  transform: translateY(-2px);
  border-color: var(--turf);
}

.page-news .news-clip .media {
  margin-bottom: 10px;
  overflow: hidden;
}

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

.page-news .news-clip__time {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(242, 194, 48, .14);
  color: var(--card-yellow);
  border: 1px solid rgba(242, 194, 48, .4);
}

.page-news .news-clip h3 {
  margin: 10px 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--paper);
}

.page-news .news-clip__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--mist);
}

/* ---------- 四类栏目 ---------- */

.page-news .news-sections {
  background: var(--paper);
  color: var(--ink-text);
  padding: clamp(30px, 6vw, 58px) 0;
}

.page-news .news-sections__intro {
  max-width: 64ch;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.76;
  color: #3A4149;
}

.page-news .news-sections__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.page-news .news-tag {
  display: inline-block;
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink-text);
  background: transparent;
  border: 1px solid rgba(21, 25, 30, .28);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.page-news .news-tag--on {
  color: var(--paper);
  background: var(--turf);
  border-color: var(--turf);
}

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

.page-news .news-sections__list li {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--paper-line);
}

.page-news .news-sections__list h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-text);
}

.page-news .news-sections__list .mono-tag {
  display: block;
  margin-bottom: 8px;
  color: var(--turf-deep);
}

.page-news .news-sections__list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: #3A4149;
}

/* ---------- 最新发布列表 ---------- */

.page-news .news-feed {
  padding: clamp(32px, 6vw, 58px) 0 clamp(28px, 5vw, 46px);
  background: var(--night);
}

.page-news .news-feed__sub {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--mist);
}

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

.page-news .news-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.page-news .news-item:hover {
  background: rgba(47, 158, 94, .07);
}

.page-news .news-item__rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 2px;
}

.page-news .news-item__round {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--turf);
}

.page-news .news-item__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
}

.page-news .news-item__dot--turf {
  background: var(--turf);
}

.page-news .news-item__dot--cyan {
  background: var(--cyan);
}

.page-news .news-item__dot--mute {
  background: var(--mist);
}

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

.page-news .news-item__body h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 3.4vw, 21px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--paper);
}

.page-news .news-item__body > p {
  max-width: 62ch;
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.74;
  color: rgba(244, 241, 232, .74);
}

.page-news .news-item__meta {
  margin: 0;
  color: var(--mist);
}

.page-news .news-item--lead .media {
  margin-bottom: 14px;
  overflow: hidden;
}

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

.page-news .news-item__figure {
  max-width: 520px;
  margin: 6px 0 12px;
  overflow: hidden;
}

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

.page-news .news-spark-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: rgba(18, 41, 58, .72);
  border-left: 3px solid var(--cyan);
}

.page-news .news-spark {
  flex: 0 0 auto;
  max-width: 100%;
  height: auto;
}

.page-news .news-spark__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-spark__keys .mono-tag {
  padding: 3px 8px;
  border: 1px solid var(--hairline);
  color: var(--cyan);
}

/* ---------- 归档 ---------- */

.page-news .news-archive {
  background: var(--paper);
  color: var(--ink-text);
  padding: clamp(30px, 6vw, 58px) 0 clamp(34px, 6vw, 62px);
}

.page-news .news-archive__intro {
  max-width: 64ch;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.76;
  color: #3A4149;
}

.page-news .news-archive__figure {
  margin: 0 0 24px;
  overflow: hidden;
}

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

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

.page-news .news-season {
  padding: 6px 12px;
  color: var(--ink-text);
  background: rgba(226, 220, 204, .5);
  border: 1px solid rgba(21, 25, 30, .24);
}

.page-news .news-season--on {
  color: var(--paper);
  background: var(--turf-deep);
  border-color: var(--turf-deep);
}

.page-news .news-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  padding: 16px 0 4px;
  border-top: 2px solid var(--paper-line);
}

.page-news .news-round {
  display: block;
  padding: 7px 0;
  text-align: center;
  color: #3A4149;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--paper-line);
}

.page-news .news-round--on {
  color: var(--paper);
  background: var(--turf);
  border-color: var(--turf);
  font-weight: 700;
}

.page-news .news-archive__foot {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: #3A4149;
}

.page-news .news-archive__foot a {
  color: var(--turf-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 111, 66, .45);
}

/* ---------- 订阅 ---------- */

.page-news .news-sub {
  padding: clamp(32px, 6vw, 60px) 0 0;
  background: linear-gradient(180deg, var(--deep), var(--night));
  border-top: 3px solid var(--turf);
}

.page-news .news-sub__intro {
  max-width: 62ch;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.76;
  color: rgba(244, 241, 232, .78);
}

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

.page-news .news-sub__card {
  padding: 18px 16px 16px;
  background: rgba(11, 27, 43, .72);
  border: 1px solid var(--hairline);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--news-cut)), calc(100% - var(--news-cut)) 100%, 0 100%);
}

.page-news .news-sub__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.page-news .news-sub__top h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--paper);
}

.page-news .news-sub__switch {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 42px;
  height: 22px;
  border-radius: 11px;
  transition: background-color var(--dur-base) var(--ease-out);
}

.page-news .news-sub__switch--on {
  background: var(--turf);
}

.page-news .news-sub__switch--off {
  background: rgba(143, 160, 174, .35);
}

.page-news .news-sub__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform var(--dur-base) var(--ease-out);
}

.page-news .news-sub__switch--on .news-sub__knob {
  transform: translateX(20px);
}

.page-news .news-sub__card p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(244, 241, 232, .76);
}

.page-news .news-sub__card .mono-tag {
  color: var(--card-yellow);
}

.page-news .news-sub__foot {
  max-width: 78ch;
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
}

.page-news .news-sub__foot a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 227, 196, .45);
}

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

@media (min-width: 720px) {
  .page-news .news-masthead__stats {
    gap: 24px;
  }

  .page-news .news-masthead__stats li {
    padding-right: 20px;
  }

  .page-news .news-clip {
    flex: 0 0 300px;
  }

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

  .page-news .news-item {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 26px;
    padding: 28px 0;
  }

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

@media (min-width: 1040px) {
  .page-news .news-item {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-clip,
  .page-news .news-item,
  .page-news .news-sub__switch,
  .page-news .news-sub__knob {
    transition: none;
  }

  .page-news .news-clip:hover {
    transform: none;
  }
}