.page-news {
  --news-rule: rgba(152, 164, 169, .28);
  --news-on-dark: rgba(245, 239, 226, .86);
  --news-on-dark-dim: rgba(245, 239, 226, .64);
  --news-ink-soft: rgba(36, 28, 22, .78);
  --news-lift: 18px;

  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
}

.page-news .section {
  padding-block: 48px;
}

@media (min-width: 900px) {
  .page-news .section {
    padding-block: 72px;
  }
}

/* ---------- 首屏 ---------- */

.page-news .news-top {
  padding-block: 32px 40px;
  background: var(--cream);
}

@media (min-width: 900px) {
  .page-news .news-top {
    padding-block: 48px 64px;
  }
}

.page-news .crumbs {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--steel);
}

.page-news .crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.page-news .crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--hairline);
}

.page-news .crumbs a {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.page-news .crumbs a:hover {
  color: var(--ink);
  border-color: var(--mint);
}

.page-news .news-top__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 22px;
}

@media (min-width: 900px) {
  .page-news .news-top__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: start;
  }
}

.page-news .news-top__text h1 {
  font-family: var(--font-narrow);
  font-size: clamp(40px, 9vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 12px 0 18px;
  color: var(--ink);
}

.page-news .news-top__text .lede {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 34em;
}

.page-news .news-top__text > p {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--news-ink-soft);
  margin: 0 0 14px;
  max-width: 36em;
}

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

.page-news .news-top__meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--steel);
  margin-top: 18px;
}

.page-news .news-top__media {
  margin: 0;
}

.page-news .news-top__media .media__frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-dim);
}

.page-news .news-top__media .media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-news .news-top__media .media__caption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--steel);
  margin-top: 10px;
  line-height: 1.6;
}

/* ---------- 比赛日节奏 ---------- */

.page-news .news-rhythm {
  background: var(--night);
  color: var(--cream);
  position: relative;
}

.page-news .news-rhythm::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--hairline);
}

.page-news .news-rhythm .eyebrow {
  color: var(--mint);
}

.page-news .news-rhythm h2 {
  font-family: var(--font-narrow);
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--cream);
  margin: 10px 0 14px;
}

.page-news .news-rhythm__lede {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--news-on-dark);
  max-width: 38em;
  margin: 0;
}

.page-news .rhythm-track {
  list-style: none;
  margin: 34px 0 0;
  padding: 0 0 0 20px;
  border-left: 1px solid rgba(52, 224, 192, .35);
}

@media (min-width: 820px) {
  .page-news .rhythm-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    border-left: 0;
    border-top: 1px solid rgba(52, 224, 192, .35);
  }
}

.page-news .rhythm-track__item {
  position: relative;
  padding: 22px 0 22px 18px;
}

.page-news .rhythm-track__item + .rhythm-track__item {
  border-top: 1px solid var(--hairline);
}

.page-news .rhythm-track__item::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(52, 224, 192, .16);
  left: -25px;
  top: 30px;
}

@media (min-width: 820px) {
  .page-news .rhythm-track__item {
    padding: 28px 26px 8px 24px;
    border-top: 0;
  }

  .page-news .rhythm-track__item + .rhythm-track__item {
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }

  .page-news .rhythm-track__item::before {
    left: 24px;
    top: -5px;
  }
}

.page-news .rhythm-track__time {
  display: block;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .06em;
  color: var(--lamp);
  margin-bottom: 10px;
}

.page-news .rhythm-track__item h3 {
  font-family: var(--font-narrow);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cream);
  margin: 0 0 8px;
}

.page-news .rhythm-track__item p {
  font-size: 15px;
  line-height: 1.74;
  color: var(--news-on-dark-dim);
  margin: 0;
}

/* ---------- 四个系列 ---------- */

.page-news #series {
  background: var(--cream);
}

.page-news #series h2 {
  font-family: var(--font-narrow);
  font-size: clamp(26px, 4.2vw, 36px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--ink);
  margin: 10px 0 0;
}

.page-news .series-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

@media (min-width: 700px) {
  .page-news .series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

.page-news .series-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 20px;
  background: var(--cream-dim);
  border-radius: var(--radius);
  border-top: 3px solid var(--brick);
}

.page-news .series-card--read {
  border-top-color: var(--mint);
}

.page-news .series-card--venue {
  border-top-color: var(--orange);
}

.page-news .series-card--update {
  border-top-color: var(--steel);
}

.page-news .series-card .tag {
  align-self: flex-start;
}

.page-news .series-card h3 {
  font-family: var(--font-narrow);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.page-news .series-card p {
  font-size: 15px;
  line-height: 1.72;
  color: var(--news-ink-soft);
  margin: 0;
}

.page-news .series-card__freq {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--news-rule);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--steel);
}

