.page-news {
  --notes-gap: 18px;
}

.page-news .notes-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px) 0 clamp(44px, 7vw, 88px);
}

.page-news .notes-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 66% at 88% 6%, rgba(37, 244, 208, .16), transparent 68%),
    radial-gradient(42% 48% at 4% 92%, rgba(255, 107, 74, .1), transparent 72%);
  pointer-events: none;
}

.page-news .notes-hero__grid {
  position: relative;
  display: grid;
  gap: 34px;
  align-items: end;
}

.page-news .notes-hero__title {
  margin: 16px 0 0;
  font-size: var(--fs-h1);
  line-height: .92;
  letter-spacing: -.035em;
  font-weight: 900;
}

.page-news .notes-hero__intro {
  max-width: 46ch;
  margin: 22px 0 0;
  color: var(--paper);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.78;
  opacity: .84;
}

.page-news .notes-index {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 460px;
}

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

.page-news .notes-index a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 13px 2px;
  color: var(--paper);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .04em;
  transition: color .18s var(--ease), padding-left .18s var(--ease);
}

.page-news .notes-index a:hover,
.page-news .notes-index a:focus-visible {
  color: var(--fluor);
  padding-left: 8px;
}

.page-news .notes-index__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--fluor);
}

.page-news .notes-hero__media {
  position: relative;
  margin: 0;
  transform: rotate(-1.2deg);
}

.page-news .notes-hero__media .media-frame {
  border: 1px solid var(--line-strong);
}

.page-news .notes-hero__stamp {
  position: absolute;
  left: 18px;
  bottom: -16px;
  padding: 8px 16px;
  background: var(--coral);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
}

.page-news .notes-tags {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--trench);
}

.page-news .notes-tags__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-news .notes-tags__cue {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-news .notes-tags__list {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .notes-tag {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--line-strong);
  color: var(--mist);
  font-size: 13px;
  letter-spacing: .03em;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

.page-news .notes-tag.is-active {
  background: var(--fluor);
  border-color: var(--fluor);
  color: var(--abyss);
  font-weight: 700;
}

.page-news .notes-flow__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--notes-gap);
  margin-top: 30px;
}

.page-news .note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 20px;
  background: linear-gradient(180deg, rgba(8, 42, 48, .92), rgba(4, 24, 28, .96));
  border: 1px solid var(--line);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}

.page-news .note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--fluor);
  opacity: .8;
}

.page-news .note:hover {
  border-color: var(--line-strong);
  background: var(--deep);
  transform: translateY(-2px);
}

.page-news .note--with-media {
  padding: 0 0 20px;
  gap: 0;
}

.page-news .note__media {
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

.page-news .note__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 22px;
}

.page-news .note--with-media::before {
  z-index: 1;
}

.page-news .note__tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--fluor);
}

.page-news .note__title {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.32;
  letter-spacing: -.01em;
  font-weight: 900;
  color: var(--paper);
}

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

.page-news .note__text a {
  color: var(--fluor);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 244, 208, .4);
}

.page-news .note__text a:hover {
  border-bottom-color: var(--fluor);
}

.page-news .note__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--mist);
}

.page-news .note--with-media .note__meta {
  margin: 0;
}

.page-news .note__batch {
  position: relative;
  color: var(--coral);
  cursor: help;
}

.page-news .note__batch::after {
  content: "该批次内同时更新战报、射门与集锦三类内容，编号可在赛程页对照";
  position: absolute;
  left: 0;
  bottom: 150%;
  width: 208px;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-ink);
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 4;
}

.page-news .note__batch:hover::after,
.page-news .note__batch:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-news .notes-picks__rail {
  display: flex;
  gap: var(--notes-gap);
  margin-top: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

.page-news .pick {
  flex: 0 0 82%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
  border-left: 3px solid var(--coral);
  min-height: 260px;
}

.page-news .pick__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--coral-deep);
}

.page-news .pick__title {
  margin: 0;
  font-size: clamp(20px, 2.5vw, 27px);
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 900;
}

.page-news .pick--lead .pick__title {
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.2;
}

.page-news .pick__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
}

.page-news .pick__meta {
  display: flex;
  gap: 14px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
}

