.page-news {
  --news-rail: 12.5rem;
  --news-line: var(--line);
  background: var(--pitch);
  color: var(--warm);
  padding-bottom: clamp(2rem, 6vw, 4rem);
}

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

.page-news .breadcrumb {
  padding-top: clamp(1rem, 3vw, 1.75rem);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.page-news .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--touchline);
}

.page-news .breadcrumb__link {
  color: var(--cool);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-news .breadcrumb__link:hover,
.page-news .breadcrumb__link:focus-visible {
  border-bottom-color: var(--grass);
}

/* ---------- 刊头 ---------- */
.news-masthead {
  position: relative;
  margin-top: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(2.25rem, 7vw, 4.5rem);
  border-top: 1px solid var(--news-line);
  border-bottom: 1px solid var(--news-line);
  background:
    linear-gradient(180deg, rgba(11, 36, 26, 0.94), rgba(6, 20, 15, 0.98)),
    repeating-linear-gradient(90deg, rgba(184, 255, 61, 0.07) 0 1px, transparent 1px 88px);
  overflow: hidden;
}

.news-masthead::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--grass), transparent 62%);
  opacity: 0.55;
}

.news-masthead__inner {
  display: grid;
  gap: 2rem;
}

.news-masthead__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 10vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0.6rem 0 0;
  color: var(--warm);
}

.news-masthead__lead {
  max-width: 54ch;
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.78;
  color: var(--cool);
}

.news-masthead__aside {
  border-left: 2px solid var(--grass);
  padding-left: 1.1rem;
}

.news-masthead__aside-label {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}

.news-masthead__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--warm);
}

.news-masthead__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.news-masthead__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--grass);
  font-variant-numeric: tabular-nums;
}

.news-masthead__aside-meta {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--mist);
}

/* ---------- 编辑推荐 ---------- */
.news-feature {
  padding-block: clamp(2.25rem, 6vw, 4rem);
  border-bottom: 1px solid var(--news-line);
}

.news-feature__grid {
  display: grid;
  gap: 1.75rem;
}

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

.news-feature__body h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 1rem;
  color: var(--warm);
}

.news-feature__excerpt {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cool);
}

.news-feature__link {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--grass);
  text-decoration: none;
  border-bottom: 1px solid var(--grass);
  padding-bottom: 0.15rem;
}

.news-feature__link:hover,
.news-feature__link:focus-visible {
  color: var(--warm);
  border-bottom-color: var(--warm);
}

/* ---------- 折叠摘要 ---------- */
.news-more {
  margin: 0.9rem 0 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.75rem;
}

.news-more__toggle {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--mist);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.news-more__toggle::-webkit-details-marker {
  display: none;
}

.news-more__toggle::before {
  content: "+";
  font-size: 0.95rem;
  color: var(--grass);
  line-height: 1;
}

.news-more[open] .news-more__toggle::before {
  content: "−";
}

.news-more__toggle:hover,
.news-more__toggle:focus-visible {
  color: var(--cool);
}

.news-more__body {
  margin-top: 0.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--touchline);
  color: var(--cool);
  font-size: 0.94rem;
  line-height: 1.8;
}

.news-more__body p {
  margin: 0 0 0.7rem;
}

.news-more__body p:last-child {
  margin-bottom: 0;
}

/* ---------- 分栏骨架 ---------- */
.news-split {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

.news-split {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.news-rail__inner {
  border-top: 1px solid var(--line-strong);
  padding-top: 0.9rem;
}

.news-rail__label {
  margin: 0 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}

.news-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.news-rail__link {
  display: block;
  padding-block: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--cool);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}

.news-rail__link:hover,
.news-rail__link:focus-visible {
  color: var(--grass);
  border-bottom-color: var(--grass);
}

.news-rail__note {
  margin: 1rem 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--mist);
}