/* ---------- 手记列表 ---------- */

.page-news .notes-wrap {
  background: var(--cream);
  position: relative;
}

.page-news .notes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--news-rule);
}

.page-news .notes-head h2 {
  font-family: var(--font-narrow);
  font-size: clamp(26px, 4.2vw, 36px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--ink);
  margin: 8px 0 0;
}

.page-news .notes-head__count {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--steel);
  margin: 0 0 4px;
}

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

.page-news .note {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 26px 0;
  border-bottom: 1px solid var(--news-rule);
}

@media (min-width: 760px) {
  .page-news .note {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 22px;
    padding: 34px 0;
  }
}

.page-news .note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 3px;
  border-radius: 2px;
  background: var(--mint);
  opacity: 0;
  transition: opacity .22s var(--ease);
}

@media (min-width: 760px) {
  .page-news .note::before {
    top: 34px;
    bottom: 34px;
  }
}

.page-news .note:hover::before,
.page-news .note:focus-within::before {
  opacity: 1;
}

.page-news .note__index {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--steel);
  padding-top: 4px;
}

.page-news .note__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.page-news .note__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--steel);
  white-space: nowrap;
}

.page-news .note__title {
  font-family: var(--font-narrow);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 8px;
}

@media (min-width: 760px) {
  .page-news .note__title {
    font-size: 23px;
  }
}

.page-news .note__excerpt {
  font-size: 15.5px;
  line-height: 1.74;
  color: var(--news-ink-soft);
  margin: 0;
  max-width: 46em;
}

.page-news .note--lead {
  padding-top: 30px;
  padding-bottom: 36px;
  background: linear-gradient(180deg, rgba(230, 220, 200, .45), rgba(230, 220, 200, 0));
}

.page-news .note--lead .note__title {
  font-size: 24px;
}

@media (min-width: 760px) {
  .page-news .note--lead .note__title {
    font-size: 30px;
  }
}

.page-news .note__figure {
  margin: 18px 0 0;
  max-width: 100%;
}

.page-news .note__figure .media__frame {
  aspect-ratio: 20 / 13;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--cream-dim);
}

.page-news .note--lead .note__figure .media__frame {
  aspect-ratio: 20 / 11;
}

@media (min-width: 900px) {
  .page-news .note--lead .note__figure .media__frame {
    aspect-ratio: 20 / 8;
  }
}

.page-news .note__figure .media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 编辑推荐 ---------- */

.page-news .picks {
  background: var(--charcoal);
  color: var(--cream);
}

.page-news .picks .eyebrow {
  color: var(--mint);
}

.page-news .picks h2 {
  font-family: var(--font-narrow);
  font-size: clamp(26px, 4.4vw, 36px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--cream);
  margin: 10px 0 0;
}

.page-news .picks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 800px) {
  .page-news .picks-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.page-news .pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(245, 239, 226, .03);
  transition: border-color .22s var(--ease), background .22s var(--ease);
}

.page-news .pick:hover {
  border-color: rgba(52, 224, 192, .55);
  background: rgba(245, 239, 226, .06);
}

.page-news .pick__order {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--mint);
  margin: 0;
}

.page-news .pick h3 {
  font-family: var(--font-narrow);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cream);
  margin: 0;
}

.page-news .pick p {
  font-size: 15px;
  line-height: 1.72;
  color: var(--news-on-dark-dim);
  margin: 0;
}

.page-news .picks__note {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--news-on-dark-dim);
}

.page-news .picks__note a {
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid rgba(52, 224, 192, .4);
  transition: border-color .2s var(--ease);
}

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

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

.page-news .subscribe {
  background: var(--cream);
}

.page-news .subscribe h2 {
  font-family: var(--font-narrow);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 10px 0 18px;
}

.page-news .subscribe .prose {
  font-size: 16px;
  line-height: 1.78;
  color: var(--news-ink-soft);
  margin: 0;
}

.page-news .subscribe-card {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 28px 24px;
  background: var(--cream-dim);
  border-radius: var(--radius);
  border-left: 4px solid var(--mint);
}

@media (min-width: 800px) {
  .page-news .subscribe-card {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding: 34px 32px;
  }
}

.page-news .subscribe-card h3 {
  font-family: var(--font-narrow);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 8px;
}

.page-news .subscribe-card p {
  font-size: 15px;
  line-height: 1.74;
  color: var(--news-ink-soft);
  margin: 0;
}

