.page-news {
  background: var(--ink);
  color: var(--paper);
  padding-bottom: clamp(44px, 8vw, 96px);
  overflow-x: hidden;
}

.page-news .news-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-news .crumbs {
  color: var(--mint);
  font-size: 12px;
  letter-spacing: .04em;
  padding-top: clamp(14px, 3vw, 26px);
}

.page-news .crumbs a {
  color: var(--mint);
  text-decoration: none;
}

.page-news .crumbs a:hover {
  color: var(--lime);
}

.page-news .crumbs__sep {
  color: var(--line);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(22px, 4vw, 40px);
  padding-block: clamp(24px, 5vw, 54px) clamp(30px, 6vw, 64px);
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -14vw;
  width: min(86vw, 680px);
  height: 82%;
  background: linear-gradient(152deg, rgba(30, 90, 71, .92) 0%, rgba(18, 49, 41, .45) 52%, rgba(7, 19, 15, 0) 100%);
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
  pointer-events: none;
}

.page-news .news-hero__title {
  margin: .28em 0 .4em;
  letter-spacing: -.02em;
  max-width: 640px;
  line-height: 1.02;
}

.page-news .news-hero__accent {
  color: var(--lime);
  box-shadow: inset 0 -0.16em 0 rgba(200, 244, 90, .28);
}

.page-news .news-hero__lede {
  max-width: 48ch;
  color: var(--mint);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
}

.page-news .news-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.page-news .news-figures {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 24px 0 0;
  padding: 0;
}

.page-news .news-figures li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12.5px;
  color: var(--mint);
  letter-spacing: .02em;
}

.page-news .news-figures strong {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 600;
  color: var(--lime);
}

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

/* ---------- 图片 ---------- */
.page-news .news-shot {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--board);
  border: 1px solid var(--line);
}

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

.page-news .news-shot--tall img {
  aspect-ratio: 4 / 5;
}

.page-news .news-shot--wide img {
  aspect-ratio: 3 / 2;
}

.page-news .news-shot--data img {
  aspect-ratio: 12 / 7;
}

.page-news .news-shot--square img {
  aspect-ratio: 1 / 1;
}

.page-news .news-shot__caption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--lime-soft);
  background: rgba(7, 19, 15, .72);
  border-radius: var(--radius-pill);
}

/* ---------- 编辑台精选 ---------- */
.page-news .news-picks__head {
  display: grid;
  gap: 10px;
}

.page-news .news-picks__note {
  margin: 0;
  font-size: 13.5px;
  color: var(--mint);
  line-height: 1.7;
  max-width: 34ch;
}

.page-news .picks-grid {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.page-news .pick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--board);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.page-news .pick--lead {
  background: linear-gradient(158deg, var(--board) 0%, var(--stand) 82%);
  border-color: rgba(200, 244, 90, .3);
  box-shadow: var(--shadow-soft);
}

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

.page-news .pick__title {
  margin: 4px 0 0;
  font-size: clamp(18px, 2.6vw, 25px);
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-news .pick--lead .pick__title {
  font-size: clamp(21px, 3.6vw, 33px);
  line-height: 1.24;
}

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

.page-news .pick__link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--lime);
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 244, 90, .4);
  padding-bottom: 2px;
}

.page-news .pick__link:hover {
  color: var(--lime-soft);
}

/* ---------- 标签 ---------- */
.page-news .news-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--ink);
  background: var(--lime-soft);
  border-radius: var(--radius-pill);
}

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

.page-news .news-tag--ghost {
  color: var(--mint);
  background: transparent;
  border: 1px solid var(--line);
}

/* ---------- 条目流 ---------- */
.page-news .stream-grid {
  display: grid;
  gap: 20px;
}

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

.page-news .stream-rail__block {
  padding: 16px 18px;
  background: var(--stand);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-news .stream-rail__block--dusk {
  background: linear-gradient(170deg, var(--board), var(--stand));
}

.page-news .stream-rail__label {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--orange);
}

.page-news .stream-rail__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--mint);
}

.page-news .stream-rail__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 244, 90, .38);
  padding-bottom: 2px;
}