/* ---------- 章节标题 ---------- */
.news-section {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.news-section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 0.9rem;
  row-gap: 0.3rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 0.5rem;
}

.page-news .section-index {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--touchline);
  font-weight: 700;
}

.news-section__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--warm);
}

.news-section__note {
  grid-column: 2;
  margin: 0;
  font-size: 0.78rem;
  color: var(--mist);
  letter-spacing: 0.02em;
}

/* ---------- 条目 ---------- */
.news-item {
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}

.news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.news-item__num {
  color: var(--grass);
  font-variant-numeric: tabular-nums;
}

.news-item__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--warm);
}

.news-item__excerpt {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--cool);
}

.news-item__link {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--grass);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.1rem;
}

.news-item__link:hover,
.news-item__link:focus-visible {
  color: var(--warm);
  border-bottom-color: var(--warm);
}

.news-item--lead {
  padding-block: 1.75rem;
}

.news-item--lead .news-item__title {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.news-item--media .news-item__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.news-item--media .news-item__thumb {
  margin-top: 1.1rem;
  border: 1px solid var(--line);
}

/* ---------- 专题系列 ---------- */
.news-series__grid {
  display: grid;
  gap: 1.5rem;
  padding-top: 0.9rem;
}

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

.news-series__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.news-series__item {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.75rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line-soft);
}

.news-series__item:first-child {
  border-top: 1px solid var(--line-soft);
}

.news-series__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--grass);
  padding-top: 0.15rem;
}

.news-series__name {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--warm);
}

.news-series__desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 更新节奏 ---------- */
.news-cadence__grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 0.9rem;
}

.news-cadence__cell {
  background: var(--stand);
  padding: 1.4rem 1.2rem;
}

.news-cadence__figure {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.news-cadence__name {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--warm);
}

.news-cadence__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--cool);
}

/* ---------- 下一步 ---------- */
.news-next {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 2px solid var(--grass);
  background: linear-gradient(160deg, var(--touchline), var(--pitch) 72%);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}

.news-next__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.6rem 0 0.9rem;
  color: var(--warm);
}

.news-next__text {
  max-width: 62ch;
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--cool);
}

.news-next__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.news-next__textlink {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--cool);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.1rem;
}

.news-next__textlink:hover,
.news-next__textlink:focus-visible {
  color: var(--grass);
  border-bottom-color: var(--grass);
}

/* ---------- 平板与桌面 ---------- */
@media (min-width: 860px) {
  .news-masthead__inner {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.7fr);
    align-items: end;
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .news-feature__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3rem);
  }

  .news-split {
    grid-template-columns: var(--news-rail) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .news-rail__inner {
    position: sticky;
    top: 6rem;
  }

  .news-item--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14.5rem;
    gap: 1.5rem;
    align-items: start;
  }

  .news-item--media .news-item__thumb {
    margin-top: 0;
  }

  .news-series__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
  }

  .news-cadence__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .news-item--lead .news-item__excerpt,
  .news-item__excerpt {
    max-width: 62ch;
  }
}


