.page-news{
  --np-gap: clamp(20px, 3vw, 46px);
  --np-rail: 196px;
  --np-rule: 1px solid var(--line);
}

/* ---------- 面包屑 ---------- */
.page-news .breadcrumbs{
  padding-block: clamp(14px, 2vw, 22px) 0;
  font-size: 13px;
}
.page-news .breadcrumbs ol{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}
.page-news .breadcrumbs li{
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-news .breadcrumbs li + li::before{
  content: "/";
  color: var(--grid);
}
.page-news .breadcrumbs a{
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.page-news .breadcrumbs a:hover,
.page-news .breadcrumbs a:focus-visible{
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.page-news .breadcrumbs [aria-current="page"]{
  color: var(--ink);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero{
  position: relative;
  padding-block: clamp(26px, 5vw, 62px) clamp(20px, 3.4vw, 40px);
}
.page-news .news-hero::after{
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--grid) 32%, transparent 78%);
  opacity: .55;
}
.page-news .eyebrow{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.page-news .news-hero h1{
  margin: 14px 0 0;
  max-width: 22ch;
  font-size: clamp(30px, 5.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.page-news .news-lede{
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  max-width: 64ch;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.85;
  color: var(--muted);
}
.page-news .news-facts{
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(24px, 4vw, 52px);
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}
.page-news .news-facts li{
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  color: var(--muted);
}
.page-news .news-facts b{
  font-family: var(--font-mono);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: -.01em;
}

/* ---------- 主体骨架 ---------- */
.page-news .news-shell{
  display: grid;
  gap: var(--np-gap);
  padding-block: clamp(26px, 4vw, 46px) clamp(52px, 8vw, 112px);
}

/* ---------- 左侧索引 ---------- */
.page-news .news-rail{
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-news .news-rail-title{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grid);
}
.page-news .news-rail-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .news-rail-list a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 0;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color .18s ease, padding-left .2s ease;
}
.page-news .news-rail-list a::before{
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--grid);
  transition: width .22s ease, background .18s ease;
}
.page-news .news-rail-list a:hover,
.page-news .news-rail-list a:focus-visible{
  color: var(--ink);
  padding-left: 6px;
}
.page-news .news-rail-list a:hover::before,
.page-news .news-rail-list a:focus-visible::before{
  width: 22px;
  background: var(--cyan);
}
.page-news .news-rail-note{
  margin: 0;
  padding-top: 14px;
  border-top: var(--np-rule);
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 章节通用 ---------- */
.page-news .news-section{
  scroll-margin-top: 110px;
}
.page-news .news-section + .news-section{
  margin-top: clamp(40px, 6vw, 80px);
}
.page-news .section-head{
  display: grid;
  gap: 10px;
  margin-bottom: clamp(18px, 2.8vw, 30px);
}
.page-news .section-head h2{
  margin: 0;
  font-size: clamp(22px, 3.1vw, 34px);
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--ink);
}
.page-news .section-lede{
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 四条内容线 ---------- */
.page-news .lane-grid{
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
}
.page-news .lane{
  position: relative;
  padding: clamp(18px, 2.3vw, 26px);
  border: var(--np-rule);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(12, 42, 32, .92), rgba(6, 20, 15, .94));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.page-news .lane::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--orange);
  opacity: .8;
}
.page-news .lane-no{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--orange);
}
.page-news .lane h3{
  margin: 10px 0 8px;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.35;
  color: var(--ink);
}
.page-news .lane p{
  margin: 0;
  font-size: 15px;
  line-height: 1.82;
  color: var(--muted);
}
.page-news .lane .lane-meta{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--grid);
}