.page-news .filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-news .filter-bar::-webkit-scrollbar {
  display: none;
}

.page-news .filter-bar .pill {
  white-space: nowrap;
  flex: 0 0 auto;
}

.page-news .stream-main__head {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.page-news .stream-main__note {
  margin: 0;
  font-size: 13px;
  color: var(--mint);
}

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

.page-news .feed-card {
  display: grid;
  gap: 10px;
  padding: clamp(16px, 2.6vw, 24px);
  background: var(--stand);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}

.page-news .feed-card:hover {
  border-color: rgba(200, 244, 90, .42);
  transform: translateY(-2px);
}

.page-news .feed-card--wide {
  grid-template-columns: 1fr;
  align-items: center;
  background: linear-gradient(140deg, var(--board), var(--stand));
}

.page-news .feed-card__body {
  display: grid;
  gap: 10px;
}

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

.page-news .feed-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--orange);
  border: 1px solid rgba(255, 138, 61, .42);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.page-news .feed-card__title {
  margin: 0;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--paper);
}

.page-news .feed-card__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--lime-soft);
}

.page-news .feed-card__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--lime);
}

.page-news .feed-card__more summary::-webkit-details-marker {
  display: none;
}

.page-news .feed-card__more summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--orange);
}

.page-news .feed-card__more[open] summary::before {
  content: "–";
}

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

.page-news .points li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.72;
  color: var(--mint);
}

.page-news .points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
}

/* ---------- 专题系列 ---------- */
.page-news .series {
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 7vw, 84px);
  padding: clamp(20px, 4vw, 40px);
  background: linear-gradient(120deg, var(--stand) 0%, var(--board) 58%, var(--stand) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}

.page-news .series::after {
  content: "";
  position: absolute;
  top: -46%;
  right: -10%;
  width: 48%;
  height: 190%;
  background: linear-gradient(180deg, rgba(200, 244, 90, .12), rgba(200, 244, 90, 0) 72%);
  clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
  pointer-events: none;
}

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

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

.page-news .series__grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.page-news .series-card {
  padding: 16px 18px;
  background: rgba(7, 19, 15, .55);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-news .series-card__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--orange);
  margin-bottom: 6px;
}

.page-news .series-card__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -.005em;
}

.page-news .series-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.78;
  color: var(--mint);
}

/* ---------- 订阅行动 ---------- */
.page-news .subscribe {
  margin-top: clamp(34px, 6vw, 72px);
  padding: clamp(26px, 5vw, 54px);
  display: grid;
  gap: 22px;
  background: linear-gradient(112deg, var(--lime) 0%, var(--lime-soft) 62%, var(--lime) 100%);
  color: var(--ink);
  border-radius: var(--radius-lg);
  clip-path: polygon(0 0, 100% 3.5%, 100% 100%, 0 96.5%);
}

.page-news .subscribe__eyebrow {
  color: rgba(7, 19, 15, .62);
  margin: 0 0 8px;
}

.page-news .subscribe__title {
  margin: 0 0 10px;
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.24;
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--ink);
  max-width: 22ch;
}

.page-news .subscribe__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(7, 19, 15, .76);
  max-width: 52ch;
}

.page-news .subscribe__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.page-news .subscribe__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  background: var(--ink);
  color: var(--lime);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .22s var(--ease), background .22s var(--ease);
}

.page-news .subscribe__cta:hover {
  background: var(--board);
  transform: translateY(-1px);
}

.page-news .subscribe__ghost {
  font-size: 13px;
  color: rgba(7, 19, 15, .78);
  text-decoration: none;
  border-bottom: 1px solid rgba(7, 19, 15, .35);
  padding-bottom: 2px;
}

.page-news .subscribe__ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-news .feed-card--wide {
    grid-template-columns: 210px 1fr;
    gap: 18px;
  }
}