.page-news .subscribe-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 800px) {
  .page-news .subscribe-card__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- 投稿与合作 ---------- */

.page-news .contribute {
  background: var(--night-deep);
  color: var(--cream);
}

.page-news .contribute .eyebrow {
  color: var(--mint);
}

.page-news .contribute h2 {
  font-family: var(--font-narrow);
  font-size: clamp(26px, 4.4vw, 36px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--cream);
  margin: 10px 0 16px;
}

.page-news .contribute__lede {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--news-on-dark);
  max-width: 42em;
  margin: 0;
}

.page-news .contribute-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 34px;
}

@media (min-width: 700px) {
  .page-news .contribute-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (min-width: 1040px) {
  .page-news .contribute-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-news .contribute-item {
  padding: 22px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: rgba(245, 239, 226, .03);
}

.page-news .contribute-item h3 {
  font-family: var(--font-narrow);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cream);
  margin: 0 0 10px;
}

.page-news .contribute-item p {
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--news-on-dark-dim);
  margin: 0;
}

.page-news .contribute-item a {
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid rgba(52, 224, 192, .4);
  transition: border-color .2s var(--ease);
}

.page-news .contribute-item a:hover {
  border-bottom-color: var(--mint);
}

/* ---------- 窄屏保护 ---------- */