<main id="main-content" class="page-news">
  <div class="container">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">赛场首页</a></li>
        <li class="breadcrumb__item" aria-current="page">赛场笔记</li>
      </ol>
    </nav>
  </div>

  <header class="news-masthead">
    <div class="container news-masthead__inner">
      <div class="news-masthead__main">
        <p class="eyebrow">编辑部出品 · 每轮联赛后更新</p>
        <h1 class="news-masthead__title">赛场笔记</h1>
        <p class="news-masthead__lead">一场球看完，印象常常留不住。新利赛场的编辑组把每轮值得回看的片段写下来：控球率怎么分段、射门落在哪块区域、两场比赛怎样摆在同一张图上。你照着读一遍，下一轮就能自己动手拆。</p>
      </div>
      <aside class="news-masthead__aside">
        <p class="news-masthead__aside-label">笔记栏目</p>
        <ul class="news-masthead__list">
          <li class="news-masthead__item"><span class="news-masthead__num">01</span>入口指南</li>
          <li class="news-masthead__item"><span class="news-masthead__num">02</span>数据解读</li>
          <li class="news-masthead__item"><span class="news-masthead__num">03</span>双场复盘</li>
          <li class="news-masthead__item"><span class="news-masthead__num">04</span>版本维护</li>
          <li class="news-masthead__item"><span class="news-masthead__num">05</span>联赛观察</li>
        </ul>
        <p class="news-masthead__aside-meta">每周发布 3-5 篇，入口维护完成后加更</p>
      </aside>
    </div>
  </header>

  <section class="news-feature" id="featured" aria-labelledby="featured-title">
    <div class="container">
      <div class="news-feature__grid">
        <div class="news-feature__media">
          <div class="media-frame media-frame--wide">
            <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场边线与数据折线叠加的封面视觉，画面中没有人物">
            <p class="media-frame__caption">编辑推荐 · 双场复盘</p>
          </div>
        </div>
        <div class="news-feature__body" data-reveal="80">
          <p class="eyebrow">编辑推荐 · 本周更新</p>
          <h2 id="featured-title">两场比赛摆在一起，控球率才看得出差别</h2>
          <p class="news-feature__excerpt">同一晚的两场球，控球率都落在 46-60% 这一档，场面节奏却完全不同。这篇笔记把两场的区间分布、射门位置和中场休息前后的走势叠起来看，教你先找差异，再下判断。</p>
          <details class="news-more">
            <summary class="news-more__toggle">展开这三点读法</summary>
            <div class="news-more__body">
              <p>第一，把两场的控球率条按 0-30%、31-45%、46-60%、61-75%、76-100% 五档对齐，先比对各自停留最久的那一档。</p>
              <p>第二，切到 CN 射门统计，用禁区内与禁区外的拆分看谁把球送进了更危险的位置——控球多不等于威胁多。</p>
              <p>第三，记住中场休息后的第一个对照点，下一轮换两场球，你自己也能复现这套读法。</p>
            </div>
          </details>
          <a class="news-feature__link" href="/catalog/">打开双场数据视图</a>
        </div>
      </div>
    </div>
  </section>

  <div class="container news-split">
    <aside class="news-rail" aria-label="笔记索引">
      <div class="news-rail__inner">
        <p class="news-rail__label">本期目录</p>
        <ul class="news-rail__list">
          <li><a class="news-rail__link" href="#featured">01 编辑推荐</a></li>
          <li><a class="news-rail__link" href="#latest">02 最新条目</a></li>
          <li><a class="news-rail__link" href="#series">03 专题系列</a></li>
          <li><a class="news-rail__link" href="#cadence">04 更新节奏</a></li>
          <li><a class="news-rail__link" href="#next">05 下一步</a></li>
        </ul>
        <p class="news-rail__note">栏目署名分别为栏目编辑组、数据组与维护组。</p>
      </div>
    </aside>

    <div class="news-flow">
      <section class="news-section" id="latest" aria-labelledby="latest-title">
        <div class="news-section__head">
          <span class="section-index">02</span>
          <h2 id="latest-title" class="news-section__title">最新条目</h2>
          <p class="news-section__note">按发布时间由近到远排列</p>
        </div>

        <article class="news-item news-item--lead" data-reveal="0">
          <p class="news-item__meta">
            <span class="news-item__num">01</span>
            <span class="tag">方法</span>
            <span>本周更新</span>
          </p>
          <h3 class="news-item__title">双场控球率并排：把两场比赛读成一张图</h3>
          <p class="news-item__excerpt">选场是第一步：两场球可以来自不同联赛，但区间划分要一致，图才读得下去。我们从周末连看两场的习惯出发，讲清怎么把两组控球率拼到同一屏，以及单看一场为什么容易误判节奏。</p>
          <details class="news-more">
            <summary class="news-more__toggle">展开摘要</summary>
            <div class="news-more__body">
              <p>笔记里给出的顺序是：先定两场，再对齐五档区间，最后把射门位置叠上去。做到第三步，你会发现同样的控球时长，一侧在边线来回倒脚，另一侧已经压到禁区弧顶。</p>
            </div>
          </details>
          <a class="news-item__link" href="/catalog/">进入数据目录</a>
        </article>

        <article class="news-item news-item--lead news-item--media" data-reveal="60">
          <p class="news-item__meta">
            <span class="news-item__num">02</span>
            <span class="tag tag--amber">数据解读</span>
            <span>上轮联赛后</span>
          </p>
          <div class="news-item__body">
            <h3 class="news-item__title">CN 射门统计更新：射门区域与命中分布怎么看</h3>
            <p class="news-item__excerpt">射门总数、射正、禁区内与禁区外四项摆在一起看，热区图才不会变成装饰。这篇拆了三个常被忽略的读法：射正率被拉高时的假象、热区偏侧时的传球来源、以及命中分布与比分脱节的时刻。</p>
            <details class="news-more">
              <summary class="news-more__toggle">展开摘要</summary>
              <div class="news-more__body">
                <p>更新后，射门区域的色阶从三档细化为五档，高值用更暖的橙色标出。看的时候先找最深的那一块，再回头核对那几次射门来自定位球还是运动战。</p>
              </div>
            </details>
            <a class="news-item__link" href="/catalog/">查看射门视图</a>
          </div>
          <div class="news-item__thumb">
            <img src="{zhanqunpic:h:675w:1200}" width="1200" height="675" alt="控球率曲线与射门热区组合的抽象示意图" loading="lazy" decoding="async">
          </div>
        </article>

        <article class="news-item" data-reveal="0">
          <p class="news-item__meta">
            <span class="news-item__num">03</span>
            <span class="tag">版本</span>
            <span>维护后</span>
          </p>
          <h3 class="news-item__title">v3.2.1 入口索引调整说明：老用户路径不变</h3>
          <p class="news-item__excerpt">这一版动的是入口索引的排列和加载顺序，固定访问的路径原样保留。第一次来的读者从导航“赛事数据”栏目进入，注册后即可查看控球率区间与射门统计。</p>
          <a class="news-item__link" href="/guide/">查看入口指南</a>
        </article>

        <article class="news-item" data-reveal="60">
          <p class="news-item__meta">
            <span class="news-item__num">04</span>
            <span class="tag">场景</span>
            <span>周末专题</span>
          </p>
          <h3 class="news-item__title">周末连看两场：中场休息的 3 个数据对照点</h3>
          <p class="news-item__excerpt">十五分钟够看完三个数：控球率区间有没有跳档、射门位置往哪一侧偏、换人之后第一次推进从哪条边起。看完这三个点，下半场你会看得更清楚。</p>
          <a class="news-item__link" href="/catalog/">打开双场对照</a>
        </article>

        <article class="news-item news-item--media" data-reveal="0">
          <p class="news-item__meta">
            <span class="news-item__num">05</span>
            <span class="tag">维护</span>
            <span>赛季中段</span>
          </p>
          <div class="news-item__body">
            <h3 class="news-item__title">联赛切换视图稳定性维护记录</h3>
            <p class="news-item__excerpt">在英超、西甲、意甲、德甲、法甲、中超等 12 个联赛与杯赛之间来回切，筛选栏、图例和卡片位置都留在原处。这次维护重点处理了切换瞬间的高度回弹，读到一半不用重新找位置。</p>
            <a class="news-item__link" href="/brand/">了解数据方法</a>
          </div>
          <div class="news-item__thumb">
            <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="细线加载顺序与网格节点组成的维护记录配图" loading="lazy" decoding="async">
          </div>
        </article>

        <article class="news-item" data-reveal="60">
          <p class="news-item__meta">
            <span class="news-item__num">06</span>
            <span class="tag">指南</span>
            <span>长期置顶</span>
          </p>
          <h3 class="news-item__title">从控球率区间到比赛节奏：新手阅读路线</h3>
          <p class="news-item__excerpt">第一次进来不用先学统计：先认五个区间，再看射门落在哪，最后把两场摆在一起。这条路线长期置顶，配合累计 120 篇方法文章，从陌生读到熟练大概两三周。</p>
          <a class="news-item__link" href="/guide/">从第一步开始</a>
        </article>
      </section>

      <section class="news-section news-series" id="series" aria-labelledby="series-title">
        <div class="news-section__head">
          <span class="section-index">03</span>
          <h2 id="series-title" class="news-section__title">专题系列</h2>
          <p class="news-section__note">五个栏目，各管一段阅读路径</p>
        </div>
        <div class="news-series__grid">
          <div class="news-series__media">
            <div class="media-frame media-frame--tall">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="看台灯光虚化与草皮纹理交织的深绿氛围图" loading="lazy" decoding="async">
              <p class="media-frame__caption">专题系列 · 栏目集合</p>
            </div>
          </div>
          <ul class="news-series__list">
            <li class="news-series__item">
              <span class="news-series__num">01</span>
              <div>
                <h3 class="news-series__name">入口指南</h3>
                <p class="news-series__desc">第一次访问从哪进、注册后能看到什么、固定路径怎么记。适合刚接触平台、还在找门的新读者。</p>
              </div>
            </li>
            <li class="news-series__item">
              <span class="news-series__num">02</span>
              <div>
                <h3 class="news-series__name">数据解读</h3>
                <p class="news-series__desc">控球率区间、射门区域、命中分布的具体读法，一个指标一篇，读完就能对着视图练一遍。</p>
              </div>
            </li>
            <li class="news-series__item">
              <span class="news-series__num">03</span>
              <div>
                <h3 class="news-series__name">双场复盘</h3>
                <p class="news-series__desc">同一晚的两场球并排摆开，看节奏差异落在哪一段，是周末连看的人最常翻的栏目。</p>
              </div>
            </li>
            <li class="news-series__item">
              <span class="news-series__num">04</span>
              <div>
                <h3 class="news-series__name">版本维护</h3>
                <p class="news-series__desc">入口索引、加载顺序、视图稳定性的调整记录，写清改了什么、对你的使用有没有影响。</p>
              </div>
            </li>
            <li class="news-series__item">
              <span class="news-series__num">05</span>
              <div>
                <h3 class="news-series__name">联赛观察</h3>
                <p class="news-series__desc">不同联赛在赛季各阶段呈现出的数据特征，帮你带着背景去看一场球，而不是只盯着数字。</p>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section class="news-section news-cadence" id="cadence" aria-labelledby="cadence-title">
        <div class="news-section__head">
          <span class="section-index">04</span>
          <h2 id="cadence-title" class="news-section__title">更新节奏</h2>
          <p class="news-section__note">跟着联赛日程走</p>
        </div>
        <div class="news-cadence__grid">
          <div class="news-cadence__cell">
            <p class="news-cadence__figure">3-5</p>
            <h3 class="news-cadence__name">每周篇数</h3>
            <p class="news-cadence__text">联赛打完的第二天，数据解读和双场复盘先发；方法类文章隔天补齐。9 人编辑组排班，保证每轮都有东西可读。</p>
          </div>
          <div class="news-cadence__cell">
            <p class="news-cadence__figure">维护后</p>
            <h3 class="news-cadence__name">即时加更</h3>
            <p class="news-cadence__text">入口索引或视图有调整，当天补一篇说明，讲清变化落在哪里、你要不要多做一个动作。版本号写进标题，方便回头找。</p>
          </div>
          <div class="news-cadence__cell">
            <p class="news-cadence__figure">赛季节点</p>
            <h3 class="news-cadence__name">集中专题</h3>
            <p class="news-cadence__text">赛季中段和关键轮次前后，联赛观察集中发布。46 位长期供稿作者会在这段时间集中交稿，视角比平时更杂，也更耐读。</p>
          </div>
        </div>
      </section>

      <section class="news-next" id="next" aria-labelledby="next-title">
        <div class="news-next__inner" data-reveal="0">
          <p class="eyebrow">继续往前</p>
          <h2 id="next-title" class="news-next__title">读完笔记，动手看两场</h2>
          <p class="news-next__text">想直接上手，就去数据目录挑两场并排比一比；第一次来，入口指南会把进门路径和注册后的可查内容讲清楚。读到与数据不符的地方，把截图和访问路径发给编辑部，工作日 9:00-18:00 内会有回复。</p>
          <div class="news-next__actions">
            <a class="btn btn--accent" href="/catalog/">打开数据目录</a>
            <a class="btn btn--ghost" href="/guide/">阅读入口指南</a>
            <a class="news-next__textlink" href="/inquiry/">联系编辑部</a>
          </div>
        </div>
      </section>
    </div>
  </div>