@media (min-width: 780px) {
  .page-news .news-hero__aside {
    grid-template-columns: 1.25fr 1fr;
    align-items: start;
  }

  .page-news .news-shot--tall {
    margin-top: 44px;
  }

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

@media (min-width: 900px) {
  .page-news .news-picks__head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .page-news .picks-grid {
    grid-template-columns: 1.45fr 1fr;
    grid-template-areas:
      "lead a"
      "lead b";
  }

  .page-news .pick--lead {
    grid-area: lead;
  }

  .page-news .pick--a {
    grid-area: a;
  }

  .page-news .pick--b {
    grid-area: b;
  }

  .page-news .series {
    grid-template-columns: 250px 1fr;
    align-items: start;
  }

  .page-news .subscribe {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(20px, 4vw, 48px);
  }

  .page-news .subscribe__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 1000px) {
  .page-news .news-hero {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
  }

  .page-news .stream-grid {
    grid-template-columns: 236px 1fr;
    gap: clamp(22px, 3.5vw, 44px);
    align-items: start;
  }

  .page-news .stream-rail {
    position: sticky;
    top: 92px;
  }

  .page-news .filter-bar {
    flex-direction: column;
    align-items: flex-start;
    overflow: visible;
    padding-bottom: 0;
  }
}


<main id="main-content" class="page-news">
  <div class="news-shell">
    <nav class="crumbs" aria-label="面包屑导航">
      <a href="/">首页</a>
      <span class="crumbs__sep" aria-hidden="true">/</span>
      <a href="/catalog/">内容目录</a>
      <span class="crumbs__sep" aria-hidden="true">/</span>
      <span aria-current="page">赛事观察</span>
    </nav>

    <header class="news-hero">
      <div class="news-hero__copy">
        <p class="eyebrow">赛事观察 · 每轮更新</p>
        <h1 class="display news-hero__title">比赛结束两小时内，<span class="news-hero__accent">先读完结论</span></h1>
        <p class="lede news-hero__lede">你打开手机的那一刻，多半是终场哨刚响、车还没到站。乐动体育把每场球拆成结果、关键节点和下一场三段，先把要点送到你眼前，次日中午前再补上射手榜与积分走势。华人小屏看乐动体育战报，竖屏一屏一段，横过来反而多余。</p>
        <div class="news-hero__actions">
          <a class="btn btn--primary" href="/tutorial/">订阅关注球队</a>
          <a class="btn btn--ghost" href="/catalog/">翻球队资料</a>
        </div>
        <ul class="news-figures">
          <li><strong>2</strong>小时内发出要点战报</li>
          <li><strong>34</strong>轮赛程逐轮对上节点</li>
          <li><strong>3</strong>段结构：结果、节点、下一场</li>
        </ul>
      </div>

      <div class="news-hero__aside">
        <figure class="news-shot news-shot--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间球场边线与灯光轨迹，看台亮起的战报主视觉">
          <figcaption class="news-shot__caption">比赛日两小时内，先给结果与关键节点</figcaption>
        </figure>
        <figure class="news-shot news-shot--tall">
          <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="手机竖屏中显示战报标题与要点卡的阅读场景">
          <figcaption class="news-shot__caption">竖屏阅读：一段一个要点</figcaption>
        </figure>
      </div>
    </header>

    <section class="section news-picks" aria-labelledby="picks-title" data-reveal>
      <div class="section__head news-picks__head">
        <div>
          <p class="eyebrow">编辑台精选</p>
          <h2 class="section__title" id="picks-title">现阶段值得先读的三篇</h2>
        </div>
        <p class="news-picks__note">每篇先给一句结论，再补两条观察点，两站地铁的距离刚好读完。</p>
      </div>

      <div class="picks-grid">
        <article class="pick pick--lead">
          <div class="pick__kicker">
            <span class="news-tag news-tag--warm">刚结束的一轮</span>
            <span class="news-tag">战报速读</span>
          </div>
          <h3 class="pick__title">中场换人之后的十五分钟，比赛的方向就变了</h3>
          <p class="pick__lead">控球占优的一方，在换人后反而更难把球送进禁区。</p>
          <ul class="points">
            <li>边路压上之后，中场的回追距离被拉长，第二落点几乎全丢。</li>
            <li>最后阶段的射门多来自禁区外，威胁看着不少，实际很浅。</li>
          </ul>
          <a class="card__link pick__link" href="/insights/#news-feed">看更多赛后速读</a>
        </article>

        <article class="pick pick--a">
          <div class="pick__kicker">
            <span class="news-tag">数据观察</span>
            <span class="news-tag news-tag--ghost">本周更新</span>
          </div>
          <h3 class="pick__title">积分走势在赛季中段出现第一次交叉</h3>
          <p class="pick__lead">两支球队的排名在四轮之内互换，分差一直咬得很紧。</p>
          <ul class="points">
            <li>交叉前后四轮是观察窗口，看净胜球比看积分更快。</li>
            <li>折线上的变化点用暖橙标出，扫一眼就知道哪轮转向。</li>
          </ul>
        </article>

        <article class="pick pick--b">
          <div class="pick__kicker">
            <span class="news-tag">球队档案</span>
            <span class="news-tag news-tag--ghost">上轮赛后</span>
          </div>
          <h3 class="pick__title">客场作战时，防线前提的代价最明显</h3>
          <p class="pick__lead">把防线压到中圈附近的球队，被反击时更容易先丢球。</p>
          <ul class="points">
            <li>同样的站位，主场有看台顶着，客场就变成空当。</li>
            <li>档案页把阵容、关键比赛和射手变化串在一条赛季线上。</li>
          </ul>
        </article>
      </div>
    </section>

    <section class="section news-stream" aria-labelledby="stream-title">
      <div class="stream-grid">
        <aside class="stream-rail">
          <div class="stream-rail__block">
            <p class="stream-rail__label">按兴趣筛选</p>
            <div class="filter-bar" data-filter-group data-filter-scope="#news-feed">
              <button class="pill" type="button" data-filter="all" aria-pressed="true">全部</button>
              <button class="pill" type="button" data-filter="战报速读" aria-pressed="false">战报速读</button>
              <button class="pill" type="button" data-filter="数据观察" aria-pressed="false">数据观察</button>
              <button class="pill" type="button" data-filter="球队档案" aria-pressed="false">球队档案</button>
              <button class="pill" type="button" data-filter="订阅指南" aria-pressed="false">订阅指南</button>
            </div>
          </div>
          <div class="stream-rail__block stream-rail__block--dusk">
            <p class="stream-rail__label">更新节奏</p>
            <p class="stream-rail__text">比赛日结束两小时内出战报；次日中午前更新数据面板；每周一发布上一周的积分走势观察。</p>
            <a class="stream-rail__link" href="/catalog/">进内容目录查球队</a>
          </div>
        </aside>

        <div class="stream-main">
          <div class="section__head stream-main__head">
            <h2 class="section__title" id="stream-title">最新条目</h2>
            <p class="stream-main__note">按轮次和赛后时点往前排，最新的在最上面。</p>
          </div>

          <div class="feed-list" id="news-feed">
            <article class="feed-card" data-tags="战报速读">
              <div class="feed-card__top">
                <span class="feed-time">刚结束的一轮</span>
                <span class="news-tag">战报速读</span>
              </div>
              <h3 class="feed-card__title">最后十五分钟的射门都来自禁区外，这场球的答案在边路</h3>
              <p class="feed-card__lead">结论：边路被压住之后，中路只能靠远射勉强交差。</p>
              <details class="feed-card__more">
                <summary>展开两条要点</summary>
                <ul class="points">
                  <li>对手把边后卫盯死，传中次数直接腰斩。</li>
                  <li>下一场若还是这套站位，前腰需要更多回撤接球。</li>
                </ul>
              </details>
            </article>

            <article class="feed-card feed-card--wide" data-tags="数据观察">
              <figure class="news-shot news-shot--data">
                <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="深色背景中的积分折线与轮次标记，暖橙色突出变化点" loading="lazy" decoding="async">
                <figcaption class="news-shot__caption">变化点用暖橙标出</figcaption>
              </figure>
              <div class="feed-card__body">
                <div class="feed-card__top">
                  <span class="feed-time">本周更新</span>
                  <span class="news-tag">数据观察</span>
                </div>
                <h3 class="feed-card__title">积分走势按轮次铺开，前十轮和最后十轮完全不是一个形状</h3>
                <p class="feed-card__lead">结论：中段拉开的差距，多半在后段被慢慢磨平。</p>
                <details class="feed-card__more">
                  <summary>展开两条要点</summary>
                  <ul class="points">
                    <li>折线只画积分，不叠过多网格线，小屏上也看得清拐点。</li>
                    <li>想看某支球队的完整走势，去球队档案按赛季逐季翻。</li>
                  </ul>
                </details>
              </div>
            </article>

            <article class="feed-card" data-tags="球队档案 数据观察">
              <div class="feed-card__top">
                <span class="feed-time">上轮赛后</span>
                <span class="news-tag">球队档案</span>
              </div>
              <h3 class="feed-card__title">十八支球队里，能把主场优势兑现到净胜球的并不多</h3>
              <p class="feed-card__lead">结论：主场带来的往往不是更多进球，而是更少的失球。</p>
              <details class="feed-card__more">
                <summary>展开两条要点</summary>
                <ul class="points">
                  <li>档案页以赛季为轴，阵容、关键比赛、射手与积分变化串成一条线。</li>
                  <li>412 名球员条目按位置归好，找人不靠搜索框也能翻到。</li>
                </ul>
              </details>
            </article>

            <article class="feed-card" data-tags="战报速读">
              <div class="feed-card__top">
                <span class="feed-time">两天前更新</span>
                <span class="news-tag">战报速读</span>
              </div>
              <h3 class="feed-card__title">一场零封背后，多半是禁区外的封堵做对了</h3>
              <p class="feed-card__lead">结论：门将的高光镜头少，通常是防线提前解决问题。</p>
              <details class="feed-card__more">
                <summary>展开两条要点</summary>
                <ul class="points">
                  <li>把对手往边路赶，射门角度越挤越小。</li>
                  <li>这类比赛在文字战报里读起来平淡，含金量反而高。</li>
                </ul>
              </details>
            </article>

            <article class="feed-card" data-tags="数据观察">
              <div class="feed-card__top">
                <span class="feed-time">本周更新</span>
                <span class="news-tag">数据观察</span>
              </div>
              <h3 class="feed-card__title">射手榜前五的位置，随轮次推进并不稳定</h3>
              <p class="feed-card__lead">结论：进球集中的球队，射手排名会被一两轮直接改写。</p>
              <details class="feed-card__more">
                <summary>展开两条要点</summary>
                <ul class="points">
                  <li>射手榜按轮次更新，排名升降用暖橙标记。</li>
                  <li>单看总数容易误判，看分布才知道谁在关键轮次得分。</li>
                </ul>
              </details>
            </article>

            <article class="feed-card" data-tags="订阅指南">
              <div class="feed-card__top">
                <span class="feed-time">本周更新</span>
                <span class="news-tag">订阅指南</span>
              </div>
              <h3 class="feed-card__title">赛前提醒开一条就够，别让通知盖过战报本身</h3>
              <p class="feed-card__lead">结论：只留你真正会看的那一类提醒，回访反而更稳。</p>
              <details class="feed-card__more">
                <summary>展开两条要点</summary>
                <ul class="points">
                  <li>赛前 1 小时和赛后战报两种通知，随时可以在会员中心调整。</li>
                  <li>每位会员最多关注 3 支球队，其中 1 支设为主队优先推送。</li>
                </ul>
              </details>
            </article>

            <article class="feed-card" data-tags="球队档案">
              <div class="feed-card__top">
                <span class="feed-time">赛季中段回顾</span>
                <span class="news-tag">球队档案</span>
              </div>
              <h3 class="feed-card__title">三十四轮里，主场优势并不是均匀分布的</h3>
              <p class="feed-card__lead">结论：开局阶段的主场分最好拿，越往后越靠硬实力。</p>
              <details class="feed-card__more">
                <summary>展开两条要点</summary>
                <ul class="points">
                  <li>赛程密度上来之后，主客场的差别被体能抹平。</li>
                  <li>球队档案把 34 轮节点逐条列出，方便对照着看。</li>
                </ul>
              </details>
            </article>

            <article class="feed-card" data-tags="战报速读 订阅指南">
              <div class="feed-card__top">
                <span class="feed-time">上轮赛后</span>
                <span class="news-tag">战报速读</span>
              </div>
              <h3 class="feed-card__title">同一份战报，竖屏上先给结果还是先给过程</h3>
              <p class="feed-card__lead">结论：先给结果，再按节点往下读，读完一段能随时退出。</p>
              <details class="feed-card__more">
                <summary>展开两条要点</summary>
                <ul class="points">
                  <li>段落控制在三到四行，拇指一划就是一屏。</li>
                  <li>关键节点单独成块，不用回头重读整段。</li>
                </ul>
              </details>
            </article>
          </div>
        </div>
      </div>
    </section>

    <section class="series" aria-labelledby="series-title" data-reveal>
      <div class="series__aside">
        <figure class="news-shot news-shot--square">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="圆角战术板上的箭头、区域线与青柠色标记" loading="lazy" decoding="async">
          <figcaption class="news-shot__caption">专题随赛季推进持续补更</figcaption>
        </figure>
      </div>
      <div class="series__body">
        <p class="eyebrow">专题系列</p>
        <h2 class="section__title" id="series-title">三条长期栏目，赛季越往后越值得翻</h2>
        <div class="series__grid">
          <article class="series-card">
            <span class="series-card__no">01</span>
            <h3 class="series-card__title">赛季分水岭</h3>
            <p>挑出真正改变了排名走向的轮次，把前后的站位、轮换和赛程密度摆在一起看。想追某支球队的转折点，从这里进去最快。</p>
          </article>
          <article class="series-card">
            <span class="series-card__no">02</span>
            <h3 class="series-card__title">射手榜观察</h3>
            <p>按轮次盯住排名升降，暖橙标记谁在往上走。进球分布比总数更能说明问题，尤其是关键轮次的那几脚。</p>
          </article>
          <article class="series-card">
            <span class="series-card__no">03</span>
            <h3 class="series-card__title">小屏阅读实验</h3>
            <p>把同一篇战报放在竖屏里反复调结构，掂量哪句该提前、哪段可以砍掉。你现在读到的段落节奏，多半来自这里。</p>
          </article>
        </div>
      </div>
    </section>

    <section class="subscribe" aria-labelledby="subscribe-title">
      <div class="subscribe__copy">
        <p class="eyebrow subscribe__eyebrow">订阅行动</p>
        <h2 class="subscribe__title" id="subscribe-title">把关心的球队设成主队，战报就不用再找</h2>
        <p class="subscribe__text">选择球队、设定关注偏好、开启赛程提醒，三步在会员中心首屏完成。之后每个比赛日，要点战报会按时落在你手里。</p>
      </div>
      <div class="subscribe__actions">
        <a class="subscribe__cta" href="/tutorial/">去会员中心设置</a>
        <a class="subscribe__ghost" href="/who-we-are/">看看我们怎么做内容</a>
      </div>
    </section>
  </div>
</main>

.page-news {
  background: var(--ink);
  color: var(--paper);
  padding-bottom: clamp(44px, 8vw, 96px);
  overflow-x: hidden;
}

.page-news .news-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-news .crumbs {
  color: var(--mint);
  font-size: 12px;
  letter-spacing: .04em;
  padding-top: clamp(14px, 3vw, 26px);
}

.page-news .crumbs a {
  color: var(--mint);
  text-decoration: none;
}

.page-news .crumbs a:hover {
  color: var(--lime);
}

.page-news .crumbs__sep {
  color: var(--line);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(22px, 4vw, 40px);
  padding-block: clamp(24px, 5vw, 54px) clamp(30px, 6vw, 64px);
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -14vw;
  width: min(86vw, 680px);
  height: 82%;
  background: linear-gradient(152deg, rgba(30, 90, 71, .92) 0%, rgba(18, 49, 41, .45) 52%, rgba(7, 19, 15, 0) 100%);
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
  pointer-events: none;
}

.page-news .news-hero__title {
  margin: .28em 0 .4em;
  letter-spacing: -.02em;
  max-width: 640px;
  line-height: 1.02;
}

.page-news .news-hero__accent {
  color: var(--lime);
  box-shadow: inset 0 -0.16em 0 rgba(200, 244, 90, .28);
}

.page-news .news-hero__lede {
  max-width: 48ch;
  color: var(--mint);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
}

.page-news .news-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.page-news .news-figures {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 24px 0 0;
  padding: 0;
}

.page-news .news-figures li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12.5px;
  color: var(--mint);
  letter-spacing: .02em;
}