/* ---------- 本轮战报列表 ---------- */
.page-news .brief-list{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--np-rule);
}
.page-news .brief{
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 clamp(10px, 1.6vw, 20px);
  padding: clamp(16px, 2.2vw, 24px) 0;
  border-bottom: var(--np-rule);
  transition: background-color .2s ease;
}
.page-news .brief-no{
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--cyan);
}
.page-news .brief-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
}
.page-news .brief-league{
  color: var(--orange);
}
.page-news .brief-round,
.page-news .brief-when{
  color: var(--muted);
}
.page-news .brief-state{
  padding: 2px 9px;
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.page-news .brief-state.is-live{
  color: var(--orange);
  border-color: rgba(255, 179, 71, .45);
}
.page-news .brief h3{
  margin: 0 0 7px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--ink);
}
.page-news .brief-sum{
  margin: 0;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 通栏专题图 ---------- */
.page-news .news-banner{
  margin: clamp(40px, 6vw, 76px) 0 0;
  border: var(--np-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.page-news .news-banner img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-banner figcaption{
  padding: 13px clamp(14px, 2vw, 20px);
  border-top: var(--np-rule);
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 联赛观察 ---------- */
.page-news .league-grid{
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}
.page-news .league-card{
  padding: 4px 0 4px clamp(14px, 1.8vw, 20px);
  border-left: 2px solid var(--grid);
  transition: border-color .22s ease;
}
.page-news .league-card:hover{
  border-left-color: var(--cyan);
}
.page-news .league-name{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--cyan);
}
.page-news .league-card h3{
  margin: 9px 0 8px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--ink);
}
.page-news .league-card p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 数据专栏 ---------- */
.page-news .column-feature{
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(18px, 2.6vw, 28px);
}
.page-news .column-figure{
  margin: 0;
  border: var(--np-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.page-news .column-figure img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .column-figure figcaption{
  padding: 11px clamp(13px, 1.8vw, 18px);
  border-top: var(--np-rule);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.page-news .column-copy p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.88;
  color: var(--muted);
}
.page-news .topic-list{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.page-news .topic-list li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}
.page-news .topic-list li::before{
  content: "▸";
  font-size: 12px;
  line-height: 1.9;
  color: var(--cyan);
}

/* ---------- 收藏与归档 ---------- */
.page-news .archive-grid{
  display: grid;
  gap: clamp(22px, 3vw, 38px);
  align-items: start;
}
.page-news .dim-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
}
.page-news .dim-list li{
  padding-left: clamp(14px, 1.8vw, 20px);
  border-left: 1px solid var(--grid);
}
.page-news .dim-list h3{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.page-news .dim-list p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}
.page-news .archive-note{
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px) clamp(18px, 2.4vw, 26px);
  border: var(--np-rule);
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(12, 42, 32, .55);
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}
.page-news .archive-map{
  margin: 0;
  border: var(--np-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.page-news .archive-map img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .archive-map figcaption{
  padding: 11px clamp(13px, 1.8vw, 18px);
  border-top: var(--np-rule);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.page-news .archive-strip{
  margin: clamp(24px, 3.4vw, 40px) 0 0;
  border: var(--np-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.page-news .archive-strip img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .archive-strip figcaption{
  padding: 12px clamp(13px, 1.8vw, 18px);
  border-top: var(--np-rule);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 更新动态 ---------- */
.page-news .update-list{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--np-rule);
}
.page-news .update-list li{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: clamp(16px, 2.2vw, 24px) 0;
  border-bottom: var(--np-rule);
}
.page-news .update-when{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--orange);
}
.page-news .update-list h3{
  margin: 0 0 6px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--ink);
}
.page-news .update-list p{
  margin: 0;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}
.page-news .update-link{
  margin-top: 8px !important;
  font-size: 14px;
}
.page-news .update-link a{
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 243, 212, .35);
  transition: border-color .18s ease, color .18s ease;
}
.page-news .update-link a:hover,
.page-news .update-link a:focus-visible{
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- 结尾行动区 ---------- */
.page-news .news-cta{
  margin-top: clamp(44px, 6vw, 84px);
  padding: clamp(24px, 3.6vw, 42px);
  border: var(--np-rule);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(124, 243, 212, .08), transparent 58%),
    linear-gradient(180deg, rgba(12, 42, 32, .95), rgba(6, 20, 15, .95));
  box-shadow: var(--shadow);
}
.page-news .news-cta h2{
  margin: 0 0 12px;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--ink);
}
.page-news .news-cta p{
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}
.page-news .cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2.6vw, 28px);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px){
  .page-news .lane-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-news .lane:nth-child(2){
    transform: translateY(14px);
  }
  .page-news .league-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 34px) clamp(22px, 3vw, 40px);
  }
  .page-news .league-card:nth-child(3){
    grid-column: 1 / -1;
    max-width: 62ch;
  }
  .page-news .update-list li{
    grid-template-columns: 92px minmax(0, 1fr);
    gap: clamp(14px, 2vw, 26px);
  }
}

@media (min-width: 860px){
  .page-news .column-feature{
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }
}