.page-news .notes-archive {
  background: var(--trench);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-news .notes-archive__grid {
  display: grid;
  gap: 34px;
}

.page-news .notes-archive__title {
  margin: 14px 0 0;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.14;
  letter-spacing: -.02em;
  font-weight: 900;
  color: var(--paper);
}

.page-news .notes-archive__text {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 46ch;
}

.page-news .notes-archive__filters {
  display: grid;
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.page-news .filter-group__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--mist);
}

.page-news .filter-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .filter-chip {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  white-space: nowrap;
}

.page-news .notes-archive__aside-link {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-news .notes-archive__aside-link a {
  color: var(--fluor);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 244, 208, .4);
}

.page-news .notes-archive__band {
  border: 1px solid var(--line);
  background: rgba(4, 24, 28, .55);
}

.page-news .notes-archive__note {
  margin: 20px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-news .notes-archive__note a {
  color: var(--fluor);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 244, 208, .4);
}

.page-news .notes-return__inner {
  display: grid;
  gap: 28px;
  padding: clamp(26px, 4vw, 44px);
  background:
    linear-gradient(140deg, rgba(14, 59, 67, .95), rgba(4, 24, 28, .98)),
    var(--deep);
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
}

.page-news .notes-return__inner::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(37, 244, 208, .22);
  border-radius: 50%;
  pointer-events: none;
}

.page-news .notes-return__title {
  margin: 14px 0 0;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 900;
  color: var(--paper);
}

.page-news .notes-return__text {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-news .notes-return__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-news .notes-return__panel {
  padding: 22px;
  background: var(--paper);
  color: var(--ink);
  border-left: 4px solid var(--coral);
}

.page-news .notes-return__panel-title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.01em;
}

.page-news .notes-return__panel-text {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.78;
}

.page-news .notes-return__links {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-ink);
  display: grid;
  gap: 8px;
}

.page-news .notes-return__links a {
  color: var(--coral-deep);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 58, 34, .32);
}

.page-news .notes-return__links a:hover {
  border-bottom-color: var(--coral-deep);
}

@media (min-width: 720px) {
  .page-news .notes-flow__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-news .pick {
    flex: 0 0 46%;
  }

  .page-news .notes-return__inner {
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-news .notes-hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: 52px;
  }

  .page-news .notes-flow__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
  }

  .page-news .note--w4 { grid-column: span 4; }
  .page-news .note--w5 { grid-column: span 5; }
  .page-news .note--w6 { grid-column: span 6; }
  .page-news .note--w7 { grid-column: span 7; }

  .page-news .notes-picks__rail {
    overflow-x: visible;
    flex-wrap: nowrap;
  }

  .page-news .pick {
    flex: 0 0 30%;
  }

  .page-news .pick--lead {
    flex: 0 0 38%;
  }

  .page-news .notes-archive__grid {
    grid-template-columns: 340px 1fr;
    gap: 56px;
  }

  .page-news .notes-archive__side {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .note,
  .page-news .notes-index a,
  .page-news .note__batch::after {
    transition: none;
  }

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

  .page-news .notes-hero__media {
    transform: none;
  }
}