.page-news .news-figures strong {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 600;
  color: var(--lime);
}

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

/* ---------- 图片 ---------- */
.page-news .news-shot {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--board);
  border: 1px solid var(--line);
}

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

.page-news .news-shot--tall img {
  aspect-ratio: 4 / 5;
}

.page-news .news-shot--wide img {
  aspect-ratio: 3 / 2;
}

.page-news .news-shot--data img {
  aspect-ratio: 12 / 7;
}

.page-news .news-shot--square img {
  aspect-ratio: 1 / 1;
}

.page-news .news-shot__caption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--lime-soft);
  background: rgba(7, 19, 15, .72);
  border-radius: var(--radius-pill);
}

/* ---------- 编辑台精选 ---------- */
.page-news .news-picks__head {
  display: grid;
  gap: 10px;
}

.page-news .news-picks__note {
  margin: 0;
  font-size: 13.5px;
  color: var(--mint);
  line-height: 1.7;
  max-width: 34ch;
}

.page-news .picks-grid {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.page-news .pick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--board);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.page-news .pick--lead {
  background: linear-gradient(158deg, var(--board) 0%, var(--stand) 82%);
  border-color: rgba(200, 244, 90, .3);
  box-shadow: var(--shadow-soft);
}

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

.page-news .pick__title {
  margin: 4px 0 0;
  font-size: clamp(18px, 2.6vw, 25px);
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-news .pick--lead .pick__title {
  font-size: clamp(21px, 3.6vw, 33px);
  line-height: 1.24;
}

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

.page-news .pick__link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--lime);
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 244, 90, .4);
  padding-bottom: 2px;
}