</main>

.page-news {
  --news-rail: 12.5rem;
  background: var(--pitch);
  color: var(--warm);
  padding-bottom: clamp(2rem, 6vw, 4rem);
}

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

.page-news .breadcrumb {
  padding-top: clamp(1rem, 3vw, 1.75rem);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.page-news .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--touchline);
}

.page-news .breadcrumb__link {
  color: var(--cool);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-news .breadcrumb__link:hover,
.page-news .breadcrumb__link:focus-visible {
  border-bottom-color: var(--grass);
}

/* ---------------- 刊头 ---------------- */
.news-masthead {
  position: relative;
  margin-top: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(2.25rem, 7vw, 4.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(11, 36, 26, 0.94), rgba(6, 20, 15, 0.98)),
    repeating-linear-gradient(90deg, rgba(184, 255, 61, 0.07) 0 1px, transparent 1px 88px);
  overflow: hidden;
}

.news-masthead::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--grass), transparent 62%);
  opacity: 0.55;
}

.news-masthead__inner {
  display: grid;
  gap: 2rem;
}

.news-masthead__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 10vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0.6rem 0 0;
  color: var(--warm);
}

.news-masthead__lead {
  max-width: 54ch;
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.78;
  color: var(--cool);
}

.news-masthead__aside {
  border-left: 2px solid var(--grass);
  padding-left: 1.1rem;
}