<main id="main-content" class="page-news">
  <div class="wrap">
    <nav class="breadcrumb" aria-label="页面位置">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
        <li class="breadcrumb__item"><span aria-current="page">赛事笔记</span></li>
      </ol>
    </nav>
  </div>

  <section class="notes-hero" data-reveal>
    <div class="wrap notes-hero__grid">
      <div class="notes-hero__lead">
        <p class="eyebrow">赛事笔记 / MATCH NOTES</p>
        <h1 class="notes-hero__title">终场之后，<br>比分之外</h1>
        <p class="notes-hero__intro">一场球踢完，比分只是第一层信息。换人在第几分钟真正生效、射门集中在哪里、防线为什么整体后撤了半条线——这些细节决定你下回看同一支队伍时能看懂多少。浩瀚体育投注把战报、集锦、射门热区和球队近5场的变化写成可以反复翻看的笔记，赛后想弄明白的地方，顺着读下来就有答案。</p>
        <ul class="notes-index">
          <li><a href="#entry-flow"><span class="notes-index__num">01</span><span>本期条目</span></a></li>
          <li><a href="#editors-pick"><span class="notes-index__num">02</span><span>编辑精选</span></a></li>
          <li><a href="#archive"><span class="notes-index__num">03</span><span>批次归档</span></a></li>
        </ul>
      </div>
      <figure class="notes-hero__media">
        <div class="media-frame media-frame--wide">
          <img class="media-frame__img" src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="进球、换人与射门节点组成的时间轴抽象图">
          <figcaption class="media-frame__caption">关键事件时间轴</figcaption>
        </div>
        <div class="notes-hero__stamp">本期专题 · 攻防转换</div>
      </figure>
    </div>
  </section>

  <section class="notes-tags" aria-label="笔记类型">
    <div class="wrap notes-tags__inner">
      <span class="notes-tags__cue">按类型看</span>
      <ul class="notes-tags__list">
        <li><span class="notes-tag is-active">战报拆解</span></li>
        <li><span class="notes-tag">集锦剪辑</span></li>
        <li><span class="notes-tag">射门热区</span></li>
        <li><span class="notes-tag">球队近5场</span></li>
        <li><span class="notes-tag">通道说明</span></li>
      </ul>
    </div>
  </section>

  <section id="entry-flow" class="section notes-flow" data-reveal>
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">条目流</p>
        <h2 class="section-head__title">最近几个批次里，值得一读的九篇</h2>
        <p class="section-head__lead">每篇笔记都带类型标签、更新批次和大致阅读时长。读到一半被打断也不要紧，按批次号回到归档区，还能把上下文接回来。</p>
      </div>

      <div class="notes-flow__grid">
        <article class="note note--w5">
          <p class="note__tag">战报拆解</p>
          <h3 class="note__title">三次换人之后，中场为什么反而更挤</h3>
          <p class="note__text">一支球队在比赛后段连续调整中场，控球比例升上去了，向前推进的距离却没变。把这段时间的关键事件按分钟摊开，问题出在两个位置的活动区域重叠上。</p>
          <p class="note__meta"><span>最近批次</span><span class="note__batch">批次 B-2412</span><span>约 7 分钟</span></p>
        </article>

        <article class="note note--w7 note--with-media">
          <div class="media-frame note__media">
            <img class="media-frame__img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间剪辑台、视频时间线与集锦片段的无人场景" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">集锦剪辑台</figcaption>
          </div>
          <div class="note__body">
            <p class="note__tag">集锦剪辑</p>
            <h3 class="note__title">八分钟集锦里，藏着一场逆转的全部转折</h3>
            <p class="note__text">官方信号与自制剪辑两条线并行，同一场球能看到两种讲法：一条顺着时间走，一条按威胁大小重排。单场集锦通常控制在 3 到 8 分钟，取舍本身也是一种判断。</p>
            <p class="note__meta"><span>上轮赛后</span><span class="note__batch">批次 B-2411</span><span>约 6 分钟观看</span></p>
          </div>
        </article>

        <article class="note note--w7 note--with-media">
          <div class="media-frame note__media">
            <img class="media-frame__img" src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="球场网格上的射门热区与轨迹线抽象图" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">射门热区分布</figcaption>
          </div>
          <div class="note__body">
            <p class="note__tag">射门热区</p>
            <h3 class="note__title">禁区外起脚，收益和代价写在同一张图上</h3>
            <p class="note__text">射门总数、射正、禁区内射门、反击射门与定位球射门五个维度叠在一起看，热区才会告诉你哪一脚是合理选择、哪一脚只是把球权提前交出去。</p>
            <p class="note__meta"><span>最近批次</span><span class="note__batch">批次 B-2412</span><span>约 9 分钟</span></p>
          </div>
        </article>

        <article class="note note--w5 note--with-media">
          <div class="media-frame note__media">
            <img class="media-frame__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="五段式状态条与攻防对比的抽象信息图" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">近5场状态带</figcaption>
          </div>
          <div class="note__body">
            <p class="note__tag">球队近5场</p>
            <h3 class="note__title">五场看下来，防线的位置感在往回缩</h3>
            <p class="note__text">把最近五场的攻防数据排成一条状态带，起伏出现在哪个半场、哪一次轮换之后，一眼就能看出来。</p>
            <p class="note__meta"><span>本周专题</span><span class="note__batch">批次 B-2409</span><span>约 5 分钟</span></p>
          </div>
        </article>

        <article class="note note--w4">
          <p class="note__tag">通道说明</p>
          <h3 class="note__title">换了设备，旧入口打不开先看这三步</h3>
          <p class="note__text">网络环境、系统版本、缓存清理依次排查，多数情况不用卸载重装。入口异常时可以走备用通道，具体步骤见<a href="/help-center/">帮助中心的分步说明</a>，移动端安装看<a href="/apps/">应用中心</a>。</p>
          <p class="note__meta"><span>最近批次</span><span class="note__batch">批次 B-2412</span><span>约 4 分钟</span></p>
        </article>

        <article class="note note--w4">
          <p class="note__tag">战报拆解</p>
          <h3 class="note__title">定位球丢分，集中在哪一段时间</h3>
          <p class="note__text">把整季的定位球失分按比赛阶段归类，补时前后的注意力分配有明显差别，防守站位的调整往往慢半拍。</p>
          <p class="note__meta"><span>上轮赛后</span><span class="note__batch">批次 B-2411</span><span>约 6 分钟</span></p>
        </article>

        <article class="note note--w4">
          <p class="note__tag">射门热区</p>
          <h3 class="note__title">射正率高，不等于射门选得对</h3>
          <p class="note__text">射正率只是一层。反击射门的转化和禁区内的触球次数放在一起，才看得出进攻效率是真的高，还是被样本撑起来的。</p>
          <p class="note__meta"><span>近三期批次</span><span class="note__batch">批次 B-2410</span><span>约 8 分钟</span></p>
        </article>

        <article class="note note--w6">
          <p class="note__tag">集锦剪辑</p>
          <h3 class="note__title">被剪掉的那十分钟，往往决定了比赛</h3>
          <p class="note__text">受时长限制，集锦里最先消失的是无球跑动和防线整体移动。我们在文字里把这段补回来，配合时间轴一起读，画面之外的因果才接得上。</p>
          <p class="note__meta"><span>本周专题</span><span class="note__batch">批次 B-2409</span><span>约 7 分钟</span></p>
        </article>

        <article class="note note--w6">
          <p class="note__tag">球队近5场</p>
          <h3 class="note__title">轮换阵容下，两个边的推进差距</h3>
          <p class="note__text">同一套战术，两翼执行出来的结果可能完全相反。五场样本足够看出谁在承担更多向前的传递、谁在回撤补位。</p>
          <p class="note__meta"><span>上轮赛后</span><span class="note__batch">批次 B-2411</span><span>约 5 分钟</span></p>
        </article>
      </div>
    </div>
  </section>

  <section id="editors-pick" class="section notes-picks" data-reveal>
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">编辑精选</p>
        <h2 class="section-head__title">三篇值得放慢速度读的长文</h2>
        <p class="section-head__lead">不追热点，只挑那些看完能改变你看球角度的话题：赛程怎么影响体能，射门图怎么读，五场对比里哪一列最容易被跳过。</p>
      </div>
      <div class="notes-picks__rail">
        <article class="pick pick--lead surface-paper">
          <p class="pick__kicker">赛程观察</p>
          <h3 class="pick__title">赛程密度堆到第三周，体能拐点会先从哪个位置冒出来</h3>
          <p class="pick__text">连续作战最先垮掉的往往不是跑动最多的中场，而是需要反复回追的边后卫。我们把一段密集赛程拆成开赛时间、比赛场地与恢复间隔三层，看疲劳怎么一步步传导到失球上。读懂这条线，你排下一场的观赛计划也会更有数。</p>
          <p class="pick__meta"><span>约 12 分钟</span><span>专题长文</span></p>
        </article>
        <article class="pick surface-paper">
          <p class="pick__kicker">射门分布</p>
          <h3 class="pick__title">射门热区的五种读法，多数人只用了第一种</h3>
          <p class="pick__text">热区不是越红越好。射正、禁区内外、反击与定位球分开看，同一块红区可能意味着高效，也可能意味着一支队伍只剩远射这一条路。</p>
          <p class="pick__meta"><span>约 9 分钟</span><span>方法论</span></p>
        </article>
        <article class="pick surface-paper">
          <p class="pick__kicker">状态对比</p>
          <h3 class="pick__title">近5场对比里，最容易被忽略的那一列</h3>
          <p class="pick__text">多数人先看进球和失球，其实被压迫下的出球成功率更能说明一支队伍最近是稳住了还是在硬撑。五场样本不算长，却足够暴露趋势。</p>
          <p class="pick__meta"><span>约 8 分钟</span><span>对比观察</span></p>
        </article>
      </div>
    </div>
  </section>

  <section id="archive" class="section notes-archive" data-reveal>
    <div class="wrap notes-archive__grid">
      <aside class="notes-archive__side">
        <p class="eyebrow">批次归档</p>
        <h2 class="notes-archive__title">往回翻，也翻得到</h2>
        <p class="notes-archive__text">赛季初看过的战报、上个月那场争议判罚的射门图，都能按联赛、球队和批次找回来。同一场比赛至少保留三个历史数据批次，赛季结束再回看也丢不了线索。</p>
        <div class="notes-archive__filters">
          <div class="filter-group">
            <p class="filter-group__label">联赛</p>
            <ul class="filter-group__list">
              <li><span class="filter-chip">欧洲五大联赛</span></li>
              <li><span class="filter-chip">国内杯赛</span></li>
              <li><span class="filter-chip">综合体育赛事</span></li>
            </ul>
          </div>
          <div class="filter-group">
            <p class="filter-group__label">球队</p>
            <ul class="filter-group__list">
              <li><span class="filter-chip">常跟的球队</span></li>
              <li><span class="filter-chip">本赛季交手对手</span></li>
            </ul>
          </div>
          <div class="filter-group">
            <p class="filter-group__label">批次</p>
            <ul class="filter-group__list">
              <li><span class="filter-chip">B-2412</span></li>
              <li><span class="filter-chip">B-2411</span></li>
              <li><span class="filter-chip">B-2410</span></li>
            </ul>
          </div>
        </div>
        <p class="notes-archive__aside-link">想了解这些内容是怎么从编辑部走出来的，可以看<a href="/introduction/">平台介绍</a>里编辑与复核流程那一节。</p>
      </aside>

      <div class="notes-archive__main">
        <div class="data-band notes-archive__band">
          <div class="data-band__row">
            <span class="data-band__key">赛季字典</span>
            <span class="data-band__val">52 项联赛与杯赛 · 38 个国家和地区</span>
          </div>
          <div class="data-band__row">
            <span class="data-band__key">单场归档</span>
            <span class="data-band__val">保留 3 个历史数据批次</span>
          </div>
          <div class="data-band__row">
            <span class="data-band__key">每日更新</span>
            <span class="data-band__val">4 个内容批次 · 重大比赛日 8 个</span>
          </div>
          <div class="data-band__row">
            <span class="data-band__key">集锦时长</span>
            <span class="data-band__val">单场 3–8 分钟</span>
          </div>
          <div class="data-band__row">
            <span class="data-band__key">射门维度</span>
            <span class="data-band__val">总数 / 射正 / 禁区 / 反击 / 定位球</span>
          </div>
          <div class="data-band__row">
            <span class="data-band__key">笔记存量</span>
            <span class="data-band__val">战报 4.6 万篇 · 集锦 1.8 万条</span>
          </div>
        </div>
        <p class="notes-archive__note">批次号标在每篇笔记的页脚位置，和赛程页、球队页上看到的编号对得上。翻不到对应批次的时候，把截图发到<a href="/contact/">联系我们</a>里的客服邮箱，工作日会有人帮你定位。</p>
      </div>
    </div>
  </section>

  <section class="section notes-return" data-reveal>
    <div class="wrap notes-return__inner">
      <div class="notes-return__copy">
        <p class="eyebrow">回访入口</p>
        <h2 class="notes-return__title">读完笔记，下一场还在等你</h2>
        <p class="notes-return__text">长期跟球队的球迷查赛程，通常先对一遍开赛时间，再翻最近五场看状态。首页的赛程条能按联赛、球队和比赛周把下一场排出来，开赛时间、场地、转播信号和数据批次排在同一行；读完赛后笔记再回赛程，前后就对上了。</p>
        <div class="notes-return__actions">
          <a class="btn btn--coral" href="/">查询赛程</a>
          <a class="btn btn--ghost" href="/help-center/">打开排查卡片</a>
        </div>
      </div>
      <div class="notes-return__panel">
        <p class="notes-return__panel-title">换个入口，照样读得到</p>
        <p class="notes-return__panel-text">iOS 设备打不开、页面进不去、装到一半卡住，帮助中心按网络环境、系统版本、证书信任与缓存分成五步排查；应用中心的兼容列表写着 iOS 14 与 Android 9 以上的安装说明。</p>
        <ul class="notes-return__links">
          <li><a href="/apps/">新版通道 V2.0 与安装说明</a></li>
          <li><a href="/help-center/">赛事页面进入异常排查</a></li>
          <li><a href="/contact/">客服邮箱与工作日咨询</a></li>
        </ul>
      </div>
    </div>
  </section>