@media (max-width: 420px) {
  .page-news .news-top__actions .btn,
  .page-news .subscribe-card__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .page-news .note__time {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .note::before,
  .page-news .pick,
  .page-news .crumbs a,
  .page-news .contribute-item a,
  .page-news .picks__note a {
    transition: none;
  }
}
<<<END>>>

等等，我注意到输出里漏掉了结尾的 `<<<END>>>` 标记——其实原回答里最后一段是 CSS 列表，结尾应该在最后那个媒体查询块之后。让我重新核对一下：原回答在 `@media (prefers-reduced-motion: reduce) { ... }` 之后直接结束了，这应该是完整的。但为了保险起见，在最终答案里我应该确保这段 HTML 和 CSS 是对应的，并以 `<<<END>>>` 收尾？不过原回答最后并没有显式写出 `<<<END>>>`。

实际上按题目要求，只需要产出 `` 和 `` 两个标记，不需要 `<<<END>>>`。原回答的标记顺序是正确的：`` ... `` ... 结束。我上面复述的内容基本是准确的，不应增添额外说明。

我需要做的只是确认原回答的完整性，并把它重新组织成一个清晰的结构再给出。我不应该添加任何原回答中不存在的额外标记或解释。

让我确认一下原回答内容：它包含了完整的 HTML 和 CSS，以 `.page-news .contribute-item a:hover` 和最后的媒体查询收尾。没有多余的解释文本。整体结构符合要求。我直接重新输出这个回答即可。
<main id="main-content" class="page-news">

  <section class="section news-top">
    <div class="wrap">
      <nav class="crumbs" aria-label="面包屑">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">看台手记</li>
        </ol>
      </nav>

      <div class="news-top__grid">
        <div class="news-top__text reveal">
          <p class="eyebrow">场刊 · 每轮翻两页</p>
          <h1>看台手记</h1>
          <p class="lede">比赛间隙里读得进去的东西：这一周的关注联赛有什么动静，进失球分布图上的哪一段在变，去现场该从哪个口进场。</p>
          <p>完美体育看台的编辑们从一个赛季的头一轮写到最后一轮。你同时追着好几路联赛的时候，手记帮你把每一场值得盯的比赛提前圈出来；你第一次带家人去看球的时候，手记帮你把出发时间、入场口和座位分区对上。</p>
          <div class="news-top__actions">
            <a class="btn btn--quiet" href="#notes-list">翻到最新手记</a>
            <a class="btn btn--quiet" href="#subscribe">订阅更新提醒</a>
          </div>
          <p class="news-top__meta"><span class="num">每周 3–4 篇</span> · 赛季关键阶段加密到每天一篇</p>
        </div>

        <figure class="news-top__media media reveal" style="--d:120ms">
          <div class="media__frame" data-label="编辑手稿">
            <img class="media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="编辑桌上的赛程手稿、荧光笔与一杯咖啡的俯拍特写">
          </div>
          <figcaption class="media__caption">一张打了记号的赛程表，一支荧光笔，其余交给比赛。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section section--dark news-rhythm" id="rhythm">
    <div class="wrap">
      <p class="eyebrow">比赛日节奏</p>
      <h2>一个比赛日里，这三个时点会亮起来</h2>
      <p class="news-rhythm__lede">不必整天挂在页面上。跟着这三个时点回来，基本能把当天发生的事看全。</p>

      <ol class="rhythm-track">
        <li class="rhythm-track__item reveal">
          <span class="rhythm-track__time num">09:00</span>
          <h3>当日轮次预告上线</h3>
          <p>今天要踢的场次按开球时间排好，你关注列表里的球队会排在最前面，一眼就知道该请假看哪一场。</p>
        </li>
        <li class="rhythm-track__item reveal" style="--d:80ms">
          <span class="rhythm-track__time num">开球至终场</span>
          <h3>比分与主客场表现同页走动</h3>
          <p>事件级更新延迟约 15 秒。一家人凑在一块儿看，谁也不用抢屏幕，主队客队的数据各占一边。</p>
        </li>
        <li class="rhythm-track__item reveal" style="--d:160ms">
          <span class="rhythm-track__time num">赛后 30 分钟内</span>
          <h3>赛果与统计小结补齐</h3>
          <p>进失球分布的 6 个区间填满，主客两色分开标注，复盘整场走向时不用自己再回翻。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section" id="series">
    <div class="wrap">
      <p class="eyebrow">四个系列</p>
      <h2>你回来找什么，手记就分哪一路</h2>

      <div class="series-grid">
        <article class="series-card series-card--season reveal">
          <span class="tag tag--season">赛季观察</span>
          <h3>写给一路追好几路联赛的人</h3>
          <p>从赛季前半段写到关键轮次，记下哪几支队伍换了节奏、哪些时段容易出球、积分榜中段什么时候开始挤。</p>
          <p class="series-card__freq num">每周 1–2 篇</p>
        </article>

        <article class="series-card series-card--read reveal" style="--d:60ms">
          <span class="tag">读表入门</span>
          <h3>把分段分布图读成一句话</h3>
          <p>15 分钟一段、6 个区间、主客两色分开——从零开始学会在比赛间隙扫一眼就看懂场上走位。</p>
          <p class="series-card__freq num">每周 1 篇</p>
        </article>

        <article class="series-card series-card--venue reveal" style="--d:120ms">
          <span class="tag tag--season">场馆笔记</span>
          <h3>出发前把入场口和座位对好</h3>
          <p>按城市、座位区域、入场口三种方式切进 268 座场馆的对照里，把交通、安检与入场时间算进当天的行程。</p>
          <p class="series-card__freq num">关键轮次前每周 1–2 篇</p>
        </article>

        <article class="series-card series-card--update reveal" style="--d:180ms">
          <span class="tag">栏目更新</span>
          <h3>手记与栏目自己的变化</h3>
          <p>哪个栏目新增了筛选方式、哪个入口换了位置、关注列表能存几支球队，都在这一路里交代清楚。</p>
          <p class="series-card__freq num">每两周 1 篇</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section notes-wrap" id="notes-list">
    <div class="wrap">
      <div class="notes-head">
        <div>
          <p class="eyebrow">手记列表</p>
          <h2>最近这些天写下来的</h2>
        </div>
        <p class="notes-head__count"><span class="num">12</span> 篇 · 按写作先后排列</p>
      </div>

      <ol class="notes">
        <li class="note note--lead reveal">
          <div class="note__index"><span class="num">01</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag tag--season">赛季观察</span>
              <span class="note__time num">本周比赛日</span>
            </div>
            <h3 class="note__title">密集赛程周里，先盯哪一场</h3>
            <p class="note__excerpt">一周三赛的安排下，各队的轮换幅度差得很明显。先把替补出场比例最高的那两场圈出来，往往更容易看到意外的比分走向。</p>
            <figure class="note__figure media">
              <div class="media__frame" data-label="夜场灯光">
                <img loading="lazy" decoding="async" class="media__img" src="{zhanqunpic:h:650w:1000}" width="1000" height="650" alt="密集赛程期间的球场灯光与看台人群剪影">
              </div>
            </figure>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">02</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag">读表入门</span>
              <span class="note__time num">本周内</span>
            </div>
            <h3 class="note__title">进失球分布图，从左还是从右读起</h3>
            <p class="note__excerpt">第一次看这种图的人常常从中间开始找，其实先看两端更容易抓重点。这篇把 6 个区间按先后顺序挨个讲一遍。</p>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">03</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag tag--season">场馆笔记</span>
              <span class="note__time num">上一轮之后</span>
            </div>
            <h3 class="note__title">冬夜里从地铁口走到看台的那一段路</h3>
            <p class="note__excerpt">夜场散场时最容易堵在出场通道。对照表里标出的第二入场口，比正门快十五分钟，尤其适合带小孩的家庭。</p>
            <figure class="note__figure media">
              <div class="media__frame" data-label="入场闸机">
                <img loading="lazy" decoding="async" class="media__img" src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="球场入场口闸机与指示牌的局部特写">
              </div>
            </figure>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">04</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag">读表入门</span>
              <span class="note__time num">上周末</span>
            </div>
            <h3 class="note__title">主客两队的分布放在同一屏，先比哪个区间</h3>
            <p class="note__excerpt">同一屏里两条分布叠着看，最值得比的是开场的头 15 分钟和收官前的最后 15 分钟——这两段最能看出球队的心态。</p>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">05</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag">栏目更新</span>
              <span class="note__time num">赛季前半段</span>
            </div>
            <h3 class="note__title">场馆对照并入新赛季索引之后</h3>
            <p class="note__excerpt">旧的入场指引并入新赛季场馆索引，筛选方式没变，城市、座位区域、入场口三条路都还在，老用户原来怎么查现在还是怎么查。</p>
            <figure class="note__figure media">
              <div class="media__frame" data-label="数据列表">
                <img loading="lazy" decoding="async" class="media__img" src="{zhanqunpic:h:500w:1200}" width="1200" height="500" alt="桌面屏幕上呈现的数据列表抽象画面">
              </div>
            </figure>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">06</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag tag--season">赛季观察</span>
              <span class="note__time num">赛季前半段</span>
            </div>
            <h3 class="note__title">积分榜中段的三支队伍，最近在往回追</h3>
            <p class="note__excerpt">中段排名的变化不像榜首那么显眼，但赛程强度和主客场分布摆在一起看，能提前看出谁在往上走。</p>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">07</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag tag--season">场馆笔记</span>
              <span class="note__time num">赛季前半段</span>
            </div>
            <h3 class="note__title">带家人看球，先定入场口再挑座位</h3>
            <p class="note__excerpt">四口人一起进场，座位分区和入场口是要一起定的。这篇按家庭成员年龄排了一遍最顺的走法，附三个城市的例子。</p>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">08</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag">读表入门</span>
              <span class="note__time num">赛季前半段</span>
            </div>
            <h3 class="note__title">为什么一场比赛要切成 6 段来看</h3>
            <p class="note__excerpt">15 分钟一段的切法不是随手定的。切成 6 段之后，加时、补时和体能拐点都会自然落到某一格里，读起来不费劲。</p>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">09</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag tag--season">赛季观察</span>
              <span class="note__time num">赛季开赛前</span>
            </div>
            <h3 class="note__title">赛季前半段最容易被忽略的十五分钟</h3>
            <p class="note__excerpt">开场哨响到第一个补水点的这段时间，往往决定了整场比赛的基调。追多路联赛的人，可以只盯这一段也不会漏掉重点。</p>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">10</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag tag--season">场馆笔记</span>
              <span class="note__time num">赛季开赛前</span>
            </div>
            <h3 class="note__title">入场口和最近的地铁站，怎么一一对上</h3>
            <p class="note__excerpt">不同城市的场馆，出口编号和入场口字母并不总是顺着排。对照表里把对应关系写清楚了，出发前扫一眼就行。</p>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">11</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag">栏目更新</span>
              <span class="note__time num">赛季开赛前</span>
            </div>
            <h3 class="note__title">手记在关键阶段的更新节奏</h3>
            <p class="note__excerpt">平时每周 3 到 4 篇，到了争冠和保级阶段会加密到每天一篇。这一篇把不同阶段的节奏讲清楚，方便你安排回访。</p>
          </div>
        </li>

        <li class="note reveal">
          <div class="note__index"><span class="num">12</span></div>
          <div class="note__main">
            <div class="note__head">
              <span class="tag tag--season">赛季观察</span>
              <span class="note__time num">赛季开赛前</span>
            </div>
            <h3 class="note__title">轮次间隙里，哪些队伍的状态在往上走</h3>
            <p class="note__excerpt">没有比赛的这一周反而是观察的好时机。把近三轮的进失球段落放在一起比，状态曲线比积分更早转弯。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--charcoal picks" id="picks">
    <div class="wrap">
      <p class="eyebrow">编辑推荐</p>
      <h2>第一次来，按这个顺序读三篇</h2>

      <div class="picks-grid">
        <article class="pick reveal">
          <p class="pick__order">先读 01</p>
          <h3>进失球分布图，从左还是从右读起</h3>
          <p>读完这一篇，你在比赛间隙扫一眼分布图就知道该往哪个区间看，不用再对着横轴发愣。</p>
        </article>

        <article class="pick reveal" style="--d:80ms">
          <p class="pick__order">再读 02</p>
          <h3>带家人看球，先定入场口再挑座位</h3>
          <p>手里同时有老人和小孩的时候，先想清楚从哪个口进，再挑座位，整趟出行的顺序会顺很多。</p>
        </article>

        <article class="pick reveal" style="--d:160ms">
          <p class="pick__order">然后读 03</p>
          <h3>密集赛程周里，先盯哪一场</h3>
          <p>追着好几路联赛的人，最缺的是取舍。这篇讲怎么用轮换幅度和主客场分布，一周里挑出两场重点。</p>
        </article>
      </div>

      <p class="picks__note">想一次看全进失球分布和轮次时间轴，直接去 <a href="/projects/">栏目与工具</a>。</p>
    </div>
  </section>

  <section class="section subscribe" id="subscribe">
    <div class="wrap wrap--narrow">
      <p class="eyebrow">订阅与提醒</p>
      <h2>不登录也能看完，登录只是让提醒找到你</h2>
      <p class="prose">手记列表、轮次时间轴和场馆对照全部不用登录。注册看台用户之后，可以同时关注最多 8 支球队和 5 个联赛，新赛季开始前的球队与场馆信息更新、你关注球队的比赛日预告和赛后小结，都会推到你的提醒里。</p>

      <div class="subscribe-card reveal">
        <div class="subscribe-card__body">
          <h3>想让手记先到你的收件箱</h3>
          <p>把想追的联赛和球队告诉客服，我们会把你加进对应的更新提醒名单。比赛日 09:00 的轮次预告、赛后 30 分钟内的数据小结，都能提前提醒一句。</p>
        </div>
        <div class="subscribe-card__actions">
          <a class="btn btn--accent" href="/feedback/">告诉我们要提醒你什么</a>
          <a class="btn btn--quiet" href="/faq/">先看常见问题</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--dark contribute" id="contribute">
    <div class="wrap">
      <p class="eyebrow">投稿与合作</p>
      <h2>坐在看台里的朋友，也可以把手记写下来</h2>
      <p class="contribute__lede">我们和 12 家球迷社群、6 个城市业余联赛组织保持着内容合作。你在现场看到的入场排队情况、某个入场口的开放时段变化、自驾停车的新规定，都是手记里最有用的素材。</p>

      <div class="contribute-grid">
        <div class="contribute-item reveal">
          <h3>提供线索</h3>
          <p>把看到的现场情况、某个城市的交通变化、某座场馆的入场调整说清楚即可。我们收到后会先核对，再决定放在哪一路手记里。</p>
        </div>
        <div class="contribute-item reveal" style="--d:60ms">
          <h3>长期供稿</h3>
          <p>熟悉某座城市的场馆、或者长期追某一个联赛，可以成为固定供稿人。下一篇写什么，我们一起定。</p>
        </div>
        <div class="contribute-item reveal" style="--d:120ms">
          <h3>社群合作</h3>
          <p>球迷社群和城市业余联赛组织可以把活动信息交给我们，合适的内容会排进手记的更新序列。</p>
        </div>
        <div class="contribute-item reveal" style="--d:180ms">
          <h3>怎么开始</h3>
          <p>去<a href="/feedback/">联系与反馈</a>页面留下你的想法，写清所在城市和想聊的话题，客服会在工作日 9:00–18:00 回复你。也可以先看看<a href="/values/">看台主张</a>，了解我们写手记的方式。</p>
        </div>
      </div>
    </div>
  </section>

</main>

.page-news {
  --news-rule: rgba(152, 164, 169, .28);
  --news-on-dark: rgba(245, 239, 226, .86);
  --news-on-dark-dim: rgba(245, 239, 226, .64);
  --news-ink-soft: rgba(36, 28, 22, .78);

  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
}

.page-news .section {
  padding-block: 48px;
}

@media (min-width: 900px) {
  .page-news .section {
    padding-block: 72px;
  }
}

/* ---------- 首屏 ---------- */

.page-news .news-top {
  padding-block: 32px 40px;
  background: var(--cream);
}

@media (min-width: 900px) {
  .page-news .news-top {
    padding-block: 48px 64px;
  }
}

.page-news .crumbs {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--steel);
}