@media (min-width: 960px){
  .page-news .news-shell{
    grid-template-columns: var(--np-rail) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 68px);
  }
  .page-news .news-rail{
    position: sticky;
    top: 96px;
    align-self: start;
  }
  .page-news .news-rail-list{
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    padding-top: 12px;
    border-top: var(--np-rule);
  }
  .page-news .archive-grid{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .page-news .lane:nth-child(2){
    transform: translateY(22px);
  }
}

@media (min-width: 1120px){
  .page-news .column-feature{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-news .lane:nth-child(2){
    transform: none;
  }
  .page-news .news-rail-list a,
  .page-news .league-card,
  .page-news .brief{
    transition: none;
  }
}

<main id="main-content" class="page-news">
  <nav class="breadcrumbs wrap" aria-label="面包屑导航">
    <ol>
      <li><a href="/">首页</a></li>
      <li aria-current="page">战报与笔记</li>
    </ol>
  </nav>

  <section class="wrap news-hero">
    <p class="eyebrow">战报与笔记</p>
    <h1>每一轮看完的球，都留下一份回得去的记录</h1>
    <p class="news-lede">
      终场哨响之后的四十五分钟里，新2足球登入的编辑已经在整理数据、动笔写复盘。你可以先读刚结束那一场发生了什么，
      再顺着联赛观察把整个赛季的变化连起来看；觉得有用就标上星标，按赛季归进自己的收藏夹，
      下周想翻回来的时候不用再满站去找。
    </p>
    <ul class="news-facts">
      <li><b>12.8 万篇</b><span>赛后战报累计收录</span></li>
      <li><b>45 分钟</b><span>终场后进入编辑流程</span></li>
      <li><b>500 篇</b><span>单个账号可收藏上限</span></li>
    </ul>
  </section>

  <div class="wrap news-shell">
    <aside class="news-rail" aria-label="栏目索引">
      <p class="news-rail-title">栏目索引</p>
      <ul class="news-rail-list">
        <li><a href="#lanes">四条内容线</a></li>
        <li><a href="#roundup">本轮战报</a></li>
        <li><a href="#leagues">联赛观察</a></li>
        <li><a href="#column">数据专栏</a></li>
        <li><a href="#archive">收藏与归档</a></li>
        <li><a href="#updates">栏目与版本更新</a></li>
      </ul>
      <p class="news-rail-note">战报累积到现在，按联赛、球队和赛季三层归在一起。登录之后，可以从个人页第二栏进收藏夹。</p>
    </aside>

    <div class="news-stream">
      <section id="lanes" class="news-section">
        <div class="section-head">
          <p class="eyebrow">四条内容线</p>
          <h2>同一个比赛，可以有好几种读法</h2>
          <p class="section-lede">这场球到底怎么了，是一个问题；这个联赛这个赛季在往哪走，是另一个问题。四条线各管一段，你想读哪一种，进来就知道点哪里。</p>
        </div>

        <div class="lane-grid">
          <article class="lane" data-reveal>
            <span class="lane-no">01</span>
            <h3>赛后战报</h3>
            <p>终场之后先把比分走势和关键节点理清楚，再写决定比赛的几次攻防与调整。常规比赛结束后 45 分钟内进入编辑流程，数据与文字各过一遍再发出来。</p>
            <p class="lane-meta">每个比赛日多轮更新</p>
          </article>

          <article class="lane" data-reveal>
            <span class="lane-no">02</span>
            <h3>联赛观察</h3>
            <p>不追单场，追一个联赛一个赛季的走向。赛季初的阵容磨合、中段赛程密集带来的轮换、收官阶段积分拉开的位置，都在这一线的选题里。</p>
            <p class="lane-meta">每周 2 至 3 篇</p>
          </article>

          <article class="lane" data-reveal>
            <span class="lane-no">03</span>
            <h3>数据专栏</h3>
            <p>把一场比赛拆成几组能横向比较的数字：射门质量、推进路线、定位球收益、换人前后的节奏差。每篇只回答一个问题，不做整场数据的罗列。</p>
            <p class="lane-meta">每周 1 篇</p>
          </article>

          <article class="lane" data-reveal>
            <span class="lane-no">04</span>
            <h3>栏目与版本更新</h3>
            <p>栏目的新增与合并、客户端版本的功能变化、提醒与缓存的调整，都集中写在这条线里，你不用在几个入口之间来回找。</p>
            <p class="lane-meta">随版本发布</p>
          </article>
        </div>
      </section>

      <section id="roundup" class="news-section">
        <div class="section-head">
          <p class="eyebrow">本轮速览</p>
          <h2>刚踢完的这些场次</h2>
          <p class="section-lede">比赛结束就有人写。下面这些是最近一轮已经出稿的场次，状态会随比赛进程更新，还没写完的也标了出来。</p>
        </div>

        <ol class="brief-list">
          <li class="brief" data-reveal>
            <span class="brief-no" aria-hidden="true">01</span>
            <div class="brief-body">
              <p class="brief-meta">
                <span class="brief-league">英超</span>
                <span class="brief-round">第 21 轮</span>
                <span class="brief-when">本轮</span>
                <span class="brief-state">已发布</span>
              </p>
              <h3>零比零里的十四次射正：两队怎么在禁区前沿互相锁住</h3>
              <p class="brief-sum">两边加起来十四次射正却没有进球。真正值得看的不是射门数量，是两侧边路传中被顶出来之后，第二落点被谁先抢到。</p>
            </div>
          </li>

          <li class="brief" data-reveal>
            <span class="brief-no" aria-hidden="true">02</span>
            <div class="brief-body">
              <p class="brief-meta">
                <span class="brief-league">西甲</span>
                <span class="brief-round">第 20 轮</span>
                <span class="brief-when">本轮</span>
                <span class="brief-state">已发布</span>
              </p>
              <h3>换人之后控球率从 41% 涨到 58%，中场站位改了三处</h3>
              <p class="brief-sum">下半场两次换人之后，原本被压在中圈附近的两名中场开始前压，接球点从后腰位置整体上移了大约八米。</p>
            </div>
          </li>

          <li class="brief" data-reveal>
            <span class="brief-no" aria-hidden="true">03</span>
            <div class="brief-body">
              <p class="brief-meta">
                <span class="brief-league">意甲</span>
                <span class="brief-round">第 19 轮</span>
                <span class="brief-when">上周末</span>
                <span class="brief-state">已发布</span>
              </p>
              <h3>三球领先被追平：最后二十分钟防线为什么越退越深</h3>
              <p class="brief-sum">领先方在最后二十分钟把防线整体后撤了近十米，中场与后卫线之间空出的大块区域，成了对方连续起脚的地方。</p>
            </div>
          </li>

          <li class="brief" data-reveal>
            <span class="brief-no" aria-hidden="true">04</span>
            <div class="brief-body">
              <p class="brief-meta">
                <span class="brief-league">德甲</span>
                <span class="brief-round">第 17 轮</span>
                <span class="brief-when">上周末</span>
                <span class="brief-state">已发布</span>
              </p>
              <h3>一次角球防守的完整复盘：六个人盯四个人，漏在了哪里</h3>
              <p class="brief-sum">防守方摆出六人盯防加一人守前点，问题出在前点那人被引开之后的补位次序，对方恰好打的是这个时间差。</p>
            </div>
          </li>

          <li class="brief" data-reveal>
            <span class="brief-no" aria-hidden="true">05</span>
            <div class="brief-body">
              <p class="brief-meta">
                <span class="brief-league">巴甲</span>
                <span class="brief-round">第 30 轮</span>
                <span class="brief-when">上周中</span>
                <span class="brief-state">已发布</span>
              </p>
              <h3>主场一比零：全场只有两脚射正，机会是怎么省出来的</h3>
              <p class="brief-sum">主队全场只完成两脚射正，但两脚都出现在同一条线路上。这篇复盘顺着这条线路，把三次没打进但结构相同的进攻也一起拆了。</p>
            </div>
          </li>

          <li class="brief" data-reveal>
            <span class="brief-no" aria-hidden="true">06</span>
            <div class="brief-body">
              <p class="brief-meta">
                <span class="brief-league">亚冠</span>
                <span class="brief-round">小组赛第 5 轮</span>
                <span class="brief-when">本赛季</span>
                <span class="brief-state is-live">跟进中</span>
              </p>
              <h3>雨战里的短传失效率，和草皮积水的那条分界线</h3>
              <p class="brief-sum">雨势最大的一段时间里，中前场的短传成功率掉得比长传更快。编辑还在比对同一片场地的历史数据，成稿后会更新在这里。</p>
            </div>
          </li>
        </ol>
      </section>

      <section id="leagues" class="news-section">
        <div class="section-head">
          <p class="eyebrow">联赛观察</p>
          <h2>同一个联赛，看得再长一点</h2>
          <p class="section-lede">单场战报回答“这场怎么了”，联赛观察回答“这一个赛季在往哪走”。下面这些线索都还在连载，你可以挑一条顺着往下读。</p>
        </div>

        <div class="league-grid">
          <article class="league-card" data-reveal>
            <p class="league-name">英超</p>
            <h3>高位逼抢的收益，正在从上半场挪到下半场</h3>
            <p>近几个赛季的数据里，高位逼抢带来的直接球权转化时间点在往后移。这条线追的是体能分配与替补深度之间的关系。</p>
          </article>

          <article class="league-card" data-reveal>
            <p class="league-name">西甲</p>
            <h3>控球率的水分：60% 的控球越来越不等于场面优势</h3>
            <p>把控球位置拆到区域之后，会发现相当一部分控球发生在对进攻威胁最小的后场横向传递里。</p>
          </article>

          <article class="league-card" data-reveal>
            <p class="league-name">意甲</p>
            <h3>三中卫回流：中游球队为什么重新捡起这套阵型</h3>
            <p>从边翼卫的人员配置聊到防守转换时的落位，这条线记录的是阵型选择与转会预算之间那条不太显眼的连线。</p>
          </article>

          <article class="league-card" data-reveal>
            <p class="league-name">德甲</p>
            <h3>冬歇期之后的前十五分钟，进球为什么集中出现</h3>
            <p>重启后的第一场，双方的节奏感和对抗强度都还没到位。这条线在比对多个赛季同一时间段的开场数据。</p>
          </article>

          <article class="league-card" data-reveal>
            <p class="league-name">南美联赛</p>
            <h3>一周双赛里的轮换：谁的替补席更经得起消耗</h3>
            <p>赛程密集时，替补出场的分钟数会明显上升。这条线看的是轮换幅度与积分稳定之间的关系。</p>
          </article>
        </div>
      </section>

      <figure class="figure news-banner" data-reveal>
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="夜间球场看台的虚化光影，青绿与琥珀色光斑交错，没有可辨识的人物" loading="lazy" decoding="async">
        <figcaption>深夜写稿的时段，也是数据最密集的时候——终场后的四十五分钟里，编辑台上同时开着赛况、阵容和跑动三块面板。</figcaption>
      </figure>

      <section id="column" class="news-section">
        <div class="section-head">
          <p class="eyebrow">数据专栏</p>
          <h2>把一场比赛拆成几组能比的数字</h2>
        </div>

        <div class="column-feature">
          <figure class="figure column-figure">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="等宽数字与折线构成的深色数据面板，局部以琥珀色强调关键节点" loading="lazy" decoding="async">
            <figcaption>专栏封面常驻一组折线：同一支球队在不同轮次里的射门质量走势。</figcaption>
          </figure>

          <div class="column-copy">
            <p>
              专栏里的数字，来自与站点长期合作的 18 家体育数据机构，覆盖欧洲、南美、亚洲与大洋洲的主要联赛。
              编辑只做一件事：把一场比赛拆开，挑出那组最能说明问题的数字，然后讲清楚它为什么重要。
            </p>
            <p>
              所以每一篇专栏都围绕一个问题展开，而不是把整场的技术统计搬过来。看完整篇，你应该能带走一个能继续用下去的看球角度。
            </p>
            <ul class="topic-list">
              <li>射门质量：把射正次数和射门位置放在同一张图上看</li>
              <li>推进路线：从后场到禁区，球主要走了哪几条边路</li>
              <li>定位球收益：一个赛季里角球和前场任意球换回了多少球</li>
              <li>换人效果：替补上场后的十五分钟，比赛节奏变了多少</li>
              <li>门将站位：点球和单刀时的选择分布，与结果的关系</li>
            </ul>
          </div>
        </div>
      </section>

      <section id="archive" class="news-section">
        <div class="section-head">
          <p class="eyebrow">收藏与归档</p>
          <h2>12.8 万篇战报，怎么收进你自己的抽屉</h2>
          <p class="section-lede">
            围绕华人赛后战报收藏赛事这条主线，收藏夹按联赛、球队、赛季三层来组织。你标星的那几篇，会一直待在原处，
            不用靠搜索再找一遍。
          </p>
        </div>

        <div class="archive-grid">
          <div class="archive-copy">
            <ul class="dim-list">
              <li>
                <h3>按联赛收</h3>
                <p>把常看的那几个联赛的战报放在一起，赛季过半时往回翻，同一个联赛的变化会比单看一场清楚得多。</p>
              </li>
              <li>
                <h3>按球队收</h3>
                <p>只留你长期跟的那几支球队。同一支球队在不同赛季的同一条问题，很容易被排在一起看到。</p>
              </li>
              <li>
                <h3>按赛季收</h3>
                <p>以赛季为单位分组整理，跨赛季对比的时候不必在时间线上来回拖动。单个账号最多保存 500 篇。</p>
              </li>
            </ul>
            <p class="archive-note">
              星标在网页版、客户端和移动端网页之间同步，换设备打开还是在原来的分组里。想看某一篇却忘了标题，可以在首页检索框直接输入队名或联赛名。
            </p>
          </div>

          <figure class="figure archive-map">
            <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="三个同心区域分别标注联赛、球队、赛季的抽象层级图，细线描边配荧光青高亮" loading="lazy" decoding="async">
            <figcaption>收藏夹的三层结构：外圈是联赛，中间是球队，内圈是赛季分组。</figcaption>
          </figure>
        </div>

        <figure class="figure archive-strip" data-reveal>
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="排列整齐的卡片轮廓层叠，边缘带极细的青绿色描边" loading="lazy" decoding="async">
          <figcaption>一个赛季读完，收藏夹里通常是这样叠起来的——越往下的条目，你回看的次数越多。</figcaption>
        </figure>
      </section>

      <section id="updates" class="news-section">
        <div class="section-head">
          <p class="eyebrow">栏目与版本更新</p>
          <h2>内容与版本，最近动了哪些地方</h2>
          <p class="section-lede">栏目的调整和客户端的变化都记在这条线上，看完就知道哪些读法变了、哪些入口换了位置。</p>
        </div>

        <ul class="update-list">
          <li>
            <span class="update-when">本轮</span>
            <div>
              <h3>赛程中心完成改版</h3>
              <p>开球时间、主客场与场地信息放到同一屏里，点开一支球队就能看到整轮安排，少了几步来回切换。</p>
            </div>
          </li>
          <li>
            <span class="update-when">本赛季</span>
            <div>
              <h3>战报收藏补上赛季分组</h3>
              <p>收藏体系从 2023 年上线，这一季陆续补齐了按赛季分组的能力，老读者可以把连续几个赛季的记录排在一起看。</p>
            </div>
          </li>
          <li>
            <span class="update-when">近期</span>
            <div>
              <h3>客户端 2026 版本推送完成</h3>
              <p>Android 与 iOS 已同步更新，新增分层推送与离线赛程缓存，通知不会再一窝蜂地来。</p>
              <p class="update-link"><a href="/services/">看客户端与会员服务的完整说明</a></p>
            </div>
          </li>
          <li>
            <span class="update-when">近期</span>
            <div>
              <h3>离线缓存延长到 30 天</h3>
              <p>关注球队最近 30 天的赛程可以离线查看，赛前一天在地铁里也能把开球时间再确认一遍。</p>
              <p class="update-link"><a href="/tutorial/">去教程与答疑看设置步骤</a></p>
            </div>
          </li>
          <li>
            <span class="update-when">持续</span>
            <div>
              <h3>数据专栏新选题同步进信息流</h3>
              <p>专栏新稿会先在客户端首页出现，网页端随后同步，两边的顺序保持一致。</p>
            </div>
          </li>
        </ul>
      </section>

      <section class="news-cta" data-reveal>
        <h2>找不到某一篇，或者想聊聊合作</h2>
        <p>记得队名和大致轮次，用首页检索框基本都能捞出来。需要人工帮你确认会员权益、赛程信息或者内容合作，直接走咨询通道，我们会尽快回你。</p>
        <div class="cta-actions">
          <a class="btn btn-primary" href="/inquiry/">联系咨询通道</a>
          <a class="btn btn-ghost" href="/tutorial/">先去教程与答疑</a>
        </div>
      </section>
    </div>
  </div>
</main>

.page-news{
  --np-gap: clamp(20px, 3vw, 46px);
  --np-rail: 196px;
  --np-rule: 1px solid var(--line);
}

/* ---------- 面包屑 ---------- */
.page-news .breadcrumbs{
  padding-block: clamp(14px, 2vw, 22px) 0;
  font-size: 13px;
}
.page-news .breadcrumbs ol{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}
.page-news .breadcrumbs li{
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-news .breadcrumbs li + li::before{
  content: "/";
  color: var(--grid);
}
.page-news .breadcrumbs a{
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.page-news .breadcrumbs a:hover,
.page-news .breadcrumbs a:focus-visible{
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.page-news .breadcrumbs [aria-current="page"]{
  color: var(--ink);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero{
  position: relative;
  padding-block: clamp(26px, 5vw, 62px) clamp(20px, 3.4vw, 40px);
}
.page-news .news-hero::after{
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--grid) 32%, transparent 78%);
  opacity: .55;
}
.page-news .eyebrow{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--cyan);
}
.page-news .news-hero h1{
  margin: 14px 0 0;
  max-width: 22ch;
  font-size: clamp(30px, 5.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.page-news .news-lede{
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  max-width: 64ch;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.85;
  color: var(--muted);
}
.page-news .news-facts{
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(24px, 4vw, 52px);
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}
.page-news .news-facts li{
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  color: var(--muted);
}
.page-news .news-facts b{
  font-family: var(--font-mono);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: -.01em;
}

/* ---------- 主体骨架 ---------- */
.page-news .news-shell{
  display: grid;
  gap: var(--np-gap);
  padding-block: clamp(26px, 4vw, 46px) clamp(52px, 8vw, 112px);
}

/* ---------- 左侧索引 ---------- */
.page-news .news-rail{
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-news .news-rail-title{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--grid);
}
.page-news .news-rail-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .news-rail-list a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 0;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color .18s ease, padding-left .2s ease;
}
.page-news .news-rail-list a::before{
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--grid);
  transition: width .22s ease, background .18s ease;
}
.page-news .news-rail-list a:hover,
.page-news .news-rail-list a:focus-visible{
  color: var(--ink);
  padding-left: 6px;
}
.page-news .news-rail-list a:hover::before,
.page-news .news-rail-list a:focus-visible::before{
  width: 22px;
  background: var(--cyan);
}
.page-news .news-rail-note{
  margin: 0;
  padding-top: 14px;
  border-top: var(--np-rule);
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 章节通用 ---------- */
.page-news .news-section{
  scroll-margin-top: 110px;
}
.page-news .news-section + .news-section{
  margin-top: clamp(40px, 6vw, 80px);
}
.page-news .section-head{
  display: grid;
  gap: 10px;
  margin-bottom: clamp(18px, 2.8vw, 30px);
}
.page-news .section-head h2{
  margin: 0;
  font-size: clamp(22px, 3.1vw, 34px);
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--ink);
}
.page-news .section-lede{
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 四条内容线 ---------- */
.page-news .lane-grid{
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
}
.page-news .lane{
  position: relative;
  padding: clamp(18px, 2.3vw, 26px);
  border: var(--np-rule);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(12, 42, 32, .92), rgba(6, 20, 15, .94));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.page-news .lane::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--orange);
  opacity: .8;
}
.page-news .lane-no{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--orange);
}
.page-news .lane h3{
  margin: 10px 0 8px;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.35;
  color: var(--ink);
}
.page-news .lane p{
  margin: 0;
  font-size: 15px;
  line-height: 1.82;
  color: var(--muted);
}
.page-news .lane .lane-meta{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--grid);
}