</main>

.page-news {
  --notes-gap: 18px;
}

.page-news .notes-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px) 0 clamp(44px, 7vw, 88px);
}

.page-news .notes-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 66% at 88% 6%, rgba(37, 244, 208, .16), transparent 68%),
    radial-gradient(42% 48% at 4% 92%, rgba(255, 107, 74, .1), transparent 72%);
  pointer-events: none;
}

.page-news .notes-hero__grid {
  position: relative;
  display: grid;
  gap: 40px;
  align-items: end;
}

.page-news .notes-hero__title {
  margin: 16px 0 0;
  font-size: var(--fs-h1);
  line-height: .92;
  letter-spacing: -.035em;
  font-weight: 900;
}

.page-news .notes-hero__intro {
  max-width: 46ch;
  margin: 22px 0 0;
  color: var(--paper);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.78;
  opacity: .86;
}

.page-news .notes-index {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 460px;
}

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

.page-news .notes-index a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 13px 2px;
  color: var(--paper);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .04em;
  transition: color .18s var(--ease), padding-left .18s var(--ease);
}

.page-news .notes-index a:hover,
.page-news .notes-index a:focus-visible {
  color: var(--fluor);
  padding-left: 8px;
}

.page-news .notes-index__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--fluor);
}

.page-news .notes-hero__media {
  position: relative;
  margin: 0;
  transform: rotate(-1.2deg);
}