.page-news .pick__link:hover {
  color: var(--lime-soft);
}

/* ---------- 标签 ---------- */
.page-news .news-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--ink);
  background: var(--lime-soft);
  border-radius: var(--radius-pill);
}

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

.page-news .news-tag--ghost {
  color: var(--mint);
  background: transparent;
  border: 1px solid var(--line);
}

/* ---------- 条目流 ---------- */
.page-news .stream-grid {
  display: grid;
  gap: 20px;
}

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

.page-news .stream-rail__block {
  padding: 16px 18px;
  background: var(--stand);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-news .stream-rail__block--dusk {
  background: linear-gradient(170deg, var(--board), var(--stand));
}

.page-news .stream-rail__label {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--orange);
}

.page-news .stream-rail__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--mint);
}

.page-news .stream-rail__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 244, 90, .38);
  padding-bottom: 2px;
}

.page-news .filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-news .filter-bar::-webkit-scrollbar {
  display: none;
}

.page-news .filter-bar .pill {
  white-space: nowrap;
  flex: 0 0 auto;
}

.page-news .stream-main__head {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.page-news .stream-main__note {
  margin: 0;
  font-size: 13px;
  color: var(--mint);
}

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

.page-news .feed-card {
  display: grid;
  gap: 10px;
  padding: clamp(16px, 2.6vw, 24px);
  background: var(--stand);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}

.page-news .feed-card:hover {
  border-color: rgba(200, 244, 90, .42);
  transform: translateY(-2px);
}

.page-news .feed-card--wide {
  grid-template-columns: 1fr;
  align-items: center;
  background: linear-gradient(140deg, var(--board), var(--stand));
}

.page-news .feed-card__body {
  display: grid;
  gap: 10px;
}

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

.page-news .feed-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--orange);
  border: 1px solid rgba(255, 138, 61, .42);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.page-news .feed-card__title {
  margin: 0;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--paper);
}