.page-news .crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.page-news .crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--hairline);
}

.page-news .crumbs a {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.page-news .crumbs a:hover {
  color: var(--ink);
  border-color: var(--mint);
}

.page-news .news-top__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 22px;
}

@media (min-width: 900px) {
  .page-news .news-top__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: start;
  }
}

.page-news .news-top__text h1 {
  font-family: var(--font-narrow);
  font-size: clamp(40px, 9vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 12px 0 18px;
  color: var(--ink);
}

.page-news .news-top__text .lede {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 34em;
}

.page-news .news-top__text > p {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--news-ink-soft);
  margin: 0 0 14px;
  max-width: 36em;
}

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

.page-news .news-top__meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--steel);
  margin-top: 18px;
}

.page-news .news-top__media {
  margin: 0;
}

.page-news .news-top__media .media__frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-dim);
}

.page-news .news-top__media .media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-news .news-top__media .media__caption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--steel);
  margin-top: 10px;
  line-height: 1.6;
}

/* ---------- 比赛日节奏 ---------- */

.page-news .news-rhythm {
  background: var(--night);
  color: var(--cream);
  position: relative;
}

.page-news .news-rhythm::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--hairline);
}

.page-news .news-rhythm .eyebrow {
  color: var(--mint);
}

.page-news .news-rhythm h2 {
  font-family: var(--font-narrow);
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--cream);
  margin: 10px 0 14px;
}