.page-news .notes-hero__media .media-frame {
  border: 1px solid var(--line-strong);
}

.page-news .notes-hero__stamp {
  position: absolute;
  left: 16px;
  bottom: -15px;
  padding: 8px 18px;
  background: var(--coral);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
}

.page-news .notes-tags {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--trench);
}

.page-news .notes-tags__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-news .notes-tags__cue {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-news .notes-tags__list {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .notes-tag {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--line-strong);
  color: var(--mist);
  font-size: 13px;
  letter-spacing: .03em;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

.page-news .notes-tag.is-active {
  background: var(--fluor);
  border-color: var(--fluor);
  color: var(--abyss);
  font-weight: 700;
}

.page-news .notes-flow__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--notes-gap);
  margin-top: 30px;
}

.page-news .note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 20px;
  background: linear-gradient(180deg, rgba(8, 42, 48, .92), rgba(4, 24, 28, .96));
  border: 1px solid var(--line);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}

.page-news .note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--fluor);
  opacity: .8;
}

.page-news .note:hover {
  border-color: var(--line-strong);
  background: var(--deep);
  transform: translateY(-2px);
}

.page-news .note--with-media {
  padding: 0 0 20px;
  gap: 0;
}

.page-news .note__media {
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

.page-news .note__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 22px;
}