.page-news .feed-card__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--lime-soft);
}

.page-news .feed-card__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--lime);
}

.page-news .feed-card__more summary::-webkit-details-marker {
  display: none;
}

.page-news .feed-card__more summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--orange);
}

.page-news .feed-card__more[open] summary::before {
  content: "–";
}

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

.page-news .points li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.72;
  color: var(--mint);
}

.page-news .points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
}

/* ---------- 专题系列 ---------- */
.page-news .series {
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 7vw, 84px);
  padding: clamp(20px, 4vw, 40px);
  background: linear-gradient(120deg, var(--stand) 0%, var(--board) 58%, var(--stand) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}

.page-news .series::after {
  content: "";
  position: absolute;
  top: -46%;
  right: -10%;
  width: 48%;
  height: 190%;
  background: linear-gradient(180deg, rgba(200, 244, 90, .12), rgba(200, 244, 90, 0) 72%);
  clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
  pointer-events: none;
}

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

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

.page-news .series__grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.page-news .series-card {
  padding: 16px 18px;
  background: rgba(7, 19, 15, .55);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.page-news .series-card__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--orange);
  margin-bottom: 6px;
}

.page-news .series-card__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -.005em;
}

.page-news .series-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.78;
  color: var(--mint);
}

/* ---------- 订阅行动 ---------- */
.page-news .subscribe {
  margin-top: clamp(34px, 6vw, 72px);
  padding: clamp(26px, 5vw, 54px);
  display: grid;
  gap: 22px;
  background: linear-gradient(112deg, var(--lime) 0%, var(--lime-soft) 62%, var(--lime) 100%);
  color: var(--ink);
  border-radius: var(--radius-lg);
  clip-path: polygon(0 0, 100% 3.5%, 100% 100%, 0 96.5%);
}