/* ---------- 本轮战报列表 ---------- */
.page-news .brief-list{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--np-rule);
}
.page-news .brief{
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 clamp(10px, 1.6vw, 20px);
  padding: clamp(16px, 2.2vw, 24px) 0;
  border-bottom: var(--np-rule);
}
.page-news .brief-no{
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--cyan);
}
.page-news .brief-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
}
.page-news .brief-league{
  color: var(--orange);
}
.page-news .brief-round,
.page-news .brief-when{
  color: var(--muted);
}
.page-news .brief-state{
  padding: 2px 9px;
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.page-news .brief-state.is-live{
  color: var(--orange);
  border-color: rgba(255, 179, 71, .45);
}
.page-news .brief h3{
  margin: 0 0 7px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--ink);
}
.page-news .brief-sum{
  margin: 0;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 通栏专题图 ---------- */
.page-news .news-banner{
  margin: clamp(40px, 6vw, 76px) 0 0;
  border: var(--np-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.page-news .news-banner img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-banner figcaption{
  padding: 13px clamp(14px, 2vw, 20px);
  border-top: var(--np-rule);
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 联赛观察 ---------- */
.page-news .league-grid{
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}
.page-news .league-card{
  padding: 4px 0 4px clamp(14px, 1.8vw, 20px);
  border-left: 2px solid var(--grid);
  transition: border-color .22s ease;
}
.page-news .league-card:hover{
  border-left-color: var(--cyan);
}
.page-news .league-name{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--cyan);
}
.page-news .league-card h3{
  margin: 9px 0 8px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--ink);
}
.page-news .league-card p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 数据专栏 ---------- */
.page-news .column-feature{
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(18px, 2.6vw, 28px);
}
.page-news .column-figure{
  margin: 0;
  border: var(--np-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.page-news .column-figure img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .column-figure figcaption{
  padding: 11px clamp(13px, 1.8vw, 18px);
  border-top: var(--np-rule);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.page-news .column-copy p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.88;
  color: var(--muted);
}
.page-news .topic-list{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.page-news .topic-list li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}
.page-news .topic-list li::before{
  content: "▸";
  font-size: 12px;
  line-height: 1.9;
  color: var(--cyan);
}

/* ---------- 收藏与归档 ---------- */
.page-news .archive-grid{
  display: grid;
  gap: clamp(22px, 3vw, 38px);
  align-items: start;
}
.page-news .dim-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
}
.page-news .dim-list li{
  padding-left: clamp(14px, 1.8vw, 20px);
  border-left: 1px solid var(--grid);
}
.page-news .dim-list h3{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.page-news .dim-list p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}
.page-news .archive-note{
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px) clamp(18px, 2.4vw, 26px);
  border: var(--np-rule);
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(12, 42, 32, .55);
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}
.page-news .archive-map{
  margin: 0;
  border: var(--np-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.page-news .archive-map img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .archive-map figcaption{
  padding: 11px clamp(13px, 1.8vw, 18px);
  border-top: var(--np-rule);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.page-news .archive-strip{
  margin: clamp(24px, 3.4vw, 40px) 0 0;
  border: var(--np-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.page-news .archive-strip img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .archive-strip figcaption{
  padding: 12px clamp(13px, 1.8vw, 18px);
  border-top: var(--np-rule);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 更新动态 ---------- */
.page-news .update-list{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--np-rule);
}
.page-news .update-list li{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: clamp(16px, 2.2vw, 24px) 0;
  border-bottom: var(--np-rule);
}
.page-news .update-when{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--orange);
}
.page-news .update-list h3{
  margin: 0 0 6px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--ink);
}
.page-news .update-list p{
  margin: 0;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}
.page-news .update-link{
  margin-top: 8px !important;
  font-size: 14px;
}
.page-news .update-link a{
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 243, 212, .35);
  transition: border-color .18s ease, color .18s ease;
}
.page-news .update-link a:hover,
.page-news .update-link a:focus-visible{
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- 结尾行动区 ---------- */
.page-news .news-cta{
  margin-top: clamp(44px, 6vw, 84px);
  padding: clamp(24px, 3.6vw, 42px);
  border: var(--np-rule);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(124, 243, 212, .08), transparent 58%),
    linear-gradient(180deg, rgba(12, 42, 32, .95), rgba(6, 20, 15, .95));
  box-shadow: var(--shadow);
}
.page-news .news-cta h2{
  margin: 0 0 12px;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--ink);
}
.page-news .news-cta p{
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}
.page-news .cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2.6vw, 28px);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px){
  .page-news .lane-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-news .lane:nth-child(2){
    transform: translateY(14px);
  }
  .page-news .league-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 34px) clamp(22px, 3vw, 40px);
  }
  .page-news .league-card:nth-child(3){
    grid-column: 1 / -1;
    max-width: 62ch;
  }
  .page-news .update-list li{
    grid-template-columns: 92px minmax(0, 1fr);
    gap: clamp(14px, 2vw, 26px);
  }
}

@media (min-width: 860px){
  .page-news .column-feature{
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }
}

@media (min-width: 960px){
  .page-news .news-shell{
    grid-template-columns: var(--np-rail) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 68px);
  }
  .page-news .news-rail{
    position: sticky;
    top: 96px;
    align-self: start;
  }
  .page-news .news-rail-list{
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    padding-top: 12px;
    border-top: var(--np-rule);
  }
  .page-news .archive-grid{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .page-news .lane:nth-child(2){
    transform: translateY(22px);
  }
}

@media (min-width: 1120px){
  .page-news .column-feature{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-news .lane:nth-child(2){
    transform: none;
  }
}