.news-masthead__aside-label {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--mist);
}

.news-masthead__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--warm);
}

.news-masthead__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.news-masthead__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--grass);
  font-variant-numeric: tabular-nums;
}

.news-masthead__aside-meta {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--mist);
}

/* ---------------- 编辑推荐 ---------------- */
.news-feature {
  padding-block: clamp(2.25rem, 6vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.news-feature__grid {
  display: grid;
  gap: 1.75rem;
}

.news-feature__media img,
.news-series__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.news-feature__body h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 1rem;
  color: var(--warm);
}

.news-feature__excerpt {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cool);
}

.news-feature__link {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--grass);
  text-decoration: none;
  border-bottom: 1px solid var(--grass);
  padding-bottom: 0.15rem;
}

.news-feature__link:hover,
.news-feature__link:focus-visible {
  color: var(--warm);
  border-bottom-color: var(--warm);
}

/* ---------------- 折叠摘要 ---------------- */
.news-more {
  margin: 0.9rem 0 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.75rem;
}

.news-more__toggle {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--mist);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.news-more__toggle::-webkit-details-marker {
  display: none;
}

.news-more__toggle::before {
  content: "+";
  font-size: 0.95rem;
  line-height: 1;
  color: var(--grass);
}

.news-more[open] .news-more__toggle::before {
  content: "−";
}