.page-news .subscribe__eyebrow {
  color: rgba(7, 19, 15, .62);
  margin: 0 0 8px;
}

.page-news .subscribe__title {
  margin: 0 0 10px;
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.24;
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--ink);
  max-width: 22ch;
}

.page-news .subscribe__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(7, 19, 15, .76);
  max-width: 52ch;
}

.page-news .subscribe__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.page-news .subscribe__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  background: var(--ink);
  color: var(--lime);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .22s var(--ease), background .22s var(--ease);
}

.page-news .subscribe__cta:hover {
  background: var(--board);
  transform: translateY(-1px);
}

.page-news .subscribe__ghost {
  font-size: 13px;
  color: rgba(7, 19, 15, .78);
  text-decoration: none;
  border-bottom: 1px solid rgba(7, 19, 15, .35);
  padding-bottom: 2px;
}

.page-news .subscribe__ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-news .feed-card--wide {
    grid-template-columns: 210px 1fr;
    gap: 18px;
  }
}

@media (min-width: 780px) {
  .page-news .news-hero__aside {
    grid-template-columns: 1.25fr 1fr;
    align-items: start;
  }

  .page-news .news-shot--tall {
    margin-top: 44px;
  }

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

@media (min-width: 900px) {
  .page-news .news-picks__head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .page-news .picks-grid {
    grid-template-columns: 1.45fr 1fr;
    grid-template-areas:
      "lead a"
      "lead b";
  }

  .page-news .pick--lead {
    grid-area: lead;
  }

  .page-news .pick--a {
    grid-area: a;
  }

  .page-news .pick--b {
    grid-area: b;
  }

  .page-news .series {
    grid-template-columns: 250px 1fr;
    align-items: start;
  }

  .page-news .subscribe {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(20px, 4vw, 48px);
  }

  .page-news .subscribe__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 1000px) {
  .page-news .news-hero {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
  }

  .page-news .stream-grid {
    grid-template-columns: 236px 1fr;
    gap: clamp(22px, 3.5vw, 44px);
    align-items: start;
  }

  .page-news .stream-rail {
    position: sticky;
    top: 92px;
  }

  .page-news .filter-bar {
    flex-direction: column;
    align-items: flex-start;
    overflow: visible;
    padding-bottom: 0;
  }
}