.page-news .news-rhythm__lede {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--news-on-dark);
  max-width: 38em;
  margin: 0;
}

.page-news .rhythm-track {
  list-style: none;
  margin: 34px 0 0;
  padding: 0 0 0 20px;
  border-left: 1px solid rgba(52, 224, 192, .35);
}

@media (min-width: 820px) {
  .page-news .rhythm-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    border-left: 0;
    border-top: 1px solid rgba(52, 224, 192, .35);
  }
}

.page-news .rhythm-track__item {
  position: relative;
  padding: 22px 0 22px 18px;
}

.page-news .rhythm-track__item + .rhythm-track__item {
  border-top: 1px solid var(--hairline);
}

.page-news .rhythm-track__item::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(52, 224, 192, .16);
  left: -25px;
  top: 30px;
}

@media (min-width: 820px) {
  .page-news .rhythm-track__item {
    padding: 28px 26px 8px 24px;
    border-top: 0;
  }

  .page-news .rhythm-track__item + .rhythm-track__item {
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }

  .page-news .rhythm-track__item::before {
    left: 24px;
    top: -5px;
  }
}

.page-news .rhythm-track__time {
  display: block;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .06em;
  color: var(--lamp);
  margin-bottom: 10px;
}

.page-news .rhythm-track__item h3 {
  font-family: var(--font-narrow);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cream);
  margin: 0 0 8px;
}