.page-news .note--with-media::before {
  z-index: 1;
}

.page-news .note__tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--fluor);
}

.page-news .note__title {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.32;
  letter-spacing: -.01em;
  font-weight: 900;
  color: var(--paper);
}

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

.page-news .note__text a {
  color: var(--fluor);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 244, 208, .4);
}

.page-news .note__text a:hover {
  border-bottom-color: var(--fluor);
}

.page-news .note__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--mist);
}

.page-news .note--with-media .note__meta {
  margin: 0;
}

.page-news .note__batch {
  position: relative;
  color: var(--coral);
  cursor: help;
}

.page-news .note__batch::after {
  content: "该批次内同时更新战报、射门与集锦三类内容，编号可在赛程页对照";
  position: absolute;
  left: 0;
  bottom: 150%;
  width: 208px;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-ink);
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 4;
}

.page-news .note__batch:hover::after,
.page-news .note__batch:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-news .notes-picks__rail {
  display: flex;
  gap: var(--notes-gap);
  margin-top: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

.page-news .pick {
  flex: 0 0 84%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
  border-left: 3px solid var(--coral);
  min-height: 250px;
}

.page-news .pick__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--coral-deep);
}

.page-news .pick__title {
  margin: 0;
  font-size: clamp(20px, 2.5vw, 27px);
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 900;
}