.news-more__toggle:hover,
.news-more__toggle:focus-visible {
  color: var(--cool);
}

.news-more__body {
  margin-top: 0.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--touchline);
  color: var(--cool);
  font-size: 0.94rem;
  line-height: 1.8;
}

.news-more__body p {
  margin: 0 0 0.7rem;
}

.news-more__body p:last-child {
  margin-bottom: 0;
}

/* ---------------- 分栏骨架 ---------------- */
.news-split {
  display: grid;
  gap: 2rem;
  align-items: start;
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

.news-rail__inner {
  border-top: 1px solid var(--line-strong);
  padding-top: 0.9rem;
}

.news-rail__label {
  margin: 0 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--mist);
}

.news-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.news-rail__link {
  display: block;
  padding-block: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--cool);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}

.news-rail__link:hover,
.news-rail__link:focus-visible {
  color: var(--grass);
  border-bottom-color: var(--grass);
}

.news-rail__note {
  margin: 1rem 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--mist);
}

/* ---------------- 章节头 ---------------- */
.news-section {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.news-section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 0.9rem;
  row-gap: 0.3rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 0.5rem;
}

.page-news .section-index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--touchline);
}

.news-section__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--warm);
}

.news-section__note {
  grid-column: 2;
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--mist);
}

/* ---------------- 条目 ---------------- */
.news-item {
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}