.page-news .rhythm-track__item p {
  font-size: 15px;
  line-height: 1.74;
  color: var(--news-on-dark-dim);
  margin: 0;
}

/* ---------- 四个系列 ---------- */

.page-news #series {
  background: var(--cream);
}

.page-news #series h2 {
  font-family: var(--font-narrow);
  font-size: clamp(26px, 4.2vw, 36px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--ink);
  margin: 10px 0 0;
}

.page-news .series-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

@media (min-width: 700px) {
  .page-news .series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

.page-news .series-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 20px;
  background: var(--cream-dim);
  border-radius: var(--radius);
  border-top: 3px solid var(--brick);
}

.page-news .series-card--read {
  border-top-color: var(--mint);
}

.page-news .series-card--venue {
  border-top-color: var(--orange);
}

.page-news .series-card--update {
  border-top-color: var(--steel);
}

.page-news .series-card .tag {
  align-self: flex-start;
}

.page-news .series-card h3 {
  font-family: var(--font-narrow);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.page-news .series-card p {
  font-size: 15px;
  line-height: 1.72;
  color: var(--news-ink-soft);
  margin: 0;
}

.page-news .series-card__freq {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--news-rule);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--steel);
}

/* ---------- 手记列表 ---------- */

.page-news .notes-wrap {
  background: var(--cream);
  position: relative;
}

.page-news .notes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--news-rule);
}

.page-news .notes-head h2 {
  font-family: var(--font-narrow);
  font-size: clamp(26px, 4.2vw, 36px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--ink);
  margin: 8px 0 0;
}

.page-news .notes-head__count {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--steel);
  margin: 0 0 4px;
}

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

.page-news .note {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 26px 0;
  border-bottom: 1px solid var(--news-rule);
}

@media (min-width: 760px) {
  .page-news .note {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 22px;
    padding: 34px 0;
  }
}

.page-news .note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 3px;
  border-radius: 2px;
  background: var(--mint);
  opacity: 0;
  transition: opacity .22s var(--ease);
}

@media (min-width: 760px) {
  .page-news .note::before {
    top: 34px;
    bottom: 34px;
  }
}

.page-news .note:hover::before,
.page-news .note:focus-within::before {
  opacity: 1;
}

.page-news .note__index {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--steel);
  padding-top: 4px;
}

.page-news .note__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.page-news .note__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--steel);
  white-space: nowrap;
}

.page-news .note__title {
  font-family: var(--font-narrow);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 8px;
}

@media (min-width: 760px) {
  .page-news .note__title {
    font-size: 23px;
  }
}