.page-news .pick--lead .pick__title {
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.18;
}

.page-news .pick__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
}

.page-news .pick__meta {
  display: flex;
  gap: 14px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
}

.page-news .notes-archive {
  background: var(--trench);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-news .notes-archive__grid {
  display: grid;
  gap: 34px;
}

.page-news .notes-archive__title {
  margin: 14px 0 0;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.14;
  letter-spacing: -.02em;
  font-weight: 900;
  color: var(--paper);
}

.page-news .notes-archive__text {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 46ch;
}

.page-news .notes-archive__filters {
  display: grid;
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.page-news .filter-group__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--mist);
}

.page-news .filter-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .filter-chip {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  white-space: nowrap;
}

.page-news .notes-archive__aside-link {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-news .notes-archive__aside-link a {
  color: var(--fluor);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 244, 208, .4);
}

.page-news .notes-archive__band {
  border: 1px solid var(--line);
  background: rgba(4, 24, 28, .55);
}

.page-news .notes-archive__note {
  margin: 20px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-news .notes-archive__note a {
  color: var(--fluor);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 244, 208, .4);
}

.page-news .notes-return__inner {
  display: grid;
  gap: 28px;
  padding: clamp(26px, 4vw, 44px);
  background: linear-gradient(140deg, rgba(14, 59, 67, .95), rgba(4, 24, 28, .98));
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
}

.page-news .notes-return__inner::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(37, 244, 208, .22);
  border-radius: 50%;
  pointer-events: none;
}

.page-news .notes-return__title {
  margin: 14px 0 0;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 900;
  color: var(--paper);
}

.page-news .notes-return__text {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-news .notes-return__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-news .notes-return__panel {
  padding: 22px;
  background: var(--paper);
  color: var(--ink);
  border-left: 4px solid var(--coral);
  position: relative;
  z-index: 1;
}

.page-news .notes-return__panel-title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.01em;
}

.page-news .notes-return__panel-text {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.78;
}

.page-news .notes-return__links {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-ink);
  display: grid;
  gap: 8px;
}

.page-news .notes-return__links a {
  color: var(--coral-deep);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 58, 34, .32);
}

.page-news .notes-return__links a:hover {
  border-bottom-color: var(--coral-deep);
}

@media (min-width: 720px) {
  .page-news .notes-flow__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-news .pick {
    flex: 0 0 46%;
  }

  .page-news .notes-return__inner {
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-news .notes-hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: 52px;
  }

  .page-news .notes-flow__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
  }

  .page-news .note--w4 { grid-column: span 4; }
  .page-news .note--w5 { grid-column: span 5; }
  .page-news .note--w6 { grid-column: span 6; }
  .page-news .note--w7 { grid-column: span 7; }

  .page-news .notes-picks__rail {
    overflow-x: visible;
  }

  .page-news .pick {
    flex: 0 0 30%;
  }

  .page-news .pick--lead {
    flex: 0 0 38%;
  }

  .page-news .notes-archive__grid {
    grid-template-columns: 340px 1fr;
    gap: 56px;
  }

  .page-news .notes-archive__side {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .note,
  .page-news .notes-index a,
  .page-news .note__batch::after {
    transition: none;
  }

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

  .page-news .notes-hero__media {
    transform: none;
  }
}