.news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.news-item__num {
  color: var(--grass);
  font-variant-numeric: tabular-nums;
}

.news-item__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--warm);
}

.news-item__excerpt {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--cool);
}

.news-item__link {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--grass);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.1rem;
}

.news-item__link:hover,
.news-item__link:focus-visible {
  color: var(--warm);
  border-bottom-color: var(--warm);
}

.news-item--lead {
  padding-block: 1.75rem;
}

.news-item--lead .news-item__title {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.news-item--media .news-item__thumb {
  margin-top: 1.1rem;
  border: 1px solid var(--line);
}

.news-item--media .news-item__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---------------- 专题系列 ---------------- */
.news-series__grid {
  display: grid;
  gap: 1.5rem;
  padding-top: 0.9rem;
}

.news-series__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-series__item {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.75rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line-soft);
}

.news-series__item:first-child {
  border-top: 1px solid var(--line-soft);
}

.news-series__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--grass);
  padding-top: 0.15rem;
}

.news-series__name {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--warm);
}

.news-series__desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------------- 更新节奏 ---------------- */
.news-cadence__grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 0.9rem;
}

.news-cadence__cell {
  background: var(--stand);
  padding: 1.4rem 1.2rem;
}

.news-cadence__figure {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.news-cadence__name {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--warm);
}

.news-cadence__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--cool);
}

/* ---------------- 下一步 ---------------- */
.news-next {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 2px solid var(--grass);
  background: linear-gradient(160deg, var(--touchline), var(--pitch) 72%);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}

.news-next__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.6rem 0 0.9rem;
  color: var(--warm);
}

.news-next__text {
  max-width: 62ch;
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--cool);
}

.news-next__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.news-next__textlink {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--cool);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.1rem;
}

.news-next__textlink:hover,
.news-next__textlink:focus-visible {
  color: var(--grass);
  border-bottom-color: var(--grass);
}

/* ---------------- 平板与桌面 ---------------- */
@media (min-width: 860px) {
  .news-masthead__inner {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.7fr);
    align-items: end;
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .news-feature__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3rem);
  }

  .news-split {
    grid-template-columns: var(--news-rail) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .news-rail__inner {
    position: sticky;
    top: 6rem;
  }

  .news-item--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14.5rem;
    gap: 1.5rem;
    align-items: start;
  }

  .news-item--media .news-item__thumb {
    margin-top: 0;
  }

  .news-series__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
  }

  .news-cadence__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .news-item__excerpt,
  .news-feature__excerpt {
    max-width: 62ch;
  }
}