.page-news .note__excerpt {
  font-size: 15.5px;
  line-height: 1.74;
  color: var(--news-ink-soft);
  margin: 0;
  max-width: 46em;
}

.page-news .note--lead {
  padding-top: 30px;
  padding-bottom: 36px;
  background: linear-gradient(180deg, rgba(230, 220, 200, .45), rgba(230, 220, 200, 0));
}

.page-news .note--lead .note__title {
  font-size: 24px;
}

@media (min-width: 760px) {
  .page-news .note--lead .note__title {
    font-size: 30px;
  }
}

.page-news .note__figure {
  margin: 18px 0 0;
  max-width: 100%;
}

.page-news .note__figure .media__frame {
  aspect-ratio: 20 / 13;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--cream-dim);
}

.page-news .note--lead .note__figure .media__frame {
  aspect-ratio: 20 / 11;
}

@media (min-width: 900px) {
  .page-news .note--lead .note__figure .media__frame {
    aspect-ratio: 20 / 8;
  }
}

.page-news .note__figure .media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 编辑推荐 ---------- */

.page-news .picks {
  background: var(--charcoal);
  color: var(--cream);
}

.page-news .picks .eyebrow {
  color: var(--mint);
}

.page-news .picks h2 {
  font-family: var(--font-narrow);
  font-size: clamp(26px, 4.4vw, 36px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--cream);
  margin: 10px 0 0;
}

.page-news .picks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 800px) {
  .page-news .picks-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.page-news .pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(245, 239, 226, .03);
  transition: border-color .22s var(--ease), background .22s var(--ease);
}

.page-news .pick:hover {
  border-color: rgba(52, 224, 192, .55);
  background: rgba(245, 239, 226, .06);
}

.page-news .pick__order {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--mint);
  margin: 0;
}

.page-news .pick h3 {
  font-family: var(--font-narrow);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cream);
  margin: 0;
}

.page-news .pick p {
  font-size: 15px;
  line-height: 1.72;
  color: var(--news-on-dark-dim);
  margin: 0;
}

.page-news .picks__note {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--news-on-dark-dim);
}

.page-news .picks__note a {
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid rgba(52, 224, 192, .4);
  transition: border-color .2s var(--ease);
}

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

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

.page-news .subscribe {
  background: var(--cream);
}

.page-news .subscribe h2 {
  font-family: var(--font-narrow);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 10px 0 18px;
}

.page-news .subscribe .prose {
  font-size: 16px;
  line-height: 1.78;
  color: var(--news-ink-soft);
  margin: 0;
}

.page-news .subscribe-card {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 28px 24px;
  background: var(--cream-dim);
  border-radius: var(--radius);
  border-left: 4px solid var(--mint);
}

@media (min-width: 800px) {
  .page-news .subscribe-card {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding: 34px 32px;
  }
}

.page-news .subscribe-card h3 {
  font-family: var(--font-narrow);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 8px;
}

.page-news .subscribe-card p {
  font-size: 15px;
  line-height: 1.74;
  color: var(--news-ink-soft);
  margin: 0;
}

.page-news .subscribe-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 800px) {
  .page-news .subscribe-card__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- 投稿与合作 ---------- */

.page-news .contribute {
  background: var(--night-deep);
  color: var(--cream);
}

.page-news .contribute .eyebrow {
  color: var(--mint);
}

.page-news .contribute h2 {
  font-family: var(--font-narrow);
  font-size: clamp(26px, 4.4vw, 36px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--cream);
  margin: 10px 0 16px;
}

.page-news .contribute__lede {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--news-on-dark);
  max-width: 42em;
  margin: 0;
}

.page-news .contribute-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 34px;
}

@media (min-width: 700px) {
  .page-news .contribute-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (min-width: 1040px) {
  .page-news .contribute-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-news .contribute-item {
  padding: 22px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: rgba(245, 239, 226, .03);
}

.page-news .contribute-item h3 {
  font-family: var(--font-narrow);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cream);
  margin: 0 0 10px;
}

.page-news .contribute-item p {
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--news-on-dark-dim);
  margin: 0;
}

.page-news .contribute-item a {
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid rgba(52, 224, 192, .4);
  transition: border-color .2s var(--ease);
}

.page-news .contribute-item a:hover {
  border-bottom-color: var(--mint);
}

/* ---------- 窄屏保护 ---------- */

@media (max-width: 420px) {
  .page-news .news-top__actions .btn,
  .page-news .subscribe-card__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .page-news .note__time {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .note::before,
  .page-news .pick,
  .page-news .crumbs a,
  .page-news .contribute-item a,
  .page-news .picks__note a {
    transition: none;
  }
}